/* Slider Styles - Stacked Card Look */

/* Override list.css .thumb constraints strictly */
div#r_content div.thumb#product-slider-container,
.thumb#product-slider-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Aspect Ratio for modern browsers, padding hack fallback */
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 0 !important; /* Reset padding if aspect-ratio works */
    border-radius: 0; /* Removing border radius as requested */
    background: transparent !important; 
    overflow: hidden !important; 
    box-shadow: none !important;
    float: none !important;
    display: block !important;
}

/* Fallback for aspect-ratio if needed (but checking user env, likely modern. 
   If not, usually padding-bottom: 100% is used, but we need height: 0 then.
   Let's stick to aspect ratio or strict width/height control via JS if needed, 
   but aspect-ratio is safest for responsive square.) 
*/
@supports not (aspect-ratio: 1 / 1) {
    div#r_content div.thumb#product-slider-container {
        height: 0 !important;
        padding-bottom: 100% !important;
    }
}

.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* The expanding track area */
.stacked-track {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.card-item {
    position: absolute;
    /* User request: Small square thumbnails. Size roughly 35%. */
    width: 35%; 
    height: 35%; /* Since container is square, % works for height too */
    
    /* Move stack to left as requested: "Move position to left a bit" */
    top: 32.5%; /* (100 - 35)/2 = 32.5% for centering */
    left: 20%; 
    
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    z-index: 0;
    transform-origin: center center;
    border-radius: 0; /* Removing border radius as requested */
}

.card-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    overflow: hidden;
    border-radius: 0; 
    border: none; /* Removing border as requested */
}

/* STRONG OVERRIDE for images to prevent list.css 600px !important mess */
#product-slider-container .card-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important; 
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important; 
    box-shadow: none !important;
    transform: none !important; 
}

/* EXPANDED STATE (Full Fill) */
.slider-wrapper.expanded .card-item {
    /* Must override inline opacity/z-index from JS */
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
    transform: none !important;
}

/* When expanded, fill the 100% square container */
.slider-wrapper.expanded .card-item.active-expanded {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 9999 !important; /* Ensure on top of everything */
    
    /* Fill 100% of container - force override inline JS styles */
    width: 100% !important;
    height: 100% !important;
    
    top: 0 !important;
    left: 0 !important;
    border-radius: 0; 
}

.slider-wrapper.expanded .card-inner {
    border: none;
    box-shadow: none;
    border-radius: 0; 
}


/* Controls */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.slider-btn:hover { background: rgba(255,255,255,0.2); color: #d4af37; }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* Premium Glass Dots */
.slider-dots {
    position: absolute;
    bottom: 25px; /* Slightly higher for visibility */
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 200;
}
.dot {
    width: 14px; /* Larger size */
    height: 14px;
    background: rgba(255, 255, 255, 0.2); /* Glassy transparency */
    border: 1px solid rgba(255, 255, 255, 0.6); /* Glass rim */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Depth */
    backdrop-filter: blur(4px); /* Glass blur */
}

/* Active Dot - Gold Premium */
.dot.active {
    background: linear-gradient(135deg, #ffd700, #ffb347); /* Gold gradient */
    border-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Glow */
}

/* SINGLE ITEM MODE - Always Expanded */
.slider-wrapper.single-item .card-item {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 10 !important;
    cursor: default; /* No pointer if it doesn't do anything different */
}
.slider-wrapper.single-item .card-item .card-inner {
    border-radius: 0; 
    box-shadow: none;
    border: none;
}

/* Sold Out White Filter Overlay */
.slider-wrapper.is-soldout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 2;
    pointer-events: none;
}