:root {
    /* Royal Color Palette */
    --royal-red: #630d16;      /* Deep Maroon/Burgundy */
    --gold: #b08d57;           /* Champagne/Antique Gold */
    --gold-light: #fdf0d5;     /* Soft Ivory/Cream */
    --black: #1a1a1a;          /* Soft Rich Black */
    --white: #ffffff;
    --gray-bg: #fcf9f5;        /* Off-white/Creamy background */
    --border: #e8e1d5;         /* Muted gold-toned border */
    
    /* Fonts */
    --font-main: 'Montserrat', sans-serif;
    --font-heading: 'Playfair Display', serif;
}

html, body {
    max-width: 100%;
   overflow-x: hidden;
    position: relative;
}
body {
    font-family: var(--font-main);
    
    margin: 0;
    overflow-x: hidden;
    background-color: var(--gray-bg); /* Switched to a soft cream for a premium feel */
    color: var(--black);
}

/* --- 1. Image-Only Slider (Top) --- */
.home-hero, .heroSwiper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.heroSwiper {
    width: 100%;
    /* Keep this consistent for both Desktop and Mobile */
    aspect-ratio: 32 / 12; 
    height: auto;
	background-color: var(--black); /* Darker backdrop for the images */
}

.heroSwiper .swiper-slide {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heroSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    
    /* THE FIX: Use 'contain' to show the full image just like desktop */
    object-fit: contain; 
    background-color: #000; /* Fills gaps if any with black */

    /* SPEEDY ZOOM-OUT EFFECT */
    transform: scale(1.3);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.heroSwiper .swiper-slide-active img {
    transform: scale(1);
    opacity: 1;
}

/* --- MOBILE VIEW FIX --- */
@media (max-width: 768px) {
    .heroSwiper {
        /* Remove the 4/5 ratio and use the desktop ratio */
        aspect-ratio: 32 / 12; 
        height: auto;
    }

    .heroSwiper .swiper-slide img {
        /* Ensure it doesn't stretch or crop */
        object-fit: contain;
    }
}
/* --- 2. Luxury Header (Below Slider) --- */
/* Horizontal Header Layout */
.main-header {
    background: var(--white);
    border-bottom: 2px solid var(--gold);
    /* Make it sticky */
    position: sticky; 
    top: 40px; /* This must match the height of the announcement bar */
    z-index: 1000;
    padding: 10px 0; /* Reduced padding for a slimmer sticky header */
    transition: all 0.3s ease; /* Smooth transition if you add scroll classes later */
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px; 
    max-width: 100%; /* Stretch to edges */
    width: 100%;
    box-sizing: border-box; /* Includes padding in 100% width */
    margin: 0;
}
/* Logo Styling */
.logo-left img {
    height: 45px;
    width: auto;
}

/* Navigation Links */
.main-nav ul {
    display: flex;
    list-style: none;
    /* CHANGE: Increased gap slightly to fill the middle space better */
    gap: 35px; 
    margin: 0;
    padding: 0;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--black);
    font-weight: 500;
    /* Slightly smaller font often makes the header feel wider/cleaner */
    font-size: 12px; 
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap; /* Prevents menu items from wrapping to a second line */
}

.main-nav ul li a:hover {
  color: var(--royal-red); /* Hover state changed to Maroon */
}

.sale-link {
   color: var(--royal-red) !important; /* Professional Maroon for SALE */
    font-weight: 700;
}



/* Fix for icons not showing */
.header-tools {
    display: flex;
    gap: 20px;
    align-items: center;
    /* Remove absolute positioning causing the overflow */
    position: static !important; 
    transform: none !important; 
}
.header-tools a {
    color: var(--black);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-tools i {
    font-size: 20px !important;
    color: #121212 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.header-tools a:hover {
   color: var(--royal-red);
}

/* Responsive: Hide nav on small screens for a hamburger menu later */
@media (max-width: 1200px) {
    .main-nav ul {
        gap: 15px; /* Shrink gaps on smaller laptops to keep it on one line */
    }
}

/* --- Mobile Menu Trigger --- */
.mobile-menu-trigger {
    display: none; /* Hidden on desktop */
    font-size: 22px;
    cursor: pointer;
}

/* --- Mobile Sidebar --- */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -300px; /* Start hidden on the left */
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 2000;
    transition: all 0.4s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.mobile-sidebar.active {
    left: 0; /* Slide in */
}

.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    display: none;
}

.mobile-sidebar-overlay.active {
    display: block;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    letter-spacing: 1px;
}

.sidebar-links {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.sidebar-links li {
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
}

.sidebar-links li a {
    text-decoration: none;
    color: #121212;
    font-size: 14px;
    text-transform: uppercase;
}

/* --- Responsive Controls --- */
@media (max-width: 1024px) {
    .main-nav { display: none; } /* Hide desktop nav */
    .mobile-menu-trigger { display: block; } /* Show hamburger */
    .header-inner { padding: 10px 15px; }
}

/* --- 3. Content Area --- */
#app-content {
    min-height: 600px;
    padding: 20px 0;
}

/* Luxury Button Style */
.btn-pill {
   background: var(--royal-red); /* Primary buttons are now Maroon */
    color: var(--white);
    padding: 12px 35px;
    border-radius: 40px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-pill:hover { background: var(--black); 
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 13, 22, 0.2);}

/* --- Coupon Top Bar Slider --- */
#top-announcement-bar{height: 40px;
    overflow: hidden;
    background: var(--gold-light);
    /* Make it sticky */
    position: sticky;
    top: 0;
    z-index: 1100; /* Higher than header */
    width: 100%;

.couponSwiper {
    width: 100%;
    height: 100%; /* Fill the 40px bar */
}

.couponSwiper .swiper-slide {
    height: 40px !important; /* Force each slide to match bar height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: #333;
}

.top-bar-content strong {
    color: var(--royal-red); /* Code is now Maroon */
    background: rgba(176, 141, 87, 0.1); /* Light gold tint */
    padding: 2px 6px;
    border-radius: 3px;
}

.discount-tag {
    font-weight: 700;
    color: var(--royal-red); 
}

.time-left {
    font-size: 11px;
   background: var(--royal-red); /* Tag is now Maroon */
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
}

.sep {
    opacity: 0.3;
}