@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Main Website Body is White --- */
body {
    font-family: 'Raleway', 'Noto Sans Sinhala', sans-serif;
    background-color: #ffffff; /* Rest of the page stays clean white */
    color: #333333;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* --- Premium Logo-Inspired Color Palette --- */
:root {
    --primary-black: #050505;        /* Ultra-deep obsidian black from the logo background */
    --surface-dark: #121212;         /* Dark charcoal surface for premium contrast */
    
    /* Actual Gold Color Palette (Extracted from the logo) */
    --accent-gold: #D4AF37;          /* The true metallic mid-tone gold base */
    --bright-gold: #FFF1A8;          /* The intense, glowing white-gold highlight from the sparkles */
    --dark-gold: #8C621E;            /* The deep, rich bronze/amber shadow tone that gives the 3D depth */
    
    /* Utility Golds for Borders and Subdued Text */
    --gold-border: #A37F33;          /* Subtle metallic border tone (matches the thin divider line) */
    --text-gold-muted: #C5A059;      /* Elegant, readable gold for secondary typography */
    
    --text-white: #FFFFFF;
    --text-muted: #8E8E93;           /* Clean, neutral gray to let the gold pop */
    --border-dark: #1E1E1E;          /* Premium low-contrast divider for dark sections */

    /* Premium Metallic Gold Gradients */
    --gradient-gold-linear: linear-gradient(135deg, #fdb31f 0%, #fbcd35 40%, #f5b534 60%, #fdb31f 100%);
    --gradient-gold-text: linear-gradient(to bottom, #FFF1A8 0%, #faab08 50%, #8C621E 100%);
}

 
/* Ensure the header itself is fixed */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* IMPORTANT: Add padding to the body so content isn't hidden behind the fixed header */
body {
    padding-top: 210px; /* Adjust this value based on your actual header height */
}

/* --- 1. Top Bar Styling (Black) --- */
.top-bar {
    background-color: var(--primary-black);
    color: var(--text-muted);
    font-size: 13px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-dark);
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left, .top-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-left i {
    margin-right: 5px;
    color: var(--accent-gold);
}

.highlight-yellow {
    background: var(--gradient-gold-linear);
    color: #000000;
    padding: 2px 10px;
   border-radius: 0 0 16px 16px;
    font-weight: 700;
    font-size: 11px;
    margin-left: 5px;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.2);
}

.dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-white);
}

.dropdown-trigger:hover {
    color: var(--bright-gold);
}

.top-right a {
    color: var(--text-muted);
}
.top-right a:hover {
    color: var(--bright-gold);
}
/* --- 2. Middle Bar Styling (Black) --- */
.middle-bar {
    background-color: var(--surface-dark); 
    /* Reduced padding to shrink vertical space */
    padding: 15px 0; 
    border-bottom: 1px solid var(--border-dark);
}

.middle-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centers everything vertically */
    gap: 30px;
}

/* Logo Container & Image Adjustments */
.logo {
    display: flex;
    align-items: center;
    position: relative;
    /* Add a fixed layout width & height so it reserves real space in the navbar */
    width: 200px; 
    height: 60px; 
}

.logo-img {
    height: 100px;                /* Adjusted image height slightly to sit beautifully in the smaller bar */
    width: auto;                 
    display: block;
    position: absolute;          
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Keeps it perfectly centered vertically */
    z-index: 10;                 
}
.widget-icon-img {
    width: 22px;        /* Adjust this to make your icon look bigger or smaller inside the circle */
    height: 22px;       /* Keep this matching the width so it stays perfectly square */
    object-fit: contain; /* Ensures the image aspect ratio doesn't distort */
    display: block;
}
 

/* Search Box */
.search-box {
    flex: 1;
    max-width: 550px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-dark);
    border-radius: 30px;
    padding: 6px 6px 6px 20px;
    background-color: #1a1a1a;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-box:focus-within {
    border-color: var(--gold-border);
    box-shadow: 0 0 10px rgba(163, 127, 51, 0.15);
}
.search-icon-img {
    width: 20px;          /* Perfectly sized to fit inside the search button */
    height: 20px;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease, filter 0.3s ease;
}

 
.search-box input {
    font-family: 'Raleway', sans-serif;
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--text-white);
}

.search-box input::placeholder {
    color: #666666;
}

.search-box button {
    border: none;
    background: transparent;
    padding: 10px 15px;
    cursor: pointer;
    color: var(--accent-gold);
    font-size: 16px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.search-box button:hover {
    color: var(--bright-gold);
 }

/* Widgets (Cart & Account) */
.user-actions {
    display: flex;
    gap: 25px;
}

.account-widget, .cart-widget, .support-hotline {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.yellow-bg {
    background: var(--gradient-gold-linear);
    color: #000000;
}

.gray-bg {
    background-color: #1e1e1e;
    color: var(--accent-gold);
    border: 1px solid var(--border-dark);
}

.account-widget:hover .icon-circle, 
.cart-widget:hover .icon-circle {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.widget-text, .hotline-text {
    display: flex;
    flex-direction: column;
}

.widget-text .label, .hotline-text .label {
    font-size: 12px;
    color: var(--text-muted);
}

.widget-text .value, .hotline-text .value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-white);
    transition: color 0.3s ease;
}

.account-widget:hover .value, .cart-widget:hover .value {
    color: var(--bright-gold);
}
/* Update the hover effect to turn the PNG icon black */
.account-widget:hover .widget-icon-img,
.cart-widget:hover .widget-icon-img,
.categories-btn:hover .btn-icon-img,
.support-hotline:hover .widget-icon-img {
    filter: brightness(0); /* This effectively makes the PNG icon black */
}
/* Turns only the hotline PNG icon pure black when its wrapper is hovered */
.support-hotline:hover .widget-icon-img {
    filter: brightness(0);
}
/* --- 3. Main Navigation Styling (Black) --- */
.main-nav {
    background-color: var(--primary-black);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-dark);
 }

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Categories Button */
.categories-btn {
    background: var(--gradient-gold-linear);
    color: #000000;
    padding: 14px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(140, 98, 30, 0.25);
    transition: filter 0.3s ease, transform 0.2s ease;
}
.btn-icon-img {
    width: 18px;         /* Sized slightly smaller than the widget circles to look crisp next to text */
    height: 18px;
    object-fit: contain;
    display: inline-block;
}
.categories-btn:hover {
    filter: brightness(1.15);
 }

/* Menu Links */
.menu-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.menu-links li a {
    font-size: 15px;
    font-weight: 500;
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 4px;
}

.menu-links li a i {
    font-size: 10px;
    color: #555555;
    transition: color 0.3s ease;
}

.menu-links li a.active, .menu-links li a:hover {
    color: var(--bright-gold);
}

.menu-links li a.active i, .menu-links li a:hover i {
    color: var(--bright-gold);
}

/* Support Hotline tweaks */
.support-hotline .icon-circle {
    font-size: 20px;
    border: 1px solid var(--gold-border);
    color: var(--accent-gold);
    background-color: transparent;
}

.support-hotline:hover .icon-circle {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
}

.support-hotline:hover .value {
    color: var(--bright-gold);
}

/* --- Desktop Default Settings for Added Mobile Elements --- */
.mobile-menu-toggle {
    display: none; /* Hide on desktop layout */
    cursor: pointer;
}

/* --- Responsive Media Query (Mobile Mode) --- */
@media screen and (max-width: 768px) {
    
    /* Give both bars explicit padding so elements don't touch the screen edges */
    .top-bar-container,
    .middle-bar-container {
        padding: 0 20px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* 1. Top Bar Adjustments */
    .top-left, .top-right {
        display: none !important; 
    }
    
    .top-bar-container {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 4px 20px !important; /* Kept top bar neat */
    }

    .top-center {
        display: block;
        font-size: 12px;
        width: 100%;
    }

    /* 2. Middle Bar Grid Stack */
    .middle-bar-container {
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        padding: 5px 20px !important; /* Balanced vertical & horizontal spacing */
        position: relative; /* Crucial for absolute centering of the logo */
    }

    /* Left Mobile Menu Trigger - Circular Style matched with desktop */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        position: relative;
        z-index: 5;
        
        /* Circular Frame Styles (Matching your .icon-circle .gray-bg layout) */
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: #1e1e1e;
        border: 1px solid var(--border-dark);
        transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }

    /* Target the menu icon image directly inside the circle */
    .mobile-menu-toggle .widget-icon-img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: block;
        transition: filter 0.3s ease;
    }

    /* Premium Gold Glow Hover effect for the Mobile Menu Button */
    .mobile-menu-toggle:hover {
        transform: translateY(-2px);
        background: var(--gradient-gold-linear);
        border-color: transparent;
    }

    /* Turns the menu PNG icon black when the circle button is hovered */
    .mobile-menu-toggle:hover .widget-icon-img {
        filter: brightness(0);
    }
    
    /* 100% Mathematically Centered Logo */
    .logo {
        order: 2;
        width: auto;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Absolute center positioning rules */
        position: absolute;
        left: 50%;
        top: 5px; /* Aligns vertically with the action circles */
        transform: translateX(-50%);
        margin: 0;
        z-index: 1;
    }
    
    .logo-img {
        height: 75px; /* Scaled cleanly so it doesn't overlap the search box */
        width: auto;
        position: static;
        transform: none;
    }

    /* User Actions (Cart icon side) */
    .user-actions {
        order: 3;
        gap: 0;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 5;
    }

    .account-widget, .widget-text {
        display: none !important; 
    }

    .cart-widget {
        gap: 0;
    }

    /* Full Width Search Box below */
    .search-box {
        order: 4;
        flex: 1 1 100%; 
        max-width: 100%;
        margin-top: 10px;
        position: relative;
        z-index: 5;
    }

    .search-box {
     
    padding: 5px 5px 5px 20px;
   
}

    /* 3. Hide entire bottom desktop main-nav */
    .main-nav {
        display: none !important;
    }
}


/* --- Hero Slider Section Layout --- */
.hero-slider-section {
    padding: 30px 0;
    background-color: #ffffff;
}

.hero-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Main Container Frame with Rounded Corners */
.hero-wrapper {
    position: relative;
    background-color: var(--surface-dark); 
    border-radius: 24px;
    overflow: hidden; /* Clips the image to fit the rounded corners */
    padding: 0; /* Clear container-level padding to allow sliding strip execution */

    display: flex;
    align-items: stretch; 
    min-height: 520px;
}

/* Horizontal Runner Strip targeting multiple banners */
.slides-container {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
/* --- Cinematic Sliding Frame Updates --- */

 
/* --- Cinematic Sliding Frame Updates --- */
 

@media screen and (max-width: 992px) {
    .slides-container {
        min-height: auto;
    }
}

/* Base slide default configuration state */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    pointer-events: none;
}

/* Active Slide Properties */
.hero-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 3;
    pointer-events: auto;
}

/* =========================================================================
   🌟 TEXT UDA INDALA PAHALATA WETENA ANIMATION MATRICES (DROPDOWN STAGGER)
   ========================================================================= */

/* Content elements default hidden reset state (Shifted 60px higher up) */
.hero-slide .exclusive-badge,
.hero-slide .hero-title,
.hero-slide .hero-subtitle,
.hero-slide .hero-btn {
    opacity: 0;
    transform: translateY(-60px); /* Uda idala wetenna set kale */
    /* Cubic bezier curve eken dynamic elastic/bounce effect ekak denawa pahalata weddi */
    transition: transform 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.15), opacity 0.85s ease;
}

/* --- Active Slide thule sequentially wetena timeline delay parameters --- */

/* 1. Badge eka mulinma wetei */
.hero-slide.active .exclusive-badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

/* 2. Title eka tikk pahuwela wetei */
.hero-slide.active .hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* 3. Subtitle eka thawa tikk pahuwela wetei */
.hero-slide.active .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

/* 4. Button eka anthimatama pahalata lassanata wetei */
.hero-slide.active .hero-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}


/* --- Right Image Container Layer Operations --- */
.hero-slide .hero-image-container {
    opacity: 0;
    transform: scale(1.08); /* Image eka normal fade-in wela premium style ekata scale wenna built-in */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}

.hero-slide.active .hero-image-container {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

.hero-slide .hero-img {
    transform: scale(1.1);
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active .hero-img {
    transform: scale(1);
}
/* Slide Content Grid Layout */
.hero-slide {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr; /* Allocates space for text and image */
    align-items: center;
    width: 100%;
    min-width: 100%; /* Keeps each individual slide locked to full viewport width */
    gap: 40px;
    padding-left: 80px; /* Shifted from parent wrapper to preserve text indentation cleanly */
    box-sizing: border-box;
}

/* --- Left Column Elements --- */
.hero-content {
    position: relative;
    z-index: 5;
    padding-bottom: 60px; /* Prevents text from overlapping the curve */
}

/* Exclusive Offer Badge */
.exclusive-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.badge-gold {
    background: var(--gradient-gold-linear); 
    color: #000000;
    padding: 3px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.25);
}

/* Hero Section Headline Typography */
.hero-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* Description Text */
.hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 500px;
}

/* Shop Now Premium CTA Button */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gradient-gold-linear); 
    color: #000000; 
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-arrow {
    width: 35px;
    height: 35px;
    background-color: var(--primary-black); 
    color: var(--bright-gold); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* --- Right Column Elements (Product Image Full Size fixed) --- */
.hero-image-container {
    display: flex;
    position: relative;
    height: 100%;
    align-self: stretch; 
    overflow: hidden;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the frame without distortion */
    object-position: center right; /* Focuses the image on the right side */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
@media (min-width:993px){

.hero-image-container{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.hero-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* or center right */
}

/* Brush Overlay */
.hero-image-container::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;      /* Brush width */
    height: 100%;
    z-index: 5;
    pointer-events: none;

    background: var(--surface-dark);

    -webkit-mask: url("brush-mask.png") left center / 260px 100% no-repeat;
mask: url("brush-mask.png") left center / 260px 100% no-repeat;
}

}

/* --- Slider Navigation Arrows --- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.prev-arrow { left: 20px; }
.next-arrow { right: 20px; }
/* --- 🌟 The Magic Custom Smooth Curve Box 🌟 --- */
.slider-footer-curve {
    position: absolute;
    bottom: -8px; /* Adjusts vertical positioning */
    left: 50%;    /* 1. Reset to exactly 50% */
    transform: translateX(-50%); /* 2. Shifts back by half its own width for perfect center */
    width: 260px;
    height: 55px;
    background-color: #ffffff; 
    border-radius: 35px 35px 0 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12; /* Ensures the curve sits on top */
}

.slider-footer-curve::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -35px;
    width: 35px;
    height: 35px;
    background: transparent;
    border-radius: 0 0 35px 0;
    box-shadow: 15px 15px 0 0 #ffffff; 
}

.slider-footer-curve::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -35px;
    width: 35px;
    height: 35px;
    background: transparent;
    border-radius: 0 0 0 35px;
    box-shadow: -15px 15px 0 0 #ffffff;
}

.pagination-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
    cursor: pointer; /* Makes dots look interactive */
}

.dot.active {
    width: 32px;
    border-radius: 6px;
    background-color: var(--dark-gold); 
}


@media screen and (max-width: 992px) {
     
    .hero-container {
        padding: 0px !important; /* Spacing further reduced */
        margin-top: -30px;
    }

    .hero-wrapper {
        padding: 25px 0px 0px 0px !important;   
        border-radius: 0 0 16px 16px;    
        margin: 0;
        min-height: auto; /* Allow heights to match components naturally */
        display: flex;
        flex-direction: column; 
        overflow: hidden;  
    }
    
    .hero-content {
        padding: 0 15px; 
        padding-bottom: 5px;  
    }
    
    .hero-slide {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px; /* Gap inside elements minimized */
        padding-left: 0; 
        padding-bottom: 0 !important; 
        overflow: hidden;  
    }

    /* Scaling down inner badge and subtitle spacings */
    .exclusive-badge {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }

    .badge-gold {
        padding: 2px 8px !important;
        font-size: 10px !important;
    }
    
    .hero-title {
        font-size: 28px; /* Title shrunk from 32px to 24px */
        margin-bottom: 10px !important;
    }

    .hero-subtitle {
        font-size: 14px !important; /* Subtitle text shrunk slightly */
        margin-bottom: 20px !important; /* Shrunk spacing above the button */
        padding: 0 10px;
    }

    .hero-btn {
        padding: 10px 20px !important; /* Shrunk down the main CTA button */
        font-size: 13px !important;
    }

    .btn-arrow {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }
    
     .hero-image-container {
        height: 280px; 
        margin-top: 15px;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 0 !important; /* Image container එකේ යට margin එක zero කළා */
        border-bottom-left-radius: 16px; 
        border-bottom-right-radius: 16px; 
    }
.hero-image-container::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:90px;
    z-index:5;
    pointer-events:none;

    background:url("brush-mask-m.png") top center/100% 100% no-repeat;
}
.hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
    
    
    .slider-arrow {
        display: none;
    }
    
    /* Center Curve container and its pseudo-elements scaled down cleanly */
    .slider-footer-curve {
        left: 50%;
        transform: translateX(-50%);
        width: 180px; /* Width shrunk from 260px to 180px */
        height: 40px;  /* Height shrunk from 55px to 40px */
        border-radius: 30px 30px 0 0;
        bottom: 0px; 
        z-index: 12;
    }

    .slider-footer-curve::before {
        left: -20px;
        width: 20px;
        height: 20px;
        border-radius: 0 0 20px 0;
        box-shadow: 10px 10px 0 0 #ffffff; 
    }

    .slider-footer-curve::after {
        right: -20px;
        width: 20px;
        height: 20px;
        border-radius: 0 0 0 20px;
        box-shadow: -10px 10px 0 0 #ffffff;
    }

    .dot {
        width: 6px; /* Dot scale reduced */
        height: 6px;
    }

    .dot.active {
        width: 24px; /* Shrunk line format */
    }
}


/* --- Features Section Layout --- */
.features-section {
    padding: 40px 0;
    background-color: #ffffff; /* Matches clean white page body context */
}

.features-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns on Desktop */
    gap: 24px;
}

/* Feature Item Card Box Frame */
.feature-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Soft, clean modern grey border */
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover Micro-interactions using premium brand details */
.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-border);
    box-shadow: 0 10px 25px rgba(140, 98, 30, 0.08);
}

/* Circular Frame Container utilizing your extracted gold palette highlight */
.feature-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bright-gold); /* Subtle soft gold glow foundation */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-circle {
    transform: scale(1.05);
}

/* Feature Icon Image constraints */
.feature-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

/* Typography styles matching header setup rules */
.feature-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-black);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.feature-subtitle {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    font-weight: 500;
    max-width: 260px;
}

/* --- Responsive Media Queries --- */

/* Tablet Adjustments */
@media screen and (max-width: 1024px) {
    .features-container {
        grid-template-columns: repeat(2, 1fr); /* Matrix Grid Grid stack (2x2) */
        gap: 20px;
    }
}

/* Small Device/Mobile Adjustments */
@media screen and (max-width: 600px) {
    .features-section {
        padding: 25px 0;
    }
    
    .features-container {
        grid-template-columns: 1fr; /* 1 Column Stack layout */
        gap: 16px;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
    
    .feature-title {
        font-size: 16px;
    }
    
    .feature-subtitle {
        font-size: 13px;
    }
}


/* --- Daily Discounts Section --- */
.discount-products-section {
    padding: 60px 0;
    background-color: #ffffff; /* Page stays clean white background */
}

.section-header {
    margin-bottom: 30px;
}

.section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
}

/* Updated Layout: 5 Cards in 1 Row for Desktop Mode */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; /* Marginally optimized for 5 columns layout comfort */
}

/* Premium Product Card Frame */
.product-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    padding: 16px; /* Optimized padding for tighter 5-card layout space */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden; /* CRITICAL: Keeps the top image box corners perfectly rounded to the card */
}

/* Absolute Corner Discount Ribbon */
.badge-discount {
    position: absolute;
    top: 15px;
    left: 0; /* Aligning perfectly to the left edge like your design image */
    background-color: #CC0022; /* Pure vibrant coupon red */
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px 4px 8px; /* Balanced room for the left and right dathi edge */
    z-index: 5;
    
    /* Box layout frame setup */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    box-sizing: border-box;
}

/* Pseudo-element for the coupon ticket jagged/perforated edge */
.badge-discount::after {
    content: '';
    position: absolute;
    right: -5px; /* Shifts the ticket edge perfectly over the right boundary */
    top: 0;
    width: 6px;
    height: 100%;
    
    /* Generates crisp, realistic round punch holes using transparent overlays */
    background-image: radial-gradient(circle at 6px center, transparent 3px, #CC0022 3px);
    background-size: 6px 6px;
    background-repeat: repeat-y;
}

/* Constrained Canvas for Image Centering - CHANGED FOR FULL BLEED FIT */
.product-image-box {
    width: calc(100% + 32px); /* Pushes the width out to counter the parent padding (16px left + 16px right) */
    margin-left: -16px;       /* Pulls it perfectly flush to the left edge */
    margin-top: -16px;        /* Pulls it perfectly flush to the top edge */
    height: 220px;            /* Balanced ratio for 5 cards row setup */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Light neutral box for contrast */
    overflow: hidden;
    margin-bottom: 15px;
    padding: 0;               /* REMOVED ALL PADDING: Image stretches fully edge-to-edge */
    box-sizing: border-box;
}

/* Forces image to cover or fit container bounds fully */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* CHANGED: 'cover' makes sure your image entirely occupies the box with no gaps */
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Optimized Image Link Setup --- */
.product-img-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Keeps the zoom tightly inside the frame bounds */
}

/* --- Upgraded Modern Image Transition & Base State --- */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Custom cubic-bezier creates a premium, high-end deceleration curve */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    filter: brightness(1);
}

/* --- Premium Hover Animation (Only Triggers on the Image Box) --- */
.product-card:hover .product-img {
    transform: scale(1.08) translateY(-2px); /* Micro zoom + subtle floating elevation */
    filter: brightness(1.04); /* Light premium glow effect */
}

/* Content & Typography Details */
.product-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-size: 14px; /* Scaled slightly down to avoid overcrowding across 5 blocks */
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
    height: 40px; /* Standardizes multi-line text height across grid items */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

/* Star Rating Modules using Brand Golds */
.product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.product-rating .stars {
    color: #f59e0b; /* Amber/Gold Star color */
    font-size: 11px;
    display: flex;
    gap: 2px;
}

.rating-count {
    font-size: 11px;
    color: var(--text-muted);
}

/* Price Display Layout */
.product-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    margin-top: auto; /* Pushes price and actions block down into alignment */
}

.current-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-black);
}

.old-price {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.price-discount-tag {
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}

/* Action Footers Block */
.product-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Heart/Wishlist Round Button Frame */
.wishlist-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.wishlist-btn:hover {
    border-color: #e11d48;
    color: #e11d48;
    background-color: #fff1f2;
}

/* Filled Active state example */
.wishlist-btn.active {
    background-color: #fff1f2;
    border-color: #e11d48;
    color: #e11d48;
}

/* Premium Add to Cart Button utilizing your metallic gradient properties */
.add-to-cart-btn {
    flex-grow: 1;
    height: 38px;
    border: none;
    border-radius: 20px;
    background: var(--surface-dark); /* Sleek obsidian/dark charcoal default foundation */
    color: var(--bright-gold);      /* Intense white-gold contrast text */
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;      /* Forces all text inside the button to uppercase */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

/* Button shifts dynamically to the linear gold gradient on user hover actions */
.add-to-cart-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
 }

 

/* --- Responsive Media Viewport Breaks --- */

@media screen and (max-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr); /* Fits 4 columns smoothly on small desktops */
    }
}

@media screen and (max-width: 1100px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* Fits 3 columns smoothly on large tablets */
    }
}

@media screen and (max-width: 992px) {
    .discount-products-section {
        padding: 40px 0;
    }
    .section-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Handheld viewports drop cleanly into 2 columns */
        gap: 16px;
    }
    .product-card {
        padding: 15px;
    }
    .product-image-box {
        width: calc(100% + 30px); /* Responsive adjustment */
        margin-left: -15px;
        margin-top: -15px;
        height: 160px;
        padding: 0;
    }
    .product-name {
        font-size: 14px;
    }
    .current-price {
        font-size: 16px;
    }
}
/* Mobile Mode Trigger: Smooth Horizontal Slider */
@media screen and (max-width: 576px) {
    .products-grid {
        display: flex !important; 
        flex-direction: row;
        grid-template-columns: none; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        scroll-behavior: smooth;
        gap: 16px;
        
        /* FIXED: Removed negative margins so the container stays within your page padding */
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* FIXED: Added padding to create an equal gap on both sides, 
           while giving the card shadows 15px of breathing room on top and bottom */
        padding: 15px 0px; 
        
        -webkit-overflow-scrolling: touch;
    }
    
    .products-grid::-webkit-scrollbar {
        display: none;
    }
    
    .product-card {
        /* FIXED: Adjusted to 82% to maintain a perfect look with the new spacing layout */
        flex: 0 0 82%; 
        scroll-snap-align: start; 
        padding: 16px;
        overflow: clip; 
    }

    .product-image-box {
        width: calc(100% + 32px); 
        margin-left: -16px;
        margin-top: -16px;
        height: 190px; 
        padding: 0;
    }
    /* Forces image to fit container bounds fully without distorting or oversized cropping */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;  
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    filter: brightness(1);
}


    .product-name {
        font-size: 13px;
        height: 36px;
        margin-bottom: 8px;
    }

    .product-price-row {
        margin-bottom: 12px;
    }

    .product-action-buttons {
        gap: 6px;
    }

    .wishlist-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0; 
    }

    .add-to-cart-btn {
        height: 36px;
        font-size: 11px;
    }
}


/* =======================================================
   BEST SELLING PRODUCTS SECTION (PREMIUM COLD DARK THEME)
   ======================================================= */
.best-selling-section {
    background-color: var(--surface-dark); /* Premium obsidian foundation */
    padding: 0 0 60px 0;
    margin-top: 80px; 
    border-radius: 32px; /* Smooth container layout edge bounds */
    position: relative;
}
/* 🌟 Curved Header Layout Fixes (Image 2 Spec) */
.section-header-curve {
    position: absolute;
    top: -1px; 
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 75px;
    background-color: #ffffff; /* Seamlessly matches main body background */
    border-radius: 0 0 40px 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    text-align: center;
    padding-bottom: 5px;
}

/* Left-side smooth inverted curve adjustment */
.section-header-curve::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0 40px 0 0; /* Updated corner radius to mask correctly */
    box-shadow: 15px -15px 0 0 #ffffff; /* Shifted shadow direction to match image 2 layout */
}

/* Right-side smooth inverted curve adjustment */
.section-header-curve::after {
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 40px 0 0 0; /* Updated corner radius to mask correctly */
    box-shadow: -15px -15px 0 0 #ffffff; /* Shifted shadow direction to match image 2 layout */
}


.header-curve-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.best-selling-title {
    margin-top: -20px;
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
}

.best-selling-subtitle {
    font-size: 15px;
    color: #666666;
    font-weight: 500;
}

.best-selling-subtitle i {
    color: #FF5A00; 
}

/* --- Responsive Slider Row Setup (PC Mode: Forced 1 Row with slider capability) --- */
.best-selling-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
    padding-top: 110px; 
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -webkit-overflow-scrolling: touch;
}

/* Hides scrollbar for Chrome, Safari, and Opera across Desktop Slider Views */
.best-selling-grid::-webkit-scrollbar {
    display: none;
}

/* ====================================================
   📦 PREMIUM PRODUCT CARD FRAME (MATCHED TO HIGHER SPECS)
   ==================================================== */
.premium-product-card {
    /* Fluid calculation: Ensures exactly 5 products fit across the screen with gaps before overflowing */
    flex: 0 0 calc((100% - (20px * 4)) / 5);
    scroll-snap-align: start;
    background-color: #ffffff;
    border: 1px solid var(--border-dark);
    border-radius: 0px; /* Kept perfectly square to match your modern sharp UI layout specs */
    padding: 16px; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden; /* CRITICAL: Crops the absolute full-bleed top image bounds perfectly */
}
 

/* Absolute Corner Ticket Ribbon */
.card-badge-discount {
    position: absolute;
    top: 15px;
    left: 0; 
    background-color: #CC0022; /* Pure voucher coupon crimson */
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 12px 4px 8px; 
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    box-sizing: border-box;
}

.card-badge-discount::after {
    content: '';
    position: absolute;
    right: -5px; 
    top: 0;
    width: 6px;
    height: 100%;
    background-image: radial-gradient(circle at 6px center, transparent 3px, #CC0022 3px);
    background-size: 6px 6px;
    background-repeat: repeat-y;
}

/* 🖼️ CHANGED FOR FULL-BLEED IMAGE CANVASES (100% Edge-to-Edge Style) */
.card-image-box {
    width: calc(100% + 32px); /* Pushes outer edge boundaries flush against card margins */
    margin-left: -16px;       
    margin-top: -16px;        
    height: 220px;            /* Standardized height across uniform grid structures */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb; 
    overflow: hidden;
    margin-bottom: 15px;
    padding: 0;               /* REMOVED PADDING: Fully flush coverage layout style */
    box-sizing: border-box;
}

.card-img-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Stretches and maps packaging seamlessly to the container canvas */
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

/* Premium Hover Micro-Zoom Matrix */
.premium-product-card:hover .card-img {
    transform: scale(1.08) translateY(-2px);
 }

/* --- Internal Core Content Typography --- */
.card-details-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* UNIQUE NEW ELEMENT: Badged Metadata Badges */
.delivery-time {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    background-color: #f3f4f6;
    padding: 3px 8px;
    border-radius: 4px;
    width: max-content;
    margin-bottom: 8px;
}

.delivery-time i {
    margin-right: 4px;
    color: #374151;
}

.store-category {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.card-product-name {
    font-size: 14px; 
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
    height: 40px; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

/* Star Mechanics Setup */
.card-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.card-stars {
    color: #f59e0b; 
    font-size: 11px;
    display: flex;
    gap: 2px;
}

.card-rating-count {
    font-size: 11px;
    color: var(--text-muted);
}

/* Pricing Base Setup */
.card-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    margin-top: auto; /* Aligns all prices evenly along grid base axis lines */
}
/* For the Daily Discounts Section Cart Button */
.add-to-cart-btn:hover .btn-icon-img {
    filter: brightness(0) invert(0);
}

/* For the Best Selling Section Cart Button */
.card-add-cart-btn:hover .btn-icon-img {
    filter: brightness(0) invert(0);
}
.card-current-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-black);
}

.card-old-price {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.card-discount-tag {
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
}

/* Action Trigger Elements */
.card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.card-wishlist-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.card-wishlist-btn:hover {
    border-color: #e11d48;
    color: #e11d48;
    background-color: #fff1f2;
}

/* Standard Metallic Action Footers */
.card-add-cart-btn {
    flex-grow: 1;
    height: 38px;
    border: none;
    border-radius: 20px;
    background: var(--surface-dark); 
    color: var(--bright-gold);      
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;      
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.card-add-cart-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

/* ====================================================
   🚨 UNIQUE ATOMIC STYLES: OUT OF STOCK VARIATIONS
   ==================================================== */
.premium-product-card.out-of-stock {
    border-color: #f3f4f6;
}

/* Hides cart trigger entirely when product state is marked out-of-stock */
.premium-product-card.out-of-stock .card-add-cart-btn {
    display: none;
}

/* Out of Stock Premium Notification Button Style */
.notify-btn {
    flex-grow: 1;
    height: 38px;
    border: none;
    border-radius: 20px;
    background: #CC0022; /* Vibrant accent alert warning red background */
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.notify-btn:hover {
    background: #99001A;
 }

/* Opacity reduction across top-end containers for clear out of stock notification states */
.premium-product-card.out-of-stock .card-image-box {
    opacity: 0.78;
}

/* --- Bottom Controller Navigation Anchors --- */
.grid-nav-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.grid-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    border: none;
    color: var(--primary-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.grid-arrow:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    transform: scale(1.05);
}

/* ====================================================
   📱 VIEWPORT BREAKPOINTS & TOUCH SLIDER SYSTEMS
   ==================================================== */

@media screen and (max-width: 1400px) {
    .premium-product-card {
        flex: 0 0 calc((100% - (20px * 3)) / 4); /* Displays exactly 4 items in a row */
    }
}

@media screen and (max-width: 1100px) {
    .premium-product-card {
        flex: 0 0 calc((100% - (20px * 2)) / 3); /* Displays exactly 3 items in a row */
    }
}

@media screen and (max-width: 992px) {
    .section-header-curve {
        width: 320px;
        height: 65px;
    }
    .best-selling-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 768px) {
    .best-selling-section {
        margin-top: 60px;
        padding-bottom: 40px;
    }
    .best-selling-grid {
        gap: 16px;
        padding-top: 90px;
    }
    .premium-product-card {
        flex: 0 0 calc((100% - 16px) / 2); /* Displays exactly 2 items in a row */
        padding: 15px;
    }
    .card-image-box {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-top: -15px;
        height: 170px;
    }
   .grid-nav-container {
        display: flex; 
        margin-top: 20px;
    }
}
/* Smooth Horizontal Touch Swiper Slider for Mobile Screen Widths */
@media screen and (max-width: 576px) {
    .best-selling-section {
        margin-top: 45px;
        border-radius: 24px;
    }

   .section-header-curve {
        width: 190px; 
        height: 55px; /* Slightly reduced height to match smaller width */
        border-radius: 0 0 20px 20px;
    }

    /* Shrinking the side curves (the "ears") */
    .section-header-curve::before,
    .section-header-curve::after {
        width: 20px;  /* Reduced from 40px */
        height: 20px; /* Reduced from 40px */
    }

    .section-header-curve::before {
        left: -20px; /* Match new width */
        border-radius: 0 20px 0 0;
        box-shadow: 8px -8px 0 0 #ffffff; /* Adjusted shadow offset for 20px size */
    }

    .section-header-curve::after {
        right: -20px; /* Match new width */
        border-radius: 20px 0 0 0;
        box-shadow: -8px -8px 0 0 #ffffff; /* Adjusted shadow offset for 20px size */
    }
 
    
    /* 🌟 Added your provided Title settings here */
    .best-selling-title {
        font-size: 23px; /* Shrunk to fit inside the curve box */
        margin-top: -8px;
        color: var(--primary-black);
        font-weight: 700;
        line-height: 1.1;
    }

    /* 🌟 Section made for text shrinking and forcing line breaks */
    .best-selling-subtitle {
        display: block; /* Made it a block instead of hiding it */
        font-size: 10px;  /* Shrunk to fit inside the smaller curve box */
        color: #666666;
        font-weight: 500;
        line-height: 1.2;
        max-width: 140px; /* Limited width to force the text to line break */
        margin: 0 auto;  /* To align it to the center */
        text-align: center;
        margin-bottom: 20px;
    }

    .best-selling-grid {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 14px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 15px 5px;
        padding-top: 75px; /* Balanced the grid top gap since the curve shrunk further */
        -webkit-overflow-scrolling: touch;
    }

    .best-selling-grid::-webkit-scrollbar {
        display: none;
    }

    /* 🌟 Slightly increased the card width (85% -> 88%) */
    .premium-product-card {
        flex: 0 0 88% !important; 
        scroll-snap-align: start;
        padding: 14px;
        overflow: clip;
    }
.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;  
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}
    .card-image-box {
        width: calc(100% + 28px);
        margin-left: -14px;
        margin-top: -14px;
        height: 190px;
        margin-bottom: 12px;
    }

    .delivery-time {
        font-size: 10px;
        padding: 2px 6px;
        margin-bottom: 6px;
    }

    .card-product-name {
        font-size: 13px;
        height: 36px;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .card-rating-row {
        margin-bottom: 8px;
        gap: 4px;
    }

    .card-price-row {
        margin-bottom: 12px;
        gap: 5px;
    }
    
    .card-current-price {
        font-size: 15px;
    }

    .card-actions {
        gap: 6px;
    }

    .card-wishlist-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .card-add-cart-btn, 
    .notify-btn {
        height: 36px;
        font-size: 11px;
        letter-spacing: 0.3px;
        border-radius: 18px;
    }
}


/* =======================================================
    🛒 PREMIUM CART SLIDE MODAL SYSTEM (EXTRACTED LOGO THEME)
   ======================================================= */

/* High-End Dimmed Overlay Frame */
.cart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.6); /* Translucent Obsidian backdrop */
    backdrop-filter: blur(4px); /* Modern glassmorphism blur hint */
    z-index: 2000;
    display: flex;
    justify-content: flex-end; /* Slides out beautifully from the right side */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Active State Trigger Rule */
.cart-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Inner Paper Panel */
.cart-modal-card {
    width: 100%;
    max-width: 520px; /* Perfect desktop sidebar viewport width configuration */
    height: 100%;
    background-color: #ffffff;
     display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cart-modal-overlay.active .cart-modal-card {
    transform: translateX(0);
}

/* Header Component */
.cart-modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
}

.cart-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.cart-item-count {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Minimalist Circular Dismiss Button */
.cart-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f3f4f6;
    border: none;
    color: var(--primary-black);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cart-modal-close:hover {
    background-color: var(--primary-black);
    color: var(--bright-gold);
}

/* Scrollable Container Elements Canvas */
.cart-modal-body {
    flex-grow: 1;
    padding: 24px 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Custom Clean Minimalist Webkit Scrollbar System */
.cart-modal-body::-webkit-scrollbar {
    width: 6px;
}
.cart-modal-body::-webkit-scrollbar-track {
    background: #f9fafb;
}
.cart-modal-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}
.cart-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-gold-muted);
}

/* --- Internal Core Product Row Cards --- */
.cart-item-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px; /* Elegant matched rounding frames */
    padding: 16px;
    display: flex;
    gap: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cart-item-card:hover {
    border-color: var(--gold-border);
 }

/* Left Image Box Framing */
.cart-item-image-box {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background-color: #f9fafb;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Details Canvas Layout */
.cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Top Action Edit/Delete Triggers */
.cart-item-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.item-action-btn {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.item-action-btn.edit:hover { color: var(--gold-border); }
.item-action-btn.delete:hover { color: #dc2626; }

/* Meta Attributes Text description tags */
.cart-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Footer elements aligned inside the component block */
.cart-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.cart-item-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-current-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-black);
}

.cart-old-price {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}
/* Custom Redirection Wrapper for Cart Drawer Images */
/* 1. Base Class: Define the permanent transition here */
.cart-item-image-link {
    display: inline-block;
    text-decoration: none;
    flex-shrink: 0;
    /* Optional: Prevents the image from overflowing its container if it scales up too much */
    overflow: hidden; 
}

/* 2. Target the image directly in its normal state */
.cart-item-image-link .cart-item-img {
    display: block;
    width: 100%;
    height: auto;
    
    /* Hardware acceleration: forces the browser to use the GPU for flawless rendering */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Transition lives here so it animates smoothly both ON and OFF hover */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Hover State: Only dictate the final transform value */
.cart-item-image-link:hover .cart-item-img {
    transform: scale(1.03); /* Bumped slightly to 1.03 for a more visible but premium effect */
}
/* --- Rounded Interactive Quantity Box --- */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 4px 10px;
    gap: 12px;
}

.qty-btn {
    border: none;
    background: transparent;
    font-size: 11px;
    color: #4b5563;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.qty-btn:hover {
    color: var(--gold-border);
}

.qty-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-black);
    min-width: 12px;
    text-align: center;
}

/* --- 🚨 OUT OF STOCK ATOMIC STYLES OVERRIDES --- */
.cart-item-card.item-out-of-stock {
    background-color: #fcfcfc;
    border-color: #f3f4f6;
}

.cart-item-card.item-out-of-stock .cart-item-image-box {
    opacity: 0.75;
}

/* Signature Ticket Jagged Ribbon applied natively to the side profile drawer */
.cart-badge-out {
    position: absolute;
    bottom: 12px;
    left: 0;
    background-color: #CC0022;
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px 3px 5px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    height: 16px;
    box-sizing: border-box;
}

.cart-badge-out::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 0;
    width: 5px;
    height: 100%;
    background-image: radial-gradient(circle at 5px center, transparent 2px, #CC0022 2px);
    background-size: 4px 4px;
    background-repeat: repeat-y;
}

/* --- Sticky Bottom Checkout Canvas Base --- */
.cart-modal-footer {
    padding: 24px 30px 35px 30px;
    border-top: 1px solid #e5e7eb;
    background-color: #ffffff;
}

.subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.subtotal-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-black);
}

.subtotal-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-black);
}

/* Action Call to buttons rows setup */
.cart-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-btn {
    width: 100%;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* View Cart Minimalist button style mapping */
.view-cart-btn {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: var(--primary-black);
}

.view-cart-btn:hover {
    border-color: var(--gold-border);
    color: var(--gold-border);
    background-color: #fffdf9;
}

/* Premium Main Checkout action button map */
.checkout-btn {
    background-color: var(--surface-dark);
    color: var(--bright-gold);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.checkout-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

/* --- 📱 Viewport Breakpoints Adaptive Optimization Rules --- */
/* --- 📱 Viewport Breakpoints Adaptive Optimization Rules --- */
@media screen and (max-width: 576px) {
    .cart-modal-card {
        max-width: 100%;
    }
    
    .cart-modal-header, 
    .cart-modal-body, 
    .cart-modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* --- 🛒 Mobile Vertical Stack Card Layout --- */
    .cart-item-card {
        gap: 12px;
        padding: 12px;
        align-items: flex-start; /* Items මුල සිට පෙළගැස්වීම */
    }

    .cart-item-image-box {
        width: 85px;
        height: 85px;
        border-radius: 10px;
    }

    .cart-item-details {
        display: flex;
        flex-direction: column;
        gap: 4px; /* හැම පේළියක් අතරම සියුම් පරතරයක් */
    }

    .cart-item-row {
        align-items: flex-start;
        gap: 6px;
    }

    .cart-item-name {
        font-size: 13px;
        line-height: 1.3;
    }

    .cart-item-meta {
        margin-top: 2px;
        margin-bottom: 4px;
        font-size: 11px;
    }

    /* Footer එක Column එකක් කර සියල්ල එකක් යට එකක් හැදුවා */
    .cart-item-footer {
        display: flex;
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 8px; 
        margin-top: 4px;
        width: 100%;
    }

    /* Price Row එකත් පේළි දෙකකට වෙන් කළා */
    .cart-item-price {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        gap: 2px;
    }

    /* 1. Current Price */
    .cart-current-price {
        font-size: 14px;
        font-weight: 700;
    }

    /* 2. Old / Discounted Price Below */
    .cart-old-price {
        font-size: 11px;
        margin-left: 0; /* පැත්තෙන් තිබූ පරතරය ඉවත් කළා */
    }

    /* 3. Quantity Selector Below Price */
    .quantity-selector {
        padding: 3px 10px;
        gap: 10px;
        margin-top: 2px;
        align-self: flex-start; /* වම් පැත්තටම ලොක් කිරීම */
    }

    .qty-btn {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .qty-value {
        font-size: 12px;
    }

    /* --- Footer Button View tweaks --- */
    .cart-modal-footer {
        padding-top: 15px;
        padding-bottom: 25px;
    }

    .modal-btn {
        height: 45px;
        font-size: 13px;
    }
}

 


/* --- Shop by Category Section --- */
.shop-by-category-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.section-header {
    margin-bottom: 30px;
}

.section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 15px;
    color: #666666;
    font-weight: 500;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-subtitle i {
    color: #FF5A00;
    font-size: 14px;
    animation: pulse-fire 1.5s infinite;
}

@keyframes pulse-fire {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-8px);
}

.category-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e7eb;
    border-radius: 100%;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
    margin-bottom: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover .category-img-box {
    border-color: var(--accent-gold);
 }

.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.category-card:hover .category-img {
    transform: scale(1.1);
}

.category-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-black);
    text-align: center;
}

/* --- Responsive Adaptations --- */

@media screen and (max-width: 1200px) {
    .category-grid { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (max-width: 992px) {
    .category-grid { grid-template-columns: repeat(4, 1fr); }
    .section-title { font-size: 22px; }
}

@media screen and (max-width: 768px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .section-title { font-size: 20px; }
    .category-name { font-size: 12px; }
}
@media screen and (max-width: 576px) {
    .shop-by-category-section { padding: 40px 0; }
    
    .category-grid { 
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px; 
        margin-top: 20px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-grid::-webkit-scrollbar {
        display: none;
    }

    .category-card { 
        /* mehe thiyena 130px kiyana eka oyata ona widihata wadi karanna */
        flex: 0 0 130px; 
        min-width: 130px; 
    }
    
    .category-img-box { border-radius: 100%; }
    .category-name { font-size: 11px; font-weight: 500; }
}

/* ==========================================================================
   📦 ARCHITECTURAL LAYOUT STYLES FOR THE PREMIUM INVERTED CURVE FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--surface-dark); /* Premium dark obsidian base matching design rules */
    position: relative;
    padding: 0;
    margin-top: 120px; /* Space allowance for the floating top container layer */
    font-family: 'Raleway', sans-serif;
    color: #ffffff;
 }

/* --------------------------------------------------------------------------
   🌟 1. NEWSLETTER FLOATING MODULE WITH REVERSE INVERTED MASKING
   -------------------------------------------------------------------------- */
.footer-newsletter-wrapper {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 950px;
    z-index: 30;
    padding: 0 20px;
}
.newsletter-curve-box {
    background-color: #ffffff; /* Clean white backdrop layer cutout */
    border-radius: 45px 45px 0 0; /* Udu peththa vitharak soft curve kala (image eke widiyata) */
    padding: 40px 60px;
    text-align: center;
    position: relative;
    border-radius: 100px;
}
/* --- Footer Logo Image Handling --- */
.branding-col .footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 60px; /* Reserves clear layout space to match branding container rules */
}

.footer-logo-img {
    height: 75px; /* Perfect scale size to stay clear and legible over dark background surfaces */
    width: auto;
    display: block;
    object-fit: contain;
}

/* --- Mobile Breakpoint Custom Fit --- */
@media screen and (max-width: 768px) {
    .branding-col .footer-logo {
        justify-content: center; /* Enforces 100% mathematical center axis alignment on mobile */
        margin-bottom: 15px;
        height: auto;
    }

    .footer-logo-img {
        height: 65px; /* Clean responsive scaling down format for tighter display viewports */
    }
}
/* High-End Organic Smooth Curves Layer ("The Left Ear") */
.newsletter-curve-box::before {
    content: "";
    position: absolute;
    top: 112px;          /* Top border ekatama set kala */
    left: -48px;     /* Box eken eliyata thallu kala */
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 0 40px 0 0; /* Top-right corner eka curve kala */
    box-shadow: 15px -15px 0 0 #ffffff; /* Shadow eka top-right ekata push karala curve eka left paththata gaththa */
}

/* High-End Organic Smooth Curves Layer ("The Right Ear") */
.newsletter-curve-box::after {
    content: "";
    position: absolute;
    top: 112px;          /* Top border ekatama set kala */
    right: -48px;    /* Box eken eliyata thallu kala */
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 40px 0 0 0; /* Top-left corner eka curve kala */
    box-shadow: -15px -15px 0 0 #ffffff; /* Shadow eka top-left ekata push karala curve eka right paththata gaththa */
}

.newsletter-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.newsletter-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 25px;
}

/* Precision Inner Input Alignment */
.newsletter-form {
    display: flex;
    align-items: center;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 30px;
    padding: 6px 6px 6px 22px;
    max-width: 580px;
    margin: 0 auto;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-form:focus-within {
    border-color: var(--gold-border);
    box-shadow: 0 0 15px rgba(163, 127, 51, 0.12);
}

.newsletter-input-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.newsletter-input-field .input-icon {
    color: var(--text-muted);
    font-size: 16px;
}

.newsletter-input-field input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--primary-black);
}

.newsletter-input-field input::placeholder {
    color: #9ca3af;
}

.newsletter-btn-submit {
    background-color:var(--surface-dark); /* Clean teal core matching uploaded sample source accent */
    color: #ffffff;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: 500;font-family: 'Raleway', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.newsletter-btn-submit:hover {
    background-color: var(--primary-black);
    transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   🔗 2. NAVIGATION COLS GRID SPECIFICATIONS
   -------------------------------------------------------------------------- */
.footer-main-container {
    padding-top: 180px; /* Offset spacing clearance beneath the floating input block */
    padding-bottom: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 0.9fr) 1.1fr; /* Custom explicit width balance ratios */
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.col-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bright-gold); /* High luxury contrast definition hook */
    margin-bottom: 25px;
    position: relative;
}

/* Subtle separator lines below titles */
.col-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--gradient-gold-linear);
}

/* Branding Column Details */
.branding-col .footer-logo {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.branding-col .logo-text-highlight {
    color: var(--accent-gold);
}

.branding-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Minimalist Circular Social Blocks */
.social-media-links {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.social-media-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #1e1e1e;
    border: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.social-media-links a:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    transform: translateY(-3px);
    border-color: transparent;
}

/* App Placement Rules */
.app-downloads-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gold-muted);
    text-transform: uppercase;
}

.app-buttons-row {
    display: flex;
    gap: 10px;
}

.app-btn img {
    height: 38px;
    width: auto;
    display: block;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.app-btn:hover img {
    transform: translateY(-2px);
}

/* Links Columns Stack */
.footer-links-stack {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links-stack li a {
    font-size: 14px;
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.footer-links-stack li a .link-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-links-stack li a:hover {
    color: var(--bright-gold);
}

.footer-links-stack li a:hover .link-arrow {
    color: var(--bright-gold);
    transform: translateX(4px);
}

/* Contact Column Framework */
.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 25px;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(163, 127, 51, 0.3);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-text {
    font-size: 14px;
    color: #cccccc;
    line-height: 1.4;
    font-weight: 500;
}

/* Trust Badges Matrix */
.payment-methods-gateways {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-card-badge {
    height: 28px;
    width: 44px;
    background-color: #1e1e1e;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #e5e7eb;
}

/* --------------------------------------------------------------------------
   🔒 3. BASE COPYRIGHT LAYOUT CONFIGURATION WITH INVERTED ARC ARCHITECTURE
   -------------------------------------------------------------------------- */
.footer-copyright-anchor {
    position: relative;
    width: 100%;
    background-color: var(--primary-black); /* Darker split contrast edge anchor */
    border-top: 1px solid var(--border-dark);
    display: flex;
    justify-content: center;
}

.copyright-curve-box {
    position: relative;
    top: -1px;
    width: 520px;
    height: 60px;
    background-color: var(--surface-dark); /* Renders organic connection blend */
    border-radius: 0 0 35px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    margin-bottom: 10px;
}

/* Inverted curves for copyright block container "ears" */
.copyright-curve-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35px;
    width: 35px;
    height: 35px;
    background: transparent;
    border-radius: 0 35px 0 0;
    box-shadow: 12px -12px 0 0 var(--surface-dark);
}

.copyright-curve-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: -35px;
    width: 35px;
    height: 35px;
    background: transparent;
    border-radius: 35px 0 0 0;
    box-shadow: -12px -12px 0 0 var(--surface-dark);
}

.copyright-text {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.gold-text-accent {
    color: var(--text-gold-muted);
    font-weight: 600;
}

/* Floating Action Trigger Settings */
.scroll-to-top-trigger {
    position: absolute;
    bottom: 45px;
    right: 40px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-gold-linear);
    color: #000000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    z-index: 40;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.scroll-to-top-trigger:hover {
    transform: translateY(-4px);
    filter: brightness(1.1);
}
 
/* ==========================================================================
   📱 MOBILE RESPONSIVE ADAPTATIONS FOR THE SITE FOOTER (MAX-WIDTH: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    .site-footer {
        margin-top: 140px; /* Space allowance for the mobile floating layer */
    }

    /* --------------------------------------------------------------------------
       🌟 1. FLOATING NEWSLETTER BOX MOBILE ADAPTATIONS (WITH PRESERVED INVERTED CURVES)
       -------------------------------------------------------------------------- */
    .footer-newsletter-wrapper {
        padding: 0 35px; /* Space for the external ears to prevent screen clipping */
        width: 100%;
        position: absolute !important;
        top: 0 !important; /* Locks the wrapper base exactly on the footer's top edge line */
        left: 50% !important;
        transform: translate(-50%, -50%) !important; /* Keeps the entire module centered vertically on the axis */
        box-sizing: border-box;
        z-index: 30;
    }

    .newsletter-curve-box {
        padding: 25px 20px;
        border-radius: 60px; /* Pill shape design preserved cleanly */
        text-align: center;
        width: 100%;
        position: relative !important;
        box-sizing: border-box;
        background-color: #ffffff;
    }

    /* High-End Organic Smooth Curves Layer ("The Left Ear") - ABSOLUTELY FIXED TO AXIS */
    .newsletter-curve-box::before {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        
        /* Box එක උස වුණත්, කොට වුණත් හැමවෙලේම footer එකේ top edge එකටම lock කරන මැජික් එක */
        top: 55% !important; 
        transform: translateY(-50%) !important; /* Vertical center misalignment fix */
        bottom: auto !important;
        
        left: -25px !important; /* Perfect flush side touch with zero gaps */
        width: 25px !important;
        height: 25px !important;
        background: transparent !important;
        border-radius: 0 20px 0 0 !important;
        box-shadow: 6px -6px 0 0 #ffffff !important; /* Sharp mask alignment overlay */
    }

    /* High-End Organic Smooth Curves Layer ("The Right Ear") - ABSOLUTELY FIXED TO AXIS */
    .newsletter-curve-box::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        
        /* Box එක උස වුණත්, කොට වුණත් හැමවෙලේම footer එකේ top edge එකටම lock කරන මැජික් එක */
        top: 55% !important;
        transform: translateY(-50%) !important; /* Vertical center misalignment fix */
        bottom: auto !important;
        
        right: -25px !important; /* Perfect flush side touch with zero gaps */
        width: 25px !important;
        height: 25px !important;
        background: transparent !important;
        border-radius: 20px 0 0 0 !important;
        box-shadow: -6px -6px 0 0 #ffffff !important; /* Sharp mask alignment overlay */
    }
    
    .newsletter-title {
        font-size: 20px; /* Scaled down for mobile screen display comfort */
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .newsletter-subtitle {
        font-size: 12px;
        margin-bottom: 18px;
        padding: 0 5px;
    }

    /* Re-architecting input row into vertical block alignment */
    .newsletter-form {
        flex-direction: column;
        background-color: transparent;
        border: none;
        padding: 0;
        gap: 10px;
        width: 100%;
    }

    .newsletter-input-field {
        background-color: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 30px;
        padding: 12px 20px;
        width: 100%;
    }

    .newsletter-btn-submit {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        border-radius: 30px;
        box-shadow: 0 4px 12px rgba(0, 122, 120, 0.2);
    }

    /* --------------------------------------------------------------------------
       🔗 2. MAIN COLS INDEX GRID SYSTEM BREAKDOWN (CENTERED)
       -------------------------------------------------------------------------- */
    .footer-main-container {
        padding-top: 140px; /* Spacing clearance underneath stacked mobile wrapper */
        padding-bottom: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr !important; /* Forces layout safely into single row blocks */
        gap: 35px;
        text-align: center;
    }

    .footer-col {
        align-items: center; /* Centers block elements across flex columns */
    }

    .col-title {
        font-size: 16px;
        margin-bottom: 18px;
        display: inline-block;
        width: max-content;
    }

    .col-title::after {
        bottom: -6px;
        width: 28px;
        left: 50%;
        transform: translateX(-50%); /* Perfectly centers the gold accent lines */
    }

    /* Branding Column Adjustments */
    .branding-col {
        align-items: center;
    }

    .branding-col .footer-logo {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .branding-text {
        font-size: 13px;
        margin-bottom: 20px;
        max-width: 450px;
    }

    .social-media-links {
        margin-bottom: 25px;
        gap: 10px;
        justify-content: center;
    }

    .app-downloads-box {
        align-items: center;
    }

    .app-buttons-row {
        justify-content: center;
        gap: 8px;
    }

    .app-btn img {
        height: 34px;
    }

    /* Navigation Links Stack */
    .footer-links-stack {
        gap: 12px;
        align-items: center;
    }

    .footer-links-stack li a {
        font-size: 13px;
        justify-content: center;
    }

    /* Contact Block Frame */
    .contact-info-list {
        gap: 14px;
        margin-bottom: 20px;
        align-items: center;
    }

    .contact-info-list li {
        flex-direction: column; /* Stacks the round icon badge above the text info */
        align-items: center;
        gap: 6px;
        text-align: center;
    }

    .info-icon-circle {
        margin-top: 0;
    }

    .info-text {
        font-size: 13px;
        max-width: 300px;
    }

    .payment-methods-gateways {
        gap: 6px;
        justify-content: center;
    }

    /* --------------------------------------------------------------------------
       🔒 3. ANCHOR COPYRIGHT ARCHITECTURE MOBILE SHIFT (CENTERED)
       -------------------------------------------------------------------------- */
   /* --------------------------------------------------------------------------
       🔒 3. ANCHOR COPYRIGHT ARCHITECTURE MOBILE SHIFT (PERFECTLY FIXED)
       -------------------------------------------------------------------------- */
   /* --------------------------------------------------------------------------
       🔒 3. ANCHOR COPYRIGHT ARCHITECTURE MOBILE SHIFT (PERFECTLY FIXED FOR ALL SCREENS)
       -------------------------------------------------------------------------- */
    .footer-copyright-anchor {
        position: relative !important;
        padding: 0 25px !important; /* Extremely critical: Creates safety margin for wings on small screens */
        background-color: var(--primary-black);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .copyright-curve-box {
        position: relative !important;
        top: 0 !important;
        width: 100%;
        /* Screen එක 320px හෝ ඊට අඩු වෙද්දී wings වලට ඉඩ තියලා box එක auto shrink වෙනවා */
        max-width: 290px; 
        height: 50px;
        background-color: var(--surface-dark) !important;
        border-radius: 0 0 46px 46px !important; /* Scaled down slightly for tight screens */
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10 !important;
        box-sizing: border-box;        margin-bottom: 10px;

    }

    /* වම් පැත්තේ Inverted Curve (Wing) */
    .copyright-curve-box::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: -16px !important; /* Responsive-ready offset matching border-radius */
        width: 16px !important;
        height: 16px !important;
        background: transparent !important;
        border-radius: 0 16px 0 0 !important;
        box-shadow: 5px -5px 0 0 var(--surface-dark) !important; /* Micro-tuned smooth shadow */
        display: block !important;
        z-index: 5 !important;
    }

    /* දකුණු පැත්තේ Inverted Curve (Wing) */
    .copyright-curve-box::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: -16px !important; /* Responsive-ready offset matching border-radius */
        width: 16px !important;
        height: 16px !important;
        background: transparent !important;
        border-radius: 16px 0 0 0 !important;
        box-shadow: -5px -5px 0 0 var(--surface-dark) !important; /* Micro-tuned smooth shadow */
        display: block !important;
        z-index: 5 !important;
    }

    .copyright-text {
        font-size: 10px !important; /* Small screens වලදී text එක overflow නොවෙන්න size එක පොඩ්ඩක් අඩු කලා */
        line-height: 1.3;
        text-align: center;
        padding: 0 8px;
        margin: 0;
        color: var(--text-muted);
        white-space: nowrap; /* Text එක පේළි දෙකකට කැඩිලා කැත නොවෙන්න */
    }

   .copyright-text {
        font-size: 11px !important; /* Highly readable font size */
        line-height: 1.4 !important; /* Breathing room between the two lines */
        text-align: center;
        padding: 0;
        margin: 0;
        color: var(--text-muted);
        white-space: normal !important; /* Forces text to break into lines instead of forcing single line */
        word-wrap: break-word;
    }

    /* Floating Action Trigger Settings */
    .scroll-to-top-trigger {
        bottom: 80px;
        right: 20px;
        width: 38px;
        height: 38px;
        font-size: 12px;
    }
}



/* =======================================================
    Premium Promo Banners Section (Obsidian & Gold Theme)
   ======================================================= */
.promo-banners-section {
    padding: 40px 0;
    background-color: #ffffff; /* Stays clean white on core page context */
}

.promo-banners-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns on Desktop */
    gap: 24px;
}

/* Premium Card Frame using your --surface-dark background */
.promo-banner-card {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 24px; /* Matches your premium rounded slider/footer setup */
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 280px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Luxury hover effect */
.promo-banner-card:hover {
     border-color: var(--gold-border);
 }

/* Content Area */
.promo-banner-content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    position: relative;
}

.promo-banner-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.promo-banner-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65); /* Elegant subdued white text overlay */
    line-height: 1.5;
    margin-bottom: 25px;
    max-width: 220px;
}

/* Shop Now Button matching your UI layout preferences */
.promo-banner-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06); /* Soft glassmorphism background structure */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Micro-arrow icon frame background */
.promo-btn-arrow {
    width: 20px;
    height: 20px;
    background-color: var(--bright-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: transform 0.3s ease;
}

/* Hover updates - transforms the pill button beautifully into your Gold Gradient */
.promo-banner-card:hover .promo-banner-btn {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
 }

.promo-banner-card:hover .promo-btn-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
    transform: rotate(45deg); /* Dynamic subtle click/hover detail */
}

/* Product Floating Canvas Execution */
.promo-banner-image {
    flex: 1 1 45%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.promo-banner-image img {
    max-width: 130%; /* Extends outside bounding boxes slightly like the image asset framework */
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); /* Deep organic shadows behind standard products */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Dynamic product image pop response on container selection */
.promo-banner-card:hover .promo-banner-image img {
    transform: scale(1.06) translateX(4px);
}

/* =======================================================
    📱 RESPONSIVE ADAPTATIONS (MOBILE HORIZONTAL SLIDER)
   ======================================================= */

/* Tablet Viewports */
@media screen and (max-width: 1024px) {
    .promo-banners-section {
        padding: 40px 24px;
    }
    .promo-banners-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Handheld Viewports & Small Mobile Screens (Sliding Mode) */
@media screen and (max-width: 768px) {
    .promo-banners-section {
        padding: 30px 0; /* Left/right padding removed here so the track can touch the screen edges beautifully */
    }

    /* Converted the container into a Flexbox row and enabled horizontal scrolling */
    .promo-banners-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Keep all items in a single line */
        gap: 16px;
        padding: 0 16px !important; /* Internal padding added to keep items from clipping at the screen edges */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Smoothly snaps cards into place while scrolling */
        -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
    }
    
    /* Hide the scrollbar for a clean, premium look */
    .promo-banners-container::-webkit-scrollbar {
        display: none;
    }

    /* Set a fixed width for each card to prevent shrinking during horizontal scroll */
    .promo-banner-card {
        flex: 0 0 85% !important; /* Card occupies 85% of screen width (leaving a peek of the next card) */
        padding: 30px 20px;
        min-height: auto;
        flex-direction: column !important; /* Centered image with the button underneath layout */
        align-items: center !important;
        text-align: center !important;
        gap: 15px;
        scroll-snap-align: center; /* Snaps the card perfectly to the center when scrolling stops */
    }

    .promo-banner-content {
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .promo-banner-title {
        font-size: 20px;
    }

    .promo-banner-subtitle {
        margin-bottom: 15px;
        max-width: 100%;
    }

    .promo-banner-btn {
        align-self: center !important;
        order: 3;
        margin-top: 15px;
    }

    .promo-banner-image {
        flex: 1 1 100%;
        width: 100%;
        height: 150px;
        order: 2;
    }
    
    .promo-banner-image img {
        max-width: 100%;
        transform: none !important;
    }
}

/* Extra Small Screens Mobile Tweaks */
@media screen and (max-width: 576px) {
    .promo-banners-section {
        padding: 25px 0;
    }

    .promo-banners-container {
        gap: 12px;
        padding: 0 14px !important;
    }

    .promo-banner-card {
        flex: 0 0 88% !important; /* Slightly adjusted to fit perfectly on very small screens */
        border-radius: 16px;
        padding: 25px 16px;
    }
    
    .promo-banner-image {
        height: 130px;
    }
}



/* =======================================================
    Premium Latest Blog Section (Clean White & Gold Theme)
   ======================================================= */
.latest-blog-section {
    padding: 60px 0;
    background-color: #ffffff; /* Explicitly white canvas layout */
}

/* Header Flex Row Alignment */
.blog-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.blog-section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
}

/* Luxury Text Link Button Hook */
.view-all-blog-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-black);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.view-all-blog-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.view-all-blog-btn:hover {
    color: var(--gold-border);
}

.view-all-blog-btn:hover i {
    transform: translateX(4px);
}

/* Grid Matrix Setup: 4 Cards per Row on Wide Viewports */
.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Premium Card Structural Framework */
.blog-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px; /* Smooth card rounding matches the dashboard/modal spec */
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
}

.blog-card:hover {
     border-color: var(--gold-border);
 }

/* Image Wrapper canvas bounds */
.blog-image-box {
    width: 100%;
    height: 200px;
    border-radius: 14px; /* Slightly inner-nested roundness radius */
    overflow: hidden;
    background-color: #f9fafb;
    margin-bottom: 16px;
}

.blog-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-card:hover .blog-img {
    transform: scale(1.06);
}

/* Inner Details Block */
.blog-details-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Subdued luxury Category Label Badge */
.blog-category-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--dark-gold);
    background-color: rgba(212, 175, 55, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    width: max-content;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}

/* Date & Comment Meta Icons Rows */
.blog-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.blog-meta-item {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.blog-meta-item i {
    font-size: 12px;
    color: #9ca3af;
}

/* Typography Headings Controls */
.blog-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-black);
    line-height: 1.4;
    margin-bottom: 8px;
    height: 42px; /* Fixed multi-line limit alignment grid axis points */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-title a {
    transition: color 0.3s ease;
}

.blog-card:hover .blog-title a {
    color: var(--dark-gold);
}

/* Short Excerpt description layouts */
.blog-excerpt {
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 20px;
    height: 58px; /* 3-lines clamp setup execution bounds */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Obsidian Premium CTA Button matching your custom UI standards */
.blog-readmore-btn {
    margin-top: auto; /* Pushes button beautifully down flush along row limits */
    height: 38px;
    width: 100%;
    border: none;
    border-radius: 20px;
    background: var(--surface-dark); 
    color: var(--bright-gold);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.blog-btn-arrow {
    width: 20px;
    height: 20px;
    background-color: var(--primary-black);
    color: var(--bright-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: transform 0.3s ease;
}

/* Hover Button Gradient System Adaptations */
.blog-readmore-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

.blog-readmore-btn:hover .blog-btn-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
}

/* =======================================================
    📱 RESPONSIVE MEDIA VIEWPORT BREAKPOINTS
   ======================================================= */

@media screen and (max-width: 1200px) {
    .blog-cards-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cards layout grid framework drop */
    }
}

@media screen and (max-width: 992px) {
    .latest-blog-section {
        padding: 40px 0;
    }
    .blog-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet drops seamlessly into 2 columns */
        gap: 20px;
    }
    .blog-section-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 768px) {
    .blog-cards-grid {
        gap: 16px;
    }
    .blog-card {
        padding: 14px;
    }
    .blog-image-box {
        height: 160px;
    }
    .blog-title {
        font-size: 14px;
    }
}

/* Mobile Screen Smooth Horizontal Touch Swiper Slider Engine */
@media screen and (max-width: 576px) {
    .blog-section-header {
        margin-bottom: 20px;
    }
    
    .blog-cards-grid {
        display: flex !important;
        flex-direction: row;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }

    .blog-cards-grid::-webkit-scrollbar {
        display: none; /* Clear invisible sliding runway path tracks */
    }

    .blog-card {
        flex: 0 0 85%; /* Perfectly matches standard mobile overflow screen proportions */
        scroll-snap-align: start;
        border-radius: 16px;
    }

    .blog-image-box {
        height: 170px;
    }
}


/* =======================================================
    Premium Dual Highlight Banners (Obsidian Dark Theme)
   ======================================================= */
.highlight-banners-section {
    padding: 40px 0;
    background-color: #ffffff; /* Page canvas remains pure white */
}

/* 2-Column Layout for Desktop Grid Grid Systems */
.highlight-banners-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Base Card Configuration featuring your luxury dark surfaces */
.highlight-banner-card {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 28px; /* High-end elegant rounded outline structure */
    padding: 50px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 340px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.highlight-banner-card:hover {
     border-color: var(--gold-border);
 }

/* Left Content Column Context */
.highlight-banner-content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    position: relative;
}

.highlight-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gold-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.highlight-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.highlight-offer {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-bottom: 30px;
}

.gold-bold {
    color: var(--bright-gold);
    font-weight: 700;
}

/* Micro glassmorphic pill button configuration */
.highlight-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Circular inner icon frame setup */
.highlight-arrow {
    width: 22px;
    height: 22px;
    background-color: var(--bright-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* Premium Component Hover Transformation Rules */
.highlight-banner-card:hover .highlight-btn {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
 }

.highlight-banner-card:hover .highlight-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
    transform: rotate(45deg);
}

/* Right Side Image Box Frame */
.highlight-image-box {
    flex: 1 1 45%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* Product image overlaps container margins seamlessly */
.floating-product-img {
    max-width: 140%; 
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.highlight-banner-card:hover .floating-product-img {
    transform: scale(1.05) translateY(-4px) translateX(2px);
}
/* =======================================================
    📱 RESPONSIVE BREAKPOINTS ARCHITECTURE (FIXED VERTICAL MOBILE STACK)
   ======================================================= */

/* Tablet & Smaller Desktop Adjustments */
@media screen and (max-width: 992px) {
    .highlight-banners-section {
        padding: 40px 24px;
    }

    .highlight-banner-card {
        padding: 40px 30px;
        min-height: 300px;
    }

    .highlight-title {
        font-size: 24px;
    }
    
    .floating-product-img {
        max-width: 120%;
    }
}

/* Handheld Viewports: Collapse Grid into Vertical Columns Stack */
@media screen and (max-width: 768px) {
    .highlight-banners-section {
        padding: 30px 16px;
    }

    .highlight-banners-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .highlight-banner-card {
        padding: 40px 24px;
        flex: none !important;
    }
}/* Small Screens Mobile Tweaks (Image Center & Button at Bottom) */
@media screen and (max-width: 576px) {
    .highlight-banners-section {
        padding: 25px 14px;
    }

    .highlight-banners-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px;
        padding: 0;
        overflow-x: visible !important;
    }

    /* Convert card to a Flex Column to stack content vertically */
    .highlight-banner-card {
        border-radius: 20px;
        padding: 30px 20px;
        min-height: auto; /* Setting auto allows height to adjust based on content */
        flex-direction: column !important; 
        align-items: center !important;
        text-align: center !important; /* Center-align all text */
        gap: 20px;
    }

    /* Used the flex order property to push the button inside the content area to the absolute bottom */
    .highlight-banner-content {
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the content */
    }

    .highlight-title {
        font-size: 22px;
    }

    .highlight-offer {
        margin-bottom: 15px; /* Slightly reduced margin to bring it closer to the image */
    }

    /* Place the button at the very end of the content block (Order 3) */
    .highlight-btn {
        align-self: center !important; /* Center-align the button */
        order: 3; 
        margin-top: 20px; /* Add spacing below the image */
    }

    /* Position the Image Box below Title/Offer and above the button (Order 2) */
    .highlight-image-box {
        flex: 1 1 100%;
        width: 100%;
        height: 160px;
        order: 2; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Set bounds to perfectly center the image */
    .floating-product-img {
        max-width: 100%;
        max-height: 100%;
        transform: none !important; /* Removed desktop hover transformations for mobile layout */
    }

    /* Prevent excessive image bouncing on hover on mobile devices */
    .highlight-banner-card:hover .floating-product-img {
        transform: scale(1.02) !important;
    }
}

/* =======================================================
    Premium Q&A / Accordion Section (Clean White & Gold)
   ======================================================= */
.qa-section {
    padding: 60px 0;
    background-color: #ffffff; /* Clean white base page canvas context */
}

.qa-header {
    text-align: center;
    margin-bottom: 45px;
}

.qa-main-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.qa-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Accordion Wrapper */
.qa-wrapper {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual Accordion Row Block */
.qa-item {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px; /* High-end Apple-style matching curvature elements */
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.qa-item:hover {
    border-color: var(--gold-border);
    box-shadow: 0 4px 15px rgba(140, 98, 30, 0.04);
}

/* Interactive Trigger Button Layout */
.qa-trigger {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    text-align: left;
    font-family: 'Raleway', sans-serif;
}

.qa-question {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-black);
    transition: color 0.3s ease;
}

.qa-item:hover .qa-question {
    color: var(--dark-gold);
}

/* Minimalist Circular Plus Icon Container */
.qa-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f3f4f6;
    color: var(--primary-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.qa-trigger:hover .qa-icon-circle {
    background: var(--gradient-gold-linear);
    color: #000000;
}

/* --- Smooth Height Expand/Collapse Transition Logic --- */
.qa-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.qa-content-inner {
    padding: 0 28px 24px 28px;
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    font-weight: 500;
}

/* --- Active Expanded States (Managed via JS classes toggling) --- */
.qa-item.active {
    border-color: var(--gold-border);
    background-color: #fffdf9; /* Soft rich hue canvas foundation hint */
}

.qa-item.active .qa-question {
    color: var(--dark-gold);
}

.qa-item.active .qa-icon-circle {
    background: var(--surface-dark) !important;
    color: var(--bright-gold) !important;
    transform: rotate(135deg); /* Flips the plus icon perfectly into a dismiss cross */
}

/* =======================================================
    📱 RESPONSIVE ADAPTATIONS
   ======================================================= */

@media screen and (max-width: 768px) {
    .qa-section {
        padding: 40px 0;
    }
    
    .qa-main-title {
        font-size: 22px;
    }
    
    .qa-trigger {
        padding: 18px 20px;
    }
    
    .qa-question {
        font-size: 14px;
    }
    
    .qa-content-inner {
        padding: 0 20px 20px 20px;
        font-size: 13px;
    }
    
    .qa-icon-circle {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}



/* =======================================================
    Premium Vision & Mission Section (Asymmetrical Dual)
   ======================================================= */
.vision-mission-section {
    padding: 60px 0;
    background-color: #ffffff; /* Matches clean white page body background context */
}

/* 2-Column Grid Setup with wide spacing comfort */
.vision-mission-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* --- Common Base Card Framework --- */
.vm-card {
    position: relative;
    border-radius: 28px; /* Elegant modern heavy curve specs */
    padding: 50px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.vm-card-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
}

/* Minimal Icon Rings Frame mapping */
.vm-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 18px; /* Modern square-rounded block looks high-end */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.vm-card:hover .vm-icon-wrapper {
    transform: scale(1.08) rotate(-5deg);
}

.vm-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.vm-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.vm-text {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

/* Micro-decoration faint corner iconography graphic element */
.vm-corner-decoration {
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-size: 120px;
    opacity: 0.03;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.vm-card:hover .vm-corner-decoration {
    transform: scale(1.1) rotate(10deg);
}

/* --- Theme Variant 1: Premium Obsidian Card --- */
.vm-card.dark-theme {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
}

.vm-card.dark-theme:hover {
    border-color: var(--gold-border);
    box-shadow: 0 15px 35px rgba(140, 98, 30, 0.12);
}

.vm-card.dark-theme .vm-icon-wrapper {
    background: var(--gradient-gold-linear);
    color: #000000;
 }

.vm-card.dark-theme .vm-tag { color: var(--bright-gold); }
.vm-card.dark-theme .vm-title { color: #ffffff; }
.vm-card.dark-theme .vm-text { color: rgba(255, 255, 255, 0.75); }
.vm-card.dark-theme .vm-corner-decoration { color: #ffffff; opacity: 0.02; }

/* Dynamic premium abstract card aura glow inside dark context wrapper */
.vm-card-backdrop-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* --- Theme Variant 2: Clean Minimalist White Card --- */
.vm-card.light-theme {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.vm-card.light-theme:hover {
    border-color: var(--gold-border);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.vm-card.light-theme .vm-icon-wrapper {
    background-color: var(--surface-dark);
    color: var(--bright-gold);
}

.vm-card.light-theme .vm-tag { color: var(--text-gold-muted); }
.vm-card.light-theme .vm-title { color: var(--primary-black); }
.vm-card.light-theme .vm-text { color: #4b5563; }
.vm-card.light-theme .vm-corner-decoration { color: var(--primary-black); }

/* Custom hover interaction updates for Light Card ring elements */
.vm-card.light-theme:hover .vm-icon-wrapper {
    background: var(--gradient-gold-linear);
    color: #000000;
}


/* =======================================================
    📱 RESPONSIVE ADJUSTMENTS
   ======================================================= */

@media screen and (max-width: 992px) {
    .vision-mission-container {
        gap: 24px;
    }
    
    .vm-card {
        padding: 40px 30px;
    }

    .vm-title {
        font-size: 24px;
    }
    
    .vm-text {
        font-size: 14px;
    }
}

/* Collapse grid matrix cleanly on tablet viewports */
@media screen and (max-width: 768px) {
    .vision-mission-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media screen and (max-width: 576px) {
    .vision-mission-section {
        padding: 40px 0;
    }

    .vm-card {
        border-radius: 20px;
        padding: 35px 25px;
    }

    .vm-icon-wrapper {
        margin-bottom: 20px;
        width: 48px;
        height: 48px;
        font-size: 18px;
        border-radius: 14px;
    }
}




/* =======================================================
    Premium About Us Section (Clean White & Gold Theme)
   ======================================================= */
.about-us-section {
    padding: 80px 0;
    background-color: #ffffff; /* Clean white canvas foundation */
    overflow: hidden;
}

.about-us-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Perfect asymmetric spatial layout layout balance */
    gap: 60px;
    align-items: center;
}

/* --- Left Column Elements --- */
.about-content-col {
    display: flex;
    flex-direction: column;
}

.about-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gold-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-black);
    line-height: 1.25;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.about-description {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.65;
    margin-bottom: 16px;
    font-weight: 500;
}

.about-description.secondary {
    margin-bottom: 30px;
    color: var(--text-muted);
}

/* Brand Trust Metrics Row */
.about-metrics-row {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 24px 0;
}

.metric-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-number {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-black);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Gold metallic typography gradient reveal */
}

.metric-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Signature Dark Core Button mapping */
.about-cta-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-dark);
    color: var(--bright-gold);
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.about-btn-arrow {
    width: 22px;
    height: 22px;
    background-color: var(--primary-black);
    color: var(--bright-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* Primary Hover Interaction Actions */
.about-cta-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

.about-cta-btn:hover .about-btn-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
}

/* --- Right Column Images Framer Layout --- */
.about-image-col {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 0.85 / 1;
    border-radius: 32px; /* Smooth elegant container frame corners */
    overflow: hidden;
 }

.about-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

 

/* Floating overlay glassmorphic tag badge */
.about-floating-badge {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: rgba(5, 5, 5, 0.65); /* Translucent obsidian backdrop */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    z-index: 5;
 }

.about-floating-badge i {
    color: var(--bright-gold);
    font-size: 16px;
}

.about-floating-badge span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* =======================================================
    📱 RESPONSIVE ADAPTATIONS
   ======================================================= */

/* Medium Devices Desktop/Laptop Screen Drops */
@media screen and (max-width: 1100px) {
    .about-us-section {
        padding: 60px 0;
    }
    
    .about-us-container {
        gap: 40px;
    }

    .about-title {
        font-size: 30px;
    }
    
    .about-metrics-row {
        gap: 24px;
    }
}

/* Tablet Device Adaptations collapsing columns into horizontal modules */
@media screen and (max-width: 992px) {
    .about-us-container {
        grid-template-columns: 1fr; /* Stacks layout cleanly vertically */
        gap: 50px;
    }
    
    .about-content-col {
        order: 1;
    }
    
    .about-image-col {
        order: 2;
        width: 100%;
    }
    
    .about-image-wrapper {
        max-width: 100%;
        aspect-ratio: 1.4 / 1; /* Changes image proportions safely for tablet landscape orientation */
    }
}

/* Handheld Mobile Screen Sizes */
@media screen and (max-width: 576px) {
    .about-us-section {
        padding: 45px 0;
    }

    .about-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .about-description {
        font-size: 14px;
    }

    .about-metrics-row {
        flex-direction: column; /* Stack numbers vertically inside tighter columns spaces */
        gap: 16px;
        padding: 16px 0;
    }

    .metric-number {
        font-size: 22px;
    }
    
    .about-image-wrapper {
        border-radius: 20px;
        aspect-ratio: 1.2 / 1;
    }

    .about-floating-badge {
        bottom: 15px;
        left: 15px;
        padding: 8px 14px;
    }
    
    .about-floating-badge span {
        font-size: 10px;
    }
}



/* =======================================================
    Premium Contact Us Section (Clean White & Obsidian)
   ======================================================= */
.contact-us-section {
    padding: 80px 0;
    background-color: #ffffff; /* Base page canvas remains pure white */
}

.contact-us-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal column balancing framework */
    gap: 60px;
    align-items: flex-start;
}

/* --- Left Column: Details Elements --- */
.contact-details-col {
    display: flex;
    flex-direction: column;
}

.contact-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gold-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.contact-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-black);
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.contact-description {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 500;
}

/* Info Row Cards Stack */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 20px 24px;
    border-radius: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-card:hover {
    border-color: var(--gold-border);
 }

.info-card-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(163, 127, 51, 0.2);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.info-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-card-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-card-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
    transition: color 0.2s ease;
}

a.info-card-value:hover {
    color: var(--dark-gold);
}

/* --- Right Column: Obsidian Form Elements --- */
.contact-form-card {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 28px; /* Sharp modern premium card curves */
    padding: 45px 40px;
 }

.form-card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.form-card-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 30px;
    font-weight: 500;
}

.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input-group label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

/* Premium Field Outer Wrapper Box */
.form-field-wrapper {
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    border: 1px solid var(--border-dark);
    border-radius: 14px;
    padding: 0 16px;
    gap: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-field-wrapper.alignment-top {
    align-items: flex-start;
    padding: 14px 16px;
}

.form-field-wrapper:focus-within {
    border-color: var(--gold-border);
    box-shadow: 0 0 12px rgba(163, 127, 51, 0.15);
}

.field-icon {
    color: #666666;
    font-size: 15px;
    display: flex;
    align-items: center;
    height: 44px;
}

.form-field-wrapper.alignment-top .field-icon {
    height: auto;
    margin-top: 2px;
}

.form-field-wrapper input,
.form-field-wrapper textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--text-white);
    padding: 12px 0;
}

.form-field-wrapper input::placeholder,
.form-field-wrapper textarea::placeholder {
    color: #555555;
}

.form-field-wrapper textarea {
    resize: none;
    padding: 0;
}

/* Premium Dark Action Button */
.contact-submit-btn {
    margin-top: 10px;
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.contact-btn-arrow {
    width: 20px;
    height: 20px;
    background-color: var(--bright-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: transform 0.3s ease;
}

/* Button Hover Matrix Actions */
.contact-submit-btn:hover {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
 }

.contact-submit-btn:hover .contact-btn-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
}

/* =======================================================
    📱 RESPONSIVE MEDIA BREAKPOINTS
   ======================================================= */

@media screen and (max-width: 1100px) {
    .contact-us-section {
        padding: 60px 0;
    }

    .contact-us-container {
        gap: 40px;
    }

    .contact-title {
        font-size: 30px;
    }
}

/* Collapse two-column matrix grid cleanly on tablets */
@media screen and (max-width: 992px) {
    .contact-us-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media screen and (max-width: 576px) {
    .contact-us-section {
        padding: 45px 0;
    }

    .contact-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .contact-description {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .contact-info-card {
        padding: 16px;
        gap: 16px;
    }

    .info-card-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .info-card-value {
        font-size: 14px;
    }

    .contact-form-card {
        padding: 35px 20px;
        border-radius: 20px;
    }

    .form-card-title {
        font-size: 20px;
    }
}


/* =======================================================
    Premium Pure Spices Showcase Section (White & Obsidian)
   ======================================================= */
.spices-showcase-section {
    padding: 80px 0;
    background-color: #ffffff; /* Page canvas remains clean white */
}

/* Header Grid Row Layout */
.spices-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.spices-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gold-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 8px;
}

.spices-main-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-black);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Premium Navigation Header Trigger Button Link */
.view-all-spices-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-black);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    padding-bottom: 4px;
}

.view-all-spices-btn i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.view-all-spices-btn:hover {
    color: var(--gold-border);
}

.view-all-spices-btn:hover i {
    transform: translateX(5px);
}

/* Asymmetrical Master Structural Layout Layout Grid */
.spices-layout-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Custom balance between large features details & small cards */
    gap: 30px;
}

/* ====================================================
    📦 LEFT COLUMN: MASSIVE FEATURE CARD (OBSIDIAN THEME)
   ==================================================== */
.spice-feature-card {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 28px;
    padding: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.spice-feature-card:hover {
    border-color: var(--gold-border);
 }

.spice-feature-content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.exclusive-pill {
    background: var(--gradient-gold-linear);
    color: #000000;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    width: max-content;
    margin-bottom: 18px;
 }

.feature-spice-name {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.feature-spice-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Core Detail Points Lists */
.spice-benefits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.spice-benefits-list li {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.spice-benefits-list li i {
    color: var(--accent-gold);
    font-size: 14px;
}

/* Pricing Layout Block */
.feature-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 25px;
}

.f-current-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--bright-gold);
}

.f-unit {
    font-size: 13px;
    color: var(--text-muted);
}

/* Premium Pill Button Layout */
.spice-feature-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.spice-btn-arrow {
    width: 20px;
    height: 20px;
    background-color: var(--bright-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: transform 0.3s ease;
}

.spice-feature-card:hover .spice-feature-btn {
    background: var(--gradient-gold-linear);
    color: #000000;
    border-color: transparent;
 }

.spice-feature-card:hover .spice-btn-arrow {
    background-color: var(--primary-black);
    color: var(--bright-gold);
    transform: rotate(45deg);
}

/* Right Overlapping Floating Product Canvas Images */
.spice-feature-image-box {
    flex: 1 1 45%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.floating-spice-img {
    max-width: 140%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5));
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.spice-feature-card:hover .floating-spice-img {
    transform: scale(1.05) translateY(-5px);
}

/* ====================================================
    📦 RIGHT COLUMN: SPICES SECONDARY GRID (WHITE CARDS)
   ==================================================== */
.spices-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.spice-grid-item {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.spice-grid-item:hover {
    border-color: var(--gold-border);
    box-shadow: 0 10px 25px rgba(140, 98, 30, 0.06);
}

.spice-img-box {
    width: 100%;
    height: 150px;
    background-color: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spice-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.spice-grid-item:hover .spice-img-box img {
    transform: scale(1.06);
}

.spice-item-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.spice-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
    padding-right: 35px; /* Leaves clean breathing room layout boundaries for the absolute cart button overlay */
}

.spice-item-price-row {
    margin-top: auto;
}

.s-current-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-black);
}

/* Circular Micro Add To Cart Dynamic Controls Trigger */
.spice-cart-action-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--surface-dark);
    color: var(--bright-gold);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.spice-grid-item:hover .spice-cart-action-btn {
    background: var(--gradient-gold-linear);
    color: #000000;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

/* =======================================================
    📱 RESPONSIVE ADJUSTMENTS
   ======================================================= */

@media screen and (max-width: 1200px) {
    .spices-layout-grid {
        grid-template-columns: 1fr; /* Stack main blocks safely onto tablet viewports */
        gap: 24px;
    }
    
    .spice-feature-card {
        min-height: auto;
    }
}

@media screen and (max-width: 768px) {
    .spices-section-header {
        margin-bottom: 25px;
    }

    .spices-main-title {
        font-size: 26px;
    }

    .spice-feature-card {
        padding: 35px 30px;
    }

    .feature-spice-name {
        font-size: 24px;
    }
}

/* Touch-swiper optimization layout mechanics for smaller phone displays */
@media screen and (max-width: 576px) {
    .spices-showcase-section {
        padding: 45px 0;
    }

    .spices-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .spice-feature-card {
        flex-direction: column;
        padding: 30px 20px;
        border-radius: 20px;
    }

    .spice-feature-content {
        width: 100%;
        order: 1;
    }

    .spice-feature-image-box {
        width: 100%;
        height: 180px;
        order: 2;
        margin-top: 20px;
    }

    .floating-spice-img {
        max-width: 100%;
    }

    /* Convert smaller grid system rows seamlessly into dynamic sliders */
    .spices-sub-grid {
        display: flex !important;
        flex-direction: row;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }

    .spices-sub-grid::-webkit-scrollbar {
        display: none;
    }

    .spice-grid-item {
        flex: 0 0 70%; /* Perfect overflow width parameters matches your category layout standards */
        scroll-snap-align: start;
        border-radius: 16px;
    }
}



/* ==========================================================================
   🌀 ATOMIC ACCELERATED SPINNER LOADING ANIMATION VECTOR STYLES
   ========================================================================== */

/* Button State Block Configuration overrides */
.add-to-cart-btn.loading-processing,
.card-add-cart-btn.loading-processing {
    background: var(--gradient-gold-linear) !important;
    color: #000000 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.spice-cart-action-btn.loading-processing {
    background: var(--gradient-gold-linear) !important;
    color: #000000 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Premium Continuous High-End Geometric Rotator Element */
.atomic-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    border-top-color: #000000; /* Contrast color over gold highlight */
    animation: spin-accelerate-loop 0.65s linear infinite;
    flex-shrink: 0;
}

/* Atomic Custom Adjustment rule variations for mini circular item button blocks */
.atomic-spinner.mini-variant {
    width: 12px;
    height: 12px;
    border-top-color: #000000;
}

/* Inverse theme variant backup configuration */
.add-to-cart-btn.loading-processing .atomic-spinner,
.card-add-cart-btn.loading-processing .atomic-spinner {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000000;
}

@keyframes spin-accelerate-loop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* --- Wishlist Heart Burst Animation Micro-interactions --- */
.wishlist-btn, .card-wishlist-btn {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease;
}

.wishlist-btn:active, .card-wishlist-btn:active {
    transform: scale(0.85); /* Click compress state */
}

.wishlist-btn.active i, .card-wishlist-btn.active i {
    animation: heartbeat-burst 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes heartbeat-burst {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.35); /* Pop-out expanding frame scale indicator */
    }
    100% {
        transform: scale(1);
    }
}

/* =======================================================
    🚨 AUTOMATED DISABLED STATE FOR OUT OF STOCK BUTTONS
   ======================================================= */
.add-to-cart-btn.out-of-stock-disabled,
.add-to-cart-btn:disabled {
    background: #e5e7eb !important;          /* Clean muted neutral grey color foundation */
    color: #9ca3af !important;               /* Subdued text color indicator */
    border: 1px solid #d1d5db !important;
    cursor: not-allowed !important;          /* Swaps cursor to system block symbol */
    pointer-events: none !important;         /* Prevents click actions and hover transitions */
    box-shadow: none !important;
    text-transform: uppercase;
}

/* Ensure icons inside the disabled button inherit the muted color */
.add-to-cart-btn.out-of-stock-disabled i {
    color: #9ca3af !important;
    font-size: 11px;
}













/* ==========================================================================
   🌐 PREMIUM DESKTOP HOVER MEGA MENU ENGINE (PC MODE FOCUS)
   ========================================================================== */

/* Base Item Context setup anchor rules */
.menu-links li.has-mega-menu {
    position: relative;
}

/* Micro-interaction rotating chevron arrow feedback alignment */
.menu-links li.has-mega-menu:hover .nav-arrow {
    transform: rotate(180deg);
    color: var(--bright-gold);
}

/* Dropdown Container Canvas Panel Frame layout */
.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: -300px; /* Shifts layout to align seamlessly under standard header structures */
    width: 1000px; /* Premium desktop width canvas footprint */
    background-color: #ffffff;
    border: 1px solid var(--border-dark);
    border-top: 3px solid var(--gold-border); /* Premium luxury identity highlight border line */
    border-radius: 0 0 24px 24px; /* Matches bottom curve styles of existing slider setups */
     padding: 35px 40px;
    
    /* Smooth height/opacity scale acceleration vectors transition entry states */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.4s;
    z-index: 9999;
}

/* Hover State activation trigger rules matrix */
.menu-links li.has-mega-menu:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Core Internal Flexible Layout Boundaries */
.mega-menu-container {
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* Asymmetrical visual weight balance distribution */
    gap: 40px;
}

.mega-menu-block {
    display: flex;
    flex-direction: column;
}

/* Separator vertical divide margin line profile */
.subcategories-column {
    border-right: 1px solid #e5e7eb;
    padding-right: 40px;
}

.mega-block-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-black);
    letter-spacing: 0.5px;
    margin-bottom: 22px;
    position: relative;
    width: max-content;
}

.mega-block-title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--gradient-gold-linear);
}

/* --------------------------------------------------------------------------
   📦 LEFT ZONE: SUBCATEGORY CARD GRID COMPONENTS
   -------------------------------------------------------------------------- */
.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.mega-subcat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.mega-subcat-card:hover {
    border-color: var(--gold-border);
    background-color: #fffdf9;
    transform: translateY(-2px);
}

.subcat-img-frame {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    flex-shrink: 0;
}

.subcat-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mega-subcat-card:hover .subcat-img-frame img {
    transform: scale(1.08);
}

.subcat-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subcat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-black);
}

.subcat-count {
    font-size: 11px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   📦 RIGHT ZONE: PREMIUM METRICS PRODUCT ITEM CARDS
   -------------------------------------------------------------------------- */
.featured-products-column .mega-products-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mega-product-mini-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mega-product-mini-card:hover {
    border-color: var(--gold-border);
    box-shadow: 0 6px 15px rgba(140, 98, 30, 0.05);
}

.mega-prod-img-box {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f9fafb;
    flex-shrink: 0;
}

.mega-prod-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Perfect scaling map for product packages */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mega-product-mini-card:hover .mega-prod-img-box img {
    transform: scale(1.06);
}

.mega-prod-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mega-prod-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-black);
    line-height: 1.4;
}

.mega-prod-name a:hover {
    color: #000000;
}

.mega-prod-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mega-current-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-black);
}

.mega-old-price {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* ==========================================================================
   🚨 RESPONSIVE SAFETIES: KILL OVERLAYS ON MOBILE VIEWPORTS
   ========================================================================== */
@media screen and (max-width: 992px) {
    .mega-menu-dropdown {
        display: none !important; /* Forces total layout suppression to prevent mobile drawer breaks */
    }
}


/* --- Categories Dropdown Engine --- */
.categories-wrapper {
    position: relative;
    display: inline-block;
}

/* Dropdown Card Base Frame */
.categories-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px); /* Hangs cleanly beneath button */
    left: 0;
    width: 260px;
    background-color: #ffffff;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 15px 35px rgba(5, 5, 5, 0.15);
    z-index: 1200;
    border-radius: 30px;

    /* Hidden default state for animation transition handles */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
}

/* Triggered Active Display Rule via JS class toggle */
.categories-wrapper.is-open .categories-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Rotate the chevron arrow smoothly if open */
.categories-wrapper.is-open .nav-arrow-icon {
    transform: rotate(180deg);
}
.nav-arrow-icon {
    transition: transform 0.3s ease;
}

/* Dropdown Row Items Layout */
.categories-dropdown-menu li {
    padding: 0 12px;
}

.categories-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 60px;
    color: var(--primary-black);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.25s ease;
    border-bottom: 1px solid #f3f4f6;
}

/* Clean up trailing divider lines */
.categories-dropdown-menu li:last-child a {
    border-bottom: none;
}

/* Icon Frame Customizations - Force Strict Circular Fit Matrix */
.cat-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f7f5ef; /* Soft ivory foundation contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    overflow: hidden; /* Prevent unmanaged image leaks outside boundary radius */
    flex-shrink: 0; /* Prevents container distortion in flex rows */
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Premium Image Edge Sizing Configuration */
.cat-mini-icon {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Center-crops fluidly without layout stretching */
    display: block;
}

.cat-name-text {
    flex-grow: 1;
    color: #444444;
    transition: color 0.25s ease;
}

.cat-arrow {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s;
}

/* --- High End Gold/Obsidian Hover Effects --- */
.categories-dropdown-menu li a:hover {
    background-color: var(--surface-dark);
}

.categories-dropdown-menu li a:hover .cat-name-text {
    color: var(--bright-gold);
}

.categories-dropdown-menu li a:hover .cat-icon-circle {
    background: var(--gradient-gold-linear);
    transform: scale(1.05);
}

.categories-dropdown-menu li a:hover .cat-arrow {
    transform: translateX(3px);
    color: var(--bright-gold);
    opacity: 1;
}


 ::-webkit-scrollbar {
    width: 10px;  
}

::-webkit-scrollbar-track {
    background: #121212;  
}

::-webkit-scrollbar-thumb {
    background: var(--gold-border); 
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bright-gold);
}









/* ANIMATIONS/////////////////////////////////////////////////////////////////////////  */


/* ==========================================================================
   🌟 SCROLL ANIMATION CORE ENGINE (STAGGERED POP MESH)
   ========================================================================== */

/* Base reset state for features layout before intersection triggers */
.features-container .feature-card {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    will-change: transform, opacity;
    /* Custom premium cubic-bezier handles the deceleration snap beautifully */
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease, 
                box-shadow 0.3s ease; /* Keeps your crisp hover effects intact */
}

/* Active transition reveal target managed by JS Intersection Observer */
.features-container.animate-reveal .feature-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- 🏎️ PROGRESSIVE SEQUENTIAL STAGGERED TRANSITION TIMELINES --- */
.features-container.animate-reveal .feature-card:nth-child(1) {
    transition-delay: 0.1s;
}

.features-container.animate-reveal .feature-card:nth-child(2) {
    transition-delay: 0.25s;
}

.features-container.animate-reveal .feature-card:nth-child(3) {
    transition-delay: 0.4s;
}

.features-container.animate-reveal .feature-card:nth-child(4) {
    transition-delay: 0.55s;
}

/* Safe fallback: Kill processing delay overhead on responsive slider modes */
@media screen and (max-width: 600px) {
    .features-container.animate-reveal .feature-card {
        transition-delay: 0.15s !important; /* Stacked columns activate instantly on mobile sightlines */
    }
}


/* ==========================================================================
   🌟 CINEMATIC ASYMMETRIC REVEAL MATRIX (PROMO BANNERS)
   ========================================================================== */

/* --- Initial Concealed Layout States --- */
.promo-banners-container .promo-banner-card {
    opacity: 0;
    will-change: transform, opacity;
    /* Clean linear opacity curve */
    transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Deep text elements slide forward from the left */
.promo-banners-container .promo-banner-card .promo-banner-content {
    opacity: 0;
    transform: translateX(-35px);
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating product images drift inward from the right side */
.promo-banners-container .promo-banner-card .promo-banner-image {
    opacity: 0;
    transform: translateX(45px) scale(0.95);
    will-change: transform, opacity;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Active Reveal Target Trigger Rules (Managed by Observer) --- */
.promo-banners-container.animate-reveal .promo-banner-card {
    opacity: 1;
}

.promo-banners-container.animate-reveal .promo-banner-card .promo-banner-content,
.promo-banners-container.animate-reveal .promo-banner-card .promo-banner-image {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- Progressive Timelines Stagger Delays Between Cards --- */
.promo-banners-container.animate-reveal .promo-banner-card:nth-child(1) .promo-banner-content,
.promo-banners-container.animate-reveal .promo-banner-card:nth-child(1) .promo-banner-image {
    transition-delay: 0.1s;
}

.promo-banners-container.animate-reveal .promo-banner-card:nth-child(2) .promo-banner-content,
.promo-banners-container.animate-reveal .promo-banner-card:nth-child(2) .promo-banner-image {
    transition-delay: 0.3s; /* Smooth visual interval sequence */
}

.promo-banners-container.animate-reveal .promo-banner-card:nth-child(3) .promo-banner-content,
.promo-banners-container.animate-reveal .promo-banner-card:nth-child(3) .promo-banner-image {
    transition-delay: 0.5s;
}

/* Desktop hover micromanagement preservation rule layers */
@media (min-width: 769px) {
    .promo-banner-card:hover .promo-banner-image img {
        /* Preserves your existing full-scale hover zoom pop without matrix clashing */
        transform: scale(1.06) translateX(4px) !important;
    }
}

/* Responsive Overrides: Kill offset translations on touch horizontal swipe track mode */
@media screen and (max-width: 768px) {
    .promo-banners-container .promo-banner-card .promo-banner-content,
    .promo-banners-container .promo-banner-card .promo-banner-image {
        transform: translateY(20px) !important; /* Changes safely to simple upward pop on mobile track */
        transition-delay: 0.15s !important;
    }
}



/* ==========================================================================
   🌟 SPLIT SYMMETRIC SWEEP & DEEP ZOOM MESH (HIGHLIGHT BANNERS)
   ========================================================================== */

/* --- Initial Concealed Layout Configurations --- */
.highlight-banners-container .highlight-banner-card {
    opacity: 0;
    will-change: transform, opacity;
    /* Custom easeOutQuint curve delivers high-end deceleration physics */
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease;
}

/* Left Card entry origin vector: Slid outwards to the left */
.highlight-banners-container .highlight-banner-card:nth-child(1) {
    transform: translateX(-60px);
}

/* Right Card entry origin vector: Slid outwards to the right */
.highlight-banners-container .highlight-banner-card:nth-child(2) {
    transform: translateX(60px);
}

/* Isolate product image matrices for a deep visual pop animation scale */
.highlight-banners-container .highlight-banner-card .floating-product-img {
    opacity: 0;
    transform: scale(0.82) rotate(-3deg);
    will-change: transform, opacity;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Active Target States (Fired via JavaScript Intersection) --- */
.highlight-banners-container.animate-reveal .highlight-banner-card {
    opacity: 1;
    transform: translateX(0); /* Sweep both cards to zero anchor simultaneously */
}

/* Handle incremental stagger delays for product graphics inside cards */
.highlight-banners-container.animate-reveal .highlight-banner-card:nth-child(1) .floating-product-img {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}

.highlight-banners-container.animate-reveal .highlight-banner-card:nth-child(2) .floating-product-img {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.4s; /* Clean sequential stagger interval step */
}

/* --- Luxury Desktop Hover Overwrite Preservation Rules --- */
@media (min-width: 769px) {
    .highlight-banner-card:hover .floating-product-img {
        /* Prevents scroll animations from colliding with your premium hover elevation matrix */
        transform: scale(1.05) translateY(-4px) translateX(2px) !important;
    }
}

/* Responsive Adaptive Safety Reset: Fall back to vertical stacking transformations on mobile screens */
@media screen and (max-width: 768px) {
    .highlight-banners-container .highlight-banner-card:nth-child(1),
    .highlight-banners-container .highlight-banner-card:nth-child(2) {
        transform: translateY(40px) !important; /* Disables side sweep to prevent unwanted mobile screen clipping edge leaks */
    }
    
    .highlight-banners-container.animate-reveal .highlight-banner-card {
        transform: translateY(0) !important;
    }
    
    .highlight-banners-container.animate-reveal .highlight-banner-card:nth-child(2) {
        transition-delay: 0.2s; /* Adjusts stagger rhythm specifically for single-column tracking sightlines */
    }
}


/* ==========================================================================
   🌟 CASCADING STREAM & ACCORDION REVEAL (FAQ HOOKS)
   ========================================================================== */

/* --- 1. Header Layout Element Transitions --- */
.qa-section .qa-header {
    opacity: 0;
    transform: translateY(-25px);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.qa-section.animate-reveal .qa-header {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. Accordion Card Individual Element Transitions --- */
.qa-wrapper .qa-item {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
    /* Custom easeOutCubic curve ensures the vertical stacking pops smoothly */
    transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
                opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
                border-color 0.3s ease, 
                background-color 0.3s ease; /* Preserves your active click hue overrides */
}

/* Reveal rows instantly once parent element flags dynamic visibility */
.qa-wrapper.animate-reveal .qa-item {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   🌟 SYMMETRIC FLIP MESH & BACKDROP AURA RISE (VISION & MISSION)
   ========================================================================== */

/* --- 1. Initial Structural Entry Layout States --- */
.vision-mission-container {
    perspective: 1200px; /* Establishes absolute 3D depth space environment for rows */
}

.vision-mission-container .vm-card {
    opacity: 0;
    backface-visibility: hidden;
    will-change: transform, opacity;
    /* High-end long-duration deceleration curve mimics weight and momentum */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Left Card entry angle coordinates: Shifted left and tilted outward */
.vision-mission-container .vm-card:nth-child(1) {
    transform: translateX(-40px) rotateY(15deg) scale(0.97);
}

/* Right Card entry angle coordinates: Shifted right and tilted outward */
.vision-mission-container .vm-card:nth-child(2) {
    transform: translateX(40px) rotateY(-15deg) scale(0.97);
}

/* Isolate the internal abstract glow element inside your dark card context */
.vm-card .vm-card-backdrop-glow {
    transform: scale(0.2) translate(50%, 50%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.6s ease-out;
}

/* Isolate the micro-decorative corner iconography graphic elements */
.vm-card .vm-corner-decoration {
    opacity: 0;
    transform: scale(0.6) translate(20px, 20px);
    will-change: transform, opacity;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.4s ease-out;
}

/* --- 2. Active Animated Reveal Targets (Fired by Observer) --- */
.vision-mission-container.animate-reveal .vm-card {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) scale(1); /* Snaps cards to true zero flat lines */
}

/* Sequential stagger execution delay offsets between card blocks */
.vision-mission-container.animate-reveal .vm-card:nth-child(1) {
    transition-delay: 0.1s;
}

.vision-mission-container.animate-reveal .vm-card:nth-child(2) {
    transition-delay: 0.3s;
}

/* Expand back-end details gracefully when container hits sightline fields */
.vision-mission-container.animate-reveal .vm-card .vm-card-backdrop-glow {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    transition-delay: 0.25s;
}

.vision-mission-container.animate-reveal .vm-card .vm-corner-decoration {
    opacity: 0.03; /* Returns perfectly to your pre-existing faint branding opacity levels */
    transform: scale(1) translate(0, 0);
}

/* Prevent layout collisions on your existing light icon ring hover transformations */
.vision-mission-container.animate-reveal .vm-card.dark-theme .vm-corner-decoration {
    opacity: 0.02;
}

/* --- 3. Responsive Overrides --- */
@media screen and (max-width: 768px) {
    /* Kills Y-axis rotations on mobile layout grids to completely bypass any viewport clipping bounds */
    .vision-mission-container .vm-card:nth-child(1),
    .vision-mission-container .vm-card:nth-child(2) {
        transform: translateY(35px) scale(0.98) !important;
        transition-delay: 0.15s !important;
    }
}


/* ==========================================================================
   🌟 ASYMMETRIC STAGGER SLIDE & RADIAL INTRO MESH (ABOUT US)
   ========================================================================== */

/* --- 1. Initial Structural Entry Layout States --- */
.about-us-container .about-content-col {
    opacity: 0;
    transform: translateX(-45px);
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-us-container .about-image-col {
    opacity: 0;
    transform: translateX(45px) scale(0.98);
    will-change: transform, opacity;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Isolate individual metric block labels for a subtle delayed vertical lift */
.about-metrics-row .metric-block {
    opacity: 0;
    transform: translateY(15px);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.8s ease-out;
}

/* Glassmorphic floating card badge delay properties */
.about-image-wrapper .about-floating-badge {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 1s ease-out;
}

/* --- 2. Active Animated Reveal Targets (Fired by Observer) --- */
.about-us-container.animate-reveal .about-content-col,
.about-us-container.animate-reveal .about-image-col {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Delay grid mapping rules between structural text blocks and graphics columns */
.about-us-container.animate-reveal .about-image-col {
    transition-delay: 0.15s;
}

/* Stagger indices for your metric counter wrapper blocks sequentially */
.about-us-container.animate-reveal .metric-block:nth-child(1) { transition-delay: 0.3s; }
.about-us-container.animate-reveal .metric-block:nth-child(2) { transition-delay: 0.4s; }
.about-us-container.animate-reveal .metric-block:nth-child(3) { transition-delay: 0.5s; }
.about-us-container.animate-reveal .metric-block:nth-child(4) { transition-delay: 0.6s; }
.about-us-container.animate-reveal .metric-block:nth-child(5) { transition-delay: 0.7s; }

.about-us-container.animate-reveal .metric-block {
    opacity: 1;
    transform: translateY(0);
}

/* Float the glassmorphic award tag in place smoothly */
.about-us-container.animate-reveal .about-floating-badge {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.65s;
}

/* --- 3. Responsive Overrides --- */
@media screen and (max-width: 992px) {
    /* Safe fallback parameters: Drops side sweep coordinates to prevent handheld screen clipping edges */
    .about-us-container .about-content-col,
    .about-us-container .about-image-col {
        transform: translateY(30px) !important;
    }
}

/* ==========================================================================
   🌟 SYMMETRIC SWEEP & CASCADING FIELD UNFOLD (CONTACT INFRASTRUCTURE)
   ========================================================================== */

/* --- 1. Initial Hidden Layout Structural States --- */
.contact-us-container .contact-details-col {
    opacity: 0;
    transform: translateX(-50px);
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-us-container .contact-form-col {
    opacity: 0;
    transform: translateX(50px);
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Isolate left info cards for a staggered upward pop */
.contact-info-cards .contact-info-card {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.8s ease-out;
}

/* Isolate premium form input layers for a progressive reveal */
.contact-form-wrapper .form-input-group,
.contact-form-wrapper .contact-submit-btn {
    opacity: 0;
    transform: translateY(15px);
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.8s ease-out;
}

/* --- 2. Active Animated Targets (Triggered via JavaScript class) --- */
.contact-us-container.animate-reveal .contact-details-col,
.contact-us-container.animate-reveal .contact-form-col {
    opacity: 1;
    transform: translateX(0);
}

/* --- 3. Incremental Transition Stagger Delays --- */

/* Left Column: Info Cards Chain */
.contact-us-container.animate-reveal .contact-info-card:nth-child(1) { transition-delay: 0.2s; }
.contact-us-container.animate-reveal .contact-info-card:nth-child(2) { transition-delay: 0.35s; }
.contact-us-container.animate-reveal .contact-info-card:nth-child(3) { transition-delay: 0.5s; }

.contact-us-container.animate-reveal .contact-info-card {
    opacity: 1;
    transform: translateY(0);
}

/* Right Column: Input Elements Chain */
.contact-us-container.animate-reveal .form-input-group:nth-child(1) { transition-delay: 0.3s; }
.contact-us-container.animate-reveal .form-input-group:nth-child(2) { transition-delay: 0.42s; }
.contact-us-container.animate-reveal .form-input-group:nth-child(3) { transition-delay: 0.54s; }
.contact-us-container.animate-reveal .contact-submit-btn       { transition-delay: 0.66s; }

.contact-us-container.animate-reveal .form-input-group,
.contact-us-container.animate-reveal .contact-submit-btn {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. Responsive Safety Resets --- */
@media screen and (max-width: 992px) {
    /* Collapse horizontal coordinates to prevent horizontal clipping edge overflow leaks */
    .contact-us-container .contact-details-col,
    .contact-us-container .contact-form-col {
        transform: translateY(35px) !important;
    }
}


/* ==========================================================================
   🌟 HORIZONTAL WAVE-STAGGER CARD INTRO MESH (BEST SELLING)
   ========================================================================== */

/* --- 1. Dynamic Header Curve Drop --- */
.best-selling-section .section-header-curve {
    opacity: 0;
    transform: translate(-50%, -25px); /* Keeps your exact left: 50%; centering absolute rules */
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.best-selling-section.animate-reveal .section-header-curve {
    opacity: 1;
    transform: translate(-50%, -1px); /* Restores seamlessly to your original top: -1px; spec */
}

/* --- 2. Initial Horizontal Slider Card States --- */
.best-selling-grid .premium-product-card {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    will-change: transform, opacity;
    /* Custom luxury deceleration handles the vertical snap bounce perfectly */
    transition: transform 0.95s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease; /* Protects your existing premium micro-zoom states */
}

/* --- 3. Active Wave Target Trigger (Fired by Observer) --- */
.best-selling-grid.animate-reveal .premium-product-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Mobile Adaptive Safety Override */
@media screen and (max-width: 576px) {
    .best-selling-grid .premium-product-card {
        transform: translateX(30px) scale(0.98); /* Slides sideways from the overflow track on tiny viewports */
        transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
    }
    .best-selling-grid.animate-reveal .premium-product-card {
        transform: translateX(0) scale(1);
    }
}