/* Modern Design CSS - Based on Proyojon Plus Design */

/* Cart Count Badge */
.cart-count-badge {
    position: absolute;
    top: -5px;
    right: 7px;
    background: #ff0000;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    min-width: 18px;
    padding: 0;
}

.header__icon--cart {
    position: relative;
}

.cart-count-badge:empty {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   BASE BODY STYLES
   ============================================ */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: rgba(18, 18, 18, 0.75);
    background: #ffffff;
}

/* ============================================
   MOBILE RESPONSIVE - Overflow & Positioning
   CRITICAL: Fix overflow for sticky positioning on mobile
   ============================================ */
@media (max-width: 990px) {
    html {
        overflow-x: hidden;
        overflow-y: visible; /* CRITICAL: visible allows sticky - viewport scrolls naturally */
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: visible; /* CRITICAL: visible allows sticky - viewport scrolls naturally */
        height: auto;
        min-height: 100vh;
        position: relative;
        padding-top: 0;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Override any conflicting overflow rules from other CSS files */
    html body,
    body.gotop {
        overflow-x: hidden;
        overflow-y: visible; /* Explicitly remove overflow-y: auto - it breaks sticky */
    }
}

/* ============================================
   MOBILE - Padding for Fixed Bottom Navigation
   ============================================ */
@media (max-width: 968px) {
    body {
        padding-bottom: 70px;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 60px;
    }
    
    /* Ensure top-banner is visible and fixed at top on mobile */
    .top-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 36px;
        padding: 6px 15px;
        font-size: 12px;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002 !important; /* Above sticky header */
        width: 100% !important;
        margin: 0 !important;
        background: linear-gradient(90deg, #0a77b8 0%, #0a77b8 100%) !important;
        box-sizing: border-box;
    }
    
    /* Calculate exact height and adjust body padding */
    body {
        padding-top: 36px !important; /* Match top-banner height exactly */
    }
    
    .top-banner .banner-content {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    .top-banner .banner-content span {
        display: inline-block;
        white-space: nowrap;
    }
    
    /* Adjust sticky-header to appear below top-banner with no gap */
    sticky-header,
    sticky-header.header-wrapper,
    .header-wrapper {
        position: fixed !important;
        top: 36px !important; /* Match top-banner height exactly - no gap */
        z-index: 1001;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure header inside sticky-header is positioned correctly */
    sticky-header header,
    sticky-header .header {
        position: relative;
        top: 0;
        z-index: 1001;
    }
    
    /* Add margin-top to product-section for proper spacing below header */
    .product-section {
        margin-top: 68px !important;
    }
}

/* Top Banner */
.top-banner {
    background: linear-gradient(90deg, #0a77b8 0%, #0a77b8 100%);
    color: white;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.banner-content {
    display: inline-block;
    animation: scroll 20s linear infinite;
    line-height: 1.5;
    vertical-align: middle;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.banner-content span {
    margin: 0 40px;
}

/* Header */
header {
    background: white;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Desktop: Make sticky-header sticky - CRITICAL FIX */
@media (min-width: 991px) {
    /* Ensure body and html allow sticky positioning */
    html {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 100%;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        min-height: 100vh;
        height: auto;
    }
    
    /* CRITICAL: Ensure no wrapper breaks sticky positioning */
    body > *:not(sticky-header):not(.top-banner) {
        overflow-x: visible !important;
    }
    
    /* Make sticky-header sticky on desktop - MUST be direct child of body */
    body > sticky-header,
    body > sticky-header.header-wrapper,
    body > .header-wrapper {
        position: -webkit-sticky !important; /* Safari support */
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Also target sticky-header regardless of parent - STRONGEST RULE */
    sticky-header,
    sticky-header.header-wrapper,
    sticky-header.scrolled,
    sticky-header.header-wrapper.scrolled,
    .header-wrapper,
    .header-wrapper.scrolled {
        position: -webkit-sticky !important; /* Safari support */
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        width: 100% !important;
    }
    
    /* Override any JavaScript-added classes that might break sticky */
    sticky-header.fixed-top,
    sticky-header[style*="position: fixed"],
    .header-wrapper.fixed-top,
    .header-wrapper[style*="position: fixed"] {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
    }
    
    /* When top-banner exists, header should stick below it */
    .top-banner {
        position: relative;
        z-index: 1001;
    }
    
    /* Header should stick right after top-banner */
    .top-banner + sticky-header,
    .top-banner + .header-wrapper {
        position: -webkit-sticky !important; /* Safari support */
        position: sticky !important;
        top: 0 !important;
    }
    
    /* Ensure header inside sticky-header is positioned correctly */
    sticky-header header,
    sticky-header .header,
    .header-wrapper header,
    .header-wrapper .header {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
    }
    
    /* Make sure header element itself is also sticky as backup */
    header {
        position: relative !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
}

/* CRITICAL: Override style.css line 325-327 - Mobile Header Must Be Visible on Mobile */
@media (max-width: 990px) {
    /* Override any rules hiding mobile header */
    .mobile-header,
    header .mobile-header,
    header#navbar_top .mobile-header,
    body .mobile-header,
    html body .mobile-header,
    html body header .mobile-header {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    /* CRITICAL: Ensure top-banner is visible and fixed at top on mobile */
    .top-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002 !important;
        width: 100% !important;
        background: linear-gradient(90deg, #0a77b8 0%, #0a77b8 100%) !important;
        margin: 0 !important;
        padding: 8px 15px !important;
        height: auto !important;
        min-height: 40px;
    }
    
    /* Adjust body padding to account for fixed top-banner */
    body {
        padding-top: 40px !important;
    }
    
    /* CRITICAL: Ensure sticky-header appears below top-banner */
    sticky-header,
    .header-wrapper {
        display: block;
        visibility: visible;
        opacity: 1;
        position: fixed;
        top: 40px !important; /* Below top-banner */
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1001; /* Below top-banner */
    }
    
    header.header--left-center-right,
    header.header--mobile-center {
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    /* Show header-drawer (hamburger menu) on mobile - LEFT SIDE */
    .header-drawer,
    header .header-drawer,
    sticky-header .header-drawer,
    header-drawer {
        display: flex;
        visibility: visible;
        opacity: 1;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* Show hamburger icon on mobile */
    .header__icon--menu,
    .header__icon--menu summary,
    .header__icon--menu .header__icon--summary {
        display: flex;
        visibility: visible;
        opacity: 1;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }
    
    /* Show menu drawer on mobile */
    .menu-drawer,
    .menu-drawer-container,
    #menu-drawer,
    #Details-menu-drawer-container {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

/* Override existing header styles */
.main-header {
    background: white;
}

.logo-area {
    background: white;
    padding: 15px 0;
}

.logo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.main-logo img {
    height: 40px;
    max-height: 40px;
}

.main-search {
    flex: 1;
    max-width: 600px;
}

.main-search form {
    display: flex;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    background: white;
}

.main-search input {
    flex: 1;
    padding: 10px 20px;
    border: none;
    outline: none;
}

.main-search button {
    padding: 10px 20px;
    background: #0a77b8;
    color: white;
    border: none;
    cursor: pointer;
}

.header-list-items ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.header-list-items a {
    color: #121212;
    text-decoration: none;
    transition: color 0.3s;
}

.header-list-items a:hover {
    color: #0a77b8;
}

.menu-area {
    background: white;
    border-top: 1px solid #e0e0e0;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Override style.css menu-area background if needed */
.menu-area {
    background: #1d2224;
}

.heder__category {
    margin-bottom: 0;
    padding-bottom: 0;
}

.heder__category {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
    align-items: center;
}

/* Remove any spacing after header */
.main-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.logo-area {
    margin-bottom: 0;
    padding-bottom: 0;
}

.heder__category a {
    color: #121212;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.heder__category a:hover,
.heder__category a.active {
    color: #0a77b8;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Full Screen Banner Slider - ZERO PADDING - Maximum Override */
.banner-slider,
.fullscreen-banner-slider,
section.banner-slider,
section.fullscreen-banner-slider,
section.slider-section.fullscreen-banner-slider,
section.slider-section.banner-slider,
#content .banner-slider,
#content .fullscreen-banner-slider,
#content section.banner-slider,
#content section.fullscreen-banner-slider {
    position: relative;
    width: 100%;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    line-height: 0;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

/* Slider Container - Uses padding-bottom trick for aspect ratio */
/* IMPORTANT: padding-bottom creates the container height, it's NOT visual padding */
.slider-container {
    position: relative;
    width: 100%;
    height: 0; /* Critical for padding-bottom aspect ratio trick */
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 45%; /* This creates the height - MUST KEEP for aspect ratio */
    line-height: 0;
    overflow: hidden;
    display: block;
    visibility: visible;
    box-sizing: border-box;
}

/* Individual Slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    visibility: visible;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    display: block;
    visibility: visible;
    z-index: 2;
}

.slide a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    line-height: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    visibility: visible;
}

/* Desktop: Make container tall enough to show full image */
@media (min-width: 969px) {
    .slider-container {
        padding-bottom: 20%; /* Aggressively reduced to minimize blue padding */
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .slide {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
        margin: 0;
        padding: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .slide img {
        object-fit: contain; /* Show full image without cropping */
        object-position: center center;
        margin: 0;
        padding: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .fullscreen-banner-slider {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* Remove all padding from slider elements on desktop */
    .banner-slider,
    .fullscreen-banner-slider,
    section.banner-slider,
    section.fullscreen-banner-slider {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .banner-slide,
    .banner-slide a,
    .banner-slide .banner__media,
    .banner-slide .media {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .banner-slide img,
    .banner__media img,
    .media img {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Mobile: Slider matching reference design exactly */
@media (max-width: 968px) {
    /* Slider section - starts immediately below header */
    section.fullscreen-banner-slider,
    section.banner-slider,
    .fullscreen-banner-slider,
    .banner-slider {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        display: block;
        box-sizing: border-box;
    }
    
    /* Slider container - proper aspect ratio for mobile */
    .slider-container {
        position: relative;
        width: 100%;
        height: 0;
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50%; /* Mobile aspect ratio - creates height */
        overflow: hidden;
        display: block;
        box-sizing: border-box;
    }
    
    /* Individual slide */
    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        z-index: 1;
    }
    
    .slide.active {
        opacity: 1;
        z-index: 2;
    }
    
    .slide a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Slide images - fill container properly */
    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover for mobile to fill container */
        object-position: center center;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    /* Background for slider */
    .fullscreen-banner-slider,
    .banner-slider,
    .slider-container,
    .slide {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    }
}

/* Desktop: Owl carousel banner slides (if used) */
@media (min-width: 969px) {
    .banner-slide {
        min-height: 200px !important;
        max-height: 25vh !important;
        height: 100%;
        width: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important; /* Crop excess blue space */
    }
    
    .banner-slide a {
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
    
    .banner-slide img {
        object-fit: cover !important;
        object-position: center 30% !important; /* Focus on content, crop top/bottom blue */
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: scale(1.1) !important; /* Zoom in to crop more blue space */
    }
    
    /* Fill gaps with background when using contain on desktop */
    .banner-slide,
    .banner__media,
    .banner-slide .banner__media,
    .banner-slide .media {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Large desktop screens: Make slider even taller */
@media (min-width: 1200px) {
    .slider-container {
        padding-bottom: 32%; /* Reduced for large screens */
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
    }
    
    /* Ensure no padding on large desktop screens */
    .banner-slider,
    .fullscreen-banner-slider,
    section.banner-slider,
    section.fullscreen-banner-slider,
    .banner-slide,
    .banner-slide a,
    .banner-slide .banner__media,
    .banner-slide .media {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Override style.css slider-section rule (line 872-875) - MAXIMUM OVERRIDE */
section.fullscreen-banner-slider,
section.banner-slider,
section.slider-section.fullscreen-banner-slider,
section.slider-section.banner-slider,
.slider-section.fullscreen-banner-slider,
.slider-section.banner-slider,
section.slider-section.fullscreen-banner-slider.banner-slider,
section.slider-section.banner-slider.fullscreen-banner-slider {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

/* CRITICAL: Override style.css line 872-875 specifically */
section.slider-section:has(.fullscreen-banner-slider),
section.slider-section:has(.banner-slider),
section.slider-section.fullscreen-banner-slider,
section.slider-section.banner-slider {
    margin-top: 0;
    margin-bottom: 0;
}

/* Ensure banner is below header */
header {
    position: relative;
    z-index: 1001;
}

.banner-slider {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #0a77b8;
    background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

/* Desktop: Banner slider container */
@media (min-width: 969px) {
    .banner-slider,
    .fullscreen-banner-slider {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    }
}

.banner-slide {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 370px;
    max-height: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    background-color: #0a77b8;
    background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

.banner-slide.slideshow__slide {
    line-height: 0;
    margin: 0;
    padding: 0;
}

/* Mobile: Ensure banner slide fills container */
@media (max-width: 968px) {
    .banner-slide {
        width: 100%;
        height: 100%;
        min-height: 370px;
        margin: 0;
        padding: 0;
    }
}

.banner-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    border: none;
    outline: none;
}

/* Desktop: Override general banner-slide img rule to crop blue padding */
@media (min-width: 969px) {
    .banner-slide img {
        object-fit: cover !important;
        object-position: center 30% !important; /* Focus on content, crop top/bottom blue */
        height: 100% !important;
        width: 100% !important;
    }
}

/* Mobile: Owl carousel banner slides (if used) */
@media (max-width: 968px) {
    .banner-slide {
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    }
    
    .banner-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        display: block;
        line-height: 0;
    }
    
    .banner-slide a {
        width: 100%;
        height: 100%;
        display: block;
        line-height: 0;
        background-color: #0a77b8;
    }
    
    .banner__media,
    .banner-slide .banner__media,
    .banner-slide .media {
        width: 100%;
        height: 100%;
        line-height: 0;
        background-color: #0a77b8;
        background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    }

    /* Ensure no spacing between top banner, mobile header, and banner slider */
    .top-banner + header,
    header + #content {
        margin-top: 0;
        padding-top: 0;
    }

    /* Override any spacing in responsive.css */
    .mobile-header {
        margin: 0;
        padding: 0;
    }

    .mobile-logo {
        margin: 0;
        padding: 0;
        height: auto;
    }

    /* Override responsive.css mobile-search padding (padding: 15px 16px; padding-top: 0;) */
    .mobile-search {
        padding: 0 10px;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Remove any border or spacing that creates visual gap */
    header#navbar_top .mobile-header,
    header#navbar_top .mobile-search {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Ensure banner touches header on mobile */
    header + #content,
    #content {
        margin-top: 0;
        padding-top: 0;
    }
}

.banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    line-height: 0;
}

/* Banner media wrapper - like reference site */
.banner__media,
.banner-slide .banner__media,
.banner-slide .media {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
}

.banner__media img,
.banner__media a,
.media img,
.media a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: top center;
}

/* Fill gaps with background color when using contain */
.banner__media,
.banner-slide .banner__media,
.banner-slide .media {
    background-color: #0a77b8; /* Match banner blue background */
    background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

/* Default hero content if no banners */
.banner-slide:not(:has(img)) {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

.hero-content-default {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
}

.hero-content-default h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 500;
    color: white;
}

.hero-content-default .hero-subtitle {
    background: rgba(255,255,255,0.2);
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid white;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: white;
}

/* Owl Carousel Customization for Banner */
.fullscreen-banner-slider .owl-carousel {
    height: 100%;
    aspect-ratio: 720 / 370; /* Match provided image size (720x370) */
    margin: 0;
    padding: 0;
    line-height: 0;
}

.fullscreen-banner-slider .owl-stage-outer {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.fullscreen-banner-slider .owl-stage {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.fullscreen-banner-slider .owl-item {
    height: 100%;
    aspect-ratio: 720 / 370; /* Match provided image size (720x370) */
    margin: 0;
    padding: 0;
    line-height: 0;
}

.fullscreen-banner-slider .owl-item .banner-slide {
    height: 100%;
    width: 100%;
    line-height: 0;
}

/* Desktop: Make owl carousel fill height properly */
@media (min-width: 969px) {
    .fullscreen-banner-slider .owl-carousel {
        height: 100% !important;
        min-height: 200px !important;
        max-height: 25vh !important;
        aspect-ratio: auto;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .fullscreen-banner-slider .owl-stage-outer {
        height: 100% !important;
        min-height: 200px !important;
        max-height: 25vh !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
    
    .fullscreen-banner-slider .owl-stage {
        height: 100% !important;
        min-height: 200px !important;
        max-height: 25vh !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .fullscreen-banner-slider .owl-item {
        height: 100% !important;
        min-height: 200px !important;
        max-height: 25vh !important;
        aspect-ratio: auto;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
}

/* Large desktop screens: Make owl carousel even taller */
@media (min-width: 1200px) {
    .fullscreen-banner-slider .owl-carousel {
        min-height: 300px;
        max-height: 38vh;
    }
    
    .fullscreen-banner-slider .owl-stage-outer {
        min-height: 300px;
        max-height: 38vh;
    }
    
    .fullscreen-banner-slider .owl-stage {
        min-height: 300px;
        max-height: 38vh;
    }
    
    .fullscreen-banner-slider .owl-item {
        min-height: 300px;
        max-height: 38vh;
    }
}

/* Slider Navigation Arrows - HIDDEN */
.slider-arrow {
    display: none;
    visibility: hidden;
}

.slider-arrow.prev,
.slider-arrow.next {
    display: none;
    visibility: hidden;
}

/* Slider Dots Navigation - HIDDEN */
.slider-dots {
    display: none;
    visibility: hidden;
}

.dot {
    display: none;
    visibility: hidden;
}

/* Hero Section (Legacy - kept for compatibility) */
.hero {
    background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
    padding: 60px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-content {
    flex: 1;
    color: white;
}

.hero h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 500;
}

.hero-subtitle {
    background: rgba(255,255,255,0.2);
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid white;
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
}

.hero-image {
    flex: 1;
    max-width: 500px;
}

.hero-image img {
    width: 100%;
    height: auto;
}

/* Category Grid */
.category-section {
    padding: 60px 5% 40px 5%;
    max-width: 1400px;
    margin: 0 auto;
    background: #fdfdfd;
}

/* Ensure category section has top padding even after slider */
.fullscreen-banner-slider + .category-section,
.banner-slider + .category-section,
section.fullscreen-banner-slider + section.category-section {
    padding-top: 60px;
    margin-top: 0;
}

/* Remove padding-top on mobile */
@media (max-width: 768px) {
    .fullscreen-banner-slider + .category-section,
    .banner-slider + .category-section,
    section.fullscreen-banner-slider + section.category-section {
        padding-top: 0;
    }
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.category-card {
    background: #e5eef4;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.category-card:hover {
    background: #3cacf1;
    transform: translateY(-5px);
}

.category-card:hover .category-icon,
.category-card:hover h3 {
    color: white;
}

.category-icon {
    font-size: 48px;
    color: #34495e;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.category-card h3 {
    font-size: 16px;
    font-weight: 500;
    color: #34495e;
    transition: color 0.3s;
    margin: 0;
}

/* Collection Section */
.collection-section {
    padding: 60px 5%;
    background: #f9fafb;
}

.collection-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 500;
    color: #121212;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

.collection-card {
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
    height: 300px;
    position: relative;
}

.collection-card:hover {
    transform: scale(1.03);
}

.collection-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-card h3 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 20px;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Products Section */
.products-section {
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.products-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 500;
    color: #121212;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.product-card {
    background: white;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s;
    position: relative;
}

.product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e60303;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
}

.product-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.product-card a {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s;
}

.product-card a:hover {
    opacity: 0.9;
}

.product-info {
    padding: 15px;
}

.product-title {
    font-size: 14px;
    margin-bottom: 10px;
    height: 40px;
    overflow: hidden;
    color: #121212;
    font-weight: 400;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

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

.new-price {
    font-size: 18px;
    font-weight: 700;
    color: #0a77b8;
}

.add-to-cart {
    width: 100%;
    padding: 10px;
    background: white;
    border: 2px solid #121212;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
    color: #121212;
    text-align: center;
    display: block;
    text-decoration: none;
}

.add-to-cart:hover {
    background: #121212;
    color: white;
    text-decoration: none;
}

/* Ensure addcartbutton works with new design */
.add-to-cart.addcartbutton {
    border: 2px solid #121212;
}

.add-to-cart.addcartbutton:hover {
    background: #121212;
    color: white;
}

.view-all-btn {
    display: block;
    margin: 40px auto 0;
    padding: 15px 50px;
    background: white;
    border: 2px solid #121212;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    color: #121212;
    text-decoration: none;
    text-align: center;
    width: auto;
    max-width: 200px;
}

.view-all-btn:hover {
    background: #121212;
    color: white;
    text-decoration: none;
}

/* Footer */
footer {
    background: #f5f7fa;
    padding: 60px 5% 20px;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #121212;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    display: block;
    margin-bottom: 10px;
}

.footer-section ul li a {
    display: block;
    color: rgba(18, 18, 18, 0.75);
    text-decoration: none;
    transition: color 0.3s;
    padding: 5px 0;
}

.footer-section ul li a:hover {
    color: #0a77b8;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: rgba(18, 18, 18, 0.75);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #0a77b8;
}

.footer-logo {
    width: 185px;
    margin-bottom: 15px;
}

.footer-section p {
    margin-bottom: 15px;
    font-size: 14px;
}

.social-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: #121212;
    color: white;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
    transform: scale(1);
}

.social-icon:hover {
    transform: scale(1.15);
}

.social-icon i {
    color: white !important;
    transition: color 0.3s ease;
}

.social-icon:hover i {
    color: white !important;
}



/* Social Media Icon Colors - Footer */
.social-icon[href*="facebook"] {
    background: #1877f2;
    color: white;
}

.social-icon[href*="facebook"]:hover {
    background: #166fe5;
    transform: scale(1.15);
}

.social-icon[href*="facebook"] i {
    color: white !important;
}

.social-icon[href*="twitter"] {
    background: #1da1f2;
    color: white;
}

.social-icon[href*="twitter"]:hover {
    background: #1a91da;
    transform: scale(1.15);
}

.social-icon[href*="twitter"] i {
    color: white !important;
}

.social-icon[href*="instagram"] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.social-icon[href*="instagram"]:hover {
    background: linear-gradient(45deg, #e0852e 0%, #d55d31 25%, #cc1f3e 50%, #bc1f5f 75%, #ac1579 100%);
    transform: scale(1.15);
}

.social-icon[href*="instagram"] i {
    color: white !important;
}

.social-icon[href*="youtube"] {
    background: #ff0000;
    color: white;
}

.social-icon[href*="youtube"]:hover {
    background: #e60000;
    transform: scale(1.15);
}

.social-icon[href*="youtube"] i {
    color: white !important;
}

.social-icon[href*="linkedin"] {
    background: #0077b5;
    color: white;
}

.social-icon[href*="linkedin"]:hover {
    background: #006399;
    transform: scale(1.15);
}

.social-icon[href*="linkedin"] i {
    color: white !important;
}

.social-icon[href*="whatsapp"],
.social-icon[href*="WhatsApp"],
.social-icon[href*="WHATSAPP"],
.social-icon-whatsapp,
.social-icon .fa-whatsapp,
.social-icon i.fa-whatsapp {
    background: #02BD37 !important;
    color: white !important;
}

.social-icon-whatsapp {
    background: #02BD37 !important;
    color: white !important;
}

.social-icon-whatsapp:hover {
    background: #02a530 !important;
    transform: scale(1.15) !important;
}

.social-icon[href*="whatsapp"]:hover,
.social-icon[href*="WhatsApp"]:hover,
.social-icon[href*="WHATSAPP"]:hover,
.social-icon-whatsapp:hover {
    background: #02a530 !important;
    transform: scale(1.15) !important;
}

.social-icon-whatsapp i,
.social-icon[href*="whatsapp"] i,
.social-icon[href*="WhatsApp"] i,
.social-icon[href*="WHATSAPP"] i,
.social-icon .fa-whatsapp,
.social-icon i.fa-whatsapp {
    color: white !important;
}

.social-icon-whatsapp:hover i,
.social-icon[href*="whatsapp"]:hover i,
.social-icon[href*="WhatsApp"]:hover i,
.social-icon[href*="WHATSAPP"]:hover i {
    color: white !important;
}

/* Target WhatsApp by icon class inside social-icon */
.social-icon:has(.fa-whatsapp),
.social-icon:has(i.fa-whatsapp) {
    background: #02BD37 !important;
    color: white !important;
}

.social-icon:has(.fa-whatsapp):hover,
.social-icon:has(i.fa-whatsapp):hover {
    background: #02a530 !important;
}



/* Header Social Icons Colors */
.list-social__link[href*="facebook"] .icon-facebook,
.list-social__link[href*="facebook"] i {
    color: #1877f2;
}

.list-social__link[href*="twitter"] .icon-twitter,
.list-social__link[href*="twitter"] i {
    color: #1da1f2;
}

.list-social__link[href*="instagram"] .icon-instagram,
.list-social__link[href*="instagram"] i {
    color: #e4405f;
}

.list-social__link[href*="youtube"] .icon-youtube,
.list-social__link[href*="youtube"] i {
    color: #ff0000;
}

.list-social__link[href*="linkedin"] i {
    color: #0077b5;
}

.list-social__link[href*="whatsapp"] i,
.list-social__link[href*="whatsapp"] .icon-whatsapp {
    color: #02BD37;
}

/* Mobile Navigation Social Media Icon Colors */
.mobile-nav-item[href*="facebook"] {
    color: #1877f2;
}

.mobile-nav-item[href*="facebook"] i {
    color: #1877f2;
}

.mobile-nav-item[href*="twitter"] {
    color: #1da1f2;
}

.mobile-nav-item[href*="twitter"] i {
    color: #1da1f2;
}

.mobile-nav-item[href*="instagram"] {
    color: #e4405f;
}

.mobile-nav-item[href*="instagram"] i {
    color: #e4405f;
}

.mobile-nav-item[href*="youtube"] {
    color: #ff0000;
}

.mobile-nav-item[href*="youtube"] i {
    color: #ff0000;
}

.mobile-nav-item[href*="linkedin"] {
    color: #0077b5;
}

.mobile-nav-item[href*="linkedin"] i {
    color: #0077b5;
}

.mobile-nav-item[href*="whatsapp"] {
    color: #02BD37;
}

.mobile-nav-item[href*="whatsapp"] i {
    color: #02BD37;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: rgba(18, 18, 18, 0.75);
    font-size: 14px;
}

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
    background: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s;
    text-decoration: none;
}

.whatsapp-btn:hover {
    background: #20bf6b;
    transform: scale(1.1);
    color: white;
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.15);
    z-index: 999;
    padding: 8px 0;
}

.mobile-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    padding: 5px 8px;
    transition: color 0.3s;
    flex: 1;
    text-align: center;
}

.mobile-nav-item i {
    font-size: 20px;
    margin-bottom: 3px;
}

.mobile-nav-item.active {
    color: #0a77b8;
    font-weight: 700;
}

.mobile-nav-item:hover {
    color: #0a77b8;
}

/* Preserve social media brand colors on hover */
.mobile-nav-item[href*="facebook"]:hover,
.mobile-nav-item[href*="facebook"]:hover i {
    color: #1877f2 !important;
}

.mobile-nav-item[href*="twitter"]:hover,
.mobile-nav-item[href*="twitter"]:hover i {
    color: #1da1f2 !important;
}

.mobile-nav-item[href*="instagram"]:hover,
.mobile-nav-item[href*="instagram"]:hover i {
    color: #e4405f !important;
}

.mobile-nav-item[href*="youtube"]:hover,
.mobile-nav-item[href*="youtube"]:hover i {
    color: #ff0000 !important;
}

.mobile-nav-item[href*="linkedin"]:hover,
.mobile-nav-item[href*="linkedin"]:hover i {
    color: #0077b5 !important;
}

.mobile-nav-item[href*="whatsapp"]:hover,
.mobile-nav-item[href*="whatsapp"]:hover i {
    color: #02BD37 !important;
}

.mobile-nav-item span {
    display: block;
    margin-top: 2px;
}

/* Hide old footer nav on mobile when new mobile nav is shown */
@media (max-width: 968px) {
    .footer_nav {
        display: none;
    }
}

/* Responsive Design */
@media (max-width: 968px) {
    .main-header {
        display: none;
    }

    .mobile-header {
        display: block;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .mobile-header.sticky {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .mobile-logo {
        margin: 0;
        padding: 12px 15px;
        height: auto;
        min-height: 60px;
    }

    .mobile-search {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
        padding-top: 0;
    }

    /* Override responsive.css margin and padding completely - remove all gaps */
    .main-search.mobile-search,
    .mobile-search {
        margin: 0;
        padding: 10px 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .mobile-search form {
        margin: 0;
        margin-bottom: 0;
    }

    /* Remove bottom margin/padding from mobile-search that creates gap */
    header .mobile-search,
    header#navbar_top .mobile-search {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Remove gap after mobile header and search */
    header {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    header#navbar_top {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Ensure banner starts immediately after header with zero gap */
    header + #content .fullscreen-banner-slider,
    #content > .fullscreen-banner-slider:first-child,
    #content > section.fullscreen-banner-slider:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    /* Remove any spacing between header and content on mobile */
    header + #content {
        margin-top: 0;
        padding-top: 0;
    }

    .mobile-menu-btn {
        display: block;
    }

    .banner-slide {
        height: 100%;
        aspect-ratio: 720 / 370; /* Match provided image size (720x370) */
        min-height: 370px;
        max-height: none;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Remove gap from banner slider container */
    .banner-slider {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .fullscreen-banner-slider .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .fullscreen-banner-slider .owl-nav .owl-prev {
        left: 10px;
    }

    .fullscreen-banner-slider .owl-nav .owl-next {
        right: 10px;
    }

    .fullscreen-banner-slider .owl-dots {
        bottom: 15px;
    }

    .hero-content-default h1 {
        font-size: 32px;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 5%;
    }

    .hero h1 {
        font-size: 32px;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .mobile-nav {
        display: block;
    }

    /* NOTE: body padding-bottom is already set in consolidated rules at top of file */

    .whatsapp-btn {
        bottom: 70px;
        right: 8px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .logo-header {
        flex-wrap: wrap;
    }

    .main-search {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    /* Remove all gaps on mobile - top and bottom */
    .top-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        font-size: 11px;
        min-height: 32px;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1002 !important; /* Above sticky header */
        width: 100% !important;
        background: linear-gradient(90deg, #0a77b8 0%, #0a77b8 100%) !important;
        box-sizing: border-box;
    }
    
    body {
        padding-top: 32px !important; /* Match top-banner height exactly */
    }
    
    .top-banner .banner-content {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    .top-banner .banner-content span {
        margin: 0 20px;
        display: inline-block;
    }
    
    /* Adjust sticky-header for smaller screens - no gap */
    sticky-header,
    sticky-header.header-wrapper,
    .header-wrapper {
        top: 32px !important; /* Match top-banner height exactly - no gap */
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-header {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mobile-search {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Override responsive.css margin on mobile search */
    .main-search.mobile-search {
        margin: 0;
        padding: 10px 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .mobile-search form {
        margin: 0;
    }

    header {
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
        padding-top: 0;
    }

    #content {
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Remove ALL gaps from banner - top and bottom */
    .banner-slide {
        height: 100%;
        min-height: 370px;
        margin: 0;
        padding: 0;
    }

    /* Remove gap from banner image container */
    .banner-slider {
        margin: 0;
        padding: 0;
    }

    /* Remove any spacing from owl carousel on mobile */
    .fullscreen-banner-slider .owl-carousel,
    .fullscreen-banner-slider .owl-stage-outer,
    .fullscreen-banner-slider .owl-stage {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

        /* Remove gap after banner */
    .fullscreen-banner-slider + section,
    .fullscreen-banner-slider ~ section,
    section.bottoads_area {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Desktop: Remove gaps after banner */
@media (min-width: 969px) {
    .fullscreen-banner-slider + section,
    .fullscreen-banner-slider ~ section,
    section.bottoads_area {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Override bottoads_area padding from style.css - NO top padding */
    .fullscreen-banner-slider + .bottoads_area {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Remove any container spacing around banner */
    .container:has(.fullscreen-banner-slider),
    .row:has(.fullscreen-banner-slider) {
        margin: 0;
        padding: 0;
    }

    /* Ensure banner slide images show full image */
    .banner-slide img {
        margin: 0;
        padding: 0;
        display: block;
        object-fit: contain;
        object-position: center center;
        width: 100%;
        height: 100%;
        line-height: 0;
    }
}

/* Remove any container spacing around banner (outside media query) */
.container:has(.fullscreen-banner-slider),
.row:has(.fullscreen-banner-slider) {
    margin: 0;
    padding: 0;
}

/* Ensure banner slide images show full image (outside media query) */
.banner-slide img {
    margin: 0;
    padding: 0;
    display: block;
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* Fill gaps with background when using contain */
.banner-slide,
.banner__media,
.banner-slide .banner__media,
.banner-slide .media {
    background-color: #0a77b8;
    background-image: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

@media (max-width: 600px) {
    .hero-content-default {
        padding: 20px;
    }

    .hero-content-default h1 {
        font-size: 24px;
    }

    .fullscreen-banner-slider .owl-nav {
        display: none;
    }

    .hero h1 {
        font-size: 24px;
    }

    .category-card {
        padding: 20px 10px;
    }

    .category-icon {
        font-size: 32px;
    }

    .category-card h3 {
        font-size: 12px;
    }

    .top-banner {
        font-size: 11px;
    }

    .collection-card {
        height: 180px;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Override existing styles - Remove gap completely */
/* Body styles are now consolidated at the top of the file */

/* Override old slider-section margin from style.css */
section.slider-section.fullscreen-banner-slider,
section.fullscreen-banner-slider,
.fullscreen-banner-slider {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Ensure no gap between header and banner */
header {
    margin-bottom: 0;
    padding-bottom: 0;
}

header#navbar_top {
    margin-bottom: 0;
}

/* ============================================
   CRITICAL: Remove ALL gaps from home slider
   ============================================ */

/* Step 1: Remove padding from #content - MUST override style.css line 3581 */
body #content,
html body #content,
#content[class],
#content {
    padding-top: 0;
    margin-top: 0;
}

/* Step 2: Remove spacing after header and top-banner */
.top-banner {
    margin-bottom: 0;
    padding-bottom: 0;
}

header#navbar_top,
header#navbar_top .main-header,
header#navbar_top .menu-area,
header#navbar_top .logo-area,
header#navbar_top .mobile-header,
header#navbar_top .mobile-search {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
}

/* Ensure no gap between top-banner and header */
.top-banner + header#navbar_top {
    margin-top: 0;
}

/* Ensure no gap between header and content */
header#navbar_top + #content {
    margin-top: 0;
    padding-top: 0;
}

/* Step 3: Remove spacing between header and content */
header + #content,
header ~ #content,
header#navbar_top + #content {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

/* Step 4: Banner slider section - zero spacing - OVERRIDE style.css slider-section */
section.fullscreen-banner-slider,
.fullscreen-banner-slider,
#content > section.fullscreen-banner-slider,
#content > .fullscreen-banner-slider,
section.slider-section.fullscreen-banner-slider,
section.slider-section.banner-slider,
section.fullscreen-banner-slider.banner-slider,
section.banner-slider.fullscreen-banner-slider {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

/* Step 5: Remove spacing from banner slider container and slides */
.fullscreen-banner-slider .banner-slider,
.fullscreen-banner-slider .banner-slide,
.banner-slider,
.banner-slide {
    margin: 0;
    padding: 0;
}

/* Step 6: Remove spacing from owl carousel elements */
.fullscreen-banner-slider .owl-carousel,
.fullscreen-banner-slider .owl-stage-outer,
.fullscreen-banner-slider .owl-stage,
.fullscreen-banner-slider .owl-item {
    margin: 0;
    padding: 0;
}

/* Step 7: Remove spacing after banner (bottoads_area) - ZERO padding */
.fullscreen-banner-slider + section,
.fullscreen-banner-slider + .bottoads_area,
section.fullscreen-banner-slider + section.bottoads_area,
.banner-slider + .bottoads_area,
.banner-slider + section.bottoads_area {
    margin-top: 0;
    padding-top: 0;
}

/* CRITICAL: Remove all bottom spacing from slider */
.fullscreen-banner-slider,
.banner-slider {
    margin-bottom: 0;
    padding-bottom: 0;
}

.slider-container {
    margin-bottom: 0;
    /* padding-bottom is only for aspect ratio, not spacing */
}

/* Remove any container spacing before banner */
#content > section:first-child,
#content > section.fullscreen-banner-slider:first-child,
#content > .fullscreen-banner-slider:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Override old slider-section styles completely */
section.fullscreen-banner-slider.slider-section,
section.slider-section.fullscreen-banner-slider {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Remove spacing from any container wrapping the banner */
.container:has(.fullscreen-banner-slider),
.row:has(.fullscreen-banner-slider) {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

/* Ensure menu area has no bottom spacing */
.main-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-header .menu-area {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.main-header .logo-area {
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-header .logo-area .container {
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-header .menu-area .container {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Remove border that might create visual gap */
.main-header .menu-area {
    border-bottom: none;
}

/* Ensure catagory_menu has no spacing */
.catagory_menu {
    margin-bottom: 0;
    padding-bottom: 0;
}

.heder__category {
    margin-bottom: 0;
}

.homeproduct {
    background: transparent;
    padding: 0;
}

.sec_title {
    margin-bottom: 30px;
}

.section-title-header {
    font-size: 32px;
    font-weight: 500;
    color: #121212;
    margin-bottom: 30px;
}

.section-title-name {
    font-weight: 500;
}

/* Container adjustments */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Banner ads section */
.bottoads_area {
    padding: 20px 5%;
    background: #f9fafb;
}

/* Remove top spacing when following slider - start immediately after - ZERO padding */
.fullscreen-banner-slider + .bottoads_area,
.banner-slider + .bottoads_area,
section.fullscreen-banner-slider + section.bottoads_area {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

/* Ensure no gap between slider and next section */
.fullscreen-banner-slider,
.banner-slider {
    margin-bottom: 0;
    padding-bottom: 0;
}

.slider-container {
    margin-bottom: 0;
}

/* Next section starts immediately after slider */
.fullscreen-banner-slider + section,
.banner-slider + section {
    margin-top: 0;
}
.bottoads_inner {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.ads_item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Product item styling updates */
.product_item {
    background: white;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s;
}

.product_item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

.pro_img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.pro_des .pro_name a {
    font-size: 14px;
    color: #121212;
    font-weight: 400;
    height: 40px;
    overflow: hidden;
    display: block;
    margin-bottom: 10px;
}

.pro_price {
    margin-bottom: 12px;
}

.pro_price p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro_price del {
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

.pro_price {
    font-size: 18px;
    font-weight: 700;
    color: #0a77b8;
}

.pro_btn .addcartbutton,
.pro_btn .addcartbutton span {
    width: 100%;
    padding: 10px;
    background: white;
    border: 2px solid #121212;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 14px;
    color: #121212;
    text-align: center;
    display: block;
    text-decoration: none;
}

.pro_btn .addcartbutton:hover,
.pro_btn .addcartbutton:hover span {
    background: #121212;
    color: white;
    text-decoration: none;
}

/* Sale badge styling */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.sale-badge-text {
    background: #e60303;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.sale-badge-text p {
    margin: 0;
    color: white;
}

/* ============================================
   FINAL OVERRIDE - ABSOLUTE ZERO PADDING
   This must be at the end to override everything
   ============================================ */
html body section.fullscreen-banner-slider,
html body section.banner-slider,
html body section.slider-section.fullscreen-banner-slider,
html body section.slider-section.banner-slider,
html body .fullscreen-banner-slider,
html body .banner-slider,
html body #content section.fullscreen-banner-slider,
html body #content .fullscreen-banner-slider {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: none;
    border-bottom: none;
}

/* Override style.css line 872-875 - FINAL OVERRIDE */
section.slider-section.fullscreen-banner-slider,
section.slider-section.banner-slider {
    margin-top: 0;
    margin-bottom: 0;
}

/* CRITICAL: Protect slider-container padding-bottom - DO NOT override */
.slider-container,
.fullscreen-banner-slider .slider-container,
.banner-slider .slider-container,
section.fullscreen-banner-slider .slider-container,
section.banner-slider .slider-container {
    padding-bottom: 50%; /* Mobile default - matches mobile section */
}

@media (min-width: 969px) {
    .slider-container,
    .fullscreen-banner-slider .slider-container,
    .banner-slider .slider-container {
        padding-bottom: 20% !important; /* Desktop - aggressively reduced to minimize blue padding */
    }
}

@media (min-width: 1200px) {
    .slider-container,
    .fullscreen-banner-slider .slider-container,
    .banner-slider .slider-container {
        padding-bottom: 32%; /* Large desktop - significantly reduced */
    }
}

/* ============================================
   HEADER STYLING - First Screenshot Layout
   Logo Left | Nav Center | Icons Right
   ============================================ */

/* Thin Blue Top Bar */
.header-top-bar {
    width: 100%;
    height: 3px;
    background: #0a77b8;
    position: relative;
    z-index: 1001;
}

/* Header Bottom Separator - Thin Grey Line */
.header-bottom-separator {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    position: relative;
    z-index: 999;
    margin: 0;
    padding: 0;
}

/* Sticky Header Element - Full Width */
sticky-header {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: none;
    outline: none;
    box-shadow: none;
    background: white; /* Ensure background is set */
}

/* CRITICAL: Ensure sticky-header with header-wrapper class is sticky */
sticky-header.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
}

/* Header Wrapper - Full Width */
.header-wrapper {
    background: white;
    border-bottom: none; /* Removed border to eliminate gap */
    border-left: none;
    border-right: none;
    border-top: none;
    outline: none;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    width: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    display: block;
}

/* Mobile: Enhanced sticky header with shadow when scrolled */
@media (max-width: 990px) {
    /* NOTE: Body and HTML overflow rules are consolidated at the top of the file */
    
    /* CRITICAL: Ensure NO parent containers have overflow that breaks sticky */
    body > *,
    body > div,
    body > section {
        overflow-x: visible;
        overflow-y: visible;
    }
    
    /* CRITICAL: Use position: fixed on mobile for better reliability than sticky */
    /* Fixed positioning works more reliably on mobile browsers */
    sticky-header,
    sticky-header.header-wrapper,
    .header-wrapper,
    body sticky-header,
    body sticky-header.header-wrapper,
    body .header-wrapper,
    html body sticky-header,
    html body sticky-header.header-wrapper,
    html body .header-wrapper,
    body > sticky-header,
    body > sticky-header.header-wrapper,
    body > .header-wrapper {
        position: fixed; /* Changed from sticky to fixed for mobile reliability */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        will-change: transform;
        transform: translateZ(0); /* Force GPU acceleration */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: block;
        visibility: visible;
        opacity: 1;
        background: white;
        margin: 0;
        padding: 0;
    }
    
    /* Mobile: Fixed header positioning - RECREATED */
    /* Header is fixed at top, slider should start immediately below */
    
    /* Calculate exact header height */
    sticky-header,
    .header-wrapper {
        --header-total-height: 73px; /* 70px header + 3px top-bar */
    }
    
    /* Content area - no default margin */
    body > #content {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Slider positioning - start exactly at header bottom with NO gap */
    body #content > section.fullscreen-banner-slider:first-child,
    body #content > .fullscreen-banner-slider:first-child,
    body #content > section.banner-slider:first-child,
    #content > section.fullscreen-banner-slider:first-child,
    #content > .fullscreen-banner-slider:first-child,
    #content section.fullscreen-banner-slider:first-of-type {
        position: relative;
        top: -73px; /* Move up to header bottom (70px header + 3px top-bar) */
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 1; /* Below header */
    }
    
    /* Slider container - no spacing, proper aspect ratio */
    section.fullscreen-banner-slider .slider-container,
    section.banner-slider .slider-container,
    .fullscreen-banner-slider .slider-container,
    .banner-slider .slider-container {
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 50%; /* Mobile aspect ratio */
    }
    
    /* All slider sections - zero spacing */
    section.fullscreen-banner-slider,
    section.banner-slider,
    .fullscreen-banner-slider,
    .banner-slider {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Top banner should be above fixed header */
    .top-banner {
        position: relative;
        z-index: 1001; /* Above fixed header */
    }
    
    /* Header top bar should be above fixed header */
    .header-top-bar {
        position: relative;
        z-index: 1001;
        margin: 0;
        padding: 0;
        height: 3px;
    }
    
    /* Ensure header-top-bar doesn't create gap */
    .header-top-bar + sticky-header,
    .header-top-bar + .header-wrapper {
        margin-top: 0;
    }
    
    /* Ensure header-wrapper inside sticky-header is also fixed */
    sticky-header .header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Ensure header itself has no bottom spacing */
    sticky-header header,
    .header-wrapper header,
    header.header--left-center-right,
    header.header--mobile-center {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Add shadow when scrolled */
    .header-wrapper.is-stuck,
    .header-wrapper.scrolled,
    sticky-header.is-stuck,
    sticky-header.scrolled {
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: box-shadow 0.3s ease;
    }
    
    /* CRITICAL: Remove overflow from all parent containers that break sticky */
    body > *:not(sticky-header):not(.header-wrapper),
    body > div:not(sticky-header):not(.header-wrapper) {
        overflow-x: visible;
        overflow-y: visible;
    }
    
    /* Ensure no parent has overflow that breaks sticky */
    #app,
    #root,
    .container:not(.slider-container),
    .wrapper {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: visible; /* Changed from auto */
    }
    
    /* Special case: content area should scroll normally */
    #content {
        overflow-x: hidden;
        overflow-y: visible;
    }
    
    /* CRITICAL: Ensure top-banner appears above sticky header */
    .top-banner {
        position: relative;
        overflow: visible;
        z-index: 1002 !important; /* Above sticky header */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
    }
    
    .header-top-bar {
        position: relative;
        overflow: visible;
        z-index: 1001;
    }
    
    /* FINAL OVERRIDE: Force sticky-header to always be visible and STICKY on mobile (not fixed to allow top-banner above) */
    /* This rule is consolidated with the main mobile header rules above */
    sticky-header.header-wrapper,
    sticky-header[class*="header-wrapper"] {
        position: sticky; /* Changed from fixed to sticky to allow top-banner above */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1001; /* Below top-banner */
        display: block;
        visibility: visible;
        opacity: 1;
        background: white;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        margin: 0;
        padding: 0;
    }
}

/* Force header padding to work - override all conflicting styles */
.header-wrapper .header.header--left-center-right,
header .header.header--left-center-right,
.header.header--left-center-right {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Main Header Container - Base styles (will be overridden by media queries) */
.header.header--left-center-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Page width container for header */
.header.header--left-center-right.page-width {
    padding-left: 4%;
    padding-right: 4%;
}

/* Logo Section - Left */
.header__heading {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    order: 1;
}

.header__heading-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header__heading-logo-wrapper {
    display: flex;
    align-items: center;
}

.header__heading-logo {
    height: auto;
    max-height: 35px;
    width: auto;
    transition: all 0.3s ease;
}

/* When header is sticky (scrolled) - smaller logo and move left */
.header-wrapper[data-sticky-type="reduce-logo-size"].is-stuck .header__heading-logo,
.header-wrapper.is-sticky .header__heading-logo,
.sticky-header.is-stuck .header__heading-logo,
.header-wrapper.scrolled .header__heading-logo {
    max-height: 28px;
    transition: all 0.3s ease;
}

/* Move logo left when scrolled - reduce left padding */
.header-wrapper[data-sticky-type="reduce-logo-size"].is-stuck .header.header--left-center-right.page-width,
.header-wrapper.is-sticky .header.header--left-center-right.page-width,
.sticky-header.is-stuck .header.header--left-center-right.page-width,
.header-wrapper.scrolled .header.header--left-center-right.page-width {
    padding-left: 4%;
    transition: all 0.3s ease;
}

/* Move logo left when scrolled */
.header-wrapper[data-sticky-type="reduce-logo-size"].is-stuck .header__heading,
.header-wrapper.is-sticky .header__heading,
.sticky-header.is-stuck .header__heading,
.header-wrapper.scrolled .header__heading {
    margin-left: 0;
    transition: all 0.3s ease;
}

/* Navigation Menu - Left (after logo) */
.header__inline-menu {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    order: 2;
    margin: 0;
    margin-left: 50px;
    padding: 0;
}

.header__inline-menu .list-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 25px;
    align-items: center;
}

.header__inline-menu .list-menu__item {
    margin: 0;
}

.header__menu-item {
    color: #121212;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
    padding: 5px 0;
    position: relative;
}

.header__menu-item:hover {
    color: #0a77b8;
}

.header__menu-item span {
    display: inline-block;
}

/* Active Menu Item */
.header__active-menu-item {
    position: relative;
}

.header__active-menu-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: #121212;
}

/* Icons Section - Right */
.header__icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    order: 3;
}

.header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121212;
    text-decoration: none;
    width: 24px;
    height: 24px;
    transition: color 0.3s;
}

.header__icon:hover {
    color: #0a77b8;
}

.header__icon svg {
    width: 20px;
    height: 20px;
}

/* Hide close icon in search by default */
.header__icon--search .header__icon-close,
.header__icon--search summary .header__icon-close {
    display: none;
}

/* Show close icon only when search modal is open */
details[open] .header__icon--search .header__icon-close,
details[open] .header__icon--search summary .header__icon-close {
    display: block;
}

/* Hide search icon when modal is open */
details[open] .header__icon--search .icon-search,
details[open] .header__icon--search summary .icon-search {
    display: none;
}

/* Ensure search icon shows by default */
.header__icon--search .icon-search {
    display: block;
}

/* Desktop Layout - Logo Left, Nav Left, Icons Right */
@media (min-width: 991px) {
/* Hide Mobile Menu Button on Desktop - IMPORTANT */
.header-drawer {
    display: none;
}

/* Hide hamburger menu icon on desktop */
.header__icon--menu {
    display: none;
}
    .header.header--left-center-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        max-width: 1400px;
        margin: 0 auto;
        gap: 20px;
        height: auto;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Page width container for header */
    .header.header--left-center-right.page-width {
        padding-left: 4%;
        padding-right: 4%;
    }
    
    .header__heading {
        flex: 0 0 auto;
        order: 1;
        margin: 0;
    }
    
    .header__inline-menu {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        order: 2;
        margin: 0;
        margin-left: 50px;
    }
    
    .header__icons {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        order: 3;
        margin-left: auto;
    }
    
    /* Ensure hamburger is hidden on desktop */
    .header-drawer {
        display: none;
    }
    
    .header__icon--menu {
        display: none;
    }
}

/* Mobile Responsive - Match Reference Design */
@media (max-width: 990px) {
    /* CRITICAL: Make sticky-header and header visible and FIXED on mobile */
    /* Using fixed instead of sticky for better mobile reliability */
    sticky-header,
    .header-wrapper {
        display: block;
        visibility: visible;
        opacity: 1;
        background: white;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        position: fixed; /* Fixed for mobile reliability */
        top: 0;
        z-index: 1000;
        left: 0;
        right: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transform: translateZ(0); /* Force GPU acceleration */
        -webkit-transform: translateZ(0);
    }
    
    header.header--left-center-right,
    header.header--mobile-center {
        display: flex;
        visibility: visible;
        opacity: 1;
        background: white;
        margin: 0;
        padding: 8px 15px;
        width: 100%;
        max-width: 100%;
        position: relative;
    }
    
    /* Show hamburger menu on mobile - LEFT SIDE */
    .header-drawer,
    header-drawer {
        display: block;
        visibility: visible;
        opacity: 1;
        order: 1;
        grid-column: 1;
        justify-self: start;
    }
    
    .header__icon--menu {
        display: flex;
        visibility: visible;
        opacity: 1;
        align-items: center;
        justify-content: center;
    }
    
    /* Show header icon on mobile */
    .header__icon--menu summary,
    .header__icon--menu .header__icon--summary {
        display: flex;
        visibility: visible;
        opacity: 1;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }
    
    /* Show menu drawer on mobile */
    .menu-drawer,
    .menu-drawer-container,
    #menu-drawer,
    #Details-menu-drawer-container {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    /* Menu drawer positioning on mobile - dropdown below header - Full height */
    #menu-drawer {
        position: fixed;
        top: 70px; /* Below header */
        left: 0;
        right: 0;
        bottom: 0; /* Extend to bottom */
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px); /* Dynamic viewport height */
        min-height: calc(100vh - 70px);
        z-index: 1001;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        overflow-y: auto;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid #e5e5e5;
        will-change: transform, opacity;
    }
    
    /* Menu drawer open state - slide from left to right */
    details[open] #menu-drawer,
    #Details-menu-drawer-container[open] #menu-drawer {
        transform: translateX(0) !important;
        opacity: 1 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
    }
    
    /* Closing animation - Ensure smooth slide out */
    details:not([open]) #menu-drawer,
    #Details-menu-drawer-container:not([open]) #menu-drawer {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
    }
    
    /* Remove overlay for dropdown menu */
    details[open]::before,
    #Details-menu-drawer-container[open]::before {
        display: none;
    }
    
    /* Hamburger icon SVG visibility - Show hamburger when menu is closed */
    .header__icon--menu .icon-hamburger,
    .header__icon--menu svg.icon-hamburger {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 24px;
        height: 24px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        color: #121212;
    }
    
    /* Hide close icon when menu is closed */
    .header__icon--menu .icon-close,
    .header__icon--menu svg.icon-close {
        display: none;
        visibility: hidden;
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    /* Ensure span container has relative positioning for absolute icons */
    .header__icon--menu span {
        position: relative;
        display: block;
        width: 24px;
        height: 24px;
    }
    
    /* When menu drawer is open (details[open]), hide hamburger and show close */
    /* Target the summary span directly */
    details[open] .header__icon--menu span .icon-hamburger,
    details[open] .header__icon--menu span svg.icon-hamburger,
    #Details-menu-drawer-container[open] .header__icon--menu span .icon-hamburger,
    #Details-menu-drawer-container[open] .header__icon--menu span svg.icon-hamburger,
    .menu-drawer-container[open] .header__icon--menu span .icon-hamburger,
    .menu-drawer-container[open] .header__icon--menu span svg.icon-hamburger {
        display: none;
        visibility: hidden;
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    /* Show close icon when menu drawer is open */
    details[open] .header__icon--menu span .icon-close,
    details[open] .header__icon--menu span svg.icon-close,
    #Details-menu-drawer-container[open] .header__icon--menu span .icon-close,
    #Details-menu-drawer-container[open] .header__icon--menu span svg.icon-close,
    .menu-drawer-container[open] .header__icon--menu span .icon-close,
    .menu-drawer-container[open] .header__icon--menu span svg.icon-close {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 24px;
        height: 24px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        color: #121212;
    }
    
    /* Ensure span container has relative positioning for absolute close icon */
    details[open] .header__icon--menu span,
    #Details-menu-drawer-container[open] .header__icon--menu span {
        position: relative;
        display: block;
        width: 24px;
        height: 24px;
    }
    
    /* Mobile Header - Compact Design - CRITICAL: Always Visible */
    .mobile-header,
    header .mobile-header,
    header#navbar_top .mobile-header,
    body .mobile-header,
    html body .mobile-header {
        display: block;
        visibility: visible;
        opacity: 1;
        background: white;
        margin: 0;
        padding: 0;
        border-bottom: none; /* Removed border to eliminate gap */
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .mobile-header.sticky {
        margin: 0;
        padding: 0;
    }
    
    /* Mobile Logo Row - Hamburger | Logo | Cart */
    .mobile-header .mobile-logo,
    .mobile-logo {
        display: grid;
        grid-template-columns: 20% 60% 20%;
        align-items: center;
        padding: 8px 15px;
        margin: 0;
        height: auto;
        min-height: 50px;
        background: white;
        visibility: visible;
        opacity: 1;
        width: 100%;
        gap: 0; /* Remove gap between grid columns */
        column-gap: 0; /* Remove column gap */
        row-gap: 0; /* Remove row gap */
    }
    
    /* Hamburger Menu Button - CRITICAL VISIBILITY */
    .mobile-header .menu-bar,
    .mobile-logo .menu-bar,
    .menu-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        visibility: visible;
        opacity: 1;
        position: relative;
        z-index: 10;
        overflow: visible;
    }
    
    .mobile-header .menu-bar .toggle,
    .mobile-logo .menu-bar .toggle,
    .menu-bar .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #121212;
        font-size: 22px;
        text-decoration: none;
        cursor: pointer;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        visibility: visible;
        opacity: 1;
        position: relative;
        z-index: 11;
        overflow: visible;
    }
    
    /* Ensure hamburger icon is visible - Multiple selectors for maximum override */
    .mobile-header .menu-bar .toggle i,
    .mobile-logo .menu-bar .toggle i,
    .menu-bar .toggle i,
    .mobile-header .menu-bar .toggle .fa-bars,
    .mobile-logo .menu-bar .toggle .fa-bars,
    .menu-bar .toggle .fa-bars,
    .mobile-header .menu-bar .toggle .fa-solid,
    .mobile-logo .menu-bar .toggle .fa-solid,
    .menu-bar .toggle .fa-solid,
    .mobile-header .menu-bar .toggle i.fa-bars,
    .mobile-logo .menu-bar .toggle i.fa-bars,
    .menu-bar .toggle i.fa-bars,
    .mobile-header .menu-bar .toggle i.fa-solid,
    .mobile-logo .menu-bar .toggle i.fa-solid,
    .menu-bar .toggle i.fa-solid {
        display: inline-block;
        visibility: visible;
        opacity: 1;
        color: #121212;
        font-size: 22px;
        width: auto;
        height: auto;
        line-height: 1;
        font-style: normal;
        font-weight: normal;
    }
    
    /* Pure CSS Hamburger Icon - Always visible fallback */
    .menu-bar .toggle:after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #121212;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 
            0 -8px 0 0 #121212,
            0 8px 0 0 #121212;
        z-index: 1;
    }
    
    /* If Font Awesome icon exists, show it and hide CSS fallback */
    .menu-bar .toggle i,
    .menu-bar .toggle .fa-bars,
    .menu-bar .toggle .fa-solid {
        position: relative;
        z-index: 2;
    }
    
    /* Hide CSS fallback when Font Awesome icon is present */
    .menu-bar .toggle:has(i):after,
    .menu-bar .toggle:has(.fa-bars):after,
    .menu-bar .toggle:has(.fa-solid):after {
        display: none;
    }
    
    /* Logo Center */
    .menu-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    
    .menu-logo img {
        height: 35px;
        width: auto;
        max-width: 100%;
        margin: 0;
    }
    
    /* Right Side Icons - Search and Cart */
    .menu-bag {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .menu-bag .margin-shopping {
        position: relative;
        color: #121212;
        font-size: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .menu-bag .margin-shopping i {
        display: inline-block;
        visibility: visible;
        opacity: 1;
        font-size: 20px;
        color: #121212;
    }
    
    .menu-bag .margin-shopping .mobilecart-qty {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #e60303;
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
    }
    
    /* Add search icon to mobile header if needed */
    .mobile-header .header__icon--search,
    .mobile-logo .header__icon--search {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #121212;
        font-size: 20px;
        text-decoration: none;
        margin-right: 15px;
    }
    
    /* Mobile Search Bar - Below Header */
    .mobile-search {
        display: block;
        background: white;
        margin: 0;
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .main-search.mobile-search {
        margin: 0;
        padding: 10px 15px;
    }
    
    .mobile-search form {
        display: flex;
        align-items: center;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
        background: #f7f7f7;
        margin: 0;
        height: 40px;
    }
    
    .mobile-search form input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0 15px;
        background: transparent;
        font-size: 14px;
        height: 100%;
    }
    
    .mobile-search form button {
        width: 50px;
        height: 100%;
        background: #0a77b8;
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    /* Remove all gaps between top banner, header, and content */
    .top-banner + header#navbar_top,
    .top-banner + header {
        margin-top: 0;
        padding-top: 0;
    }
    
    header#navbar_top {
        margin: 0;
        padding: 0;
    }
    
    header#navbar_top + #content,
    header + #content {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Hide desktop header on mobile */
    .main-header {
        display: none;
    }
    
    /* Hide desktop navigation menu on mobile */
    .header__inline-menu {
        display: none;
    }
    
    /* Hide desktop account icon on mobile (show in drawer instead) */
    .header__icon--account.small-hide {
        display: none;
    }
    
    /* Ensure header layout is correct on mobile - Hamburger | Logo | Icons */
    header.header--left-center-right {
        display: grid;
        grid-template-columns: auto 1fr auto; /* Hamburger | Logo (flexible) | Icons */
        align-items: center;
        padding: 12px 15px;
        gap: 15px; /* Add gap between elements */
        column-gap: 15px;
        row-gap: 0;
        position: relative;
    }
    
    /* Header drawer (hamburger) - LEFT SIDE on mobile */
    .header-drawer {
        display: flex;
        visibility: visible;
        opacity: 1;
        order: 1;
        grid-column: 1;
        justify-self: start;
        align-items: center;
    }
    
    /* Header heading (logo) - center on mobile */
    .header__heading {
        order: 2;
        grid-column: 2; /* Place in center column */
        justify-self: center; /* Center within grid cell */
        margin: 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Center logo link and image */
    .header__heading-link {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    
    /* Header icons (search, cart) - right on mobile */
    .header__icons {
        order: 3;
        grid-column: 3; /* Place in right column */
        justify-self: end; /* Align to end of grid cell */
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 0; /* Remove auto margin */
    }
    
    /* CRITICAL: Final override - Ensure header is always visible and FIXED on mobile */
    /* Consolidated with earlier rules - keeping for specificity but values match */
    sticky-header,
    .header-wrapper,
    body sticky-header,
    body .header-wrapper,
    html body sticky-header,
    html body .header-wrapper {
        display: block;
        visibility: visible;
        opacity: 1;
        position: fixed; /* Fixed is more reliable on mobile */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateZ(0); /* Force GPU acceleration */
        -webkit-transform: translateZ(0);
    }
    
    header.header--left-center-right,
    header.header--mobile-center {
        display: grid;
        visibility: visible;
        opacity: 1;
        position: relative;
    }
    
    /* Show header drawer and hamburger menu on mobile - LEFT SIDE */
    .header-drawer,
    header-drawer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: flex-start;
        order: 1;
        grid-column: 1;
        justify-self: start;
        position: relative;
    }
    
    /* Menu drawer container - positioned relative to header */
    .menu-drawer-container,
    #Details-menu-drawer-container {
        position: static;
    }
    
    .header__icon--menu,
    .header__icon--menu summary,
    .header__icon--menu .header__icon--summary {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: #121212;
    }
    
    .header__icon--menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure hamburger SVG icons are visible */
    .header__icon--menu svg,
    .header__icon--menu .icon-hamburger,
    .header__icon--menu .icon-close {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 24px;
        height: 24px;
        color: #121212;
        fill: currentColor;
    }
    
    /* Show menu drawer on mobile */
    .menu-drawer,
    .menu-drawer-container,
    #menu-drawer,
    #Details-menu-drawer-container {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    /* CRITICAL: Override responsive.css line 527-529 margin issue */
    .main-search.mobile-search {
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 10px 15px;
    }
    
    /* Ensure mobile-logo doesn't have excessive height from responsive.css */
    .mobile-logo {
        height: auto;
        min-height: 60px;
        max-height: none;
    }
    
    /* CRITICAL: Ensure menu-bar and toggle are always visible on mobile */
    .mobile-header .menu-bar,
    .mobile-logo .menu-bar {
        display: flex;
        visibility: visible;
        opacity: 1;
        position: relative;
        z-index: 1;
    }
    
    /* ============================================
       MOBILE MENU DRAWER - Full Width Below Header
       Opens full width just under the fixed header
       ============================================ */
    
    /* Menu drawer container - Relative positioning */
    .menu-drawer-container {
        position: relative;
    }
    
    /* Calculate header height dynamically - Measure actual header height */
    sticky-header,
    .header-wrapper {
        --header-height: 70px; /* Default header height */
    }
    
    /* More accurate header height calculation */
    header.header--left-center-right,
    header.header--mobile-center {
        --header-height: 70px; /* Default mobile header height */
    }
    
    /* Menu drawer - Full width dropdown below header - Full height */
    .menu-drawer {
        position: fixed;
        top: var(--header-height, 70px); /* Start below header */
        left: 0;
        right: 0;
        bottom: 0; /* Extend to bottom */
        width: 100%; /* Full width */
        max-width: 100%;
        height: calc(100vh - var(--header-height, 70px));
        height: calc(100dvh - var(--header-height, 70px)); /* Dynamic viewport height minus header */
        min-height: calc(100vh - var(--header-height, 70px));
        background: white;
        z-index: 999; /* Below header (1000) */
        transform: translateX(-100%); /* Hidden by default - slides from left */
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        border-top: 1px solid #e5e5e5;
        /* Ensure animations can override default transform */
        will-change: transform, opacity;
    }
    
    /* Show menu drawer when details is open - Slide from left to right */
    details[open] .menu-drawer,
    .menu-drawer-container[open] .menu-drawer,
    #Details-menu-drawer-container[open] .menu-drawer {
        transform: translateX(0) !important; /* Slide from left to right */
        opacity: 1 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
        animation: none; /* Clear any closing animation when opening */
        z-index: 1001; /* Above header when open */
    }
    
    /* Closing animation - Slide back to left when closing - Enhanced */
    .menu-drawer-container:not([open]) .menu-drawer,
    #Details-menu-drawer-container:not([open]) .menu-drawer,
    details:not([open]) .menu-drawer,
    details:not([open]) #menu-drawer.menu-drawer,
    #Details-menu-drawer-container:not([open]) #menu-drawer.menu-drawer {
        /* Slide back to left (hidden position) */
        transform: translateX(-100%) !important;
        opacity: 0 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
    }
    
    
    /* Hide overlay - No dark backdrop needed */
    .menu-drawer-container::after {
        display: none;
        content: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    /* Hide overlay when menu drawer is open */
    details[open] ~ .menu-drawer-container::after,
    .menu-drawer-container[open]::after,
    #Details-menu-drawer-container[open]::after,
    details[open] .menu-drawer-container::after {
        display: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    /* Hide body overlay */
    body.menu-drawer-open::before {
        display: none;
        content: none;
    }
    
    /* Menu drawer inner container - Full height */
    .menu-drawer__inner-container {
        padding: 0;
        min-height: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
    }
    
    /* Menu drawer navigation container */
    .menu-drawer__navigation-container {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Menu drawer navigation */
    .menu-drawer__navigation {
        padding: 0;
    }
    
    /* Menu drawer menu list - Unique modern design */
    .menu-drawer__menu {
        list-style: none;
        margin: 0;
        padding: 15px 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Menu drawer menu items - Unique design without bullets */
    .menu-drawer__menu-item {
        display: flex;
        align-items: center;
        padding: 18px 24px;
        color: #1a1a1a;
        text-decoration: none;
        font-size: 17px;
        font-weight: 400;
        transition: all 0.3s ease;
        position: relative;
        background: transparent;
        border-left: 3px solid transparent;
        margin: 4px 12px;
        border-radius: 8px;
        width: calc(100% - 24px);
        box-sizing: border-box;
    }
    
    /* Unique hover effect - Slide animation */
    .menu-drawer__menu-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: #0a77b8;
        transform: scaleY(0);
        transition: transform 0.3s ease;
        border-radius: 0 3px 3px 0;
    }
    
    .menu-drawer__menu-item:hover,
    .menu-drawer__menu-item:focus {
        background: linear-gradient(90deg, rgba(10, 119, 184, 0.08) 0%, rgba(10, 119, 184, 0.03) 100%);
        color: #0a77b8;
        transform: translateX(5px);
        border-left-color: #0a77b8;
    }
    
    .menu-drawer__menu-item:hover::before,
    .menu-drawer__menu-item:focus::before {
        transform: scaleY(1);
    }
    
    /* Active menu item - Unique design */
    .menu-drawer__menu-item--active {
        background: linear-gradient(90deg, rgba(10, 119, 184, 0.15) 0%, rgba(10, 119, 184, 0.05) 100%);
        color: #0a77b8;
        font-weight: 600;
        border-left: 3px solid #0a77b8;
        box-shadow: 0 2px 8px rgba(10, 119, 184, 0.1);
    }
    
    .menu-drawer__menu-item--active::before {
        transform: scaleY(1);
    }
    
    /* Add subtle icon effect for active item */
    .menu-drawer__menu-item--active::after {
        content: '→';
        position: absolute;
        right: 24px;
        color: #0a77b8;
        font-size: 18px;
        font-weight: bold;
        opacity: 0.6;
    }
    
    /* Menu drawer utility links (Login, Social) - Enhanced */
    .menu-drawer__utility-links {
        padding: 28px 24px;
        border-top: 2px solid #f0f0f0;
        margin-top: auto;
        background: #fafafa;
    }
    
    /* Menu drawer account/login link - Enhanced */
    .menu-drawer__account {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 20px;
        min-height: 56px;
        color: #1a1a1a;
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        transition: all 0.25s ease;
        margin-bottom: 24px;
    }
    
    .menu-drawer__account:hover {
        color: #0a77b8;
        background: #f0f7fa;
        border-color: #0a77b8;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(10, 119, 184, 0.15);
    }
    
    /* Account icon styling */
    .menu-drawer__account account-icon,
    .menu-drawer__account .svg-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .menu-drawer__account svg {
        width: 20px;
        height: 20px;
    }
    
    /* Social media icons in menu drawer - Enhanced */
    .menu-drawer__utility-links .list-social {
        display: flex;
        gap: 16px;
        margin-top: 0;
        padding: 0;
        list-style: none;
        justify-content: center;
    }
    
    .menu-drawer__utility-links .list-social__item {
        margin: 0;
    }
    
    .menu-drawer__utility-links .list-social__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #ffffff;
        color: #666;
        text-decoration: none;
        transition: all 0.25s ease;
        border: 2px solid #e5e5e5;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .menu-drawer__utility-links .list-social__link:hover {
        background: #0a77b8;
        color: white;
        border-color: #0a77b8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(10, 119, 184, 0.3);
    }
    
    /* Social icon sizing */
    .menu-drawer__utility-links .list-social__link svg,
    .menu-drawer__utility-links .list-social__link i {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }
    
    /* Facebook specific color */
    .menu-drawer__utility-links .list-social__link:hover[href*="facebook"] {
        background: #1877f2;
        border-color: #1877f2;
        box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
    }
    
    /* WhatsApp specific color */
    .menu-drawer__utility-links .list-social__link:hover[href*="whatsapp"] {
        background: #02BD37;
        border-color: #02BD37;
        box-shadow: 0 4px 12px rgba(2, 189, 55, 0.3);
    }
    
    /* YouTube specific color */
    .menu-drawer__utility-links .list-social__link:hover[href*="youtube"] {
        background: #ff0000;
        border-color: #ff0000;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
    }
    
    /* Instagram specific color */
    .menu-drawer__utility-links .list-social__link:hover[href*="instagram"] {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        border-color: #bc1888;
        box-shadow: 0 4px 12px rgba(188, 24, 136, 0.3);
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-drawer-open {
        overflow: hidden;
    }
    
    /* Ensure menu drawer is above everything */
    details[open] .menu-drawer,
    .menu-drawer-container[open] .menu-drawer {
        z-index: 1001;
    }
    
    .mobile-header .menu-bar .toggle,
    .mobile-logo .menu-bar .toggle {
        display: flex;
        visibility: visible;
        opacity: 1;
        position: relative;
    }
    
    /* Override any rules that might hide toggle in header */
    header .toggle,
    header#navbar_top .toggle,
    .mobile-header .toggle {
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    
    /* Ensure Font Awesome icons are visible */
    .menu-bar .toggle i.fa-bars,
    .menu-bar .toggle i.fa-solid,
    .menu-bar .toggle .fa-bars,
    .menu-bar .toggle .fa-solid {
        display: inline-block;
        visibility: visible;
        opacity: 1;
        font-size: 22px;
        color: #121212;
    }
}

/* Hide Desktop Localization */
.desktop-localization-wrapper {
    display: none;
}

/* Search Modal Styling */
.search-modal {
    background: white;
}

/* Mobile Search - Enhanced Design */
@media (max-width: 990px) {
    /* Search icon in header */
    .header__icon--search {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    
    /* Search modal - Full width dropdown below header */
    .search-modal {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 1002;
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        border-top: 1px solid #e5e5e5;
    }
    
    /* Search modal open state */
    details[open] .search-modal,
    .header__search details[open] .search-modal {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    }
    
    /* Search modal closing animation */
    details:not([open]) .search-modal,
    .header__search details:not([open]) .search-modal {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    }
    
    /* Search modal content */
    .search-modal__content {
        padding: 15px;
        background: #ffffff;
        position: relative;
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
    }
    
    /* Search form styling */
    .search-modal__form {
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
        flex: 1;
    }
    
    /* Hide field label */
    .search-modal .field__label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        clip: rect(0, 0, 0, 0) !important;
    }
    
    /* Search input field */
    .search-modal .field {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        margin: 0;
    }
    
    .search-modal .search__input,
    .search-modal .field__input {
        width: 100%;
        padding: 16px 60px 16px 20px;
        font-size: 16px;
        border: 2px solid #e5e5e5;
        border-radius: 12px;
        background: #f8f9fa;
        outline: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        text-align: left !important;
        direction: ltr !important;
        text-indent: 0 !important;
        unicode-bidi: embed !important;
        writing-mode: horizontal-tb !important;
    }
    
    /* Force cursor to start - Additional fix */
    .search-modal .search__input:focus,
    .search-modal .field__input:focus {
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: embed !important;
    }
    
    /* Ensure placeholder doesn't affect cursor */
    .search-modal .search__input:placeholder-shown,
    .search-modal .field__input:placeholder-shown {
        text-align: left !important;
    }
    
    .search-modal .search__input:focus,
    .search-modal .field__input:focus {
        border-color: #0a77b8;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(10, 119, 184, 0.1);
        text-align: left;
    }
    
    .search-modal .search__input::placeholder,
    .search-modal .field__input::placeholder {
        color: #999;
        opacity: 1;
        text-align: left;
        direction: ltr;
    }
    
    /* Ensure cursor starts at beginning */
    .search-modal .search__input:focus::placeholder,
    .search-modal .field__input:focus::placeholder {
        opacity: 0;
    }
    
    /* Search button - Inside input */
    .search-modal .search__button,
    .search-modal .field__button {
        position: absolute;
        right: 6px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0a77b8;
        border: none;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
        flex-shrink: 0;
    }
    
    .search-modal .search__button svg,
    .search-modal .field__button svg {
        width: 20px;
        height: 20px;
    }
    
    .search-modal .search__button:hover,
    .search-modal .field__button:hover {
        background: #086ba3;
        transform: scale(1.05);
    }
    
    /* Hide reset button */
    .search-modal .reset__button {
        display: none !important;
    }
    
    /* Hide close button in search modal */
    .search-modal__close-button {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide predictive search loading */
    .search-modal .predictive-search__loading-state {
        display: none;
    }
    
    /* Hide modal overlay on mobile */
    .search-modal .modal-overlay {
        display: none;
    }
    
    /* Search icon toggle - Show close when open */
    details[open] .header__icon--search .icon-search {
        display: none;
    }
    
    details[open] .header__icon--search .header__icon-close {
        display: block;
    }
    
    /* Hide close icon when closed */
    .header__icon--search .header__icon-close {
        display: none;
    }
}

/* Account Icon Styling */
.header__icon--account {
    display: flex;
}

/* Cart Icon Styling */
.header__icon--cart {
    display: flex;
    position: relative;
}

/* Remove gradient background */
.header-wrapper.gradient {
    background: white;
}

/* Remove color scheme background */
.header-wrapper.color-scheme-1 {
    background: white;
}

/* ============================================
   MOBILE HEADER MARGIN FIXES - FINAL OVERRIDE
   Ensure zero gaps on mobile
   ============================================ */
@media (max-width: 990px) {
    /* Top Banner - No bottom margin */
    .top-banner {
        margin-bottom: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Header - No top/bottom margins or borders */
    header#navbar_top,
    header,
    header.header--left-center-right,
    header.header--mobile-center {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none; /* Remove border to eliminate gap */
    }
    
    /* Header wrapper - no border on mobile */
    .header-wrapper,
    sticky-header .header-wrapper {
        border-bottom: none; /* Remove border to eliminate gap */
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Mobile Header - Zero margins */
    .mobile-header {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* Mobile Logo - Proper padding, no margins */
    .mobile-logo {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    /* Mobile Search - Proper padding, no margins */
    .mobile-search {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* Override responsive.css completely */
    .main-search.mobile-search {
        margin: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 10px 15px;
    }
    
    /* Content - No top margin */
    #content {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Slider should start immediately below fixed header - eliminate gap */
    #content > section.fullscreen-banner-slider:first-child,
    #content > .fullscreen-banner-slider:first-child,
    #content > section.banner-slider:first-child,
    #content section.fullscreen-banner-slider:first-of-type,
    #content .fullscreen-banner-slider:first-of-type {
        position: relative;
        top: -73px; /* Move up to header bottom */
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Slider container - no spacing */
    #content section.fullscreen-banner-slider .slider-container,
    #content .fullscreen-banner-slider .slider-container {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* Banner - No top margin */
    .fullscreen-banner-slider,
    .banner-slider {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Cart Sidebar Styles */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.cart-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    transition: opacity 0.3s ease;
}

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

.cart-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.cart-sidebar-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #121212;
}

.cart-sidebar-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #121212;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.cart-sidebar-close:hover {
    color: #0a77b8;
}

.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    min-height: 0; /* Important for flexbox scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

.cart-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.cart-sidebar-footer {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
    background: white;
    flex-shrink: 0; /* Prevent footer from shrinking */
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;

    color: #121212;
}

.cart-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: #0a77b8;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.3s;
}

.cart-order-btn:hover:not(.disabled) {
    background: #086399;
    color: white;
}

.cart-order-btn.disabled,
.cart-order-btn:disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.cart-order-btn.disabled:hover,
.cart-order-btn:disabled:hover {
    background: #ccc;
    color: #999;
}

.cart-order-btn i {
    color: white;
}

.cart-order-btn.disabled i,
.cart-order-btn:disabled i {
    color: #999;
}

@media (max-width: 768px) {
    .cart-sidebar {
        width: 100%;
        max-width: 100vw;
        right: -100%;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
    
    .cart-sidebar-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        padding: 15px;
    }
    
    .cart-sidebar-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        padding: 15px;
        background: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .cart-sidebar-header {
        flex-shrink: 0;
        padding: 15px;
    }
}