@font-face {
    font-family: 'Dream Avenue';
    src: url('./dream.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.logo {
    font-family: 'Dream Avenue', serif !important;
}
:root { --beige: #F5F5DC; --black: #000000; --white: #ffffff; --gray: #999999; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body { background-color: var(--beige); color: var(--black); font-family: 'Montserrat', sans-serif; overflow-x: hidden; }

/* --- SLIDING ANNOUNCEMENT BAR --- */
.announcement-bar {
    background-color: #000;
    color: #F5F5DC;
    height: 40px; /* Slightly taller for arrows */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10000;
    overflow: hidden;
}

.ann-content {
    position: relative;
    width: 300px; /* Fixed width to keep text centered */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ann-text {
    position: absolute;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translateY(10px); /* Starts slightly below */
}

/* The visible text */
.ann-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow Styling */
.ann-arrow {
    background: none;
    border: none;
    color: #F5F5DC;
    font-size: 14px;
    cursor: pointer;
    padding: 0 20px;
    z-index: 10;
    transition: opacity 0.3s;
}

.ann-arrow:hover {
    opacity: 0.5;
}

@media (max-width: 768px) {
    .ann-content { width: 200px; }
    .ann-text { font-size: 9px; letter-spacing: 1px; }
}

/* 1. INITIAL NAVBAR STATE (White with Black Text) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    position: fixed;
    width: 100%;
    top: 35px; /* Below announcement bar */
    height: 80px;
    background-color: transparent !important; /* Forces background to be white */
    transition: all 0.4s ease-in-out;
    z-index: 7000;
}
.navbar .hamburger span {
    background-color: white !important;
}
/* Force everything to start as BLACK */
.navbar .logo, 
.navbar .nav-links a, 
.navbar i, 
.navbar .search-trigger i {
    color: white !important;
}

/* --- SCROLLED STATE (Turns everything Black) --- */

.navbar.scrolled {
    background-color: #F5F5DC !important; /* Changes background to Beige */
    top: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 1. Turn the Logo black */
.navbar.scrolled .logo {
    color: #000000 !important;
}

/* 2. Turn the Nav Links black */
.navbar.scrolled .nav-links a {
    color: #000000 !important;
}

/* 3. Turn the Hamburger lines black */
.navbar.scrolled .hamburger span {
    background-color: #000000 !important;
}

/* 4. Turn the Search and Cart icons black */
.navbar.scrolled .search-trigger i, 
.navbar.scrolled .cart-container i {
    color: #000000 !important;
}

/* 5. Update the Cart Number (White text on black circle) */
.navbar.scrolled #cart-count {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Navbar link hover line becomes black too */
.navbar.scrolled .nav-links a::after {
    background-color: #000000 !important;
}



/* Perfect Horizontal & Vertical Center for the Logo */
.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Exact mathematical center */
    font-family: 'Dream Avenue', serif !important;
    font-size: 35px;
    color: white;
    text-decoration: none;
    z-index: 100;
    margin: 0;
    line-height: 1;
}

/* Container for Links (Left) */
.nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1; /* Takes equal space as the right side to help center logo */
}

/* Container for Icons (Right) */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: black;
    gap: 20px;
    flex: 1; /* Takes equal space as the left side to help center logo */
}

/* Links Style */
.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover effect for links */
.nav-links a:hover {
    opacity: 0.6;
}
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger span { width: 22px; height: 2px; background: black; }
#cart-count { background: #000; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 50%; margin-left: -10px; }

/* --- 3. MOBILE MENU SIDEBAR --- */
.mobile-menu { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: var(--beige); z-index: 9999999; transition: 0.6s; padding: 80px 40px; display: flex; flex-direction: column; align-items: center; }
.mobile-menu.active { left: 0; }
.mobile-nav-links { list-style: none; text-align: center; width: 100%; }
.mobile-nav-links li { margin-bottom: 30px; }
.mobile-nav-links a { font-family: 'Dream Avenue'; font-size: 40px; text-decoration: none; color: #000; }
#closeMenu { position: absolute; top: 20px; left: 20px; font-size: 45px; cursor: pointer; }

/* --- 4. HERO SECTION --- */
.hero { height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; position: relative; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://giftflowers.com.hk/blog/en_florist/wp-content/uploads/sites/5/2022/09/pexels-anna-shvets-5760898-1-768x512.jpg') center/cover; }
.hero h1 { font-family: 'Dream Avenue'; font-size: 5rem; margin-bottom: 20px; }
.hero-btns { display: flex; gap: 15px; justify-content: center; }
.btn-solid { background: #fff; color: #000; padding: 15px 35px; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 11px; }
.btn-outline { border: 1px solid #fff; color: #fff; padding: 15px 35px; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 11px; }

/* --- 5. PRODUCT CARDS --- */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px 5%; }
.product-card { background-color: transparent !important; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(0,0,0,0.05); cursor: pointer; transition: 0.3s; position: relative; }
.product-img { width: 100%; height: 160px; object-fit: contain !important; margin-bottom: 5px; }
.product-name { font-family: 'Playfair Display', serif; font-size: 14px; margin: 5px 0; font-weight: 700; }
.starting-price { font-size: 8px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.price-container { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.old-price { font-size: 10px; color: #bbb; text-decoration: line-through; }
.new-price { font-size: 15px; font-weight: 700; }
.view-options-btn { background: #000; color: #fff; padding: 8px 20px; border-radius: 25px; font-size: 9px; font-weight: 600; text-transform: uppercase; }

/* Reveal/Expansion Logic */
.product-card .size-options, .product-card .qty-stepper, .product-card .add-to-cart-btn { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: 0.4s ease; }
.product-card.expanded .size-options, .product-card.expanded .qty-stepper, .product-card.expanded .add-to-cart-btn { max-height: 500px; opacity: 1; pointer-events: auto; margin: 10px 0; }
.product-card.expanded .view-options-btn, .product-card.expanded .starting-price { display: none; }

.size-options { display: flex; gap: 8px; }
.size-options input { display: none; }
.size-options label { border: 1px solid #000; padding: 5px 10px; font-size: 10px; cursor: pointer; font-weight: bold; }
.size-options input:checked + label { background: #000; color: #fff; }
.qty-stepper { display: flex; align-items: center; gap: 15px; border: 1px solid #000; padding: 5px 15px; border-radius: 20px; }
.qty-stepper button { background: none; border: none; font-size: 18px; cursor: pointer; padding: 0 5px; }
.add-to-cart-btn { background: #000; color: #fff; border: none; padding: 12px; width: 100%; font-weight: bold; cursor: pointer; }

/* --- 6. TOP SELLERS SLIDER --- */
.slider-wrapper { position: relative; width: 100%; display: flex; align-items: center; margin-top: 20px; }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 15px; padding: 20px 15px 80px; scroll-behavior: smooth; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .product-card { flex: 0 0 calc(25% - 15px); scroll-snap-align: start; }
.slider-arrow { position: absolute; top: 40%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #fff; border: none; width: 35px; height: 35px; border-radius: 50%; z-index: 100; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-arrow.left { left: 5px; } .slider-arrow.right { right: 5px; }

/* --- 7. EXPLORE OUR WORLDS (CATEGORIES) --- */
.categories-section { padding: 60px 5%; text-align: center; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.cat-card { position: relative; height: 450px; overflow: hidden; text-decoration: none; color: #fff; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
.cat-card:hover img { transform: scale(1.1); }
.cat-info { position: absolute; bottom: 30px; width: 100%; text-align: center; }
.cat-info h3 { font-family: 'Dream Avenue'; font-size: 32px; margin-bottom: 5px; }

/* --- 8. ABOUT & FOOTER --- */
.about-section { padding: 80px 5%; background: #fff; }
.about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto; }
.about-img img { width: 100%; border-radius: 4px; }
.features { display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid #eee; padding-top: 30px; }
.feat { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.feat i { font-size: 24px; color: #000; }
.feat span { font-size: 10px; font-weight: bold; text-transform: uppercase; }

footer { background: #000; color: var(--beige); padding: 60px 5% 30px; text-align: center; }
.footer-logo { font-family: 'Dream Avenue'; font-size: 40px; margin-bottom: 30px; }
.social-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; }
.social-links a { color: #fff; font-size: 24px; }


.close-cart-x { background: none; border: none; font-size: 35px; cursor: pointer; transition: 0.3s; }
.close-cart-x:hover { transform: rotate(90deg); }
.cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; z-index: 99999998 !important; }
.cart-overlay.active { display: block; }

.search-overlay { position: fixed; top: -100%; left: 0; width: 100%; height: 100%; background: var(--beige); z-index: 90000; transition: 0.6s; display: flex; flex-direction: column; align-items: center; padding-top: 15vh; }
.search-overlay.active { top: 0; }
#searchInput { width: 80%; max-width: 600px; border: none; border-bottom: 2px solid #000; background: transparent; font-size: 30px; text-align: center; outline: none; font-family: 'Dream Avenue'; color: #000; }
.search-item { display: flex; align-items: center; gap: 15px; background: #fff; padding: 12px; margin-top: 10px; width: 90%; max-width: 500px; text-decoration: none; color: #000; border: 1px solid #ddd; border-radius: 4px; }

/* --- 10. WHATSAPP & ANIMATION --- */
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 55px; height: 55px; background: black; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none; z-index: 6000; box-shadow: 0 4px 10px rgba(0,0,0,0.3); animation: wa-pulse 2s infinite; }
@keyframes wa-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { transform: scale(1); } }
.reveal { opacity: 0; transform: translateY(20px); transition: 0.8s; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- 11. MOBILE MEDIA QUERIES --- */
@media (max-width: 768px) {
    .nav-links, .nav-right .nav-icon { display: none !important; }
    .hamburger, .nav-right .search-trigger, .nav-right .cart-container { display: flex !important; }
    .navbar { height: 70px; top: 36px; padding: 0 10px; }
    .logo { font-size: 29px !important; }
    .hero h1 { font-size: 3rem; }
    .products-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 10px !important; width:100% !important; overflow-x:hidden; }
    .slider-track { padding-left: 10px; padding-right: 10px; }
    .slider-track .product-card { flex: 0 0 calc(50% - 15px); padding: 10px !important; }
    .about-container { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr; }
    .cart-sidebar { width: 100%; }
    .top-sellers { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Create the search-trigger class */
.search-trigger {
    background: none !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    font-size: 20px; /* Adjust size of the icon */
    color: #000;    /* Icon color */
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.search-trigger:hover {
    opacity: 0.5;
}
/* --- PAGINATION STYLING --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 60px 0 100px;
    font-family: 'Montserrat', sans-serif;
    user-select: none;
}

.page-item {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    position: relative;
    padding: 5px 10px;
    transition: 0.3s;
}

/* The Black Underline from your image */
.page-item.active::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Moves the line below the number */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000;
}

.page-item:hover {
    opacity: 0.6;
}

.page-dots {
    cursor: default;
    color: #888;
}

.page-arrow {
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
}
/* 1. Set a uniform size for all navigation icons */
.search-trigger i, 
.cart-container i,
.nav-icon i {
    font-size: 20px !important; /* Adjust this number to your liking */
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Fix the Cart Container so it stays the same size as the search button */
.cart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;  /* Fixed width matching search button area */
    height: 40px; /* Fixed height matching search button area */
    cursor: pointer;
}

/* 3. Fix the Badge (The Number) so it doesn't move the icon */
#cart-count {
    position: absolute;
    top: 2px;      /* Position relative to the top of the container */
    right: 2px;    /* Position relative to the right of the container */
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* 4. Ensure the search button container has the same dimensions */
.search-trigger {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
}
/* --- Optimized Cart Layout --- */

/* Tighten the White Header */


/* Redesign the Product Item Rows */
.cart-item {
    display: grid;
    grid-template-columns: 70px 1fr auto; /* Image | Details | Delete */
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cart-item img {
    width: 70px;
    height: 70px;
    object-fit: contain; /* Shows full bottle without cropping */
    background: #fff;
    padding: 5px;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-item-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

.cart-item-info p {
    font-size: 11px;
    color: #888;
    margin: 0;
}

.cart-item-price {
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Sleek Red Remove Button */
.cart-remove-btn {
    background: none;
    border: none;
    color: #ff4d4d;
    font-size: 22px;
    cursor: pointer;
    padding: 5px;
    transition: 0.2s;
}

.cart-remove-btn:hover {
    color: #000;
    transform: scale(1.1);
}
/* --- Fix Cart Sidebar Scrolling & Images --- */





/* 2. Tighten the cart item so it doesn't push width */
.cart-item {
    display: flex !important; /* Switch to flex for better width control */
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    width: 100% !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* 3. Fix the image container */
.cart-item img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    background-color: #fff; /* White background makes bottles look professional */
    flex-shrink: 0; /* Prevents image from being squished */
    border-radius: 4px;
}

.cart-item-info {
    flex: 1; /* Takes remaining space */
    min-width: 0; /* Important: allows text to truncate if too long */
}

/* 4. Fix the X button hover so it doesn't cause a scrollbar */
.cart-remove-btn {
    background: none;
    border: none;
    color: #000;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0;
    transition: color 0.3s;
}

.cart-remove-btn:hover {
    color: #ff4d4d; /* Red on hover */
    transform: none !important; /* REMOVED scale to stop horizontal scroll */
}
/* --- LUXURY SEARCH OVERLAY FIX --- */
.search-overlay {
    position: fixed;
    top: -100%; /* Hidden off-screen */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #F5F5DC; /* Beige */
    z-index: 999999 !important; /* Top layer */
    transition: 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
}

.search-overlay.active {
    top: 0;
}

/* Style for the Close Button (The X) */
.close-overlay {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 50px;
    cursor: pointer;
    color: #000;
    z-index: 1000000; /* Above the overlay content */
    line-height: 1;
    padding: 10px;
}

/* Style for the Search Input */
#searchInput {
    width: 80%;
    max-width: 700px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #000;
    font-family: 'Dream Avenue', serif;
    font-size: 40px;
    text-align: center;
    outline: none;
    color: #000;
}

/* Style for the Results Container */
#searchResults {
    width: 90%;
    max-width: 800px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Individual Search Result Row */
.search-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    text-decoration: none;
    color: #000;
    border: 1px solid #eee;
    transition: 0.3s;
}

.search-item:hover { border-color: #000; }
.search-item img { width: 60px; height: 60px; object-fit: contain; margin-right: 20px; }
/* --- LUXURY SEARCH RESULTS FIX --- */

/* Full Screen Overlay */
.search-overlay {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the input and results */
}

/* The Box that holds the input */
.search-content {
    width: 90%;
    max-width: 800px;
    text-align: center;
}

/* Results Container: This fixes the "squished to the left" issue */
#searchResults {
    width: 100%;
    max-width: 700px;
    margin: 40px auto; /* Centers the column */
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 65vh; /* Allows scrolling */
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

/* Individual Result Row */
.search-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
    text-decoration: none;
    color: #000;
    transition: 0.3s;
}

.search-item:hover {
    border-color: #000;
    transform: translateX(5px);
}

.search-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 20px;
}

/* Close Button (X) Fix */
.close-overlay {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 40px;
    cursor: pointer;
    color: #000;
    z-index: 100000; /* Ensures it is on top of everything */
    padding: 10px;
}

/* Styling the scrollbar for a luxury look */
#searchResults::-webkit-scrollbar {
    width: 5px;
}
#searchResults::-webkit-scrollbar-thumb {
    background: #000;
}
/* --- Centering Search Results --- */

.search-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers everything horizontally */
    text-align: center;
}

.search-content {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the input and the list */
}

#searchResults {
    width: 90% !important;
    max-width: 600px !important; /* Limits width so it looks professional */
    margin: 30px auto !important; /* Centers the container itself */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Makes cards fill the 600px width */
    gap: 15px;
    padding-left: 0 !important; /* Removes any leftover left padding */
}

.search-item {
    width: 100% !important;
    justify-content: flex-start; /* Keeps image and text inside the card aligned left */
    margin: 0 auto !important; /* Extra safety centering */
}
/* --- Navbar Hover Animation --- */
.nav-links li a {
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

/* Elegant line that grows from the center */
.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 50%;
    background-color: #000;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links li a:hover {
    color: #666; /* Subtle fade of the text color */
}

.nav-links li a:hover::after {
    width: 100%; /* Line grows to full width */
}


/* --- View Options Button Hover Animation --- */
.view-options-btn {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth luxury transition */
    border: 1px solid #000; /* Ensure it has a border for the "invert" effect */
}

.view-options-btn:hover {
    background-color: transparent !important; /* Becomes hollow */
    color: #000 !important;              /* Text turns black */
    transform: scale(1.05) translateY(-2px); /* Pops out slightly */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Soft shadow */
}

/* Subtle pulse for the button to catch the eye even before hover */
@keyframes buttonHint {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.product-card:hover .view-options-btn {
    animation: buttonHint 1.5s infinite ease-in-out;
}
/* --- HERO BUTTONS HOVER ANIMATION --- */

/* Base settings for both buttons */
.hero-btn-solid, .hero-btn-outline {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* 1. Shop Collection Button (Solid) */
.hero-btn-solid:hover {
    background-color: #F5F5DC !important; /* Changes to Beige */
    color: #000 !important;
    transform: translateY(-5px); /* Gentle lift effect */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* Soft shadow */
}

/* 2. Our Story Button (Outline) */
.hero-btn-outline:hover {
    background-color: #ffffff !important; /* Fills with white */
    color: #000 !important;              /* Text turns black */
    transform: translateY(-5px);         /* Gentle lift effect */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Active state (when clicking) */
.hero-btn-solid:active, .hero-btn-outline:active {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
/* --- FIX HERO BUTTONS (BOX DESIGN) --- */

/* Base style for both buttons */
.hero-btn-solid, .hero-btn-outline {
    display: inline-block;
    padding: 15px 35px;         /* This creates the box space around the text */
    text-decoration: none !important; /* Removes the underline */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    transition: all 0.4s ease;
    margin: 10px;               /* Space between the two buttons */
}

/* 1. Shop Collection (Solid White Box) */
.hero-btn-solid {
    background-color: #ffffff !important; /* White background */
    color: #000000 !important;            /* Black text */
    border: 1px solid #ffffff;           /* Ensures same size as outline btn */
}

/* 2. Our Story (Transparent Box with White Border) */
.hero-btn-outline {
    background-color: transparent !important;
    color: #ffffff !important;            /* White text */
    border: 1px solid #ffffff !important; /* The white border box */
}

/* HOVER EFFECTS */
.hero-btn-solid:hover {
    background-color: #F5F5DC !important; /* Turns Beige */
    transform: translateY(-3px);          /* Lifts up slightly */
}

.hero-btn-outline:hover {
    background-color: #ffffff !important; /* Fills with white */
    color: #000000 !important;            /* Text turns black */
    transform: translateY(-3px);
}
/* Update your .hero-content style */
.hero-content {
    padding: 100px 20px !important; /* Adds significant space top and bottom */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Add space specifically below the subtitle */
.hero-content p {
    margin-bottom: 40px !important; /* Pushes the buttons further down */
    line-height: 1.8;
}
/* Increase space for the Top Sellers section */
.top-sellers {
    padding-top: 100px !important;    /* Space above the title */
    padding-bottom: 80px !important;  /* Space below the products */
}

/* Space between the Title and the small sub-text */
.section-header h2 {
    margin-bottom: 20px !important;
    letter-spacing: 3px;
}

.section-header p {
    margin-bottom: 50px !important; /* Pushes the products further down from the title */
}
/* Add this to any section that feels too tight */
section {
    margin-bottom: 60px !important;
}

/* Add space to the About Story section */
.about-section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
/* --- REDUCE GAP BETWEEN SECTIONS --- */

/* 1. Reduce space below the Top Sellers slider */
.top-sellers {
    padding-bottom: 20px !important; /* Changed from 80px */
}

/* 2. Remove space above the 'Explore Our Worlds' section */
.categories-section {
    padding-top: 10px !important; /* Minimal gap */
}

/* 3. Tighten the space around the title itself */
.section-header {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* 4. Fix for Mobile: ensuring the gap is small on phones too */
@media (max-width: 768px) {
    .top-sellers {
        padding-bottom: 10px !important;
    }
    .categories-section {
        padding-top: 10px !important;
    }
}
/* Change Explore Our Worlds title back to Playfair Display */
.categories-section h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px; /* Serifs look better with tighter spacing */
    text-transform: none; /* Playfair looks best in standard Title Case */
}
/* --- LUXURY CONTROLS BAR (Sort & View) --- */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-wrapper label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styled Dropdown */
#sortSelect {
    border: 1px solid #000;
    background: #fff;
    padding: 5px 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    border-radius: 0;
}

.view-toggles {
    display: flex;
    gap: 15px;
}

.view-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
    transition: 0.3s;
}

.view-btn.active { color: #000; }

/* --- PROFESSIONAL LIST VIEW DESIGN --- */



/* 1. The Container: Force single column with proper spacing */
.products-grid.list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 5%;
}

/* 2. The Card: Change from Vertical to Horizontal */
.products-grid.list-view .product-card {
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    background-color: beige !important; /* White background for list rows looks cleaner */
    border: 1px solid rgba(0,0,0,0.05);
    padding: 0 !important; /* We use internal containers for padding */
    height: 180px; /* Fixed height for all rows */
    overflow: hidden;
}

/* 3. Image Area (Left) */
.products-grid.list-view .product-img-container {
    width: 200px !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
}

.products-grid.list-view .product-img {
    height: 100% !important;
    padding: 15px;
}

/* 4. Product Details Area (Middle) */
.products-grid.list-view .product-info {
    flex: 2;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.products-grid.list-view .product-name {
    font-size: 18px !important;
    margin: 0 0 5px 0 !important;
}

/* 5. Pricing and Action Area (Right) */
.products-grid.list-view .price-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align prices and buttons to the right */
    padding-right: 40px;
    gap: 5px;
}

.products-grid.list-view .price-from {
    font-size: 20px !important;
}

/* 6. Quick Cart Icon Fix for List View */
.products-grid.list-view .quick-cart-btn {
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
}

/* 7. Red "15% OFF" Badge Fix */
.products-grid.list-view .discount-badge {
    top: 0;
    left: 0;
    padding: 4px 10px;
}

/* Mobile Tweak for List View */
@media (max-width: 600px) {
    .products-grid.list-view .product-card {
        height: auto;
        flex-direction: column !important; /* Stack on mobile for readability */
        padding-bottom: 15px !important;
    }
    .products-grid.list-view .product-img-container {
        width: 100% !important;
        height: 150px !important;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    .products-grid.list-view .product-info, 
    .products-grid.list-view .price-row {
        align-items: center;
        text-align: center;
        padding: 15px;
    }
}

/* --- KHALLAB PROFESSIONAL MODAL --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 99999999; /* Higher than announcement bar and nav */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); 
    backdrop-filter: blur(8px);
}

.modal-content {
    background-color: #ffffff;
    margin: 5vh auto;
    width: 90%;
    max-width: 1000px;
    position: relative;
    border-radius: 2px;
    animation: modalSlide 0.4s ease;
}

@keyframes modalSlide {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-body { display: flex; flex-direction: row; }

/* Left Side Image */
.modal-image-area {
    flex: 1.2;
    background-color: #fcfcfc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.modal-image-area img { width: 100%; max-height: 500px; object-fit: contain; }

/* Right Side Info */
.modal-info-area { flex: 1; padding: 50px 40px; text-align: left; }

.new-price-red { color: #636B2F; font-size: 28px; font-weight: 700; }
.old-price-gray { color: #999; text-decoration: line-through; font-size: 18px; margin-left: 10px; }

.modal-divider { height: 1px; background: #eee; margin: 25px 0; }
.modal-label { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 1px; }

/* Sizes */
.modal-size-grid { display: flex; gap: 10px; margin-bottom: 25px; }
.m-size-btn {
    flex: 1; padding: 12px; border: 1px solid black; background: beige;
    cursor: pointer; font-weight: 600; transition: 0.3s;
}
.m-size-btn.active { border-color: #000; background: #000; color: #fff; }

/* Qty Stepper */
.modal-qty-box {
    display: flex; align-items: center; gap: 25px; border: 1px solid #000;
    width: fit-content; padding: 8px 20px; border-radius: 30px; margin-bottom: 30px;
}
.modal-qty-box button { background: none; border: none; font-size: 20px; cursor: pointer; }
.modal-qty-box span { font-weight: 700; width: 20px; text-align: center; }

/* Action Buttons */
.m-add-cart-btn {
    width: 100%; background: #000; color: #fff; padding: 18px;
    border: none; font-weight: 700; cursor: pointer; margin-bottom: 12px;
}
.m-buy-now-btn {
    width: 100%; background: #BAC095; color: #000; padding: 18px;
    border: none; font-weight: 700; cursor: pointer;
}

.close-modal { position: absolute; right: 25px; top: 15px; font-size: 35px; cursor: pointer; z-index: 100; }

.modal-social-proof { margin-top: 25px; font-size: 13px; color: #666; }

/* Mobile View */
@media (max-width: 768px) {
    .modal-body { flex-direction: column; }
    .modal-content { margin: 0; width: 100%; height: 100vh; overflow-y: auto; }
    .modal-info-area { padding: 30px 20px; }
}
/* --- UPDATED PRODUCT CARD STYLE (MATCHING IMAGE) --- */

.product-card {
    background-color: transparent !important;
    border: none !important;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* Image Container (Relative for badge positioning) */
.product-img-container {
    position: relative;
    width: 100%;
    background-color: #fcfcfc; /* Very light grey background like image */
    margin-bottom: 15px;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 250px;
    object-fit: contain !important; /* Zooms out to show full bottle */
    padding: 20px;
}

/* Red "ON SALE" Badge */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #BDDCE8; 
    color: #fff;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 2;
}

/* Floating Plus Icon */
.plus-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    color: #333;
    font-size: 14px;
    border-radius: 2px;
}

/* Text Styling */
.product-name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    color: #000;
    text-transform: capitalize;
}

.price-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.price-from {
    color: #636B2F; /* Matching the red price in your image */
    font-weight: 700;
    font-size: 16px;
}

.price-old {
    color: #555;
    text-decoration: line-through;
    font-size: 14px;
    font-weight: 400;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .product-img {
        height: 180px;
    }
    .price-from {
        font-size: 14px;
    }
    .sale-badge {
        padding: 3px 8px;
        font-size: 8px;
    }
}
/* --- UPDATED PRODUCT CARD (15% OFF & CART BUTTON) --- */

/* 1. The 15% OFF Badge */
.discount-badge {
    position: absolute;
    top: 10px;
    left: 0; /* Aligned to the very left edge like the image */
    background-color: #BAC095; /* Professional Red */
    color: #fff;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 10;
}

/* 2. The Add to Cart Button on the Card */
.card-action-btn {
    width: 100%;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.card-action-btn:hover {
    background-color: #333;
}

/* 3. Image Container Fix */
.product-img-container {
    position: relative;
    background-color: #f9f9f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Red color for the "From" price to match your image */
.price-from {
    color: #636B2F;
    font-weight: 700;
    font-size: 16px;
}
/* --- FLOATING QUICK CART BUTTON --- */

/* Ensure the container is the reference point for the button */
.product-img-container {
    position: relative;
    background-color: #f9f9f9;
    cursor: pointer;
}

.quick-cart-btn {
    position: absolute;
    bottom: 10px; /* Distance from bottom of image */
    right: 10px;  /* Distance from right of image */
    width: 40px;
    height: 40px;
    background-color: #000; /* Black background */
    color: #fff;            /* White icon */
    border: none;
    border-radius: 50%;     /* Circular button */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 20;            /* Stays above the image */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.quick-cart-btn:hover {
    background-color: #333;
    transform: scale(1.1);
}

/* Ensure the icon is centered */
.quick-cart-btn i {
    margin-top: -2px; /* Slight adjustment for the bag icon alignment */
}

/* Tweak the product card padding since the bottom button is gone */
.product-card {
    margin-bottom: 20px;
}
/* --- LUXURY SORT BY STYLING --- */

.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sort-wrapper label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
}

.custom-select-container {
    position: relative;
    display: inline-block;
}

/* Style the actual dropdown box */
#sortSelect {
    appearance: none; /* Removes the default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #000; /* Minimalist bottom line */
    padding: 8px 35px 8px 10px; /* Space for the custom arrow */
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    outline: none;
    border-radius: 0;
    transition: 0.3s;
}

#sortSelect:hover {
    border-bottom-width: 2px;
}

/* Style the custom arrow icon */
.custom-select-container i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #000;
    pointer-events: none; /* Makes sure you click the menu, not the icon */
}

/* Note: Styling the POP-UP list itself is limited by browsers, 
   but this makes the closed box look premium */
#sortSelect option {
    background-color: #F5F5DC; /* Matches your Beige theme */
    color: #000;
    padding: 10px;
}
/* Ensure search results are ALWAYS visible and on top */
#searchResults {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 100000; /* High z-index */
}

.search-item {
    background: #fff !important; /* Forces white background so it's visible */
    border: 1px solid #eee;
    margin-bottom: 10px;
    width: 90%;
    max-width: 500px;
}
/* --- LUXURY SEARCH & CART STYLE --- */

/* Remove default button styling */
.search-trigger, .cart-container {
    background: none !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    transition: opacity 0.3s ease;
}

/* Style for the thin-line icons */
.navbar i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif !important;
    font-weight: 400 !important; /* This creates the OUTLINE effect */
    color: white !important;
    font-style: normal;
}

/* Position the cart number inside or near the bag */
#cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #000;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}

/* Hover effect for luxury feel */
.search-trigger:hover, .cart-container:hover {
    opacity: 0.5;
}

/* Fix for mobile centering */
@media (max-width: 768px) {
    .nav-right {
        gap: 10px;
    }
    .logo {
        font-size: 24px !important;
    }
}


/* 1. Set the Beige background for sub-pages */
.inner-page .navbar {
    background-color: #F5F5DC !important;
}

/* --- Fix Navbar Font for Men, Women, Unisex --- */

.inner-page .nav-links a {
    /* 1. Force the high-quality Montserrat font */
    font-family: 'Montserrat', sans-serif !important;
    
    /* 2. Match the weight (boldness) from the home page */
    font-weight: 700 !important; 
    
    /* 3. Match the size and spacing */
    font-size: 12px !important;
    letter-spacing: 1px !important;
    
    text-transform: uppercase;
    color: #000000 !important;
}

/* Ensure the Home page links also use the same rules for perfect symmetry */
.nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 3. ONLY the logo gets the special font */
.inner-page .logo {
    font-family: 'Dream Avenue', serif !important;
    color: #000000 !important;
    text-transform: none;
}

/* 4. FORCE Font Awesome for Icons (Prevents Black Boxes) */
.inner-page .navbar i, 
.inner-page .search-trigger i, 
.inner-page .cart-container i {
   
    font-weight: 900 !important;
    color: #000000 !important;
}

/* 5. Ensure the hamburger lines are visible */
.inner-page .hamburger span {
    background-color: #000000 !important;
}
/* --- INNER PAGES ONLY: OUTLINED ICON STYLE --- */

/* 1. Force the outlined look (weight 400) and black color */
.inner-page .navbar i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif !important;
    font-weight: 400 !important; /* This creates the OUTLINE effect */
    color: #000000 !important;
    font-style: normal;
}

/* 2. Position the number 0 inside the bag body for inner pages */
.inner-page #cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #000;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}


/* 3. Remove any grey backgrounds from buttons on inner pages */
.inner-page .search-trigger, 
.inner-page .cart-container {
    background: transparent !important;
    border: none !important;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- Hairline for Inner Pages Only --- */

/* This adds a thin black line under the navbar on Men, Women, and Unisex pages */
.inner-page .navbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* Subtle 10% black line */
}

/* Optional: If you want the line to become more visible when scrolling */
.inner-page .navbar.scrolled {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}
/* --- REMOVE SPACES AROUND ABOUT SECTION --- */

/* 1. Remove padding from the About section itself */
.about-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Remove bottom space from the section directly ABOVE (Categories) */
.categories-section {
    padding-bottom: 0 !important;
    margin-bottom: 5 !important;
}

/* 3. Remove top space from the FOOTER directly below */
footer {
    margin-top: 0 !important;
    padding-top: 45px !important; /* Adjust this if you want space inside the black footer */
}

/* 4. Ensure the container inside doesn't have extra gaps */
.about-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* --- FIX FOR BOTTOM GAPS AND WHATSAPP POSITION --- */

/* 1. Remove the gap under the image and About section */
.about-section, 
.about-container, 
.about-img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.about-img img {
    display: block; /* Fixes a common tiny gap under images */
    margin-bottom: 0 !important;
}

/* 2. Ensure the footer touches the section above it */
footer {
    margin-top: 0 !important;
    border-top: none !important;
}

/* 3. Adjust WhatsApp icon so it floats ABOVE the footer area */
.whatsapp-float {
    bottom: 30px !important; /* Higher value so it doesn't sit on the line */
    right: 20px !important;
    z-index: 9999 !important;
}

/* Mobile Tweak: Ensure no gaps on small screens */
@media (max-width: 768px) {
    footer {
        padding-top: 30px !important;
    }
    .whatsapp-float {
        bottom: 20px !important;
    }
}
/* --- ABOUT SECTION & ICONS REFINEMENT --- */

/* 1. Layout: Image on Left, Text on Right (PC) */
.about-section {
    background-color: #fff;
    padding: 60px 0 !important; /* Vertical space for the whole section */
    width: 100%;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split 50/50 */
    align-items: center;
    gap: 0; /* Image sticks to the left side */
    width: 100%;
    max-width: 1400px; /* Limits width on huge screens */
    margin: 0 auto;
}

/* 2. Make image stick to the left edge */
.about-img {
    width: 100%;
    height: 100%;
}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. Text & Icons Content Area */
.about-text {
    padding: 60px; /* Space inside the text area */
}

/* 4. Features (The 3 Icons Row) */
/* --- FIXED ABOUT SECTION ICONS (FEATURES) --- */

.features {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    /* ADDED PADDING: This creates the space above and below the icons */
    padding: 50px 0 !important; 
    
    /* This creates space between the story text and the grey line */
    margin-top: 40px !important; 
    
    /* This is the grey line you see in the picture */
    border-top: 1px solid #eeeeee; 
    
    width: 100%;
}

.feat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centers icon and text horizontally */
    justify-content: center;
    text-align: center;
    gap: 12px;              /* Space between the icon and the text */
}

.feat i {
    font-size: 26px;        /* Icon size */
    color: #000;
    line-height: 1;
    display: block;
}

.feat span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #000;
    display: block;
    white-space: nowrap;    /* Prevents text from breaking into two lines */
}

/* Mobile Tweak: Ensure they don't crush on small screens */
@media (max-width: 768px) {
    .features {
        padding: 30px 0 !important;
        gap: 10px;
    }
    .feat span {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .feat i {
        font-size: 22px;
    }
}

.feat i {
    font-size: 28px;
    color: #000;
}

.feat span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr; /* Stack: Image top, Text bottom */
    }

    .about-text {
        padding: 40px 20px;
    }

    .about-img img {
        height: 500px; /* Set a fixed height for the image on mobile so it fits well */
    }

   

    .feat span {
        font-size: 9px; /* Smaller text for mobile rows */
    }
}
/* --- SUBTLE SECTION DIVIDER --- */
.section-divider {
    width: 100%;                /* Line doesn't go full screen (more luxury) */
    height: 1px;               /* Ultra-thin hairline */
    background-color: rgba(0, 0, 0, 0.1); /* Very light grey/black */
    margin: 80px auto;         /* 40px space above and below, centered horizontally */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .section-divider {
        width: 100%;            /* Slightly wider line on mobile */
        margin: 30px auto;
    }
}
/* --- TIGHTEN SPACE BETWEEN PRODUCTS AND LINE --- */

/* 1. Reduce the space inside the slider track */
.slider-track {
    padding-bottom: 30px !important; /* Decreased from 60px/80px */
}

/* 2. Reduce the space in the Top Sellers section container */
.top-sellers {
    padding-bottom: 0 !important;
}

/* 3. Reduce the space around the horizontal line (divider) */
.section-divider {
    margin-top: 10px !important;   /* Brings the line up closer */
    margin-bottom: 30px !important; /* Space below the line before next section */
}

/* Mobile specific adjustment */
@media (max-width: 768px) {
    .slider-track {
        padding-bottom: 20px !important;
    }
    .section-divider {
        margin-top: 5px !important;
        margin-bottom: 20px !important;
    }
}
/* --- VIEW ALL BUTTON STYLING --- */

.view-all-container {
    width: 100%;
    text-align: center;
    margin-top: 40px; /* Space between slider and button */
    padding-bottom: 20px;
}

.view-all-btn {
    display: inline-block;
    padding: 15px 45px;
    background-color: #000000; /* Black background */
    color: #ffffff;            /* White text */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 30px;       /* Pill shape */
    border: 1px solid #000000;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Hover Animation */
.view-all-btn:hover {
    background-color: transparent; /* Becomes hollow */
    color: #000000;                /* Text turns black */
    transform: translateY(-3px);   /* Lifts up slightly */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .view-all-btn {
        padding: 12px 30px;
        font-size: 11px;
    }
}
/* --- UPDATED LUXURY MODAL STYLES --- */

/* Change the main popup box to Beige */
.modal-content, 
.modal-image-area, 
.modal-info-area {
    background-color: #F5F5DC !important; /* Beige background */
}

.modal-content {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* --- BUTTON ANIMATIONS --- */

/* 1. Size Buttons */
.m-size-btn {
    transition: all 0.3s ease;
}
.m-size-btn:hover:not(.active) {
    background-color: rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
.m-size-btn:active {
    transform: scale(0.95);
}

/* 2. Quantity Stepper Buttons */
.modal-qty-box button {
    transition: all 0.2s ease;
}
.modal-qty-box button:hover {
    color: #888;
    transform: scale(1.2);
}
.modal-qty-box button:active {
    transform: scale(0.9);
}

/* 3. Add to Cart Button (Black) */
.m-add-cart-btn {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid #000;
}
.m-add-cart-btn:hover {
    background-color: transparent !important;
    color: #000 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 4. Buy It Now Button (Yellow) */
.m-buy-now-btn {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #636B2F;
}
.m-buy-now-btn:hover {
    filter: brightness(0.9); /* Slightly deepens the yellow */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 5. Close Button (X) Animation */
.close-modal {
    transition: transform 0.3s ease;
}
.close-modal:hover {
    transform: rotate(90deg);
}

/* 6. Ensure the Divider is visible on beige */
.modal-divider {
    background: rgba(0,0,0,0.1) !important;
}
/* 1. Change color for the product cards in the grid/slider */
.price-from {
    color: #636B2F !important;
    font-weight: 700;
}

/* 2. Change color for the price inside the product popup (modal) */
.new-price-red {
    color: #636B2F !important;
    font-weight: 700;
}
/* --- UPDATED PRODUCT CARD: BEIGE & ZOOMED --- */

/* 1. Set the background of the image area to Beige */
.product-img-container {
    position: relative;
    background-color: #F5F5DC !important; /* Beige background to match your site */
    overflow: hidden; /* Important: this "crops" the zoom so it stays in the box */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px; /* Keep this consistent with your design */
}

/* 2. Apply the Zoom to the image */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; 
    transition: transform 0.5s ease; /* Smooth transition for the zoom */
    
    /* THE ZOOM EFFECT: 1.15 makes it 15% larger */
    transform: scale(1.15); 
    
    background-color: transparent !important;
}

/* 3. Subtle zoom-in animation when hovering the card */
.product-card:hover .product-img {
    transform: scale(1.25); /* Zooms in a bit more on hover for a luxury feel */
}

/* 4. Ensure the card itself is transparent/beige */
.product-card {
    background-color: transparent !important;
    border: none !important;
}

/* 5. Quick Fix: Make sure the badge is visible on beige */
.discount-badge {
    background-color: #636B2F !important; /* That olive green you liked */
    z-index: 10;
}

/* 1. The Sidebar - Make it the TOP layer */
.cart-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -100%; /* Hidden off-screen */
    width: 350px;
    height: 100vh !important;
    background-color: #F5F5DC !important; /* THE BEIGE COLOR */
    display: flex;
    flex-direction: column;
    transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* NUCLEAR Z-INDEX: Force it to the very front */
    z-index: 200000000 !important; 
    
    /* FORCE CLICKABILITY */
    pointer-events: auto !important; 
    opacity: 1 !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2);
}

.cart-sidebar.active {
    right: 0 !important;
}

/* 2. The Dark Overlay - Place it BEHIND the sidebar */
.cart-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    
    /* LOWER Z-INDEX: Sit below the sidebar (199,999,999) */
    z-index: 199999999 !important; 
    
    display: none;
}

.cart-overlay.active {
    display: block !important;
}

/* 3. Ensure Header & Footer are Beige and Clickable */
.cart-header, .cart-footer, .cart-body {
    background-color: beige !important;
    pointer-events: auto !important;
}

/* 4. Rounded Button Fix */
.cart-whatsapp-btn {
    width: 100%;
    background-color: #000 !important;
    color: #fff !important;
    padding: 15px;
    border: none;
    font-weight: bold;
    cursor: pointer !important;
    border-radius: 30px !important; /* Circle sides */
    pointer-events: auto !important;
}

/* 5. Close Button clickable area */
.close-cart-x {
    cursor: pointer !important;
    padding: 10px;
    pointer-events: auto !important;
    background: none;
    border: none;
    font-size: 30px;
}


/* --- FINAL REFINED CART STYLING --- */

/* 1. Main Sidebar - Pure Beige */
.cart-sidebar {
    background-color: #F5F5DC !important;
    display: flex;
    flex-direction: column;
    z-index: 200000000 !important;
    pointer-events: auto !important;
}

/* 2. Header: Title and Close Button on same row + Line Below */
.cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 40px 20px 15px !important;
    background-color: #F5F5DC !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important; /* Line below Your Cart */
}

.close-cart-x {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    font-size: 30px !important;
}

/* 3. Footer Area - Pure Beige + Line Above Button */
.cart-footer {
    padding: 20px !important;
    background-color: #F5F5DC !important; /* Background now beige */
    border-top: none !important;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    color: #000;
}

/* The Line above the WhatsApp button */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

/* 4. Rounded (Pill) Button */
.cart-whatsapp-btn {
    width: 100%;
    background-color: #000 !important;
    color: #fff !important;
    padding: 16px;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 50px !important; /* Rounded Sides */
    transition: 0.3s;
}

.cart-whatsapp-btn:hover {
    background-color: #333 !important;
    transform: scale(1.02);
}

/* Scroll area background */
.cart-body {
    background-color: #F5F5DC !important;
}



/* --- BEIGE CART WITH SEPARATION SPACE --- */

/* Sidebar Container */
.cart-sidebar {
    background-color: #F5F5DC !important;
    display: flex;
    flex-direction: column;
}

/* 1. Header Row + Line Below + GAP BELOW LINE */
.cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 25px 25px 15px !important;
    background-color: #F5F5DC !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important; /* The line below your cart */
    
    /* THE FIX: This creates the separation space you want */
    margin-bottom: 30px !important; 
}

/* 2. Total and Button Area */
.cart-action-area {
    padding: 0 25px 30px !important;
    background-color: #F5F5DC !important;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
    color: #000;
}

/* The Line above the WhatsApp button */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

/* 3. Rounded Pill Button */
.cart-whatsapp-btn {
    width: 100%;
    background-color: #000 !important;
    color: #fff !important;
    padding: 16px;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    border-radius: 50px !important; /* Circle sides */
    cursor: pointer;
    transition: 0.3s;
}

.cart-whatsapp-btn:hover {
    background-color: #333 !important;
}

/* 4. Product List (Beige background) */
.cart-body {
    flex: 1;
    background-color: #F5F5DC !important;
    overflow-y: auto;
    padding: 0 25px 40px;
}



/* --- LUXURY TRASH ICON STYLING --- */

.cart-remove-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents it from getting squished */
}

/* Icon base color (Black/Dark Grey) */
.cart-remove-btn i {
    font-size: 16px !important;
    color: #000;
    font-weight: 100 !important;
    transition: all 0.3s ease;
}

/* Red color on hover only */
.cart-remove-btn:hover i {
    color: #e53935; /* Professional Red */
    transform: scale(1.1);
}

/* --- UNIFIED QUICK CART ICON STYLE (FOR ALL PAGES) --- */

/* 1. The Circle Button on the image */
.quick-cart-btn {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    background-color: #000000 !important; /* Professional Black */
    color: #ffffff !important;           /* White Icon */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer !important;
    z-index: 500;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.quick-cart-btn:hover {
    transform: scale(1.1);
}

/* 2. Force the icon inside to be thin and outlined */
.quick-cart-btn i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
    font-weight: 400 !important; /* 400 = Regular/Outlined */
    font-size: 16px !important;
}

/* Ensure the image container allows absolute positioning */
.product-img-container {
    position: relative !important;
    overflow: hidden;
}
/* --- FIX MODAL CLICKING ISSUE --- */

/* 1. Ensure the modal content is at the front of everything */
.modal-content, .modal-body, .modal-info-area {
    pointer-events: auto !important; /* Forces interactivity */
    z-index: 100;
}

/* 2. Style the Size Buttons so they are clearly clickable */
.m-size-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-block !important;
    background-color: beige;
    position: relative;
    z-index: 200; /* Puts them above the background */
}

/* 3. Logic to show which box is selected (The Black Box) */
.m-size-btn.active {
    background-color: #000 !important;
    color: white !important;
    border-color: #000 !important;
}

/* 4. Fix for quantity stepper buttons too */
.modal-qty-box button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* FORCE BUTTONS TO BE CLICKABLE */
#productModal {
    z-index: 999999999 !important; /* Top layer */
}

.modal-content {
    pointer-events: auto !important;
}

.m-size-btn, .modal-qty-box button, .modal-add-btn, .modal-buy-btn {
    pointer-events: auto !important; /* Forces the browser to listen to clicks */
    cursor: pointer !important;
    position: relative;
    z-index: 100;
}

/* --- Size Buttons Styling --- */
.m-size-btn {
    background-color: #F5F5DC !important; /* Not selected = Beige */
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth hover animation */
}

/* Hover effect for unclicked buttons */
.m-size-btn:hover:not(.active) {
    background-color: #e8e8cc !important; /* Slightly darker beige on hover */
    transform: translateY(-2px);
}

/* Selected Button Style */
.m-size-btn.active {
    background-color: #000000 !important; /* Selected = Black */
    color: #ffffff !important;
}

/* --- ROUNDED MODAL BUTTONS --- */
.m-add-cart-btn, .m-buy-now-btn {
    width: 100%;
    padding: 16px !important;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    /* This makes the buttons perfectly rounded on the sides */
    border-radius: 50px !important; 
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Specific colors and hover animations */
.m-add-cart-btn {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000;
}

.m-add-cart-btn:hover {
    background-color: transparent !important;
    color: #000 !important;
    transform: translateY(-3px);
}

.m-buy-now-btn {
    background-color: #636B2F !important; /* The olive green from your image */
    color: #fff !important;
    border: 1px solid #636B2F;
}

.m-buy-now-btn:hover {
    background-color: transparent !important;
    color: #636B2F !important;
    transform: translateY(-3px);
}

/* --- FIX: SHOW CLOSE MODAL BUTTON --- */
.close-modal {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    
    /* Layering: MUST be higher than the beige background */
    z-index: 9999999 !important; 
    
    /* Look */
    color: #000000 !important;
    font-size: 45px !important; /* Made larger for easier clicking */
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    
    /* Centering the X inside the button */
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.close-modal:hover {
    transform: rotate(90deg);
    opacity: 0.6;
}

/* Ensure the modal container doesn't hide the button */
.modal-content {
    overflow: visible !important; /* This lets the button 'breath' on the edges */
}

/* --- THE ULTIMATE CLICKABLE REPAIR --- */

/* 1. Force the Cart to be the TOP layer (Beige) */
.cart-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -100%; 
    width: 350px;
    height: 100vh !important;
    background-color: #F5F5DC !important; /* THE BEIGE COLOR */
    display: flex !important;
    flex-direction: column !important;
    transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    
    /* NUCLEAR Z-INDEX: Higher than anything else */
    z-index: 2147483647 !important; 
    
    /* RE-ENABLE CLICKING */
    pointer-events: auto !important; 
    opacity: 1 !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important;
}

.cart-sidebar.active {
    right: 0 !important;
}

/* 2. Force the Dark Tint to be the layer BEHIND the cart */
.cart-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    
    /* MUST be lower than the sidebar */
    z-index: 2147483646 !important; 
    
    display: none;
}

.cart-overlay.active {
    display: block !important;
}

/* 3. Ensure the Cart contents are clickable */
.cart-header, .cart-body, .cart-footer, .cart-whatsapp-btn, .close-cart-x {
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* --- MOBILE MODAL SCROLL FIX --- */
@media (max-width: 768px) {
    /* 1. Make the main black-tinted area scrollable */
    .modal {
        overflow-y: auto !important; /* Allows scrolling on the whole screen area */
        display: none; /* Controlled by JS */
        padding: 20px 0 !important; /* Adds room at the top and bottom */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iPhones */
    }

    /* 2. Fix the Beige content box */
    .modal-content {
        margin: 20px auto !important; /* Gives it room to scroll */
        height: auto !important;     /* Let it grow as long as it needs */
        max-height: none !important;  /* Remove any height caps */
        width: 90% !important;
        display: block !important;    /* Forces stack layout */
        position: relative;
    }

    /* 3. Stack the image and info vertically */
    .modal-body {
        flex-direction: column !important;
        overflow: visible !important;
    }

    .modal-image-area {
        height: 250px !important; /* Smaller image so you get to text faster */
        padding: 20px !important;
    }

    .modal-info-area {
        padding: 20px !important;
    }
}

/* --- CART STEPPER STYLING --- */

.cart-qty-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    width: fit-content;
    padding: 2px 10px;
    border-radius: 20px; /* Pill shape like the main site */
    margin: 5px 0;
    background-color: transparent;
}

.cart-qty-stepper button {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    padding: 0 5px;
}

.cart-qty-stepper span {
    font-size: 13px;
    font-weight: 700;
    min-width: 15px;
    text-align: center;
}

/* Ensure information layout stays tidy */
.cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
/* --- CART LAYOUT: CONTROLS TO THE RIGHT --- */

.cart-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between; /* Pushes content to sides */
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    width: 100%;
    gap: 10px;
}

.cart-item-info {
    flex: 1; /* Makes this section take up available space */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* NEW: The Right Side container */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between stepper and trash can */
}

/* Adjust the stepper for a compact look on the right */
.cart-qty-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #FDFDF7; /* Slightly different beige for contrast */
    padding: 2px 8px;
    border-radius: 20px;
    margin: 0 !important; /* Remove old margins */
}

.cart-qty-stepper button {
    font-size: 14px;
    padding: 2px 4px;
}

.cart-qty-stepper span {
    font-size: 12px;
    min-width: 15px;
}

/* Make sure garbage can doesn't have extra margins */
.cart-remove-btn {
    padding: 0;
    margin: 0;
}
/* --- LUXURY BOTTOM SORT DRAWER --- */

/* 1. Trigger style in the navbar/controls bar */
.custom-select-trigger {
    border-bottom: 1px solid #000;
    padding: 5px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 2. Drawer Container */
.sort-drawer {
    position: fixed;
    bottom: -100%; /* Hidden at start */
    left: 0;
    width: 100%;
    background-color: #F5F5DC; /* Beige */
    z-index: 100000001 !important; /* Top layer */
    transition: bottom 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding-bottom: env(safe-area-inset-bottom); /* iOS support */
}

.sort-drawer.active {
    bottom: 0; /* Slides up */
}

/* 3. Dark Overlay */
.sort-drawer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 100000000 !important;
}

.sort-drawer-overlay.active { display: block; }

/* 4. Drawer Content Styles */
.drawer-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
}

.drawer-header h3 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
}

.close-drawer {
    position: absolute;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
}

.sort-options-list {
    list-style: none;
    padding: 20px 0;
}

.sort-opt {
    padding: 15px 40px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
    color: #000;
}

/* Bold the selected option just like your screenshot */
.sort-opt.active {
    font-weight: 700;
}

.sort-opt:hover {
    background-color: rgba(0,0,0,0.03);
}
/* --- FORCE MODAL VISIBILITY --- */
#productModal {
    display: none; /* Controlled by JS */
    position: fixed !important;
    z-index: 2147483647 !important; /* Highest possible layer */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.modal-content {
    pointer-events: auto !important; /* Ensures you can click inside it */
}
/* --- STAGGERED POP ANIMATION FOR MOBILE MENU --- */

/* Initial state: Items are hidden and small */
.mobile-nav-links li {
    opacity: 0;
    transform: scale(0.5); /* Starts small for the "pop" effect */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy movement */
}

/* Active state: When menu is opened, items scale up and fade in */
.mobile-menu.active .mobile-nav-links li {
    opacity: 1;
    transform: scale(1);
}

/* THE STAGGER: Each item waits a bit longer than the one before it */
.mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-nav-links li:nth-child(5) { transition-delay: 0.5s; }

/* Optional: Make the close button (X) also pop in */
#closeMenu {
    opacity: 0;
    transition: all 0.5s ease 0.6s; /* appears last */
}
.mobile-menu.active #closeMenu {
    opacity: 1;
}
/* --- MOBILE LIST VIEW (Reference Match) --- */
@media (max-width: 768px) {

    /* 1. Force List View to 1 column on mobile */
    .products-grid.list-view {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 30px !important;
        padding: 10px !important;
    }

    /* 2. Style the card for the stacked look */
    .products-grid.list-view .product-card {
        flex-direction: column !important; /* Image on top, text bottom */
        height: auto !important;
        background-color: #F5F5DC !important; /* BEIGE BACKGROUND */
        border: none !important;
        padding-bottom: 20px !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 3. Make the image large and clear */
    .products-grid.list-view .product-img-container {
        width: 100% !important;
        height: 350px !important; /* Taller height for that luxury feel */
        background-color: transparent !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .products-grid.list-view .product-img {
        height: 100% !important;
        padding: 0 !important;
        transform: scale(1.1); /* Keep the zoom effect */
    }

    /* 4. Align the info below the image */
    .products-grid.list-view .product-info {
        padding: 20px 10px 10px 10px !important;
    }

    .products-grid.list-view .product-name {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* 5. Center the prices */
    .products-grid.list-view .price-row {
        flex-direction: row !important; /* Keep price and old price on same line */
        justify-content: center !important;
        align-items: center !important;
        padding-right: 0 !important;
        gap: 15px;
    }

    /* 6. Fix Quick Cart position for this specific mobile view */
    .products-grid.list-view .quick-cart-btn {
        bottom: 20px;
        right: 20px;
    }
}
/* --- FIX: SORT BUTTON & SEARCH VISIBILITY --- */

/* Ensures the Sort/Grid view bar is clickable and on top */
.controls-bar {
    position: relative !important;
    z-index: 500 !important;
    pointer-events: auto !important;
}

.luxury-select-box {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* --- FIX SEARCH RESULTS VISIBILITY --- */
#searchResults {
    width: 95% !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important; /* Items list from top to bottom */
    gap: 12px;
    margin: 30px auto 0 !important; /* Centered */
    max-height: 60vh;
    overflow-y: auto; /* Allow scrolling results */
    padding: 10px;
    z-index: 500;
}

.search-item {
    display: flex !important;
    align-items: center;
    background-color: #ffffff !important; /* Force results to be WHITE boxes */
    padding: 12px;
    border: 1px solid #ddd;
    text-decoration: none !important;
    color: #000 !important;
    border-radius: 4px;
    transition: 0.3s;
}

.search-item h4 {
    margin: 0 0 2px 0 !important;
    font-size: 14px !important;
}

.search-item img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    margin-right: 15px;
    background: #f9f9f9;
}

/* --- EMERGENCY VISIBILITY FIX --- */

/* Force Hero and About to show up no matter what */
.hero, .about-section {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important; /* Hero needs flex for centering */
}

/* Force the content inside them to show */
.hero-content, .about-container, .reveal {
    opacity: 1 !important;
    transform: none !important; /* Stop the 'slide up' if it's stuck */
    visibility: visible !important;
}

/* Ensure the about section is below the hero */
.about-section {
    display: block !important;
    position: relative;
    padding: 80px 5% !important;
}