/*!
Theme Name: dpsainiflorist
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dpsainiflorist
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dpsainiflorist is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

  /* Import Poppins Font */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

  /* --- BASE & VARIABLES --- */
  :root {
    --fa-blue: #0b5e7d;       
    --fa-blue-dark: #0f4b63;  
    --bg-light-blue: #e8f4fa; 
    --bg-search: #f0f2f5;     
    --text-main: #333333;
    --text-light: #666666;
    --border-color: #eaeaea;
    --red-badge: #f00;
    --max-width: 1400px;
    --font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .fa-header-wrapper * { box-sizing: border-box; font-family: var(--font-stack); }
  
  .fa-header-wrapper {
    background: #ffffff;
    width: 100%;
    position: relative;
    z-index: 999;
    display: block; 
  }
  
  .fa-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: block;
    position: relative; 
  }

  .fa-header-wrapper a { text-decoration: none; color: inherit; }
  .fa-header-wrapper ul { list-style: none; margin: 0; padding: 0; }
  .fa-header-wrapper button { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

  /* ==========================================
     UTILITY CLASSES
     ========================================== */
  @media(min-width: 1025px) { 
    .fa-hide-desktop { display: none !important; } 
  }
  @media(max-width: 1024px) { 
    .fa-hide-mobile { display: none !important; } 
    .fa-action-item > span { display: none !important; }
  }

  /* --- DESKTOP HEADER (TOP) --- */
  .fa-header-top { display: flex; align-items: center; padding: 12px 0; width: 100%; justify-content: space-between; }

  .fa-logo img { max-width: 180px; height: auto; display: block; }
  .fa-logo h2 { margin: 0; color: var(--fa-blue); font-size: 24px; font-weight: 700; }

  /* Search Bar (Adjusted for Layout) */
  .fa-search-wrapper { flex-grow: 1; max-width: 600px; margin: 0 40px; }
  .fa-search-form {
    display: flex; align-items: center; background: var(--bg-search); border-radius: 6px;
    padding: 0 16px; height: 44px; width: 100%;
  }
  .fa-search-form input {
    flex-grow: 1; background: transparent; border: none; outline: none;
    font-size: 14px; color: var(--text-main); box-shadow: none;
  }
  .fa-search-form button svg { width: 20px; height: 20px; stroke: #555; stroke-width: 1.5; fill: none; }

  /* Action Icons (Right) */
  .fa-actions { display: flex; align-items: center; gap: 24px; position: relative; }
  .fa-action-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-main); gap: 4px; position: relative; cursor: pointer;
  }
  .fa-action-item svg { width: 24px; height: 24px; stroke: #111; stroke-width: 1.5; fill: none; }
  
  /* Cart Bag & Badge */
  .fa-cart-icon { position: relative; display: flex; align-items: center; justify-content: center; }
  .fa-badge {
    position: absolute; top: -6px; right: -8px; background: var(--red-badge); color: #fff;
    font-size: 11px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2;
  }

  /* --- MORE DROPDOWN MENU (Desktop & Mobile) --- */
  .fa-more-dropdown {
    position: absolute; top: 110%; right: 0; background: #ffffff; 
    border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    width: 260px; border-radius: 6px; padding: 8px 0;
    opacity: 0; visibility: hidden; transition: 0.2s; z-index: 10001;
    display: flex; flex-direction: column; text-align: left;
  }
  .fa-more-dropdown.active { opacity: 1; visibility: visible; top: 100%; }
  .fa-more-dropdown li { border-bottom: 1px solid #f0f0f0; }
  .fa-more-dropdown li:last-child { border-bottom: none; }
  .fa-more-dropdown li a {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; color: var(--text-main); font-size: 14px; font-weight: 400;
  }
  .fa-more-dropdown li a:hover { background: #f9f9f9; color: var(--fa-blue); }
  .fa-more-dropdown svg { width: 20px; height: 20px; stroke: #1f2937; stroke-width: 1.5; fill: none; }
  .fa-badge-new {
    background: #137785; color: #fff; font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 12px; margin-left: auto;
  }

  /* ==========================================
     SMART STICKY DESKTOP NAV 
     ========================================== */
  .fa-header-bottom-wrapper {
    position: relative;
    z-index: 998;
    width: 100%;
  }

  .fa-header-bottom { 
    border-top: 1px solid var(--border-color); 
    border-bottom: 1px solid var(--border-color); 
    background: #ffffff; 
    position: relative;
    width: 100%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }

  /* Sticky States applied by JS */
  .fa-header-bottom.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    transform: translateY(-100%);
  }
  .fa-header-bottom.is-sticky.show-sticky {
    transform: translateY(0); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  }

  .fa-nav { display: flex; justify-content: center; position: static;}
  .fa-nav > li { position: relative; padding-bottom: 2px;} 
  
  .fa-nav > li > a {
    display: block; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400;
    color: #1c2120; padding: 14px clamp(5px, 0.8vw, 15px); transition: color 0.2s;
  }
  .fa-nav > li > a.active, .fa-nav > li:hover > a {
    color: var(--fa-blue); border-bottom: 2px solid var(--fa-blue); margin-bottom: -2px;
  }

  /* Mega Menu Dropdown */
  .fa-mega-menu {
    position: absolute; top: 100%; left: -20px; width: max-content;
    background-color: #ffffff !important; 
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color); border-top: 2px solid var(--fa-blue);
    border-radius: 0 0 8px 8px; display: flex; padding: 0; 
    opacity: 0; visibility: hidden; transition: all 0.2s ease;
    z-index: 99999 !important; pointer-events: none; overflow: hidden; 
  }
  .fa-nav > li:hover .fa-mega-menu { opacity: 1; visibility: visible; pointer-events: auto;}
  
  .fa-mega-col { min-width: 210px; text-align: left; padding: 26px 30px; }
  .fa-mega-col:nth-child(odd) { background-color: #ffffff; }
  .fa-mega-col:nth-child(even) { background-color: #f7f9fa; }

  .fa-mega-col h4 { margin: 0 0 15px 0; font-size: 15px; font-weight: 600; color: #000; }
  .fa-mega-col li a { display: block; padding: 6px 0; font-size: 14px; color: var(--text-light); }
  .fa-mega-col li a:hover { color: var(--fa-blue); }

  /* ==========================================
     MOBILE SPECIFIC STYLES 
     ========================================== */
  @media(max-width: 1024px) {
    .fa-container { padding: 0 12px; }
    .fa-header-top { justify-content: space-between; padding: 10px 0; gap: 8px; }
    
    .fa-mobile-left { display: flex; align-items: center; gap: 10px; }
    .fa-logo img { max-width: 125px; } 
    
    .fa-hamburger svg { width: 26px; height: 26px; stroke: var(--fa-blue); stroke-width: 2; }
    
    .fa-actions { gap: 14px; margin-left: auto; }
    .fa-action-item svg { width: 22px; height: 22px; stroke: var(--fa-blue); }
  }

  /* Mobile Slide-down Search Bar */
  .fa-mobile-search-bar { display: none; background: #fff; padding: 10px 12px; border-top: 1px solid var(--border-color); }
  .fa-mobile-search-bar.active { display: block; }
  .fa-mobile-search-bar .fa-search-form { background: var(--bg-search); height: 40px; }

  /* --- MOBILE DRAWER MENU & SUBMENU --- */
  .fa-drawer-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 99999; opacity: 0; visibility: hidden; transition: 0.3s; }
  .fa-drawer-overlay.active { opacity: 1; visibility: visible; }
  .fa-drawer { position: fixed; top: 0; left: -100%; width: 85vw; max-width: 380px; height: 100vh; background: #fff; z-index: 100000; transition: left 0.3s ease; display: flex; flex-direction: column; }
  .fa-drawer.active { left: 0; }
  .fa-drawer-header { display: flex; align-items: center; padding: 20px 16px; border-bottom: 1px solid var(--border-color); }
  .fa-drawer-back { margin-right: 16px; cursor: pointer; }
  .fa-drawer-back svg { width: 24px; height: 24px; stroke: #333; stroke-width: 1.5; fill: none; }
  .fa-drawer-user { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: #333; flex-grow: 1;}
  .fa-drawer-user svg { width: 26px; height: 26px; stroke: var(--fa-blue); stroke-width: 1.5; fill: none;}
  .fa-drawer-signin { color: var(--fa-blue); font-weight: 600; font-size: 14px; }
  .fa-drawer-body { flex-grow: 1; overflow-y: auto; text-align: left; }
  .fa-drawer-nav { list-style: none; padding: 0; margin: 0; }
  .fa-drawer-nav > li { border-bottom: 1px solid var(--border-color); }
  .fa-drawer-link { display: flex; justify-content: space-between; align-items: center; padding: 16px; font-size: 15px; color: #333; font-weight: 500; cursor: pointer; }
  .fa-drawer-link svg { width: 16px; height: 16px; stroke: var(--fa-blue); stroke-width: 2; fill: none; transition: 0.3s; }
  .fa-drawer-link.open svg { transform: rotate(90deg); }
  .fa-drawer-submenu { display: none; background: #f9fbfb; padding: 10px 0; }
  .fa-drawer-submenu.open { display: block; }
  .fa-drawer-submenu li a { display: block; padding: 10px 32px; font-size: 14px; color: #555; }
  .fa-drawer-submenu li a:hover { color: var(--fa-blue); }
  .fa-drawer-footer { padding: 16px; background: #fff; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .fa-drawer-footer-text div:first-child { font-weight: 700; font-size: 14px; color: #000; }
  .fa-drawer-footer-text div:last-child { font-weight: 700; font-size: 14px; color: var(--fa-blue); }
  .fa-drawer-btn { background: var(--fa-blue-dark); color: #fff !important; padding: 10px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; }


/* ==========================================
   CUSTOM SLIDER STYLES (STRICT FIX)
   ========================================== */
.fa-slider-section {
    width: 100%;
    background: #ffffff;
    padding: 20px 0;
}

.fa-slider-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    box-sizing: border-box;
}

.fa-slider-viewport {
    overflow: hidden; 
    border-radius: 16px; 
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* This removes any potential background color showing through */
    background: transparent; 
}

.fa-slider-track {
    display: flex;
    flex-wrap: nowrap; /* Forces them into a single horizontal line */
    gap: 0 !important; /* Forces NO space between slides */
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.fa-slide {
    flex: 0 0 100% !important; /* Strictly forces slide to take exactly 100% of viewport */
    min-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Force the picture tag to act as a full-width block */
.fa-slide picture {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.fa-slide img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Pagination Dots */
.fa-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.fa-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #a0a0a0;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.fa-slider-dot.active {
    background: #0f4b63;
    border-color: #0f4b63;
    width: 10px;
    height: 10px;
}

.fa-slide a {
    display: block;
    width: 100%;
    height: 100%;
}



/* ==========================================
   GLOBAL SECTION SETTINGS
   ========================================== */
.fa-categories-section,
.fa-occasions-section {
    padding: 30px 0;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

.fa-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================
   TOP CATEGORIES (8 ICONS)
   ========================================== */
.fa-categories-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 items in a row on desktop */
    gap: 20px;
    align-items: start;
}

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

.fa-category-item:hover {
    transform: translateY(-4px);
}

.fa-category-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Perfect Square */
    border-radius: 20px; /* Soft rounded corners */
    overflow: hidden;
    background: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

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

.fa-category-title {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    line-height: 1.3;
}

/* ==========================================
   BOTTOM OCCASIONS (ARCH CARDS)
   ========================================== */
.fa-occasions-section {
    padding-top: 20px;
    padding-bottom: 20px;
}

.fa-section-header {
    text-align: center;
    margin-bottom: 30px;
}

.fa-section-header h2 {
    font-size: 26px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 8px 0;
}

.fa-section-header p {
    font-size: 15px;
    color: #666666;
    margin: 0;
}

.fa-occasions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items in a row on desktop */
    gap: 24px;
}

.fa-occasion-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* This creates the perfect Arch shape on top and rounded corners on bottom! */
    border-radius: 300px 300px 12px 12px; 
    overflow: hidden;
    border: 1px solid #eaeaea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #ffffff;
}

.fa-occasion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.fa-occasion-img {
    width: 100%;
    aspect-ratio: 1 / 1.05; /* Slightly taller than a square for the arch */
    overflow: hidden;
}

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

.fa-occasion-card:hover .fa-occasion-img img {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.fa-occasion-text {
    padding: 16px 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    background: #ffffff;
}

/* ==========================================
   MOBILE RESPONSIVE STYLES
   ========================================== */
@media (max-width: 1024px) {
    /* Tablet */
    .fa-categories-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .fa-occasions-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    /* Mobile */
    .fa-section-header h2 { font-size: 20px; }
    .fa-section-header p { font-size: 13px; }
    
    /* Top Icons: 4 Columns so they fit nicely */
    .fa-categories-grid { 
        grid-template-columns: repeat(4, 1fr); 
        gap: 12px 8px; 
    }
    
    .fa-category-title { font-size: 12px; }

    /* Bottom Cards: Exactly 2 Columns as requested */
    .fa-occasions-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 16px; 
    }
    
    .fa-occasion-text { font-size: 13px; padding: 12px 8px; }
}


/* ==========================================
   BEST SELLERS SECTION
   ========================================== */
.fa-bestsellers-section {
    padding: 40px 0;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
}

.fa-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.fa-header-titles h2 { font-size: 24px; font-weight: 600; color: #111; margin: 0 0 4px 0; }
.fa-header-titles p { font-size: 14px; color: #666; margin: 0; }
.mobile-title { display: none; }

/* Buttons */
.fa-btn {
    background: #0f4b63;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fa-btn:hover { background: #0b3647; color: #fff; }

/* Hidden by default on desktop */
.fa-mobile-btn-wrap { display: none; }

/* Product Grid (Desktop) */
.fa-products-carousel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Product Card */
.fa-product-card {
    border: 1px solid #eaeaea; border-radius: 12px; position: relative;
    background: #fff; display: flex; flex-direction: column;
    transition: box-shadow 0.3s ease; overflow: hidden;
}
.fa-product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

.fa-product-img-wrap { width: 100%; aspect-ratio: 1 / 1; display: block; overflow: hidden; position: relative; }
.fa-product-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.fa-product-card:hover .fa-product-img-wrap img { transform: scale(1.05); }

/* Wishlist Icon */
.fa-wishlist-btn {
    position: absolute; top: 12px; right: 12px; background: #fff; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: none; cursor: pointer;
}
.fa-wishlist-btn svg { width: 18px; height: 18px; stroke: #0f4b63; }

/* Product Info */
.fa-product-info { padding: 16px; flex-grow: 1; display: flex; flex-direction: column;}
.fa-product-title {
    font-size: 14px; color: #333; text-decoration: none; display: block;
    margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pricing Row (Perfectly Matched to Screenshot) */
.fa-product-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fa-price-sale { font-size: 18px; font-weight: 600; color: #222222; }
.fa-price-regular { font-size: 14px; font-weight: 500; color: #a0a0a0; text-decoration: line-through; }
.fa-price-discount { font-size: 14px; font-weight: 700; color: #f6a000; text-transform: uppercase; }

/* Ratings */
.fa-product-rating-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; }
.fa-rating-badge { background: #4caf50; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.fa-rating-dot { color: #ccc; }
a.fa-rating-count { color: #378b8b; font-weight: 500; text-decoration: none; transition: color 0.2s; }
a.fa-rating-count:hover { text-decoration: underline; color: #0f4b63; }

/* Delivery */
.fa-product-delivery { font-size: 12px; color: #666; margin-top: auto; }
.fa-product-delivery span { color: #378b8b; font-weight: 500; }

/* Indian Standard Veg / Eggless Icon Overlay */
.fa-veg-badge {
    position: absolute;
    bottom: 10px;  /* 10px from the bottom of the image */
    left: 10px;    /* 10px from the left of the image */
    width: 18px;
    height: 18px;
    border: 2px solid #008a00;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    z-index: 10;
}
.fa-veg-badge .veg-dot {
    width: 8px;
    height: 8px;
    background-color: #008a00;
    border-radius: 50%;
}



.fa-badge-todays-best { display: none; }

/* ==========================================
   MOBILE RESPONSIVE 
   ========================================== */
@media (max-width: 1024px) {
    .fa-products-carousel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .desktop-title, .desktop-subtitle, .fa-btn-desktop { display: none; }
    .mobile-title { display: block; font-size: 20px; font-weight: 600; text-align: center; width: 100%; margin-bottom: 0;}
    .fa-section-header-row { justify-content: center; margin-bottom: 20px; }

    /* Native CSS Swipe Carousel */
    .fa-products-carousel {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
        gap: 16px; padding-bottom: 15px; 
    }
    .fa-products-carousel::-webkit-scrollbar { display: none; }
    .fa-products-carousel { -ms-overflow-style: none; scrollbar-width: none; }

    .fa-product-card { flex: 0 0 70%; scroll-snap-align: start; }

    /* Today's Best Mobile Styling */
    .fa-todays-best { border: 1px solid #b71c1c; border-radius: 8px; }
    .fa-badge-todays-best {
        display: block; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
        background: #b71c1c; color: #fff; font-size: 11px; font-weight: 700;
        padding: 4px 12px; border-radius: 0 0 6px 6px; z-index: 10; white-space: nowrap;
    }

    /* Fixed View All Button on Mobile */
    .fa-mobile-btn-wrap {
        display: flex; 
        justify-content: center; 
        margin-top: 20px; /* Gives space between carousel and button */
        width: 100%;
    }
    .fa-btn-mobile {
        width: auto;
        min-width: 160px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}



/* ==========================================
   LOGIN / WISHLIST MODAL STYLES (UPDATED)
   ========================================== */
.fa-auth-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); z-index: 100000;
    opacity: 0; visibility: hidden; transition: 0.3s ease;
}
.fa-auth-overlay.active { opacity: 1; visibility: visible; }

.fa-auth-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%);
    width: 900px; max-width: 95%; background: #fff; border-radius: 16px;
    z-index: 100001; opacity: 0; visibility: hidden; transition: 0.3s ease;
    display: flex; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.fa-auth-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.fa-auth-close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
    border-radius: 50%; border: 1px solid #ccc; background: #fff;
    font-size: 20px; color: #666; cursor: pointer; display: flex;
    align-items: center; justify-content: center; z-index: 10;
}

.fa-auth-left { width: 45%; position: relative; }
.fa-auth-left img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fa-auth-right { width: 55%; padding: 40px 50px; display: flex; flex-direction: column; justify-content: center; }
.fa-auth-right h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 8px 0; }
.fa-auth-sub { font-size: 14px; color: #555; margin: 0 0 24px 0; }

.fa-input-group {
    display: flex; align-items: center; border: 1px solid #ccc; border-radius: 6px;
    padding: 10px 16px; margin-bottom: 16px;
}
.fa-input-group svg { width: 20px; height: 20px; stroke: #888; margin-right: 12px; flex-shrink: 0; }
.fa-input-group input { border: none; outline: none; width: 100%; font-size: 15px; font-family: 'Poppins', sans-serif;}

/* New Actions Row (Remember Me / Forgot Password) */
.fa-auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 20px;
    color: #555;
}
.fa-auth-actions label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0;}
.fa-auth-actions a { color: #0f4b63; text-decoration: none; font-weight: 500; }
.fa-auth-actions a:hover { text-decoration: underline; }

.fa-auth-submit {
    width: 100%; background: #0f4b63; color: #fff; border: none; border-radius: 6px;
    padding: 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.fa-auth-submit:hover { background: #0b3647; }

.fa-terms-text { font-size: 12px; color: #777; text-align: center; margin-bottom: 20px; }
.fa-terms-text a { color: #555; text-decoration: underline; }

/* Testimonial */
.fa-auth-testimonial { border-top: 1px solid #eee; padding-top: 20px; }
.fa-testi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.fa-testi-header h4 { font-size: 14px; font-weight: 700; margin: 0; color: #111;}
.fa-testi-dots span { display: inline-block; width: 6px; height: 6px; background: #ddd; border-radius: 50%; margin-left: 4px; }
.fa-testi-dots span.active { background: #0f4b63; }

.fa-testi-card { display: flex; align-items: center; gap: 16px; border: 1px solid #eaeaea; border-radius: 8px; padding: 16px; }
.fa-testi-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.fa-testi-content p { font-size: 13px; color: #333; margin: 0 0 4px 0; }
.fa-testi-content strong { font-size: 13px; color: #111; }


/* Multi-view Logic */
.fa-auth-view {
    display: none;
    animation: faFadeIn 0.4s ease forwards;
}
.fa-auth-view.active {
    display: block;
}

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

/* Switch Text */
.fa-auth-switch-text {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 24px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.fa-auth-switch-text a {
    color: #0f4b63;
    font-weight: 600;
    text-decoration: none;
}
.fa-auth-switch-text a:hover { text-decoration: underline; }

/* Attractive Simulated Captcha */
.fa-captcha-box {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    cursor: pointer;
}
.fa-captcha-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0 12px 0 0;
    accent-color: #0f4b63;
}
.fa-captcha-box label {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    flex-grow: 1;
    margin: 0;
}
.fa-captcha-logo {
    width: 30px;
    opacity: 0.6;
}



@media(max-width: 768px) {
    .fa-auth-modal { flex-direction: column; width: 95%; max-height: 90vh; overflow-y: auto; }
    .fa-auth-left { width: 100%; height: 150px; }
    .fa-auth-right { width: 100%; padding: 24px; }
}





/* ==========================================
   CATEGORY PAGE LAYOUT
   ========================================== */
.fa-archive-wrapper { font-family: 'Poppins', sans-serif; background: #f9fbfb; padding-bottom: 50px; }

/* 1. Top Subcategories Slider */
.fa-subcats-section { background: #fff; padding: 30px 15px; border-bottom: 1px solid #eaeaea; text-align: center; }
.fa-archive-title { font-size: 24px; font-weight: 600; color: #111; margin-bottom: 24px; }

.fa-subcats-slider {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; max-width: 1200px; margin: 0 auto; justify-content: center;
}
.fa-subcats-slider::-webkit-scrollbar { display: none; }

.fa-subcat-card {
    flex: 0 0 140px; scroll-snap-align: start; text-align: center; text-decoration: none; display: block;
}
.fa-subcat-img-wrap {
    width: 140px; height: 140px; background: #ffebee; border: 2px solid #64b5f6;
    border-radius: 50% 50% 12px 12px; /* The Custom Arch Shape! */
    padding: 8px; margin-bottom: 10px; overflow: hidden; position: relative;
    transition: transform 0.3s;
}
.fa-subcat-img-wrap::before {
    content: '❄'; /* Decorative snowflake */ position: absolute; top: 5px; left: 15px; color: #64b5f6; font-size: 16px;
}
.fa-subcat-img-wrap img { width: 100%; height: 100%; border-radius: 50% 50% 8px 8px; object-fit: cover; }
.fa-subcat-card:hover .fa-subcat-img-wrap { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.fa-subcat-card span { font-size: 14px; font-weight: 500; color: #333; }

/* 2. Main Layout */
.fa-archive-layout { display: flex; gap: 30px; margin-top: 30px; }

/* Desktop Sidebar */
.fa-desktop-sidebar { width: 260px; flex-shrink: 0; background: #fff; border-radius: 8px; padding: 20px; border: 1px solid #eaeaea; height: max-content;}
.fa-filter-title { font-size: 18px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; }
.fa-filter-heading { font-size: 13px; font-weight: 600; color: #555; cursor: pointer; display: flex; justify-content: space-between; margin: 20px 0 10px; }
.fa-filter-heading::after { content: '^'; font-size: 12px; transition: 0.3s; }
.fa-filter-content { display: flex; flex-direction: column; gap: 8px; }

/* Checkboxes & Buttons */
.fa-checkbox-label { font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fa-price-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-price-btn { border: 1px solid #ddd; background: #fff; border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #0f4b63; cursor: pointer; }
.fa-price-btn:hover, .fa-price-btn.active { border-color: #0f4b63; background: #e8f4fa; }

/* Main Area */
.fa-archive-main { flex-grow: 1; min-width: 0; }

/* Toolbar & Sliding Pills */
.fa-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.fa-sliding-pills { display: flex; gap: 10px; overflow-x: auto; flex-grow: 1; scroll-snap-type: x mandatory; padding-bottom: 5px;}
.fa-sliding-pills::-webkit-scrollbar { display: none; }
.fa-pill { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 8px 16px; font-size: 13px; color: #555; white-space: nowrap; scroll-snap-align: start; text-decoration: none; }
.fa-pill:hover, .fa-pill.active { border-color: #0f4b63; color: #0f4b63; }

.fa-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Load More */
.fa-load-more-wrap { text-align: center; margin-top: 40px; }
.fa-btn { background: #0f4b63; color: #fff; border: none; border-radius: 6px; padding: 12px 30px; font-weight: 600; cursor: pointer; }
.fa-btn-outline { background: #fff; color: #0f4b63; border: 1px solid #0f4b63; border-radius: 6px; padding: 12px 30px; font-weight: 600; cursor: pointer; }

/* ==========================================
   MOBILE FILTER DRAWER (Dual Pane)
   ========================================== */
.fa-filter-overlay { position: fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.6); z-index:100000; opacity:0; visibility:hidden; transition: 0.3s; }
.fa-filter-overlay.active { opacity: 1; visibility: visible; }

.fa-filter-drawer {
    position: fixed; top:0; left:-100%; width: 90vw; max-width: 400px; height: 100vh; background: #fff;
    z-index: 100001; transition: left 0.3s ease; display: flex; flex-direction: column;
}
.fa-filter-drawer.active { left: 0; }

.fa-filter-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #eee; }
.fa-filter-header h3 { margin:0; font-size: 18px; font-weight: 600; }
.fa-clear-all { background: none; border: none; color: #888; font-size: 13px; font-weight: 600; }

.fa-filter-body { display: flex; flex-grow: 1; overflow: hidden; }

/* Left Pane (Tabs) */
.fa-filter-tabs { width: 35%; background: #e8f4fa; overflow-y: auto; border-right: 2px solid #0f4b63; }
.fa-tab-btn { width: 100%; text-align: left; padding: 16px; border: none; background: transparent; font-size: 12px; font-weight: 600; color: #333; border-bottom: 1px solid #daecf5; cursor: pointer; }
.fa-tab-btn.active { background: #fff; color: #111; border-left: 3px solid #0f4b63; }

/* Right Pane (Content) */
.fa-filter-panes { width: 65%; background: #f9fbfb; overflow-y: auto; padding: 16px; }
.fa-pane-content { display: none; }
.fa-pane-content.active { display: flex; flex-direction: column; gap: 12px; }

.fa-filter-footer { display: flex; padding: 16px; border-top: 1px solid #eee; gap: 10px; background:#fff;}
.fa-filter-footer button { flex: 1; }

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .fa-subcats-slider { justify-content: flex-start; }
    .fa-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .fa-archive-layout { margin-top: 15px; }
    .fa-archive-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .fa-mobile-toolbar { display: flex; gap: 10px; }
    .fa-tool-btn { flex: 1; border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 10px; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 8px;}
}



/* 1. Ensure the Mega Menu is completely hidden when not hovering */
.fa-mega-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1 !important; /* Forces it behind everything when closed */
}
.fa-nav > li:hover .fa-mega-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 99999 !important; /* Jumps to the front when opened */
}

/* 2. Give the pills a solid background so nothing bleeds through */
.fa-pill { 
    border: 1px solid #ccc; 
    background-color: #ffffff; /* Solid white background */
    border-radius: 6px; 
    padding: 8px 16px; 
    font-size: 13px; 
    color: #555; 
    white-space: nowrap; 
    scroll-snap-align: start; 
    text-decoration: none; 
    position: relative;
    z-index: 10;
}



/* Filter Header & Clear Button Styling */
.fa-filter-header-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.fa-filter-header-desktop .fa-filter-title {
    border: none;
    padding: 0;
    margin: 0;
}

.fa-clear-filters-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.fa-clear-filters-btn:hover {
    color: #b71c1c; /* Turns red on hover to indicate a reset/delete action */
}