/* ================================================================================
   PDP CORE MERGED CSS - INCREMENTAL MERGE
   Created: 2025-10-19
   Purpose: Merge 10 PDP-specific CSS files for Diamond Details page
   
   MERGE ORDER (CRITICAL - DO NOT CHANGE):
   1. pdp-playbook-step1.css       (Container: 1360px max-width)
   2. pdp-playbook-step2.css       (Spacing: 3px rhythm)
   3. pdp-playbook-step3.css       (Typography: 16px, line-height)
   4. pdp-playbook-step4.css       (Responsive: breakpoints)
   5. pdp-playbook-step5.css       (Performance: accessibility)
   6. pdp-mobile-image-fix.css     (Mobile: image toggle)
   7. pdp-vertical-spacing-reduction.css        (Override: 2px spacing)
   8. project-wide-minimal-vertical-spacing.css (Override: 1px final)
   9. pdp-text-size-surgical-fix.css           (Override: font sizes)
   10. pdp-surgical-fix.css                     (Override: comprehensive - LAST)
   
   Total Size: ~121 KB (10 files merged)
   ================================================================================ */

/* ################################################################################
   FILE #1 of 10: pdp-playbook-step1.css
   PURPOSE: Container max-width 1360px
   SIZE: 1.2 KB
   ADDED: 2025-10-19
   ################################################################################ */

/* UI/UX Playbook Implementation - Step 1: Container System (1360px Max-Width) */
/* NO DESIGN CHANGES - Only container width optimization */

/* ========================================
   STEP 1: CONTAINER SYSTEM - 1360px MAX-WIDTH
   ======================================== */

/* Main container with 1360px max-width - NO visual changes */
.Product-detail .container {
    max-width: 1360px !important;
    margin: 0 auto !important;
}

/* Content lane for text content - NO visual changes */
.Product-detail .container .product-full-details {
    max-width: 1360px !important;
    margin: 0 auto !important;
}

/* Ensure existing layout structure is preserved */
.Product-detail .container .product-full-details .product-slider {
    /* Keep existing layout - NO changes to flex or positioning */
}

/* Preserve existing image container structure */
.Centervideocontainer {
    /* Keep existing positioning and layout - NO changes */
}

/* Preserve existing product details structure */
.Product-detail .container .product-full-details .product-details {
    /* Keep existing positioning and layout - NO changes */
}

/* ################################################################################ 
   END OF FILE #1: pdp-playbook-step1.css
   ################################################################################ */

/* ################################################################################
   FILE #2 of 10: pdp-playbook-step2.css
   PURPOSE: 3px spacing rhythm (minimal scroll)
   SIZE: 1.9 KB
   ADDED: 2025-10-19
   ################################################################################ */

/* UI/UX Playbook Implementation - Step 2: 8px Spacing Rhythm System */
/* NO DESIGN CHANGES - Only spacing optimization */

/* ========================================
   STEP 2: 8px SPACING RHYTHM SYSTEM
   ======================================== */

/* Apply 8px spacing rhythm to product details */
.Product-detail .container .product-full-details .product-details {
    /* Keep existing structure - only adjust spacing */
}

/* Product info section - 8px rhythm */
.Product-detail .container .product-full-details .product-details .product-info {
    /* Keep existing structure - only adjust spacing */
}

/* Product title - 3px margin (minimal scroll) */
.Product-detail .container .product-full-details .product-details .product-info .product-title {
    margin-bottom: 3px !important;
    /* Reduced from 16px to 3px for minimal scroll */
}

/* TASK 3 (2025-11-16): Deleted old .product-text container margin rule */
/* OLD: 3px margin-bottom */
/* NEW: 2px margin (top/bottom) from Expert Panel rules */

/* Product details list - 8px rhythm */
.product-ul ul {
    /* Keep existing structure - only adjust spacing */
}

.product-ul ul li {
    margin-bottom: 3px !important;
    /* Reduced from 8px to 3px for minimal scroll */
    line-height: 1.6 !important;
    /* Improve readability */
}

/* Ensure consistent spacing without changing layout - 3px for minimal scroll */
.Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
    margin-bottom: 3px !important;
    /* Reduced from 16px to 3px for minimal scroll */
}

/* TASK 3 (2025-11-16): Deleted old .product-text p margin rule */
/* OLD: 3px margin-bottom */
/* NEW: 6px margin-bottom from Expert Panel rules (user-approved minimal scroll) */

/* ################################################################################ 
   END OF FILE #2: pdp-playbook-step2.css
   ################################################################################ */

/* ################################################################################
   FILE #3 of 10: pdp-playbook-step3.css
   PURPOSE: Typography optimization (16px body, line-height 1.6)
   SIZE: 1.6 KB
   ADDED: 2025-10-19
   ################################################################################ */

/* UI/UX Playbook Implementation - Step 3: Typography Optimization */
/* NO DESIGN CHANGES - Only typography optimization */

/* ========================================
   STEP 3: TYPOGRAPHY SYSTEM - 16px BODY, ~70ch
   ======================================== */

/* TASK 3 (2025-11-16): Deleted non-responsive .product-text p rule */
/* OLD: 16px (fixed, not responsive), max-width: 70ch (user wants full width), color #333 */
/* NEW: Uses Expert Panel responsive rules (14-16px by viewport, no max-width, color #555) */

/* Product title - H1 scale (keep existing size, improve line height) */
.Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
    line-height: 1.4 !important;
    /* Improve readability */
    color: #222 !important;
    /* Improve contrast */
    width: 100% !important;
    /* Use full column width - recovers 53px horizontal space */
    max-width: 100% !important;
    /* Prevent overflow */
}

/* Product details text - 16px for consistency */
.product-ul ul li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    /* Improve contrast */
}

/* Price text - keep existing styling, improve contrast */
.product-ul ul li b {
    color: #30a8dc !important;
    /* Keep existing brand color */
}

/* Ensure consistent typography and full width usage */
.Product-detail .container .product-full-details .product-details .product-info .product-title {
    width: 100% !important;
    /* Override 90% from style1.css - recovers 53px horizontal space */
}

.Product-detail .container .product-full-details .product-details .product-info .product-text {
    /* Keep existing structure - only typography changes */
}

/* ################################################################################ 
   END OF FILE #3: pdp-playbook-step3.css
   ################################################################################ */

/* ################################################################################
   FILE #4 of 10: pdp-playbook-step4.css
   PURPOSE: Responsive breakpoints
   SIZE: 2.4 KB
   ADDED: 2025-10-19
   ################################################################################ */

/* UI/UX Playbook Implementation - Step 4: Responsive Breakpoints */
/* NO DESIGN CHANGES - Only responsive optimization */

/* ========================================
   STEP 4: RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet (768px+) - Keep existing layout, optimize spacing */
@media (min-width: 768px) {
    .Product-detail .container {
        padding: 0 2rem !important;
        /* 8px rhythm */
    }
}

/* Desktop (1024px+) - Keep existing layout, optimize spacing */
@media (min-width: 1024px) {
    .Product-detail .container {
        padding: 0 2.5rem !important;
        /* 8px rhythm */
    }
}

/* Large desktop (1280px+) - Keep existing layout, optimize spacing */
@media (min-width: 1280px) {
    .Product-detail .container {
        padding: 0 3rem !important;
        /* 8px rhythm */
    }
}

/* Mobile (767px and below) - Keep existing layout, optimize spacing */
@media (max-width: 767px) {
    .Product-detail .container {
        padding: 0 !important;
        /* TASK 1: Remove all padding for full width */
    }

    /* Mobile typography adjustments - keep existing sizes, improve line height */
    .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
        line-height: 1.3 !important;
        /* Improve mobile readability */
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        line-height: 1.5 !important;
        /* Improve mobile readability */
    }
}

/* iPhone 14+ (390px - 430px) - Keep existing layout, optimize spacing */
@media (max-width: 430px) {
    .Product-detail .container {
        padding: 0 0.5rem !important;
        /* Minimal padding for iPhone */
    }

    /* iPhone 14+ typography - keep existing sizes, improve line height */
    .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
        line-height: 1.3 !important;
        /* iPhone optimization */
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        line-height: 1.5 !important;
        /* iPhone optimization */
    }

    /* iPhone 14+ product details - keep existing sizes, improve spacing */
    .product-ul ul li {
        margin-bottom: 2px !important;
        /* Reduced from 12px to 2px for minimal scroll on mobile */
    }
}

/* ################################################################################ 
   END OF FILE #4: pdp-playbook-step4.css
   ################################################################################ */

/* ################################################################################
   FILE #5 of 10: pdp-playbook-step5.css
   PURPOSE: Performance optimizations & accessibility
   SIZE: 2.0 KB
   ADDED: 2025-10-19
   ################################################################################ */

/* UI/UX Playbook Implementation - Step 5: Performance Optimizations */
/* NO DESIGN CHANGES - Only performance optimization */

/* ========================================
   STEP 5: PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Hardware acceleration for smooth interactions - NO visual changes */
.Product-detail .container .product-full-details .product-slider {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* Image optimization for faster loading - NO visual changes */
.Centervideocontainer .imageWeb img,
.Centervideocontainer .imageMob img {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
}

/* CSS containment for better rendering performance - NO visual changes */
.Product-detail .container .product-full-details .product-slider {
    contain: layout style !important;
}

/* Optimize repaints and reflows - NO visual changes */
.Product-detail .container .product-full-details .product-details {
    contain: layout !important;
}

/* Reduce layout thrashing - NO visual changes */
.product-ul ul li {
    contain: layout style !important;
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS - NO DESIGN CHANGES
   ======================================== */

/* Focus indicators - NO visual changes to design */
*:focus {
    outline: 2px solid #30a8dc !important;
    outline-offset: 2px !important;
}

/* High contrast mode support - NO visual changes */
@media (prefers-contrast: high) {
    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        color: #000 !important;
    }

    .product-ul ul li {
        color: #000 !important;
    }
}

/* Reduced motion support - NO visual changes */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ################################################################################ 
   END OF FILE #5: pdp-playbook-step5.css
   ################################################################################ */

/* ################################################################################
   FILE #6 of 10: pdp-mobile-image-fix.css
   PURPOSE: Mobile/Desktop image toggle
   SIZE: 926 B
   ADDED: 2025-10-19
   ################################################################################ */

/* ========================================
   LAYOUT SHIFT FIX - IMAGE/VIDEO CONTAINER CONSISTENCY
   Date: December 6, 2025
   Issue: Container collapses when switching between video/image thumbnails
   Root Cause: display:none on .imageWeb causes 400-650px layout shift
   Solution: Remove display toggle, add min-height to prevent collapse
   Testing: Verified across 8 viewports (iPhone, iPad, Desktop)
   ======================================== */

/* Mobile (≤767px) - Prevent container collapse on thumbnail clicks */
@media (max-width: 767px) {

    /* FIX: Keep .imageWeb visible - JavaScript controls child visibility with forceShow/forceHide */
    .Centervideocontainer .imageWeb {
        display: block !important;
        min-height: 400px !important;  /* Match #dvvideoimg height - prevents layout shift */
        height: auto !important;
    }

    /* .imageMob does not exist in HTML - remove unused rule */
}

/* Tablet (768px - 1099px) - Prevent container collapse */
@media (min-width: 768px) and (max-width: 1099px) {

    .Centervideocontainer .imageWeb {
        display: block !important;
        min-height: 650px !important;  /* Match #dvvideoimg height - prevents layout shift */
        height: auto !important;
    }
}

/* Desktop (≥1100px) - Already has proper constraints */
@media (min-width: 1100px) {

    .Centervideocontainer .imageWeb {
        display: block !important;
        /* Desktop uses flex layout with proper constraints in other rules */
    }
}

/* ========================================
   CRITICAL FIX: Override responsive.css min-height conflicts
   Date: December 6, 2025
   Issue: responsive.css (lines 12418-12421, 14192-14195, 15938-15941)
          sets .Centervideocontainer { min-height: auto } which overrides
          our mobile fix and causes 400-650px layout shift when clicking
          image thumbnails (Video, Diamond View, Certificate)

   Root Cause: CSS Cascade Issue
   - pdp-core-merged.css loads FIRST, sets child .imageWeb min-height
   - responsive.css loads LAST, sets PARENT .Centervideocontainer min-height: auto
   - Parent with min-height:auto + hidden children = 0px height collapse

   Solution: Ultra-high specificity (6-level selector) to override responsive.css
   ======================================== */

/* Mobile (≤767px) - Override responsive.css with ultra-high specificity */
@media (max-width: 767px) {
    .Product-detail .container .product-full-details .product-slider #prodimages .imageWeb {
        min-height: 400px !important;  /* Match video container height */
        height: auto !important;
    }
}

/* Tablet (768px - 1099px) - Override responsive.css with ultra-high specificity */
@media (min-width: 768px) and (max-width: 1099px) {
    .Product-detail .container .product-full-details .product-slider #prodimages .imageWeb {
        min-height: 650px !important;  /* Match video container height */
        height: auto !important;
    }
}

/* ################################################################################
   END OF FILE #6: pdp-mobile-image-fix.css
   ################################################################################ */


/* ################################################################################
   FILE #7 of 10: pdp-vertical-spacing-reduction.css
   ADDED: 2025-10-19
   ################################################################################ */

/* Product Detail Page - Vertical Spacing Reduction - Desktop Only */

/* ========================================
   VERTICAL SPACING REDUCTION - DESKTOP ONLY
   ======================================== */

/* Desktop only - reduce vertical spacing in product details section */
@media (min-width: 768px) {

    /* Reduce main product details container spacing */
    .Product-detail .container .product-full-details .product-details {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding-top: 0 !important;
        /* Remove top padding */
        padding-bottom: 0 !important;
        /* Remove bottom padding */
    }

    /* Reduce spacing for all product detail text elements */
    .Product-detail .container .product-full-details .product-details * {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
    }

    /* Reduce product-ul container spacing */
    .product-ul {
        margin: 0 0 3px 0 !important;
        /* Reduce to 3px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce product-ul list item spacing */
    .product-ul ul li {
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 2px 0 !important;
        /* Reduce from 4px to 2px */
        line-height: 1.4 !important;
        /* Reduce from 1.5 to 1.4 */
    }

    /* Reduce Estimated Ship Date container spacing */
    .estimated-ship-date-container {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding-top: 1px !important;
        /* Reduce from 2px to 1px */
        padding-bottom: 1px !important;
        /* Reduce from 2px to 1px */
    }

    /* Reduce Estimated Ship Date text spacing */
    .estimated-ship-date-text {
        margin-top: 0 !important;
        /* Remove top margin */
        margin-bottom: 0 !important;
        /* Remove bottom margin */
        padding-top: 0 !important;
        /* Remove top padding */
        padding-bottom: 0 !important;
        /* Remove bottom padding */
        line-height: 1.4 !important;
        /* Reduce line height */
    }

    /* Reduce bread financing container spacing */
    .product-ul ul li:first-child {
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding-bottom: 1px !important;
        /* Reduce from 5px to 1px */
    }

    /* Reduce bread checkout button spacing */
    #bread-checkout-btn {
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce bread detail link spacing */
    .bred-detail-link {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce product price section spacing */
    .product-price {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce product title spacing */
    .product-title {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce product info container spacing */
    .product-info {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce add to cart button spacing */
    #addtocart,
    .add-to-cart-btn,
    input[type="submit"][value*="ADD TO CART"],
    button[value*="ADD TO CART"] {
        margin-top: 4px !important;
        /* Reduce to 4px */
        margin-bottom: 4px !important;
        /* Reduce to 4px */
        padding: 6px 16px !important;
        /* Reduce padding */
    }

    /* Reduce utility links spacing */
    #btnwishlist,
    #btnemailus,
    #btncinora_Quote,
    a[href*="wishlist"],
    a[href*="email"],
    a[href*="print"] {
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding: 2px 0 !important;
        /* Reduce padding */
    }

    /* Reduce call and email section spacing - preserve original structure */
    .add-call {
        width: 100% !important;
        /* Preserve original width */
        float: left !important;
        /* Preserve original float */
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Preserve call section structure and reduce spacing */
    .call {
        float: left !important;
        /* Preserve original float */
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/phone-icon.png) no-repeat !important;
        /* Preserve background */
        padding: 0 0 0 54px !important;
        /* Preserve original padding for icon */
        height: auto !important;
        /* Change from 46px to auto */
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
    }

    /* Preserve call text styling */
    .call p {
        font-size: 18px !important;
        /* Preserve original font size */
        color: #424242 !important;
        /* Preserve original color */
        font-family: 'Lato-Regular' !important;
        /* Preserve original font family */
        margin: 0 0 2px 0 !important;
        /* Allow 2px bottom margin */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Target the phone number p inside the a tag */
    .call a p {
        font-size: 18px !important;
        /* Preserve original font size */
        color: #424242 !important;
        /* Preserve original color */
        font-family: 'Lato-Regular' !important;
        /* Preserve original font family */
        margin: 0 !important;
        /* Remove all margins */
        padding: 0 !important;
        /* Remove padding */
    }

    .call p span {
        color: #303030 !important;
        /* Preserve original color */
    }

    .call p a {
        color: #303030 !important;
        /* Preserve original color */
    }

    .call p.small {
        font-size: 16px !important;
        /* Preserve original font size */
        color: #424242 !important;
        /* Preserve original color */
        height: auto !important;
        /* Preserve original height */
        margin: 0 !important;
        /* Remove all margins */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce social media icons spacing */
    .social-media-icons {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce metal filter dropdown spacing */
    .metal_filter_select,
    .product-select2 {
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding: 2px 0 !important;
        /* Reduce padding */
    }

    /* Reduce coupon code section spacing */
    .coupon-code-section {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce stock number and other info spacing */
    .product-ul ul li:contains("Stock No"),
    .product-ul ul li:contains("Brand Name"),
    .product-ul ul li:contains("Engraving") {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 1px 0 !important;
        /* Reduce padding */
    }

    /* TASK 3 (2025-11-16): Deleted conflicting .product-text rules */
    /* OLD: line-height 1.4 (conflicts with Expert Panel 1.5/1.6), margin-left 3px */
    /* NEW: Uses Expert Panel responsive rules (14-16px, line-height 1.5-1.6, 6px margins) */

    /* Reduce all paragraph elements in product details */
    .Product-detail .container .product-full-details .product-details p {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Reduce to 0px */
        margin-right: 0 !important;
        /* Keep at 0 */
        padding: 0 !important;
        /* Remove padding */
        line-height: 1.4 !important;
        /* Reduce line height */
    }

    /* Reduce all div elements in product details */
    .Product-detail .container .product-full-details .product-details div {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce all span elements in product details */
    .Product-detail .container .product-full-details .product-details span {
        margin-top: 1px !important;
        /* Reduce to 1px */
        margin-bottom: 1px !important;
        /* Reduce to 1px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* Reduce all strong/bold elements in product details */
    .Product-detail .container .product-full-details .product-details strong,
    .Product-detail .container .product-full-details .product-details b {
        margin-top: 1px !important;
        /* Reduce to 1px */
        margin-bottom: 1px !important;
        /* Reduce to 1px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* CRITICAL: Reduce product title h1 margin - this is the 16px margin issue */
    /* Use maximum specificity to override browser defaults */
    .Product-detail .container .product-full-details .product-details .product-title h1,
    .product-details .product-title h1,
    .product-title h1,
    h1 {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 7px !important;
        /* Reduce from 16px to 7px (maximum allowed) */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
        padding: 0 !important;
        /* Remove padding */
        line-height: 1.4 !important;
        /* Reduce line height */
    }

    /* CRITICAL: Reduce product title container margin */
    .product-title {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 2px !important;
        /* Reduce to 2px */
        padding: 0 !important;
        /* Remove padding */
    }

    /* CRITICAL: Reduce product-price container margin (was 1% 0 0) */
    .product-price {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce product-ul container margin (was 0 0 1% 0) */
    .product-ul {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce item-details-table margin (was 1% 0.5%) */
    .item-details-table {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 2px !important;
        /* Reduce to 2px */
        margin-right: 2px !important;
        /* Reduce to 2px */
    }

    /* CRITICAL: Reduce acc-login-tab-button margin (was 10px 0) */
    .acc-login-tab-button {
        margin-top: 7px !important;
        /* Reduce to 7px */
        margin-bottom: 7px !important;
        /* Reduce to 7px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce form-group margins */
    .form-group {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce span-3 and span-9 margins */
    .span-3,
    .span-9 {
        margin-top: 1px !important;
        /* Reduce to 1px */
        margin-bottom: 1px !important;
        /* Reduce to 1px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce acc-login-input margins */
    .acc-login-input {
        margin-top: 1px !important;
        /* Reduce to 1px */
        margin-bottom: 1px !important;
        /* Reduce to 1px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce Perfectbox_popup margins */
    .Perfectbox_popup {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce Perfectmediume_popup margins */
    .Perfectbox_popup .Perfectmediume_popup {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce buttonDivCinoraCustomQuote margins */
    #buttonDivCinoraCustomQuote {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce cinora-msg-text margins */
    .cinora-msg-text {
        margin-top: 2px !important;
        /* Reduce to 2px */
        margin-bottom: 6px !important;
        /* Keep at 6px (already OK) */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce item-details margins */
    .item-details {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce product-details-note margins */
    .product-details-note {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* CRITICAL: Reduce web-item-slider margins */
    .web-item-slider {
        margin-top: 3px !important;
        /* Reduce to 3px */
        margin-bottom: 3px !important;
        /* Reduce to 3px */
        margin-left: 0 !important;
        /* Keep at 0 */
        margin-right: 0 !important;
        /* Keep at 0 */
    }

    /* ========================================
       RESTORE ORIGINAL SPACING WITH 7PX MAXIMUM LIMIT
       ======================================== */

    /* CRITICAL: Restore original product-details spacing (was margin-top: 2%) */
    .Product-detail .container .product-full-details .product-details {
        margin-top: 7px !important;
        /* Restore original but cap at 7px */
        margin-bottom: 2px !important;
        /* Keep minimal */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* CRITICAL: Restore original product-title spacing (was margin: 2% 0 0 0) */
    .product-title {
        margin-top: 7px !important;
        /* Restore original but cap at 7px */
        margin-bottom: 2px !important;
        /* Keep minimal */
        padding: 0 !important;
    }

    /* CRITICAL: Restore original product-text spacing (was padding: 14px 0) */
    .product-text {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        padding: 0 !important;
    }

    /* CRITICAL: Override the 40px margin-bottom from style1.css line 5048 - 3px for minimal scroll */
    .product-text p {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        /* Override 40px margin-bottom from style1.css */
        margin-left: 3px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
        font-size: 16px !important;
        /* Preserve original font size */
    }

    /* CRITICAL: Additional specificity to ensure override - 3px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-text p {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        /* Override 40px margin-bottom from style1.css */
        margin-left: 3px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
        font-size: 16px !important;
        /* Preserve original font size */
    }

    /* CRITICAL: Override the 24px margin-bottom from pdp-playbook-step2.css line 25 - 3px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-info .product-text {
        margin-top: 2px !important;
        margin-bottom: 3px !important;
        /* Override 24px margin-bottom from pdp-playbook-step2.css */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: Maximum specificity override for the 24px margin - 3px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        /* Override 40px margin-bottom from style1.css */
        margin-left: 3px !important;
        margin-right: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
        font-size: 16px !important;
        /* Preserve original font size */
    }

    /* CRITICAL: Restore original product-price spacing (was margin: 1% 0 0) */
    .product-price {
        margin-top: 7px !important;
        /* Restore original but cap at 7px */
        margin-bottom: 3px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* CRITICAL: Restore original product-ul spacing (was margin: 0 0 1% 0) */
    .product-ul {
        margin-top: 2px !important;
        margin-bottom: 7px !important;
        /* Restore original but cap at 7px */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .product-ul ul li {
        margin-bottom: 2px !important;
        padding: 2px 0 !important;
        /* Reduce from 4px to 2px */
        line-height: 1.4 !important;
    }

    /* Let visual-metal-selector.css handle all product-dropdown spacing */
    .product-dropdown {
        margin: 0 !important;
        /* Reset - visual-metal-selector.css controls spacing */
        padding: 0 !important;
    }

    /* CRITICAL: Ensure all other elements respect 7px maximum */
    .Product-detail .container .product-full-details .product-details * {
        margin-top: max(0px, min(7px, 7px)) !important;
        margin-bottom: max(0px, min(7px, 7px)) !important;
    }

    /* CRITICAL: Specific overrides for elements that should have minimal spacing */
    .Product-detail .container .product-full-details .product-details .price-old,
    .Product-detail .container .product-full-details .product-details .price-new,
    .Product-detail .container .product-full-details .product-details .price-label,
    .Product-detail .container .product-full-details .product-details .estimated-ship-date-container,
    .Product-detail .container .product-full-details .product-details .estimated-ship-date-text,
    .Product-detail .container .product-full-details .product-details .bred-detail-link,
    .Product-detail .container .product-full-details .product-details .bread-checkout-btn {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    /* CRITICAL: Preserve call and email section structure */
    .add-call {
        width: 100% !important;
        float: left !important;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        padding: 0 !important;
    }

    .call {
        float: left !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/phone-icon.png) no-repeat !important;
        padding: 0 0 0 54px !important;
        height: auto !important;
        /* Change from 46px to auto */
        margin-top: 2px !important;
        margin-bottom: 2px !important;
    }

    .call p {
        font-size: 18px !important;
        color: #424242 !important;
        font-family: 'Lato-Regular' !important;
        margin: 0 !important;
        /* Remove all margins */
        padding: 0 !important;
    }

    .call p.small {
        font-size: 16px !important;
        color: #424242 !important;
        height: auto !important;
        margin: 0 !important;
        /* Remove all margins */
        padding: 0 !important;
    }
}

/* Mobile - keep original spacing */
@media (max-width: 767px) {

    /* Keep original spacing for mobile */
    .Product-detail .container .product-full-details .product-details {
        margin-top: 3px !important;
        /* Keep original */
        margin-bottom: 3px !important;
        /* Keep original */
    }

    .Product-detail .container .product-full-details .product-details * {
        margin-top: 3px !important;
        /* Keep original */
        margin-bottom: 3px !important;
        /* Keep original */
    }

    .product-ul {
        margin: 0 0 1% 0 !important;
        /* Keep original */
    }

    .product-ul ul li {
        margin-bottom: 3px !important;
        /* Keep original */
        padding: 4px 0 !important;
        /* Keep original */
        line-height: 1.5 !important;
        /* Keep original */
    }

    .estimated-ship-date-container {
        margin-top: 5px !important;
        /* Keep original */
        margin-bottom: 3px !important;
        /* Keep original */
        padding-top: 2px !important;
        /* Keep original */
        padding-bottom: 2px !important;
        /* Keep original */
    }

    .estimated-ship-date-text {
        line-height: 1.5 !important;
        /* Keep original */
    }

    .product-ul ul li:first-child {
        margin-bottom: 8px !important;
        /* Keep original */
        padding-bottom: 5px !important;
        /* Keep original */
    }

    #bread-checkout-btn {
        margin-bottom: 5px !important;
        /* Keep original */
    }

    #addtocart,
    .add-to-cart-btn,
    input[type="submit"][value*="ADD TO CART"],
    button[value*="ADD TO CART"] {
        margin-top: 24px !important;
        /* Keep original */
        margin-bottom: 24px !important;
        /* Keep original */
        padding: 8px 24px !important;
        /* Keep original */
    }

    #btnwishlist,
    #btnemailus,
    #btncinora_Quote,
    a[href*="wishlist"],
    a[href*="email"],
    a[href*="print"] {
        margin-bottom: 16px !important;
        /* Keep original */
    }

    .metal_filter_select,
    .product-select2 {
        margin-bottom: 16px !important;
        /* Keep original */
    }
}

/* ################################################################################
   END OF FILE #7: pdp-vertical-spacing-reduction.css
   ################################################################################ */


/* ################################################################################
   FILE #8 of 10: project-wide-minimal-vertical-spacing.css
   ADDED: 2025-10-19
   ################################################################################ */

/* Project-Wide Minimal Vertical Spacing Override */

/* ========================================
   EMERGENCY OVERRIDE - MAXIMUM 7PX VERTICAL SPACING
   ======================================== */

/* Desktop - Maximum 1px vertical spacing for minimal scroll */
@media (min-width: 768px) {

    /* CRITICAL: Override ALL vertical spacing to maximum 1px for minimal scroll */
    .Product-detail .container .product-full-details .product-details * {
        margin-top: max(0px, min(1px, 1px)) !important;
        margin-bottom: max(0px, min(1px, 1px)) !important;
        padding-top: max(0px, min(1px, 1px)) !important;
        padding-bottom: max(0px, min(1px, 1px)) !important;
    }

    /* CRITICAL: Specific overrides for known problematic elements - 1px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-info .product-text {
        margin-bottom: 1px !important;
        /* Override 24px from pdp-playbook-step2.css */
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        margin-bottom: 1px !important;
        /* Override 40px from style1.css */
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
        margin-bottom: 1px !important;
        /* Override 16px from pdp-playbook-step2.css */
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title {
        margin-bottom: 1px !important;
        /* Override 16px from pdp-playbook-step2.css */
    }

    .product-ul ul li {
        margin-bottom: 1px !important;
        /* Override 8px from pdp-playbook-step2.css */
    }

    /* CRITICAL: Override all pdp-playbook rules - 1px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-info .product-text {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title {
        margin-bottom: 1px !important;
    }

    /* CRITICAL: Override style1.css rules - 1px for minimal scroll */
    .product-text p {
        margin-bottom: 1px !important;
        /* Override 40px from style1.css */
    }

    /* CRITICAL: Override test.css rules - 1px for minimal scroll */
    .product-text p {
        margin-bottom: 1px !important;
        /* Override 40px from test.css */
    }

    /* CRITICAL: Override Seperate_buildProductDetail.css rules - 1px for minimal scroll */
    .product-text p {
        margin-bottom: 1px !important;
        /* Override 40px from Seperate_buildProductDetail.css */
    }
}

/* Mobile - Maximum 1px vertical spacing for minimal scroll */
@media (max-width: 767px) {

    /* CRITICAL: Override ALL vertical spacing to maximum 1px on mobile for minimal scroll */
    .Product-detail .container .product-full-details .product-details * {
        margin-top: max(0px, min(1px, 1px)) !important;
        margin-bottom: max(0px, min(1px, 1px)) !important;
        padding-top: max(0px, min(1px, 1px)) !important;
        padding-bottom: max(0px, min(1px, 1px)) !important;
    }

    /* CRITICAL: Specific mobile overrides - 1px for minimal scroll */
    .Product-detail .container .product-full-details .product-details .product-info .product-text {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-text p {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
        margin-bottom: 1px !important;
    }

    .Product-detail .container .product-full-details .product-details .product-info .product-title {
        margin-bottom: 1px !important;
    }

    .product-ul ul li {
        margin-bottom: 1px !important;
        /* Override 12px from pdp-playbook-step4.css */
    }
}

/* Tablet - Maximum 1px vertical spacing for minimal scroll */
@media (min-width: 768px) and (max-width: 1024px) {

    /* CRITICAL: Override ALL vertical spacing to maximum 1px on tablet for minimal scroll */
    .Product-detail .container .product-full-details .product-details * {
        margin-top: max(0px, min(1px, 1px)) !important;
        margin-bottom: max(0px, min(1px, 1px)) !important;
        padding-top: max(0px, min(1px, 1px)) !important;
        padding-bottom: max(0px, min(1px, 1px)) !important;
    }
}

/* ========================================
   UNIVERSAL OVERRIDE - EMERGENCY FALLBACK
   ======================================== */

/* CRITICAL: Universal override for any remaining issues - 1px for minimal scroll */
.Product-detail .container .product-full-details .product-details [class*="product-"] {
    margin-top: max(0px, min(1px, 1px)) !important;
    margin-bottom: max(0px, min(1px, 1px)) !important;
}

.Product-detail .container .product-full-details .product-details [class*="text"] {
    margin-top: max(0px, min(1px, 1px)) !important;
    margin-bottom: max(0px, min(1px, 1px)) !important;
}

.Product-detail .container .product-full-details .product-details [class*="title"] {
    margin-top: max(0px, min(1px, 1px)) !important;
    margin-bottom: max(0px, min(1px, 1px)) !important;
}

/* CRITICAL: Override any inline styles - 1px for minimal scroll */
.Product-detail .container .product-full-details .product-details [style*="margin"] {
    margin-top: max(0px, min(1px, 1px)) !important;
    margin-bottom: max(0px, min(1px, 1px)) !important;
}

.Product-detail .container .product-full-details .product-details [style*="padding"] {
    padding-top: max(0px, min(1px, 1px)) !important;
    padding-bottom: max(0px, min(1px, 1px)) !important;
}

/* ################################################################################
   END OF FILE #8: project-wide-minimal-vertical-spacing.css
   ################################################################################ */


/* ################################################################################
   FILE #9 of 10: pdp-text-size-surgical-fix.css
   ADDED: 2025-10-19
   ################################################################################ */

/* PDP TEXT SIZE SURGICAL FIX - MAXIMUM SPECIFICITY OVERRIDE */
/* This file overrides ALL conflicting styles with maximum specificity */
/* Loads LAST in cascade = GUARANTEED WIN */

/* =================================================================
   PHASE 1: CORE TEXT SIZE FIXES - MAXIMUM SPECIFICITY
   Ultra-high specificity to override all existing CSS conflicts
   ================================================================= */

/* =================================================================
   TASK 2: RETAIL PRICE STANDARDIZATION (2025-11-16)
   Unified styling for .price-old across all pages and viewports
   Replaces scattered 13px/14px/15px rules with consistent 18px/16px
   ================================================================= */

/* Retail Price - Desktop & Tablet (≥768px) */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old {
    margin-top: 2px !important;
    margin-bottom: 3px !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old label.price-label {
    font-size: 18px !important;
    color: #616161 !important;
    font-weight: 400 !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old a {
    font-size: 18px !important;
    color: #616161 !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old span {
    text-decoration: line-through !important;
}

/* Retail Price - Mobile (≤767px) */
@media (max-width: 767px) {
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old {
        margin-top: 1px !important;
        margin-bottom: 2px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old label.price-label {
        font-size: 16px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old a {
        font-size: 16px !important;
    }
}

/* Price Label Section - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child {
    font-size: 15px !important;
    color: #424242 !important;
    font-weight: 400 !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
    font-size: 32px !important;
    color: #0088CC !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* You Save Section - Maximum Specificity Override - Inside Price Box */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section {
    font-size: 15px !important;
    color: #388E3C !important;
    margin-top: 20px !important;
    text-align: left !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    display: block !important;
}

/* CRITICAL: Override ALL universal selectors that conflict with You Save spacing */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section[style*="margin-top"] {
    margin-top: 20px !important;
}

/* Override project-wide minimal spacing conflicts */
html body div.Product-detail div.container div.product-full-details div.product-details div.product-info div.product-price div.you-save-section {
    margin-top: 20px !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span {
    font-size: 15px !important;
    font-weight: 400 !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span.savings-amount {
    font-weight: 700 !important;
    color: #388E3C !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span.savings-percent {
    font-weight: 700 !important;
    color: #E53935 !important;
}

/* Fix double border issue - Remove float from product-price */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price {
    float: none !important;
    width: 100% !important;
    display: block !important;
}

/* Primary Trust Badges - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges {
    background: #F8F9FA !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    border: 1px solid #DEE2E6 !important;
    box-sizing: border-box !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #424242 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Secondary Trust Badges - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges {
    margin-bottom: 6px !important;
    text-align: center !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #424242 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Contact Section - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:first-child {
    font-size: 15px !important;
    color: #424242 !important;
    margin: 0 !important;
    font-family: 'Lato-Regular', Arial, sans-serif !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:last-child {
    font-size: 15px !important;
    color: #616161 !important;
    margin: 2px 0 0 0 !important;
    font-family: 'Lato-Regular', Arial, sans-serif !important;
}

/* Utility Buttons - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.add-to-wish-list,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.email-us,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.print-page {
    font-size: 15px !important;
    color: #616161 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    padding: 2px 12px 2px 38px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Ship Date Section - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.estimated-ship-date-container div.estimated-ship-date-text {
    font-size: 15px !important;
    color: #424242 !important;
    line-height: 1.4 !important;
}

html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.estimated-ship-date-container div.estimated-ship-date-text b {
    font-weight: 600 !important;
}

/* Stock Number Section - Maximum Specificity Override */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-ul {
    font-size: 15px !important;
    color: #424242 !important;
    line-height: 1.4 !important;
}

/* =================================================================
   RESPONSIVE BREAKPOINTS - MAXIMUM SPECIFICITY
   Progressive scaling based on screen width
   ================================================================= */

/* Tablet (769-1024px) - Slight reduction */
@media (max-width: 1024px) and (min-width: 769px) {

    /* Price Label */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child {
        font-size: 15px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
        font-size: 28px !important;
    }

    /* TASK 2 (2025-11-16): Deleted tablet retail price rules - replaced with unified responsive rules */

    /* You Save */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section {
        font-size: 15px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span {
        font-size: 15px !important;
    }

    /* Trust Badges */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges p {
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p {
        font-size: 15px !important;
    }

    /* Contact Info */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:first-child {
        font-size: 15px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:last-child {
        font-size: 15px !important;
    }

    /* Utility Buttons */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.add-to-wish-list,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.email-us,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.print-page {
        font-size: 15px !important;
    }

    /* Ship Date & Stock */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.estimated-ship-date-container div.estimated-ship-date-text {
        font-size: 15px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-ul {
        font-size: 15px !important;
    }
}

/* Mobile (<768px) - Moderate reduction */
@media (max-width: 768px) {

    /* Price Label */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child {
        font-size: 14px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
        font-size: 24px !important;
    }

    /* TASK 2 (2025-11-16): Deleted mobile retail price rules - replaced with unified responsive rules */

    /* You Save */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section {
        font-size: 14px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span {
        font-size: 14px !important;
    }

    /* Trust Badges */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges p {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p {
        font-size: 14px !important;
    }

    /* Contact Info */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:first-child {
        font-size: 14px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:last-child {
        font-size: 14px !important;
    }

    /* Utility Buttons */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.add-to-wish-list,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.email-us,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.print-page {
        font-size: 14px !important;
    }

    /* Ship Date & Stock */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.estimated-ship-date-container div.estimated-ship-date-text {
        font-size: 14px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-ul {
        font-size: 14px !important;
    }
}

/* Small Mobile (<480px) - Maximum reduction */
@media (max-width: 480px) {

    /* Price Label */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child {
        font-size: 13px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
        font-size: 20px !important;
    }

    /* TASK 2 (2025-11-16): Deleted small mobile retail price rules - replaced with unified responsive rules */

    /* You Save */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section {
        font-size: 13px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.you-save-section span {
        font-size: 13px !important;
    }

    /* Trust Badges */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges p {
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p {
        font-size: 13px !important;
    }

    /* Contact Info */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:first-child {
        font-size: 13px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.add-call div.call p:last-child {
        font-size: 13px !important;
    }

    /* Utility Buttons */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.add-to-wish-list,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.email-us,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.print-page {
        font-size: 13px !important;
    }

    /* Ship Date & Stock */
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.estimated-ship-date-container div.estimated-ship-date-text {
        font-size: 13px !important;
    }

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-ul {
        font-size: 13px !important;
    }
}

/* =================================================================
   PERFORMANCE OPTIMIZATION
   Hardware acceleration and text rendering optimization
   ================================================================= */

/* Hardware acceleration for smooth rendering */
html body div.Product-detail div.product-details.product_detail-etrnity {
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Optimize text rendering */
html body div.Product-detail div.product-details.product_detail-etrnity * {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* =================================================================
   BROWSER COMPATIBILITY
   Ensure cross-browser compatibility
   ================================================================= */

/* Ensure proper font rendering across browsers */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old label.price-label,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old a,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
    font-family: 'Lato-Regular', Arial, sans-serif !important;
    font-display: swap !important;
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS
   Ensure proper focus states and accessibility
   ================================================================= */

/* Focus states for better accessibility */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.add-to-wish-list:focus,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.email-us:focus,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-button a.print-page:focus {
    outline: 2px solid #0088CC !important;
    outline-offset: 2px !important;
}

/* =================================================================
   PRINT OPTIMIZATION
   Ensure proper printing
   ================================================================= */

@media print {

    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old label.price-label,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-old a,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two b:first-child,
    html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.product-price div.price-new label.price-label.lbl-two a {
        font-size: 12px !important;
        color: #000000 !important;
    }
}

/* ################################################################################
   END OF FILE #9: pdp-text-size-surgical-fix.css
   ################################################################################ */


/* ################################################################################
   FILE #10 of 10: pdp-surgical-fix.css
   ADDED: 2025-10-19
   ################################################################################ */

/* V1 Surgical Fix - Desktop Thumbnails on Left + Product Detail Text Left + Main Image Maximized + CloudZoom */

/* CRITICAL: Global overrides to ensure our styles take precedence */
.Product-detail .container .product-full-details .product-details {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

/* CRITICAL: Force top and bottom margin on all product detail text elements */
.Product-detail .container .product-full-details .product-details * {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

/* CRITICAL: Fix Estimated Ship Date line break and left alignment */
.product-ul ul li {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 3px !important;
}

/* CRITICAL: Maximum specificity override for white-space collapse */
.Product-detail .container .product-full-details .product-details .product-ul ul li {
    white-space: normal !important;
}

.product-ul ul li b {
    display: inline !important;
    margin-right: 5px !important;
}

/* CRITICAL: Ensure Estimated Ship Date stays on one line and is properly positioned */
.product-ul ul li:contains("Estimated Ship Date") {
    white-space: nowrap !important;
    line-height: 1.5 !important;
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 3px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    text-align: left !important;
    width: 100% !important;
}

/* CRITICAL: Minimal vertical spacing for product details */
.product-ul ul li {
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
}

/* CRITICAL: Separate bread financing from Estimated Ship Date */
.product-ul ul li:first-child {
    margin-bottom: 4px !important;
    padding-bottom: 2px !important;
    border-bottom: none !important;
    display: block !important;
}

/* CRITICAL: Separate container for Estimated Ship Date to avoid all conflicts */
.estimated-ship-date-container {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
}

.estimated-ship-date-text {
    margin: 0 !important;
    padding: 1px 0 !important;
    white-space: nowrap !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.3 !important;
    font-size: 16px !important;
    color: #424242 !important;
    font-family: Lato-Regular !important;
}

/* CRITICAL: Ensure bread checkout button is properly displayed */
#bread-checkout-btn {
    margin-bottom: 2px !important;
    display: block !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    transform: scale(1) !important;
}

/* CRITICAL: Ensure parent container has relative positioning for absolute tooltip */
.financing-desktop-only {
    position: relative !important;
}

/* CRITICAL: Hide bread detail link by default, show on hover with smooth transition */
.bred-detail-link {
    margin-bottom: 2px !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    transform: translateY(5px) !important;
    position: absolute !important;
    top: 0 !important;
    left: 180px !important;
    z-index: 1000 !important;
    background: #fff !important;
    padding: 6px 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    color: #666 !important;
    text-decoration: none !important;
    min-width: 200px !important;
    pointer-events: none !important;
}

/* CRITICAL: Show bread detail link on hover of bread checkout button */
#bread-checkout-btn:hover+.bred-detail-link,
.bred-detail-link:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-3px) !important;
    pointer-events: auto !important;
}

/* CRITICAL: Make bread checkout button hover effect smooth without layout shift */
#bread-checkout-btn:hover {
    transform: scale(1.02) !important;
    color: #30a8dc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* CRITICAL: Alternative approach - show on hover of parent li */
.product-ul ul li:first-child:hover .bred-detail-link {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-3px) !important;
}

/* CRITICAL: Enhanced Add to Cart Button - Industry Best Standards */
#addtocart,
.add-to-cart-btn,
input[type="submit"][value*="ADD TO CART"],
button[value*="ADD TO CART"],
.btn-add-to-cart,
.btn-add-to-cart-primary,
input[type="submit"],
button[type="submit"],
.btn-primary {
    background: linear-gradient(135deg, #30a8dc 0%, #1e7bb8 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(48, 168, 220, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 200px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-family: 'Lato', Arial, sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

/* CRITICAL: Add shimmer effect to button */
#addtocart::before,
.add-to-cart-btn::before,
input[type="submit"][value*="ADD TO CART"]::before,
button[value*="ADD TO CART"]::before,
.btn-add-to-cart::before,
input[type="submit"]::before,
button[type="submit"]::before,
.btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

#addtocart:hover::before,
.add-to-cart-btn:hover::before,
input[type="submit"][value*="ADD TO CART"]:hover::before,
button[value*="ADD TO CART"]:hover::before,
.btn-add-to-cart:hover::before,
input[type="submit"]:hover::before,
button[type="submit"]:hover::before,
.btn-primary:hover::before {
    left: 100% !important;
}

/* CRITICAL: Add to Cart Button Hover Effects - GREEN AS APPROVED IN MOCKUP */
#addtocart:hover,
.add-to-cart-btn:hover,
input[type="submit"][value*="ADD TO CART"]:hover,
button[value*="ADD TO CART"]:hover,
.btn-add-to-cart:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover {
    background: linear-gradient(180deg, #28A745 0%, #218838 100%) !important;
    border: 1px solid #1E7E34 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
    color: #fff !important;
}

/* CRITICAL: Add to Cart Button Active State - GREEN THEME */
#addtocart:active,
.add-to-cart-btn:active,
input[type="submit"][value*="ADD TO CART"]:active,
button[value*="ADD TO CART"]:active,
.btn-add-to-cart:active,
input[type="submit"]:active,
button[type="submit"]:active,
.btn-primary:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3) !important;
    background: linear-gradient(180deg, #218838 0%, #1E7E34 100%) !important;
}

/* CRITICAL: Add to Cart Button Focus State */
#addtocart:focus,
.add-to-cart-btn:focus,
input[type="submit"][value*="ADD TO CART"]:focus,
button[value*="ADD TO CART"]:focus,
.btn-add-to-cart:focus,
input[type="submit"]:focus,
button[type="submit"]:focus,
.btn-primary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(48, 168, 220, 0.4) !important;
    border: 2px solid rgba(48, 168, 220, 0.6) !important;
}

/* CRITICAL: Add to Cart Button Loading State */
#addtocart.loading,
.add-to-cart-btn.loading,
input[type="submit"][value*="ADD TO CART"].loading,
button[value*="ADD TO CART"].loading,
.btn-add-to-cart.loading,
input[type="submit"].loading,
button[type="submit"].loading,
.btn-primary.loading {
    background: linear-gradient(135deg, #90cdf4 0%, #63b3ed 100%) !important;
    cursor: not-allowed !important;
    transform: none !important;
    position: relative !important;
}

#addtocart.loading::after,
.add-to-cart-btn.loading::after,
input[type="submit"][value*="ADD TO CART"].loading::after,
button[value*="ADD TO CART"].loading::after,
.btn-add-to-cart.loading::after,
input[type="submit"].loading::after,
button[type="submit"].loading::after,
.btn-primary.loading::after {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #fff !important;
    border-top: 2px solid transparent !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* CRITICAL: Add to Cart Button Success State */
#addtocart.success,
.add-to-cart-btn.success,
input[type="submit"][value*="ADD TO CART"].success,
button[value*="ADD TO CART"].success,
.btn-add-to-cart.success,
input[type="submit"].success,
button[type="submit"].success,
.btn-primary.success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    box-shadow: 0 3px 10px rgba(72, 187, 120, 0.3) !important;
    transform: scale(1.03) !important;
    animation: successPulse 0.6s ease-in-out !important;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1.03);
    }
}

/* CRITICAL: Override any inherited margins and padding */
.product-ul ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Ensure minimal spacing for the entire product details area */
.product-ul {
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Override any inherited spacing from parent containers */
.product-details .product-ul ul li {
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
}

/* CRITICAL: Ensure Estimated Ship Date (second li) is properly positioned */
.product-ul ul li:nth-child(2) {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* CRITICAL: Ensure Stock No stays on one line */
.product-ul ul li:last-child {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    white-space: normal !important;
}

/* CRITICAL: Hide all empty dropdowns */
.ring-size-select:empty,
.ring-size-select:not(:has(option:not([value=""]))) {
    display: none !important;
}

/* CRITICAL: Show ring size dropdown when it has content */
.ring-size-select:not(:empty):has(option:not([value=""])) {
    display: block !important;
}

/* CRITICAL: Hide other empty dropdowns */
select:not(.metal_filter_select):empty,
select:not(.metal_filter_select):not(:has(option:not([value=""]))) {
    display: none !important;
}

/* CRITICAL: Hide empty dropdown containers */
.product-select2:not(:has(.metal_filter_select)):empty,
.product-select2:not(:has(.metal_filter_select)):not(:has(select:visible)) {
    display: none !important;
}

/* CRITICAL: Restore original metal filter dropdown positioning */
.web-size {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
}

.metal_filter_select {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* CRITICAL: Restore original metal filter dropdown functionality - no changes to original design */

/* CRITICAL: Completely remove Product Detail text */
.product-slider .own-dr-filter-main-title {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.product-slider .own-dr-filter-main-title h1 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Main Image - Expanded to use full width, always square */
.Centervideocontainer {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* Full width to use all available space */
    height: 100% !important;
    /* Full height to use all available space */
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
}

.Centervideocontainer .imageWeb {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /* Center the image */
}

.Centervideocontainer .imageWeb #popupdiv {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /* Center the image */
}

.Product-detail .container .product-full-details .product-details .product-info {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

.Product-detail .container .product-full-details .product-details .product-info .product-title {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

.Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

.Product-detail .container .product-full-details .product-details .product-info .product-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

.Product-detail .container .product-full-details .product-details .product-info .product-text p {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}

/* CRITICAL: Main image - Always square, expanded to use full width */
.Centervideocontainer .imageWeb #popupdiv #productmainimage {
    width: 100% !important;
    /* Full width to use all available space */
    height: 100% !important;
    /* Full height to use all available space */
    max-width: 100% !important;
    max-height: 1200px !important;
    /* Use full 1200px resolution for zoom */
    object-fit: cover !important;
    /* Cover to fill the space and eliminate white space */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* CRITICAL: Override any width: 0 rules with maximum specificity */
img#productmainimage {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Override CloudZoom width constraints */
#productmainimage.cloudzoom {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 1200px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CRITICAL: Override the .imageWeb > img { width:50%; } rule that's causing width: 0 */
.Centervideocontainer .imageWeb>img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 1200px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    cursor: pointer !important;
}

/* CRITICAL: Ultra high specificity to override any width: 0 rules */
.Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv #productmainimage {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 1200px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    cursor: pointer !important;
}

/* CRITICAL: Override any parent container width constraints */
.Centervideocontainer .imageWeb {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}

.Centervideocontainer .imageWeb #popupdiv {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* CRITICAL: Override Centervideocontainer min-height constraint */
.Centervideocontainer {
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    float: left !important;
}

/* CRITICAL: Override imageWeb container constraints */
/* UPDATED Dec 6, 2025: Removed min-height:auto to allow responsive min-heights to prevent layout shifts */
.Centervideocontainer .imageWeb {
    width: 100% !important;
    height: auto !important;
    /* min-height: REMOVED - Allow responsive media query rules to set proper min-heights */
    float: left !important;
}

/* CRITICAL: Override popupdiv container constraints */
/* UPDATED Dec 6, 2025: Removed min-height:auto to allow responsive min-heights to prevent layout shifts */
.Centervideocontainer .imageWeb #popupdiv {
    width: 100% !important;
    height: auto !important;
    /* min-height: REMOVED - Allow responsive media query rules to set proper min-heights */
    float: left !important;
}

@media (min-width: 1100px) {

    /* SURGICAL FIX: Force flexbox layout on product slider - Product Detail pages */
    /* Changed from 768px to 1100px to preserve float-based responsive layout below 1100px */
    /* UPDATED: Changed flex-wrap to 'wrap' to allow "Conflict Free" text to wrap to new row */
    .Product-detail .container .product-full-details .product-slider {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* SURGICAL FIX: Force flexbox layout on product slider - Build Product Detail pages */
    .web-size .container .product-full-details .product-slider {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* SURGICAL FIX: Allow JavaScript to control #prodimages visibility (removed display: block !important) */
    /* This enables spin view to load by default instead of static image */

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       FLEXIBLE IMAGE FIX: Image shrinks to fit, maintains Thumbs LEFT + Image RIGHT
       Issue: Image wrapping below thumbnails at widths 1100-1290px
       Solution: Make image container flexible - shrinks to fit available space
       Result: Thumbnails ALWAYS left, Image ALWAYS right, side by side at ALL widths
       Tested: ✅ 100% success (3 broken widths fixed: 1290px, 1111px, 1100px)
       Date: Oct 19, 2025
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* FIX 1: Make image container flexible (can shrink to fit) */
    .Product-detail .container .product-full-details .product-slider .Centervideocontainer {
        flex: 1 1 0% !important;
        /* Flexible: can grow/shrink */
        min-width: 300px !important;
        /* Minimum reasonable size */
        max-width: 650px !important;
        /* Maximum size (desktop) - Increased for better product visibility */
    }

    /* FIX 2: Make actual image responsive within container (override JavaScript 500px) */
    .Product-detail .container .product-full-details .product-slider .Centervideocontainer #productmainimage {
        width: 100% !important;
        /* Fill container (not fixed 500px) */
        height: auto !important;
        /* Maintain aspect ratio */
        max-width: 100% !important;
        /* Never exceed container */
        display: block !important;
        /* Remove inline spacing */
    }

    /* FIX 3: Make image wrappers responsive (CloudZoom containers) */
    .Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: auto !important;
    }

    .Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv {
        width: 100% !important;
        height: auto !important;
    }

    .Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb>img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* FIX 4: Keep thumbnails fixed width (80px) */
    .Product-detail .container .product-full-details .product-slider>div:has(.thumb-slider) {
        flex: 0 0 80px !important;
        /* Fixed 80px, no grow/shrink */
    }

    /* FIX 5: Prevent wrapping (no longer needed - image shrinks to fit) - Already set above at line 2213 */

    /* SURGICAL FIX: Try for Free button - Fix opacity and sizing */
    .product-slider #btnTryForFree {
        display: none !important;
    }

    .product-slider .img-try-for-free {
        display: inline-block !important;
        opacity: 1 !important;
        /* Fix opacity: 0 issue */
        width: 100px !important;
        /* Increase from 60px */
        height: auto !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 6px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    /* SURGICAL FIX: Higher specificity override for Try for Free button */
    html body .product-slider .img-try-for-free {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* SURGICAL FIX: Maximum specificity override for Try for Free button */
    html body div.web-size div.container div.product-full-details div.product-slider center .img-try-for-free {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100px !important;
        height: auto !important;
        cursor: pointer !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       IMAGE LOADING SPINNER - Professional Loading Indicator
       Purpose: Show loading feedback when user clicks/hovers thumbnails
       Date: Oct 20, 2025
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* Spinner container positioning */
    #image-loading-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 100 !important;
        flex-direction: column !important;
        border-radius: 4px !important;
    }

    /* Spinner ring (modern circular spinner) */
    .spinner-ring {
        width: 60px;
        height: 60px;
        border: 6px solid #f3f3f3;
        border-top: 6px solid #0088CC;
        border-radius: 50%;
        animation: spinner-rotate 0.8s linear infinite;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Spinner rotation animation */
    @keyframes spinner-rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Loading text styling */
    #image-loading-overlay p {
        margin-top: 20px;
        color: #666;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    /* Make Centervideocontainer position relative for spinner positioning */
    .Centervideocontainer {
        position: relative !important;
    }

    .product-slider .img-try-for-free:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2) !important;
        background-color: #E8F4FC !important;
    }

    .product-slider .img-try-for-free:active {
        transform: translateY(0px) !important;
        box-shadow: 0 2px 6px rgba(0, 136, 204, 0.15) !important;
    }

    /* SURGICAL FIX: Try for Free container - Fix width */
    .product-slider center:has(#btnTryForFree),
    .product-slider center:has(.img-try-for-free) {
        order: 10 !important;
        flex-basis: 100% !important;
        /* Force wrap to new row */
        width: auto !important;
        max-width: 120px !important;
        /* Limit to 120px */
        margin-left: 95px !important;
        /* Respect thumbnail space (80px + 15px gap) */
        margin-right: auto !important;
        /* Center in remaining space */
        flex-shrink: 0 !important;
        text-align: center !important;
        margin-top: 20px !important;
        padding: 0 !important;
        /* Remove all padding */
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        /* Include padding in width */
        border: none !important;
        /* Remove border from old design */
        outline: none !important;
        /* Remove any outline */
        background: transparent !important;
        /* Remove background from old design */
    }

    /* SURGICAL FIX: Target the center element that contains thumbnails (.thumb-slider) - Product Detail */
    .Product-detail .container .product-full-details .product-slider center:has(.thumb-slider) {
        order: -1 !important;
        width: 80px !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        top: 7px !important;
        position: relative !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       DIAMOND DETAIL SPECIFIC: 650px Image/Video Override Rules
       Purpose: Override .web-size 500px rules for Diamond Detail page only
       Date: Nov 20, 2025
       Reason: Diamond Detail has both .web-size (layout) and .Product-detail (view) classes
               Higher specificity (.Product-detail prefix) overrides .web-size 500px constraints
       Impact: Diamond Detail gets 650px, Build Product Detail stays 500px
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* Override .web-size container height (was Line 2512) */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer {
        height: 650px !important;
    }

    /* FIX: Prevent layout shift when switching between thumbnails (Shape/Depth diagrams)
       Issue: Container collapses from 702px to 52px when clicking thumbnails
       Solution: Reserve minimum height matching largest possible view (650px + margins)
       Date: Dec 4, 2025 */
    .Product-detail #prodimages {
        min-height: 700px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

/* FIX: "Conflict Free" text positioning - ALL VIEWPORTS */
.Product-detail .diamond-inspection-text {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    padding: 0 !important;
}

/* Desktop (≥1100px): Text below both columns, aligned with image column */
@media (min-width: 1100px) {
    .Product-detail .diamond-inspection-text {
        width: 650px !important;
        max-width: 650px !important;
        clear: both !important;  /* Force below BOTH floated columns */
        margin: 15px 0 0 95px !important;  /* Align with image (80px thumbnails + 15px gap) */
    }
}

/* Tablet/Mobile (<1100px): Text full width, below image */
@media (max-width: 1099px) {
    .Product-detail .diamond-inspection-text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 0 0 !important;
    }
}

    /* FIX: Container Width Issues - Remove float to enable full 1360px usage */
    /* Root cause: OldStyle.css line 5791 has float: left on .product-full-details */
    /* This caused 19-44px width gaps at desktop viewports (1100px-1920px) */
    .Product-detail .product-full-details {
        float: none !important;
        width: 100% !important;
        display: block !important;
        margin: 1% 0 !important;
    }

    /* Explicit order for image container to ensure proper stacking */
    .Product-detail .product-slider center#prodimages {
        order: 0 !important;
    }

    /* Override .web-size main image sizing (was Lines 2549-2552) */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer #productmainimage {
        width: 650px !important;
        max-width: 650px !important;
        max-height: 650px !important;
    }

    /* Override .web-size video containers (was Lines 2589, 2604-2605) */
    .Product-detail .web-size .container .product-full-details .product-slider #videoimagesh,
    .Product-detail .web-size .container .product-full-details .product-slider #videoimagesr,
    .Product-detail .web-size .container .product-full-details .product-slider #videocontainer {
        max-width: 650px !important;
        height: 650px !important;
    }

    /* Override .web-size video products (was Lines 2615-2616) */
    .Product-detail .web-size .container .product-full-details .product-slider #videoproductH,
    .Product-detail .web-size .container .product-full-details .product-slider #videoproductR {
        max-width: 650px !important;
        max-height: 650px !important;
    }

    /* Override .web-size CloudZoom container (was Lines 2848-2851) */
    .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv {
        width: 650px !important;
        height: 650px !important;
        min-width: 650px !important;
        min-height: 650px !important;
    }

    /* Override .web-size CloudZoom image (was Lines 2864-2865) */
    .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv #productmainimage {
        max-width: 650px !important;
        max-height: 650px !important;
    }

    /* Ensure parent containers allow 650px width */
    .Product-detail #prodimages,
    .Product-detail #prodimages .imageWeb {
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
        flex-basis: 500px !important;
    }

    /* END DIAMOND DETAIL 650px OVERRIDES */

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       DIAMOND DETAIL 650px LAYOUT - Fixed Pixel Widths with Responsive Breakpoints
       ═══════════════════════════════════════════════════════════════════════════════════════════════════

       CONTAINER WIDTH: 98% (set in _ItemDetails.css), max-width 1360px (Bootstrap constraint)

       RESPONSIVE BREAKPOINTS:
       - Below 1080px: Stacked layout (mobile/tablet)
       - 1080-1279px: 600px image, 690px slider, remaining space for content
       - 1280px+: 650px image, 740px slider, remaining space for content

       LAYOUT CALCULATIONS (FIXED PIXEL WIDTHS):
       - 1080-1279px: Slider 690px (80+5+600+5), Gap 15px, Content = calc(100% - 705px)
       - 1280px+: Slider 740px (80+5+650+5), Gap 15px, Content = calc(100% - 755px)

       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* CONTAINER: Cap at 1360px (98% width already set in _ItemDetails.css media queries) */
    .Product-detail .container {
        max-width: 1360px !important;
    }

    /* BOX-SIZING: Prevent padding/border from adding to width */
    .Product-detail .product-slider,
    .Product-detail .product-details {
        box-sizing: border-box !important;
    }

    /* BASE OVERRIDE: Replace style1.css defaults (48% + 50%) with desktop layout */
    .Product-detail .product-slider {
        width: 740px !important;
        float: left !important;
        margin-right: 15px !important;
    }

    .Product-detail .product-details {
        width: calc(100% - 755px) !important;
        float: left !important;
        margin-top: 2%;
    }

    /* DEFAULT (1280px+): 650px image sizing */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer {
        height: 650px !important;
    }

    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer #productmainimage {
        width: 650px !important;
        max-width: 650px !important;
        max-height: 650px !important;
        height: auto !important;
    }

    /* CRITICAL FIX: Override stylePage.css max-height: 400px limit on JetZoom images */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet img {
        max-height: 650px !important;
        /* Allow full 650px height instead of 400px limit */
    }

    /* Ensure JetZoom container doesn't limit height either */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet {
        max-height: 650px !important;
        height: auto !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       TIER 1: SURGICAL OVERRIDES FOR JETZOOM HEIGHT CONSTRAINTS
       ═══════════════════════════════════════════════════════════════════════════════════════════════════

       OVERRIDES:
       1. stylePage.css line 3135:  .jetzoomzet img { max-height: 400px; }
       2. style.css line 3678:      .jetzoomzet img { max-height: 350px; }
       3. style1.css line 2886:     .jetzoomzet img { max-height: 350px; }
       4. responsive.css line 6271: .jetzoomzet .small { height: 330px; } (tablet)
       5. responsive.css line 18583: .jetzoomzet .small { height: 300px; } (mobile)

       STRATEGY: Use highest-specificity selectors to override all constraint sources
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* Override using .jetzoom.small class combination (higher specificity) */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet img.jetzoom.small {
        max-height: 650px !important;
        max-width: 650px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Override using #productmainimage ID (highest specificity) */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer img#productmainimage.jetzoom.small {
        max-height: 650px !important;
        max-width: 650px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Override .jetzoomzet .small combination (used in responsive.css) */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet .small {
        height: auto !important;
        max-height: 650px !important;
        max-width: 650px !important;
    }

    /* Ensure container supports full 650px height */
    .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet {
        min-height: 650px !important;
    }

    /* Responsive overrides for laptop viewport (1080-1279px) */
    @media (max-width: 1279px) and (min-width: 1080px) {

        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet img.jetzoom.small,
        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer img#productmainimage.jetzoom.small {
            max-height: 600px !important;
            max-width: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet {
            min-height: 600px !important;
        }
    }

    /* Responsive overrides for tablet viewport (768-1079px) */
    @media (max-width: 1079px) and (min-width: 768px) {

        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet img.jetzoom.small,
        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer img#productmainimage.jetzoom.small {
            max-height: 500px !important;
            max-width: 500px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .jetzoomzet {
            min-height: 500px !important;
        }
    }

    .Product-detail .web-size .container .product-full-details .product-slider #videoimagesh,
    .Product-detail .web-size .container .product-full-details .product-slider #videoimagesr,
    .Product-detail .web-size .container .product-full-details .product-slider #videocontainer {
        max-width: 650px !important;
        height: 650px !important;
    }

    .Product-detail .web-size .container .product-full-details .product-slider #videoproductH,
    .Product-detail .web-size .container .product-full-details .product-slider #videoproductR {
        max-width: 650px !important;
        max-height: 650px !important;
    }

    .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv {
        width: 500px !important;
        height: 500px !important;
        min-width: 500px !important;
        min-height: 500px !important;
    }

    .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv #productmainimage {
        max-width: 500px !important;
        max-height: 500px !important;
    }

    .Product-detail #prodimages,
    .Product-detail #prodimages .imageWeb {
        width: 500px !important;
        min-width: 500px !important;
        max-width: 500px !important;
        flex-basis: 500px !important;
    }

    /* BELOW 1080px: Stacked layout for mobile/tablet */
    @media (max-width: 1079px) {

        .Product-detail .product-slider,
        .Product-detail .product-details {
            width: 100% !important;
            float: none !important;
            margin-right: 0 !important;
        }
    }

    /* 1080-1279px: 600px image, side-by-side layout (laptop) */
    @media (min-width: 1080px) and (max-width: 1279px) {

        /* Reduce image to 600px for this range */
        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer {
            height: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer #productmainimage {
            width: 600px !important;
            max-width: 600px !important;
            max-height: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider #videoimagesh,
        .Product-detail .web-size .container .product-full-details .product-slider #videoimagesr,
        .Product-detail .web-size .container .product-full-details .product-slider #videocontainer {
            max-width: 600px !important;
            height: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider #videoproductH,
        .Product-detail .web-size .container .product-full-details .product-slider #videoproductR {
            max-width: 600px !important;
            max-height: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv {
            width: 600px !important;
            height: 600px !important;
            min-width: 600px !important;
            min-height: 600px !important;
        }

        .Product-detail .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv #productmainimage {
            max-width: 600px !important;
            max-height: 600px !important;
        }

        .Product-detail #prodimages,
        .Product-detail #prodimages .imageWeb {
            width: 600px !important;
            min-width: 600px !important;
            max-width: 600px !important;
            flex-basis: 600px !important;
        }

        /* FIXED LAYOUT: Slider 690px (80+5+600+5) + Gap 15px + Content flexible */
        .Product-detail .product-slider {
            width: 690px !important;
            float: left !important;
            margin-right: 15px !important;
        }

        .Product-detail .product-details {
            width: calc(100% - 705px) !important;
            float: left !important;
        }
    }

    /* 1280px+: 650px image, side-by-side layout (desktop) - uses base rules above */

    /* END DIAMOND DETAIL 650px LAYOUT */

    /* SURGICAL FIX: Target the center element that contains thumbnails (.thumb-slider) - Build Product Detail */
    .web-size .container .product-full-details .product-slider center:has(.thumb-slider) {
        order: -1 !important;
        width: 80px !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        top: 7px !important;
        position: relative !important;
        text-align: left !important;
        /* Fix centering issue */
    }

    /* SURGICAL FIX: Override center tag centering for thumbnails - Build Product Detail */
    .container .product-full-details .product-slider center:has(.thumb-slider) {
        text-align: left !important;
        /* Override center tag default centering */
    }

    /* SURGICAL FIX: Higher specificity override for thumbnail centering */
    html body .container .product-full-details .product-slider center:has(.thumb-slider) {
        text-align: left !important;
    }

    /* SURGICAL FIX: Maximum specificity override for thumbnail centering */
    html body div.web-size div.container div.product-full-details div.product-slider center:has(.thumb-slider) {
        text-align: left !important;
        order: -1 !important;
        width: 80px !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        top: 7px !important;
        position: relative !important;
    }

    /* SURGICAL FIX: Ensure main image containers appear after thumbnails */
    html body div.web-size div.container div.product-full-details div.product-slider #prodimages,
    html body div.web-size div.container div.product-full-details div.product-slider #videoimagesh,
    html body div.web-size div.container div.product-full-details div.product-slider #videoimagesr {
        order: 0 !important;
    }

    /* SURGICAL FIX: Remove white background from thumbnail slider */
    .thumb-slider {
        background: transparent !important;
        padding: 0 !important;
        text-align: left !important;
        /* Override any centering */
    }

    /* SURGICAL FIX: Higher specificity override for thumb-slider centering */
    html body .thumb-slider {
        text-align: left !important;
    }

    /* SURGICAL FIX: Maximum specificity override for thumb-slider centering */
    html body div.web-size div.container div.product-full-details div.product-slider center div.thumb-slider {
        text-align: left !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* FALLBACK: If :has() not supported - Product Detail */
    @supports not selector(:has(*)) {
        .Product-detail .container .product-full-details .product-slider center:nth-child(4) {
            order: -1 !important;
            width: 80px !important;
            flex-shrink: 0 !important;
            margin-top: 0 !important;
            top: 7px !important;
            position: relative !important;
        }
    }

    /* FALLBACK: If :has() not supported - Build Product Detail */
    @supports not selector(:has(*)) {
        .web-size .container .product-full-details .product-slider center:nth-child(4) {
            order: -1 !important;
            width: 80px !important;
            flex-shrink: 0 !important;
            margin-top: 0 !important;
            top: 7px !important;
            position: relative !important;
        }
    }

    .Centervideocontainer {
        flex: 1 !important;
        margin-top: 0 !important;
        /* Reset margin since H1 is removed */
        padding: 0 !important;
        /* Remove all padding */
        margin: 0 !important;
        /* Reset all margins */
        height: 100% !important;
        /* Full height to use all available space */
    }

    /* ============================================
       SURGICAL FIX: Match Product Detail Image Size (500px)
       Date: 2025-10-12
       ============================================
       
       GOAL: Make Build Product images match Product Detail exactly
       - Static images: 500px × auto (max 500px)
       - 360° spin: Inherits from container (responsive)
       - Alignment: Center within 557px available space
       - Same layout, size, and behavior as Product Detail page
       ============================================ */

    /* Build Product Detail - Container sizing (match Product Detail) */
    .web-size .container .product-full-details .product-slider .Centervideocontainer {
        position: relative !important;
        width: 100% !important;
        height: 500px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        /* Center-align all content */
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Build Product Detail - imageWeb container */
    .web-size .container .product-full-details .product-slider .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Build Product Detail - popupdiv container */
    .web-size .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Build Product Detail - Main image 500px (match Product Detail) - DESKTOP ONLY */
    @media (min-width: 1100px) {
        .web-size .container .product-full-details .product-slider #productmainimage {
            width: 500px !important;
            height: auto !important;
            max-width: 500px !important;
            max-height: 500px !important;
            object-fit: contain !important;
            margin: 0 auto !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 0 !important;
            background: none !important;
            cursor: pointer !important;
        }
    }

    /* Build Product Detail - Main image responsive (TABLET/MOBILE STACKED) */
    @media (max-width: 1099px) {
        .web-size .container .product-full-details .product-slider #productmainimage {
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 1200px !important;
            object-fit: contain !important;
            margin: 0 auto !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 0 !important;
            background: none !important;
            cursor: pointer !important;
        }
    }

    /* Build Product Detail - 360° Spin containers (inherit from parent) */
    /* DO NOT force display: flex - let JavaScript control visibility */
    .web-size .container .product-full-details .product-slider #videoimagesh,
    .web-size .container .product-full-details .product-slider #videoimagesr {
        align-items: center !important;
        justify-content: center !important;
        width: calc(100% - 95px) !important;
        /* Subtract thumbnails (80px) + gap (15px) */
        max-width: 500px !important;
        flex: 1 !important;
        /* Fill remaining space */
        height: 100% !important;
        text-align: center !important;
    }

    /* When spin is visible, make it flex container */
    .web-size .container .product-full-details .product-slider #videoimagesh[style*="display: block"],
    .web-size .container .product-full-details .product-slider #videoimagesr[style*="display: block"] {
        display: flex !important;
    }

    /* Build Product Detail - Video container sizing */
    .web-size .container .product-full-details .product-slider #videocontainer {
        width: 100% !important;
        max-width: 500px !important;
        height: 500px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Build Product Detail - Reel images (responsive, will adapt to container) */
    .web-size .container .product-full-details .product-slider #videoproductH,
    .web-size .container .product-full-details .product-slider #videoproductR {
        max-width: 500px !important;
        max-height: 500px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;

        /* CRITICAL: Prevent flickering during frame transitions */
        -webkit-backface-visibility: hidden !important;
        -moz-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-transform: translateZ(0) !important;
        -moz-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        -moz-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;

        /* Disable ALL transitions/animations on reel images */
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        -moz-animation: none !important;

        /* Force image rendering optimization */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;

        /* Prevent sub-pixel rendering issues */
        -webkit-font-smoothing: subpixel-antialiased !important;
        -moz-osx-font-smoothing: auto !important;
    }

    /* ============================================
       SURGICAL FIX: 360° Spin Loader Optimization
       Date: 2025-10-12
       ============================================
       
       Elegant loader styling to prevent flickering
       during progressive image loading
       ============================================ */

    /* Reel preloader - elegant style */
    #videoproductH-reel .reel-preloader,
    #videoproductR-reel .reel-preloader {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        color: #30a8dc !important;
        font-family: 'Lato', Arial, sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
        transition: opacity 0.3s ease !important;
    }

    /* Preloader animation */
    @keyframes reelPulse {

        0%,
        100% {
            opacity: 0.6;
        }

        50% {
            opacity: 1;
        }
    }

    #videoproductH-reel .reel-preloader:after,
    #videoproductR-reel .reel-preloader:after {
        content: 'Loading 360° View...';
        animation: reelPulse 1.5s ease-in-out infinite !important;
    }

    /* SURGICAL FIX: Thumbnail images should fit container without stretching */
    .thumb-slider .imagetable {
        width: 60px !important;
        height: 60px !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
    }

    /* ============================================
       SURGICAL FIX: Center thumbnails horizontally within 80px container
       Date: 2025-10-12
       ============================================
       
       CURRENT: Thumbnails (60px) are left-aligned in 80px container
       GOAL: Center thumbnails with 10px margin on each side
       
       Container: 80px
       Thumbnail: 60px
       Left margin: 10px (auto)
       Right margin: 10px (auto)
       ============================================ */

    /* Center thumbnails within their container */
    .web-size .container .product-full-details .product-slider .thumb-slider .owl-item .imagetable {
        width: 60px !important;
        /* CRITICAL: Force 60px width */
        min-width: 60px !important;
        max-width: 60px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    /* CRITICAL: Force owl-item to be 80px wide (not 60px) to allow centering */
    .web-size .container .product-full-details .product-slider .thumb-slider .owl-carousel .owl-item {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important;
    }

    /* Override Owl Carousel's default item sizing */
    .web-size .container .product-full-details .product-slider .thumb-slider .owl-carousel {
        width: 80px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* HIGH SPECIFICITY: Override _buildProductDetail.css and pdp-modern-responsive.css */
    /* Match specificity of .container .product-full-details .product-slider .thumb-slider .owl-carousel .owl-item .imagetable img */
    .container .product-full-details .product-slider .thumb-slider .owl-carousel .owl-item .imagetable img {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
        position: relative !important;
        /* Override absolute positioning */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        /* Remove transform centering */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fallback for non-Owl Carousel thumbnails */
    .thumb-slider .imagetable img {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* SURGICAL FIX: Hide 360 video controls in hidden containers (play/pause/hand/ring circles) */
    /* Target specific hidden video containers by ID - Most precise */
    #videoimagesh .controls,
    #videoimagesr .controls {
        display: none !important;
        visibility: hidden !important;
    }

    #videoimagesh .controls img,
    #videoimagesr .controls img {
        display: none !important;
        visibility: hidden !important;
    }

    /* FALLBACK: Hide controls in any hidden center containers */
    .product-slider center[style*="display:none"] .controls,
    .product-slider center[style*="display: none"] .controls {
        display: none !important;
        visibility: hidden !important;
    }

    .product-slider center[style*="display:none"] .controls img,
    .product-slider center[style*="display: none"] .controls img {
        display: none !important;
        visibility: hidden !important;
    }

    /* SURGICAL FIX: Hide empty center containers EXCEPT Try for Free button */
    .Product-detail .product-slider center:empty:not(:has(#btnTryForFree)):not(:has(.img-try-for-free)),
    .Product-detail .product-slider center:not(:has(*)):not(:has(#btnTryForFree)):not(:has(.img-try-for-free)) {
        display: none !important;
    }

    .web-size .product-slider center:empty:not(:has(#btnTryForFree)):not(:has(.img-try-for-free)),
    .web-size .product-slider center:not(:has(*)):not(:has(#btnTryForFree)):not(:has(.img-try-for-free)) {
        display: none !important;
    }

    /* Specifically hide only truly empty center elements by position */
    .product-slider center:nth-child(n+5):empty {
        display: none !important;
    }

    .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
    }

    .Centervideocontainer .imageWeb #popupdiv {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
    }

    .Centervideocontainer .imageWeb #popupdiv #productmainimage {
        width: 100% !important;
        /* Full width to use all available space */
        height: 100% !important;
        /* Full height to use all available space */
        max-width: 100% !important;
        max-height: 1200px !important;
        /* Use full 1200px resolution for zoom */
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        cursor: pointer !important;
    }

    /* FIX: Ensure parent containers enforce 500px width for images/videos */
    /* BuildProductDetail: 500px width (no .Centervideocontainer class) */
    .web-size .container .product-full-details .product-slider #prodimages:not(.Centervideocontainer) {
        width: 500px !important; /* EXPLICIT 500px width */
        min-width: 300px !important;
        max-width: 500px !important; /* Fixed at 500px for desktop */
        flex: 0 0 500px !important;
        flex-shrink: 0 !important;
    }

    /* ProductDetail: 650px width (has .Centervideocontainer class) - RESTORE ORIGINAL */
    .web-size .container .product-full-details .product-slider #prodimages.Centervideocontainer {
        width: 650px !important;
        max-width: 730px !important;
    }

    .web-size .container .product-full-details .product-slider #prodimages .imageWeb {
        width: 100% !important;
        min-width: 300px !important;
        max-width: 650px !important;
    }

    /* BUG 4 FIX: Allow responsive sizing up to 650px for video containers */
    /* CRITICAL: Do NOT touch #prodimages flex layout - only fix inner container! */
    /* This preserves flexible behavior while ensuring CloudZoom renders responsively */
    /* HIGHER SPECIFICITY: Added .container .product-full-details to override _buildProductDetail.css */
    .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv {
        width: 100% !important;
        height: auto !important;
        min-width: 300px !important; /* Minimum for mobile */
        min-height: 300px !important; /* Maintain aspect ratio */
        max-width: 650px !important; /* Desktop maximum */
        max-height: 650px !important; /* Desktop maximum */
        margin: 0 auto !important;
        /* Center within flex parent */
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        position: relative !important;
    }

    /* BUG 4 FIX: Allow product image to scale up to 650px for responsive display */
    /* HIGHER SPECIFICITY: Added .container .product-full-details to override _buildProductDetail.css */
    .web-size .container .product-full-details .product-slider #prodimages .imageWeb #popupdiv #productmainimage {
        width: 100% !important;
        height: 100% !important;
        max-width: 650px !important; /* BUG 4 FIX: Match popupdiv max-width */
        max-height: 650px !important; /* BUG 4 FIX: Match popupdiv max-height */
        object-fit: contain !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: Ensure thumb-slider is visible and properly sized */
    .thumb-slider {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !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;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Override owl-carousel default display:none */
    .thumb-slider .owl-carousel {
        display: block !important;
        /* Override default display:none */
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
    }

    /* CRITICAL: Ensure owl-carousel is loaded and visible */
    .thumb-slider .owl-carousel.owl-loaded {
        display: block !important;
        visibility: visible !important;
    }

    .thumb-slider .owl-carousel .owl-stage-outer {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .thumb-slider .owl-carousel .owl-stage {
        width: 100% !important;
        transform: none !important;
        transition: none !important;
    }

    .thumb-slider .owl-carousel .owl-item {
        width: 100% !important;
        display: block !important;
        float: none !important;
        transform: none !important;
        transition: none !important;
    }

    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 60px !important;
        /* Fixed width, not 100% */
        height: 60px !important;
        /* Perfect square */
        margin: 0 0 6px 0 !important;
        display: block !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        float: none !important;
        background-color: #FFFFFF !important;
        cursor: pointer !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Image rules moved to higher specificity section above (line 713-726) */

    .thumb-slider .owl-carousel .owl-nav {
        display: none !important;
    }

    /* SURGICAL FIX: Hide Owl Carousel pagination dots (blue circles below thumbnails) */
    .thumb-slider .owl-carousel .owl-dots {
        display: none !important;
    }

    /* SURGICAL FIX: Try for Free button - inspired by Add to Wish List design */
    #btnTryForFree {
        display: none !important;
        /* Keep button hidden, show image instead */
    }

    .img-try-for-free {
        display: inline-block !important;
        /* For centering */
        width: 60px !important;
        /* Keep original size per user */
        height: auto !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 6px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    .img-try-for-free:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2) !important;
        background-color: #E8F4FC !important;
    }

    .img-try-for-free:active {
        transform: translateY(0px) !important;
        box-shadow: 0 2px 6px rgba(0, 136, 204, 0.15) !important;
    }

    /* SURGICAL FIX: Hide empty imagetable containers (empty boxes with borders) */
    .thumb-slider .owl-carousel .owl-item .imagetable:empty,
    .thumb-slider .owl-carousel .owl-item .imagetable:not(:has(img)),
    .thumb-slider .owl-carousel .owl-item .imagetable:not(:has(*)) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* SURGICAL FIX: Hide owl-item if it only contains empty imagetable */
    .thumb-slider .owl-carousel .owl-item:not(:has(.imagetable img)) {
        display: none !important;
    }

    /* CRITICAL: Ensure CloudZoom works on desktop */
    .Centervideocontainer .imageWeb #popupdiv #productmainimage.cloudzoom {
        cursor: zoom-in !important;
        transition: transform 0.3s ease !important;
    }

    .Centervideocontainer .imageWeb #popupdiv #productmainimage.cloudzoom:hover {
        transform: scale(1.02) !important;
    }

    /* CRITICAL: Ensure zoom button is visible and positioned */
    .Centervideocontainer .imageWeb #popupdiv #prodimagezoom {
        display: block !important;
        visibility: visible !important;
        z-index: 10 !important;
    }

    .Centervideocontainer .imageWeb #popupdiv #prodimagezoom img {
        position: absolute !important;
        top: 10px !important;
        /* Top of image */
        right: 10px !important;
        /* Top right of image */
        width: 30px !important;
        height: 30px !important;
    }
}

/* Mobile - Keep Original + iPhone Optimizations */
@media (max-width: 767px) {

    /* SURGICAL FIX: Mobile layout - thumbnails at bottom - Product Detail */
    .Product-detail .container .product-full-details .product-slider {
        display: block !important;
    }

    /* SURGICAL FIX: Mobile layout - thumbnails at bottom - Build Product Detail */
    .web-size .container .product-full-details .product-slider {
        display: block !important;
    }

    /* Reset thumbnail positioning for mobile - Product Detail */
    .Product-detail .container .product-full-details .product-slider center:has(.thumb-slider) {
        order: unset !important;
        width: 100% !important;
        position: static !important;
        top: auto !important;
        margin-top: 10px !important;
    }

    /* Reset thumbnail positioning for mobile - Build Product Detail */
    .web-size .container .product-full-details .product-slider center:has(.thumb-slider) {
        order: unset !important;
        width: 100% !important;
        position: static !important;
        top: auto !important;
        margin-top: 10px !important;
    }

    /* FALLBACK: If :has() not supported - Product Detail */
    @supports not selector(:has(*)) {
        .Product-detail .container .product-full-details .product-slider center:nth-child(4) {
            order: unset !important;
            width: 100% !important;
            position: static !important;
            top: auto !important;
            margin-top: 10px !important;
        }
    }

    /* FALLBACK: If :has() not supported - Build Product Detail */
    @supports not selector(:has(*)) {
        .web-size .container .product-full-details .product-slider center:nth-child(4) {
            order: unset !important;
            width: 100% !important;
            position: static !important;
            top: auto !important;
            margin-top: 10px !important;
        }
    }

    /* Mobile thumbnail sizing - HIGH SPECIFICITY */
    .container .product-full-details .product-slider .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 60px !important;
        height: 60px !important;
        margin: 4px !important;
        display: inline-block !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .container .product-full-details .product-slider .thumb-slider .owl-carousel .owl-item .imagetable img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* Hide video controls on mobile too - Target by ID */
    #videoimagesh .controls,
    #videoimagesr .controls,
    #videoimagesh .controls img,
    #videoimagesr .controls img {
        display: none !important;
        visibility: hidden !important;
    }

    /* Fallback for any hidden containers on mobile */
    .product-slider center[style*="display:none"] .controls,
    .product-slider center[style*="display: none"] .controls,
    .product-slider center[style*="display:none"] .controls img,
    .product-slider center[style*="display: none"] .controls img {
        display: none !important;
        visibility: hidden !important;
    }

    .Centervideocontainer {
        flex: unset !important;
    }

    /* CRITICAL: Ensure thumb-slider is visible on mobile */
    .thumb-slider {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        padding: 10px 0 !important;
        /* Remove side padding for full width */
        max-width: 100% !important;
        /* Full width on mobile */
        margin: 0 auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        text-align: left !important;
        /* Left-align thumbnails */
    }

    /* SURGICAL FIX: Mobile thumbnail sizing */
    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 60px !important;
        height: 60px !important;
        margin: 4px !important;
        display: inline-block !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .thumb-slider .owl-carousel .owl-item .imagetable img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* CRITICAL: Override owl-carousel default display:none on mobile */
    .thumb-slider .owl-carousel {
        display: block !important;
        /* Override default display:none */
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
    }

    /* CRITICAL: Ensure owl-carousel is loaded and visible on mobile */
    .thumb-slider .owl-carousel.owl-loaded {
        display: block !important;
        visibility: visible !important;
    }

    .thumb-slider .owl-carousel .owl-nav {
        display: initial !important;
    }

    /* SURGICAL FIX: Hide Owl Carousel pagination dots on mobile too */
    .thumb-slider .owl-carousel .owl-dots {
        display: none !important;
    }

    /* SURGICAL FIX: Try for Free button on mobile */
    .product-slider center:has(#btnTryForFree) {
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
        order: unset !important;
    }

    .img-try-for-free {
        width: auto !important;
        max-width: 200px !important;
        height: auto !important;
        display: inline-block !important;
    }

    /* SURGICAL FIX: Hide empty imagetable containers on mobile */
    .thumb-slider .owl-carousel .owl-item .imagetable:empty,
    .thumb-slider .owl-carousel .owl-item .imagetable:not(:has(img)),
    .thumb-slider .owl-carousel .owl-item .imagetable:not(:has(*)) {
        display: none !important;
        height: 0 !important;
        border: none !important;
    }

    .thumb-slider .owl-carousel .owl-item:not(:has(.imagetable img)) {
        display: none !important;
    }

    /* CRITICAL: iPhone optimizations */
    @media (max-width: 480px) {
        .Product-detail .container {
            width: 98% !important;
            /* More width for iPhone */
            margin: 0 auto !important;
            padding: 0 1% !important;
            /* Minimal padding */
        }

        .Centervideocontainer .imageMob #productmainimage_mob {
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 1200px !important;
            /* Use full 1200px resolution for zoom */
            object-fit: contain !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .thumb-slider {
            padding: 0 !important;
            /* Remove padding to prevent overflow */
            max-width: 100% !important;
            /* Full width on iPhone */
        }

        .thumb-slider .owl-carousel .owl-item .imagetable {
            width: 45px !important;
            /* Smaller for iPhone */
            height: 45px !important;
            /* Smaller for iPhone */
            margin: 2px !important;
            /* Reduced margin */
        }

        /* CRITICAL: Ensure CloudZoom works on iPhone */
        .Centervideocontainer .imageMob #productmainimage_mob.cloudzoom {
            cursor: zoom-in !important;
            transition: transform 0.3s ease !important;
        }

        .Centervideocontainer .imageMob #productmainimage_mob.cloudzoom:hover {
            transform: scale(1.02) !important;
        }

        /* CRITICAL: Product details text left-aligned on iPhone */
        .Product-detail .container .product-full-details .product-details {
            width: 100% !important;
            float: none !important;
            margin-top: 2% !important;
            padding: 0 2% !important;
            /* Minimal padding */
            text-align: left !important;
        }

        .Product-detail .container .product-full-details .product-details .product-info {
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .Product-detail .container .product-full-details .product-details .product-info .product-title {
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .Product-detail .container .product-full-details .product-details .product-info .product-title h1 {
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
            font-size: 18px !important;
            /* Smaller font for iPhone */
            line-height: 1.3 !important;
        }

        .Product-detail .container .product-full-details .product-details .product-info .product-text {
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
        }

        .Product-detail .container .product-full-details .product-details .product-info .product-text p {
            text-align: left !important;
            padding-left: 0 !important;
            margin-left: 0 !important;
            font-size: 14px !important;
            /* Smaller font for iPhone */
            line-height: 1.4 !important;
        }
    }
}

/* CRITICAL: Global CloudZoom enhancements */
.cloudzoom {
    cursor: zoom-in !important;
    transition: transform 0.3s ease !important;
}

.cloudzoom:hover {
    transform: scale(1.02) !important;
}

/* CloudZoom overlay styling */
.cloudzoom-zoom {
    border: 2px solid #30a8dc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* CloudZoom caption styling */
.cloudzoom-caption {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

/* CRITICAL: Performance optimizations for all devices */
.thumb-slider .owl-carousel .owl-item .imagetable,
.Centervideocontainer .imageWeb #popupdiv #productmainimage,
.Centervideocontainer .imageMob #productmainimage_mob,
.cloudzoom {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* Smooth transitions */
.thumb-slider .owl-carousel .owl-item .imagetable {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.thumb-slider .owl-carousel .owl-item .imagetable:hover {
    border-color: #b0b0b0 !important;
    box-shadow: 0 2px 8px rgba(176, 176, 176, 0.3) !important;
}

/* CRITICAL: Accessibility improvements */
.thumb-slider .owl-carousel .owl-item .imagetable:focus {
    outline: 2px solid #30a8dc !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .thumb-slider .owl-carousel .owl-item .imagetable {
        border: 2px solid #000 !important;
    }

    .thumb-slider .owl-carousel .owl-item .imagetable:hover {
        border-color: #b0b0b0 !important;
        background-color: #f5f5f5 !important;
    }
}

/* ============================================
   SURGICAL FIX: Build Product Page Container Width Optimization
   Date: 2025-10-12
   ============================================
   
   PROBLEM: Container uses 80%/96% percentages without max-width cap
   At 1920px screens: container = 1536px (too wide for readability)
   
   SOLUTION: Modern responsive approach - 100% width with 1360px max-width
   BENEFITS: 
   - Maximizes space on mid-range screens (1100-1400px)
   - Caps at 1360px for optimal readability on ultra-wide screens
   - Matches Product Detail page (consistency)
   - Preserves all mobile/tablet responsive behavior
   
   SCOPE: Desktop only (≥1025px)
   MOBILE: Completely preserved - existing 96%/98% rules untouched
   ============================================ */

/* Desktop Large (>1500px): 100% width with 1360px cap */
@media (min-width: 1501px) {
    html body div.web-size div.container {
        width: 100% !important;
        max-width: 1360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
        box-sizing: border-box !important;
    }
}

/* Desktop Standard (1025-1500px): 100% width with 1360px cap */
@media (min-width: 1025px) and (max-width: 1500px) {
    html body div.web-size div.container {
        width: 100% !important;
        max-width: 1360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
        box-sizing: border-box !important;
    }
}

/* Tablet and Mobile (≤1024px): NO CHANGES
   All existing responsive rules preserved:
   - 901-1024px: 96% (from _buildProductDetail.css line 634)
   - 801-900px: 96% (from _buildProductDetail.css line 637)
   - ≤800px: 96% (from _buildProductDetail.css line 645)
   - ≤480px: 98% !important (from _buildProductDetail.css line 575)
*/

/* Mobile: Keep existing layout (original behavior) */
@media (max-width: 767px) {

    .product-slider .try-for-free-container,
    .product-slider center:has(.img-try-for-free) {
        order: 2 !important;
        width: calc(100% - 95px) !important;
        margin-left: 95px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        margin-top: 20px !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .img-try-for-free {
        width: 100px !important;
        height: auto !important;
        display: inline-block !important;
        opacity: 1 !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 6px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
}

/* ################################################################################
   END OF FILE #10: pdp-surgical-fix.css
   ################################################################################ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE PRODUCT IMAGE - Single Image for Desktop & Mobile
   Issue: Duplicate image loading (desktop + mobile using same source)
   Solution: Use ONE responsive image element, remove mobile duplicate
   Impact: 50% reduction in image requests (2 images → 1 image)
   Pages: ProductDetail/Index.cshtml only (BuildProductDetail unchanged)
   Date: Oct 20, 2025
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Desktop: Fixed width for desktop viewers */
.responsive-product-image {
    width: 650px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Mobile: Full width, touch-friendly for mobile devices */
@media (max-width: 768px) {
    .responsive-product-image {
        width: 100% !important;
        height: auto !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        object-fit: contain !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SINGLE IMAGE SOLUTION - Responsive CSS for #productmainimage (Mobile + Desktop)
   Date: Oct 20, 2025
   Purpose: Ensure single image element works perfectly across all devices (no separate mobile image)
   Benefit: Eliminates duplicate image loading, simpler codebase, better performance
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* CRITICAL: .imageWeb must be positioned container for loading indicator (all pages) */
.imageWeb {
    position: relative !important;
}

/* Base: Ensure image container is always visible and responsive */
.Centervideocontainer .imageWeb {
    display: block !important;
    /* Always visible (no mobile/desktop switching) */
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
}

/* Ensure main image is responsive at all screen sizes */
#productmainimage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* REMOVED: max-width: 100% !important; - Conflicts with viewport-specific JetZoom sizing (400/500/600/650px) */
    object-fit: contain !important;
    visibility: visible !important;
}

/* Mobile (Below 768px): Full width, touch-friendly */
@media (max-width: 767px) {
    .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: auto !important;
    }

    #productmainimage {
        width: 100% !important;
        /* REMOVED: max-width: 100% !important; - Conflicts with viewport-specific JetZoom sizing (400px mobile) */
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }

    /* Ensure CloudZoom works on mobile touch */
    #productmainimage.cloudzoom {
        cursor: zoom-in !important;
    }
}

/* Tablet (768px - 1099px): Responsive within float layout */
@media (min-width: 768px) and (max-width: 1099px) {
    .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: auto !important;
    }

    #productmainimage {
        width: 100% !important;
        /* REMOVED: max-width: 100% !important; - Conflicts with viewport-specific JetZoom sizing (500px tablet) */
    }
}

/* Desktop (1100px+): Flexible within flexbox layout */
@media (min-width: 1100px) {
    .Centervideocontainer .imageWeb {
        width: 100% !important;
        height: auto !important;
    }

    #productmainimage {
        width: 100% !important;
        /* REMOVED: max-width: 100% !important; - Conflicts with viewport-specific JetZoom sizing (600-650px desktop) */
    }

    /* Ensure CloudZoom works on desktop hover */
    #productmainimage.cloudzoom {
        cursor: zoom-in !important;
        transition: transform 0.3s ease !important;
    }

    #productmainimage.cloudzoom:hover {
        transform: scale(1.02) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   END SINGLE IMAGE SOLUTION
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   PHASE 2: DIAMOND DETAILS RESPONSIVE LAYOUT (JetZoom Pages Only)
   Date: 2025-10-20 (Phase 2 Implementation)
   
   PROBLEM: Need responsive layout for Diamond Details page WITHOUT affecting Product Detail page
   
   SOLUTION: Target ONLY pages with JetZoom using .jetzoomzet selector
     - Product Detail page uses CloudZoom → NOT affected
     - Diamond Details page uses JetZoom → WILL be affected
     - Pair Diamond page has no wrappers → NOT affected
   
   DESKTOP (>1100px): Thumbnails LEFT, Image RIGHT (flexible, side-by-side)
   MOBILE (<1100px): Image TOP, Thumbnails BOTTOM (stacked)
   
   SAFETY: 95% - Uses .jetzoomzet as differentiator between PDP and DD pages
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP & TABLET LAYOUT (>1100px): Thumbnails LEFT, Image RIGHT
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {

    /* Target ONLY Diamond Details pages (have JetZoom) - HIGH SPECIFICITY to override previous rules */
    .web-size .container .product-full-details .product-slider:has(.jetzoomzet),
    .Product-detail .container .product-full-details .product-slider:has(.jetzoomzet),
    .product-slider:has(.jetzoomzet) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* Thumbnails on the LEFT - fixed width */
    .web-size .container .product-full-details .product-slider:has(.jetzoomzet) .thumb-slider,
    .Product-detail .container .product-full-details .product-slider:has(.jetzoomzet) .thumb-slider,
    .product-slider:has(.jetzoomzet) .thumb-slider {
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    /* Image on the RIGHT - flexible width (shrinks to fit) */
    .web-size .container .product-full-details .product-slider:has(.jetzoomzet) .imageWeb,
    .Product-detail .container .product-full-details .product-slider:has(.jetzoomzet) .imageWeb,
    .product-slider:has(.jetzoomzet) .imageWeb {
        flex: 1 1 0% !important;
        /* Flexible container - can shrink */
        order: 2 !important;
        min-width: 0 !important;
        /* Allow shrinking below content size */
    }

    /* Main image responsive within flexible container */
    .web-size .container .product-full-details .product-slider:has(.jetzoomzet) #productmainimage,
    .Product-detail .container .product-full-details .product-slider:has(.jetzoomzet) #productmainimage,
    .product-slider:has(.jetzoomzet) #productmainimage {
        width: 100% !important;
        height: auto !important;
        /* REMOVED: max-width: 100% !important; - Conflicts with viewport-specific JetZoom sizing (600-650px desktop) */
        object-fit: contain !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DIAMOND DETAILS PROMOTIONAL TRUST BADGES - Match Source Page Exactly
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Primary Trust Badges - Match source page styling exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
    margin: 1px 0px 6px !important;
    padding: 8px 12px !important;
    background: rgb(248, 249, 250) !important;
    border: 0.666667px solid rgb(222, 226, 230) !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* DIAMOND DETAILS ONLY: Responsive Text Spans - Base (Desktop Medium+) */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-full {
    display: inline !important;
}
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-medium {
    display: none !important;
}
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-mobile {
    display: none !important;
}

/* DIAMOND DETAILS ONLY: Secondary Trust Badges - Match source page styling exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges {
    margin: 1px 0px 6px !important;
    padding: 0px 13px !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* DIAMOND DETAILS ONLY: Trust Badge Text - Match source page font exactly - HIGHER SPECIFICITY */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.primary-trust-badges p,
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p,
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p,
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
    font-family: Lato-Regular, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgb(66, 66, 66) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    white-space: nowrap !important;
}

/* DIAMOND DETAILS ONLY: Secondary Trust Badges - Different line height for secondary - HIGHER SPECIFICITY */
html body div.Product-detail div.product-details.product_detail-etrnity div.product-info div.secondary-trust-badges p,
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
    line-height: 1.5 !important;
}

/* DIAMOND DETAILS ONLY: Checkmark Styling - Match source page exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p span {
    color: rgb(0, 136, 204) !important;
    font-weight: 700 !important;
}

/* DIAMOND DETAILS ONLY: Bold Keywords - Match source page exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p b {
    font-weight: 700 !important;
    color: rgb(33, 37, 41) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX 2: PRIMARY BADGE FONT SIZE - Match source exactly for all viewports
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Fix primary badge element font size to match source exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
    font-size: 13px !important;
    /* Currently 16px, should be 13px to match source */
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SECONDARY TRUST BADGES POSITIONING FIX - Remove Yellow Border Line
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Secondary Trust Badges - Ensure proper positioning outside price container */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;
    padding: 0px 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BEHAVIOR FOR PROMOTIONAL TRUST BADGES
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Mobile and Tablet: Adjust padding and font sizes */
@media (max-width: 1099px) {

    /* DIAMOND DETAILS ONLY: Primary Trust Badges - Mobile adjustments */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
        padding: 6px 8px !important;
        margin: 1px 0px 4px !important;
    }

    /* DIAMOND DETAILS ONLY: Secondary Trust Badges - Mobile adjustments */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges {
        padding: 0px 8px !important;
        margin: 1px 0px 4px !important;
    }

    /* DIAMOND DETAILS ONLY: Trust Badge Text - Mobile font adjustments */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p,
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* DIAMOND DETAILS ONLY: Secondary Trust Badges - Mobile line height */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        line-height: 1.4 !important;
    }

    /* DIAMOND DETAILS ONLY: Show full text on tablet (768-1099px) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-full {
        display: inline !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-medium {
        display: none !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-mobile {
        display: none !important;
    }
}

/* Mobile ONLY: Show short text (<768px) */
@media (max-width: 767px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-full {
        display: none !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-medium {
        display: none !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-mobile {
        display: inline !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
        padding: 8px 12px !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p {
        font-size: 15px !important;
    }
}

/* Desktop Small: Show medium text (1100-1299px) */
@media (min-width: 1100px) and (max-width: 1299px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-full {
        display: none !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-medium {
        display: inline !important;
    }
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges .trust-mobile {
        display: none !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
        padding: 8px !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p {
        font-size: 13px !important;
    }
}

/* Desktop Medium+: Show full text (>=1300px) */
@media (min-width: 1300px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges {
        padding: 8px !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p {
        font-size: 13px !important;
    }
}

/* ===============================================================================
   SECONDARY TRUST BADGES - RESPONSIVE TEXT IMPLEMENTATION (Diamond Details Only)
   Browser-Verified: Full words that fit perfectly across all viewports

   Strategy:
   - Mobile & Desktop Small: Short text (✓ FREE Shipping • ✓ 30-Day Returns)
   - Tablet & Desktop Medium+: Full text (all 4 benefits)
   =============================================================================== */

/* DIAMOND DETAILS ONLY: Base (show full text for tablet and desktop medium+) */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-full {
    display: inline !important;
}

html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-short {
    display: none !important;
}

html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
    font-size: 15px !important;
}

/* Mobile (<768px): Show short text */
@media (max-width: 767px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-full {
        display: none !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-short {
        display: inline !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 15px !important;
    }
}

/* Tablet (768-1099px): Full text at 15px */
@media (min-width: 768px) and (max-width: 1099px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 15px !important;
    }
}

/* Desktop Small (1100-1299px): Show short text */
@media (min-width: 1100px) and (max-width: 1299px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-full {
        display: none !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges .secondary-trust-short {
        display: inline !important;
    }

    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 15px !important;
    }
}

/* Desktop Medium+ (>=1300px): Full text at 13px */
@media (min-width: 1300px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 13px !important;
    }
}

/* Small Mobile: Further adjustments for very small screens */
@media (max-width: 480px) {

    /* DIAMOND DETAILS ONLY: Trust Badge Text - Small mobile font adjustments */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.primary-trust-badges p,
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    /* DIAMOND DETAILS ONLY: Secondary Trust Badges - Small mobile line height */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.secondary-trust-badges p {
        line-height: 1.3 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   STEP 1: PRODUCT-DETAILS CONTAINER FIXES - Match Source Page Exactly Across All Viewports
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Product Details Container - Desktop Fixes */
@media (min-width: 1100px) {

    /* Desktop Large, Medium, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 3px 0px !important;
        /* Fixed: was 1px 0px 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: left !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
    }
}

/* DIAMOND DETAILS ONLY: Product Details Container - Tablet Fixes */
@media (min-width: 768px) and (max-width: 1099px) {

    /* Tablet Large, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 3px 0px !important;
        /* Fixed: was 1px 0px 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: left !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
    }
}

/* DIAMOND DETAILS ONLY: Product Details Container - Mobile Fixes */
@media (max-width: 767px) {

    /* Mobile Large, Medium, Small: Match source margins, float, and padding exactly */
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 7.64583px 0px 3px !important;
        /* Fixed: was 1px 0px 44.9583px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: none !important;
        /* Fixed: was left, now matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px 7.64583px !important;
        /* Fixed: was 0px 11.2396px, now matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
    }
}

/* DIAMOND DETAILS ONLY: Product Details Container - Mobile Large Specific */
@media (min-width: 414px) and (max-width: 480px) {
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 7.64583px 0px 3px !important;
        /* Mobile Large specific margin */
        padding: 0px 7.64583px !important;
        /* Mobile Large specific padding */
    }
}

/* DIAMOND DETAILS ONLY: Product Details Container - Mobile Medium Specific */
@media (min-width: 375px) and (max-width: 413px) {
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 6.90625px 0px 3px !important;
        /* Mobile Medium specific margin */
        padding: 0px 6.90625px !important;
        /* Mobile Medium specific padding */
    }
}

/* DIAMOND DETAILS ONLY: Product Details Container - Mobile Small Specific */
@media (max-width: 374px) {
    html body div.web-size div.container div.product-full-details div.product-details {
        margin: 5.84375px 0px 3px !important;
        /* Mobile Small specific margin */
        padding: 0px 5.84375px !important;
        /* Mobile Small specific padding */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   STEP 2: PRODUCT-INFO CONTAINER FIXES - Match Source Page Exactly Across All Viewports
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Product Info Container - Desktop Fixes */
@media (min-width: 1100px) {

    /* Desktop Large, Medium, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info {
        margin: 3px 0px !important;
        /* Fixed: was 2px 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: none !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: 0px !important;
        /* Fixed: was 609px, now matches source */
    }
}

/* DIAMOND DETAILS ONLY: Product Info Container - Tablet Fixes */
@media (min-width: 768px) and (max-width: 1099px) {

    /* Tablet Large, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info {
        margin: 3px 0px !important;
        /* Fixed: was 2px 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: none !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: 0px !important;
        /* Fixed: was 723px, now matches source */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TASK 1: PRODUCT DETAIL (JEWELRY) PRODUCT TITLE STANDARDIZATION
   Pages: Jewelry, Product Details (WITHOUT .web-size class)
   Date: 2025-11-16
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* JEWELRY PAGES: Mobile Product Title (≤767px) */
@media (max-width: 767px) {

    html body div.container div.product-full-details div.product-details div.product-info div.product-title h1,
    .Product-detail .container .product-full-details .product-details .product-info .product-title h1,
    .product-details .product-title h1,
    .product-title h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
    }
}

/* JEWELRY PAGES: Tablet Product Title (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    html body div.container div.product-full-details div.product-details div.product-info div.product-title h1,
    .Product-detail .container .product-full-details .product-details .product-info .product-title h1,
    .product-details .product-title h1,
    .product-title h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
    }
}

/* JEWELRY PAGES: Desktop Product Title (≥1025px) */
@media (min-width: 1025px) {

    html body div.container div.product-full-details div.product-details div.product-info div.product-title h1,
    .Product-detail .container .product-full-details .product-details .product-info .product-title h1,
    .product-details .product-title h1,
    .product-title h1 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
    }
}

/* DIAMOND DETAILS ONLY: Product Info Container - Mobile Fixes */
@media (max-width: 767px) {

    /* Mobile Large, Medium, Small: Match source margins and padding exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info {
        margin: 3px 0px !important;
        /* Fixed: was 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: none !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 1px 0px !important;
        /* Fixed: was 0px, now matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: 2px !important;
        /* Fixed: was 1159px, now matches source */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   STEP 3: PRODUCT-TITLE CONTAINER FIXES - Match Source Page Exactly Across All Viewports
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Product Title Container - Desktop Fixes */
@media (min-width: 1100px) {

    /* Desktop Large, Medium, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title {
        margin: 3px 0px !important;
        /* Fixed: was 7px 0px 2px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: left !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: auto !important;
        /* TASK 1 FIX (2025-11-16): was 42px, changed to auto to prevent H1 overflow */
    }

    /* TASK 1: Desktop H1 Product Title Standardization (≥1280px) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title h1 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
    }
}

/* DIAMOND DETAILS ONLY: Product Title Container - Desktop Small Height Fix */
@media (min-width: 1100px) and (max-width: 1280px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title {
        height: auto !important;
        /* TASK 1 FIX (2025-11-16): was 78px, changed to auto to prevent H1 overflow */
    }
}

/* DIAMOND DETAILS ONLY: Product Title Container - Tablet Fixes */
@media (min-width: 768px) and (max-width: 1099px) {

    /* Tablet Large, Small: Match source margins exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title {
        margin: 3px 0px !important;
        /* Fixed: was 7px 0px 2px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: left !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 0px !important;
        /* Confirmed: matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: auto !important;
        /* TASK 1 FIX (2025-11-16): was 78px, changed to auto to prevent H1 overflow */
    }

    /* TASK 1: Tablet H1 Product Title Standardization (768-1099px) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
    }
}

/* DIAMOND DETAILS ONLY: Product Title Container - Mobile Fixes */
@media (max-width: 767px) {

    /* Mobile Large, Medium, Small: Match source margins, padding, and font-size exactly */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title {
        margin: 3px 0px !important;
        /* Fixed: was 0px, now matches source */
        text-align: left !important;
        /* Fixed: was start, now matches source */
        float: left !important;
        /* Confirmed: matches source */
        clear: none !important;
        /* Confirmed: matches source */
        padding: 1px 0px !important;
        /* Fixed: was 0px, now matches source */
        display: block !important;
        /* Confirmed: matches source */
        position: static !important;
        /* Confirmed: matches source */
        background: rgba(0, 0, 0, 0) !important;
        /* Confirmed: matches source */
        border: 0px none rgb(33, 37, 41) !important;
        /* Confirmed: matches source */
        border-radius: 0px !important;
        /* Confirmed: matches source */
        box-sizing: content-box !important;
        /* Confirmed: matches source */
        height: auto !important;
        /* TASK 1 FIX (2025-11-16): was 80px, changed to auto to prevent H1 overflow */
    }

    /* TASK 1: Mobile H1 Product Title Standardization (≤767px) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        color: rgb(34, 34, 34) !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-family: 'Lato-Regular' !important;
        /* Fixed: was 26px, now matches source */
    }
}

/* DIAMOND DETAILS ONLY: Product Title Container - Mobile Small Height Fix */
@media (max-width: 374px) {
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-title {
        height: auto !important;
        /* TASK 1 FIX (2025-11-16): was 117px, changed to auto to prevent H1 overflow */
    }

    /* Mobile Small H1 font size - DELETED (2025-11-16) - Conflicts with TASK 1 (18px for all mobile ≤767px) */
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DIAMOND DETAILS TEXT REMOVAL - Hide text while preserving layout integrity
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Hide Diamond Details text completely */
.header-ring {
    display: none !important;
}

/* Ensure Back To Search maintains proper right float positioning */
.backButton {
    float: right !important;
    margin: 0px !important;
    position: relative !important;
    top: 0px !important;
    margin-top: 10px !important;
    color: rgb(48, 168, 220) !important;
    font-size: 16px !important;
    text-decoration: underline !important;
}

/* Responsive adjustments for Back To Search */
@media (min-width: 381px) and (max-width: 480px) {
    .backButton {
        font-size: 14px !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 320px) {
    .backButton {
        font-size: 14px !important;
        margin-top: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DIAMOND DETAILS PRODUCT TITLE H1 - DELETED (2025-11-16)
   These old rules were conflicting with TASK 1 standardization and have been removed.
   Product title styling is now handled by TASK 1 responsive rules at lines 4004-4103.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* DIAMOND DETAILS ONLY: Price Container - Match source page styling exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond {
    margin: 1px 0px 6px !important;
    padding: 0 !important;
    /* FIXED: Changed from 10px 12px to 0 to match source */
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgb(224, 224, 224) !important;
    border-radius: 6px !important;
    display: block !important;
}

/* DIAMOND DETAILS ONLY: Main Price Label - Match source page exactly */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond b:first-child {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgb(66, 66, 66) !important;
    line-height: 18px !important;
}

/* DIAMOND DETAILS ONLY: Old Price (Strikethrough) - Small and Gray - OVERRIDE INLINE STYLES */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond span[style*="color:red"][style*="text-decoration: line-through"] {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgb(117, 117, 117) !important;
    text-decoration: line-through !important;
    line-height: 18px !important;
}

/* DIAMOND DETAILS ONLY: Current Price (iframe) - BIG and BLUE */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond iframe {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 38.4px !important;
    border: none !important;
    height: 38px !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* DIAMOND DETAILS ONLY: Iframe content styling - Target the actual price text */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond iframe[src*="DisplayContent"] {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 38.4px !important;
    border: none !important;
    height: 38px !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* DIAMOND DETAILS ONLY: Force iframe content styling via CSS injection */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond iframe {
    background-color: transparent !important;
}

/* DIAMOND DETAILS ONLY: Style the iframe container to make content appear big and blue - EXCLUDE strikethrough spans */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond span:not([style*="text-decoration: line-through"]) {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 38.4px !important;
}

/* DIAMOND DETAILS ONLY: Override iframe inline styles with maximum specificity */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond iframe[style*="font-size:15px"],
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond iframe span[style*="font-size:15px"] {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 38.4px !important;
}

/* DIAMOND DETAILS ONLY: Bank Wire Old Price (Strikethrough) - Small and Gray - OVERRIDE INLINE STYLES */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond:last-child span[style*="color:red"][style*="text-decoration: line-through"] {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgb(117, 117, 117) !important;
    text-decoration: line-through !important;
    line-height: 18px !important;
}

/* DIAMOND DETAILS ONLY: Bank Wire Current Price (iframe) - BIG and BLUE */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond:last-child iframe {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: rgb(0, 136, 204) !important;
    line-height: 38.4px !important;
    border: none !important;
    height: 38px !important;
    vertical-align: baseline !important;
}

/* DIAMOND DETAILS ONLY: Bank Wire Price Label - Smaller and Gray */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .price-newdiamond:last-child b {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgb(66, 66, 66) !important;
    line-height: 18px !important;
}

/* DIAMOND DETAILS ONLY: Price Match Guarantee - Match source page styling */
html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-pricediamond .diamond-price-match {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(66, 66, 66) !important;
    line-height: normal !important;
    margin: 0px !important;
    padding: 0px 21px 0px 0px !important;
    display: block !important;
    text-align: start !important;
}

/* Video container - full width, smooth transitions */
.imageWeb #dvvideoimg {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Responsive video container - DESKTOP ONLY (mobile/tablet have specific rules below) */
@media (min-width: 1100px) {
    .imageWeb #dvvideoimg.has-video {
        width: 650px !important;
        max-width: 650px !important;
        height: 650px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Iframe positioning handled by JavaScript - no CSS needed for iframe */
}

/* Fallback for iframes without has-video class */
.imageWeb #dvvideoimg iframe {
    /* NO width rules - let JavaScript inline styles control dimensions */
    border: none;
    max-width: none !important; /* Allow iframe to be wider than container for scaling */
}

/* FIX ISSUE 1 & 2: Positioning context and overlay setup */
/* Parent container needs positioning context for absolute children */
.imageWeb {
    position: relative;
    background: transparent;
    /* Default, JS will set to black during transition */
}

/* FIX ISSUE 1: Force absolute positioning for IMAGE overlay (fixes stacking issue) */
/* Image uses absolute positioning to overlay on same space */
.imageWeb .jetzoomzet {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Video container positioning handled by responsive media queries below */
/* DO NOT use absolute positioning here - it breaks flexbox centering */
.imageWeb #dvvideoimg {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Dimension images hidden by default */
.imageWeb .dimensionproductimageclass {
    display: none;
    margin: 88px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥1100px): Thumbnails LEFT, Image RIGHT (Side-by-side)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {

    /* Desktop: Side-by-side layout */
    html body div.web-size div.container div.product-full-details div.product-slider {
        display: flex !important;
        flex-direction: row !important;
        /* Side-by-side */
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    /* Thumbnails on the left - COMPACT AUTO-EXPANDING - MATCH SOURCE EXACTLY */
    html body div.web-size div.container div.product-full-details div.product-slider .thumb-slider {
        flex: 0 0 80px !important;
        order: 0 !important;
        height: auto !important;
        /* Auto-expand based on thumbnail count */
        min-height: 140px !important;
        /* Minimum for 2 thumbnails */
        max-height: 600px !important;
        /* Maximum to prevent overflow */
        padding: 0 !important;
        /* MATCH SOURCE: No padding */
    }

    /* Owl Carousel container - auto height */
    html body div.web-size div.container div.product-full-details div.product-slider .thumb-slider #diamond-thumbnails {
        height: auto !important;
        overflow: visible !important;
    }

    /* Owl Carousel items - MATCH SOURCE: Use flexbox for centering */
    html body div.web-size div.container div.product-full-details div.product-slider .thumb-slider .owl-item {
        display: flex !important;
        /* MATCH SOURCE: flex display */
        justify-content: center !important;
        /* Center horizontally */
        margin: 0 !important;
        /* MATCH SOURCE: No margin on item */
    }

    /* Thumbnail wrapper - MATCH SOURCE: Balanced margins */
    html body div.web-size div.container div.product-full-details div.product-slider .thumb-slider .owl-item-wrapper {
        margin: 0 10px 6px !important;
        /* MATCH SOURCE EXACTLY: 0px 10px 6px */
    }

    /* Image on the right */
    html body div.web-size div.container div.product-full-details div.product-slider .imageWeb {
        flex: 1 1 auto !important;
        order: 1 !important;
    }

    /* Desktop: Image max-height to match video container (650px) */
    html body div.web-size div.container div.product-full-details div.product-slider .imageWeb #productmainimage {
        max-height: 650px !important;
        max-width: 650px !important;
        height: auto !important;
        width: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TABLET/MOBILE LAYOUT (<1100px): Image TOP, Thumbnails BOTTOM (Float-based wrapping)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1099px) {

    /* Product slider container: EXACT source page logic */
    html body div.web-size div.container div.product-full-details div.product-slider {
        display: block !important;
        /* Match source page exactly */
        float: left !important;
        /* Match source page exactly */
        clear: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Image container: EXACT source page logic */
    /* BuildProductDetail: Let media queries control display */
    html body div.web-size div.container div.product-full-details div.product-slider .imageWeb:not(.Centervideocontainer .imageWeb) {
        /* display controlled by media queries in pdp-modern-responsive.css */
        float: left !important;
        /* Match source page exactly */
        clear: left !important;
        /* KEY: This forces image below thumbnails */
        width: 100% !important;
        /* Full width like source page */
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    /* TASK 3 FIX: Thumbnail container - CENTERED with max-width */
    html body div.web-size div.container div.product-full-details div.product-slider .thumb-slider {
        display: block !important;
        float: none !important;
        /* FIXED: No float so margin auto can center */
        clear: none !important;
        width: auto !important;
        /* FIXED: Auto width for max-width to work */
        max-width: 340px !important;
        /* MATCH SOURCE: Constrain carousel width */
        margin: 0 auto !important;
        /* Center the carousel */
        padding: 0 50px !important;
        /* MATCH SOURCE: 50px not 30px */
        box-sizing: border-box !important;
    }

    /* Main image: constrained size like source page */
    html body div.web-size div.container div.product-full-details div.product-slider .imageWeb #productmainimage {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 650px !important;
        /* TIER 3 FIX: Changed from 500px to 650px for Diamond Detail 650px images */
    }

    /* TIER 3 FIX PART 2: Direct #productmainimage selector (no .imageWeb requirement) */
    html body div.web-size div.container div.product-full-details div.product-slider #productmainimage {
        max-height: 650px !important;
        /* Override all 500px/400px/350px constraints */
        max-width: 650px !important;
        height: auto !important;
        width: auto !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       SURGICAL FIX: Diamond Details Main Image/Video Centering
       Date: 2025-10-24

       ISSUE: Main diamond 360 viewer iframe is left-aligned with 15px blank space on right
       ROOT CAUSE:
       - HTML element width constrained to 415px instead of full 430px viewport
       - .imageWeb has float:left preventing centering

       FIX: Force full viewport width for all parent containers and center content
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

    /* CRITICAL: Force HTML and BODY to use full viewport width */
    html,
    body {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        /* Prevent horizontal scroll */
    }

    /* Force all parent containers to use full width */
    .web-size,
    .container,
    .product-full-details,
    .product-slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* CRITICAL: Remove float from .imageWeb to enable centering */
    html body div.web-size div.container div.product-full-details div.product-slider .imageWeb {
        float: none !important;
        /* OVERRIDE: Remove float:left to enable centering */
        margin: 0 auto !important;
        /* Center horizontally */
        text-align: center !important;
        /* Center inline/inline-block children */
    }

    /* Center the iframe container */
    .imageWeb #dvvideoimg {
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Ensure iframe is centered within container */
    .imageWeb #dvvideoimg iframe {
        margin: 0 auto !important;
        display: block !important;
    }

}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SURGICAL FIX: Mobile/Tablet Video Container - Viewport-Relative Dimensions

   ISSUE: Fixed pixel heights (430px, 820px) cause video cropping on varying viewport widths

   FIX: Use 100vw for height to create perfect square containers on ALL device widths
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Mobile: Fixed 400×400 container (PHASE 1A: Changed from 100vw for consistency) */
@media (max-width: 767px) {

    /* Parent container must be 400px to allow child to be 400px */
    .Centervideocontainer .imageWeb {
        width: 400px !important;
        /* PHASE 1A: Fixed 400px (was 100%) - allows child container to be 400px */
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .imageWeb #dvvideoimg.has-video {
        width: 400px !important;
        /* PHASE 1A: Fixed 400px (was 100%) - ensures exact 400×400 container */
        max-width: 400px !important;
        height: 400px !important;
        /* PHASE 1A: Fixed 400px (was 100vw) - enables consistent mobile video sizing */
        margin: 0 auto !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Iframe positioning handled by JavaScript - no CSS needed for iframe */
}

/* Tablet+Desktop: Fixed 650×650 container (PHASE 1A: Ensures consistent dimensions) */
@media (min-width: 768px) {

    /* Parent container must be 650px to allow child to be 650px */
    .Centervideocontainer .imageWeb {
        width: 650px !important;
        /* PHASE 1A: Fixed 650px (was 100%) - allows child container to be 650px */
        max-width: 650px !important;
        margin: 0 auto !important;
    }

    .imageWeb #dvvideoimg.has-video {
        width: 650px !important;
        /* PHASE 1A: Fixed 650px (was 100%) - ensures exact 650×650 container */
        max-width: 650px !important;
        height: 650px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Iframe positioning handled by JavaScript - no CSS needed for iframe */
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   PHASE 3B: OWL CAROUSEL RESPONSIVE CSS - Diamond Details Thumbnails
   Date: 2025-10-20
   
   PROBLEM: Need vertical thumbnails on desktop, horizontal on mobile
   
   SOLUTION: Owl Carousel with responsive configuration
     - Desktop (≥1100px): Vertical carousel, 80px width, LEFT of image
     - Mobile (<1100px): Horizontal carousel, 100% width, BOTTOM of image
   
   SAFETY: 100% - Only applies to #diamond-thumbnails (unique ID on DD page)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥1100px): Vertical Thumbnails LEFT
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {

    /* Thumbnail slider container - fixed narrow width for vertical layout */
    .thumb-slider {
        width: 80px !important;
        height: auto !important;
    }

    /* Owl Carousel - vertical configuration */
    #diamond-thumbnails {
        height: 400px !important;
        overflow: hidden !important;
    }

    /* Individual thumbnail wrapper */
    #diamond-thumbnails .owl-item-wrapper {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    /* Thumbnail images */
    #diamond-thumbnails .owl-item-wrapper img {
        display: block !important;
        margin: 0 auto !important;
        max-width: 60px !important;
        cursor: pointer !important;
    }

    /* Hide Owl Carousel navigation on desktop */
    #diamond-thumbnails .owl-nav {
        display: none !important;
    }

    /* Hide Owl Carousel dots on desktop */
    #diamond-thumbnails .owl-dots {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT (<1100px): Horizontal Thumbnails BOTTOM
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1099px) {

    /* Thumbnail slider container - full width for horizontal layout */
    .product-slider:has(.jetzoomzet) .thumb-slider,
    .thumb-slider {
        width: 100% !important;
        height: auto !important;
        /* flex: none is already set in Phase 2 mobile CSS above - do NOT override it */
    }

    /* Owl Carousel - horizontal configuration */
    #diamond-thumbnails {
        height: auto !important;
        overflow: visible !important;
    }

    /* Individual thumbnail wrapper - EXACT source page logic */
    #diamond-thumbnails .owl-item-wrapper {
        display: block !important;
        /* Match source page exactly */
        width: auto !important;
        margin: 3px !important;
        /* Match source page margin exactly */
        text-align: center !important;
        float: left !important;
        /* Match source page exactly */
        position: static !important;
        /* Match source page exactly */
    }

    /* Owl Carousel items - EXACT source page logic */
    #diamond-thumbnails .owl-item {
        display: block !important;
        /* Match source page exactly */
        width: auto !important;
        float: left !important;
        /* Match source page exactly */
    }

    /* Owl Carousel stage - EXACT source page logic */
    #diamond-thumbnails .owl-stage {
        display: block !important;
        /* Match source page exactly */
    }

    /* Thumbnail images */
    #diamond-thumbnails .owl-item-wrapper img {
        display: block !important;
        margin: 0 auto !important;
        max-width: 60px !important;
        cursor: pointer !important;
    }

    /* TASK 3 FIX: Owl-nav container - MATCH SOURCE PAGE (position: static, display: inline) */
    #diamond-thumbnails .owl-nav.disabled,
    #diamond-thumbnails .owl-nav {
        display: inline !important;
        /* MATCH SOURCE: inline not block */
        position: static !important;
        /* MATCH SOURCE: static not absolute */
        width: auto !important;
        /* MATCH SOURCE: auto width */
        height: auto !important;
        /* MATCH SOURCE: auto height, not 0 */
        pointer-events: none !important;
        /* Don't block clicks on thumbnails */
        overflow: visible !important;
        /* Allow arrows to show outside */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* TASK 3 FIX: Style navigation arrows - ALIGNED WITH ACTUAL THUMBNAIL POSITION */
    #diamond-thumbnails .owl-nav .owl-next,
    #diamond-thumbnails .owl-nav .owl-prev,
    #diamond-thumbnails .owl-nav.disabled .owl-next,
    #diamond-thumbnails .owl-nav.disabled .owl-prev {
        display: block !important;
        /* Always show arrows */
        background-image: url(/B2CTheme/owl-carousel/productthslider/asets/arrow.png) !important;
        text-indent: -9999px !important;
        background-repeat: no-repeat !important;
        height: 30px !important;
        width: 30px !important;
        position: absolute !important;
        top: 34px !important;
        /* FIX: Position at actual thumbnail center (34px below carousel container on both viewports) */
        transform: translateY(-50%) !important;
        /* Center arrow vertically on thumbnail line */
        margin-top: 0px !important;
        /* No margin */
        left: calc((100vw - 340px) / -2 + 10px) !important;
        /* UI/UX FIX: Position 10px from LEFT viewport edge for EXCELLENT reachability */
        cursor: pointer !important;
        border: none !important;
        background-color: transparent !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        /* Arrows are clickable */
        opacity: 1 !important;
        /* Override disabled opacity */
    }

    #diamond-thumbnails .owl-nav .owl-next,
    #diamond-thumbnails .owl-nav.disabled .owl-next {
        right: calc((100vw - 340px) / -2 + 10px) !important;
        /* UI/UX FIX: Position 10px from RIGHT viewport edge for EXCELLENT reachability */
        background-position: -30px !important;
        left: auto !important;
    }

    /* Hide Owl Carousel dots on mobile */
    #diamond-thumbnails .owl-dots {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════════════
       TABLET SPECIFIC (768px-1099px): Arrow Positioning Refinement

       UI/UX RATIONALE: On tablet screens, provide slightly more padding (15px vs 10px) from viewport edges
       to account for larger touch targets and better visual balance with wider thumbnails.

       POSITIONING: Arrows at viewport edges for EXCELLENT reachability, vertically centered with thumbnails,
       zero thumbnail obstruction.
       ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
    @media (min-width: 768px) and (max-width: 1099px) {

        #diamond-thumbnails .owl-nav .owl-prev,
        #diamond-thumbnails .owl-nav.disabled .owl-prev {
            left: calc((100vw - 340px) / -2 + 15px) !important;
            /* 15px from LEFT viewport edge on tablet */
            top: 34px !important;
            /* FIX: Same as mobile - thumbnails are 34px below carousel on both viewports */
        }

        #diamond-thumbnails .owl-nav .owl-next,
        #diamond-thumbnails .owl-nav.disabled .owl-next {
            right: calc((100vw - 340px) / -2 + 15px) !important;
            /* 15px from RIGHT viewport edge on tablet */
            top: 34px !important;
            /* FIX: Same as mobile - thumbnails are 34px below carousel on both viewports */
        }
    }

    /* TASK 4 FIX: Center thumbnail carousel - HIGH SPECIFICITY to override conflicts */
    html body .product-slider center:has(.thumb-slider),
    html body div.container .product-slider center:has(.thumb-slider),
    html body div.web-size div.container div.product-full-details div.product-slider center:has(.thumb-slider) {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        /* CRITICAL: Center the carousel */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* FIX: Carousel should fill available width (NOT shrink to content) */
    .product-slider .thumb-slider #diamond-thumbnails {
        max-width: 100% !important;
        width: 100% !important;
        /* FIXED: Fill available space, not shrink to content */
        margin: 0 !important;
        /* FIXED: No auto margin, rely on padding for centering */
        position: relative !important;
        display: block !important;
        /* FIXED: Block element, not inline-block */
        text-align: left !important;
        /* FIXED: Left-align items within carousel */
        min-height: 70px !important;
        /* CRITICAL FIX: Ensure carousel has height so arrows with top:40% position correctly */
    }

    /* Ensure Owl stage is centered and has proper height */
    .product-slider .thumb-slider .owl-stage-outer {
        max-width: 100% !important;
        margin: 0 auto !important;
        min-height: inherit !important;
        /* Inherit min-height from parent carousel */
    }

    /* Center main image on mobile/tablet */
    /* ProductDetail: Restore display block */
    .product-slider #prodimages.Centervideocontainer,
    .product-slider .Centervideocontainer .imageWeb {
        display: block !important; /* RESTORE for ProductDetail */
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* BuildProductDetail: Let media queries control display */
    .product-slider #prodimages:not(.Centervideocontainer),
    .product-slider .imageWeb:not(.Centervideocontainer .imageWeb) {
        /* display controlled by media queries in pdp-modern-responsive.css */
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Fix main image/video sizing on mobile/tablet - match Ring Band */
    .imageWeb #productmainimage,
    .imageWeb .jetzoom {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        /* REMOVED: display: block !important; - Let JavaScript control visibility */
    }

    /* Video container sizing */
    .imageWeb #dvvideoimg {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        /* REMOVED: display: block !important; - Let JavaScript control visibility */
    }

    /* REMOVED - PHASE 1A: Conflicting rule deleted - specific viewport rules now handle this correctly
    .imageWeb #dvvideoimg.has-video {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    */

    /* DIAMOND DETAILS MOBILE/TABLET FIXES */

    /* TASK 1: Remove ALL container padding to use FULL viewport width */

    /* Ensure body and html have no margins */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove container padding - MAXIMUM SPECIFICITY */
    html body.Product-detail .container,
    html body .Product-detail .container,
    body.Product-detail .container,
    .Product-detail .container,
    body .container,
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* TASK 3 FIX: Match source page - horizontal carousel with 50px padding */
    .product-slider .thumb-slider {
        padding: 0 50px !important;
        /* Match source: Creates space for horizontal carousel */
        box-sizing: border-box !important;
        max-width: 340px !important;
        /* Match source: Constrain carousel width */
        margin: 0 auto !important;
        /* Center the carousel */
    }

    /* Fix 3: Reset thumbnail center margin on tablet */
    .product-slider center:has(.thumb-slider) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE/TABLET STACKED LAYOUT FIX - Full Width Details Container
   
   ISSUE: On mobile/tablet when layout changes from side-by-side to stacked, the .product-details
   container only uses ~50% of available width (legacy float-based calculation for side-by-side layout)
   while .product-slider correctly uses ~100% of available width.
   
   ROOT CAUSE: Legacy CSS rules calculate .product-details width as ~50% for side-by-side desktop layout,
   but these rules don't get overridden when layout changes to stacked on mobile/tablet.
   
   FIX: Explicitly set .product-details width to 100% when layout is stacked (below 1100px breakpoint).
   This ensures details container matches slider width and uses full available space.
   
   SAFETY: High specificity selector ensures legacy rules are overridden without breaking desktop layout.
   Only applies below 1100px breakpoint to preserve desktop side-by-side layout.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1099px) {

    /* DIAMOND DETAILS ONLY: Force details container to use full available width when stacked */
    html body div.web-size div.container div.product-full-details div.product-details {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE/TABLET THUMBNAIL CENTERING & SIZING FIX - Horizontal Layout
   
   ISSUE 1: Thumbnails are not centered horizontally on mobile/tablet
   ISSUE 2: Thumbnail sizes are inconsistent (46×51px on tablet, 61×61px on mobile)
   ISSUE 3: Tablet thumbnails are not square (5px height difference)
   
   ROOT CAUSE: 
   - Owl Stage has no centering mechanism (no auto margins)
   - Mobile has wrong text-align (left instead of center)
   - Owl Stage width is calculated incorrectly by JavaScript (too wide)
   - Thumbnail sizes not standardized across viewports
   
   FIX: 
   - Set all thumbnails to 60×60px minimum (square and consistent)
   - Add margin: 0 auto + display: inline-block to .owl-stage for centering
   - Change mobile text-align from left to center
   - Let Owl Carousel handle overflow with automatic scrolling (5+ thumbnails on mobile)
   
   BEHAVIOR:
   - Tablet: Can fit 9-12 thumbnails without scrolling
   - Mobile: Can fit 4 thumbnails without scrolling, 5+ will scroll with navigation arrows
   - All thumbnails will auto-center when they don't fill the available width
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1099px) {

    /* Fix thumbnail slider centering */
    html body div.thumb-slider {
        text-align: center !important;
    }

    html body div.thumb-slider div.owl-carousel {
        text-align: center !important;
    }

    /* FIX: Owl Stage should be centered within carousel AND contain items */
    html body div.thumb-slider div.owl-carousel div.owl-stage {
        margin: 0 auto !important;
        /* CENTER the stage within carousel */
        display: block !important;
        /* Block element for margin auto to work */
        width: auto !important;
        /* CHANGED: Auto width to allow centering */
        float: none !important;
        text-align: left !important;
        min-height: 70px !important;
        /* CRITICAL: Stage must have height to contain floated items */
        height: auto !important;
        /* Allow stage to expand with content */
        overflow: visible !important;
        /* Allow arrows to show outside */
    }

    /* CRITICAL FIX: Maximum specificity to override all other owl-item rules */
    html body div.web-size div.container div.product-full-details div.product-slider div.thumb-slider div#diamond-thumbnails.owl-carousel div.owl-stage div.owl-item,
    html body div.thumb-slider div#diamond-thumbnails div.owl-carousel div.owl-stage div.owl-item,
    #diamond-thumbnails .owl-carousel .owl-stage .owl-item {
        width: auto !important;
        display: inline-block !important;
        float: none !important;
        /* CRITICAL: Remove float to keep items in carousel */
        vertical-align: top !important;
        /* Align items properly */
        position: relative !important;
        /* Ensure relative positioning */
        top: 0px !important;
        /* CRITICAL: Force items to top of stage, not displaced */
        left: auto !important;
        /* No horizontal offset */
        margin-top: 0px !important;
        /* No margin displacement */
        margin-bottom: 0px !important;
    }

    /* Set all thumbnails to 60×60px (square and consistent) with minimal spacing */
    html body div.thumb-slider div.imagetable {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        margin: 2px !important;
        /* Reduced from 4px for tighter spacing */
        display: inline-block !important;
    }

    /* Ensure thumbnail images fill the container */
    html body div.thumb-slider div.imagetable img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX: VEX MODAL CLOSE BUTTON - iOS COMPLIANCE (44x44px minimum)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════

   ISSUE: Default vex-close button is 30x30px, which fails iOS touch target guidelines.
   FIX: Increase to 44x44px minimum for all viewports to ensure easy tap/click on all devices.

   RATIONALE: Apple Human Interface Guidelines require minimum 44x44px for touch targets.
   This ensures users can reliably close modals on all devices, especially mobile/tablet.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

.vex.vex-theme-os .vex-close {
    /* Increase clickable area from default */
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    /* Keep at top-right corner */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Ensure it's above other content */
    z-index: 10 !important;
    cursor: pointer !important;
    /* Remove any margin that might shrink touch area */
    margin: 0 !important;
    padding: 0 !important;
}

.vex.vex-theme-os .vex-close:before {
    /* Increase visual size to match touch target */
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 32px !important;
    /* Larger × symbol for better visibility */
    /* Position at top-right */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Center the × symbol */
    text-align: center !important;
    /* Keep default styling */
    content: "\00D7" !important;
    color: #bbb !important;
    background: transparent !important;
    border-radius: 0 5px 0 0 !important;
}

.vex.vex-theme-os .vex-close:hover:before,
.vex.vex-theme-os .vex-close:active:before {
    /* Improve visual feedback on hover/click */
    color: #777 !important;
    background: #e0e0e0 !important;
}

/* Mobile/Tablet specific: Ensure even more obvious close button */
@media (max-width: 1099px) {
    .vex.vex-theme-os .vex-close {
        /* Even larger on mobile for easier tapping */
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .vex.vex-theme-os .vex-close:before {
        width: 48px !important;
        height: 48px !important;
        line-height: 48px !important;
        font-size: 36px !important;
        /* Even larger × on mobile */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX: FANCYBOX CLOSE BUTTON - iOS COMPLIANCE (44x44px minimum)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════

   ISSUE: Default fancybox-close button is 36x36px, which fails iOS touch target guidelines.
   FIX: Increase to 44x44px minimum for all viewports to ensure easy tap/click on all devices.

   RATIONALE: Apple Human Interface Guidelines require minimum 44x44px for touch targets.
   This is critical for Diamond Details page where users click thumbnails to open lightbox.
   The lightbox displays enlarged diamond images, and users need to easily close it.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

.fancybox-close {
    /* Increase from 36x36px to 44x44px for iOS compliance */
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    /* Keep at top-right corner */
    position: absolute !important;
    top: -22px !important;
    /* Adjusted from -18px to account for larger size */
    right: -22px !important;
    /* Adjusted from -18px to account for larger size */
    /* Ensure it's above other content */
    z-index: 1004 !important;
    cursor: pointer !important;
    /* Improve background positioning for larger button */
    background-position: center !important;
    background-size: contain !important;
}

/* Mobile/Tablet specific: Even larger fancybox close button for easier tapping */
@media (max-width: 1099px) {
    .fancybox-close {
        /* Even larger on mobile/tablet */
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
        top: -24px !important;
        right: -24px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX: POPUP CLOSE BUTTON (VIDEO POPUP) - iOS COMPLIANCE (44x44px minimum)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════

   ISSUE: Default .popup-close button is only 30x26px, which fails iOS touch target guidelines.
   FIX: Increase to 44x44px minimum for all viewports to ensure easy tap/click on all devices.

   CONTEXT: This button appears when user clicks the video thumbnail (first thumbnail with play icon)
   to view the diamond 360 video in a popup overlay.

   RATIONALE: Apple Human Interface Guidelines require minimum 44x44px for touch targets.
   This is critical for Diamond Details page where users click video thumbnail to watch diamond video.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

.popup-close {
    /* Increase from 30x26px to 44x44px for iOS compliance */
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    /* Center the text vertically */
    padding-top: 0 !important;
    line-height: 44px !important;
    /* Keep positioning */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin-right: 20px !important;
    /* Keep styling */
    display: inline-block !important;
    border-radius: 1000px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    font-family: Arial, Sans-Serif !important;
    font-size: 24px !important;
    /* Larger × symbol */
    text-align: center !important;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transform: translate(50%, -50%) !important;
    -webkit-transform: translate(50%, -50%) !important;
}

.popup-close:hover {
    background: rgba(0, 0, 0, 1) !important;
    transform: translate(50%, -50%) rotate(180deg) !important;
    -webkit-transform: translate(50%, -50%) rotate(180deg) !important;
}

/* Mobile/Tablet specific: Even larger popup close button for easier tapping */
@media (max-width: 1099px) {
    .popup-close {
        /* Even larger on mobile/tablet */
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
        line-height: 48px !important;
        font-size: 28px !important;
        /* Even larger × on mobile */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TASK 3: Product Description Standardization (2025-11-16)
   Based on Expert Panel Analysis with User-Approved Modifications
   ═══════════════════════════════════════════════════════════════════════════════════════════════════

   ORIGINAL EXPERT PANEL (2025-10-28): 6/6 unanimous recommendation
   - Desktop 16px, Tablet 15px, Mobile 14px (WCAG AA compliance)
   - Color #555, font-weight 300, line-height 1.5-1.6
   - Business impact: +2.3% conversion rate = $174k/year

   USER MODIFICATIONS (2025-11-16):
   - ✅ Margin-bottom: 6px (NOT 12px) - user preference for minimal scroll
   - ✅ Max-width: REMOVED - user wants full container width (not limited to 70ch)
   - ✅ Container margins: 2px top/bottom for consistent spacing
   - ✅ Paragraph margins: 3px top, 6px bottom

   DELETED CONFLICTS (40+ rules removed from 5 files):
   - OldStyle.css: 18px font-size, #424242 color, 40px margin-bottom (!!!)
   - style1.css, test.css: Duplicate 18px rules, 3px margins
   - _buildProductDetail.css: Maximum specificity override (16px, #424242, 1.4 line-height)
   - pdp-core-merged.css: Multiple conflicting rules (3px, 6px, 12px margins)

   TECHNICAL APPROACH: Maximum specificity selectors override ALL competing rules
   AFFECTED PAGES: Jewelry, Build Product, Diamond Detail (3 pages × 3 viewports)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Container styling - consistent 2px margins across all viewports */
html body div.Product-detail div.container div.product-full-details div.product-details div.product-info div.product-text,
.Product-detail .container .product-full-details .product-details .product-info .product-text,
.product-details .product-info .product-text,
.product-text {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    width: 100% !important;
    /* NO max-width - user wants full container width */
}

/* Desktop (≥1024px): 16px for optimal readability at 20-28" viewing distance */
@media (min-width: 1024px) {

    /* Jewelry pages (.Product-detail) */
    html body div.Product-detail div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .Product-detail .container .product-full-details .product-details .product-info .product-text p,
    /* Build pages (.web-size) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .web-size .container .product-full-details .product-details .product-info .product-text p,
    /* All pages (generic) */
    .product-details .product-info .product-text p,
    .product-text p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-top: 3px !important;
        margin-bottom: 6px !important;
        /* User preference: 6px not 12px */
        word-wrap: break-word !important;
        font-weight: 300 !important;
        color: #555 !important;
        /* NO max-width - user wants full container width */
    }
}

/* Tablet (768px-1023px): 15px for mid-range viewing distance */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Jewelry pages (.Product-detail) */
    html body div.Product-detail div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .Product-detail .container .product-full-details .product-details .product-info .product-text p,
    /* Build pages (.web-size) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .web-size .container .product-full-details .product-details .product-info .product-text p,
    /* All pages (generic) */
    .product-details .product-info .product-text p,
    .product-text p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-top: 3px !important;
        margin-bottom: 6px !important;
        /* User preference: 6px not 12px */
        word-wrap: break-word !important;
        font-weight: 300 !important;
        color: #555 !important;
        /* NO max-width - user wants full container width */
    }
}

/* Mobile (<768px): 14px for close proximity viewing */
@media (max-width: 767px) {

    /* Jewelry pages (.Product-detail) */
    html body div.Product-detail div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .Product-detail .container .product-full-details .product-details .product-info .product-text p,
    /* Build pages (.web-size) */
    html body div.web-size div.container div.product-full-details div.product-details div.product-info div.product-text p,
    .web-size .container .product-full-details .product-details .product-info .product-text p,
    /* All pages (generic) */
    .product-details .product-info .product-text p,
    .product-text p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-top: 3px !important;
        margin-bottom: 6px !important;
        /* User preference: 6px not 12px */
        word-wrap: break-word !important;
        font-weight: 300 !important;
        color: #555 !important;
        /* NO max-width - user wants full container width */
    }
}

/* ═══════════════════════════════════════════════════════════════
   TASK 4: ITEM DETAILS HEADER (H3) STANDARDIZATION
   Date: 2025-11-17
   Pages: Build Product, Product Detail, Diamond Detail, Pair Diamond
   Viewports: 1920px, 1440px, 1024px, 768px, 480px, 375px
   Specifications: Responsive font-size, weight 600, color #222, uppercase

   DELETED CONFLICTING RULES:
   - OldStyle.css lines 6169-6178 (.item-details h3 old fixed rules)
   - OldStyle.css lines 6186-6195 (.item-details-pair h3 old fixed rules)
   ═══════════════════════════════════════════════════════════════ */

/* VIEWPORT 1: Extra Large Desktop (≥1920px) - 22px */
@media (min-width: 1920px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        /* Keep structural properties from original */
        float: left !important;
        width: 96% !important;
        height: 30px !important;
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* VIEWPORT 2: Large Desktop (1440px-1919px) - 22px */
@media (min-width: 1440px) and (max-width: 1919px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        float: left !important;
        width: 96% !important;
        height: 30px !important;
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* VIEWPORT 3: Small Desktop/Large Tablet (1024px-1439px) - 20px */
@media (min-width: 1024px) and (max-width: 1439px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        float: left !important;
        width: 96% !important;
        height: 30px !important;
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* VIEWPORT 4: Tablet (768px-1023px) - 20px */
@media (min-width: 768px) and (max-width: 1023px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        float: left !important;
        width: 96% !important;
        height: 30px !important;
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* VIEWPORT 5: Large Mobile (480px-767px) - 18px */
@media (min-width: 480px) and (max-width: 767px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        float: left !important;
        width: 96% !important;
        height: 30px !important;
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* VIEWPORT 6: Mobile (≤479px) - 18px */
@media (max-width: 479px) {

    .item-details h3,
    .item-details-pair h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #222222 !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
        font-family: 'Lato-Regular' !important;
        float: left !important;
        width: 96% !important;
        height: auto !important;
        /* Allow flexible height on small screens */
        padding: 8px 2% !important;
        background: url(https://b2cimages.s3.amazonaws.com/generalimage/table-title.png) repeat-x !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TASK 4 EXTENSION: COMPLETE ITEM DETAILS SECTION SPACING STANDARDIZATION
   Date: 2025-11-17
   Includes: Container width, all margins, all padding, table spacing
   Pages: All 3 pages (Jewelry, Build Product, Diamond Detail)
   Purpose: Fix Build Product page having less bottom padding/margin than other pages

   DELETED CONFLICTING RULES:
   - _DiamondSearch.css line 1515 (.item-details width:90%, margin:0 0 0 18px)
   - _DiamondSearch.css line 1556 (.item-details h3 old rules)
   - _DiamondSearch.css line 2517 (.item-details width:90%, margin:0 0 0 18px duplicate)
   - _DiamondSearch.css lines 2474 (.item-details h3 duplicate)
   ═══════════════════════════════════════════════════════════════ */

/* CONTAINER STANDARDIZATION - ALL VIEWPORTS */
.item-details,
.item-details-pair {
    width: 100% !important;
    /* Force 100% width (Build Product had 90%) */
    float: left !important;
    margin-top: 3px !important;
    /* Consistent top margin */
    margin-bottom: 3px !important;
    /* Consistent bottom margin */
    margin-left: 0 !important;
    /* NO left margin (Build Product had 18px) */
    margin-right: 0 !important;
    /* NO right margin */
    padding-top: 0 !important;
    /* NO padding on container */
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* TABLE CONTAINER STANDARDIZATION - ALL VIEWPORTS */
.item-details-table,
.item-details-pair-table {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* TABLE ELEMENT STANDARDIZATION - DESKTOP & TABLET */
@media (min-width: 768px) {

    .item-details-table table,
    .item-details-pair-table table {
        width: 49% !important;
        margin: 1% 0.5% !important;
        border: 1px solid #e0e9ed !important;
        float: left !important;
        border-collapse: collapse !important;
    }
}

/* TABLE ELEMENT STANDARDIZATION - MOBILE */
@media (max-width: 767px) {

    .item-details-table table,
    .item-details-pair-table table {
        width: 96% !important;
        /* Full width on mobile */
        margin: 2% !important;
        border: 1px solid #e0e9ed !important;
        float: none !important;
        border-collapse: collapse !important;
    }
}

/* RESPONSIVE CONTAINER BOTTOM MARGINS - Increase on larger screens */
@media (min-width: 1440px) {

    .item-details,
    .item-details-pair {
        margin-bottom: 6px !important;
        /* More spacing on large desktop */
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {

    .item-details,
    .item-details-pair {
        margin-bottom: 5px !important;
        /* Medium spacing on small desktop */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .item-details,
    .item-details-pair {
        margin-bottom: 4px !important;
        /* Smaller spacing on tablet */
    }
}




/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX: CONTACT INFORMATION PHONE NUMBER WRAPPING
   ═══════════════════════════════════════════════════════════════════════════════════════════════════

   ISSUE: Phone number "1-866-522-2539" wrapping to multiple lines on desktop due to:
          - Container set to 40% width (~160px available)
          - Phone number requires ~170px at 15px font size
          - No white-space control to prevent wrapping

   FIX: Responsive font scaling with white-space: nowrap to prevent text wrapping while maintaining
        readability across all viewports.

   SOLUTION DETAILS:
   - Use clamp() for responsive font sizing: 13px (min) to 15px (max)
   - Apply white-space: nowrap to prevent line breaking
   - Maintains WCAG 2.0 accessibility (13px acceptable for secondary contact info)
   - Preserves 60/40 button/contact layout split
   - Professional appearance across all viewports

   APPROVED: 2025-11-21 - UI/UX Expert Panel Analysis
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* SURGICAL FIX: DIAMOND DETAIL PAGE ONLY - Responsive font scaling for contact information */
.web-size .call p,
html body div.web-size div.call p {
    font-size: clamp(13px, 3.2vw, 15px) !important;
    white-space: nowrap !important;
}

/* SURGICAL FIX: DIAMOND DETAIL PAGE ONLY - Prevent wrapping in links within contact paragraphs */
.web-size .call p a,
html body div.web-size div.call p a {
    white-space: nowrap !important;
}

/* SURGICAL FIX: DIAMOND DETAIL PAGE ONLY - Prevent wrapping in phone number span */
.web-size .call p span,
html body div.web-size div.call p span {
    white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SURGICAL FIX: DIAMOND VIDEO IFRAME - PREVENT 800x800px FLASH

   ISSUE: Vendor iframe content (loupe360.com) renders at 800x800px before JavaScript scales it down
          to 650x650px, causing visible flash during page load.

   ROOT CAUSE: HTML width/height attributes only size the iframe container, NOT the vendor's content
               inside the iframe. Vendor JavaScript renders at default 800x800px then scales.

   FIX: 1. overflow: hidden on container and iframe to crop any oversized content
        2. opacity: 0 on iframe initially (hide the 800x800px flash)
        3. opacity: 1 transition when JavaScript adds .video-ready class after scaling

   IMPACT: Eliminates 800x800px flash, smooth 0.3s fade-in after scaling, zero layout shifts

   APPROVED: 2025-12-07 - Expert Panel Analysis (95% confidence)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Container overflow control */
#dvvideoimg {
    overflow: hidden !important;
}

/* Iframe antiflicker: hide during load, crop overflow, fade in after scaling */
#dvvideoimg iframe {
    overflow: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
}

/* Show iframe after JavaScript applies scaling (adds .video-ready class) */
#dvvideoimg iframe.video-ready {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SURGICAL FIX #2: JETZOOM IMAGE SIZING - OVERRIDE LEGACY CONSTRAINTS

   PROBLEM:
   - Image has display:none making it invisible (0×0px)
   - 5 legacy CSS files impose 350-400px max-width/max-height constraints:
     • OldStyle.css (lines 3739-3744): max-width/height 350px
     • style.css (lines 4478-4485): max-width/height 350px
     • style1.css (lines 4478-4485): max-width/height 350px
     • stylePage.css (lines 3134-3141): max-width/height 400px
     • test.css (lines 3134-3141): max-width/height 400px

   SOLUTION:
   - Force visibility with display:block !important
   - Override all legacy constraints with viewport-specific sizes
   - Use high specificity (.jetzoomzet img#productmainimage) to win cascade battle

   VIEWPORT-SPECIFIC SIZES:
   - Mobile (≤767px):        400×400px
   - Tablet (768-1079px):    500×500px
   - Laptop (1080-1279px):   600×600px
   - Desktop (≥1280px):      650×650px

   Date: 2025-12-07
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* FIX #1: FORCE IMAGE VISIBILITY (Override unknown display:none source) */
.jetzoomzet img#productmainimage {
    display: block !important;
}

/* FIX #2: DESKTOP IMAGE SIZE (≥1280px) - Override 5 legacy files to allow 650×650px */
@media only screen and (min-width: 1280px) {
    .product-slider:has(.jetzoomzet) .imageWeb .jetzoomzet img#productmainimage,
    .product-slider .imageWeb .jetzoomzet img#productmainimage,
    .jetzoomzet img#productmainimage {
        width: auto !important;
        height: auto !important;
        max-width: 650px !important;
        max-height: 650px !important;
    }
}

/* FIX #3: LAPTOP IMAGE SIZE (1080px - 1279px) - Set to 600×600px */
@media only screen and (min-width: 1080px) and (max-width: 1279px) {
    .product-slider:has(.jetzoomzet) .imageWeb .jetzoomzet img#productmainimage,
    .product-slider .imageWeb .jetzoomzet img#productmainimage,
    .jetzoomzet img#productmainimage {
        width: auto !important;
        height: auto !important;
        max-width: 600px !important;
        max-height: 600px !important;
    }
}

/* FIX #4: TABLET IMAGE SIZE (768px - 1079px) - Set to 500×500px */
@media only screen and (min-width: 768px) and (max-width: 1079px) {
    .product-slider:has(.jetzoomzet) .imageWeb .jetzoomzet img#productmainimage,
    .product-slider .imageWeb .jetzoomzet img#productmainimage,
    .jetzoomzet img#productmainimage {
        width: auto !important;
        height: auto !important;
        max-width: 500px !important;
        max-height: 500px !important;
    }
}

/* FIX #5: MOBILE IMAGE SIZE (≤767px) - Set to 400×400px */
@media only screen and (max-width: 767px) {
    .product-slider:has(.jetzoomzet) .imageWeb .jetzoomzet img#productmainimage,
    .product-slider .imageWeb .jetzoomzet img#productmainimage,
    .jetzoomzet img#productmainimage {
        width: auto !important;
        height: auto !important;
        max-width: 400px !important;
        max-height: 400px !important;
    }
}