: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);
}

.productSwiper{
    position:relative;
}
.cat-prev:after,
.cat-next:after{

    font-family: swiper-icons !important;

    font-size:18px !important;
    font-weight:700 !important;

    color:#111 !important;
}

.cat-prev,
.cat-next{
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#111;
}


.cat-prev,
.cat-next{

    width:42px !important;
    height:42px !important;

    background:#fff;
    border-radius:50%;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

    color:#111 !important;

    opacity:0;
    transition:.25s;
}

.product-slider-wrap:hover .cat-prev,
.product-slider-wrap:hover .cat-next{
    opacity:1;
}

.cat-prev{
    left:5px !important;
}

.cat-next{
    right:5px !important;
}

.cat-prev:after,
.cat-next:after{
    font-size:16px !important;
    font-weight:700;
}

@media(max-width:991px){

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

}
#search-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:99999;
}

.search-box{
    background:#fff;
    max-width:700px;
    margin:50px auto;
    border-radius:10px;
    overflow:hidden;
}

.search-header{
    display:flex;
    border-bottom:1px solid #eee;
}

#search-input{
    flex:1;
    border:none;
    padding:15px;
    font-size:16px;
    outline:none;
}

#close-search{
    width:50px;
    text-align:center;
    line-height:50px;
    cursor:pointer;
    font-size:22px;
}

#search-results{
    max-height:500px;
    overflow:auto;
}

.search-item{
    display:block;
    text-decoration:none;
    color:#222;
    transition:.2s;
}

.search-item:last-child{
    border-bottom:none;
}

.search-item-inner{
    padding:14px 16px;
    border-bottom:1px solid #f0f0f0;
}

.search-item:hover{
    background:#fafafa;
}

.search-item-name{
    font-size:14px;
    font-weight:500;
    line-height:1.4;
    margin-bottom:4px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.search-item-price{
    font-size:14px;
    font-weight:700;
    color:#111;
}

#search-results:empty{
    display:none;
}

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

.heroSwiper {
    width: 100%;
    aspect-ratio: 2048 / 768;
    background: #000;
}

.heroSwiper .swiper-slide {
    overflow: hidden;
}

.heroSwiper .swiper-slide img {

    width: 100%;
    height: 100%;

    display: block;

    /* 🔥 FULL FIT */
    object-fit: cover;

    /* animation */
    transform: scale(1.08);
    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 */
@media (max-width: 768px) {

    .heroSwiper {

        /* better mobile ratio */
       aspect-ratio: 2048 / 768;
    }

    .heroSwiper .swiper-slide img {

        object-fit: cover;
        object-position: center;
    }
}
/* --- 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;
}