/* ============================================
   1. DESIGN TOKENS - Mobile First
   ============================================ */
:root {
    /* Typography Scale - Mobile Optimized */
    --font-2xs: 10px;
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 17px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 28px;
    --font-3xl: 32px;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Touch Targets */
    --touch-min: 44px;
    --touch-comfortable: 48px;
    --touch-large: 56px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows - Mobile Optimized (subtle) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-max: 9999;

    /* Transition */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Container */
    --container-padding: 16px;
    --section-spacing: 32px;
}


/* ============================================
   2. BASE TYPOGRAPHY - Mobile
   ============================================ */
@media (max-width: 991px) {
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: var(--font-base);
        line-height: var(--leading-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }

    /* Headings */
    h1, .h1 {
        font-size: var(--font-2xl) !important;
        font-weight: var(--weight-bold);
        line-height: var(--leading-tight);
        letter-spacing: -0.02em;
    }

    h2, .h2 {
        font-size: var(--font-xl) !important;
        font-weight: var(--weight-bold);
        line-height: var(--leading-tight);
        letter-spacing: -0.01em;
    }

    h3, .h3 {
        font-size: var(--font-lg) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    h4, .h4 {
        font-size: var(--font-md) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
    }

    h5, .h5 {
        font-size: var(--font-base) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-normal);
    }

    h6, .h6 {
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-normal);
    }

    p {
        font-size: var(--font-base);
        line-height: var(--leading-relaxed);
        margin-bottom: var(--space-4);
    }

    small, .text-small {
        font-size: var(--font-sm);
    }

    .text-xs {
        font-size: var(--font-xs) !important;
    }

    .text-2xs {
        font-size: var(--font-2xs) !important;
    }

    /* Price Typography */
    .price-current,
    .current-price {
        font-size: var(--font-md) !important;
        font-weight: var(--weight-bold) !important;
        color: var(--primary-dark, #1e3a5f) !important;
    }

    /* Keep card overlay prices white - must override above */
    .product-card .card-info-overlay .current-price {
        color: #fff !important;
        font-size: 10px !important;
    }

    .product-card .card-info-overlay .old-price {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .price-old,
    .old-price {
        font-size: var(--font-sm) !important;
        color: #9ca3af !important;
        text-decoration: line-through;
    }

    .price-discount {
        font-size: var(--font-xs);
        font-weight: var(--weight-semibold);
        color: #fff;
        background: #ef4444;
        padding: 2px 6px;
        border-radius: var(--radius-sm);
    }
}


/* ============================================
   3. LAYOUT & SPACING - Mobile
   ============================================ */
@media (max-width: 991px) {
    /* Container */
    .container {
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
        max-width: 100% !important;
    }

    /* Section Spacing */
    section,
    .section {
        padding-top: var(--section-spacing) !important;
        padding-bottom: var(--section-spacing) !important;
    }

    /* Row Adjustments */
    .row {
        margin-left: calc(var(--space-2) * -1);
        margin-right: calc(var(--space-2) * -1);
    }

    .row > [class*="col-"] {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    /* Margin Utilities */
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-2 { margin-bottom: var(--space-2) !important; }
    .mb-mobile-3 { margin-bottom: var(--space-3) !important; }
    .mb-mobile-4 { margin-bottom: var(--space-4) !important; }
    .mb-mobile-5 { margin-bottom: var(--space-5) !important; }
    .mb-mobile-6 { margin-bottom: var(--space-6) !important; }

    .mt-mobile-0 { margin-top: 0 !important; }
    .mt-mobile-4 { margin-top: var(--space-4) !important; }
    .mt-mobile-6 { margin-top: var(--space-6) !important; }

    /* Padding Utilities */
    .p-mobile-3 { padding: var(--space-3) !important; }
    .p-mobile-4 { padding: var(--space-4) !important; }
    .px-mobile-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
    .py-mobile-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

    /* Gap Utilities */
    .gap-mobile-2 { gap: var(--space-2) !important; }
    .gap-mobile-3 { gap: var(--space-3) !important; }
    .gap-mobile-4 { gap: var(--space-4) !important; }
}


/* ============================================
   4. HEADER & NAVIGATION - Mobile
   ============================================ */

/* Mobile Page Header - Back Navigation */
.mobile-page-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid #eee;
    padding: 0 16px;
    height: 56px;
    display: none;
}

@media (max-width: 991px) {
    .mobile-page-header {
        display: block;
    }
}

.mobile-page-header.transparent {
    background: transparent;
    border-bottom: none;
    position: absolute;
}

.mobile-page-header.transparent .mobile-back-btn,
.mobile-page-header.transparent .mobile-page-title,
.mobile-page-header.transparent .mobile-action-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mobile-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    max-width: 100%;
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px;
    margin-left: -8px;
    border-radius: 8px;
    min-width: 40px;
    min-height: 44px;
    transition: background 0.2s ease;
}

.mobile-back-btn:hover,
.mobile-back-btn:active {
    background: #f3f4f6;
    color: #1e3a5f;
    text-decoration: none;
}

.mobile-back-btn i {
    font-size: 18px;
}

.mobile-page-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e3a5f;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex: 1;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #1e3a5f;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
    text-decoration: none;
}

.mobile-action-btn:hover,
.mobile-action-btn:active {
    background: #f3f4f6;
    color: #1e3a5f;
    text-decoration: none;
}

.mobile-action-btn .action-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Mobile Back Navigation Link (for Dashboard pages) */
.mobile-back-nav {
    padding: 0;
}

.mobile-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.mobile-back-link:hover,
.mobile-back-link:active {
    background: #f3f4f6;
    color: #1e3a5f;
    text-decoration: none;
}

.mobile-back-link i {
    font-size: 14px;
}

/* Hide default mobile header logo area when page header is present */
.has-mobile-page-header .mobile-header-logo-area,
.has-mobile-page-header .header-logo-mobile {
    display: none !important;
}

@media (max-width: 991px) {
    /* Main Header */
    .header-area {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    /* Header Bottom (Sticky Bar) */
    .header-bottom,
    .header-bottom.sticky-bar {
        min-height: 56px !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: var(--shadow-sm);
    }

    .header-bottom .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Menu Alignment */
    .menu-align-custom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        padding: 0 4px !important;
    }

    /* Burger Menu Button */
    .mobile-burger-side {
        flex: 0 0 44px !important;
    }

    /* Mobile Logo - Centered */
    .mobile-logo-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .mobile-logo-center img {
        max-height: 34px !important;
        width: auto !important;
    }

    .burger-icon-trigger {
        width: var(--touch-comfortable) !important;
        height: var(--touch-comfortable) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
    }

    .burger-icon-trigger:active {
        background: rgba(30, 58, 95, 0.08);
    }

    .burger-icon-trigger i {
        font-size: 22px !important;
        color: var(--primary, #1e3a5f);
    }

    /* Logo - Centered */
    .mobile-logo-centered {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 var(--space-4) !important;
    }

    .mobile-logo-centered img {
        max-height: 32px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Header Actions (Right Side) */
    .mobile-actions-right {
        flex: 0 0 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .mobile-actions-right .header-action-icon-2 {
        position: relative;
    }

    .mobile-actions-right .header-action-icon-2 > a {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
    }

    .mobile-actions-right .header-action-icon-2 > a:active {
        background: rgba(30, 58, 95, 0.08);
    }

    .mobile-actions-right .header-action-icon-2 img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Badge Counter */
    .mobile-actions-right .pro-count,
    .header-action-icon-2 .pro-count {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        font-weight: var(--weight-bold) !important;
        line-height: 18px !important;
        text-align: center;
        background: var(--primary, #1e3a5f) !important;
        color: #fff !important;
        border-radius: var(--radius-full);
        padding: 0 4px;
    }

    /* Mobile Menu Drawer */
    .mobile-header-wrapper-style {
        width: 85% !important;
        max-width: 320px !important;
        box-shadow: var(--shadow-lg);
    }

    .mobile-header-content-area {
        padding: var(--space-4) !important;
    }

    /* Hide Search Input in Mobile Menu */
    .mobile-search-enhanced,
    .mobile-header-content-area .mobile-search-enhanced,
    .mobile-header-content-area > .mobile-search-enhanced {
        display: none !important;
    }

    /* Hide "For Him" (Menu Titles) */
    .mobile-header-content-area h6,
    .mobile-header-content-area .mobile-menu-wrap h6 {
        display: none !important;
    }

    /* Hide Follow Us & Social Icons */
    .mobile-social-icon,
    .mobile-header-content-area .mobile-social-icon,
    .mobile-header-info-wrap .mobile-social-icon {
        display: none !important;
    }

    /* Hide Gletr / Copyright */
    .site-copyright,
    .mobile-header-content-area .site-copyright {
        display: none !important;
    }

    /* Hide Header Info Wrap (contains Follow Us and contact info) */
    .mobile-header-info-wrap,
    .mobile-header-content-area .mobile-header-info-wrap {
        display: none !important;
    }

    /* Mobile Menu Items */
    .mobile-menu li a {
        font-size: var(--font-base) !important;
        padding: var(--space-4) 0 !important;
        font-weight: var(--weight-medium);
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-menu li:last-child a {
        border-bottom: none;
    }

    .mobile-menu .dropdown li a {
        font-size: var(--font-sm) !important;
        padding: var(--space-3) var(--space-4) !important;
        color: #6b7280;
    }
}


/* ============================================
   5. HERO & BANNERS - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Hero Slider */
    .home-slider {
        padding: var(--space-3) 0 !important;
    }

    .hero-slider-1 .single-hero-slider,
    .hero-slider-1.style-5 .single-hero-slider {
        min-height: 280px !important;
        border-radius: var(--radius-lg) !important;
        background-position: center right !important;
    }

    .hero-slider-1 .slider-content,
    .hero-slider-1.style-5 .slider-content {
        padding: var(--space-5) var(--space-4) var(--space-10) !important;
    }

    .hero-slider-1 .slider-content h1 {
        font-size: var(--font-xl) !important;
        line-height: var(--leading-tight) !important;
        margin-bottom: var(--space-2) !important;
        max-width: 220px;
    }

    .hero-slider-1 .slider-content p {
        font-size: var(--font-sm) !important;
        line-height: var(--leading-normal) !important;
        margin-bottom: var(--space-4) !important;
        max-width: 200px;
        opacity: 0.9;
    }

    .hero-slider-1 .slider-content .btn {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--font-xs) !important;
        min-height: var(--touch-min);
    }

    /* Slider Dots */
    .hero-slider-1 .slick-dots,
    .dot-style-1 .slick-dots {
        bottom: var(--space-3) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .hero-slider-1 .slick-dots li button {
        width: 8px !important;
        height: 8px !important;
        border-radius: var(--radius-full);
    }

    .hero-slider-1 .slick-dots li.slick-active button {
        width: 24px !important;
        background: var(--primary, #1e3a5f);
    }

    /* Banner Cards */
    .banner-img {
        border-radius: var(--radius-lg) !important;
        margin-bottom: var(--space-3);
        overflow: hidden;
    }

    .banner-img img {
        border-radius: var(--radius-lg) !important;
    }

    .banner-img .banner-text {
        padding: var(--space-4) !important;
    }

    .banner-img .banner-text h4,
    .banner-img .banner-text h5 {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-2) !important;
    }

    .banner-img .banner-text .btn {
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--font-xs) !important;
    }
}


/* ============================================
   6. PRODUCT CARDS - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Product Grid */
    .product-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -8px !important; /* Counteract column padding */
        gap: 0 !important; /* Remove gap as it breaks Bootstrap col-6 */
    }

    .product-grid > div[class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 8px !important;
        margin-bottom: 16px !important;
    }

    /* Product Card */
    .product-cart-wrap {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    .product-cart-wrap:active {
        transform: scale(0.98);
    }

    /* Product Image */
    .product-cart-wrap .product-img-action-wrap {
        padding: 0 !important;
        background: #fff;
        position: relative !important;
        overflow: visible !important;
    }

    .product-cart-wrap .product-img-action-wrap .product-img {
        padding-bottom: 100% !important; /* Square image */
    }

    .product-cart-wrap .product-img-action-wrap img {
        border-radius: 12px 12px 0 0 !important;
        object-fit: cover !important;
    }

    /* Product Badges */
    .product-badges {
        top: 10px !important;
        left: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        z-index: 20 !important;
    }

    .product-badges span {
        font-size: 10px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    }

    /* Product Actions (Wishlist, Quick View) */
    .product-grid .product-cart-wrap .product-img-action-wrap .product-action-1,
    .product-action-1 {
        opacity: 1 !important;
        visibility: visible !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        position: absolute !important;
        z-index: 30 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .product-action-1 a.wishlist-btn {
        width: 36px !important;
        height: 36px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(255, 77, 79, 0.2) !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .product-action-1 a.wishlist-btn:active {
        transform: scale(0.9) !important;
    }

    .product-action-1 a.wishlist-btn i {
        font-size: 18px !important;
        line-height: 1 !important;
        color: #ff4d4f !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide Quick View on mobile grid for cleaner look */
    .product-action-1 a[aria-label="Quick view"] {
        display: none !important;
    }

    /* Hide Quick Add/Quick View button on mobile */
    .quick-add-btn,
    .product-card-content .quick-add-btn,
    .product-content-wrap .quick-add-btn {
        display: none !important;
    }

    /* Ensure wishlist button is always visible and properly positioned */
    .product-grid .product-cart-wrap .product-img-action-wrap .product-action-1 {
        pointer-events: auto !important;
        right: 8px !important;
        top: 8px !important;
        left: auto !important;
    }

    .product-img-action-wrap .product-action-1 {
        pointer-events: auto !important;
    }

    .product-img-action-wrap .product-action-1 a.wishlist-btn {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Product Content */
    .product-cart-wrap .product-content-wrap {
        padding: 12px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Product Name */
    .product-cart-wrap .product-content-wrap h2,
    .product-cart-wrap .product-content-wrap h2 a {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #1a1a1a;
        margin-bottom: 6px !important;
        min-height: 36px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-cart-wrap .product-category {
        margin-bottom: 6px !important;
    }

    .product-cart-wrap .product-rate-cover {
        margin-bottom: 6px !important;
    }

    /* Vendor Name */
    .product-cart-wrap .product-content-wrap > div:nth-child(3) {
        margin-bottom: 0 !important;
    }

    .product-cart-wrap .product-content-wrap .font-small.text-muted {
        font-size: 11px !important;
        color: #64748b !important;
    }

    .product-cart-wrap .product-rate i {
        font-size: 10px !important;
    }

    /* Product Price and Bottom Section */
    .product-cart-wrap .product-card-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .product-cart-wrap .product-price {
        flex: 1 !important;
        margin-top: 0 !important;
        display: block !important;
    }

    .product-cart-wrap .product-price span:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        display: block !important;
    }

    .product-cart-wrap .product-price span.old-price {
        font-size: 11px !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* Add to Cart Button - Mobile Grid View */
    .product-cart-wrap .add-cart {
        margin-top: 0 !important;
    }

    .product-cart-wrap .add-cart a {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #D4AF37 !important;
        color: #fff !important;
    }

    .product-cart-wrap .add-cart a span {
        display: none !important; /* Hide "Add" text on mobile grid */
    }

    .product-cart-wrap .add-cart a i {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Product Card - List View */
    .product-list-small article {
        padding: var(--space-3);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-3);
        border: 1px solid #f0f0f0;
    }

    .product-list-small article:hover {
        background: #fafafa;
    }
}


/* ============================================
   7. CATEGORY CARDS - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Section Title */
    .section-title {
        margin-bottom: var(--space-5) !important;
    }

    .section-title h3 {
        font-size: var(--font-lg) !important;
        font-weight: var(--weight-bold);
    }

    .section-title p {
        font-size: var(--font-sm) !important;
        margin-top: var(--space-1);
    }

    /* Category Card */
    .card-2 {
        padding: var(--space-4) var(--space-3) !important;
        border-radius: var(--radius-lg) !important;
        min-height: 100px;
    }

    .card-2 figure {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: var(--space-2) !important;
    }

    .card-2 figure img {
        max-width: 32px !important;
    }

    .card-2 h6 {
        font-size: var(--font-xs) !important;
        font-weight: var(--weight-semibold);
        margin-top: var(--space-2) !important;
        line-height: var(--leading-snug);
    }

    .card-2 span {
        font-size: var(--font-2xs) !important;
    }

    /* Slider Arrows */
    .slider-arrow .slider-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: var(--radius-full) !important;
    }

    .slider-arrow .slider-btn i {
        font-size: 12px !important;
    }
}


/* ============================================
   8. PRODUCT DETAIL PAGE - Mobile
   ============================================ */
@media (max-width: 991px) {
    /* Add padding for sticky bar */
    .product-page,
    .product-detail-section,
    .shop-product-detail {
        padding-bottom: 160px !important;
    }

    /* Gallery */
    .detail-gallery {
        margin-bottom: var(--space-5);
    }

    /* Main Image */
    .gallery-main-image {
        background: #fff !important;
        border-radius: var(--radius-lg);
        overflow: hidden;
        min-height: 320px;
    }

    .gallery-main-image img {
        max-height: 320px;
        border-radius: var(--radius-md);
    }

    /* Thumbnails */
    .slider-nav-thumbnails {
        margin-top: var(--space-3);
        gap: var(--space-2);
    }

    .slider-nav-thumbnails .slick-slide {
        margin: 0 4px;
    }

    .slider-nav-thumbnails img {
        border-radius: var(--radius-sm) !important;
        border: 2px solid transparent;
    }

    .slider-nav-thumbnails .slick-current img {
        border-color: var(--primary, #1e3a5f);
    }

    /* Product Info */
    .detail-info {
        padding: 0 var(--space-4);
    }

    .detail-info .title-detail {
        font-size: var(--font-xl) !important;
        font-weight: var(--weight-bold);
        line-height: var(--leading-snug) !important;
        margin-bottom: var(--space-3) !important;
    }

    /* Price Section */
    .detail-info .product-price,
    .detail-info .current-price {
        font-size: var(--font-xl) !important;
        font-weight: var(--weight-bold) !important;
        color: var(--primary, #1e3a5f);
    }

    .detail-info .old-price {
        font-size: var(--font-base) !important;
    }

    /* Variant Selectors */
    .attr-detail {
        margin: var(--space-5) 0 !important;
    }

    .attr-detail .select-box select,
    .attr-detail select {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
    }

    /* Quantity Selector */
    .detail-qty {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .detail-qty > span {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--font-md) !important;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    .detail-qty > span:active {
        background: #e5e5e5;
    }

    .detail-qty input {
        width: 50px !important;
        height: 44px !important;
        font-size: var(--font-base) !important;
        font-weight: var(--weight-semibold);
        text-align: center;
        border: none;
        background: transparent;
    }

    /* Action Buttons (Hidden on mobile - use sticky bar, except product page) */
    .action-buttons:not(.product-action-buttons) {
        display: none !important;
    }

    /* Mobile Sticky Add to Cart Bar */
    .mobile-sticky-bar {
        position: fixed !important;
        bottom: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: var(--space-3) var(--space-4) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
        z-index: var(--z-fixed);
        display: flex !important;
        gap: var(--space-3) !important;
        border-top: 1px solid #e9ecef;
    }

    .mobile-sticky-bar .btn-add-cart,
    .mobile-sticky-bar .btn-buy-now {
        flex: 1;
        padding: var(--space-4) !important;
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-semibold);
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }

    .mobile-sticky-bar .btn-add-cart {
        background: #fff;
        border: 2px solid var(--primary, #1e3a5f);
        color: var(--primary, #1e3a5f);
    }

    .mobile-sticky-bar .btn-buy-now {
        background: linear-gradient(135deg, #D4AF37, #B8860B);
        border: none;
        color: #fff;
    }

    /* Product page action buttons - override to show inline, side-by-side */
    .action-buttons.product-action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 20px 0 !important;
        width: 100% !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .action-buttons.product-action-buttons .btn-add-cart,
    .action-buttons.product-action-buttons .btn-buy-now {
        flex: none !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 9999px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
    }

    .action-buttons.product-action-buttons .btn-add-cart {
        background: #fff !important;
        color: #1e3a5f !important;
        border: 2px solid #1e3a5f !important;
    }

    .action-buttons.product-action-buttons .btn-buy-now {
        background: #D4AF37 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
    }

    /* Accordion Sections */
    .product-details-accordion {
        margin-top: var(--space-6);
    }

    .accordion-item {
        border-bottom: 1px solid #f0f0f0;
    }

    .accordion-header {
        padding: var(--space-4) 0 !important;
        font-size: var(--font-base) !important;
    }

    .accordion-header .header-title {
        gap: var(--space-3);
        font-weight: var(--weight-semibold);
    }

    .accordion-header .header-title i {
        font-size: var(--font-md);
        color: var(--primary, #1e3a5f);
    }

    .accordion-content {
        padding: 0 0 var(--space-4) 0;
    }

    .accordion-content p,
    .accordion-content li {
        font-size: var(--font-sm) !important;
        line-height: var(--leading-relaxed);
    }
}


/* ============================================
   9. CART PAGE - Mobile
   ============================================ */
@media (max-width: 767px) {
    .cart-page {
        padding: var(--space-5) 0 var(--space-10) !important;
        background: #f8f9fa;
    }

    /* Cart Header */
    .cart-header {
        margin-bottom: var(--space-5);
        text-align: center;
    }

    .cart-header h1 {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-2);
    }

    .cart-header p {
        font-size: var(--font-sm);
        color: #6b7280;
    }

    /* Cart Items Card */
    .cart-items-card {
        border-radius: var(--radius-lg) !important;
        overflow: hidden;
    }

    /* Cart Item */
    .cart-item {
        padding: var(--space-4) !important;
        gap: var(--space-3) !important;
        flex-wrap: wrap;
        position: relative;
    }

    .cart-item-image {
        width: 80px !important;
        height: 80px !important;
        border-radius: var(--radius-md) !important;
        flex-shrink: 0;
    }

    .cart-item-details {
        flex: 1;
        min-width: calc(100% - 100px);
    }

    .cart-item-name {
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        margin-bottom: var(--space-1) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cart-item-variant {
        font-size: var(--font-xs) !important;
        color: #6b7280;
        margin-bottom: var(--space-2) !important;
    }

    .cart-item-price {
        gap: var(--space-2) !important;
    }

    .cart-item-price .current-price {
        font-size: var(--font-base) !important;
        color: #D4AF37;
    }

    .cart-item-price .old-price {
        font-size: var(--font-xs) !important;
    }

    /* Quantity Control */
    .qty-control {
        width: 100%;
        justify-content: flex-start;
        margin-top: var(--space-3);
        order: 10;
    }

    .qty-control .qty-btn {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
    }

    .qty-control .qty-input {
        width: 50px !important;
        height: var(--touch-min) !important;
        font-size: var(--font-base) !important;
    }

    /* Subtotal */
    .cart-item-subtotal {
        text-align: right;
        margin-left: auto;
        margin-top: var(--space-3);
    }

    .cart-item-subtotal .label {
        font-size: var(--font-xs) !important;
    }

    .cart-item-subtotal .amount {
        font-size: var(--font-md) !important;
    }

    /* Remove Button */
    .cart-item-remove {
        position: absolute !important;
        top: var(--space-4);
        right: var(--space-4);
        width: 32px !important;
        height: 32px !important;
    }

    /* Empty Cart */
    .empty-cart {
        padding: var(--space-10) var(--space-5) !important;
    }

    .empty-cart-icon {
        width: 80px !important;
        height: 80px !important;
        font-size: 32px !important;
    }

    .empty-cart h3 {
        font-size: var(--font-lg) !important;
    }

    .empty-cart p {
        font-size: var(--font-sm) !important;
    }

    /* Cart Summary */
    .cart-summary-card {
        margin-top: var(--space-6);
        border-radius: var(--radius-lg) !important;
    }

    .summary-header {
        padding: var(--space-4) !important;
    }

    .summary-header h3 {
        font-size: var(--font-md) !important;
    }

    .summary-body {
        padding: var(--space-4) !important;
    }

    /* Coupon Section */
    .coupon-section {
        margin-bottom: var(--space-5) !important;
        padding-bottom: var(--space-5) !important;
    }

    .coupon-section label {
        font-size: var(--font-sm) !important;
    }

    .coupon-input-group {
        flex-direction: column;
        gap: var(--space-3) !important;
    }

    .coupon-input-group input {
        width: 100%;
        padding: var(--space-3) var(--space-4) !important;
        border-radius: var(--radius-md) !important;
    }

    .coupon-input-group .apply-btn,
    .coupon-input-group .remove-btn {
        width: 100%;
        padding: var(--space-3) !important;
        border-radius: var(--radius-md) !important;
    }

    /* Summary Rows */
    .summary-row {
        padding: var(--space-3) 0 !important;
    }

    .summary-row .label {
        font-size: var(--font-sm) !important;
    }

    .summary-row .value {
        font-size: var(--font-base) !important;
    }

    .summary-row.total .label {
        font-size: var(--font-base) !important;
    }

    .summary-row.total .value {
        font-size: var(--font-xl) !important;
    }

    /* Checkout Button */
    .checkout-btn {
        padding: var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-large);
    }

    /* Trust Badges */
    .trust-badges {
        gap: var(--space-4) !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .trust-badge {
        font-size: var(--font-xs) !important;
    }
}


/* ============================================
   10. CHECKOUT PAGE - Mobile
   ============================================ */
@media (max-width: 767px) {
    .checkout-page {
        padding: var(--space-5) 0 var(--space-10);
    }

    .checkout-page .checkout {
        padding: 0;
    }

    /* Form Groups */
    .checkout-page .form-group {
        margin-bottom: var(--space-4) !important;
    }

    .checkout-page .form-group label {
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-medium);
        margin-bottom: var(--space-2) !important;
        display: block;
    }

    .checkout-page .form-group input,
    .checkout-page .form-group select,
    .checkout-page .form-group textarea {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
        border: 1px solid #e0e0e0;
    }

    .checkout-page .form-group input:focus,
    .checkout-page .form-group select:focus {
        border-color: var(--primary, #1e3a5f);
        outline: none;
        box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    }

    /* Order Review */
    .checkout-page .order_review {
        margin-top: var(--space-6);
        padding: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .checkout-page .order_review h4 {
        font-size: var(--font-lg) !important;
        margin-bottom: var(--space-4) !important;
    }

    /* Order Table */
    .checkout-page .order_table {
        font-size: var(--font-sm) !important;
    }

    .checkout-page .order_table td {
        padding: var(--space-3) var(--space-2) !important;
    }

    .checkout-page .order_table .product-thumbnail img {
        width: 50px !important;
        height: 50px !important;
        border-radius: var(--radius-sm);
    }

    /* Payment Methods */
    .checkout-page .payment_methods {
        margin-top: var(--space-5);
    }

    .checkout-page .payment_method {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-3) !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid #e0e0e0;
    }

    .checkout-page .payment_method.selected {
        border-color: var(--primary, #1e3a5f);
        background: rgba(30, 58, 95, 0.03);
    }

    .checkout-page .payment_methods label {
        font-size: var(--font-base) !important;
        font-weight: var(--weight-medium);
    }

    /* Place Order Button */
    .checkout-page .btn-checkout {
        width: 100%;
        padding: var(--space-4) !important;
        font-size: var(--font-md) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-large);
        margin-top: var(--space-5);
    }

    /* Address Cards */
    .address-card {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-3) !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid #e0e0e0;
    }

    .address-card.selected {
        border-color: var(--primary, #1e3a5f);
        border-width: 2px;
    }

    .address-card h6 {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-2) !important;
    }

    .address-card p {
        font-size: var(--font-sm) !important;
        line-height: var(--leading-relaxed);
        color: #6b7280;
    }
}


/* ============================================
   11. FORMS & INPUTS - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Form Control - 16px prevents iOS Safari auto-zoom on focus */
    .form-control {
        padding: var(--space-3) var(--space-4) !important;
        font-size: 16px !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
        border: 1px solid #e0e0e0;
        transition: var(--transition-fast);
    }

    /* Prevent iOS zoom on all input types */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }

    .form-control:focus {
        border-color: var(--primary, #1e3a5f);
        box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
        outline: none;
    }

    .form-control::placeholder {
        color: #9ca3af;
    }

    /* Form Select */
    .form-select {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        padding-right: 40px !important;
    }

    /* Form Label */
    .form-label,
    label {
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-medium);
        margin-bottom: var(--space-2) !important;
        display: block;
        color: #374151;
    }

    /* Input Group */
    .input-group {
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .input-group-text {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-base) !important;
        background: #f5f5f5;
        border: 1px solid #e0e0e0;
    }

    /* Checkbox & Radio */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        margin-right: var(--space-3);
    }

    .form-check {
        padding: var(--space-3) 0;
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
    }

    .form-check-label {
        font-size: var(--font-base) !important;
        margin-left: var(--space-2);
    }

    /* Textarea */
    textarea.form-control {
        min-height: 100px;
        resize: vertical;
    }

    /* Search Input */
    .search-style-2 {
        border-radius: var(--radius-full) !important;
    }

    .search-style-2 form input {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-base) !important;
    }
}


/* ============================================
   12. BUTTONS & CTAs - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Base Button */
    .btn {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-semibold);
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        transition: var(--transition-normal);
        cursor: pointer;
        text-decoration: none;
    }

    .btn:active {
        transform: scale(0.98);
    }

    /* Button Sizes */
    .btn-lg {
        padding: var(--space-4) var(--space-6) !important;
        font-size: var(--font-base) !important;
        min-height: var(--touch-large);
    }

    .btn-sm {
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--font-xs) !important;
        min-height: 36px;
    }

    .btn-xs {
        padding: var(--space-1) var(--space-3) !important;
        font-size: var(--font-2xs) !important;
        min-height: 28px;
    }

    /* Primary Button */
    .btn-primary,
    .button {
        background: linear-gradient(135deg, var(--primary, #1e3a5f), var(--primary-dark, #0d2137)) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
    }

    .btn-primary:active,
    .button:active {
        box-shadow: 0 2px 6px rgba(30, 58, 95, 0.2);
    }

    /* Secondary Button */
    .btn-outline-primary {
        background: transparent !important;
        border: 2px solid var(--primary, #1e3a5f) !important;
        color: var(--primary, #1e3a5f) !important;
    }

    .btn-outline-primary:active {
        background: rgba(30, 58, 95, 0.05) !important;
    }

    /* Gold/Accent Button */
    .btn-gold,
    .btn-accent {
        background: linear-gradient(135deg, #D4AF37, #B8860B) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    }

    /* Full Width Button */
    .btn-block,
    .btn-full {
        width: 100%;
    }

    /* Button with Icon */
    .btn i {
        font-size: 14px;
    }

    /* Disabled Button */
    .btn:disabled,
    .btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    /* Add to Cart Button Global */
    .add_to_cart,
    .add-to-cart {
        min-height: var(--touch-min) !important;
        font-weight: var(--weight-semibold);
    }
}


/* ============================================
   13. FOOTER - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Newsletter Section */
    .jewelry-newsletter {
        padding: var(--space-8) 0 !important;
    }

    .newsletter-wrapper {
        flex-direction: column !important;
        text-align: center;
    }

    .newsletter-content {
        max-width: 100% !important;
        margin-bottom: var(--space-6);
    }

    .newsletter-icon {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto var(--space-4) !important;
    }

    .newsletter-icon i {
        font-size: 20px !important;
    }

    .newsletter-content h2 {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-3) !important;
    }

    .newsletter-content p {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-4) !important;
    }

    .newsletter-benefits {
        flex-direction: column !important;
        gap: var(--space-2) !important;
        margin-bottom: var(--space-5) !important;
    }

    .newsletter-benefit {
        font-size: var(--font-xs) !important;
    }

    .newsletter-form-wrapper {
        padding: var(--space-5) !important;
        border-radius: var(--radius-lg) !important;
        width: 100% !important;
    }

    .newsletter-form-title {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-4) !important;
    }

    .newsletter-form input {
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
    }

    .newsletter-form button {
        padding: var(--space-4) !important;
        font-size: var(--font-sm) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
    }

    /* Features Section */
    .jewelry-features {
        padding: var(--space-6) 0 !important;
    }

    .feature-item {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-3);
    }

    .feature-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .feature-icon img {
        width: 20px !important;
        height: 20px !important;
    }

    .feature-text h4 {
        font-size: var(--font-sm) !important;
    }

    .feature-text p {
        font-size: var(--font-xs) !important;
    }

    /* Main Footer */
    .jewelry-footer-main {
        padding: var(--space-6) 0 !important;
    }

    .footer-brand {
        text-align: center;
        margin-bottom: var(--space-6);
    }

    .footer-brand img {
        max-height: 45px !important;
        padding: var(--space-3) var(--space-4) !important;
    }

    .footer-brand p {
        font-size: var(--font-sm) !important;
        max-width: 300px;
        margin: 0 auto var(--space-5);
    }

    .footer-contact-list {
        text-align: left;
        max-width: 280px;
        margin: 0 auto;
    }

    .footer-contact-item {
        margin-bottom: var(--space-4) !important;
    }

    .footer-contact-item .contact-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .footer-contact-item .contact-text strong {
        font-size: var(--font-xs) !important;
    }

    .footer-contact-item .contact-text span {
        font-size: var(--font-sm) !important;
    }

    .footer-social {
        justify-content: center !important;
        margin-top: var(--space-5);
    }

    .footer-social a {
        width: 44px !important;
        height: 44px !important;
    }

    /* Footer Widgets */
    .footer-widget {
        margin-bottom: var(--space-5);
    }

    .footer-widget h4 {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-4) !important;
    }

    .footer-links li {
        margin-bottom: var(--space-3) !important;
    }

    .footer-links li a {
        font-size: var(--font-sm) !important;
        padding: var(--space-1) 0;
    }

    /* Footer Bottom */
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4) !important;
    }

    .copyright {
        font-size: var(--font-xs) !important;
        order: 2;
    }

    .footer-bottom-right {
        order: 1;
        margin-left: 0 !important;
    }

    .footer-bottom-right .trust-badges {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-bottom-right .trust-badge {
        font-size: var(--font-2xs) !important;
        padding: var(--space-1) var(--space-3) !important;
    }

    /* Add extra padding for bottom nav */
    footer {
        padding-bottom: 80px !important;
    }
}


/* ============================================
   14. MODALS & OVERLAYS - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Modal Dialog */
    .modal-dialog {
        margin: var(--space-3) !important;
        max-width: calc(100% - var(--space-6)) !important;
    }

    .modal-content {
        border-radius: var(--radius-xl) !important;
        overflow: hidden;
    }

    /* Modal Header */
    .modal-header {
        padding: var(--space-4) !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .modal-header .modal-title {
        font-size: var(--font-md) !important;
        font-weight: var(--weight-semibold);
    }

    .modal-header .btn-close {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    /* Modal Body */
    .modal-body {
        padding: var(--space-4) !important;
    }

    /* Modal Footer */
    .modal-footer {
        padding: var(--space-4) !important;
        flex-direction: column;
        gap: var(--space-3) !important;
        border-top: 1px solid #f0f0f0;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }

    /* Quick View Modal - Bottom Sheet Style */
    #quickViewModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #quickViewModal .modal-content {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Alert Modals */
    .alert {
        padding: var(--space-4) !important;
        font-size: var(--font-sm) !important;
        border-radius: var(--radius-md) !important;
    }

    /* Toast Notifications */
    .notyf__toast {
        max-width: calc(100% - var(--space-6)) !important;
        margin: 0 var(--space-3) !important;
        border-radius: var(--radius-md) !important;
    }

    /* GST Popup */
    .gst-popup {
        width: calc(100% - var(--space-6)) !important;
        max-width: 340px !important;
        border-radius: var(--radius-lg) !important;
    }

    .gst-popup-header {
        padding: var(--space-4) !important;
    }

    .gst-popup-header h4 {
        font-size: var(--font-base) !important;
    }

    .gst-popup-body {
        padding: var(--space-4) !important;
    }

    .gst-row {
        font-size: var(--font-sm) !important;
    }
}


/* ============================================
   15. BOTTOM NAVIGATION - Enhancements
   ============================================ */
@media (max-width: 991px) {
    .mobile-bottom-nav {
        padding: var(--space-2) 0 !important;
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-bottom-nav .nav-container {
        max-width: 420px;
        margin: 0 auto;
    }

    .mobile-bottom-nav .nav-item {
        font-size: var(--font-2xs) !important;
        padding: var(--space-1) var(--space-3) !important;
        min-width: 56px;
        gap: 2px;
    }

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

    .mobile-bottom-nav .nav-item span {
        font-weight: var(--weight-medium);
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--primary, #1e3a5f);
    }

    .mobile-bottom-nav .nav-item.active i {
        transform: scale(1.05);
    }

    /* Center Search Button */
    .mobile-bottom-nav .nav-item.center-btn {
        width: 52px !important;
        height: 52px !important;
        margin-top: -24px !important;
        box-shadow: 0 4px 16px rgba(30, 58, 95, 0.35) !important;
    }

    .mobile-bottom-nav .nav-item.center-btn i {
        font-size: 20px !important;
    }

    /* Badge */
    .mobile-bottom-nav .badge-count {
        top: -4px !important;
        right: 6px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    /* Body padding for bottom nav */
    body {
        padding-bottom: 72px !important;
    }
}


/* ============================================
   16. UTILITY CLASSES - Mobile
   ============================================ */
@media (max-width: 991px) {
    /* Display Utilities */
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex { display: flex !important; }
    .d-mobile-grid { display: grid !important; }

    /* Flex Utilities */
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-wrap { flex-wrap: wrap !important; }
    .justify-mobile-center { justify-content: center !important; }
    .align-mobile-center { align-items: center !important; }

    /* Text Utilities */
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }

    /* Width Utilities */
    .w-mobile-100 { width: 100% !important; }
    .w-mobile-auto { width: auto !important; }

    /* Overflow */
    .overflow-mobile-hidden { overflow: hidden !important; }
    .overflow-mobile-auto { overflow: auto !important; }
    .overflow-x-mobile-auto { overflow-x: auto !important; }

    /* Position */
    .position-mobile-relative { position: relative !important; }
    .position-mobile-sticky { position: sticky !important; }

    /* Border Radius */
    .rounded-mobile-lg { border-radius: var(--radius-lg) !important; }
    .rounded-mobile-xl { border-radius: var(--radius-xl) !important; }

    /* Shadows */
    .shadow-mobile-none { box-shadow: none !important; }
    .shadow-mobile-sm { box-shadow: var(--shadow-sm) !important; }
    .shadow-mobile-card { box-shadow: var(--shadow-card) !important; }

    /* Hide on Mobile */
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }

    /* Show only on Mobile */
    .show-mobile,
    .mobile-only {
        display: block !important;
    }

    /* Scrollable Horizontal */
    .scroll-x-mobile {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scroll-x-mobile::-webkit-scrollbar {
        display: none;
    }

    /* Touch Target Helper */
    .touch-target {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    /* Line Clamp */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

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

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* ============================================
   17. ANIMATIONS - Mobile Optimized
   ============================================ */
@media (max-width: 991px) {
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* Fade In */
    .animate-fade-in {
        animation: fadeIn 0.3s ease forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Slide Up */
    .animate-slide-up {
        animation: slideUp 0.35s ease forwards;
    }

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

    /* Scale In */
    .animate-scale-in {
        animation: scaleIn 0.25s ease forwards;
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Skeleton Loading */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-shimmer 1.5s infinite;
        border-radius: var(--radius-sm);
    }

    @keyframes skeleton-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Pulse */
    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* Spin */
    .animate-spin {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
}


/* ============================================
   18. SAFE AREAS - iOS Support
   ============================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav {
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)) !important;
    }

    .mobile-sticky-bar {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}


/* ============================================
   19. BREADCRUMB - Mobile
   ============================================ */
@media (max-width: 767px) {
    .page-header.breadcrumb-wrap {
        padding: var(--space-4) 0 !important;
        background: #f8f9fa;
    }

    .page-header .breadcrumb {
        font-size: var(--font-xs) !important;
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    .page-header .breadcrumb li {
        display: inline-flex;
        align-items: center;
    }

    .page-header .breadcrumb li + li::before {
        content: '›';
        margin: 0 var(--space-2);
        color: #9ca3af;
    }

    .page-header h1 {
        font-size: var(--font-lg) !important;
        margin-top: var(--space-2);
    }
}


/* ============================================
   20. WISHLIST PAGE - Mobile
   ============================================ */
@media (max-width: 767px) {
    .wishlist-page .table-wishlist {
        display: block;
    }

    .wishlist-page .table-wishlist thead {
        display: none;
    }

    .wishlist-page .table-wishlist tbody {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .wishlist-page .table-wishlist tr {
        display: flex;
        flex-wrap: wrap;
        padding: var(--space-4);
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        border: 1px solid #f0f0f0;
        position: relative;
    }

    .wishlist-page .table-wishlist td {
        border: none !important;
        padding: var(--space-1) !important;
    }

    .wishlist-page .table-wishlist td.image {
        width: 80px;
        flex-shrink: 0;
    }

    .wishlist-page .table-wishlist td.image img {
        width: 72px !important;
        height: 72px !important;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    .wishlist-page .table-wishlist td.product-des {
        flex: 1;
        padding-left: var(--space-3) !important;
    }

    .wishlist-page .table-wishlist td.product-des h6 {
        font-size: var(--font-sm) !important;
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug) !important;
        margin-bottom: var(--space-2) !important;
    }

    .wishlist-page .table-wishlist td.price {
        width: 100%;
        margin-top: var(--space-3);
    }

    .wishlist-page .table-wishlist td.price span {
        font-size: var(--font-md) !important;
        font-weight: var(--weight-bold) !important;
        color: var(--primary, #1e3a5f);
    }

    .wishlist-page .table-wishlist td.text-right {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }

    .wishlist-page .table-wishlist td.action {
        width: 100%;
        margin-top: var(--space-3);
        display: flex;
        gap: var(--space-3);
    }

    .wishlist-page .table-wishlist td.action a,
    .wishlist-page .table-wishlist td.action button {
        flex: 1;
        text-align: center;
        padding: var(--space-3) !important;
        font-size: var(--font-xs) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-min);
    }
}


/* ============================================
   21. SHOP/PRODUCTS PAGE - Mobile
   ============================================ */
@media (max-width: 767px) {
    /* Shop Header */
    .shop-product-fillter {
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: var(--space-5) !important;
    }

    .shop-product-fillter .totall-product {
        text-align: center;
    }

    .shop-product-fillter .totall-product p {
        font-size: var(--font-sm) !important;
    }

    .shop-product-fillter .sort-by-product-area {
        width: 100%;
        justify-content: space-between;
    }

    .shop-product-fillter .sort-by-cover {
        min-width: 140px;
    }

    /* Sidebar Filters */
    .shop-sidebar {
        margin-bottom: var(--space-5);
    }

    .shop-sidebar .sidebar-widget {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
        background: #fff;
        border: 1px solid #f0f0f0;
    }

    .shop-sidebar .widget-category-2 li a {
        font-size: var(--font-sm) !important;
        padding: var(--space-3) 0 !important;
    }

    /* Pagination */
    .pagination-area {
        margin-top: var(--space-6);
        margin-bottom: var(--space-8);
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .pagination-area nav {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .pagination-area .pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .pagination-area .page-item {
        margin: 0 !important;
    }

    .pagination-area .page-item .page-link {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        font-size: var(--font-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important; /* Circular for numbers */
        background: #fff !important;
        border: 1px solid #f1f5f9 !important;
        color: #64748b !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
        transition: all 0.2s ease !important;
    }

    .pagination-area .page-item.active .page-link {
        background: var(--primary, #1e3a5f) !important;
        color: #fff !important;
        border-color: var(--primary, #1e3a5f) !important;
        box-shadow: 0 4px 10px rgba(30, 58, 95, 0.2) !important;
    }

    /* Previous & Next Buttons */
    .pagination-area .page-item:first-child .page-link,
    .pagination-area .page-item:last-child .page-link {
        width: auto !important;
        height: 40px !important;
        padding: 0 20px !important;
        border-radius: 20px !important; /* Pill shape */
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #1a1a1a !important;
    }
}


/* ============================================
   22. TABS - Mobile Horizontal Scroll
   ============================================ */
@media (max-width: 767px) {
    .nav-tabs,
    .nav-tabs.links {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: var(--space-2) !important;
        padding-bottom: var(--space-2);
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-tabs.links::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs li,
    .nav-tabs.links li {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link,
    .nav-tabs.links li a {
        font-size: var(--font-xs) !important;
        padding: var(--space-2) var(--space-4) !important;
        white-space: nowrap;
        border-radius: var(--radius-full) !important;
    }

    .nav-tabs .nav-link.active,
    .nav-tabs.links li.active a {
        background: var(--primary, #1e3a5f) !important;
        color: #fff !important;
    }
}


/* ============================================
   24. EMPTY STATES - Mobile
   ============================================ */
@media (max-width: 767px) {
    .empty-state {
        padding: var(--space-10) var(--space-5);
        text-align: center;
    }

    .empty-state img,
    .empty-state svg {
        max-width: 120px;
        margin-bottom: var(--space-5);
    }

    .empty-state h4 {
        font-size: var(--font-lg) !important;
        margin-bottom: var(--space-3) !important;
    }

    .empty-state p {
        font-size: var(--font-sm) !important;
        color: #6b7280;
        margin-bottom: var(--space-5) !important;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .empty-state .btn {
        padding: var(--space-3) var(--space-6) !important;
    }
}


/* ============================================
   26. LOGIN/REGISTER - Mobile
   ============================================ */
@media (max-width: 767px) {
    .login-page,
    .register-page {
        padding: var(--space-5) 0 var(--space-10);
    }

    .login_wrap {
        padding: var(--space-6) var(--space-4) !important;
        border-radius: var(--radius-xl) !important;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .heading_s1 h1 {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-2) !important;
        text-align: center;
    }

    .heading_s1 p {
        font-size: var(--font-sm) !important;
        text-align: center;
        margin-bottom: var(--space-5) !important;
        color: #6b7280;
    }

    .login_wrap .form-group {
        margin-bottom: var(--space-4) !important;
    }

    .login_wrap .form-group label {
        font-size: var(--font-sm) !important;
    }

    .login_wrap .form-group input {
        padding: var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
    }

    .login_wrap .login_footer {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .login_wrap .btn-login,
    .login_wrap .btn-register,
    .login_wrap .btn-submit {
        width: 100%;
        padding: var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-large);
    }

    .divider-text-center {
        margin: var(--space-5) 0 !important;
        font-size: var(--font-sm) !important;
    }

    .social-login {
        flex-direction: column;
        gap: var(--space-3) !important;
    }

    .social-login a {
        width: 100%;
        padding: var(--space-3) !important;
        font-size: var(--font-sm) !important;
        border-radius: var(--radius-md) !important;
        min-height: var(--touch-comfortable);
    }
}


/* ============================================
   27. DASHBOARD - Mobile
   ============================================ */
@media (max-width: 767px) {
    .dashboard-page {
        padding: var(--space-5) 0 var(--space-10);
    }

    .dashboard-menu {
        margin-bottom: var(--space-5);
    }

    .dashboard-menu ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
    }

    .dashboard-menu ul::-webkit-scrollbar {
        display: none;
    }

    .dashboard-menu ul li {
        flex-shrink: 0;
    }

    .dashboard-menu ul li a {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-xs) !important;
        white-space: nowrap;
        border-radius: var(--radius-full) !important;
        background: #f5f5f5;
        color: #374151;
    }

    .dashboard-menu ul li.active a {
        background: var(--primary, #1e3a5f);
        color: #fff;
    }

    .card-dashboard {
        padding: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
        margin-bottom: var(--space-4);
    }

    .card-dashboard h5 {
        font-size: var(--font-md) !important;
        margin-bottom: var(--space-4) !important;
    }

    /* Order History Table */
    .table-order {
        font-size: var(--font-xs) !important;
    }

    .table-order th,
    .table-order td {
        padding: var(--space-3) var(--space-2) !important;
    }
}


/* ============================================
   29. WISHLIST PAGE - Mobile
   ============================================ */
@media (max-width: 767px) {
    .wishlist-page {
        padding: var(--space-5) 0 var(--space-10) !important;
    }

    .wishlist-header {
        padding: var(--space-5) !important;
        margin-bottom: var(--space-5) !important;
        border-radius: var(--radius-lg) !important;
    }

    .wishlist-header h1 {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-2) !important;
    }

    .wishlist-header p {
        font-size: var(--font-sm) !important;
    }

    .wishlist-header .btn {
        width: 100%;
        margin-top: var(--space-2);
        min-height: var(--touch-min);
    }

    .wishlist-header .btn:first-of-type {
        margin-right: 0 !important;
    }

    /* Wishlist Grid - 2 Columns on Mobile */
    .wishlist-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    /* Wishlist Card Mobile */
    .wishlist-card {
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-card) !important;
    }

    .wishlist-card-content {
        padding: var(--space-4) !important;
    }

    .wishlist-card-title {
        font-size: var(--font-sm) !important;
        min-height: 40px !important;
        margin-bottom: var(--space-2) !important;
    }

    .wishlist-remove-btn {
        width: 32px !important;
        height: 32px !important;
        top: var(--space-2) !important;
        right: var(--space-2) !important;
    }

    .wishlist-discount-badge {
        top: var(--space-2) !important;
        left: var(--space-2) !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    /* Price Mobile */
    .wishlist-price .current-price {
        font-size: var(--font-lg) !important;
        margin-bottom: 2px !important;
    }

    .wishlist-price .old-price {
        font-size: var(--font-xs) !important;
    }

    .wishlist-price .save-amount {
        font-size: var(--font-xs) !important;
        display: block;
        margin-top: 2px;
    }

    /* Rating Mobile */
    .wishlist-rating {
        margin-bottom: var(--space-2) !important;
    }

    .rating-count {
        font-size: var(--font-xs) !important;
    }

    /* Stock Badge Mobile */
    .stock-badge {
        padding: 4px 10px !important;
        font-size: var(--font-xs) !important;
        border-radius: 6px !important;
    }

    .stock-badge i {
        font-size: 12px;
    }

    .wishlist-stock-status {
        margin-bottom: var(--space-3) !important;
    }

    /* Action Buttons Mobile */
    .btn-add-cart-wishlist,
    .btn-notify-me {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--font-sm) !important;
        min-height: var(--touch-min) !important;
        border-radius: var(--radius-md) !important;
    }

    .btn-add-cart-wishlist span,
    .btn-notify-me span {
        display: none !important;
    }

    .btn-add-cart-wishlist i,
    .btn-notify-me i {
        margin: 0 !important;
        font-size: 18px !important;
    }

    /* Empty State Mobile */
    .wishlist-empty-state {
        padding: var(--space-10) var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
    }

    .empty-state-icon {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: var(--space-6) !important;
    }

    .empty-state-icon i {
        font-size: 50px !important;
    }

    .wishlist-empty-state h2 {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-3) !important;
    }

    .wishlist-empty-state p {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-6) !important;
    }

    .wishlist-empty-state .btn {
        min-height: var(--touch-large) !important;
    }

    /* Pagination Mobile */
    .wishlist-pagination {
        margin-top: var(--space-6) !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .wishlist-items-grid {
        gap: var(--space-2) !important;
    }

    .wishlist-card-content {
        padding: var(--space-3) !important;
    }

    .wishlist-card-title {
        font-size: 13px !important;
    }

    .wishlist-price .current-price {
        font-size: var(--font-base) !important;
    }

    .btn-add-cart-wishlist,
    .btn-notify-me {
        padding: var(--space-2) !important;
    }
}

@media (max-width: 767px) {
    .contact-page {
        padding: var(--space-5) 0 var(--space-10);
    }

    .contact-info {
        margin-bottom: var(--space-6);
    }

    .contact-info-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }

    .contact-info-item i {
        font-size: var(--font-lg) !important;
        width: var(--touch-comfortable);
        height: var(--touch-comfortable);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(30, 58, 95, 0.1);
        border-radius: var(--radius-md);
        color: var(--primary, #1e3a5f);
        flex-shrink: 0;
    }

    .contact-info-item h5 {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-1) !important;
    }

    .contact-info-item p {
        font-size: var(--font-sm) !important;
        color: #6b7280;
    }

    .contact-form {
        padding: var(--space-5) !important;
        border-radius: var(--radius-lg) !important;
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .contact-form h4 {
        font-size: var(--font-lg) !important;
        margin-bottom: var(--space-5) !important;
    }

    .contact-form .form-group {
        margin-bottom: var(--space-4) !important;
    }

    .contact-form input,
    .contact-form textarea {
        padding: var(--space-4) !important;
        font-size: var(--font-base) !important;
        border-radius: var(--radius-md) !important;
    }

    .contact-form .btn {
        width: 100%;
        padding: var(--space-4) !important;
        font-size: var(--font-base) !important;
    }

    /* Map */
    .map-container {
        height: 200px !important;
        border-radius: var(--radius-lg) !important;
        overflow: hidden;
        margin-top: var(--space-5);
    }

    /* ============================================
       30. ORDER CONFIRMATION PAGE - Mobile
       ============================================ */
    .order-confirm-page {
        padding: var(--space-4) 0 var(--space-10) !important;
    }

    .confirm-container {
        padding: 0 var(--space-4) !important;
    }

    /* Success Header Mobile */
    .success-header {
        padding: var(--space-6) var(--space-4) !important;
    }

    .success-icon {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: var(--space-4) !important;
    }

    .success-icon i {
        font-size: 40px !important;
    }

    .success-title {
        font-size: var(--font-xl) !important;
        margin-bottom: var(--space-2) !important;
    }

    .success-message {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-4) !important;
    }

    .order-number-badge {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--font-sm) !important;
    }

    .order-number-badge strong {
        font-size: var(--font-base) !important;
    }

    /* Order Details Mobile */
    .order-details {
        padding: var(--space-5) var(--space-4) !important;
    }

    .detail-section {
        margin-bottom: var(--space-6) !important;
    }

    .section-header {
        margin-bottom: var(--space-4) !important;
        padding-bottom: var(--space-3) !important;
    }

    .section-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    .section-title {
        font-size: var(--font-lg) !important;
    }

    /* Address Card Mobile */
    .address-card {
        padding: var(--space-4) !important;
        border-radius: var(--radius-md) !important;
    }

    .address-name {
        font-size: var(--font-base) !important;
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }

    .address-type-badge {
        padding: 3px 10px !important;
        font-size: 10px !important;
    }

    .address-text {
        font-size: var(--font-sm) !important;
        margin-bottom: var(--space-2) !important;
    }

    .address-contact {
        font-size: var(--font-sm) !important;
    }

    /* Order Items Mobile */
    .order-items {
        gap: var(--space-3) !important;
    }

    .order-item {
        padding: var(--space-4) !important;
        gap: var(--space-3) !important;
        border-radius: var(--radius-md) !important;
    }

    .order-item-image {
        width: 80px !important;
        height: 80px !important;
        border-radius: var(--radius-md) !important;
    }

    .order-item-name {
        font-size: var(--font-base) !important;
        margin-bottom: var(--space-2) !important;
    }

    .order-item-meta {
        gap: var(--space-3) !important;
    }

    .order-item-price {
        font-size: var(--font-lg) !important;
    }

    .order-item-qty {
        padding: 4px 10px !important;
        font-size: var(--font-xs) !important;
    }

    /* Price Summary Mobile */
    .price-summary {
        padding: var(--space-5) var(--space-4) !important;
        border-radius: var(--radius-md) !important;
    }

    .price-row {
        padding: var(--space-2) 0 !important;
        font-size: var(--font-sm) !important;
    }

    .price-row.total {
        margin-top: var(--space-3) !important;
        padding-top: var(--space-4) !important;
        font-size: var(--font-lg) !important;
    }

    .price-row.total .price-row-value {
        font-size: var(--font-xl) !important;
    }

    /* Payment Info Mobile */
    .payment-info {
        padding: var(--space-4) !important;
        border-radius: var(--radius-md) !important;
        margin-top: var(--space-4) !important;
    }

    .payment-info-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }

    .payment-info-title {
        font-size: var(--font-base) !important;
    }

    .payment-info-text {
        font-size: var(--font-xs) !important;
        margin-top: var(--space-2) !important;
    }

    /* Action Buttons Mobile (except product page) */
    .action-buttons:not(.product-action-buttons) {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        margin-top: var(--space-6) !important;
    }

    .btn-action {
        width: 100% !important;
        min-width: auto !important;
        padding: var(--space-4) var(--space-5) !important;
        font-size: var(--font-base) !important;
        min-height: var(--touch-large) !important;
    }

    /* Extra Small Screens */
    @media (max-width: 480px) {
        .order-item {
            flex-direction: column !important;
        }

        .order-item-image {
            width: 100% !important;
            height: 200px !important;
        }

        .order-item-meta {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: var(--space-2) !important;
        }

        .success-icon {
            width: 70px !important;
            height: 70px !important;
        }

        .success-icon i {
            font-size: 35px !important;
        }

        .success-title {
            font-size: var(--font-lg) !important;
        }
    }
}