/* ===================================== */
/*    HERO SECTION - 16:9 & FULL SCREEN  */
/* ===================================== */

/* Ensure body starts at top on homepage */
/* ===================================== */
/*    HERO SECTION - 16:9 & FULL SCREEN  */
/* ===================================== */

/* Ensure body starts at top on homepage */
html, body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #000; /* Revert to Dark */
    overflow-x: hidden; /* Prevent horizontal scrollbar/black edge */
}

main {
    overflow-x: hidden;
}

.hero-section {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important; /* Full height */
    min-height: 600px !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero Background Image */
.hero-bg-image {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}

.hero-bg-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 30% top !important; /* Shift left to avoid dark column on right */
}

/* Overlay */
.hero-overlay-gradient {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(270deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%) !important;
    z-index: 1 !important;
}

/* Hero Content - Left Aligned */
.hero-content-left {
    position: absolute !important;
    top: 50% !important;
    left: 8% !important; 
    right: auto !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    max-width: 600px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hero Content - Right class repositioned to LEFT */
.hero-content-right {
    position: absolute !important;
    top: 50% !important;
    left: 8% !important; 
    right: auto !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    max-width: 600px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Revert Badge Text Color */
.hero-badge {
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
}

.hero-title {
    color: #FFFFFF !important;
}


/* Mobile Responsiveness for New Hero */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column-reverse !important;
        justify-content: center !important;
        text-align: center !important;
        padding-top: 40px;
    }

    .hero-content-left {
        align-items: center !important;
        text-align: center !important;
        max-width: 100% !important;
        margin-top: 30px;
    }

    .hero-image-right {
        justify-content: center !important;
        width: 80%;
        max-width: 400px;
    }
    
    .hero-section {
        min-height: auto !important;
        padding-bottom: 60px !important;
    }
}


/* Badge - Minimalist (Top Text) */
.hero-badge {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none; /* Not uppercase as per design */
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

/* Title */
.hero-title {
    font-size: 56px;
    font-weight: 500; /* Lighter weight for elegance */
    color: #1A1A1A; /* Dark text on light background (Wait, background is image?) 
                      Process: The provided design has a light background with bottles. 
                      My current image is dark. 
                      I will set text to #333 assuming I might need to change bg, 
                      BUT for now I will keep it White if the bg is dark, 
                      or adjust for the specific "Gold Diamond" look.
                      The design image shows Black text on Light background.
                      Let's stick to White for now as I haven't changed the image source yet to a light one, 
                      but I will assume the user might want that. 
                      actually, the user said "Text a gauche, image a droite (2 9ra3i)".
                      He is using the EXISTING image which is dark? 
                      No, the image he sent is light.
                      I need to be careful. I will keep white for now to be safe with valid contrast on the dark image he has,
                      UNLESS he provides the light image. 
                      Wait, the image he has is "shampoo bottles black and...". 
                      I'll use White for safety, can be changed later. */
    color: #FFFFFF; 
    margin: 0 0 32px 0;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
    letter-spacing: -1px;
}

/* Subtitle */
.hero-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0 0 35px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    max-width: 450px;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Logo visibility on transparent header */
header:not(.scrolled) .logo img {
    /* filter removed */
}

header.scrolled .logo img {
    filter: none !important;
}

/* Unify Header Navigation & Colors */
header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

header .top_header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important; /* COMPACT HEADER: Significantly reduced padding */
    gap: 10px !important;
}

header .search_box {
    flex: 1;
    max-width: 400px !important; /* More compact search box */
    height: 38px !important; /* Reduced height */
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1) !important; /* Ghost state: Subtle contrast */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    padding: 0 15px !important;
    overflow: visible !important;
    transition: all 0.4s ease !important;
}

header.scrolled .search_box {
    background: rgba(0, 0, 0, 0.05) !important; /* Darker on white background */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

header.scrolled .search_box input {
    color: #333333 !important;
}

header.scrolled .search_box button {
    color: #333333 !important;
}

header .search_box input {
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 13px !important;
    width: 100%;
}

header .search_box button {
    background: transparent !important;
    border: none !important;
    color: white !important;
    cursor: pointer;
    padding-left: 10px !important;
}

/* Default: Hide mobile-only icons on desktop */
.search-toggle, .open_Menu {
    display: none !important;
}

header .nav_links {
    display: flex !important;
    gap: 15px !important; /* Reduced gap between links */
    margin: 0 20px !important;
    align-items: center !important;
}

header .nav_links li a {
    color: #FFFFFF !important; /* Revert to White */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-family: 'Inter', sans-serif !important;
    transition: color 0.3s ease !important;
}

header .nav_links li a:hover,
header .nav_links li.active a {
    color: #D4A574 !important;
}

/* Header Icons Revert */
header .header_icons .icon {
    border-color: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
}

header .header_icons .icon i {
    color: #FFFFFF !important;
}

header .logo img {
     /* filter removed */ /* Revert to White Logo if needed, or keeping original if it works on dark */
}

/* Search Box Revert */
header .search_box {
    border-color: #d4a574 !important; /* Gold border from original */
    background: transparent !important;
}

header .search_box input {
    color: #FFFFFF !important;
}

header .search_box button {
    color: #FFFFFF !important;
}

/* Bottom Header Hide (moving nav to top) */
header .bottom_header {
    display: none !important;
}

header.scrolled .nav_links li a {
    color: #333333 !important; /* Dark text when header turns white/scrolled */
    text-shadow: none !important;
}

header.scrolled .nav_links li a:hover,
header.scrolled .nav_links li.active a {
    color: #D4A574 !important;
}

.btn-hero-primary {
    padding: 16px 42px;
    background: linear-gradient(135deg, #c69c6d 0%, #a67c52 100%); /* Gold/Bronze matte */
    color: #FFFFFF;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(198, 156, 109, 0.3);
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(198, 156, 109, 0.4);
    background: linear-gradient(135deg, #d4a574 0%, #b8865a 100%);
}

.btn-hero-text {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    padding: 10px 20px;
}

.btn-hero-text:hover {
    color: #d4a574;
    gap: 12px;
}

/* ===================================== */
/*    HERO MOBILE RESPONSIVE             */
/* ===================================== */

@media (max-width: 992px) {
    body {
        padding-top: 0 !important; /* Override style.css 180px */
    }

    header:not(.scrolled) {
        background: transparent !important;
    }

    .hero-section {
        min-height: 550px;
    }
    
    .hero-content-right {
        padding: 0 40px;
    }
    
    .hero-title {
        font-size: 42px;
    }
    
    /* Enable Search Toggle on Mobile/Tablet */
    .search-toggle {
        display: flex !important;
        color: white !important;
        font-size: 20px;
        cursor: pointer;
    }
    
    header.scrolled .search-toggle {
        color: #333 !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 100vh !important;
        height: 100vh !important;
        justify-content: center;
        text-align: center;
        padding-bottom: 0 !important;
        margin: 0 !important;
        width: 100% !important; /* Use 100% not 100vw to avoid overflow black line */
        overflow: hidden !important;
        position: relative;
        left: 0;
    }
    
    .hero-overlay-gradient {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.4) 100%
        );
    }
    
    .hero-content-right {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 24px;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .hero-title {
        font-size: 40px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        letter-spacing: 0px !important;
        text-shadow: 0 2px 15px rgba(0,0,0,0.6);
    }
    
    .hero-badge {
        margin-bottom: 12px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        padding: 6px 14px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px);
    }
    
    .hero-subtitle {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: center;
        margin-bottom: 28px !important;
        max-width: 90% !important;
        opacity: 0.95;
        text-shadow: 0 1px 10px rgba(0,0,0,0.8);
    }
    
    .hero-buttons {
        justify-content: center;
    }

    .btn-hero-primary {
        padding: 15px 35px !important;
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        border-radius: 2px !important;
        box-shadow: 0 8px 25px rgba(198, 156, 109, 0.4) !important;
        border: 1px solid rgba(212, 165, 116, 0.5) !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 44px !important; /* Still big on very small screens */
        line-height: 1.15 !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
    }
    
    .btn-hero-primary {
        padding: 14px 28px;
        font-size: 15px;
    }
}

/* ===================================== */
/*    PRODUCT GRID & NEW CARD STYLES     */
/* ===================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px; /* Increased gap for cleaner look */
    margin-top: 40px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* Ensure children (cards) respect the grid */
.product-grid .product_card,
.product-grid .product_card.grid_item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: none !important; /* Prevent flex weirdness */
    transition: transform 0.3s ease;
}

.product-grid .product_card:hover {
    transform: translateY(-5px) !important;
}

.product-grid .product_card:hover .product_image img {
    transform: scale(1.05); /* Subtle zoom */
}

/* Fix Image Sizing in Grid */
.product-grid .product_image {
    height: 280px !important; /* Taller image area */
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F9FAFB !important; /* Light gray bg for image */
}

.product-grid .product_image img {
    height: 100% !important;
    width: auto !important; /* Maintain aspect ratio */
    max-width: 100% !important;
    object-fit: contain !important; /* Ensure full product is visible */
}

@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Columns on Tablet */
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
    
    .product-grid .product_image {
        height: 180px !important;
    }
}


/* Gold Add to Cart Button */
.btn_add_cart_gold {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #c69c6d 0%, #a67c52 100%);
    color: white;
    border: none;
    border-radius: 4px; /* Slightly squared like the design */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn_add_cart_gold:hover {
    background: linear-gradient(135deg, #d4a574 0%, #b8865a 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(198, 156, 109, 0.3);
}

/* Section Header Separator */
.section-header div {
    border-radius: 10px;
}

/* Hero Text Fix - Ensure alignment doesn't break */
.hero-content-right {
    align-items: flex-start !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    .hero-content-right {
        align-items: center !important;
        text-align: center !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===================================== */
/*    LEGACY HERO STYLES (BACKUP)        */
/* ===================================== */

.hero-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1
}

.hero-text {
    max-width: 600px
}

.btn-hero-secondary {
    padding: 16px 36px;
    background: #FFFFFF;
     color: #D4A574;
     border: 2px solid #D4A574;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     font-family: 'Inter', sans-serif
 }

 .btn-hero-secondary:hover {
     background: #D4A574;
     color: #FFFFFF;
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3)
 }

 .hero-image {
     position: relative
 }

 .hero-image-wrapper {
     position: relative;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15)
 }

 .hero-image-wrapper img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease
 }

 .hero-image-wrapper:hover img {
     transform: scale(1.05)
 }

 .featured-banner-section {
     padding: 8px 0;
     background: #FFFFFF
 }

 .featured-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px
 }

 .featured-card {
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
     border: 2px solid #E8EAED;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-decoration: none;
     display: block; 
     position: relative; 
     height: 480px; /* Increased height for better product framing */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .featured-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
     border-color: #D4A574
 }

 .featured-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     overflow: hidden;
     z-index: 1;
 }

 .featured-image img {
     width: 100%;
     height: 100%;
     object-fit: cover; /* Cover the card area */
     object-position: bottom; /* Keep the bottom of the image visible */
     transition: transform 0.4s ease
 }

 .featured-card:hover .featured-image img {
     transform: scale(1.1)
 }

 .featured-badge {
     position: absolute;
     top: 16px;
     right: 16px;
     background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
     color: #FFFFFF;
     padding: 6px 14px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3)
 }

 .featured-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 20px 24px 20px;
     text-align: center;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 100%); /* Softer gradient */
     z-index: 2;
     transition: all 0.3s ease;
 }

 .featured-content h3 {
     display: none; /* Hide as per user request */
 }

 .featured-content p {
     display: none; /* Hide as per user request */
 }

 .featured-link {
     color: #FFFFFF;
     font-size: 12px; /* Smaller font size as requested */
     font-weight: 500;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: all 0.3s ease;
     font-family: 'Inter', sans-serif;
     background: none;
     padding: 0;
     border-radius: 0;
     box-shadow: none;
     text-transform: uppercase;
     letter-spacing: 1.2px;
 }

 .featured-link i {
     transition: transform 0.3s ease;
     font-size: 12px;
 }

 .featured-card:hover .featured-link i {
     transform: translateX(5px); /* Arrow shift on hover */
 }

 .featured-link:hover {
     color: #D4A574; /* Turn gold on hover */
 }

 .premium-banner-section {
     padding: 60px 0;
     background: #F5F7FA
 }

 .banner-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 24px;
     height: 400px
 }

@media (max-width: 768px) {
    /* Banner Grid Fix - Stack Vertically */
    .banner-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 20px;
    }
    
    .banner-card {
        width: 100%;
        height: 250px; /* Good height for mobile cards */
    }

    .banner-card img {
        width: 100%;
        height: 100%;
        object-fit: cover !important; /* Fix bottles (l9ra3i) appearance */
        object-position: center;
    }

    .premium-banner-section {
        padding: 40px 0;
    }
}

.banner-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
 }

 .banner-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15)
 }

 .banner-large {
     grid-row: 1 / 3
 }

 .banner-medium {
     height: 188px
 }

 .banner-image {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 30px
 }

 .banner-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .banner-card:hover .banner-image img {
     transform: scale(1.08)
 }

 .banner-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.5) 50%, transparent 100%);
     padding: 32px;
     color: #FFFFFF;
     transition: all 0.4s ease
 }

 .banner-card:hover .banner-overlay {
     background: linear-gradient(to top, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.6) 50%, transparent 100%)
 }

 .banner-content {
     position: relative;
     z-index: 2
 }

 .banner-tag {
     display: inline-block;
     padding: 6px 14px;
     background: linear-gradient(135deg, #D4A574 0%, #C8966A 100%);
     color: #FFFFFF;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     margin-bottom: 12px;
     font-family: 'Inter', sans-serif;
     box-shadow: 0 4px 12px rgba(212, 165, 116, 0.4)
 }

 .banner-content h3 {
     font-size: 24px;
     font-weight: 700;
     color: #FFFFFF;
     margin: 0 0 8px 0;
     font-family: 'Playfair Display', serif;
     letter-spacing: -0.5px
 }

 .banner-content p {
     font-size: 15px;
     color: rgba(255, 255, 255, 0.9);
     margin: 0;
     font-family: 'Inter', sans-serif
 }

 .banner-large .banner-content h3 {
     font-size: 32px
 }

 .banner-large .banner-content p {
     font-size: 17px
 }

 .products-section {
     padding: 8px 0;
     background: #FFFFFF
 }

 .section-header {
     text-align: center;
     margin-bottom: 48px
 }

 .section-title {
     font-size: 42px;
     font-weight: 700;
     color: #1A1A1A;
     margin: 0 0 12px 0;
     font-family: 'Playfair Display', serif;
     letter-spacing: -0.5px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px
 }

 .section-title i {
     color: #D4A574;
     font-size: 36px
 }

 .section-subtitle {
     font-size: 18px;
     color: #6B7280;
     margin: 0;
     font-family: 'Inter', sans-serif
 }

 .slide_product {
     position: relative;
     padding: 20px 0
 }

 .slide_product .products {
     padding-bottom: 20px
 }

 .slide_product .swiper-button-next,
 .slide_product .swiper-button-prev {
     background: linear-gradient(135deg, #D4A574 0%, #C8966A 100%);
     color: #FFFFFF;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3);
     transition: all 0.3s ease
 }

 .slide_product .swiper-button-next:hover,
 .slide_product .swiper-button-prev:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4)
 }

 .slide_product .swiper-button-next::after,
 .slide_product .swiper-button-prev::after {
     font-size: 18px;
     font-weight: 700
 }

 .why-choose-section--horizontal {
     padding: 80px 0;
     background: #FFFFFF;
 }

 .features-grid--horizontal {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 32px;
     flex-wrap: wrap;
 }

 .feature-item-horizontal {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     flex: 1;
     min-width: 250px;
     transition: transform 0.3s ease;
 }

 .feature-item-horizontal:hover {
     transform: translateY(-4px);
 }

 .feature-item-icon {
     width: 60px;
     height: 60px;
     background: #FDF7F0; /* Light tan background matching category style */
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 4px 10px rgba(0,0,0,0.03);
 }

 .feature-item-icon i {
     font-size: 24px;
     color: #D4A574;
 }

 .feature-item-content {
     display: flex;
     flex-direction: column;
 }

 .feature-item-content h3 {
     font-size: 17px;
     font-weight: 700;
     color: #1A1A1A;
     margin: 0 0 6px 0;
     font-family: 'Playfair Display', serif;
 }

 .feature-item-content p {
     font-size: 14px;
     color: #6B7280;
     line-height: 1.5;
     margin: 0;
     font-family: 'Inter', sans-serif;
 }

 @media (max-width: 1024px) {
     .features-grid--horizontal {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
     }
 }

 @media (max-width: 576px) {
     .features-grid--horizontal {
         grid-template-columns: 1fr;
         gap: 30px;
     }
 }

 .why-choose-section {
     padding: 100px 0;
     background: linear-gradient(135deg, #F5F7FA 0%, #FFFFFF 100%)
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px
 }

 .feature-card {
     background: #FFFFFF;
     padding: 40px 32px;
     border-radius: 20px;
     text-align: center;
     border: 2px solid #E8EAED;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)
 }

 .feature-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
     border-color: #D4A574
 }

 .feature-icon {
     width: 80px;
     height: 80px;
     margin: 0 auto 24px;
     background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(200, 150, 106, 0.1) 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease
 }

 .feature-card:hover .feature-icon {
     background: linear-gradient(135deg, #D4A574 0%, #C8966A 100%);
     transform: scale(1.1)
 }

 .feature-icon i {
     font-size: 36px;
     color: #D4A574;
     transition: color 0.3s ease
 }

 .feature-card:hover .feature-icon i {
     color: #FFFFFF
 }

 .feature-card h3 {
     font-size: 20px;
     font-weight: 600;
     color: #1A1A1A;
     margin: 0 0 12px 0;
     font-family: 'Inter', sans-serif
 }

 .feature-card p {
     font-size: 15px;
     color: #6B7280;
     line-height: 1.6;
     margin: 0;
     font-family: 'Inter', sans-serif
 }

 .new-arrivals-section {
     padding: 80px 0;
     background: #FFFFFF
 }

 .arrivals-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px
 }

 .arrival-card {
     background: #FFFFFF;
     border-radius: 20px;
     overflow: hidden;
     border: 2px solid #E8EAED;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)
 }

 .arrival-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
     border-color: #D4A574
 }

 .arrival-image {
     position: relative;
     background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
     height: 320px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px;
     overflow: hidden
 }

 .arrival-image img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transition: transform 0.4s ease
 }

 .arrival-card:hover .arrival-image img {
     transform: scale(1.1)
 }

 .arrival-badge {
     position: absolute;
     top: 20px;
     left: 20px;
     background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
     color: #FFFFFF;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3)
 }

 .arrival-content {
     padding: 32px;
     text-align: center
 }

 .arrival-content h3 {
     font-size: 22px;
     font-weight: 600;
     color: #1A1A1A;
     margin: 0 0 12px 0;
     font-family: 'Inter', sans-serif
 }

 .arrival-content p {
     font-size: 15px;
     color: #6B7280;
     line-height: 1.6;
     margin: 0 0 24px 0;
     font-family: 'Inter', sans-serif
 }

 .arrival-link {
     color: #D4A574;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: margin-left 0.3s ease
 }

 .arrival-link:hover {
     margin-left: 5px
 }

 .products-section .product {
     background: linear-gradient(145deg, #FFFFFF 0%, #FAFAFA 100%);
     border: 1px solid #E8EAED;
     border-radius: 24px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
     height: 100%;
     display: flex;
     flex-direction: column
 }

 .products-section .product:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(212, 165, 116, 0.15);
     border-color: #D4A574
 }

 .products-section .img_product {
     background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 260px;
     overflow: hidden;
     position: relative;
     border-bottom: 1px solid #F3F4F6
 }

 .products-section .img_product img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease
 }

 .products-section .product:hover .img_product img {
     transform: scale(1.1)
 }

 .products-section .name_product {
     padding: 16px 20px 8px;
     margin: 0
 }

 .products-section .name_product a {
     font-size: 16px;
     font-weight: 600;
     color: #1F2937;
     text-decoration: none;
     transition: color 0.2s;
     font-family: 'Inter', sans-serif;
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }

 .products-section .name_product a:hover {
     color: #D4A574
 }

 .products-section .stars {
     padding: 0 20px;
     display: flex;
     gap: 2px;
     margin-bottom: 8px
 }

 .products-section .stars i {
     font-size: 13px;
     color: #F59E0B
 }

 .products-section .price {
     padding: 0 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px
 }

 .products-section .price p span {
     font-size: 18px;
     font-weight: 700;
     color: #111827
 }

 .products-section .price .old_price {
     font-size: 14px;
     color: #9CA3AF;
     text-decoration: line-through;
     margin: 0
 }

 .products-section .icons {
     padding: 0 20px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-top: auto
 }

 .products-section .btn_add_cart {
     background: #1F2937;
     color: #FFFFFF;
     flex: 1;
     height: 40px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease
 }

 .products-section .btn_add_cart:hover {
     background: #D4A574;
     transform: translateY(-2px)
 }

 .products-section .btn_add_cart.active {
     background: #10B981;
     pointer-events: none
 }

 .products-section .icon_product {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: #F3F4F6;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: #4B5563
 }

 .products-section .icon_product:hover {
     background: #FEE2E2;
     color: #EF4444
 }

 .products-section .sale_present {
     position: absolute;
     top: 12px;
     left: 12px;
     background: #EF4444;
     color: #fff;
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 700;
     z-index: 2
 }

 @media (max-width:768px) {
     .container {
         padding: 0 16px
     }

     .hero-section,
     .featured-banner-section,
     .premium-banner-section,
     .products-section,
     .why-choose-section,
     .new-arrivals-section,
     .about-store-section,
     .testimonials-section,
     .newsletter-section {
         padding: 40px 0 !important
     }

     .hero-content-wrapper {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 24px;
         padding-top: 20px
     }

     .hero-content h1 {
         font-size: 32px !important;
         line-height: 1.2;
         margin-bottom: 16px
     }

     .hero-content p {
         font-size: 15px !important;
         margin-bottom: 24px
     }

     .hero-buttons {
         justify-content: center;
         gap: 12px
     }

     .btn-primary,
     .btn-secondary {
         padding: 10px 24px;
         font-size: 14px;
         height: 44px
     }

     .section-header {
         margin-bottom: 30px !important
     }

     .section-header h2 {
         font-size: 24px !important;
         margin-bottom: 8px
     }

     .section-header p {
         font-size: 14px !important
     }

     .arrivals-grid {
         grid-template-columns: 1fr;
         gap: 20px
     }

     .products-section .product {
         margin-bottom: 10px
     }
 }

 .about-store-section {
     padding: 100px 0;
     background: linear-gradient(135deg, #F5F7FA 0%, #FFFFFF 100%)
 }

 .about-wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center
 }

 .about-content {
     max-width: 600px
 }

 .about-tag {
     display: inline-block;
     padding: 8px 20px;
     background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(200, 150, 106, 0.15) 100%);
     color: #B8865A;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 24px;
     font-family: 'Inter', sans-serif;
     border: 1px solid rgba(212, 165, 116, 0.2)
 }

 .about-content h2 {
     font-size: 42px;
     font-weight: 700;
     color: #1A1A1A;
     margin: 0 0 24px 0;
     font-family: 'Playfair Display', serif;
     letter-spacing: -0.5px;
     line-height: 1.2
 }

 .about-content p {
     font-size: 17px;
     color: #4A5568;
     line-height: 1.8;
     margin: 0 0 20px 0;
     font-family: 'Inter', sans-serif
 }

 .about-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
     margin: 40px 0;
     padding: 40px 0;
     border-top: 2px solid #E8EAED;
     border-bottom: 2px solid #E8EAED
 }

 .stat-item {
     text-align: center
 }

 .stat-number {
     font-size: 36px;
     font-weight: 700;
     color: #D4A574;
     margin: 0 0 8px 0;
     font-family: 'Playfair Display', serif
 }

 .stat-label {
     font-size: 14px;
     color: #6B7280;
     font-weight: 500;
     font-family: 'Inter', sans-serif;
     text-transform: uppercase;
     letter-spacing: 0.5px
 }

 .btn-about {
     display: inline-block;
     padding: 14px 32px;
     background: linear-gradient(135deg, #D4A574 0%, #C8966A 100%);
     color: #FFFFFF;
     border-radius: 12px;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3);
     font-family: 'Inter', sans-serif
 }

 .btn-about:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(212, 165, 116, 0.4);
     background: linear-gradient(135deg, #C8966A 0%, #B8865A 100%)
 }

 .about-image {
     position: relative;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15)
 }

 .about-image img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease
 }

 .about-image:hover img {
     transform: scale(1.05)
 }

 .categories-section--horizontal {
     padding: 60px 0;
     background: #FAFAFA; /* Matches the light background in the reference image */
     border-top: 1px solid rgba(0,0,0,0.05);
     border-bottom: 1px solid rgba(0,0,0,0.05);
 }

 .categories-section--horizontal .section-header {
     margin-bottom: 40px;
     text-align: center;
 }

 .categories-grid--horizontal {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 30px;
     flex-wrap: wrap;
 }

 .category-item-horizontal {
     display: flex;
     align-items: center;
     gap: 16px;
     text-decoration: none;
     flex: 1;
     min-width: 200px;
     transition: transform 0.3s ease;
 }

 .category-item-horizontal:hover {
     transform: translateY(-3px);
 }

 .category-item-icon {
     width: 60px;
     height: 60px;
     background: #FFFFFF;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0,0,0,0.04);
     flex-shrink: 0;
 }

 .category-item-icon i {
     font-size: 24px;
     color: #0d2b1a; /* Forest green to match the UI */
 }

 .category-item-content {
     display: flex;
     flex-direction: column;
 }

 .category-item-content h3 {
     font-size: 16px;
     font-weight: 700;
     color: #0d2b1a;
     margin: 0 0 2px 0;
     font-family: 'Playfair Display', serif; /* Matching the premium font */
 }

 .category-item-content p {
     font-size: 13px;
     color: #6B7280;
     margin: 0;
     font-family: 'Inter', sans-serif;
 }

 @media (max-width: 991px) {
     .categories-grid--horizontal {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
     }
 }

 @media (max-width: 480px) {
     .categories-grid--horizontal {
         grid-template-columns: 1fr;
     }
 }

 .products-section .product {
     background: #FFFFFF;
     border-radius: 20px;
     padding: 0;
     border: 2px solid #E8EAED;
     position: relative;
     overflow: hidden;
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     height: 100%
 }

 .products-section .product::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #D4A574 0%, #C8966A 100%);
     opacity: 0;
     transition: opacity 0.35s ease
 }

 .products-section .product:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
     border-color: #D1D5DB
 }

 .products-section .product:hover::before {
     opacity: 1
 }

 .products-section .product .sale_present {
     position: absolute;
     top: 16px;
     right: 16px;
     background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
     color: #FFFFFF;
     padding: 8px 14px;
     border-radius: 24px;
     font-size: 12px;
     font-weight: 700;
     z-index: 10;
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-family: 'Inter', sans-serif
 }

 .products-section .product .img_product {
     position: relative;
     width: 100%;
     height: 240px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
     padding: 24px;
     border-radius: 20px 20px 0 0;
     overflow: hidden
 }

 .products-section .product .img_product img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .products-section .product:hover .img_product img {
     transform: scale(1.08)
 }

 .products-section .product .stars {
     display: flex;
     gap: 4px;
     padding: 16px 20px 10px;
     color: #FBBF24;
     font-size: 12px
 }

 .products-section .product .name_product {
     font-size: 16px;
     font-weight: 600;
     color: #1A1A1A;
     margin: 0 20px 14px;
     min-height: 48px;
     line-height: 1.5;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-family: 'Inter', sans-serif;
     letter-spacing: -0.2px
 }

 .products-section .product .name_product a {
     color: inherit;
     text-decoration: none;
     transition: color 0.25s ease
 }

 .products-section .product .name_product a:hover {
     color: #D4A574
 }

 .products-section .product .price {
     padding: 0 20px 18px;
     display: flex;
     align-items: baseline;
     gap: 10px;
     flex-wrap: wrap
 }

 .products-section .product .price p {
     margin: 0;
     font-size: 22px;
     font-weight: 700;
     color: #1A1A1A;
     font-family: 'Inter', sans-serif;
     letter-spacing: -0.3px
 }

 .products-section .product .price p span {
     color: #22C55E
 }

 .products-section .product .price .old_price {
     font-size: 15px;
     color: #9CA3AF;
     text-decoration: line-through;
     font-weight: 500;
     margin: 0
 }

 .products-section .product .icons {
     display: flex;
     gap: 12px;
     padding: 0 20px 20px;
     margin-top: auto
 }

 .products-section .product .icons .btn_add_cart {
     flex: 1;
     padding: 14px 18px;
     background: #1A1A1A;
     color: #FFFFFF;
     border: none;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-transform: none;
     font-family: 'Inter', sans-serif;
     letter-spacing: 0.2px;
     box-shadow: 0 2px 8px rgba(26, 26, 26, 0.2);
     min-height: 44px
 }

 .products-section .product .icons .btn_add_cart:hover {
     background: #2D2D2D;
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(26, 26, 26, 0.3)
 }

 .products-section .product .icons .btn_add_cart.active {
     background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
     pointer-events: none;
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
     cursor: default
 }

 .products-section .product .icons .btn_add_cart.active:hover {
     transform: none;
     background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%)
 }

 .products-section .product .icons .icon_product {
     width: 48px;
     height: 48px;
     min-width: 48px;
     border: 2px solid #E8EAED;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #FFFFFF;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     flex-shrink: 0;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04)
 }

 .products-section .product .icons .icon_product:hover {
     border-color: #EF4444;
     background: #FEF2F2;
     transform: scale(1.08);
     box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2)
 }

 .products-section .product .icons .icon_product.active {
     border-color: #22C55E;
     background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3)
 }

 .products-section .product .icons .icon_product.active i {
     color: #FFFFFF !important
 }

 .products-section .product .icons .icon_product i {
     font-size: 17px;
     color: #6B7280;
     transition: color 0.3s ease
 }

 .products-section .product .icons .icon_product:hover i {
     color: #EF4444
 }

 .products-section .product .icons .icon_product.active i {
     color: #FFFFFF !important
 }

 @media screen and (min-width:1400px) {
     .hero-title {
         font-size: 64px
     }

     .featured-grid,
     .features-grid,
     .categories-grid {
         gap: 32px
     }
 }

 @media screen and (max-width:1200px) {
     .hero-content-wrapper {
         gap: 40px
     }

     .hero-title {
         font-size: 48px
     }

     .featured-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .features-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .arrivals-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .categories-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .banner-grid {
         grid-template-columns: 1fr 1fr;
         height: auto
     }

     .banner-large {
         grid-row: 1;
         height: 400px
     }

     .banner-medium {
         height: 400px
     }
 }

 @media screen and (max-width:768px) {
    /* Mobile Header Ghost Refinement */
    header:not(.scrolled) {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    header.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    /* Logo Mobile */
    header .logo {
        width: 80px !important;
        margin-right: auto;
    }

    header:not(.scrolled) .logo {
        /* filter removed */ /* White logo on dark hero */
    }

    /* Mobile Header Container */
    header .top_header .container {
        padding: 5px 15px !important;
        display: flex !important;
        flex-wrap: nowrap !important; /* Keep on one line */
        align-items: center !important;
        gap: 10px !important;
    }

    /* Mobile Icons Ghost Style */
    header .header_icons {
        margin-left: auto;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    header .header_icons .icon {
        width: 38px !important;
        height: 38px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    header.scrolled .header_icons .icon {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: transparent !important;
    }

    header .header_icons .icon i {
        font-size: 16px !important;
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    header.scrolled .header_icons .icon i {
        color: #333333 !important;
        text-shadow: none !important;
    }

    /* Fixed Mobile Menu Drawer (Peeking fix) */
    header .nav_links {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 300px !important; /* Consistent compact width */
        height: 100vh !important;
        background: #FFFFFF !important;
        z-index: 2500 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 80px 0 20px 0 !important;
        box-shadow: 20px 0 40px rgba(0,0,0,0.15) !important;
        transform: translateX(-100%) !important; /* Hide via transform for better performance and reliability */
        visibility: hidden !important;
        opacity: 0 !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        gap: 0 !important;
    }

    header .nav_links.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Mobile Menu Drawer Links (Picture 1 fix) */
    header .nav_links li a {
        color: #1A1A1A !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        padding: 18px 25px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        letter-spacing: 0.5px !important;
        font-family: 'Inter', sans-serif !important;
        text-transform: uppercase !important;
    }

    header .nav_links li.active a,
    header .nav_links li:hover a {
        background: rgba(212, 165, 116, 0.08) !important;
        color: #D4A574 !important;
    }

    /* Hamburger Menu Icon */
    header .header_icons .open_Menu {
        display: flex !important;
        width: 38px !important;
        height: 38px !important;
        background: var(--gradient-primary) !important;
        border: none !important;
        border-radius: 10px !important;
        color: white !important;
        align-items: center;
        justify-content: center;
    }

    /* Show toggle icons on mobile */
    .search-toggle, .open_Menu {
        display: flex !important;
    }

    /* 
    header .top_header .container .search_box.toggleable-search {
        position: fixed !important;
        top: 0 !important; 
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #FFFFFF !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 20px 15px !important;
        border-bottom: 2px solid #d4a574 !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
        z-index: 1000000 !important;
        
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-100%) !important;
        transition: all 0.3s ease-out !important;
    }

    body header.search-open .search_box.toggleable-search,
    body header .search_box.toggleable-search.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    header.scrolled .search_box.toggleable-search {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        border-bottom: 1px solid #eee !important;
    }
    */

    header .hero-section {
        padding: 40px 0 60px;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center
    }

    .hero-title {
        font-size: 32px !important;
        margin-top: 20px;
    }
     .hero-section {
         padding: 60px 0 80px
     }

     .hero-content-wrapper {
         grid-template-columns: 1fr;
         gap: 40px;
         text-align: center
     }

     .hero-title {
         font-size: 36px
     }

     .hero-subtitle {
         font-size: 16px
     }

     .hero-buttons {
         justify-content: center
     }

     .featured-banner-section,
     .premium-banner-section,
     .products-section,
     .why-choose-section,
     .new-arrivals-section,
     .about-store-section,
     .categories-section {
         padding: 60px 0
     }

     .featured-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px
     }

     .banner-grid {
         grid-template-columns: 1fr;
         height: auto;
         gap: 20px
     }

     .banner-large,
     .banner-medium {
         grid-row: auto;
         height: 300px
     }

     .features-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 24px
     }

     .arrivals-grid {
         grid-template-columns: 1fr;
         gap: 24px
     }

     .about-wrapper {
         grid-template-columns: 1fr;
         gap: 40px
     }

     .about-stats {
         grid-template-columns: repeat(3, 1fr);
         gap: 20px;
         padding: 32px 0
     }

     .categories-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 24px
     }

     .section-title {
         font-size: 32px
     }
 }

 @media screen and (max-width:480px) {
    header .logo {
        width: 70px !important;
    }
    
    header .header_icons .icon {
        width: 34px !important;
        height: 34px !important;
    }

    header .header_icons {
        gap: 5px !important;
    }

    .hero-title {
        font-size: 28px !important;
    }
     .hero-section {
         padding: 40px 0 60px
     }

     .hero-title {
         font-size: 28px
     }

     .hero-subtitle {
         font-size: 15px
     }

     .btn-hero-primary,
     .btn-hero-secondary {
         padding: 14px 28px;
         font-size: 14px;
         width: 100%;
         justify-content: center
     }

     .featured-banner-section,
     .premium-banner-section,
     .products-section,
     .why-choose-section,
     .new-arrivals-section,
     .about-store-section,
     .categories-section {
         padding: 40px 0
     }

     .section-header {
         margin-bottom: 32px
     }

     .section-title {
         font-size: 26px;
         flex-direction: column;
         gap: 8px
     }

     .section-subtitle {
         font-size: 15px
     }

     .featured-grid {
         grid-template-columns: 1fr
     }
 
     .featured-card {
         height: 480px; /* Increased height in mobile for consistency */
     }

     .featured-image {
         height: 100%; /* Fill entire card */
         padding: 0;
     }
 
     .featured-image img {
         object-fit: cover !important; /* FILL the card width */
         object-position: bottom;
         transform: none; /* Remove small scale */
     }

     .banner-grid {
         grid-template-columns: 1fr;
         height: auto
     }

     .banner-large,
     .banner-medium {
         height: 250px
     }

     .banner-content h3 {
         font-size: 20px
     }

     .banner-large .banner-content h3 {
         font-size: 24px
     }

     .banner-overlay {
         padding: 24px
     }

     .features-grid {
         grid-template-columns: 1fr;
         gap: 20px
     }

     .feature-card {
         padding: 32px 24px
     }

     .arrivals-grid {
         grid-template-columns: 1fr
     }

     .about-stats {
         grid-template-columns: 1fr;
         gap: 24px
     }

     .categories-grid {
         grid-template-columns: 1fr
     }
 }

/* Mobile Search Dropdown */
.mobile-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
    display: flex;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.mobile-search-dropdown.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-search-dropdown input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px 0 0 8px;
    padding: 12px 16px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
}

.mobile-search-dropdown button {
    background: linear-gradient(135deg, #D4A574 0%, #C8966A 100%);
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0 20px;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

/* ===================================== */
/*    ABOUT SECTION REDESIGN (PREMIUM)   */
/* ===================================== */

.about-store-section {
    padding: 100px 0;
    background: #FFFFFF;
    overflow: hidden;
}

.about-wrapper-premium {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* Left Column Styling */
.about-thumb-header {
    margin-bottom: 24px;
}

.about-pill {
    display: inline-block;
    padding: 8px 18px;
    background: #F4EDE4;
    color: #D4A574;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
}

.about-title-premium {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    color: #1A1A1A;
    font-family: 'Playfair Display', serif;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.about-description-premium p {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.about-stats-premium {
    display: flex;
    gap: 40px;
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px solid #E5E5E5;
}

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

.stat-num {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #D4A574;
    font-family: 'Playfair Display', serif;
}

.stat-lbl {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 5px;
    display: block;
}

.btn-premium-gold {
    display: inline-block;
    padding: 16px 40px;
    background: #Cfaa82;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(207, 170, 130, 0.3);
}

.btn-premium-gold:hover {
    background: #be9266;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(207, 170, 130, 0.4);
}

/* Right Column Visual Card */
.about-visual-premium {
    position: relative;
    padding: 20px;
}

.visual-card-content {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #F8F8F8;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    aspect-ratio: 1 / 1; /* Square card as per reference */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Overlays */
.card-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
}

.brand-badge-overlay {
    text-align: center;
    color: #4a4a4a;
}
.brand-badge-overlay i { font-size: 24px; display: block; margin-bottom: 5px; color: #333; }
.brand-badge-overlay span { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 14px; display: block; color: #333;}
.brand-badge-overlay small { font-family: 'Playfair Display', serif; color: #D4A574; font-size: 12px; letter-spacing: 1px; font-weight: 600;}


.card-slogan {
    font-size: 32px;
    line-height: 1.2;
    color: #8B0000; /* Dark Red to match the 'Black Diamond' feel */
    font-family: 'Montserrat', sans-serif; 
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    margin-top: auto;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(255,255,255,0.8);
}

.card-slogan .highlight {
    color: #5a0000;
}

.signature {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    color: #666;
    align-self: flex-start;
}

/* Responsive */
@media (max-width: 992px) {
    .about-wrapper-premium {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    
    .about-content-premium {
        padding: 0 20px;
    }

    .about-stats-premium {
        justify-content: center;
    }
    
    .card-slogan {
        font-size: 24px;
        text-align: center;
    }
    
    .signature {
        align-self: center;
    }
    
    .card-overlay-text {
        text-align: center;
        align-items: center;
    }
}


/* =========================================



/* =========================================

   MINIMALIST GLOW THEME

   ========================================= */



.section-header-minimalist {

    text-align: center;

    margin-bottom: 60px;

}



.header-pre-title {

    display: block;

    font-size: 14px;

    font-weight: 700;

    color: #0d2b1a;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 16px;

    font-family: "Inter", sans-serif;

    opacity: 0.7;

}



.header-title-large {

    font-size: 48px;

    font-weight: 700;

    color: #0d2b1a;

    font-family: "Playfair Display", serif;

    margin-bottom: 20px;

}



.header-subtitle-muted {

    font-size: 18px;

    color: #6B7280;

    max-width: 700px;

    margin: 0 auto;

    line-height: 1.6;

    font-family: "Inter", sans-serif;

}



/* WHY CHOOSE US - MINIMALIST */

.why-choose-section--minimalist {

    padding: 100px 0;

    background: #FFFFFF;

}



.features-bar-minimalist {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    background: #FAFAFA;

    padding: 40px;

    border-radius: 24px;

    margin-top: 40px;

}



.feature-box-minimalist {

    display: flex;

    align-items: center;

    gap: 16px;

    flex: 1;

}



.feature-icon-circle {

    width: 52px;

    height: 52px;

    background: #E8EDE9;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #0d2b1a;

    font-size: 20px;

    flex-shrink: 0;

}



.feature-text h3 {

    font-size: 16px;

    font-weight: 700;

    color: #0d2b1a;

    margin: 0 0 4px 0;

    font-family: "Playfair Display", serif;

}



.feature-text p {

    font-size: 13px;

    color: #6B7280;

    margin: 0;

    font-family: "Inter", sans-serif;

}



/* PROMO BANNER */

.promo-banner-section {

    padding: 40px 0;

}



.promo-banner-card {

    background: linear-gradient(135deg, #0d2b1a 0%, #1a3a2a 100%);

    border-radius: 40px;

    padding: 60px 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

    color: #FFFFFF;

}



.promo-content {

    flex: 1;

    z-index: 2;

    max-width: 500px;

}



.promo-badge {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    color: #D4A574;

    background: rgba(212, 165, 116, 0.1);

    padding: 6px 16px;

    border-radius: 20px;

    margin-bottom: 24px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.promo-title {

    font-size: 56px;

    font-weight: 700;

    margin-bottom: 20px;

    font-family: "Playfair Display", serif;

}



.promo-desc {

    font-size: 18px;

    opacity: 0.8;

    margin-bottom: 40px;

    line-height: 1.6;

}



.btn-promo-shop {

    background: #FFFFFF;

    color: #0d2b1a;

    padding: 16px 40px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transition: all 0.3s ease;

}



.btn-promo-shop:hover {

    background: #D4A574;

    color: #FFFFFF;

    transform: translateX(5px);

}



.promo-visual {

    flex: 1;

    position: relative;

    display: flex;

    justify-content: flex-end;

    z-index: 1;

}



.promo-visual img {

    max-width: 120%;

    height: auto;

    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));

}



.promo-discount-tag {

    position: absolute;

    top: -20px;

    right: 20px;

    width: 100px;

    height: 100px;

    background: #D4A574;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    font-weight: 700;

    box-shadow: 0 10px 20px rgba(0,0,0,0.2);

    z-index: 3;

}



.discount-val {

    font-size: 24px;

}



.discount-lbl {

    font-size: 12px;

}



/* CATEGORIES MINIMALIST */

.categories-section-minimalist {

    padding: 100px 0;

}



.categories-grid-minimalist {

    display: grid;

    grid-template-columns: repeat(8, 1fr);

    gap: 20px;

    margin-bottom: 60px;

}



.category-item-mini {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    transition: all 0.3s ease;

}



.category-icon-box-mini {

    width: 100px;

    height: 100px;

    background: #FDFDFD;

    border: 1px solid #F3F4F6;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: #0d2b1a;

    margin-bottom: 16px;

    transition: all 0.3s ease;

}



.category-label-mini {

    font-size: 14px;

    font-weight: 600;

    color: #4B5563;

    font-family: "Inter", sans-serif;

}



.category-item-mini:hover .category-icon-box-mini {

    background: #0d2b1a;

    color: #FFFFFF;

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

}



.category-item-mini:hover .category-label-mini {

    color: #0d2b1a;

}



.categories-footer {

    text-align: center;

}



.btn-all-categories {

    background: #0d2b1a;

    color: #FFFFFF;

    padding: 16px 40px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transition: all 0.3s ease;

}



.btn-all-categories:hover {

    background: #D4A574;

    box-shadow: 0 10px 20px rgba(212, 165, 116, 0.3);

}



@media (max-width: 1024px) {

    .features-bar-minimalist {

        flex-wrap: wrap;

    }

    .categories-grid-minimalist {

        grid-template-columns: repeat(4, 1fr);

    }

    .promo-banner-card {

        padding: 40px;

        flex-direction: column;

        text-align: center;

    }

    .promo-visual {

        margin-top: 40px;

        justify-content: center;

    }

    .promo-title {

        font-size: 40px;

    }

}



@media (max-width: 576px) {

    .categories-grid-minimalist {

        grid-template-columns: repeat(2, 1fr);

    }

    .header-title-large {

        font-size: 32px;

    }

}


/* =========================================
   STATIC COMPONENT OVERRIDES (MINIMALIST)
   Forced non-interactive state for product cards
   ========================================= */

.product_card:hover, 
.home-product-card:hover, 
.product-grid .product_card:hover,
.featured-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-color: #eeeeee !important;
}

.product_card:hover .product_image img, 
.home-product-card:hover .home-product-card__img,
.product-grid .product_card:hover .product_image img,
.featured-card:hover .featured-image img {
    transform: none !important;
    scale: 1 !important;
}

.featured-card:hover .featured-link i {
    transform: none !important;
}

.btn_add_cart_gold:hover,
.home-product-card .btn_buy_now:hover {
    transform: none !important;
    box-shadow: none !important;
}

.btn_quick_view {
    display: none !important;
}

/* =========================================
   GLOBAL STATIC PRODUCT OVERRIDES
   Ensures zero interactivity/lifting for all products
   ========================================= */

.product:hover,
.product_card:hover, 
.home-product-card:hover, 
.product-grid .product_card:hover,
.featured-card:hover,
.arrival-card:hover,
.banner-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-color: #eeeeee !important;
}

.product:hover img,
.product_card:hover .product_image img, 
.home-product-card:hover .home-product-card__img,
.product-grid .product_card:hover .product_image img,
.featured-card:hover .featured-image img,
.arrival-card:hover img,
.banner-card:hover img {
    transform: none !important;
    scale: 1 !important;
}

.featured-card:hover .featured-link i,
.arrival-link:hover i {
    transform: none !important;
}

.btn_add_cart:hover,
.btn_add_cart_gold:hover,
.btn_buy_now:hover,
.home-product-card .btn_buy_now:hover {
    transform: none !important;
    box-shadow: none !important;
}

.btn_quick_view, 
.icon_product, 
.icons .icon_product {
    display: none !important;
}

/* =========================================
   EXTREME GLOBAL IMAGE STABILIZER
   Prevents ALL image scaling/transforms on hover
   ========================================= */

[class*="card"]:hover img,
[class*="product"]:hover img,
.home-card:hover img,
.img_product img,
.product_image img,
.home-product-card__img {
    transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    transition: none !important;
}

.product_card:hover, 
/* MINIMALIST BOUTIQUE CARDS ARE NOW MANAGED IN product-cards.css */
    }
    
    .section-header-minimal .section-title {
        font-size: 18px;
    }
    
    .btn-voir-plus {
        font-size: 13px;
    }
    
    .product_quick_actions {
        /* Keep actions visible or easier to trigger on mobile */
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        bottom: 10px;
    }
    
    .action_btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* FINAL FORCE FIX: Centering and Navigation */
.product_image_minimal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.product_image_minimal a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.product_image_minimal img {
    max-width: 85% !important;
    max-height: 85% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    object-fit: contain !important;
}

/* Move Swiper Buttons Outside to prevent content covering */
.slide_product .swiper-button-next {
    right: -10px !important;
}

.slide_product .swiper-button-prev {
    left: -10px !important;
}

@media (max-width: 1024px) {
    .slide_product .swiper-button-next,
    .slide_product .swiper-button-prev {
        display: none !important; /* Hide arrows on small screens to avoid clutter */
    }
}

/* REFINEMENT: Typography & Proportions */
.product_image_minimal {
    background: #fff !important; /* Pure white */
}

.product_image_minimal img {
    max-width: 95% !important; /* Larger product presence */
    max-height: 95% !important;
}

.product_info_minimal {
    padding: 20px 10px !important; /* More breathing room */
    text-align: center !important; /* Center text for Jumia boutique style */
}

.product_name_minimal {
    margin: 0 0 10px 0 !important;
}

.product_name_minimal a {
    font-size: 15px !important; /* Slightly larger name */
    font-weight: 600 !important; /* Medium-bold for premium feel */
    color: #1a1a1a !important;
    height: 42px !important;
}

.product_price_minimal {
    justify-content: center !important; /* Center match with text */
    gap: 12px !important;
}

.price_current_minimal {
    font-size: 18px !important; /* Prominent price */
    font-weight: 800 !important; /* Bold */
    color: #000 !important;
}

.price_old_minimal {
    font-size: 14px !important;
}

/* Actions Overlay Position Correction */
.product_quick_actions {
    bottom: 20px !important;
}

/* GLOBAL REFINEMENT: Unified Section Spacing */
.section-header-minimal {
    margin-bottom: 45px !important; /* Increased breathing room */
}

/* MINIMALIST REEL CARD OVERLAYS */
.reel-card__details_minimal {
    position: absolute;
    bottom: 20px;
    left: 15px;
    right: 15px;
    z-index: 5;
    text-align: left;
}

.reel-card__title_minimal {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reel-card__footer_minimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reel-card__price_minimal {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.reel-card__shop-btn_minimal {
    background: #d4a574 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.reel-card__shop-btn_minimal:hover {
    transform: scale(1.05);
    background: #b8865a !important;
}

.reel-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 40%) !important;
}

/* Hide old header pills for cleaner look */
.reels-section__pills {
    display: none !important;
}

/* REEL OVERLAY REFINEMENT: Deeper Gradient for Text Clarity */
.reel-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 30%, transparent 60%) !important;
}

.reel-card__details_minimal {
    bottom: 25px !important;
}

.reel-card__title_minimal {
    font-size: 15px !important;
    letter-spacing: 0.3px;
}

.reel-card__shop-btn_minimal {
    padding: 8px 18px !important;
    font-size: 11px !important;
}

/* ---- NEW MOBILE LAYOUT OVERRIDES ---- */
@media (max-width: 768px) {
    .hero-section {
        min-height: 75vh !important;
        height: auto !important;
        padding: 120px 0 80px 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .hero-content-right {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 2 !important;
    }
    .btn-hero-primary {
        width: 100% !important;
        max-width: 250px !important;
        justify-content: center !important;
        padding: 15px 0 !important;
    }
}

/* ---- BIGGER HEADER ICONS ON MOBILE ---- */
@media (max-width: 768px) {
    header .header_icons .icon {
        width: 42px !important;
        height: 42px !important;
    }
    header .header_icons .icon i {
        font-size: 18px !important;
    }
}