/* ========== 1. GLOBAL RESET & BASIC STYLES ========== */
        html,
        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #ffffff;
            /* Pure White */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        :root {
            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --color-bg: #f8f9fa;
            --color-card-bg: #ffffff;
            --color-text: #212529;
            --color-text-muted: #6c757d;
            --color-brand: #832422;
            /* Your brand color */
            --color-border: #e9ecef;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
            --border-radius: 12px;
        }

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

        /* h2 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 25px;
            color: #333;
        } */

        a {
            text-decoration: none;
        }

        /* --- 3. HERO SLIDER CSS --- */
        .hero-slider {
            width: 100%;
            height: 450px;
            position: relative;
            overflow: hidden;
            background-color: #eee;
        }
         .slider-track {
            display: flex;
            height: 100%;
            transition: transform 0.7s ease-in-out;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 2.5rem;
            background-size: cover;
            background-position: center;
        }

        .main-slider-track {
    display: flex;
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

        .main-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 2.5rem;
            background-size: cover;
            background-position: center;
        }

        .slide-content {
            background-color: rgba(0, 0, 0, 0.4);
            padding: 20px 40px;
            border-radius: 8px;
        }

        .slide-content h1 {
            font-family: 'Castoro', serif;
            font-size: 3.0rem;
            color: white;
            margin-bottom: 5px;
            font-weight: 600;
            letter-spacing: 0.7px;
        }

        .slide-content p {
            font-family: 'Inter', sans-serif;
            font-size: 2.0rem;
            color: #f0f0f0;
            margin-top: 15px;
        }

        .slide-link-wrapper {
            text-decoration: none;
            color: white;
            display: block;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- 4. Video Section CSS --- */
        .video-section {
            padding: 0;
            margin: 0;
        }

        .video-banner-container {
            width: 100%;
            aspect-ratio: 16 / 7.4;
            position: relative;
            overflow: hidden;
            background: #000;
        }

        .video-banner {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        video.video-banner {
            object-fit: cover;
        }

        iframe.video-banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-width: 100%;
            min-height: 100%;
            transform: none;
            pointer-events: auto;
            border: 0;
        }


        /* --- 5. Gift Banner CSS --- */
        .gift-banner-wow-wrapper {
            background-color: #ffffff;
            padding: 60px 20px;
            color: hsl(0, 0%, 0%);
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
            margin-top: 20px;
        }

        /* Decorative Gold Line */
        .wow-gold-line {
            position: absolute;
            height: 6px;
            width: 100%;
            background: linear-gradient(90deg, #000000 0%, #000000 50%, #000000 100%);
            box-shadow: None !important;
            left: 0;
        }

        .gift-banner-wow-wrapper .wow-gold-line:first-child {
            top: 0;
        }

        .gift-banner-wow-wrapper .wow-gold-line:last-child {
            bottom: 0;
        }

        /* Inner Content Container */
        .gift-wow-container {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
        }

        .gift-wow-text-content {
            flex: 1;
            max-width: 55%;
            padding-left: 20px;
        }

        .wow-title {
            font-family: 'Georgia', serif;
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 15px;
            letter-spacing: 2px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
            color: #000000;
            line-height: 1.1;
        }

        .wow-description {
            font-size: 1.4rem;
            font-weight: 300;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        /* Call to Action Button */
        .wow-cta-button {
            display: inline-flex;
            align-items: center;
            background-color: #e1decc;
            color: #832422;
            padding: 12px 28px;
            border-radius: 999px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: none !important;
        }

        .wow-cta-button:hover {
            background-color: #ffc107;
            transform: translateY(-2px);
            box-shadow: none !important;
        }

        .wow-cta-button i {
            margin-left: 8px;
        }

        /* Image Styling */
        .gift-wow-image-container {
            flex: 0 0 40%;
            max-width: 800px;
            height: 350px;
            border: none;
            border-radius: 12px;
            overflow: hidden;
        }

        .wow-gift-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 1024px) {
            .wow-title {
                font-size: 2.8rem;
            }

            .gift-wow-image-container {
                max-width: 350px;
                height: 300px;
            }
        }

        @media (max-width: 768px) {
            .gift-banner-wow-wrapper {
                padding: 40px 15px;
                margin-top: 25px;
            }

            .gift-wow-container {
                flex-direction: column-reverse;
                text-align: center;
            }

            .gift-wow-text-content {
                max-width: 100%;
                padding: 0;
            }

            .wow-title {
                font-size: 2.2rem;
            }

            .wow-description {
                font-size: 1.1rem;
            }

            .gift-wow-image-container {
                flex: 0 0 auto;
                width: 100%;
                max-width: 400px;
                height: 250px;
                margin-bottom: 30px;
            }
        }

     
     
       


        .two-column-banners {
            flex-wrap: wrap;
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            /* Forces exactly 2 columns */
            gap: 40px;
            padding: 40px 20px;
            max-width: 1400px;

            margin: 0 auto;
        }

        .two-column-banners>* {
            width: 100%;
            /* full column width */
            height: 600px;
            /* set height for all cards */
        }

        .banner-item {
            width: 100% !important;
            /* Let the grid control the width */
            min-width: unset !important;
            flex: 0 0 calc(50% - 10px);
            position: relative;
            overflow: hidden;
            border-radius: 0px;
            cursor: pointer;
            transition: transform 0.3s ease;
            box-sizing: border-box;
            /* Ensures width is calculated correctly */
            box-shadow: none !important;
            border: none !important;
        }

        .banner-item:hover {
            box-shadow: none !important;
        }

        .banner-img {
            width: 100%;
            height: 600px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease-in-out;
        }

        .banner-item:hover .banner-img {
            transform: scale(1.05);
        }

        .banner-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 40px;

            color: #fff;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            height: 100%;
            box-sizing: border-box;
        }

        .banner-overlay h3 {
            font-family: 'Inter', sans-serif;
            margin: 0 0 15px 0;
            font-size: 2.2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffffff;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .banner-button {
            display: inline-block;
            background: #832422;
            color: #ffffff;
            padding: 14px 30px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: all 0.2s ease;
            border: 2px solid #ffffff;
        }

        .banner-button:hover {
            background: #6a1d1c;
            transform: translateY(-2px);
            border-color: #ffffff;
        }

        /* --- UPDATED MOBILE RESPONSIVENESS --- */
        @media (max-width: 900px) {
            .two-column-banners {
                /* We DO NOT use flex-direction: column anymore */
                padding: 20px 10px;
                gap: 20px;
            }

            .banner-item {
                /* Keeps 2 items side-by-side even on small screens */
                flex: 0 0 calc(50% - 5px);
                min-width: unset;
                width: auto;
                margin: 0;
            }

            .banner-img {
                height: 250px;
            }

            .banner-overlay {
                padding: 20px;
            }

            .banner-overlay h3 {
                font-size: 1.4rem;
            }

            /* Slightly smaller for mobile */
            .banner-button {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }


        /* --- 8. Three-Column Collections Guide --- */
        .collection-guide-section {
            padding: 60px 30px 80px;
            max-width: 1400px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 0px !important;
        }

        .collection-guide-container {
            display: grid;
            /* CHANGE: Forced exactly 3 columns (1fr each) */
            grid-template-columns: repeat(3, 1fr);
            gap: 35px;
            border-radius: 0px !important;
        }

      .guide-item {
    text-align: center;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0;
    box-shadow: none !important;
    border: none !important;
}

/* Remove hover effect from entire card */
.guide-item:hover {
    box-shadow: none !important;
}

/* Image wrapper to contain zoom effect */
.guide-img-wrapper {
    overflow: hidden;
    position: relative;
}

/* Image styles */
.guide-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    margin-bottom: 0;
    border-bottom: 3px solid #e9ecef;
    transition: transform 0.4s ease;
    transform-origin: center center;
}

/* Zoom only image on hover */
.guide-item:hover .guide-img {
    transform: scale(1.05);
}

/* Button/Text section */
.guide-link-text {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #832422, #b13a37);
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    display: block;
    transition: background 0.3s ease;
}

/* Keep button fixed (no zoom) */
.guide-link-text:hover {
    transform: none;
}
       

        /* Updated Mobile Adjustment */
        @media (max-width: 1024px) {

            /* Optional: Switch to 2 columns on tablets for better fit */
            .collection-guide-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }

        
        /* ============================================================
   ULTRA PRO: 3-COLUMN GRID FIX (FOR MOBILE)
   ============================================================ */
        @media (max-width: 768px) {

            .collection-guide-container {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 5px !important;
                overflow-x: hidden !important;
                width: 100% !important;
            }

            .guide-item {
                min-width: 0 !important;
                border-radius: 0 !important;
                overflow: hidden;
            }

            .guide-img {
                height: 110px !important;
                border-radius: 0 !important;
            }

            .guide-link-text {
                padding: 7px 2px !important;
                font-size: 0.6rem !important;
                border-radius: 0 !important;
            }

            .guide-img {
                height: 110px !important;
                width: 100% !important;
                object-fit: cover;
            }
        }
        /* --- 10. DEAL OF THE DAY SECTION --- */
        .deal-section {
            background: #ffffff;
            color: #ffffff;
            padding: 50px 0;
            margin: 40px auto;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            overflow: hidden;
        }

        .deal-container {
            display: flex;
            align-items: center;
            justify-content: space-around;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
            flex-wrap: wrap;
        }

        .deal-image {
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }

        .deal-image img {
            width: 600px;
            height: 300px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

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

        .deal-info {
            max-width: 550px;
            text-align: left;
            padding-left: 40px;
        }

        .deal-tag {
            background: #ffffff;
            color: #832422;
            padding: 6px 12px;
            border-radius: 4px;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .deal-title {
            font-size: 2.2rem;
            margin: 0 0 10px;
            color: #000000;
            line-height: 1.2;
        }

        .deal-price {
            font-size: 2.5rem;
            color: #000000;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
        }

        .deal-price .mrp {
            font-size: 1.2rem;
            color: rgba(0, 0, 0, 0.7);
            text-decoration: line-through;
            margin-right: 15px;
        }

        h4.time-text {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #000000;
        }

        .countdown {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        .countdown-unit {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 12px;
            border-radius: 4px;
            text-align: center;
            flex-basis: 75px;
        }

        .countdown-unit span {
            display: block;
            font-family: monospace;
            font-size: 2.2rem;
            font-weight: bold;
            color: #000000;
            line-height: 1;
        }

        .countdown-unit small {
            font-size: 0.8rem;
            color: rgba(0, 0, 0, 0.8);
            font-weight: 500;
            margin-top: 5px;
            display: block;
        }

        .shop-button {
            background: #ffffff;
            color: #832422;
            padding: 14px 30px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 700;
            display: inline-block;
            transition: all 0.2s;
        }

        .shop-button:hover {
            background: #d4d3cd;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .deal-container {
                flex-direction: column;
                text-align: center;
            }

            .deal-info {
                padding-left: 0;
                margin-top: 30px;
                text-align: center;
                max-width: 100%;
            }

            .deal-image img {
                width: 100%;
                max-width: 300px;
                height: auto;
            }

            .deal-title {
                font-size: 1.8rem;
            }

            .countdown {
                justify-content: center;
            }
        }

        /* --- 11. Featured Product Grid (Horizontal Scroll) --- */
        .product-grid {
            display: flex;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding: 30px 20px;
            gap: 40px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
            max-width: 100%;
            margin: 0 auto;
        }

        .product-grid::-webkit-scrollbar {
            display: none;
            height: 0;
        }

        .product-link {
            text-decoration: none;
            color: var(--color-text);
            width: 250px;
            flex-shrink: 0;
            display: block;
        }

        .product-card {
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            overflow: hidden;

            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease, border-color 0.3s ease;
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px;
            border-color: rgba(131, 36, 34, 0.4);
        }

        .product-card__image-wrapper {
            position: relative;
            overflow: hidden;
        }

        .product-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-bottom: 1px solid var(--border-color);
            transition: filter 0.5s ease, transform 0.5s ease;
        }

        .product-card:hover img {
            filter: brightness(0.85);
            transform: scale(1.1);
        }

        .quick-view-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            opacity: 0;
            visibility: hidden;
            background: rgba(255, 255, 255, 0.95);
            color: var(--color-text);
            border: 1px solid #ccc;
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            box-shadow: none !important;
            transition: all 0.3s cubic-bezier(0.1, 0.7, 0.5, 1);
            z-index: 5;
        }

        .product-card:hover .quick-view-btn {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .quick-view-btn:hover {
            background: var(--color-brand);
            color: #ffffff;
            border-color: var(--color-brand);
        }

        .product-card__content {
            padding: 15px 15px 12px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .product-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--color-text);
            margin: 0 0 5px 0;
            line-height: 1.25;
            white-space: normal;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            text-overflow: ellipsis;
        }

        .product-card__price {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-top: 10px;
        }

        .sale-price {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--color-brand);
        }

        .regular-price {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--color-text-muted);
            text-decoration: line-through;
        }

        .price {
            color: var(--color-brand);
            font-weight: 800;
            font-size: 1.4rem;
            margin: 0;
        }

      


        .admin-icon-link {
            position: relative;
        }

        .admin-icon-link .notification-dot {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background-color: #ffc107;
            border-radius: 50%;
            border: 2px solid #fff;
        }

        /* --- Container & Layout --- */
        .dynasty-featured-section {
            padding: 40px 10px;
            background-color: #ffffff;
            /* Very light grey for premium feel */
            font-family: 'Playfair Display', serif;
            /* Suggest adding this font via Google Fonts */
        }

        /* --- Typography --- */
        .dynasty-section-title {
            font-family: 'Castoro', serif;
            text-align: center;
            font-size: 2.5rem;
            color: #1a1a1a;
            margin-bottom: 20px;
            margin-top: 0%;
            font-weight: 500;
            letter-spacing: 0.7px;
        }

        .dynasty-section-subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 50px;
            font-family: 'Lato', sans-serif;
            /* Secondary font */
            font-size: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* --- Grid System --- */
        .dynasty-product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 40px;
        }

        /* --- The Card (Magic Happens Here) --- */
        .dynasty-card {
            background: white;
            border-radius: 4px;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
            border: 1px solid transparent;
        }

        .dynasty-card:hover {
            box-shadow: none;
            border-color: #f0f0f0;
        }

        .dynasty-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        /* --- Image & Zoom Effect --- */
        .dynasty-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 100%;
            /* Creates a 3:4 Portrait Aspect Ratio */
            overflow: hidden;
        }

        .dynasty-img-main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
            /* Smooth zoom */
        }

        .dynasty-card:hover .dynasty-img-main {
            transform: scale(1.1);
            /* Zooms in on hover */
        }

        /* --- Overlay Button --- */
        .dynasty-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .dynasty-card:hover .dynasty-overlay {
            opacity: 1;
        }

        .dynasty-view-btn {
            background-color: white;
            color: #1a1a1a;
            padding: 12px 25px;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
            font-weight: bold;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .dynasty-card:hover .dynasty-view-btn {
            transform: translateY(0);
            /* Button slides up */
        }




        .dynasty-price-wrapper {
            color: #1a1a1a;
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* --- Mobile Responsiveness --- */
        @media (max-width: 768px) {
            .dynasty-product-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 2 columns on mobile */
                gap: 15px;
            }

            .dynasty-view-btn {
                display: none;
                /* Hide hover button on mobile */
            }
        }

        /* --- The Horizontal Slider Container --- */
        .dynasty-product-grid {
            display: flex;
            /* Makes items sit in a row */
            flex-wrap: nowrap;
            /* PREVENTS them from going to the next line */
            overflow-x: auto;
            /* Enables horizontal scrolling */
            gap: 30px;
            /* Space between cards */
            padding: 20px 10px 40px 10px;
            /* Bottom padding ensures shadows aren't cut off */

            /* The "Pro" Magnetic Scroll Effect */
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            /* Smooth scrolling for phones */
        }

        /* --- Custom Scrollbar Styling (Make it look expensive) --- */
        .dynasty-product-grid::-webkit-scrollbar {
            height: 6px;
            /* Very thin, elegant scrollbar */
        }

        .dynasty-product-grid::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .dynasty-product-grid::-webkit-scrollbar-thumb {
            background: #ccc;
            /* Subtle grey handle */
            border-radius: 10px;
            transition: background 0.3s;
        }

        .dynasty-product-grid:hover::-webkit-scrollbar-thumb {
            background: #333;
            /* Darker when you interact with it */
        }

        /* --- The Card Updates --- */
        .dynasty-card {
            /* Crucial: Prevents the card from shrinking to fit the screen */
            flex: 0 0 auto;
            width: 280px;
            /* Fixed width for every card */

            /* Magnetic Snap Point */
            scroll-snap-align: start;

            background: white;
            border-radius: 4px;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            border: 1px solid transparent;
        }

        /* Keep the rest of the previous CSS the same (Hover effects, images, typography) */
        .dynasty-card:hover {
            box-shadow: none;
            border-color: #f0f0f0;
        }

        .dynasty-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        /* Image Wrapper (3:4 Portrait Ratio) */
        .dynasty-image-wrapper {
            position: relative;
            width: 100%;
            padding-top: 100%;
            overflow: hidden;
        }

        .dynasty-img-main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

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

        /* Overlay Button */
        .dynasty-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .dynasty-card:hover .dynasty-overlay {
            opacity: 1;
        }

        .dynasty-view-btn {
            background-color: white;
            color: #1a1a1a;
            padding: 12px 25px;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
            font-weight: bold;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .dynasty-card:hover .dynasty-view-btn {
            transform: translateY(0);
        }

        /* Details Section */
        .dynasty-details {
            padding-top: 2px;
            padding-bottom: 23px;
            text-align: center;
            background: white;
        }

        .dynasty-product-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.2rem;
            color: #333;
            font-weight: 500;
            margin: 0 0 8px 0;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 0px;
            margin-bottom: auto;
        }

        .dynasty-price-wrapper {
            color: #1a1a1a;
            font-weight: 400;
            font-size: 1.1rem;
        }

        .dynasty-product-grid {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: hidden;
            /* Hides scrollbar for clean look */
            gap: 30px;
            padding: 20px 10px 40px 10px;
            white-space: nowrap;
            /* Ensures products stay in one line */
            cursor: grab;
            /* Shows user they can still grab it if they want */
        }

        /* Optional: Ensure card width stays fixed */
        .dynasty-card {
            flex: 0 0 auto;
            width: 280px;
            /* Removed scroll-snap-align */
        }





        /* =========================================================
   STEP 2: PASTE THIS AT THE VERY BOTTOM OF YOUR CSS
   ========================================================= */




        @media (max-width: 768px) {

            /* --- 1. GIFT BANNER FIX (The "Wow" Section) --- */
            /* Problem: Side-by-side layout squishes text.
       Fix: Stack image on top, text below. */
            .gift-banner-wow-wrapper {
                padding: 40px 15px;
                /* Reduce padding */
                margin-top: 0;
            }

            .gift-wow-container {
                flex-direction: column-reverse;
                /* Move image to top, text to bottom */
                gap: 30px;
            }

            .gift-wow-text-content {
                max-width: 100%;
                padding: 0;
                text-align: center;
                /* Center text for mobile */
            }

            .gift-wow-image-container {
                max-width: 100%;
                /* Allow full width */
                height: auto;
                /* Auto adjust height */
                aspect-ratio: 4/3;
                /* Nice rectangular shape */
                box-shadow: none;
            }

            .wow-title {
                font-size: 2rem;
            }

            
            /* --- 4. DEAL OF THE DAY FIX --- */
            /* Problem: Fixed 600px image breaks screen. Flex row squishes text.
       Fix: Stack vertically, make image 100% width. */
            .deal-section {
                margin: 20px 10px;
                /* Add margin so it doesn't touch edges */
                padding: 30px 15px;
                width: auto;
                /* Allow it to shrink */
            }

            .deal-container {
                flex-direction: column;
                padding: 0;
                gap: 25px;
            }

            .deal-image {
                width: 100%;
                max-width: 100%;
            }

            .deal-image img {
                width: 100% !important;
                /* Force fluid width */
                height: auto !important;
                /* Maintain aspect ratio */
                max-width: 100%;
            }

            .deal-info {
                padding: 0;
                max-width: 100%;
                text-align: center;
            }

            .deal-title {
                font-size: 1.8rem;
            }

            .deal-price {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            /* Fix Countdown Timer */
            .countdown {
                justify-content: center;
                gap: 10px;
                margin-bottom: 25px;
            }

            .countdown-unit {
                min-width: 60px;
                /* Smaller boxes */
                padding: 8px 5px;
                flex-basis: auto;
            }

            .countdown-unit span {
                font-size: 1.6rem;
                /* Smaller numbers */
            }
        }

        /* ============================================================
   ULTRA PRO: MOBILE INTERACTIVE & SIZING ENGINE
   Paste this at the VERY BOTTOM of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* --- 1. GLOBAL INTERACTIVE FEEL (The "App" Touch) --- */
            /* Adds a subtle "press" effect to all buttons/links when tapped */
            a:active,
            button:active,
            .wow-cta-button:active,
            .shop-button:active {
                transform: scale(0.96);
                transition: transform 0.1s ease;
            }

            /* Global Font Reduction - Removes the "Bold and Big" look */
            body {
                font-size: 12px;
            }

            h1 {
                font-size: 1.4rem !important;
                line-height: 1.2;
            }

            /* h2 {
                font-size: 1.25rem !important;
                margin-bottom: 15px !important;
                letter-spacing: 0.5px;
            } */

          
            p {
                font-size: 0.9rem !important;
                line-height: 1.5 !important;
                color: #555;
            }









            /* --- 3. GIFT BANNER: COMPACT CARD --- */
            .gift-banner-wow-wrapper {
                padding: 15px;
                margin-top: 10px;
            }

            .gift-wow-container {
                gap: 15px;
                background: #fff;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: none;
                /* Premium card feel */
                padding-bottom: 20px;
            }

            .gift-wow-image-container {
                border-radius: 0;
                /* Full width top image */
                aspect-ratio: 2/1;
                /* Cinematic wide crop */
                max-height: 200px;
                box-shadow: none;
            }

            .gift-wow-text-content {
                padding: 0 20px;
            }

            .wow-title {
                font-size: 1.4rem;
                /* Reduced from "Huge" */
                margin-bottom: 8px;
                color: #222;
            }

            .wow-cta-button {
                width: 100%;
                /* Full width button for easy tapping */
                text-align: center;
                justify-content: center;
                padding: 12px;
                margin-top: 10px;
                font-size: 0.9rem;
            }

           


            /* --- 5. DEAL OF THE DAY: MODERN CARD --- */
            .deal-section {
                margin: 20px 15px;
                /* Tighter margins */
                padding: 20px;
                border-radius: 12px;
                background: #fff;
                /* Clean white card */
                box-shadow: none !important;
            }

            .deal-container {
                gap: 15px;
            }

            .deal-image img {
                height: 180px;
                /* Limit height so it doesn't dominate */
                object-fit: contain;
                /* Ensure entire product is visible */
                width: 100% !important;
            }

            .deal-tag {
                font-size: 0.65rem;
                padding: 4px 10px;
                letter-spacing: 1px;
            }

            .deal-title {
                font-size: 1.3rem;
                /* Refined title size */
                margin-bottom: 5px;
                font-weight: 600;
            }

            .deal-price {
                font-size: 1.5rem;
                margin-bottom: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

            .deal-price .mrp {
                font-size: 0.9rem;
                color: #999;
            }

            /* Sleek Countdown */
            .countdown {
                gap: 8px;
                margin-bottom: 20px;
            }

            .countdown-unit {
                min-width: 45px;
                padding: 5px;
                background: #f9f9f9;
                border: 1px solid #eee;
                border-radius: 6px;
            }

            .countdown-unit span {
                font-size: 1.1rem;
                font-weight: 700;
                color: #333;
            }

            .countdown-unit small {
                font-size: 0.6rem;
                text-transform: uppercase;
                color: #777;
            }

            .shop-button {
                width: 100%;
                /* Full width button */
                text-align: center;
                padding: 12px;
                font-size: 0.95rem;
                box-shadow: none !important;
            }
        }

        /* ============================================================
   ULTRA PRO: COMPACT SECTIONS (Jewelry Type & Spacing)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* --- 1. REMOVE EXCESS WHITESPACE BETWEEN SECTIONS --- */
            /* Gift Banner (Section Above) */
            .gift-banner-wow-wrapper {
                padding-bottom: 10px !important;
                /* Remove bottom space */
                margin-bottom: 0 !important;
                /* Remove bottom margin */
            }

           

            /* Deal of the Day (Section Below) */
            .deal-section {
                margin-top: 10px !important;
                /* Pull it up closer */
                padding-top: 20px !important;
            }

        
        }

        /* ============================================================
   ULTRA PRO: COMPACT DEAL & JEWELRY FIX
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* --- 1. COMPACT DEAL OF THE DAY (Fixing the Giant Ring) --- */
            .deal-section {
                margin: 10px 15px !important;
                /* Small margins from screen edge */
                padding: 20px 15px !important;
                /* Tighter internal padding */
            }

            .deal-container {
                gap: 15px !important;
                /* Less gap between image and text */
            }

            /* FORCE IMAGE TO BE SMALLER */
            .deal-image {
                display: flex;
                justify-content: center;
                margin-bottom: 5px;
            }

            .deal-image img {
                height: 160px !important;
                /* LOCKED HEIGHT (Was huge) */
                width: auto !important;
                /* Let width adjust automatically */
                max-width: 100%;
                object-fit: contain;
                /* Ensure the whole product is visible */
            }

            /* COMPACT TEXT INFO */
            .deal-tag {
                font-size: 0.65rem !important;
                /* Tiny "Deal" badge */
                padding: 4px 8px !important;
                margin-bottom: 8px !important;
            }

            .deal-title {
                font-size: 1.3rem !important;
                /* Standard App Title Size */
                margin-bottom: 5px !important;
            }

            .deal-price {
                font-size: 1.5rem !important;
                /* Readable but not shouting */
                margin-bottom: 12px !important;
            }

            /* COMPACT COUNTDOWN */
            .countdown {
                margin-bottom: 15px !important;
                gap: 8px !important;
            }

            .countdown-unit {
                min-width: 45px !important;
                /* Smaller squares */
                padding: 5px !important;
            }

            .countdown-unit span {
                font-size: 1.1rem !important;
                /* Smaller numbers */
            }

            .shop-button {
                padding: 10px 20px !important;
                /* Slimmer button */
                font-size: 0.9rem !important;
                width: 100%;
                /* Full width for easy clicking */
            }
        }

        /* ============================================================
   ULTRA PRO: HYPER COMPACT DEAL SECTION (Tight Spacing)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* 1. TIGHTEN MAIN CONTAINER */
            .deal-container {
                gap: 8px !important;
                /* Drastically reduced gap between image and text */
            }

            /* 2. TIGHTEN TEXT ELEMENTS */
            .deal-tag {
                margin-bottom: 4px !important;
                /* Pull Title closer */
                padding: 3px 8px !important;
                /* Slimmer badge */
            }

            .deal-title {
                margin-bottom: 0 !important;
                /* Remove gap between Title and Price */
                line-height: 1.1 !important;
                /* Fix line height */
                padding-bottom: 2px !important;
            }

            .deal-price {
                margin-bottom: 8px !important;
                /* Pull "Offer Expires" closer */
                line-height: 1 !important;
            }

            /* 3. TIGHTEN "OFFER EXPIRES IN" */
            .time-text,
            h4.time-text {
                margin-bottom: 4px !important;
                /* Pull Countdown boxes closer */
                margin-top: 0 !important;
                font-size: 0.9rem !important;
            }

            /* 4. TIGHTEN COUNTDOWN BOXES */
            .countdown {
                margin-bottom: 10px !important;
                /* Pull Button closer */
                gap: 5px !important;
            }

            .countdown-unit {
                padding: 4px !important;
                /* Slimmer boxes */
            }

            .countdown-unit span {
                line-height: 1 !important;
                /* Remove vertical space inside numbers */
            }

            .countdown-unit small {
                margin-top: 2px !important;
                /* Pull label closer to number */
                line-height: 1 !important;
            }

            /* 5. TIGHTEN BUTTON */
            .shop-button {
                padding: 10px 0 !important;
                /* Compact vertical padding */
                margin-top: 5px !important;
            }
        }

        /* ============================================================
   ULTRA PRO: HORIZONTAL BANNERS (Side-by-Side)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* 1. FORCE HORIZONTAL LAYOUT (Grid System) */
            .two-column-banners {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                /* Two equal columns */
                gap: 15px !important;
                /* Tight gap between them */
                padding: 10px 15px !important;
                /* Minimal outer padding */
                flex-direction: row !important;
                /* Override old flex column rule */
            }

            /* 2. COMPACT BANNER ITEM */
            .banner-item {
                width: 100% !important;
                margin: 0 !important;
                /* Remove old margins */
                border-radius: 0px !important;
                overflow: hidden;
            }

            /* 3. SMALLER IMAGE HEIGHT */
            .banner-img {
                height: 160px !important;
                /* Much shorter height (Was 350px+) */
                object-fit: cover;
            }

            /* 4. COMPACT OVERLAY TEXT */
            .banner-overlay {
                padding: 10px !important;
                /* Tighter padding */
                justify-content: flex-end !important;
                /* Align bottom */
                background: transparent !important;
            }

            .banner-overlay h3 {
                font-size: 1rem !important;
                /* Small, crisp title */
                margin-bottom: 5px !important;
                line-height: 1.2;
            }

            /* 5. MINI "SHOP NOW" BUTTON */
            .banner-button {
                padding: 6px 12px !important;
                font-size: 0.7rem !important;
                border-width: 1px !important;
                margin-top: 0 !important;
                display: inline-block;
            }
        }

       


      

        @media (max-width: 768px) {

            /* 1. TIGHTEN SECTION SPACING */
            .dynasty-featured-section {
                padding: 20px 0 30px 0 !important;
                /* Compact vertical spacing */
                margin-top: 0 !important;
                /* Remove top gap */
                background: #fff !important;
                /* Clean background */
            }

            .dynasty-section-title {
                font-family: 'Castoro', serif;
                text-align: center;
                font-size: 20px !important;
                color: #1a1a1a;
                margin-bottom: 20px;
                font-weight: 500;
                letter-spacing: 0.7px;
            }

            .dynasty-section-subtitle {
                font-size: 0.8rem !important;
                /* Tiny subtitle */
                color: #777;
                margin-bottom: 20px !important;
                /* Space before products */
                padding: 0 20px;
            }

            /* 2. HORIZONTAL SCROLL CONTAINER */
            .dynasty-product-grid {
                display: flex !important;
                /* Switch to Row */
                flex-wrap: nowrap !important;
                /* Prevent wrapping */
                overflow-x: auto !important;
                /* Enable Scroll */
                gap: 15px !important;
                /* Space between cards */
                padding: 5px 15px 20px 15px !important;
                /* Padding for shadow */
                scroll-snap-type: x mandatory;
                /* Snap effect */
                -webkit-overflow-scrolling: touch;
                /* Smooth scroll */
                justify-content: flex-start !important;
            }

            /* Hide Scrollbar */
            .dynasty-product-grid::-webkit-scrollbar {
                display: none;
            }

            /* 3. COMPACT PRODUCT CARD */
            .dynasty-card {
                min-width: 180px !important;
                /* Fixed width (fits ~2.5 on screen) */
                max-width: 180px !important;
                flex: 0 0 auto !important;
                /* Prevent shrinking */
                scroll-snap-align: start;
                /* Lock to start */
                border-radius: 0px !important;
                gap: 10px !important;

                border: 1px solid #e3e3e3 !important;
            }

            /* 4. OPTIMIZE IMAGE */
            .dynasty-image-wrapper {
                padding-top: 100% !important;
                /* 4:5 Aspect Ratio (Taller) */
                border-bottom: 1px solid #f0f0f0;
            }

            .dynasty-img-main {
                transform: none !important;
                /* Disable zoom on mobile */
            }

            /* 5. COMPACT DETAILS */
            .dynasty-details {
                padding: 10px !important;
                /* Tighter padding */
                text-align: left !important;
                /* Left align looks cleaner */
            }

            .dynasty-product-title {
                font-size: 0.85rem !important;
                /* Readable small font */
                margin-bottom: 5px !important;
                margin-top: 5px !important;
                white-space: nowrap;
                /* Force single line */
                overflow: hidden;
                text-overflow: ellipsis;
                /* Add ... if too long */
                font-weight: 500 !important;
                text-align: center;
            }

            .dynasty-price-wrapper {
                font-size: 0.95rem !important;
                /* Price size */
                color: black !important;
                /* Brand color */
                font-weight: 500 !important;
                text-align: center;
            }

            /* Hide Hover Button on Mobile */
            .dynasty-view-btn {
                display: none !important;
            }
        }

        /* ============================================================
   ULTRA PRO: REMOVE GAP (Testimonials -> Royal Collection)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* 1. TIGHTEN BOTTOM OF TESTIMONIALS */
            .testimonials-section {
                padding-bottom: 0 !important;
                /* Remove bottom padding */
                margin-bottom: 0 !important;
                /* Remove bottom margin */
                border-bottom: none !important;
                /* Seamless look */
            }

            /* 2. TIGHTEN TOP OF ROYAL COLLECTION */
            .dynasty-featured-section {
                margin-top: 0 !important;
                /* Glue to section above */
                padding-top: 20px !important;
                /* Minimal spacing before title */
                background: transparent !important;
                /* Blend backgrounds if needed */
            }

            /* Optional: If the Title itself has too much top margin */
            .dynasty-section-title {
                margin-top: 20px !important;
            }
        }

        /* ============================================================
   ULTRA PRO: HERO SLIDER (Compact Mobile Version)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* 1. COMPACT CONTAINER HEIGHT */
            .hero-slider {
                height: 280px !important;
                /* Fixed mobile height (was likely 500px+) */
                min-height: 280px !important;
                margin-top: 0 !important;
                /* Ensure it touches the header */
                margin-bottom: 0 !important;
                /* No gap below */
            }

            .slider-track {
                height: 100% !important;
            }

            /* 2. OPTIMIZE SLIDE IMAGE */
            .slide {
                height: 100% !important;
                background-size: cover !important;
                background-position: center center !important;
                /* Focus on center of image */
                display: flex !important;
                align-items: center !important;
                /* Vertically center text */
                justify-content: center !important;
                /* Horizontally center text */
            }

            /* 3. COMPACT TEXT CONTENT */
            .slide-content {
                position: relative !important;
                top: auto !important;
                /* Remove old positioning */
                left: auto !important;
                transform: none !important;

                width: 85% !important;
                /* Keep text away from edges */
                padding: 20px !important;
                text-align: center !important;

                /* Glassy Backdrop (Makes text readable on any image) */
                background: rgba(0, 0, 0, 0.4) !important;
                backdrop-filter: blur(2px);
                border-radius: 12px;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            /* 4. TYPOGRAPHY SCALING */
            .slide-content h1 {
                font-size: 1.6rem !important;
                /* Readable Title */
                margin-bottom: 8px !important;
                line-height: 1.2 !important;
                color: #fff !important;
                text-transform: uppercase;
                letter-spacing: 1px;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }

            .slide-content p {
                font-size: 0.9rem !important;
                /* Readable Subtitle */
                line-height: 1.4 !important;
                color: #f0f0f0 !important;
                margin-bottom: 0 !important;
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;

            }
        }

        /* ============================================================
   ULTRA PRO: HERO SLIDER (Show All Text Lines)
   Paste at the very bottom of your CSS file.
   ============================================================ */

        @media (max-width: 768px) {

            /* 1. TEXT BOX CONTAINER */
            .slide-content {
                height: auto !important;
                /* Allow box to grow with text */
                max-height: 85% !important;
                /* Safety: Don't go taller than the slider itself */
                overflow-y: auto !important;
                /* Scroll text ONLY if it's insanely long */
                padding: 15px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
            }

            /* 2. DESCRIPTION TEXT (The Key Fix) */
            .slide-content p {
                display: block !important;
                /* Disable the "cutting off" logic */
                -webkit-line-clamp: unset !important;
                /* Remove line limits */
                line-clamp: unset !important;
                overflow: visible !important;
                /* Show everything */
                white-space: normal !important;
                /* Wrap text naturally to next line */

                font-size: 0.75rem !important;
                /* Keep font small so more fits */
                line-height: 1.4 !important;
                margin-bottom: 0 !important;
            }

            /* 3. TITLE TEXT */
            .slide-content h1 {
                font-size: 1.2rem !important;
                white-space: normal !important;
                /* Allow title to wrap too if needed */
            }
        }



        /* ===== Compact Layout Overrides ===== */

        /* Global spacing reduction */
        section,
        .section,
        .content-section {
            padding-top: 30px !important;
            padding-bottom: 30px !important;
        }

        /* Reduce spacing between headings and text */
        /* h1,
        h2,
        h3 {
            margin-bottom: 12px !important;
            margin-top: 24px !important;
        } */

        p {
            margin-bottom: 10px !important;
            line-height: 1.5;
        }

        /* Reduce container padding */
        .container,
        .main-container {
            padding-top: 20px !important;
            padding-bottom: 20px !important;
        }

        /* Reduce large hero/banner height spacing */
        .hero,
        .banner,
        .page-hero {
            padding-top: 60px !important;
            padding-bottom: 60px !important;
        }




        /* Remove unnecessary top margins */
        .mt-large {
            margin-top: 20px !important;
        }

        /* Compact testimonial section */
        .testimonials-section {
            padding: 40px 0 !important;
        }

        .testimonial-card {
            padding: 18px !important;
        }

        /* Reduce collection gaps */
        .collection-grid {
            gap: 20px !important;
            margin-bottom: 40px !important;
        }

        /* Reduce spacing between text blocks */
        .text-block {
            margin-bottom: 16px !important;
        }

        /* Mobile tuning */
        @media (max-width: 768px) {
            /* h1 {
                font-size: 1.6rem;
            } */
/* 
            h2 {
                font-size: 1.3rem;
            } */

            section,
            .section {
                padding-top: 24px !important;
                padding-bottom: 24px !important;
            }

            .container {
                padding: 0 16px !important;
            }
        }

        /* ===============================
   MOBILE FONT SIZE CONTROL
   Applies only on screens ≤ 768px
   =============================== */

       

            

        /* 90% Screen Layout Wrapper */
        .page-wrapper-90 {
            width: 90vw;
            /* 90% of viewport width */
            max-width: 1600px;
            /* Optional: prevent ultra wide on 4K */
            margin: 0 auto;
            /* Center horizontally */
            box-sizing: border-box;
            padding: 0 20px;
        }

        /* Mobile: allow more width */
        @media (max-width: 768px) {
            .page-wrapper-90 {
                width: 95vw;
                /* More space on small screens */
            }
        }

        /* ============================================
   RECTANGULAR CTA BUTTON (NO RADIUS)
   ============================================ */

        .wow-cta-button {
            border-radius: 0 !important;
            /* REMOVE ROUNDING */
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 14px 36px;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.5px;

            background: transparent;
            color: #832422;
            border: 2px solid #832422;

            transition: all 0.3s ease;
        }

        /* Hover */
        .wow-cta-button:hover {
            background: #832422;
            color: #ffffff;
            transform: translateY(-2px);
        }

        /* Mobile: full width rectangular button */
        @media (max-width: 768px) {
            .wow-cta-button {
                width: 100%;
                border-radius: 0 !important;
                /* DOUBLE SAFETY */
                padding: 14px 0;
            }
        }

        /* ============================================
   TWO-COLUMN BANNER — RECTANGULAR SHOP BUTTON
   ============================================ */

        .banner-button {
            border-radius: 0 !important;
            /* NO ROUNDING */

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 10px 30px;
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.5px;

            background: transparent;
            color: #ffffff;
            border: 2px solid #ffffff;

            transition: all 0.3s ease;
        }

        /* Hover effect */
        .banner-button:hover {
            background: #832422;
            color: #ffffff;
            transform: translateY(-2px);
        }

        /* Mobile: compact rectangular button */
        @media (max-width: 768px) {
            .banner-button {
                border-radius: 0 !important;
                /* double safety */
                padding: 10px 18px;
                font-size: 0.75rem;
            }
        }

      
        /* --- 1. BASE SLIDER STYLES (No Cutting) --- */
        .main-slider-viewport {
            width: 100%;
            position: relative;
            overflow: hidden;
            cursor: grab;
            touch-action: pan-y;
            background-color: #000;
            aspect-ratio: 16 / 7.4; /* Same ratio as video banner */
        }

        .main-slider-viewport:active {
            cursor: grabbing;
        }

        .main-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.9s ease-in-out;
}

.main-slide {
    min-width: 100%;
    height: 100%;
}

.main-slider-viewport {
    overflow: hidden;
    width: 100%;
}

.main-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
        .main-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }

     

.main-dot.active {
            background-color: rgba(255, 255, 255, 0.95);
            transform: scale(1.3);
        }


       
        /* --- 4. VIDEO BANNER --- */
        .video-section { padding: 0; margin: 0; }

        .video-banner-container {
            width: 100%;
            aspect-ratio: 16 / 7.4; /* Matches banner ratio */
            position: relative;
            overflow: hidden;
            background: #000;
        }

        .video-banner {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        video.video-banner { object-fit: cover; }

        iframe.video-banner {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: 177.77vh;
            height: 56.25vw;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .main-slider-viewport {
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    cursor: grab;
}

.main-slider-track {
    display: flex;
    transition: transform 0.9s ease;
    will-change: transform;
}

.main-slide {
    min-width: 100%;
    user-select: none;
}

.main-slide img {
    width: 100%;
    display: block;
    pointer-events: none;
}

@media (max-width: 768px) {

    .main-slider-viewport {
        overflow: hidden;
        position: relative;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }

    .main-slider-track {
        display: flex;
        transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .main-slide {
        min-width: 100%;
        flex-shrink: 0;
        user-select: none;
    }

    .main-slide img {
        width: 100%;
        height: auto;
        display: block;
        pointer-events: none;
        -webkit-user-drag: none;
        user-select: none;
    }

    .main-slider-dots {
        bottom: 12px;
    }

.main-dot {
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.25);
            border: 1.2px solid rgba(255, 255, 255, 0.25);
    }
}

        /* --- MOBILE --- */
        @media (max-width: 768px) {
            .main-slider-viewport,
            .video-banner-container {
                aspect-ratio: 16 / 7.4 !important;
            }
        }

     

                                    .premium-flash-sale {
                                        background: #ffffff;
                                        padding: 40px 0;
                                        margin: 20px 0;
                                        position: relative;
                                       
                                        overflow: hidden;
                                        min-height: 400px;
                                    }

                                    /* Background Decoration for "WOW" Factor */
                                    .premium-flash-sale::before {
                                        content: "";
                                        position: absolute;
                                        top: 20%;
                                        left: 0%;
                                        font-size: 15rem;
                                        font-weight: 900;
                                        color: #f9f9f9;
                                        z-index: 0;
                                        letter-spacing: 20px;
                                    }

                                    .luxury-container {
                                        display: flex;
                                        align-items: flex-start;
                                        max-width: 1200px;
                                        margin: auto;
                                        gap: 60px;
                                        position: relative;
                                        z-index: 1;
                                    }

                                    /* Image Wrapper with Floating Animation */
                                    .luxury-image-box {
                                        flex: 0 0 40%;
                                        display: flex;
                                        justify-content: center;
                                    }

                                    .luxury-image-box img {
                                        width: 100%;
                                        max-width: 400px;
                                        /* Reduced from 450px for smaller height */
                                        max-height: 480px;
                                        /* Force small height */
                                        object-fit: cover;
                                        border-radius: 4px;
                                        margin-top: 40px;

                                        transition: 0.5s ease;
                                    }

                                    

                                    /* Content Styling */
                                    .luxury-info {
                                        flex: 1;
                                    }

                                    .deal-badge {
                                        display: inline-block;
                                        background: #ffffff;
                                        color: white;
                                        padding: 6px 20px;
                                        font-size: 0.8rem;
                                        font-weight: 600;
                                        letter-spacing: 3px;
                                        text-transform: uppercase;
                                        margin-bottom: 20px;
                                    }

                                    .luxury-info h2 {
                                        font-family: 'Castoro', serif;
                                        font-size: 2.8rem !important;
                                        line-height: 1.1;
                                        color: #1a1a1a;
                                        margin-bottom: 15px !important;
                                        text-align: left;
                                        text-transform: uppercase;
                                        letter-spacing: 2px;
                                    }

                                    .luxury-info .product-name {
                                        font-size: 1.8rem;
                                        color: #000;
                                        font-weight: 300;
                                        border-left: 3px solid #832422;
                                        padding-left: 15px;
                                        margin-bottom: 30px;
                                    }

                                    /* Modern Minimalist Timer */
                                    .luxury-timer {
                                        display: flex;
                                        gap: 20px;
                                        margin: 30px 0;
                                    }

                                    .lux-unit {
                                        text-align: center;
                                        min-width: 60px;
                                    }

                                    .lux-unit span {
                                        display: block;
                                        font-size: 2rem;
                                        font-weight: 700;
                                        color: #1a1a1a;
                                        font-family: 'Inter', sans-serif;
                                    }

                                    .lux-unit small {
                                        text-transform: uppercase;
                                        font-size: 0.7rem;
                                        letter-spacing: 2px;
                                        color: #999;
                                    }

                                    /* Price Styling */
                                    .luxury-price {
                                        margin: 30px 0;
                                    }

                                    .sale-price {
                                        font-size: 2.5rem;
                                        font-weight: 600;
                                        color: black;
                                        font-family: 'Inter', sans-serif;
                                    }

                                    .mrp-price {
                                        text-decoration: line-through;
                                        color: #ccc;
                                        margin-left: 15px;
                                        font-size: 1.5rem;
                                    }

                                    .luxury-btn {
                                        background: white;
                                        color: #1a1a1a !important;
                                        padding: 15px 40px;
                                        font-size: 1.1rem;
                                        font-weight: 700;
                                        letter-spacing: 4px;
                                        text-decoration: none;
                                        border: 2px solid #1a1a1a;
                                        transition: 0.4s;
                                    }

                                    .luxury-btn:hover {
                                        background: #832422;
                                        color: white !important;
                                        border: 2px solid white;
                                    }

                                    /* =========================================
   COMPACT MOBILE FLASH SALE (Anti-Cut Fix)
   ========================================= */

                                    @media (max-width: 768px) {

                                        /* 1. Section Container Reset */
                                        .premium-flash-sale {
                                            padding: 30px 15px !important;
                                            /* Reduced from 40px */
                                            min-height: auto !important;
                                            /* Let content define height */
                                            margin: 10px 0 !important;
                                        }

                                        /* 2. Fix the "THEDYNASTY" Background Text - THE CUT FIX */
                                        .premium-flash-sale::before {
                                            font-size: 4rem !important;
                                            /* Reduced from 15rem to prevent overflow */
                                            top: 5% !important;
                                            left: 5% !important;
                                            letter-spacing: 5px !important;
                                            opacity: 0.3;
                                            /* Make it subtle on small screens */
                                        }

                                        /* 3. Luxury Container Stacking */
                                        .luxury-container {
                                            flex-direction: column !important;
                                            /* Stack image on top of text */
                                            gap: 25px !important;
                                            /* Reduced from 60px */
                                            text-align: center;
                                        }

                                        /* 4. Image Box Refinement */
                                        .luxury-image-box {
                                            flex: 0 0 100%;
                                            width: 100%;
                                        }

                                        .luxury-image-box img {
                                            max-width: 220px !important;
                                            /* Smaller for mobile */
                                            max-height: 260px !important;
                                            box-shadow: 10px 10px 0px #ffffff !important;
                                            /* Smaller offset */
                                        }

                                        /* 5. Info & Typography Scaling */
                                        .luxury-info {
                                            width: 100%;
                                        }

                                        .deal-badge {
                                            padding: 4px 15px !important;
                                            font-size: 0.7rem !important;
                                            letter-spacing: 2px !important;
                                            margin-bottom: 15px !important;
                                        }

                                        
    

                                        

                                        /* 6. Compact Timer */
                                        .luxury-timer {
                                            justify-content: center !important;
                                            gap: 10px !important;
                                            margin: 20px 0 !important;
                                        }

                                        .lux-unit {
                                            min-width: 45px !important;
                                        }

                                        .lux-unit span {
                                            font-size: 1.4rem !important;
                                            /* Smaller numbers */
                                        }

                                        .lux-unit small {
                                            font-size: 0.6rem !important;
                                            letter-spacing: 1px !important;
                                        }

                                        /* 7. Price & Button */
                                        .luxury-price {
                                            margin: 15px 0 25px 0 !important;
                                        }

                                        .sale-price {
                                            font-size: 1.8rem !important;
                                        }

                                        .mrp-price {
                                            font-size: 1.1rem !important;
                                            margin-left: 10px !important;
                                        }

                                    }
                                    @media (max-width: 768px) {

    .luxury-btn {
        display: inline-block;

        padding: 5px 18px !important;   
        
        font-size: 1.3rem !important;     
        font-weight: 700;

        letter-spacing: 1px !important;

        width: auto !important;         
        text-align: center;
    }

}

                                    @media (max-width: 600px) {

                                        /* Standardizes vertical spacing for every major section */
                                        section,
                                        .dynasty-featured-section,
                                        .premium-flash-sale,
                                        .shop-container {
                                            padding-top: 15px !important;
                                            padding-bottom: 15px !important;
                                            margin-top: 5px !important;
                                            margin-bottom: 5px !important;
                                        }

                                        /* Force all elements to stay inside the screen width */
                                        * {
                                            box-sizing: border-box !important;
                                        }

                                        html,
                                        body {
                                            overflow-x: hidden;
                                        }
                                    }

                                    @media (max-width: 600px) {
                                        .premium-flash-sale {
                                            min-height: auto !important;
                                            padding: 20px 10px !important;
                                        }

                                        /* Shrink the background text so it doesn't cause overflow */
                                        .premium-flash-sale::before {
                                            font-size: 3rem !important;
                                            top: 5% !important;
                                            letter-spacing: 5px !important;
                                        }

                                        .luxury-image-box img {
                                            max-width: 180px !important;
                                            /* Smaller image */
                                            max-height: 220px !important;
                                            box-shadow: 8px 8px 0px #ffffff !important;
                                            /* Smaller shadow */
                                        }

                                        

                                        /* Tighter Countdown Timer */
                                        .luxury-timer {
                                            gap: 10px !important;
                                            margin: 10px 0 !important;
                                        }

                                        .lux-unit span {
                                            font-size: 1.2rem !important;
                                        }

                                        .sale-price {
                                            font-size: 1.6rem !important;
                                        }
                                    }

                                    @media (max-width: 600px) {

                                        
                                        .results-header h2,
                                        h1 {
                                            font-size: 1.3rem !important;
                                            margin-top: 5px !important;
                                            margin-bottom: 5px !important;
                                        }

                                        /* Compact Filter Area */
                                        .filter-controls {
                                            padding: 10px !important;
                                            gap: 8px !important;
                                        }

                                        .search-wrapper,
                                        select.custom-select,
                                        .btn-apply {
                                            height: 32px !important;
                                            /* Slimmer inputs */
                                            font-size: 11px !important;
                                        }

                                        /* Product Grid Refinement */
                                        .product-grid,
                                        .dynasty-product-grid {
                                            gap: 10px 8px !important;
                                            border-top: 1px solid #f0f0f0 !important;
                                        }

                                        .product-info {
                                            padding: 5px !important;
                                        }

                                        /* Fix the line-clamp warning from your IDE */
                                        .product-name {
                                            
                                            line-height: 1.2;
                                            display: -webkit-box;
                                            -webkit-line-clamp: 2;
                                            line-clamp: 2;
                                            /* Clears the VS Code error */
                                            -webkit-box-orient: vertical;
                                            overflow: hidden;
                                            text-align: center;
                                        }
                                    }

                                    /* =========================================
   ULTRA-COMPACT FLASH SALE (Internal Gap Fix)
   ========================================= */

                                    @media (max-width: 768px) {

                                        /* 1. Reduce overall section padding */
                                        .premium-flash-sale {
                                            padding: 15px 10px !important;
                                            /* Tighten outer container */
                                            min-height: auto !important;
                                        }

                                        /* 2. Tighten Info Section and Header Gaps */
                                        .luxury-info {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                        }

                                        .deal-badge {
                                            margin-bottom: 8px !important;
                                            /* Pull Title closer to Badge */
                                            padding: 4px 12px !important;
                                        }

                                        

                                        .luxury-info .product-name {
                                            
                                            margin-bottom: 10px !important;
                                            /* Pull Timer closer to Name */
                                            padding-left: 0 !important;
                                            border-left: none !important;
                                            text-align: center;
                                        }
                                      

                                        /* 3. Remove Gaps in the Modern Timer */
                                        .luxury-timer {
                                            margin: 5px 0 !important;
                                            /* Tighten space between text and price */
                                            gap: 12px !important;
                                            /* Bring individual units closer */
                                        }

                                        .lux-unit span {
                                            font-size: 1.5rem !important;
                                            /* Smaller, sharper numbers */
                                            line-height: 1;
                                        }

                                        .lux-unit small {
                                            font-size: 0.55rem !important;
                                            letter-spacing: 1px !important;
                                            margin-top: -2px;
                                            /* Pull label closer to number */
                                        }

                                        /* 4. Compact Price Styling */
                                        .luxury-price {
                                            margin: 8px 0 !important;
                                            /* Reduced vertical space */
                                        }

                                        .sale-price {
                                            font-size: 1.7rem !important;
                                        }

                                        .mrp-price {
                                            font-size: 1.1rem !important;
                                            margin-left: 8px !important;
                                        }

                                        

                                        /* 6. Background Decoration Fix */
                                        .premium-flash-sale::before {
                                            font-size: 3rem !important;
                                            /* Small background text to prevent overflow */
                                            top: 2% !important;
                                            letter-spacing: 5px !important;
                                        }
                                    }

                                    .banner-link-wrapper {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        text-decoration: none;
                                        position: relative;
                                        overflow: hidden;
                                    }



                                    /* Hover: only image zooms, box stays fixed */
                                    .banner-item:hover {
                                        box-shadow: none !important;
                                    }

                                    .banner-img {
                                        width: 100%;
                                        display: block;
                                        transition: transform 0.5s ease;
                                    }

                                    .banner-item:hover .banner-img {
                                        transform: scale(1.05);
                                    }

                                    @media (max-width: 768px) {

                                        /* Proportional scaling for mobile */
                                        html {
                                            font-size: 12px !important;
                                        }

                                        .two-column-banners {
                                            padding: 10px !important;
                                            gap: 15px !important;
                                        }

                                        .banner-overlay h3 {
                                            font-size: 1.2rem !important;
                                            /* Elegant, smaller heading */
                                        }
                                    }

                                    .dynasty-slider-viewport {
                                        overflow: hidden;
                                        /* Hide scrollbars */
                                        width: 100%;
                                        position: relative;
                                        cursor: grab;
                                    }

                                    .dynasty-product-grid {
                                        display: flex;
                                        gap: 20px;
                                        /* Space between cards */
                                        width: max-content;
                                        /* Ensure the grid expands to fit all cards */
                                        will-change: transform;
                                    }

                                    .dynasty-card {
                                        flex: 0 0 400px;
                                        /* Adjust card width as needed */
                                        user-select: none;
                                    }

                                    

                                  

                                    /* --- 7. Two-Column Banners FIX --- */




                                    /* Updated Mobile Response: This ensures it STAYS 2 columns even on phones */
                                    @media (max-width: 900px) {
                                        .two-column-banners {
                                            grid-template-columns: repeat(2, 1fr) !important;
                                            /* Keep 2 columns on mobile */
                                            padding: 20px 10px;
                                            gap: 20px;
                                        }

                                        .banner-img {
                                            height: 200px !important;
                                            /* Shorter height so two fit on screen nicely */
                                        }

                                        .two-column-banners>* {
                                            width: 100%;
                                            /* full column width */
                                            height: 200px;
                                            /* set height for all cards */
                                        }
                                    }









                                    /* --- Independent Heading Styles --- */
                                    .banner-main-header {
                                        text-align: center;
                                        padding: 20px 20px 20px;
                                        /* Space above the heading */
                                        background-color: #ffffff;
                                    }

                                    /* .banner-main-title {
    font-family: 'Castoro', serif; font-size: 2.0rem; color: #1a1a1a; margin-bottom: 5px; font-weight: 500; letter-spacing: 0.7px; 
    font-size: 2.7rem !important;
    color: #1a1a1a;
    margin-bottom: 5px !important;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-transform: uppercase;
} */



                                    /* --- Ensure Banner Grid is Clean --- */
                                    .two-column-banners {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;
                                        padding: 20px 5%;
                                        max-width: 1400px;
                                        margin: 0 auto;
                                    }

                                    /* --- Responsive Adjustments --- */
                                    @media (max-width: 768px) {
                                        .banner-main-header {
                                            padding: 10px 15px 10px;
                                        }

                                       .banner-main-title {
    font-family: 'Castoro', serif !important;
   
    text-align: center !important;
    padding: 10px 0 !important;
    margin: 24px 0 5px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
}
                                        .banner-main-subtitle {
                                            font-size: 0.8rem;
                                            letter-spacing: 1px;
                                        }
                                    }
                                    @media (max-width: 768px) {
    h2.banner-main-title,
    .banner-main-title {
        font-size: 20px !important;
    }
}
@media (max-width: 768px) {
    .banner-main-title {
        font-family: 'Castoro', serif !important;
        
        line-height: 16px !important;
        font-weight: 400 !important;
        color: #111111 !important;

        text-align: center !important;

        margin: 30px 0 20px !important;
        padding: 0 !important;

        letter-spacing: 0 !important;
        text-transform: uppercase !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}
                                    /* ============================================================
   ULTRA PRO: 3-COLUMN GRID FIX (FOR MOBILE)
   ============================================================ */
                                    @media (max-width: 768px) {


                                        .collection-guide-container {
                                            display: grid !important;
                                            grid-template-columns: repeat(3, 1fr) !important;
                                            gap: 5px !important;
                                            overflow-x: hidden !important;
                                            width: 100% !important;
                                        }

                                        .guide-item {
                                            min-width: 0 !important;
                                            max-width: 100% !important;
                                            flex: none !important;
                                            box-shadow: none !important;
                                            border-radius: 0 !important;
                                            overflow: hidden;
                                        }

                                        .guide-img {
                                            /* Reduced height so 3 items fit nicely on one screen height */
                                            height: 120px !important;
                                            width: 100% !important;
                                            object-fit: cover;
                                        }

                                        .guide-link-text {
                                            padding: 8px 2px !important;
                                            font-size: 0.65rem !important;
                                            /* Smaller font for 3-col layout */
                                            text-align: center;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            background: #832422 !important;
                                            color: #fff !important;
                                            display: block;
                                        }
                                    }

                                    .banner-main-title {
                                        font-family: 'Castoro', serif !important;
                                        font-size: 2.5rem !important;
                                        color: #1a1a1a !important;
                                        margin-bottom: 5px !important;
                                        font-weight: 500 !important;
                                        letter-spacing: 0.7px !important;
                                    }

                                    



                                    .main-content-wrapper {
                                        width: 90%;
                                        /* This creates the white space on left/right */
                                        max-width: 1400px;
                                        /* Prevents the site from looking too stretched on 4K monitors */
                                        margin: 0 auto;
                                        /* Centers the content */
                                        background-color: #fff;
                                        box-sizing: border-box;
                                    }


                                    /* --- UNIVERSAL SHADOW REMOVAL (Laptop & Mobile) --- */
                                    .banner-item,
                                    .guide-item,
                                    .dynasty-card,
                                    .collection-card,
                                    .real-review-card,
                                    .testimonial-card,
                                    .product-card {
                                        box-shadow: none !important;
                                        -webkit-box-shadow: none !important;
                                        /* Forces removal on iPhones/Safari */
                                        -moz-box-shadow: none !important;
                                        border: none !important;
                                        /* Sometimes thin borders look like shadows on mobile */
                                        outline: none !important;
                                    }

                                    /* Specifically target the hover states that mobile often "sticks" to */
                                    .banner-item:hover,
                                    .guide-item:hover,
                                    .dynasty-card:hover,
                                    .collection-card:hover {
                                        box-shadow: none !important;
                                        -webkit-box-shadow: none !important;
                                    }

                                    /* Remove any background gradients that might look like shadows */
                                    .banner-overlay,
                                    .collection-overlay {
                                        box-shadow: none !important;
                                    }

                                    @media (max-width: 768px) {
                                        .collection-guide-section {
                                            padding: 10px 10px !important;
                                        }


                                        .collection-guide-section {
                                            padding: 10px 15px 30px 15px !important;
                                            /* Remove huge white gaps */
                                            margin-top: 0 !important;

                                        }

                                    }
                                  
/* ==========================================
   MAIN HERO SLIDER
========================================== */

.main-slider-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 16 / 7.4;
}

.main-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    will-change: transform;
}

.main-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.main-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ==========================================
   DOTS BELOW THE BANNER
========================================== */

.main-slider-dots-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0 25px;
    clear: both;
}

.main-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.main-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bdbdbd;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.main-dot:hover {
    background: #9e9e9e;
}

.main-dot.active {
    background: #832422;
    transform: scale(1.2);
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {
    .main-slider-viewport,
    .video-banner-container {
        aspect-ratio: 16 / 9 !important;
    }

    .main-slider-dots-wrapper {
        margin: 10px 0 20px;
    }

    .main-slider-dots {
        gap: 7px;
    }

    .main-dot {
        width: 7px;
        height: 7px;
    }
}

/* ==========================================
   COLLECTIONS SECTION — GROWN BRILLIANCE STYLE
   Interactive Multi-Column Carousel
========================================== */

.collections-slider-section {
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
}

.collections-slider-section .section-title {
    text-align: center;
    font-family: 'Castoro', serif;
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #111;
    margin: 10px 0 40px;
    text-transform: uppercase;
}

/* ===== WRAPPER ===== */
.collections-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 30px;
    box-sizing: border-box;
}

/* ===== SLIDER TRACK ===== */
.collections-slider {
    display: flex;
    gap: 24px;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* ===== SLIDES =====
   Main slide occupies 72%.
   Remaining 28% shows preview of next slide.
*/
.collections-slide {
    flex: 0 0 80%;
    position: relative;
    display: block;
    height: 700px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    background: #f5f5f5;
}

/* ===== IMAGE ===== */
.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.collections-slide:hover .slide-img {
    transform: scale(1.05);
}

/* ===== OVERLAY ===== */
.slide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 60px;
    box-sizing: border-box;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0) 75%
    );
}

/* ===== TITLE ===== */
.slide-overlay h3 {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: #ffffff;
}

/* ===== BUTTON ===== */
.slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    background: #ffffff;
    color: #111111;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s ease;
}

.slide-button:hover {
    background: #832422;
    color: #ffffff;
}

/* ===== NAVIGATION ARROWS ===== */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #111111;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.slider-arrow:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}



/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {
    .collections-slider-section {
        padding: 0px 0;
    }

    .collections-slider-section .section-title {
        font-size: 20px;
        margin-bottom: 20px;
        margin-top: 0px;
        padding: 0 0px;
        letter-spacing: 1px;
    }

    .collections-slider-wrapper {
        padding: 0 10px;
    }

    .collections-slider {
        gap: 12px;
    }

    .collections-slide {
        flex: 0 0 80%;
        height: 200px;
    }

    .slide-overlay {
        padding: 24px;
    }

    .slide-overlay h3 {
        font-size: 2.2rem;
        margin-bottom: 12px;
        line-height: 1.05;
    }

    .slide-button {
        padding: 10px 22px;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

   .slider-arrow,
    .prev-arrow,
    .next-arrow {
        display: none !important;
    }

    /* Enable horizontal swipe scrolling */
    .main-slider-viewport,
    .main-slider-track {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent image selection while swiping */
    .main-slide img,
    .main-slide video {
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }
}


/* Desktop */
.collections-slider-wrapper {
    width: 83vw;          /* same as your .page-wrapper-90 */
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;           /* remove internal padding */
    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1024px) {
    .collections-slider-wrapper {
        width: 90vw;
        padding: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .collections-slider-wrapper {
        width: 90vw;      /* same as your .page-wrapper-90 mobile */
        padding: 0;
    }
}


.collections-slide .slide-overlay h3 {
    font-size: 32px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin: 0 0 15px 0;
    padding: 0;
    text-align: left;
    max-width: 80%;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.collections-slide .slide-button {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.collections-slide .slide-button:hover {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}

@media (max-width: 768px) {
    .collections-slide .slide-overlay h3 {
        font-size: 18px;
        margin-bottom: 10px;
        max-width: 100%;
    }

    .collections-slide .slide-button {
        padding: 10px 20px;
        font-size: 13px;
    }
}
@media (max-width: 768px) {
    .two-column-banners {
        width: 95vw;      /* same as your .page-wrapper-90 mobile */
        padding: 0;
    }
}
@media (max-width: 768px) {

    /* Remove extra top and bottom spacing */
    .premium-flash-sale {
        padding: 20px 15px !important;
        margin: 0 !important;
    }

    /* Stack title → image → content */
    .luxury-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0px !important; /* reduced gap */
    }

    /* Make .luxury-info behave like its children */
    .luxury-info {
        display: contents;
    }

    /* Title at top */
    .luxury-info h2 {
        order: 1;
        margin-bottom: 15px !important;
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    /* Product image below title */
    .luxury-image-box {
        order: 2;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .luxury-image-box img {
        width: 260px !important;       /* increased width */
        max-width: 85vw !important;    /* responsive */
        height: 260px !important;      /* increased height */
        max-height: none !important;
        object-fit: contain !important;
        margin: 0 !important;          /* removes 50px top margin */
        display: block;
    }

    /* Product name below image */
    .luxury-info .product-name {
        order: 3;
        margin: 10px 0 15px !important;
        text-align: center !important;
        font-size: 1.3rem !important;
    }

    /* Timer */
    .luxury-timer {
        order: 4;
        margin: 10px 0 !important;
    }

    /* Price */
    .luxury-price {
        order: 5;
        margin: 10px 0 !important;
        text-align: center;
    }

    /* Buy button */
    .luxury-btn {
        order: 6;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}
/* =========================================
   UPDATED CUSTOM BANNER STYLES
========================================= */
/* Remove the dark overlay completely */
.td-custom-banner-overlay {
    display: none;
}

/* Make sure the image is shown in full clarity */
.td-custom-banner-section {
    position: relative;
    width: calc(100% - 120px);
    max-width: 1400px;
    height: 500px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 0;

    background-image: url('/images/home-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Remove any visual effects */
    filter: none;
    opacity: 1;
    box-shadow: none;
}

/* Keep button at bottom center */
.td-custom-banner-content {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Transparent button with white border */
.td-custom-banner-btn {
    display: inline-block;
    padding: 16px 42px;
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: none;
}

.td-custom-banner-btn:hover {
    background: #ffffff;
    color: #000000;
}

/* Tablet */
@media (max-width: 992px) {
    .td-custom-banner-section {
        width: calc(100% - 100px);
        height: 400px;
    }

    .td-custom-banner-content {
        bottom: 30px;
    }

    .td-custom-banner-btn {
        padding: 14px 34px;
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .td-custom-banner-section {
        width: calc(100% - 30px);
        height: 180px;
        margin: 20px auto;
    }

    .td-custom-banner-content {
        bottom: 20px;
    }

    .td-custom-banner-btn {
        padding: 6px 14px;
        font-size: 10px;
        border-width: 1.5px;
    }
}