/* ============================================================
   Scroll-Tied Morphing Section
   ============================================================ */
.home-products {
    /* ADDED: Forces the section to fill the screen vertically */
    min-height: 100vh;
    
    /* ADDED: Centers the content vertically within that 100vh space */
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: var(--spacing-section) 0;
    
    /* Variable placeholders for our color targets */
    --scroll-progress: 0; 
    --alabaster-white: #F2F0E6; 
    --deep-red: #F2F0E6;
    
    background-color: color-mix(in srgb, var(--alabaster-white) calc(var(--scroll-progress) * 100%), var(--deep-red));
    color: color-mix(in srgb, #000000 calc(var(--scroll-progress) * 100%), #000000);
    
    will-change: background-color, color; 
}

/* Ensure the heading inherits the shifting color from the parent container */
.home-products h2 {
    font-size: var(--font-h2);
    margin-bottom: 3rem;
    color: inherit; 
}

.text-center { 
    text-align: center; 
}

/* ============================================================
   Editorial Split Layout (Updated for Sticky)
   ============================================================ */
.interactive-products-layout {
    position: relative; /* Required to anchor the center line */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Split */
    gap: 8rem; /* Increased gap to push text and 3D container apart */
    width: 100%;
    /* Changed from center to start so the sticky child has room to move */
    align-items: start;
}

/* Draws the red line down the middle */
.interactive-products-layout::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Centers the line perfectly */
    width: 1px; /* Thickness of the line */
    background-color: #8B0000; /* Deep red accent color */
    transform: translateX(-50%); /* Adjusts for the 1px width to be dead-center */
}

/* ============================================================
   Left Side: Editorial List
   ============================================================ */
.product-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid currentColor; /* Top boundary line */
}

/* ========== UPDATED RULES ========== */
/* Update list item to push the arrow to the right edge */
.product-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spreads elements to the edges */
    padding: 2.5rem 0; /* Slightly increased padding for breathing room */
    text-decoration: none;
    color: inherit; 
    border-bottom: 1px solid currentColor;
    transition: all 0.3s ease;
    opacity: 0.6;
}

/* Grouping the title and subtitle together */
.product-list-item .product-text-group {
    flex-grow: 1;
    margin: 0 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Space between title and subtitle */
}

/* Editorial Title Typography */
.product-list-item .product-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem; /* Slightly larger for more impact */
    margin: 0; /* Margin moved to the text-group wrapper */
    font-weight: 400; 
}

/* New Subtitle Styling */
.product-list-item .product-desc {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
}
/* ========== END UPDATED RULES ========== */

/* Small stylized index number (kept as-is) */
.product-list-item .product-number {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Arrow indicator (Hidden until hover) – kept as-is */
.product-list-item .arrow {
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: #8B0000; /* Uses the deep red accent */
}

.product-list-item:hover .arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Hover Interaction (kept) */
.product-list-item:hover {
    opacity: 1; 
    transform: translateX(15px); /* Elegant rightward slide */
}

/* ============================================================
   Right Side: 3D Asset Stage (Updated for Sticky)
   ============================================================ */
.product-asset-stage {
    position: sticky;
    top: 15vh; /* Distance from the top of the screen when it sticks */
    height: 65vh; /* Provides a large, cinematic viewing window */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Optional: A very subtle background to frame the 3D model */
    background-color: rgba(139, 0, 0, 0.03); 
    border-radius: 8px;
    overflow: hidden;
}

/* ============================================================
   Products Section Header Styling
   ============================================================ */
/* Ensures the kicker inherits the fading text color instead of staying black */
.home-products .hero-kicker {
    color: inherit; 
    text-align: center;
    margin-bottom: 1rem;
}

/* Adjust heading margin since the container now handles the spacing */
.home-products h2 {
    font-size: var(--font-h2);
    margin-bottom: 0; /* Removed the 3rem bottom margin */
    color: inherit; 
}

/* ============================================================
   Mobile Responsiveness (Updated)
   ============================================================ */
@media (max-width: 992px) {
    .interactive-products-layout {
        grid-template-columns: 1fr; /* Stack layout on smaller screens */
        gap: 2rem;
    }
    
    /* Hides the vertical line when columns stack on mobile */
    .interactive-products-layout::after {
        display: none;
    }
    
    .product-asset-stage {
        height: 40vh;
        order: -1; /* Puts the visual stage above the list on mobile */
    }
    
    .product-list-item .product-title {
        font-size: 1.5rem;
    }

    /* Hide the 3D control panel entirely on mobile */
    .swatch-container {
        display: none !important;
    }

    /* Ensure the 3D stage sticks cleanly at the top while the list scrolls underneath */
    .product-asset-stage {
        position: sticky !important;
        top: 10vh !important;
        height: 40vh !important;
        z-index: 5 !important;
        background-color: #ffffff; /* Solid background prevents text from bleeding through */
        border-bottom: 1px solid #eee;
    }
}

/* ============================================================
   3D Asset Entrance Animation
   ============================================================ */
.asset-3d {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Creates the 3D space for the child elements to rotate within */
    perspective: 1200px; 
}

/* The class applied by JavaScript on hover */
.asset-3d.rotate-in {
    /* Uses a smooth cubic-bezier curve for an elegant, editorial feel */
    animation: rotateIn3D 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes rotateIn3D {
    0% {
        opacity: 0;
        /* Starts rotated 90 degrees away from the viewer (invisible) and scaled down */
        transform: rotateY(-90deg) scale(0.8);
    }
    100% {
        opacity: 1;
        /* Snaps into place facing the viewer at full size */
        transform: rotateY(0deg) scale(1);
    }
}

model-viewer.asset-3d {
    width: 100%;
    height: 100%;
    /* model-viewer handles its own 3D space, so you may not need the perspective rule here, 
       but keeping your rotate-in animation will still work on the element itself */
    --poster-color: transparent; /* Hides default loading background */
}

/* ============================================================
   Interactive Color & Foil Swatches
   ============================================================ */
.swatch-container {
    position: absolute;
    bottom: 20px;
    z-index: 10;
    text-align: center;
    background: rgba(255, 255, 255, 0.85); /* Slight frosted glass effect */
    backdrop-filter: blur(4px);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.swatch-container p {
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.swatch {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    padding: 0.4rem 1rem;
    margin: 0 0.3rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Specific Foil Buttons */
.foil-gold {
    background: linear-gradient(135deg, #FFDF00 0%, #D4AF37 100%);
    color: #333;
}

.foil-silver {
    background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%);
    color: #333;
}

/* ============================================================
   Toggle & Reset Buttons for Swatch Panel
   ============================================================ */
.toggle-btn {
    background: none;
    border: none;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding-bottom: 0.5rem;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    outline: none;
}

/* When the container has the 'minimized' class, hide the content */
.swatch-container.minimized .swatch-content {
    display: none;
}

/* Reset Button */
.reset-btn {
    background: #f0f0f0;
    color: #333;
    width: 100%;
    margin: 0;
    font-weight: 600;
}

.reset-btn:hover {
    background: #e0e0e0;
}

/* ============================================================
   HYBRID 3D/STATIC STAGE & ACCORDION
   ============================================================ */

/* Reformat list items from <a> to standard blocks */
.product-list-item {
    display: block;
    border-bottom: 1px solid currentColor;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.product-list-item.active {
    opacity: 1;
}
.product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 0;
    cursor: pointer;
}

/* Stage Layering */
.stage-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Updated from center */
    padding-bottom: 3rem; /* Added spacing */
    align-items: center;
    transition: opacity 0.4s ease;
}
.stage-view.hidden {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.static-preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; /* Forces the image to hit the bottom edge, overriding base.css */
    object-fit: cover;
    z-index: 1;
}

.stage-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 1rem;
    background: transparent;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}
.btn-primary.overlay-outline {
    background: transparent;
    border: 2px solid #000;
}

/* The 'X' Close Button */
.close-x {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.close-x:hover {
    background: #8B0000;
}

/* ============================================================
   Global Button Styling (White for Stage Actions)
   ============================================================ */
.stage-actions .btn-primary,
.stage-actions a,
.stage-actions button {
    background-color: #ffffff !important;
    color: #050505 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

.stage-actions .btn-primary:hover,
.stage-actions a:hover,
.stage-actions button:hover {
    background-color: #050505 !important;
    color: #ffffff !important;
    border-color: #050505 !important;
}

/* ============================================================
   MOBILE ACCORDION OVERRIDES (CSS-ONLY RADIO HACK)
   ============================================================ */

/* Hide the radio buttons used for state tracking */
.accordion-radio {
    display: none;
}

/* Ensure the header acts as a clickable label block */
label.product-header {
    cursor: pointer;
    display: flex;
    width: 100%;
}

/* Default state for the embedded mobile images */
.mobile-only-body {
    display: none; 
}

@media (min-width: 993px) {
    /* Protect desktop view: completely hide mobile bodies */
    .mobile-only-body {
        display: none !important;
    }
}

@media (max-width: 992px) {

    /* --- FIX: STOP THE FLEXBOX TUG-OF-WAR --- */
    .product-list-item {
        display: flex !important;
        flex-direction: column !important; /* Forces the image to drop below the header */
        align-items: stretch !important; /* Ensures the container stays 100% wide */
        width: 100% !important;
        padding: 0 !important; /* Removes conflicting wrapper padding */
    }

    label.product-header {
        padding: 2rem 0 !important; /* Keeps the tap target large and consistent */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. Hide the global right-side desktop stage entirely */
    #main-asset-stage {
        display: none !important;
    }

    /* 2. CSS-Only Expand: Show body when radio is checked */
    .accordion-radio:checked ~ .mobile-only-body {
        display: block; /* Changed from flex to block to prevent off-center shifting */
        width: 100%;
        padding: 1rem 0 2rem 0;
        margin: 0;
        box-sizing: border-box;
    }

    /* 3. Active UI States: Arrow rotation and opacity */
    .accordion-radio:checked ~ .product-header .arrow {
        transform: rotate(90deg);
        opacity: 1;
    }
    .accordion-radio:checked ~ .product-header {
        opacity: 1;
    }

    /* 4. Bulletproof Centering for Images with Backgrounds */
    .mobile-stage-view {
        position: relative;
        width: 100%; 
        height: 45vh; 
        display: block; 
        border-radius: 8px; 
        overflow: hidden;
        margin: 0 !important; /* Forces container to stay flush with the left edge */
        box-sizing: border-box;
    }

    .mobile-preview-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important; 
        object-fit: cover !important; 
        object-position: center !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Mobile Button Overlaid on the Background */
    .mobile-only-body .stage-actions {
        position: absolute;
        bottom: 1.5rem; 
        left: 0;
        width: 100%;
        padding: 0 1.5rem !important; /* Locks symmetrical padding */
        margin: 0 !important;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2; 

        /* --- FIX: KILLS THE DESKTOP GLASS EFFECT --- */
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important; /* Support for Safari */
        border-radius: 0 !important;
    }

    .mobile-only-body .stage-actions .btn-primary {
        flex: 1;
        text-align: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
    }
}