/* Adds elevation to the main navigation bar */
#mainnav.main-nav-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff; /* Ensures the shadow is visible against the background */
    transition: box-shadow 0.3s ease;
}

/* Optional: Adds a stronger shadow when the user scrolls */
.is-sticky #mainnav.main-nav-container {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}





/* 1. Make the items bigger by overriding the Tailwind max-widths */
.s-slider-swiper-wrapper .products-item {
    max-width: 45% !important; /* Larger on mobile */
    padding: 10px;
}

@media (min-width: 768px) {
    .s-slider-swiper-wrapper .products-item {
        max-width: 22% !important; /* 4 items per row on desktop like your image */
    }
}

/* 2. Create the Circular Ring */
.s-slider-swiper-wrapper .image-parent {
    border: 1px solid #000; /* The thin black ring from your image */
    border-radius: 50% !important;
    aspect-ratio: 1 / 1; /* Keep it a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Keeps the image inside the circle */
    background-color: #fff; /* Match your site background */
    padding: 10px; /* Space between the person and the border */
    transition: transform 0.3s ease;
}

/* 3. Handle the Image sizing */
.s-slider-swiper-wrapper .image-parent img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the whole abaya is visible without cropping */
    transform: scale(1.1); /* Slightly larger to mimic the "floating" look */
}

/* 4. Position the Text (Category Name) */
.s-slider-swiper-wrapper .products-item h3 {
    margin-top: 15px;
    font-weight: 600;
    color: #000;
    font-size: 18px !important;
}








/* The Floating Bubble - Positioned Left */
.video-story-bubble {
    position: fixed;
    bottom: 100px; 
    left: 20px; /* Changed from right to left */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #db4b66; 
    overflow: hidden;
    z-index: 9999;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.video-story-bubble:hover {
    transform: scale(1.1);
}

.video-story-bubble video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Full Screen Overlay */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.video-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    height: 80vh;
}

.video-container video {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #000;
}

.close-story {
    position: absolute;
    top: -40px;
    left: 0; /* Positioned close button on the left to match the theme */
    color: white;
    font-size: 30px;
    cursor: pointer;
}




/* Target the product card container */
custom-salla-product-card.s-product-card-entry {
    /* Add a thin, light border */
    border: 1px solid #e0e0e0;
    
    /* Create a soft corner radius to match modern UI */
    border-radius: 8px;
    
    /* Add a subtle elevation (box-shadow) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    /* Ensure the shadow doesn't get clipped and smooth transitions */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 10px; 
}

/* Optional: Enhance elevation on hover */
custom-salla-product-card.s-product-card-entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}