/*
Template Name: VMS Customer - Responsive Styles
Author: VisualMediaSystem
Description: Comprehensive responsive design for mobile, tablet, and iPad devices
Breakpoints:
  - Mobile: < 576px
  - Tablet: 576px - 768px
  - iPad: 768px - 1024px
  - Desktop: > 1024px (unchanged)
*/

/* ============================================
   HEADER / NAVIGATION RESPONSIVE STYLES
   ============================================ */

/* ============================================
   NAVBAR Z-INDEX FIX - SIMPLIFIED & CLEAN
   ============================================ */

/* Navbar base - creates stacking context */
.ecommerce-navbar {
    position: relative;
    z-index: 1041 !important; /* Above offcanvas backdrop (1035) and offcanvas (1040) */
    background-color: var(--bs-body-bg);
    isolation: isolate; /* Creates new stacking context */
}

/* Desktop: Override top position to use default 35px (not 45px from app.css) */
/* The app.css sets top: 45px globally, but desktop should use 35px */
@media (min-width: 1024px) {
    .ecommerce-navbar {
        top: 35px !important; /* Desktop uses default top-tagbar height (35px) */
    }
}

/* Mobile/Tablet/iPad: Keep 45px as set in app.css */
@media (max-width: 1023.98px) {
    .ecommerce-navbar {
        top: 45px !important; /* Mobile uses 45px top-tagbar height */
    }
}

/* Fixed header offset (top-tagbar + ecommerce navbar)
   We use CSS variables so we can adjust per breakpoint and keep this precise. */
:root {
    --vms-top-tagbar-height: 35px; /* default (see app.css) */
    --vms-ecom-navbar-height: 70px; /* typical navbar height */
    --vms-fixed-header-offset: calc(var(--vms-top-tagbar-height) + var(--vms-ecom-navbar-height));
}

/* On mobile, top-tagbar is overridden to 45px in `templates/partials/topbar.html` */
@media (max-width: 767.98px) {
    :root {
        --vms-top-tagbar-height: 45px;
    }
}

/* All page content - below navbar
   NOTE: Do NOT target `body > *` here; it also matches Bootstrap overlays like `.offcanvas`
   and causes them to occupy layout space. Keep this scoped to real page wrappers only. */
.page-wrapper,
.section,
.container,
.sidebar,
.product-grid-container,
.ecommerce-product {
    position: relative;
    z-index: 1;
}

/* Sidebar must be below navbar dropdowns */
.sidebar {
    z-index: 1 !important; /* Below navbar dropdowns (1050) */
}

/* Prevent content from hiding behind fixed topbar/menu on mobile/tablet/iPad.
   Use `padding-top` (not `padding`) so page-specific padding rules still work. */
@media (max-width: 1023.98px) {
    .page-wrapper,
    .product-grid-container {
        padding-top: var(--vms-fixed-header-offset) !important;
    }
    
    /* Carousel - margin-top to account for fixed header */
    .ecommerce-hero.section {
        margin-top: 80px !important;
    }
    
    /* Prevent unwanted scrolling in the gap between navbar and content */
    body {
        overflow-x: hidden;
    }
    
    /* Ensure content starts right below navbar without scrollable gap */
    .page-wrapper:first-child,
    .product-grid-container:first-child {
        margin-top: 0 !important;
    }
}

/* Desktop: Carousel margin-top for fixed header */
@media (min-width: 1024px) {
    .ecommerce-hero.section {
        margin-top: 110px !important;
    }
}

/* Navbar dropdown containers - high z-index */
.ecommerce-navbar .dropdown {
    position: relative;
    z-index: 1040;
}

/* Categories dropdown - lower priority */
.ecommerce-navbar .dropdown-mega-full {
    z-index: 1040;
}

.ecommerce-navbar .dropdown-mega-full .dropdown-menu {
    z-index: 1040 !important;
}

/* Theme and User dropdowns - highest priority (above sidebar and offcanvas) */
.ecommerce-navbar .topbar-head-dropdown,
.ecommerce-navbar .header-item {
    position: relative;
    z-index: 1050 !important;
}

.ecommerce-navbar .topbar-head-dropdown .dropdown,
.ecommerce-navbar .header-item .dropdown {
    z-index: 1050 !important;
}

/* Desktop: Let Bootstrap handle dropdown positioning */
@media (min-width: 1024px) {
    .ecommerce-navbar .topbar-head-dropdown .dropdown-menu,
    .ecommerce-navbar .header-item .dropdown-menu,
    .ecommerce-navbar #light-dark-mode,
    .ecommerce-navbar .login-toggle {
        /* On desktop, let Bootstrap's default positioning work */
        position: absolute;
        z-index: 1050 !important;
    }
}

/* Mobile/Tablet/iPad: Custom positioning */
@media (max-width: 1023.98px) {
    .ecommerce-navbar .topbar-head-dropdown .dropdown-menu,
    .ecommerce-navbar .header-item .dropdown-menu,
    .ecommerce-navbar #light-dark-mode,
    .ecommerce-navbar .login-toggle {
        z-index: 1050 !important;
        position: absolute !important;
        /* Ensure dropdowns are above sidebar and all page content */
        isolation: isolate;
    }
}

/* Offcanvas z-index - above navbar but below navbar dropdowns */
.offcanvas {
    z-index: 1042 !important; /* Above navbar (1041) but below navbar dropdowns (1050) */
}

.offcanvas-backdrop {
    z-index: 1041 !important; /* Below offcanvas (1042) and navbar dropdowns (1050) */
}

/* Ensure navbar dropdowns are always above offcanvas when both are visible */
.ecommerce-navbar .topbar-head-dropdown.show,
.ecommerce-navbar .header-item.show {
    z-index: 1051 !important; /* Above offcanvas (1040) */
}

.ecommerce-navbar .topbar-head-dropdown.show .dropdown-menu,
.ecommerce-navbar .header-item.show .dropdown-menu,
.ecommerce-navbar .topbar-head-dropdown.show #light-dark-mode,
.ecommerce-navbar .header-item.show .login-toggle {
    z-index: 1051 !important; /* Above offcanvas (1040) */
}

/* Mobile Navigation (< 576px) - Logo centered between menu and icons */
@media (max-width: 575.98px) {
    /* Navbar adjustments */
    .ecommerce-navbar {
        padding: 0.5rem 0;
    }
    
    /* Navbar container - flexbox for logo centering */
    .ecommerce-navbar .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Show logo on mobile and center it */
    .ecommerce-navbar .navbar-brand {
        display: block !important; /* Override d-none */
        position: absolute;
        left: 35%;
        transform: translateX(-50%);
        z-index: 1;
        padding: 0.25rem 0;
    }
    
    /* Hide desktop logos, show mobile logos on mobile */
    .ecommerce-navbar .navbar-brand .logo-desktop-dark,
    .ecommerce-navbar .navbar-brand .logo-desktop-light {
        display: none !important;
    }
    
    .ecommerce-navbar .navbar-brand .logo-mobile-dark,
    .ecommerce-navbar .navbar-brand .logo-mobile-light {
        display: block !important;
    }
    
    .ecommerce-navbar .navbar-brand img {
        height: 45px !important; /* Reduced from 50px */
        max-width: 120px !important; /* Limit logo width */
    }
    
    /* Reduce container padding on mobile */
    .ecommerce-navbar .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Mobile menu button - keep on left, reduced padding */
    .ecommerce-navbar .btn-icon#mobileMenuToggle {
        padding: 0.25rem !important;
        font-size: 1.25rem;
        position: relative;
        z-index: 2;
        min-width: 36px !important;
    }
    
    /* Icons container - keep on right, reduced spacing */
    .ecommerce-navbar .d-flex.align-items-center {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        gap: 0.25rem !important; /* Reduced gap between icons */
    }
    
    /* Reduce padding on all icon buttons in mobile navbar */
    .ecommerce-navbar .d-flex.align-items-center .btn-icon,
    .ecommerce-navbar .d-flex.align-items-center .btn-topbar,
    .ecommerce-navbar .d-flex.align-items-center .header-item .btn,
    .ecommerce-navbar .d-flex.align-items-center .topbar-head-dropdown .btn {
        padding: 0.25rem !important; /* Reduced from default */
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* Reduce spacing between icon groups */
    .ecommerce-navbar .d-flex.align-items-center .ms-1,
    .ecommerce-navbar .d-flex.align-items-center .ms-2 {
        margin-left: 0.25rem !important; /* Reduced spacing */
    }
    
    /* Navigation menu - highest z-index when open */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: var(--bs-body-bg);
        z-index: 1070 !important; /* Above all navbar icons and dropdowns */
        padding: 1rem;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-collapse.show {
        transform: translateX(0);
        z-index: 1070 !important; /* Ensure it stays above everything when open */
    }
    
    /* Mobile menu overlay - below menu but above navbar */
    .navbar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1069 !important; /* Below menu (1070) but above navbar (1041) and dropdowns (1050-1051) */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .navbar-overlay.show {
        opacity: 1;
        visibility: visible;
        z-index: 1069 !important;
    }
    
    /* Ensure navbar icons and dropdowns are below mobile menu when menu is open */
    .navbar-collapse.show ~ * .ecommerce-navbar,
    .navbar-overlay.show ~ * .ecommerce-navbar {
        z-index: 1040 !important; /* Below mobile menu */
    }
    
    /* When mobile menu is open, lower navbar icons and dropdowns */
    .navbar-collapse.show ~ * .ecommerce-navbar .btn-icon,
    .navbar-collapse.show ~ * .ecommerce-navbar .header-item,
    .navbar-collapse.show ~ * .ecommerce-navbar .topbar-head-dropdown,
    .navbar-overlay.show ~ * .ecommerce-navbar .btn-icon,
    .navbar-overlay.show ~ * .ecommerce-navbar .header-item,
    .navbar-overlay.show ~ * .ecommerce-navbar .topbar-head-dropdown {
        z-index: 1040 !important; /* Below mobile menu */
    }
    
    .navbar-collapse.show ~ * .ecommerce-navbar .header-item .dropdown-menu,
    .navbar-collapse.show ~ * .ecommerce-navbar .topbar-head-dropdown .dropdown-menu,
    .navbar-overlay.show ~ * .ecommerce-navbar .header-item .dropdown-menu,
    .navbar-overlay.show ~ * .ecommerce-navbar .topbar-head-dropdown .dropdown-menu {
        z-index: 1039 !important; /* Below mobile menu */
    }
    
    /* Alternative: Direct targeting when menu is open */
    body:has(.navbar-collapse.show) .ecommerce-navbar {
        z-index: 1040 !important;
    }
    
    body:has(.navbar-collapse.show) .ecommerce-navbar .btn-icon,
    body:has(.navbar-collapse.show) .ecommerce-navbar .header-item,
    body:has(.navbar-collapse.show) .ecommerce-navbar .topbar-head-dropdown {
        z-index: 1040 !important;
    }
    
    body:has(.navbar-collapse.show) .ecommerce-navbar .header-item .dropdown-menu,
    body:has(.navbar-collapse.show) .ecommerce-navbar .topbar-head-dropdown .dropdown-menu {
        z-index: 1039 !important;
    }
    
    /* Close button for mobile menu - handled by JavaScript */
    .navbar-collapse .mobile-menu-close-btn {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 1051 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 50% !important;
        padding: 0.5rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        line-height: 1 !important;
        color: #000 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        cursor: pointer !important;
        opacity: 1 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .navbar-collapse .mobile-menu-close-btn:hover {
        opacity: 0.8 !important;
        background: rgba(255, 255, 255, 1) !important;
        transform: scale(1.05);
    }
    
    .navbar-collapse .mobile-menu-close-btn span {
        display: block;
        line-height: 1;
    }
    
    /* Navigation links */
    .navbar-nav {
        margin-top: 0.5rem; /* Reduced from 1rem */
    }
    
    .navbar-nav .nav-link {
        padding: 0.625rem 1rem !important; /* Reduced from 0.75rem */
        font-size: 0.95rem !important; /* Slightly smaller */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        line-height: 1.4 !important;
    }
    
    /* Categories toggle link - same compact spacing */
    .navbar-nav .categories-toggle {
        padding: 0.625rem 1rem !important;
    }
    
    /* Dropdown menu adjustments - ensure it appears directly below the parent nav-item */
    .navbar-nav .nav-item.dropdown {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 0.75rem !important; /* Reduced from 1rem */
        padding-right: 0 !important;
        padding-top: 0.25rem !important; /* Minimal top padding */
        padding-bottom: 0.25rem !important; /* Minimal bottom padding */
        display: none !important; /* Hidden by default */
        order: 2 !important; /* Appears after the nav-link (order: 1) */
    }
    
    /* Ensure nav-link comes first */
    .navbar-nav .nav-item.dropdown > .nav-link {
        order: 1 !important;
    }
    
    /* Show dropdown when it has the 'show' class */
    .navbar-nav .nav-item.dropdown .dropdown-menu.show {
        display: block !important;
    }
    
    /* Ensure dropdown appears immediately after its parent nav-link */
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
    
    .dropdown-menu .row {
        margin: 0 !important;
    }
    
    .dropdown-menu .col-lg-2,
    .dropdown-menu .col-lg-3 {
        width: 100%;
        margin-bottom: 0.5rem !important; /* Reduced from 1rem */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Categories dropdown - compact spacing */
    .dropdown-mega-full .dropdown-menu {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Category list - reduce padding */
    .dropdown-menu-list {
        padding-top: 0.5rem !important; /* Reduced from py-3 (1rem) */
        padding-bottom: 0.5rem !important; /* Reduced from py-3 (1rem) */
        margin-bottom: 0 !important;
    }
    
    /* Category title - reduce margin, remove padding for mobile */
    .dropdown-menu-list .menu-title {
        margin-bottom: 0.5rem !important; /* Reduced from mb-2 (0.5rem) */
        font-size: 0.75rem !important; /* Smaller font */
        padding-top: 0 !important; /* No padding on mobile */
        padding-bottom: 0 !important; /* No padding on mobile */
        padding-left: 0 !important; /* No padding on mobile */
        padding-right: 0 !important; /* No padding on mobile */
    }
    
    /* Category items - reduce spacing */
    .dropdown-menu-list .nav-item {
        margin-bottom: 0 !important;
    }
    
    .dropdown-menu-list .nav-link {
        padding: 0.375rem 0.5rem !important; /* Reduced padding */
        font-size: 0.875rem !important; /* Slightly smaller font */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* Lighter border */
        margin-bottom: 0 !important;
    }
    
    .dropdown-menu-list .nav-link:last-child {
        border-bottom: none !important;
    }
    
    /* Brands section in categories - compact */
    .dropdown-menu .brands-section {
        max-height: 200px;
        overflow-y: auto;
    }
    
    .dropdown-menu .brands-list {
        margin-bottom: 0.5rem;
    }
    
    /* Override justify-content-center for footer elements on mobile */
    /* Footer is NOT inside navbar-collapse, so target footer section directly */
    .footer-landing .col-md-6.justify-content-center,
    .footer-landing .col-md-6.d-flex.justify-content-center,
    .footer-landing [class*="col-"].justify-content-center,
    .footer-landing [class*="col-"].d-flex.justify-content-center,
    .footer-landing .d-flex.justify-content-center,
    .footer-landing .row.justify-content-center,
    footer .col-md-6.justify-content-center,
    footer .col-md-6.d-flex.justify-content-center,
    footer [class*="col-"].justify-content-center,
    footer [class*="col-"].d-flex.justify-content-center {
        justify-content: flex-start !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
    }
    
    /* Footer elements - left align on mobile */
    .footer-landing .col-md-6,
    .footer-landing .footer-title,
    .footer-landing .footer-link,
    .footer-landing .col-md-6 .footer-title,
    .footer-landing .col-md-6 .footer-link,
    footer .col-md-6,
    footer .footer-title,
    footer .footer-link {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Footer links list - left align */
    .footer-landing .footer-link,
    .footer-landing .footer-link li,
    .footer-landing .footer-link a,
    footer .footer-link,
    footer .footer-link li,
    footer .footer-link a {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Topbar actions (search, cart, user) - reduced spacing for mobile */
    .ecommerce-navbar .d-flex.align-items-center {
        gap: 0.25rem !important; /* Reduced from 0.5rem */
    }
    
    .ecommerce-navbar .btn-topbar {
        padding: 0.25rem !important; /* Reduced from 0.5rem */
        font-size: 0.9rem !important; /* Slightly smaller */
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* Header profile user - smaller on mobile */
    .ecommerce-navbar .header-profile-user {
        width: 28px !important; /* Reduced from 32px */
        height: 28px !important;
    }
    
    /* Cart badge */
    .topbar-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
    }
    
    /* Fix dropdown z-index for topbar icons */
    .ecommerce-navbar {
        position: relative;
        z-index: 1030;
    }
    
    .ecommerce-navbar .dropdown {
        position: relative;
        z-index: 1060;
    }
    
    /* Topbar dropdowns (theme, user) - absolute positioning for overlay */
    /* Only apply to topbar dropdowns, NOT mobile menu dropdowns */
    .ecommerce-navbar:not(.navbar-collapse) .topbar-head-dropdown .dropdown-menu,
    .ecommerce-navbar:not(.navbar-collapse) .header-item .dropdown-menu,
    .ecommerce-navbar:not(.navbar-collapse) #light-dark-mode,
    .ecommerce-navbar:not(.navbar-collapse) .login-toggle,
    .ecommerce-navbar .topbar-head-dropdown:not(.navbar-collapse *) .dropdown-menu,
    .ecommerce-navbar .header-item:not(.navbar-collapse *) .dropdown-menu {
        position: absolute !important;
        z-index: 1060 !important;
        top: 100% !important;
        margin-top: 0.5rem;
        min-width: 200px;
        background: var(--bs-body-bg) !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        padding: 0.5rem 0 !important;
        border-radius: 0.375rem;
        display: none;
    }
    
    .ecommerce-navbar:not(.navbar-collapse) .topbar-head-dropdown .dropdown-menu.show,
    .ecommerce-navbar:not(.navbar-collapse) .header-item .dropdown-menu.show,
    .ecommerce-navbar:not(.navbar-collapse) #light-dark-mode.show,
    .ecommerce-navbar:not(.navbar-collapse) .login-toggle.show {
        display: block !important;
    }
    
    /* CRITICAL FIX: Mobile menu dropdowns MUST use static positioning */
    /* These rules have HIGHEST SPECIFICITY to override .ecommerce-navbar .dropdown-menu */
    .ecommerce-navbar .navbar-collapse .nav-item.dropdown .dropdown-menu,
    .ecommerce-navbar .navbar-collapse .nav-item.dropdown.dropdown-mega-full .dropdown-menu,
    .ecommerce-navbar .navbar-collapse .dropdown-mega-full .dropdown-menu,
    .navbar-collapse.show .nav-item.dropdown .dropdown-menu,
    .navbar-collapse.show .dropdown-mega-full .dropdown-menu,
    .ecommerce-navbar .navbar-collapse.show .nav-item.dropdown .dropdown-menu,
    .ecommerce-navbar .navbar-collapse.show .dropdown-mega-full .dropdown-menu {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        z-index: auto !important;
        min-width: auto !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0 !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* FINAL OVERRIDE: Ensure mobile menu dropdowns are static, not absolute */
    /* This rule comes LAST and has maximum specificity to override everything */
    /* Must override .ecommerce-navbar .dropdown-menu which has position: absolute !important */
    @media (max-width: 575.98px) {
        /* Maximum specificity: 4 classes + media query */
        .ecommerce-navbar .navbar-collapse.show .nav-item.dropdown .dropdown-menu,
        .ecommerce-navbar .navbar-collapse.show .nav-item.dropdown.dropdown-mega-full .dropdown-menu,
        .ecommerce-navbar .navbar-collapse.show .dropdown-mega-full .dropdown-menu,
        .ecommerce-navbar .navbar-collapse .nav-item.dropdown .dropdown-menu,
        .ecommerce-navbar .navbar-collapse .nav-item.dropdown.dropdown-mega-full .dropdown-menu,
        .ecommerce-navbar .navbar-collapse .dropdown-mega-full .dropdown-menu,
        .navbar-collapse.show .nav-item.dropdown .dropdown-menu,
        .navbar-collapse.show .dropdown-mega-full .dropdown-menu {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            margin-top: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    
    /* Specifically ensure theme and user dropdowns are above categories dropdown and sidebar */
    .ecommerce-navbar .topbar-head-dropdown,
    .ecommerce-navbar .header-item {
        position: relative;
        z-index: 1070 !important;
    }
    
    /* Theme and User dropdowns - ensure they're above everything */
    .ecommerce-navbar .topbar-head-dropdown,
    .ecommerce-navbar .header-item {
        z-index: 1050 !important;
    }
    
    /* IMPORTANT: Only apply to topbar dropdowns, NOT mobile menu dropdowns */
    .ecommerce-navbar .topbar-head-dropdown .dropdown-menu:not(.navbar-collapse .dropdown-menu),
    .ecommerce-navbar .header-item .dropdown-menu:not(.navbar-collapse .dropdown-menu),
    .ecommerce-navbar #light-dark-mode:not(.navbar-collapse *),
    .ecommerce-navbar .login-toggle:not(.navbar-collapse *) {
        z-index: 1050 !important;
        position: fixed !important; /* Fixed positioning - JS will set top/right */
        /* Don't set top here - let JS calculate it */
        right: 1rem !important; /* Default right position */
        left: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        max-width: 250px !important;
        min-width: 200px !important;
        /* Ensure it overlays, not scrolls */
        transform: none !important;
        overflow: visible !important;
        /* Prevent it from being affected by parent overflow */
        will-change: transform;
    }
    
    /* ABSOLUTE OVERRIDE: Mobile menu dropdowns MUST be static */
    /* This comes after all other rules to ensure it wins */
    .ecommerce-navbar .navbar-collapse .dropdown-menu,
    .ecommerce-navbar .navbar-collapse .nav-item.dropdown .dropdown-menu,
    .ecommerce-navbar .navbar-collapse .nav-item.dropdown.dropdown-mega-full .dropdown-menu {
        position: static !important;
    }
    
    /* Ensure sidebar doesn't overlap navbar dropdowns */
    .sidebar {
        z-index: 1 !important;
    }
    
    /* Ensure dropdown items are clickable */
    .ecommerce-navbar .dropdown-item {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        cursor: pointer;
    }
    
    .ecommerce-navbar .dropdown-item:hover {
        background-color: var(--bs-gray-100);
    }
}

/* Tablet/iPad (576px - 1023.98px) - Logo centered between menu and icons */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Navbar container - flexbox for logo centering */
    .ecommerce-navbar .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Show logo on tablet/iPad and center it */
    .ecommerce-navbar .navbar-brand {
        display: block !important; /* Override d-none */
        position: absolute;
        left: 35%;
        transform: translateX(-50%);
        z-index: 1;
        max-width: 180px; /* Prevent logo from being too wide */
        width: auto;
        pointer-events: auto; /* Ensure logo is clickable */
    }
    
    /* Hide desktop logos, show mobile logos on tablet/iPad */
    .ecommerce-navbar .navbar-brand .logo-desktop-dark,
    .ecommerce-navbar .navbar-brand .logo-desktop-light {
        display: none !important;
    }
    
    .ecommerce-navbar .navbar-brand .logo-mobile-dark,
    .ecommerce-navbar .navbar-brand .logo-mobile-light {
        display: block !important;
    }
    
    /* Mobile menu button - keep on left with space */
    .ecommerce-navbar .btn-icon#mobileMenuToggle {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        min-width: 44px; /* Ensure button has space */
        margin-right: auto; /* Push to left */
    }
    
    /* Icons container - keep on right with proper spacing to avoid overlap */
    .ecommerce-navbar .d-flex.align-items-center {
        position: relative;
        z-index: 2;
        flex-shrink: 0;
        min-width: 140px; /* Ensure icons container has enough space */
        margin-left: auto; /* Push to the right */
        padding-left: 1rem; /* Add padding to prevent overlap with centered logo */
    }
}

/* Desktop (>= 1024px) - Reset logo positioning to default (left side) */
@media (min-width: 1024px) {
    /* Reset container - use Bootstrap's default flexbox behavior */
    .ecommerce-navbar .container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Prevent wrapping - keep all items in one row */
        justify-content: space-between !important; /* Bootstrap default - space between items */
    }
    
    /* Ensure all direct children are flex items */
    .ecommerce-navbar .container > * {
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    /* Reset logo to default position (left side, not centered) */
    .ecommerce-navbar .navbar-brand {
        position: static !important;
        left: auto !important;
        transform: none !important;
        max-width: none !important;
        width: auto !important;
        display: block !important; /* Keep visible on desktop (d-lg-block) */
        margin-right: 1rem !important; /* Bootstrap default spacing */
        flex-shrink: 0 !important; /* Don't shrink */
    }
    
    /* Show desktop logos, hide mobile logos on desktop */
    .ecommerce-navbar .navbar-brand .logo-desktop-dark,
    .ecommerce-navbar .navbar-brand .logo-desktop-light {
        display: block !important;
    }
    
    .ecommerce-navbar .navbar-brand .logo-mobile-dark,
    .ecommerce-navbar .navbar-brand .logo-mobile-light {
        display: none !important;
    }
    
    /* Reset mobile menu button (should be hidden on desktop anyway) */
    .ecommerce-navbar .btn-icon#mobileMenuToggle {
        position: static !important;
        min-width: auto !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure navbar-collapse is a flex item and takes available space */
    .ecommerce-navbar .navbar-collapse {
        flex-basis: auto !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important; /* Allow it to shrink if needed */
        align-items: center !important;
        display: flex !important; /* Ensure it's a flex container for its children */
    }
    
    /* Reset icons container - ensure it's a flex item */
    .ecommerce-navbar .d-flex.align-items-center {
        position: static !important;
        min-width: auto !important;
        margin-left: auto !important; /* Push icons to the right */
        padding-left: 0 !important;
        flex-shrink: 0 !important; /* Don't shrink - keep icons visible */
        display: flex !important; /* Ensure it's a flex container for its children */
    }
}

/* Additional safety rules to ensure only one logo shows at any viewport */
@media (max-width: 1023.98px) {
    /* On mobile and tablet, ensure desktop logos are hidden */
    .ecommerce-navbar .navbar-brand .logo-desktop-dark,
    .ecommerce-navbar .navbar-brand .logo-desktop-light {
        display: none !important;
    }
    
    /* On mobile and tablet, ensure mobile logos are shown */
    .ecommerce-navbar .navbar-brand .logo-mobile-dark,
    .ecommerce-navbar .navbar-brand .logo-mobile-light {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    /* On desktop, ensure mobile logos are hidden */
    .ecommerce-navbar .navbar-brand .logo-mobile-dark,
    .ecommerce-navbar .navbar-brand .logo-mobile-light {
        display: none !important;
    }
    
    /* On desktop, ensure desktop logos are shown */
    .ecommerce-navbar .navbar-brand .logo-desktop-dark,
    .ecommerce-navbar .navbar-brand .logo-desktop-light {
        display: block !important;
    }
}

/* Tablet Navigation (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ecommerce-navbar .navbar-brand img {
        height: 60px !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
    
    /* Theme and User dropdowns */
    .ecommerce-navbar .topbar-head-dropdown,
    .ecommerce-navbar .header-item {
        z-index: 1050 !important;
    }
    
    .ecommerce-navbar .topbar-head-dropdown .dropdown-menu,
    .ecommerce-navbar .header-item .dropdown-menu,
    .ecommerce-navbar #light-dark-mode,
    .ecommerce-navbar .login-toggle {
        z-index: 1050 !important;
        max-width: 90vw;
    }
}

/* iPad Navigation (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .ecommerce-navbar .navbar-brand img {
        height: 65px !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Theme and User dropdowns */
    .ecommerce-navbar .topbar-head-dropdown,
    .ecommerce-navbar .header-item {
        z-index: 1050 !important;
    }
    
    .ecommerce-navbar .topbar-head-dropdown .dropdown-menu,
    .ecommerce-navbar .header-item .dropdown-menu,
    .ecommerce-navbar #light-dark-mode,
    .ecommerce-navbar .login-toggle {
        z-index: 1050 !important;
        max-width: 85vw;
    }
}

/* ============================================
   HOME PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile Home Page (< 576px) */
@media (max-width: 575.98px) {
    /* Hero Carousel */
    .ecommerce-home {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        padding-top: 0 !important;
        aspect-ratio: 16 / 9;
    }
    .ecommerce-home .container {
        padding: 0 1rem !important;
    }
    
    .ecommerce-home h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    .ecommerce-home p {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
    
    .ecommerce-home .btn {
        /* width: 100% !important; */
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
    
    /* Carousel controls */
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px;
        height: 35px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
    
    /* Features section */
    .section .row.gy-4 {
        gap: 1rem;
    }
    
    .section .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    .section .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }
    
    .section .d-flex.align-items-center .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }
    
    /* Offer banners */
    .img-section {
        margin-bottom: 1rem;
    }
    
    .img-section .product-content {
        padding: 1rem !important;
    }
    
    .img-section h1 {
        font-size: 1.5rem !important;
    }
    
    .img-section p {
        font-size: 0.85rem !important;
    }
    
    /* Deals banner */
    .deals-banner {
        padding: 1.5rem 1rem !important;
    }
    
    .deals-banner h1 {
        font-size: 1.5rem !important;
    }
    
    .deals-banner h4 {
        font-size: 0.85rem !important;
    }
    
    .deals-banner p {
        font-size: 0.9rem !important;
    }
    
    /* Product sections */
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
    }
    
    /* Category filter tabs */
    .categories-filter {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .categories-filter .list-inline-item {
        margin: 0.25rem;
    }
    
    .categories-filter .categories {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    /* Expand button */
    .expand-btn {
        margin-top: 1rem;
    }
    
    .expand-btn h6 {
        font-size: 0.9rem !important;
    }
    
    /* View all products button */
    #viewAllProductsBtn {
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Product cards */
    .element-item .card,
    .swiper-slide .card {
        margin-bottom: 1rem;
    }
    
    .gallery-product {
        min-height: 180px !important;
    }
    
    .gallery-product img {
        max-height: 180px !important;
    }
    
    /* Swiper navigation */
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px !important;
    }
    
    /* Recently viewed section */
    .recently-viewed-section {
        padding: 1rem 0.5rem !important;
    }
    
    /* Latest arrival section */
    .latest-slider,
    .recently-viewed-slider {
        padding-bottom: 3rem;
    }
    
    /* Product grid wrapper */
    .gallery-wrapper {
        margin-top: 1rem;
    }
    
    /* Top picks section */
    .element-item {
        margin-bottom: 1.5rem;
    }
}

/* Tablet Home Page (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ecommerce-home {
        min-height: 400px !important;
        padding: 3rem 1.5rem !important;
    }
    
    .ecommerce-home h1 {
        font-size: 2.25rem !important;
    }
    
    .ecommerce-home .btn {
        width: auto !important;
        min-width: 150px;
    }
    
    .gallery-product {
        min-height: 200px !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
    }
}

/* iPad Home Page (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .ecommerce-home {
        min-height: 450px !important;
    }
    
    .ecommerce-home h1 {
        font-size: 2.5rem !important;
    }
    
    .gallery-product {
        min-height: 220px !important;
    }
}

/* ============================================
   PRODUCTS PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile Products Page (< 576px) */
@media (max-width: 575.98px) {
    /* Product grid container - add padding-top to push content below fixed header */
    .product-grid-container {
        padding-top: var(--vms-fixed-header-offset) !important; /* Push content below fixed header */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Mobile Filter Button - Sticky at top, positioned at top of content area */
    /* Since container has padding-top, sticky top should be 0 to stick at top of content */
    .mobile-filter-btn {
        position: sticky;
        top: 0; /* Stick at top of content area (container padding handles header spacing) */
        z-index: 100;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        margin-bottom: 1rem;
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }
    
    /* When sticky, position it below the fixed header */
    .mobile-filter-btn.sticky-active {
        top: var(--vms-fixed-header-offset);
    }
    
    /* Ensure results header has proper spacing from filter button */
    .results-header {
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
    
    .mobile-filter-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }
    
    .mobile-filter-btn.active {
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }
    
    /* Sidebar filters - Hidden by default on mobile, show products first */
    .ecommerce-product {
        flex-direction: column;
    }
    
    .ecommerce-product .sidebar {
        order: 2; /* Show after products */
        margin-bottom: 1.5rem;
        position: relative;
        width: 100%;
        display: none; /* Hidden by default */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, margin-bottom 0.3s ease, opacity 0.3s ease;
        opacity: 0;
    }
    
    /* Show sidebar when active */
    .ecommerce-product .sidebar.show {
        display: block;
        max-height: 5000px; /* Large enough for content */
        margin-bottom: 1.5rem;
        opacity: 1;
    }
    
    /* Products section - Show first on mobile */
    .ecommerce-product .flex-grow-1 {
        order: 1; /* Show before filters */
        width: 100%;
    }
    
    .sidebar .card-header {
        padding: 1rem !important;
    }
    
    .sidebar .card-header h5 {
        font-size: 0.95rem !important;
    }
    
    /* Accordion in sidebar */
    .accordion-item {
        border: none;
    }
    
    .accordion-button {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .accordion-body {
        padding: 1rem;
    }
    
    /* Filter accordion */
    .filter-accordion {
        max-height: none;
    }
    
    /* Filter badges */
    .filter-badge {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.75rem !important;
        margin: 0.25rem !important;
    }
    
    /* Search boxes in sidebar */
    .search-box input {
        font-size: 0.9rem;
        padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    }
    
    .search-icon {
        left: 10px !important;
        font-size: 1rem;
    }
    
    /* Category list */
    .list-unstyled li a {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Price range inputs */
    .formCost {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .formCost .input-group {
        width: 100%;
    }
    
    /* Results header - ensure proper spacing from filter button */
    .results-header {
        padding: 1rem !important;
        margin-bottom: 1rem;
        margin-top: 0 !important;
        padding-top: 0.5rem !important;
    }
    
    /* Results header - 3-row layout: pagination numbers, go input, then label */
    .results-header > .d-flex {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* Pagination wrapper - 1st row */
    .results-header .flex-shrink-0 {
        width: 100% !important;
        flex-shrink: 0 !important;
        order: 1; /* First row */
    }
    
    /* Results text - 3rd row (label/help text) */
    .results-header p {
        font-size: 0.9rem !important;
        width: 100%;
        margin-bottom: 0 !important;
        text-align: center;
        order: 3; /* Third row */
    }
    
    .results-header .pagination-element {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .results-header .pagination-element .col-lg-12 {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* Pagination container - vertical layout */
    .pagination-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }
    
    /* PaginationJS wrapper - use flex-wrap instead of column to allow input+button on same row */
    .pagination-container .paginationjs {
        display: flex !important;
        flex-wrap: wrap !important; /* Allow wrapping instead of strict column */
        flex-direction: row !important; /* Row direction with wrapping */
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        /* Override library's float-based layout */
        line-height: normal !important;
    }
    
    /* Row 1: Pagination pages list - centered, override float, full width to force new row */
    .pagination-container .paginationjs-pages {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        align-items: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important; /* Full width forces it to its own row */
        flex-basis: 100% !important; /* Force to full width row */
        order: 1 !important; /* First row */
        float: none !important; /* Override library's float */
        clear: both !important;
    }
    
    /* Override library's ul float */
    .pagination-container .paginationjs-pages ul {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        /* gap: 0.5rem !important; */
        justify-content: center !important;
        align-items: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Pagination page items - override float */
    .pagination-container .paginationjs-pages li {
        margin: 0 !important;
        list-style: none !important;
        float: none !important; /* Override library's float */
    }
    
    /* Pagination links */
    .pagination-container .paginationjs-pages li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.375rem !important;
        text-decoration: none !important;
    }
    
    /* Row 2: Pagination Go input and button - on same row, centered below numbers */
    /* Make go-input and go-button appear side by side (not full width) */
    .pagination-container .paginationjs-go-input,
    .pagination-container .paginationjs-go-button {
        order: 2 !important; /* Second row */
        margin: 0 !important;
        float: none !important; /* Override library's float */
        clear: none !important; /* Don't clear, keep them together */
        display: inline-flex !important; /* Inline so they appear on same line */
        align-items: center !important;
        flex-shrink: 0 !important; /* Don't shrink */
        flex-basis: auto !important; /* Auto width, not full width */
    }
    
    /* Add spacing between input and button */
    .pagination-container .paginationjs-go-input {
        margin-right: 0.5rem !important; /* Space between input and button */
    }
    
    .pagination-container .J-input,
    .pagination-container .paginationjs-go-input input[type="text"] {
        width: 60px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
        padding: 0.375rem 0.5rem !important;
        text-align: center !important;
        border-radius: 0.375rem !important;
    }
    
    .pagination-container .J-go-button,
    .pagination-container .paginationjs-go-button input[type="button"] {
        height: 36px !important;
        padding: 0.375rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 0.375rem !important;
        min-width: auto !important;
    }
    
    /* Product grid */
    .product-item {
        margin-bottom: 1rem;
    }
    
    .product-card {
        margin-bottom: 1rem;
    }
    
    .product-img-container {
        height: 180px !important;
    }
    
    /* Product card body */
    .product-card .card-body {
        padding: 0.75rem !important;
    }
    
    .product-card h6 {
        font-size: 0.9rem !important;
    }
    
    .product-card h5 {
        font-size: 1rem !important;
    }
    
    /* Features section at bottom */
    .position-relative.py-5 .row {
        gap: 1rem;
    }
    
    .position-relative.py-5 .col-lg-3 {
        margin-bottom: 1rem;
    }
}

/* Tablet Products Page (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-grid-container {
        padding-top: var(--vms-fixed-header-offset) !important;
    }
    
    .sidebar {
        margin-bottom: 2rem;
    }
    
    .product-img-container {
        height: 220px !important;
    }
    
    .results-header {
        padding: 1.25rem !important;
    }
}

/* iPad Products Page (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .product-grid-container {
        padding-top: var(--vms-fixed-header-offset) !important;
    }
    
    .ecommerce-product {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .product-img-container {
        height: 240px !important;
    }
}

/* ============================================
   GENERAL PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile General Pages (< 576px) */
@media (max-width: 575.98px) {
    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section spacing */
    .section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Page wrapper - use padding-top/bottom separately to preserve header offset */
    .page-wrapper {
        padding-top: var(--vms-fixed-header-offset) !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Cards */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    /* Headings */
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
    }
    
    h5 {
        font-size: 1rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-md {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
    
    /* Term condition / Returns page */
    .term-condition {
        padding: 2rem 0 !important;
    }
    
    .term-condition h1 {
        font-size: 1.5rem !important;
    }
    
    .term-card {
        margin: 1rem 0 !important;
    }
    
    .term-card .card-body {
        padding: 1.5rem !important;
    }
    
    .term-card h5 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .term-card ul {
        padding-left: 1.25rem;
    }
    
    .term-card li {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .term-card .d-flex.align-items-center {
        flex-wrap: wrap;
    }
    
    .term-card .d-flex.align-items-center i {
        font-size: 1rem;
    }
    
    .term-card .d-flex.align-items-center span {
        font-size: 0.9rem;
    }
    
    /* Features section at bottom of pages */
    .position-relative.py-5 .row {
        gap: 1rem;
    }
    
    .position-relative.py-5 .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    .position-relative.py-5 .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }
    
    .position-relative.py-5 .flex-shrink-0 {
        margin-bottom: 0.5rem;
    }
    
    .position-relative.py-5 h5 {
        font-size: 0.95rem !important;
    }
    
    .position-relative.py-5 p {
        font-size: 0.85rem !important;
    }
    
    /* SVG shape */
    .svg-shape {
        margin-top: -1px;
    }
    
    .svg-shape svg {
        height: 60px !important;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        font-size: 0.85rem;
        flex-wrap: wrap;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 0.85rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Offcanvas */
    .offcanvas {
        max-width: 85vw;
    }
    
    .offcanvas-header {
        padding: 1rem;
    }
    
    .offcanvas-body {
        padding: 1rem;
    }
}

/* Tablet General Pages (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
}

/* iPad General Pages (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    .section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 575.98px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 576px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
    .d-tablet-none {
        display: none !important;
    }
}

/* Hide on iPad */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .d-ipad-none {
        display: none !important;
    }
}

/* ============================================
   FIXES FOR COMMON ISSUES
   ============================================ */

/* Prevent horizontal scroll */
@media (max-width: 1023.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .container,
    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Fix for images */
@media (max-width: 1023.98px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Fix for tables */
@media (max-width: 767.98px) {
    .table {
        font-size: 0.85rem;
    }
    
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix for dropdowns on mobile */
@media (max-width: 767.98px) {
    .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Fix for carousel on mobile */
@media (max-width: 767.98px) {
    /* .carousel-item {
        min-height: 250px;
    } */
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
}

/* Fix for swiper on mobile */
@media (max-width: 767.98px) {
    .swiper {
        padding-bottom: 2rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px;
    }
}

/* ============================================
   ADDITIONAL RESPONSIVE FIXES
   ============================================ */

/* Fix for ecommerce product layout */
@media (max-width: 991.98px) {
    .ecommerce-product {
        flex-direction: column !important;
    }
    
    .ecommerce-product .sidebar {
        order: -1;
        width: 100%;
    }
    
    .ecommerce-product .flex-grow-1 {
        width: 100%;
    }
}

/* Fix for product grid columns */
@media (max-width: 575.98px) {
    .product-item.col-xxl-3,
    .product-item.col-lg-4,
    .product-item.col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .product-item.col-md-6 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
}

/* Fix for search bar modal */
@media (max-width: 767.98px) {
    #searchModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #searchModal .modal-content {
        border-radius: 0.5rem;
    }
    
    /* Search input - increase left padding to prevent icon overlap */
    #searchModal .search-input,
    #searchModal .form-control {
        font-size: 1rem !important;
        padding-left: 3rem !important; /* Increased from 45px to prevent icon overlap */
        padding-right: 3rem !important; /* Space for clear button */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Search icon positioning - ensure it doesn't overlap */
    #searchModal .search-widget-icon {
        left: 1rem !important; /* Position icon with proper spacing */
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    /* Clear button positioning */
    #searchModal .search-widget-icon-close {
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* Fix for cart offcanvas */
@media (max-width: 575.98px) {
    #ecommerceCart.offcanvas {
        max-width: 100vw;
    }
    
    .offcanvas-cart-content {
        padding: 0.75rem !important;
    }
    
    .cart-items-container {
        max-height: calc(100vh - 250px);
        overflow-y: auto;
    }
}

/* Fix for footer on mobile */
@media (max-width: 767.98px) {
    footer {
        font-size: 0.85rem;
    }
    
    footer .row {
        margin-bottom: 1.5rem;
    }
    
    footer h5 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    footer ul {
        padding-left: 0;
    }
    
    footer li {
        margin-bottom: 0.5rem;
    }
}

/* Fix for top tagbar */
@media (max-width: 767.98px) {
    .top-tagbar {
        font-size: 0.75rem;
        padding: 0.5rem 0 !important;
    }
    
    .top-tagbar .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Fix for about us carousel */
@media (max-width: 767.98px) {
    .aboutus-carousel {
        padding: 80px 0 50px !important;
        min-height: 250px !important;
    }
}

/* Fix for product detail page */
/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Ensure product-detail-container accounts for fixed header */
    .product-detail-container.page-wrapper {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
        padding-bottom: 1.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Reduce productSwiper height for tablet */
    .productSwiper {
        height: 300px !important;
    }
    
    .productSwiper .swiper-slide {
        height: 60px !important;
    }
    
    /* Adjust main image container */
    .main-image-container .swiper-slide {
        min-height: 300px !important;
    }
    
    .main-image-container img {
        max-height: 300px !important;
    }
    
    .product-detail.swiper-slide {
        min-height: 300px !important;
    }
    
    .product-detail.swiper-slide img {
        max-height: 300px !important;
    }
    
    /* Adjust image gallery padding */
    .image-gallery-container {
        padding: 1.5rem !important;
    }
    
    /* Adjust product info container padding */
    .product-info-container {
        padding: 2rem !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Ensure product-detail-container accounts for fixed header */
    .product-detail-container.page-wrapper {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Reduce productSwiper height for mobile - horizontal layout */
    .productSwiper {
        height: auto !important; /* Auto height for horizontal layout */
        min-height: 90px !important; /* Minimum height for thumbnails */
        margin-bottom: 1rem !important;
    }
    
    /* Thumbnail slides - smaller on mobile */
    .productSwiper .swiper-slide {
        height: 70px !important;
        width: 70px !important; /* Fixed width for horizontal layout */
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    /* Adjust main image container for mobile */
    .main-image-container {
        margin-bottom: 1rem;
    }
    
    .main-image-container .swiper-slide {
        min-height: 250px !important;
        max-height: 350px !important;
    }
    
    .main-image-container img {
        max-height: 300px !important;
        max-width: 100% !important;
    }
    
    .product-detail.swiper-slide {
        min-height: 250px !important;
    }
    
    .product-detail.swiper-slide img {
        max-height: 250px !important;
    }
    
    /* Reduce image gallery padding on mobile */
    .image-gallery-container {
        padding: 1rem !important;
    }
    
    /* Adjust product info container padding */
    .product-info-container {
        padding: 1.5rem !important;
    }
    
    /* Stack image gallery and product info vertically on mobile */
    .product-card .row.g-0 {
        flex-direction: column !important;
    }
    
    .product-card .col-lg-7,
    .product-card .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Adjust breadcrumb on mobile */
    .breadcrumb-nav {
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Adjust product title on mobile */
    .product-title {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   CART PAGE RESPONSIVE STYLES
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Ensure cart page section accounts for fixed header */
    /* The cart page has a section with class "page-wrapper" */
    section.page-wrapper:first-of-type {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
        padding-bottom: 1.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Align breadcrumb section container with cart content */
    section.page-wrapper:first-of-type .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Align cart content section with breadcrumb */
    #cart-content {
        padding-top: 0 !important;
        padding-bottom: 1.5rem !important;
    }
    
    #cart-content .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Cart page specific adjustments */
    .cart-list {
        margin-bottom: 1.5rem;
        padding: 0 !important;
    }
    
    /* Ensure consistent spacing for cart items card */
    .cart-list .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure consistent spacing for product cards in cart */
    .cart-items-container .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Stack cart items and summary vertically on tablet if needed */
    .product-list.row {
        flex-direction: column;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .product-list .col-lg-8,
    .product-list .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Ensure cart page section accounts for fixed header */
    /* The cart page has a section with class "page-wrapper" */
    section.page-wrapper:first-of-type {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Align breadcrumb section container with cart content */
    section.page-wrapper:first-of-type .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Align cart content section with breadcrumb */
    #cart-content {
        padding-top: 0 !important;
        padding-bottom: 1rem !important;
    }
    
    #cart-content .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Cart page specific adjustments */
    .cart-list {
        margin-bottom: 1rem;
        padding: 0 !important;
    }
    
    /* Shrink cart items card - reduce padding and spacing */
    .cart-list .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0.5rem !important;
        margin-bottom: 0.75rem !important; /* Reduced from default */
    }
    
    .cart-list .card-body {
        padding: 0.75rem !important; /* Reduced padding */
    }
    
    /* Ensure consistent spacing for product cards in cart - shrink row count */
    .cart-items-container .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0.75rem !important; /* Reduced spacing */
        border-radius: 0.5rem !important;
    }
    
    .cart-items-container .card-body {
        padding: 0.75rem !important; /* Reduced padding */
    }
    
    /* Product card alignment - use proper column structure */
    .cart-item .row {
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Product image column - fixed width */
    .cart-item .col-md-2.col-sm-3 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 80px !important;
        padding-left: 0 !important;
        padding-right: 0.75rem !important;
    }
    
    .cart-item .col-md-2.col-sm-3 img {
        width: 100% !important;
        height: auto !important;
        max-height: 80px !important;
        object-fit: contain !important;
    }
    
    /* Product info column - flexible, takes remaining space */
    .cart-item .col-md-4.col-sm-6 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0.75rem !important;
    }
    
    .cart-item h6 {
        margin-bottom: 0.25rem !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }
    
    .cart-item p.text-muted {
        margin-bottom: 0.25rem !important;
        font-size: 0.8rem !important;
        word-wrap: break-word !important;
    }
    
    .cart-item .cart-item-price {
        font-size: 0.95rem !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Quantity/Status column - centered */
    .cart-item .col-md-3.col-sm-6 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Total price column - right alignment, fixed width */
    .cart-item .col-md-2.col-sm-6.text-end {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 80px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }
    
    .cart-item .cart-item-total {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    
    /* Delete button column - right alignment, fixed width */
    .cart-item .col-md-1.col-sm-6.text-end:last-child,
    .cart-item .col-sm-6.text-end:last-child {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 40px !important;
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    
    /* Delete button styling */
    .cart-item .remove-item,
    .cart-item .btn-outline-danger {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* On mobile, ensure proper column stacking */
    @media (max-width: 575.98px) {
        .cart-item .row {
            flex-wrap: wrap !important;
        }
        
        /* Image and product info on first row */
        .cart-item .col-sm-3,
        .cart-item .col-sm-6:first-of-type {
            flex: 0 0 auto !important;
        }
        
        /* Quantity/status on second row, full width */
        .cart-item .col-sm-6:nth-of-type(2) {
            flex: 0 0 100% !important;
            width: 100% !important;
            margin-top: 0.75rem !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        
        /* Price and delete on third row, side by side */
        .cart-item .col-sm-6.text-end:nth-of-type(3),
        .cart-item .col-sm-6.text-end:last-child {
            flex: 0 0 auto !important;
            width: auto !important;
            /* margin-top: 0.5rem !important; */
            display: inline-flex !important;
        }
        
        /* Price column on mobile */
        .cart-item .col-sm-6.text-end:nth-of-type(3) {
            margin-right: auto !important;
        }
    }
    
    /* Stack cart items and summary vertically on mobile */
    .product-list.row {
        flex-direction: column;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .product-list .col-lg-8,
    .product-list .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Adjust cart header on mobile */
    .cart-list .card-body .d-flex {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    /* Keep breadcrumb and back button in a row on mobile */
    section.page-wrapper:first-of-type .d-flex.justify-content-between {
        flex-direction: row !important;
        gap: 0.5rem;
        align-items: center !important;
        flex-wrap: wrap;
    }
    
    /* Shrink back button on mobile if needed */
    section.page-wrapper:first-of-type .btn-outline-secondary {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Shrink breadcrumb on mobile */
    section.page-wrapper:first-of-type .breadcrumb {
        font-size: 0.875rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Adjust empty cart container */
    .empty-cart-container {
        padding: 1.5rem !important;
    }
    
    /* Fix table-card negative margin for cart page alignment */
    /* The negative margin (-1.2rem) is used to extend table to card edges,
       compensating for card body padding. On mobile, this causes misalignment.
       We reset it for cart page to maintain consistent spacing. */
    #cart-content .table-card,
    .cart-summary .table-card,
    .col-lg-4 .table-card {
        margin: 0 !important; /* Remove negative margin for proper alignment */
    }
    
    /* Ensure table has proper padding instead of relying on negative margin */
    #cart-content .table-card .table,
    .cart-summary .table-card .table,
    .col-lg-4 .table-card .table {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Add padding to table cells to compensate for removed negative margin */
    #cart-content .table-card td,
    #cart-content .table-card th,
    .cart-summary .table-card td,
    .cart-summary .table-card th {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Fix for countdown timer */
@media (max-width: 575.98px) {
    .countdownlist {
        font-size: 0.85rem;
    }
    
    .countdownlist .countdown-section {
        padding: 0.5rem;
        margin: 0.25rem;
    }
    
    .countdownlist .countdown-amount {
        font-size: 1.25rem;
    }
    
    .countdownlist .countdown-period {
        font-size: 0.7rem;
    }
}

/* ============================================
   SEARCH RESULTS PAGE RESPONSIVE STYLES
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Search results header - account for fixed header */
    .search-results-header {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Search results content */
    .search-results-header + .container {
        padding-top: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Search results header - account for fixed header */
    .search-results-header {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
        padding-bottom: 1rem !important;
    }
    
    .search-results-header h1 {
        font-size: 1.5rem !important;
    }
    
    .search-results-header .col-md-4 {
        margin-top: 1rem;
    }
    
    .search-results-header .search-box form {
        flex-direction: column !important;
        gap: 0.5rem;
    }
    
    .search-results-header .search-box .btn {
        width: 100%;
    }
    
    /* Search results content */
    .search-results-header + .container {
        padding-top: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Search tabs */
    .nav-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .nav-tabs .nav-link {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Search sections */
    .search-section {
        margin-bottom: 1.5rem !important;
    }
    
    /* Search tabs */
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: 1px solid #dee2e6;
    }
    
    .nav-tabs .nav-item {
        margin-bottom: 0.5rem;
    }
    
    .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .nav-tabs .badge {
        font-size: 0.7rem;
    }
    
    /* Tab content */
    .tab-content {
        margin-top: 1rem;
    }
    
    /* Search results grid */
    .search-results-grid .col-md-6,
    .search-results-grid .col-lg-4 {
        margin-bottom: 1rem;
    }
}

/* ============================================
   SHOP CART PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 991.98px) {
    /* Cart layout */
    .cart-page .col-lg-8 {
        margin-bottom: 2rem;
    }
    
    .cart-page .col-lg-4 {
        order: -1;
    }
}

@media (max-width: 767.98px) {
    /* Cart items table */
    .cart-items-table {
        font-size: 0.85rem;
    }
    
    .cart-items-table thead {
        display: none;
    }
    
    .cart-items-table tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .cart-items-table tbody td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }
    
    .cart-items-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 100px;
        margin-right: 0.5rem;
    }
    
    /* Cart item image */
    .cart-item-image {
        width: 80px;
        height: 80px;
    }
    
    /* Cart summary */
    .cart-summary {
        position: static !important;
        margin-top: 1rem;
    }
    
    .cart-summary .card {
        border-radius: 0.5rem;
    }
    
    /* Quantity controls */
    .quantity-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .quantity-controls .btn {
        width: 100%;
    }
    
    /* Cart actions */
    .cart-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cart-actions .btn {
        width: 100%;
    }
}

/* ============================================
   CHECKOUT PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1199.98px) {
    .checkout-page .col-xl-8 {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    /* Checkout header */
    .checkout-page .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Order items table */
    .checkout-page .table-responsive {
        font-size: 0.85rem;
    }
    
    .checkout-page .table thead {
        display: none;
    }
    
    .checkout-page .table tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .checkout-page .table tbody td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }
    
    .checkout-page .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 100px;
        margin-right: 0.5rem;
    }
    
    /* Address forms */
    .checkout-page .row.g-3 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Payment methods */
    .payment-methods {
        flex-direction: column;
    }
    
    .payment-method-card {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Order summary */
    .order-summary {
        position: static !important;
        margin-top: 2rem;
    }
    
    .order-summary .card {
        border-radius: 0.5rem;
    }
    
    /* Checkout buttons */
    .checkout-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .checkout-actions .btn {
        width: 100%;
    }
}

/* ============================================
   FAQ PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    /* FAQ header */
    .ecommerce-about {
        padding: 2rem 0 !important;
    }
    
    .ecommerce-about h1 {
        font-size: 1.75rem !important;
    }
    
    /* FAQ cards */
    .faq-card {
        margin-bottom: 1rem;
    }
    
    .faq-card .card-body {
        padding: 1rem !important;
    }
    
    /* Accordion */
    .accordion-item {
        margin-bottom: 0.5rem;
    }
    
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .accordion-body {
        font-size: 0.85rem;
        padding: 1rem;
    }
    
    /* Action buttons */
    .hstack.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    
    .hstack.gap-2 .btn {
        width: 100%;
    }
}

/* ============================================
   CONTACT US PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 991.98px) {
    .contact-page .col-lg-4 {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    /* Contact header */
    .ecommerce-about.bg-primary {
        padding: 2rem 0 !important;
    }
    
    .ecommerce-about h1 {
        font-size: 1.75rem !important;
    }
    
    /* Contact cards */
    .contact-card {
        margin-bottom: 1.5rem;
    }
    
    .contact-card .card-body {
        padding: 1.5rem !important;
    }
    
    .contact-card .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .contact-card .avatar-sm {
        margin-bottom: 1rem;
    }
    
    /* Contact form */
    .contact-form .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    .contact-form .btn {
        width: 100%;
    }
    
    /* Map container */
    .map-container {
        height: 300px !important;
        margin-top: 1rem;
    }
}

/* ============================================
   ORDER HISTORY PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    /* Order history table */
    .order-history-table {
        font-size: 0.85rem;
    }
    
    .order-history-table thead {
        display: none;
    }
    
    .order-history-table tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .order-history-table tbody td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }
    
    .order-history-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 120px;
        margin-right: 0.5rem;
    }
    
    /* Order status badge */
    .order-status-badge {
        display: inline-block;
        margin-top: 0.5rem;
    }
}

/* ============================================
   TRACK ORDER PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    /* Track order form */
    .track-order-form {
        padding: 1.5rem;
    }
    
    .track-order-form .form-control {
        font-size: 1rem;
    }
    
    .track-order-form .btn {
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Order tracking timeline */
    .tracking-timeline {
        padding-left: 1rem;
    }
    
    .tracking-timeline .timeline-item {
        padding-left: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .tracking-timeline .timeline-marker {
        left: 0;
        width: 12px;
        height: 12px;
    }
}

/* ============================================
   WISHLIST PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    .wishlist-grid .col-md-6,
    .wishlist-grid .col-lg-4 {
        margin-bottom: 1.5rem;
    }
    
    .wishlist-empty {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    .wishlist-empty .btn {
        width: 100%;
        margin-top: 1rem;
    }
}

/* ============================================
   INVOICE PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    .invoice-page .invoice-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .invoice-page .invoice-table {
        font-size: 0.85rem;
    }
    
    .invoice-page .invoice-table thead {
        display: none;
    }
    
    .invoice-page .invoice-table tbody tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .invoice-page .invoice-table tbody td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }
    
    .invoice-page .invoice-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .invoice-page .invoice-actions .btn {
        width: 100%;
    }
}

/* ============================================
   STORE LOCATOR PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    .store-locator-page .store-list {
        margin-bottom: 2rem;
    }
    
    .store-locator-page .store-card {
        margin-bottom: 1rem;
    }
    
    .store-locator-page .map-container {
        height: 300px !important;
    }
    
    .store-locator-page .store-filters {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .store-locator-page .store-filters .form-control,
    .store-locator-page .store-filters .btn {
        width: 100%;
    }
}

/* ============================================
   AUTH PAGES RESPONSIVE STYLES
   ============================================ */

@media (max-width: 767.98px) {
    /* Auth pages container */
    .auth-page {
        padding: 1rem;
    }
    
    .auth-page .card {
        border-radius: 0.5rem;
        margin: 0;
    }
    
    .auth-page .card-body {
        padding: 1.5rem !important;
    }
    
    /* Auth forms */
    .auth-form .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    .auth-form .btn {
        width: 100%;
        padding: 0.75rem;
    }
    
    /* Auth links */
    .auth-links {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    /* OTP input */
    .otp-input-group {
        justify-content: center;
        gap: 0.5rem;
    }
    
    .otp-input-group input {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }
}

/* ============================================
   GENERAL CONTENT PAGES RESPONSIVE STYLES
   (About Us, Support, Shipping, Returns, Terms, Privacy, etc.)
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Hero sections with bg-primary - account for fixed header */
    .term-condition.bg-primary,
    .ecommerce-about.bg-primary,
    section.bg-primary:first-of-type {
        padding-top: calc(var(--vms-fixed-header-offset) + 2rem) !important;
        padding-bottom: 2rem !important;
    }
    
    /* Content sections */
    section.section,
    section.ecommerce-about,
    section.position-relative:not(.profile-basic) {
        padding-top: 1.5rem !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Hero sections with bg-primary - account for fixed header */
    .term-condition.bg-primary,
    .ecommerce-about.bg-primary,
    section.bg-primary:first-of-type {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Content sections */
    section.section:not(.ecommerce-hero.section),
    section.ecommerce-about {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Term card padding */
    .term-card .card-body {
        padding: 1.5rem !important;
    }
    
    /* About us carousel */
    .aboutus-carousel {
        min-height: 250px !important;
        padding: 2rem 0 !important;
    }
    
    /* Support/Shipping/Returns content */
    .term-condition + .position-relative + section.section {
        padding-top: 1rem !important;
    }
}

/* ============================================
   USER ACCOUNT PAGE RESPONSIVE STYLES
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Profile section - account for fixed header */
    section.position-relative:has(.profile-basic) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
    }
    
    .profile-basic {
        height: 250px !important;
    }
    
    /* Account tabs section */
    section.py-5:has(.nav-pills) {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Stack sidebar and content on tablet */
    .col-lg-3 + .col-lg-9 {
        margin-top: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Profile section - account for fixed header */
    section.position-relative:has(.profile-basic) {
        padding-top: calc(var(--vms-fixed-header-offset) + 0.5rem) !important;
    }
    
    .profile-basic {
        height: 200px !important;
    }
    
    /* Profile avatar and info */
    .mt-n5.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .mt-n5 .avatar-xl {
        margin-top: -2rem !important;
    }
    
    /* Account tabs section */
    section.py-5:has(.nav-pills) {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Stack sidebar and content on mobile */
    .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    .col-lg-3 + .col-lg-9 {
        margin-top: 0;
    }
    
    /* Nav pills - horizontal scroll on mobile */
    .nav-pills.flex-column {
        flex-direction: row !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    
    .nav-pills.flex-column .nav-link {
        white-space: nowrap;
        min-width: auto;
    }
}

/* ============================================
   CHECKOUT/ADDRESS/PAYMENT PAGES RESPONSIVE STYLES
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Checkout pages - account for fixed header */
    .checkout-page section:first-of-type,
    section.page-wrapper:has(.checkout-page) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Checkout pages - account for fixed header */
    .checkout-page section:first-of-type,
    section.page-wrapper:has(.checkout-page) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
    }
    
    /* Address forms */
    .checkout-page .card {
        margin-bottom: 1rem;
    }
    
    .checkout-page .card-body {
        padding: 1rem !important;
    }
}

/* ============================================
   INVOICE PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile */
@media (max-width: 575.98px) {
    /* Invoice page - account for fixed header */
    .invoice-page section:first-of-type,
    section.page-wrapper:has(.invoice-page) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
    }
    
    /* Invoice table */
    .invoice-table {
        font-size: 0.85rem !important;
    }
    
    .invoice-table th,
    .invoice-table td {
        padding: 0.5rem !important;
    }
}

/* ============================================
   STORE LOCATOR PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile */
@media (max-width: 575.98px) {
    /* Store locator - account for fixed header */
    .store-locator-page section:first-of-type,
    section.page-wrapper:has(.store-locator-page) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
    }
    
    /* Map container */
    .store-map {
        height: 300px !important;
        margin-bottom: 1rem;
    }
}

/* ============================================
   FAQ PAGE RESPONSIVE STYLES
   ============================================ */

/* Mobile */
@media (max-width: 575.98px) {
    /* FAQ page - account for fixed header */
    .ecommerce-faq section:first-of-type,
    section.page-wrapper:has(.ecommerce-faq) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
    }
    
    /* Accordion items */
    .accordion-item {
        margin-bottom: 0.5rem;
    }
    
    .accordion-button {
        font-size: 0.9rem !important;
        padding: 0.75rem !important;
    }
}

/* ============================================
   TRACK ORDER PAGE RESPONSIVE STYLES
   ============================================ */

/* Tablet and iPad */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* Track order page - account for fixed header */
    section.page-wrapper:has(.track-orders),
    section.py-4:has(.track-orders) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1.5rem) !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Order progress alignment */
    .track-orders .row {
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }
    
    /* Make tracking steps wider on tablet */
    .track-orders .order-tracking {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        max-width: 180px !important;
    }
    
    /* Hide connecting lines on tablet if needed */
    .order-tracking:not(:last-child)::after {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    /* Track order page - account for fixed header */
    section.page-wrapper:has(.track-orders),
    section.py-4:has(.track-orders) {
        padding-top: calc(var(--vms-fixed-header-offset) + 1rem) !important;
        padding-bottom: 1rem !important;
    }
    
    /* Order progress - stack vertically and left align */
    .track-orders {
        padding: 0 !important;
    }
    
    .track-orders .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Tracking steps - full width on mobile, left aligned */
    .track-orders .order-tracking {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Hide connecting lines on mobile */
    .order-tracking:not(:last-child)::after,
    .order-tracking.completed:not(:last-child)::after {
        display: none !important;
    }
    
    /* Hide cancelled step line */
    .cancelled-step::before {
        display: none !important;
    }
    
    /* Tracking cards - full width, left aligned */
    .order-tracking .card {
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Card body - left align content with more padding for mobile */
    .order-tracking .card-body {
        text-align: left !important;
        padding: 2rem !important; /* Increased from 1rem for better spacing */
    }
    
    /* Icons and dots - position on left side */
    .order-tracking .is-complete,
    .order-tracking .cancelled-dot {
        position: absolute !important;
        top: 0.5rem !important;
        left: 1rem !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Icon container - left align */
    .order-tracking .card-body > div:first-child {
        text-align: left !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Text content - left align */
    .order-tracking h6,
    .order-tracking p {
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    /* Order header adjustments */
    .card-header.bg-primary,
    .card-header.bg-danger {
        padding: 0.75rem 1rem !important;
    }
    
    .card-header h5,
    .card-header h6 {
        font-size: 0.95rem !important;
    }
    
    /* Breadcrumb and back button on mobile */
    section.page-wrapper .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }
    
    section.page-wrapper .breadcrumb {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }
    
    section.page-wrapper .btn-outline-secondary {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}