/**
 * Mobile Responsive Fixes
 * ========================
 * 1. Shop page - filters in bottom drawer
 * 2. Product images - rectangular aspect ratio
 * 3. Mobile search bar at top
 * 4. Container width consistency (1380px)
 * 5. Product cards mobile UX
 * 6. Static page layout fixes
 */

/* ===================================================================
   1. CONTAINER WIDTH CONSISTENCY - 1380px
   =================================================================== */
.container {
    max-width: 1380px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* NOTE: the rule above already applies to every ".container" on every screen
   size (width:100% handles small screens, max-width:1380px caps large ones).
   Previously there were 3 more declarations here and in container-width-fix.css
   duplicating this exact same value across different selectors/media queries —
   harmless in the end (they all agreed), but confusing and a real risk if
   anyone edits one copy without realizing 3 others still apply. Removed the
   duplicates on 2026-08-22, this is now the single source of truth. */

/* ===================================================================
   2. MOBILE HEADER CART/WISHLIST COUNT BADGES
   =================================================================== */
/* Ensure mobile header count badges are visible */
.header-action-icon-2 > a span.pro-count.white {
    background-color: #E2185E;
    position: absolute;
    right: -11px;
    top: -5px;
    color: #ffffff;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    font-weight: 500;
    font-size: 11px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 10;
}

/* ===================================================================
   3. MOBILE SEARCH BAR AT TOP
   =================================================================== */
@media (max-width: 768px) {
    /* Mobile Search Bar Container */
    .mobile-search-bar {
        display: block !important;
        background: #fff;
        padding: 6px 15px;
        border-bottom: 1px solid #e8e8e8;
        position: sticky;
        top: 0;
        z-index: 999;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .mobile-search-bar .search-form {
        display: flex;
        align-items: center;
        background: #f5f6f7;
        border-radius: 25px;
        padding: 2px 8px 2px 14px;
        border: 1px solid #e0e0e0;
        transition: all 0.2s;
    }
    
    .mobile-search-bar .search-form:focus-within {
        border-color: #2D3493;
        box-shadow: 0 0 0 3px rgba(45, 52, 147, 0.1);
    }
    
    .mobile-search-bar .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 8px 10px 8px 0;
        font-size: 14px;
        color: #2D3493;
        outline: none;
    }
    
    .mobile-search-bar .search-input::placeholder {
        color: #999;
    }
    
    .mobile-search-bar .search-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #2D3493;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    
    .mobile-search-bar .search-btn:hover,
    .mobile-search-bar .search-btn:active {
        color: #E2185E;
        transform: scale(1.1);
    }
    
    .mobile-search-bar .search-btn i {
        font-size: 18px;
    }
}

@media (min-width: 769px) {
    .mobile-search-bar {
        display: none !important;
    }
}

/* ===================================================================
   3. SHOP PAGE - FILTERS IN BOTTOM DRAWER (MOBILE)
   =================================================================== */
@media (max-width: 768px) {
    /* Hide Show/Sort UI on mobile - use bottom drawer instead */
    .shop-product-fillter .sort-by-cover {
        display: none !important;
    }
    
    /* Keep view mode toggle and product count visible */
    .shop-product-fillter {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 15px !important;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .shop-product-fillter .totall-product {
        order: 1;
        flex: 1;
    }
    
    .shop-product-fillter .totall-product p {
        margin: 0;
        font-size: 14px;
        color: #2D3493;
    }
    
    .shop-product-fillter .sort-by-product-area {
        order: 2;
        display: flex !important;
        align-items: center !important;
    }
    
    /* View Mode Toggle */
    .view-mode-toggle {
        display: flex !important;
        gap: 8px !important;
        position: static !important;
        margin: 0 !important;
    }
    
    .view-mode-toggle .view-mode {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: #fff;
        transition: all 0.2s;
    }
    
    .view-mode-toggle .view-mode i {
        font-size: 18px !important;
        color: #2D3493;
    }
    
    .view-mode-toggle .view-mode.active {
        background: #3BB77E;
        border-color: #3BB77E;
    }
    
    .view-mode-toggle .view-mode.active i {
        color: #fff;
    }
}

/* ===================================================================
   4. PRODUCT IMAGES - RECTANGULAR ASPECT RATIO
   =================================================================== */
@media (max-width: 768px) {
    /* Product Card Image Container */
    .product-cart-wrap .product-img-action-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 8px 8px 0 0;
    }
    
    .product-cart-wrap .product-img {
        aspect-ratio: 4 / 5 !important;
        overflow: hidden;
        background: #f8f9fa;
    }
    
    .product-cart-wrap .product-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* Remove extra space inside cards */
    .product-cart-wrap {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        margin-bottom: 15px !important;
        background: #fff;
    }
    
    /* Product content area */
    .product-cart-wrap .product-content-wrap {
        padding: 12px !important;
    }
    
    .product-cart-wrap .product-category {
        margin-bottom: 6px;
    }
    
    .product-cart-wrap .product-category a {
        font-size: 11px;
        color: #999;
    }
    
    .product-cart-wrap h2 {
        margin-bottom: 8px;
    }
    
    .product-cart-wrap h2 a {
        font-size: 14px !important;
        font-weight: 600;
        color: #2D3493;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-cart-wrap .product-price {
        margin-top: 8px !important;
    }
    
    .product-cart-wrap .product-price span {
        font-size: 16px !important;
        font-weight: 700;
        color: #3BB77E;
    }
    
    .product-cart-wrap .product-price .old-price {
        font-size: 13px !important;
        color: #999;
        text-decoration: line-through;
        margin-left: 6px;
    }
    
    /* ========== SHOP PAGE MOBILE FIXES ========== */
    /* Fix line height in product descriptions */
    .minimalist-product-card .minimal-product-desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .minimalist-product-card .minimal-product-title {
        line-height: 1.1rem !important;
        height: auto !important;
        min-height: 34px !important;
        margin-bottom: 6px !important;
    }
    
    /* Reduce badge size */
    .minimal-discount-badge,
    .minimal-badge {
        font-size: 9px !important;
        padding: 3px 7px !important;
        top: 8px !important;
        left: 8px !important;
    }
    
    /* Hide/reduce carousel arrows on mobile */
    .carousel-nav {
        display: none !important;
    }
    
    /* Reduce margins and padding for product images */
    .minimal-product-image {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .minimalist-product-card {
        margin-bottom: 12px !important;
        padding: 0 !important;
    }
    
    .minimal-product-info {
        padding: 10px !important;
    }
}

/* ===================================================================
   5. PRODUCT CARDS - MOBILE UX (Touch-friendly, visible icons)
   =================================================================== */
@media (max-width: 768px) {
    /* Product Grid - 2 columns with better spacing */
    .product-grid-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -8px;
    }
    
    .product-grid-3 > [class*="col-"] {
        padding: 8px !important;
    }
    
    /* Action buttons always visible on mobile - Wishlist LEFT, Cart RIGHT */
    .product-cart-wrap .product-action-1 {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px;
        margin-top: 10px;
        padding: 10px 8px 0 8px !important;
        border-top: 1px solid #f0f0f0;
    }
    
    /* Ensure wishlist button appears first (left) */
    .product-cart-wrap .product-action-1 .add-to-wishlist-btn {
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    
    /* Ensure cart button appears last (right) */
    .product-cart-wrap .product-action-1 .add-to-cart-btn {
        order: 2 !important;
        flex: 0 0 auto !important;
    }
    
    .product-cart-wrap .product-action-1 .action-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: #f5f5f5 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
    }
    
    .product-cart-wrap .product-action-1 .action-btn i {
        font-size: 18px !important;
        color: #2D3493 !important;
    }
    
    /* Wishlist button */
    .product-cart-wrap .product-action-1 .add-to-wishlist-btn:hover,
    .product-cart-wrap .product-action-1 .add-to-wishlist-btn:active {
        background: #ffe5e5 !important;
    }
    
    .product-cart-wrap .product-action-1 .add-to-wishlist-btn:hover i,
    .product-cart-wrap .product-action-1 .add-to-wishlist-btn:active i {
        color: #E2185E !important;
    }
    
    /* Add to cart button */
    .product-cart-wrap .product-action-1 .add-to-cart-btn {
        flex: 1 !important;
        background: #2D3493 !important;
        color: #fff !important;
        border-color: #2D3493 !important;
    }

    .product-cart-wrap .product-action-1 .add-to-cart-btn i {
        color: #fff !important;
    }

    .product-cart-wrap .product-action-1 .add-to-cart-btn:active {
        background: #232a75 !important;
        transform: scale(0.98);
    }
    
    /* Product badges positioning */
    .product-badges {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 5;
    }
    
    .product-badges span {
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }
    
    /* Rating stars */
    .product-cart-wrap .product-rating {
        margin-bottom: 6px !important;
    }
    
    .product-cart-wrap .product-rating i {
        font-size: 12px !important;
    }
    
    .product-cart-wrap .product-rating .review-count {
        font-size: 11px !important;
    }
}

/* ===================================================================
   6. SHOP PAGE BOTTOM NAVIGATION WITH CATEGORIES
   =================================================================== */
@media (max-width: 768px) {
    /* Shop page specific bottom bar (includes categories) */
    .shop-mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff;
        box-shadow: 0 -3px 15px rgba(0,0,0,0.1);
        z-index: 999999 !important;
        justify-content: space-around;
        align-items: center;
        height: 64px;
        border-top: 1px solid #e8e8e8;
        padding: 6px 0;
    }
    
    .shop-mobile-bottom-bar .bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 4px;
        color: #2D3493;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
        max-width: 72px;
    }
    
    .shop-mobile-bottom-bar .bar-item i {
        font-size: 22px;
        margin-bottom: 4px;
    }
    
    .shop-mobile-bottom-bar .bar-item span {
        font-size: 10px;
        font-weight: 600;
    }
    
    .shop-mobile-bottom-bar .bar-item.active,
    .shop-mobile-bottom-bar .bar-item:active {
        color: #3BB77E;
    }
}

/* ===================================================================
   7. FILTER BOTTOM DRAWER PANEL
   =================================================================== */
@media (max-width: 768px) {
    /* Filter Panel - slides up from bottom */
    .mobile-filter-panel {
        position: fixed;
        bottom: -100%;
        left: 0;
        right: 0;
        background: #fff;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
        z-index: 1000001;
        transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-filter-panel.active {
        bottom: 64px; /* Above bottom bar */
    }
    
    /* ========== PRODUCT DETAIL PAGE MOBILE FIXES ========== */
    /* Fix sidebar buttons - make them same size */
    .amazon-btn,
    .sidebar-btn-primary,
    .sidebar-btn-secondary,
    .sidebar-btn-wishlist {
        width: 100% !important;
        height: 44px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    /* Ensure equal width for Add to Cart and Buy Now */
    .amazon-btn-primary,
    .amazon-btn-secondary {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    /* Remove extra empty spaces in sidebar */
    .amazon-purchase-card {
        padding: 12px !important;
        margin: 0 !important;
    }
    
    .amazon-purchase-info-row {
        padding-top: 0 !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .amazon-actions {
        margin: 12px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Fix accordion - ensure proper close/open */
    .amazon-tab-content {
        margin-bottom: 8px !important;
    }
    
    .amazon-tab-content > * {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease !important;
        padding: 0 14px !important;
    }
    
    .amazon-tab-content.active > * {
        max-height: 9999px !important;
        padding: 14px !important;
    }
    
    .amazon-tab-content::before {
        padding: 12px 40px 12px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    .amazon-tab-content::after {
        right: 14px !important;
        top: 14px !important;
        font-size: 10px !important;
    }
    
    .filter-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e8e8e8;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
    }
    
    .filter-panel-header h4 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #2D3493;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .filter-panel-header h4 i {
        color: #3BB77E;
    }
    
    .filter-close-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #f5f5f5;
        font-size: 24px;
        color: #2D3493;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    
    .filter-close-btn:active {
        background: #e0e0e0;
        transform: scale(0.95);
    }
    
    .filter-panel-content {
        padding: 15px;
    }
    
    /* Sort options in filter panel */
    .mobile-sort-section {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mobile-sort-section h5 {
        font-size: 14px;
        font-weight: 600;
        color: #2D3493;
        margin-bottom: 12px;
    }
    
    .mobile-sort-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .mobile-sort-options .sort-option {
        padding: 10px 16px;
        background: #f5f5f5;
        border: 1px solid transparent;
        border-radius: 20px;
        font-size: 13px;
        color: #2D3493;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-sort-options .sort-option.active,
    .mobile-sort-options .sort-option:active {
        background: #e8f5e9;
        border-color: #3BB77E;
        color: #3BB77E;
        font-weight: 600;
    }
    
    /* Show options in filter panel */
    .mobile-show-section {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mobile-show-section h5 {
        font-size: 14px;
        font-weight: 600;
        color: #2D3493;
        margin-bottom: 12px;
    }
    
    .mobile-show-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .mobile-show-options .show-option {
        padding: 10px 16px;
        background: #f5f5f5;
        border: 1px solid transparent;
        border-radius: 20px;
        font-size: 13px;
        color: #2D3493;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-show-options .show-option.active,
    .mobile-show-options .show-option:active {
        background: #e8f5e9;
        border-color: #3BB77E;
        color: #3BB77E;
        font-weight: 600;
    }
    
    /* Categories Panel */
    .mobile-categories-panel {
        position: fixed;
        bottom: -100%;
        left: 0;
        right: 0;
        background: #fff;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
        z-index: 1000001;
        transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-categories-panel.active {
        bottom: 64px;
    }
    
    /* Overlay */
    .mobile-filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }
    
    .mobile-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ===================================================================
   8. STATIC PAGES LAYOUT FIXES
   =================================================================== */

/* About, Contact, Privacy Policy, Terms, Help, Purchase Guide pages —
   container width already handled by the single ".container" rule at the
   top of this file (section 1); this was a duplicate of the same value. */

/* Sidebar styling for static pages */
.static-page-sidebar {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 100px;
}

.static-page-sidebar h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2D3493;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3BB77E;
}

.static-page-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.static-page-sidebar ul li {
    margin-bottom: 8px;
}

.static-page-sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #2D3493;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s;
}

.static-page-sidebar ul li a i {
    margin-right: 10px;
    color: #3BB77E;
    width: 20px;
    text-align: center;
}

.static-page-sidebar ul li a:hover,
.static-page-sidebar ul li a.active {
    background: #e8f5e9;
    color: #3BB77E;
}

/* Static page content area */
.static-page-content {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

@media (max-width: 768px) {
    .static-page-content {
        padding: 20px 15px;
    }
    
    /* Hide sidebar on mobile, show as collapsible */
    .static-page-sidebar {
        display: none;
    }
    
    /* Full width content on mobile */
    .static-page-content-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ===================================================================
   9. LIST VIEW MOBILE FIXES
   =================================================================== */
@media (max-width: 768px) {
    .product-list-view .product-cart-wrap {
        display: flex !important;
        flex-direction: row !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    
    .product-list-view .product-img-action-wrap {
        width: 100px !important;
        min-width: 100px !important;
        flex-shrink: 0;
    }
    
    .product-list-view .product-img {
        aspect-ratio: 1/1 !important;
        border-radius: 8px !important;
        overflow: hidden;
    }
    
    .product-list-view .product-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .product-list-view .product-content-wrap {
        flex: 1 !important;
        padding-left: 12px !important;
        padding-top: 0 !important;
    }
    
    .product-list-view h2 a {
        font-size: 14px !important;
    }
}

/* ===================================================================
   10. PAGINATION MOBILE FIXES
   =================================================================== */
@media (max-width: 768px) {
    .pagination-area {
        margin-bottom: 80px !important; /* Space for bottom bar */
    }
    
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .pagination .page-link {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* ===================================================================
   11. NO OVERFLOW / CLIPPED UI ELEMENTS
   =================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }
    
    /* .container overflow-x:hidden used to live here too - same issue as responsive-fixes.css's
       .container rule: it auto-promotes overflow-y to "auto" per spec, which a few px height
       shortfall turns into a real scrollbar. html/body above already clip horizontal overflow
       page-wide, so this was redundant. */

    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }

    /* "Prevent horizontal scroll from any element" - section, .main, main used to get
       overflow-x:hidden here too, same auto-promotes-overflow-y-to-auto issue as .container
       above. html/body already clip page-wide, so every element downstream of them doesn't
       also need its own clip - removed for the same reason. */
}

/* ===================================================================
   12. MOBILE BODY PADDING FOR BOTTOM BAR
   =================================================================== */
@media (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    
    main {
        min-height: calc(100vh - 150px);
        padding-bottom: 20px;
    }
}

/* ===================================================================
   13. HERO SECTION - MOBILE HEIGHT OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    /* Reduce hero/banner section height on mobile */
    .banner-slider-section {
        padding: 0 !important;
        margin-top: 0 !important;
    }
    
    .banner-slide {
        min-height: auto !important;
        max-height: 280px !important;
    }
    
    .banner-slide-inner {
        min-height: 280px !important;
        max-height: 280px !important;
    }
    
    .banner-visual-section {
        max-height: 280px !important;
    }
    
    .banner-hero-image,
    .banner-hero-video {
        max-height: 280px !important;
        object-fit: cover !important;
    }
    
    .banner-content-section {
        padding: 15px !important;
    }
    
    .banner-content-inner {
        padding: 10px !important;
    }
    
    .banner-headline {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .banner-brand {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
    
    .banner-offer {
        font-size: 14px !important;
        padding: 5px 12px !important;
        margin-bottom: 8px !important;
    }
    
    .banner-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-bottom: 5px !important;
    }
    
    .btn-banner-cta {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .banner-disclaimer,
    .banner-cta-text {
        font-size: 10px !important;
        margin-top: 5px !important;
    }
    
    /* Slider navigation adjustments */
    .slider-nav-btn {
        width: 32px !important;
        height: 32px !important;
    }
    
    .slider-nav-btn i {
        font-size: 14px !important;
    }
}

/* ===================================================================
   14. TESTIMONIALS SECTION - MOBILE FIX (TOUCH SWIPE ENABLED)
   =================================================================== */
@media (max-width: 768px) {
    .testimonials-homepage-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        background: #f8f9fa !important;
    }
    
    .testimonials-carousel-wrapper {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        padding: 20px 0 60px !important;
    }
    
    .testimonials-carousel-track {
        display: flex !important;
        overflow: visible !important;
        transition: transform 0.5s ease-in-out !important;
        width: 100% !important;
        gap: 0 !important;
    }
    
    /* Each testimonial slide takes full width */
    .testimonial-slide {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Each card within slide */
    .testimonial-slide .testimonial-card-horizontal {
        flex: 0 0 calc(100% - 20px) !important;
        min-width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        background: #fff !important;
        border-radius: 0 !important;
        padding: 24px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        margin: 0 auto !important;
    }
    
    .testimonial-card-content {
        width: 100% !important;
    }
    
    .testimonial-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    
    .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0;
    }
    
    .testimonial-avatar img,
    .testimonial-avatar-placeholder {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .testimonial-name {
        font-size: 15px !important;
        font-weight: 600;
        margin-bottom: 2px;
    }
    
    .testimonial-product {
        font-size: 12px !important;
        color: #2D3493;
        text-align: start !important;
    }
    
    .testimonial-rating {
        margin-bottom: 10px;
    }
    
    .testimonial-rating i {
        font-size: 14px !important;
    }
    
    .testimonial-text {
        font-size: 14px !important;
        line-height: 1.5;
        color: #2D3493;
    }
    
    .testimonial-badge {
        font-size: 11px !important;
        margin-top: 10px;
    }
    
    /* Testimonials section title */
    .testimonials-homepage-section h3.section-title {
        display: block !important;
        visibility: visible !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        font-size: 24px !important;
    }
    
    .testimonials-homepage-section p {
        display: block !important;
        text-align: left !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
    }
    
    /* Navigation dots for testimonials */
    .testimonials-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .testimonials-dots .testimonial-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #ddd !important;
        transition: all 0.3s !important;
        cursor: pointer !important;
    }
    
    .testimonials-dots .testimonial-dot.active {
        background: #3BB77E !important;
        width: 24px !important;
        border-radius: 4px !important;
    }
}

/* ===================================================================
   15. SHOW/SORT UI - MOBILE IMPROVEMENT (Hide openly, use bottom drawer)
   =================================================================== */
@media (max-width: 768px) {
    /* Hide Sort/Show UI openly on mobile */
    .shop-product-fillter .sort-by-cover,
    .shop-product-fillter .sort-by-product-wrap {
        display: none !important;
    }
    
    /* Simplified filter bar - just product count and view toggle */
    .shop-product-fillter {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        gap: 10px !important;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .shop-product-fillter .totall-product {
        order: 1;
        flex: 1;
    }
    
    .shop-product-fillter .totall-product p {
        margin: 0;
        font-size: 13px;
        color: #2D3493;
    }
    
    .shop-product-fillter .sort-by-product-area {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    /* View mode toggle - compact */
    .view-mode-toggle {
        display: flex !important;
        gap: 6px !important;
    }
    
    .view-mode-toggle .view-mode {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        border: 1px solid #e0e0e0 !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .view-mode-toggle .view-mode i {
        font-size: 16px !important;
        color: #2D3493 !important;
    }
    
    .view-mode-toggle .view-mode.active {
        border-color: #3BB77E !important;
        background: #f0faf5 !important;
    }
    
    .view-mode-toggle .view-mode.active i {
        color: #3BB77E !important;
    }
}

/* ===================================================================
   16. MOBILE SEARCH BAR - ICON ONLY (NO BACKGROUND)
   =================================================================== */
@media (max-width: 768px) {
    .mobile-search-bar .search-btn {
        background: transparent !important;
        color: #2D3493 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .mobile-search-bar .search-btn:hover,
    .mobile-search-bar .search-btn:active {
        background: transparent !important;
        color: #E2185E !important;
        transform: scale(1.1) !important;
    }
}

/* ===================================================================
   17. TESTIMONIALS SECTION - ENSURE VISIBILITY ON MOBILE + FIX DOTS
   =================================================================== */
@media (max-width: 768px) {
    /* Force testimonials section to be visible */
}

/* ===================================================================
   18. NEW ARRIVALS SECTION - MOBILE ICONS FIX
   =================================================================== */
@media (max-width: 768px) {
    /* New Arrivals carousel mobile behavior */
    .new-arrivals-section .carausel-6-columns-cover {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .new-arrivals-section .carausel-6-columns-cover::-webkit-scrollbar {
        display: none !important;
    }
    
    .new-arrivals-section .carausel-6-columns {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
        padding: 10px 15px !important;
    }
    
    .new-arrivals-section .product-cart-wrap {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    
    /* REMOVE HOVER EFFECTS on New Arrivals cards (mobile) */
    .new-arrivals-section .product-cart-wrap.hover-up {
        transform: none !important;
        transition: none !important;
    }
    
    .new-arrivals-section .product-cart-wrap.hover-up:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }
    
    .new-arrivals-section .product-cart-wrap:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }
    
    /* Remove product image zoom/hover effect */
    .new-arrivals-section .product-img-zoom:hover img,
    .new-arrivals-section .product-img img:hover {
        transform: none !important;
    }
    
    .new-arrivals-section .hover-img {
        display: none !important;
    }
    
    /* Force action buttons to be ALWAYS visible on mobile */
    .new-arrivals-section .product-action-1 {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    /* Make icons smaller and touch-friendly */
    .new-arrivals-section .product-action-1 .action-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }
    
    .new-arrivals-section .product-action-1 .action-btn i {
        font-size: 16px !important;
        color: #2D3493 !important;
        margin: 0 !important;
    }
    
    /* Wishlist button hover/active */
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn:active,
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn:hover {
        background: #ffe5e5 !important;
        border-color: #E2185E !important;
    }
    
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn:active i,
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn:hover i {
        color: #E2185E !important;
    }
    
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn.active {
        background: #E2185E !important;
        border-color: #E2185E !important;
    }
    
    .new-arrivals-section .product-action-1 .add-to-wishlist-btn.active i {
        color: #fff !important;
    }
    
    /* Add to cart button - make it primary (green) */
    .new-arrivals-section .product-action-1 .add-to-cart-btn {
        flex: 1 !important;
        background: #3BB77E !important;
        border-color: #3BB77E !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .new-arrivals-section .product-action-1 .add-to-cart-btn i {
        color: #fff !important;
    }
    
    .new-arrivals-section .product-action-1 .add-to-cart-btn:active {
        background: #2a9d68 !important;
        border-color: #2a9d68 !important;
        transform: scale(0.98) !important;
    }
    
    /* Adjust product content spacing for icons */
    .new-arrivals-section .product-content-wrap {
        padding: 10px !important;
    }
    
    .new-arrivals-section .product-cart-wrap h2 {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
    
    .new-arrivals-section .product-price {
        margin-bottom: 0 !important;
    }
    
    .new-arrivals-section .product-price span {
        font-size: 14px !important;
    }
}

/* ===================================================================
   19. BEST OFFERS SECTION - MATCH NEW ARRIVALS + HORIZONTAL SCROLL
   =================================================================== */
@media (max-width: 768px) {
    /* Best Offers section - horizontal scrolling container */
    .best-offers-section {
        padding: 30px 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    }
    
    .best-offers-section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 15px !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }
    
    .best-offers-section .row::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Best Offers product cards - scroll horizontally */
    .best-offers-section .row > [class*="col-"] {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        padding: 0 !important;
    }
    
    .best-offers-section .product-cart-wrap {
        margin-bottom: 0 !important;
    }
    
    /* Force action buttons to be ALWAYS visible - same as New Arrivals */
    .best-offers-section .product-action-1 {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    /* Make icons smaller and touch-friendly */
    .best-offers-section .product-action-1 .action-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }
    
    .best-offers-section .product-action-1 .action-btn i {
        font-size: 16px !important;
        color: #2D3493 !important;
        margin: 0 !important;
    }
    
    /* Wishlist button styling */
    .best-offers-section .product-action-1 .add-to-wishlist-btn:active,
    .best-offers-section .product-action-1 .add-to-wishlist-btn:hover {
        background: #ffe5e5 !important;
        border-color: #E2185E !important;
    }
    
    .best-offers-section .product-action-1 .add-to-wishlist-btn:active i,
    .best-offers-section .product-action-1 .add-to-wishlist-btn:hover i {
        color: #E2185E !important;
    }
    
    .best-offers-section .product-action-1 .add-to-wishlist-btn.active {
        background: #E2185E !important;
        border-color: #E2185E !important;
    }
    
    .best-offers-section .product-action-1 .add-to-wishlist-btn.active i {
        color: #fff !important;
    }
    
    /* Add to cart button - primary green */
    .best-offers-section .product-action-1 .add-to-cart-btn {
        flex: 1 !important;
        background: #3BB77E !important;
        border-color: #3BB77E !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .best-offers-section .product-action-1 .add-to-cart-btn i {
        color: #fff !important;
    }
    
    .best-offers-section .product-action-1 .add-to-cart-btn:active {
        background: #2a9d68 !important;
        border-color: #2a9d68 !important;
        transform: scale(0.98) !important;
    }
    
    /* Adjust product content spacing */
    .best-offers-section .product-content-wrap {
        padding: 10px !important;
    }
    
    .best-offers-section .product-cart-wrap h2 {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
    
    .best-offers-section .product-price {
        margin-bottom: 0 !important;
    }
    
    .best-offers-section .product-price span {
        font-size: 14px !important;
    }
    
    /* Hide "View All Offers" button on mobile */
    .best-offers-section .row.mt-30 {
        display: none !important;
    }
}

/* ===================================================================
   20. SHOP PAGE - MOBILE IMPROVEMENTS (Images, Hide List View, Buttons)
   =================================================================== */
@media (max-width: 768px) {
    /* Force GRID VIEW ONLY on mobile - hide list view toggle */
    .shop-product-fillter .view-mode-toggle {
        display: none !important;
    }
    
    /* Force product grid to always show (hide list view) */
    .product-grid-3 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .product-list-view {
        display: none !important;
    }
    
    /* Shop page product images - full width within card */
    .product-grid-3 .product-cart-wrap .product-img {
        aspect-ratio: 3 / 4 !important;
        width: 100% !important;
        overflow: hidden !important;
        background: #f8f9fa !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .product-grid-3 .product-cart-wrap .product-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* Remove hover image swap behavior on mobile (performance) */
    .product-grid-3 .product-cart-wrap .hover-img {
        display: none !important;
    }
    
    /* Shop page grid spacing - 2 columns */
    .product-grid-3 > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 6px !important;
    }
    
    /* Product cards compact styling */
    .product-grid-3 .product-cart-wrap {
        background: #fff !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
        margin-bottom: 12px !important;
        min-height: auto !important;
    }
    
    .product-grid-3 .product-content-wrap {
        padding: 10px !important;
    }
    
    /* Shop page product titles - 2 lines max */
    .product-grid-3 .product-cart-wrap h2 {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* Shop page prices - compact */
    .product-grid-3 .product-price span {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    
    .product-grid-3 .product-price .old-price {
        font-size: 12px !important;
    }
    
    /* Shop page action buttons - always visible, inside card */
    .product-grid-3 .product-action-1 {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        margin-top: 6px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
    
    .product-grid-3 .product-action-1 .action-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 5px !important;
        background: #f8f8f8 !important;
        border: 1px solid #e5e5e5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    .product-grid-3 .product-action-1 .action-btn i {
        font-size: 14px !important;
        color: #2D3493 !important;
    }
    
    /* Wishlist button */
    .product-grid-3 .product-action-1 .add-to-wishlist-btn:active {
        background: #ffe5e5 !important;
        border-color: #E2185E !important;
    }
    
    .product-grid-3 .product-action-1 .add-to-wishlist-btn:active i {
        color: #E2185E !important;
    }
    
    /* Add to cart button */
    .product-grid-3 .product-action-1 .add-to-cart-btn {
        flex: 1 !important;
        background: #2D3493 !important;
        border-color: #2D3493 !important;
    }
    
    .product-grid-3 .product-action-1 .add-to-cart-btn i {
        color: #fff !important;
    }
    
    .product-grid-3 .product-action-1 .add-to-cart-btn:active {
        background: #232a75 !important;
        transform: scale(0.98) !important;
    }
    
    /* Hide product category link on mobile for space */
    .product-grid-3 .product-category {
        display: none !important;
    }
    
    /* Compact rating display */
    .product-grid-3 .product-rating {
        margin-bottom: 6px !important;
    }
    
    .product-grid-3 .product-rating i {
        font-size: 11px !important;
    }
    
    .product-grid-3 .product-rating .review-count {
        font-size: 10px !important;
    }
    
    /* Product badges - compact */
    .product-grid-3 .product-badges span {
        font-size: 9px !important;
        padding: 3px 6px !important;
        border-radius: 3px !important;
    }
}

/* ===================================================================
   21. ENSURE ALL HOVER-BASED ELEMENTS WORK ON MOBILE TOUCH
   =================================================================== */
@media (max-width: 768px) {
    /* Remove hover dependencies - make interactive elements always visible */
    .product-action-1 {
        pointer-events: auto !important;
    }
    
    .product-action-1 .action-btn {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Enable touch feedback */
    .action-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
}

/* ===================================================================
   22. HIDE TOP HEADER SEARCH BAR (MOBILE ONLY) - KEEP TOGGLE SEARCH
   =================================================================== */
@media (max-width: 768px) {
    /* Hide search bar ONLY from top header area - NOT from toggle menu */
    header .search-style-2,
    .header-action .search-style-2,
    .header-middle .search-style-2 {
        display: none !important;
    }
    
    /* Ensure toggle menu search remains visible and functional - but ONLY once the slide-out
       menu is actually open (.sidebar-visible, added by main.js on hamburger click). Without
       that qualifier this matched .mobile-header-active unconditionally (it's a static class,
       always present whether the menu is open or closed), which forced this search input
       visible+clickable 100% of the time. The rest of the closed panel is invisible (its own
       opacity:0 flattens the whole subtree), so this sat there as an invisible click target
       overlapping the real header - it was silently swallowing taps on the new search icon in
       the top nav row instead of submitting the visible search bar underneath. */
    .mobile-header-active.sidebar-visible .mobile-search,
    .mobile-header-wrapper-style.sidebar-visible .mobile-search,
    .mobile-header-active.sidebar-visible .mobile-header-content-area .mobile-search {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
}

/* ===================================================================
   23. ADD GAPS TO NEW ARRIVALS CARDS (MOBILE HORIZONTAL SCROLL)
   =================================================================== */
@media (max-width: 768px) {
    .new-arrivals-section .carausel-6-columns {
        gap: 12px !important;
        padding: 10px 12px !important;
    }
    
    .new-arrivals-section .product-cart-wrap {
        margin-right: 0 !important;
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    
    /* Ensure smooth horizontal scroll with proper spacing */
    .new-arrivals-section .carausel-6-columns-cover {
        padding: 0 !important;
    }
}

/* ===================================================================
   24. HIDE SHOP-PRODUCT-FILLTER SECTION (MOBILE ONLY)
   =================================================================== */
@media (max-width: 768px) {
    .shop-product-fillter {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===================================================================
   25. PRODUCT DETAILS PAGE - RELATED PRODUCTS ICONS FIX (MOBILE)
   =================================================================== */
@media (max-width: 768px) {
    /* Related Products section - position icons INSIDE image as overlay */
    .related-products-section .product-cart-wrap,
    .product-details-page .related-products .product-cart-wrap,
    .row.mt-60 .product-cart-wrap {
        position: relative !important;
    }
    
    /* Ensure image container is relatively positioned */
    .related-products-section .product-img-action-wrap,
    .product-details-page .related-products .product-img-action-wrap,
    .row.mt-60 .product-img-action-wrap {
        position: relative !important;
    }
    
    /* Force icons to bottom of IMAGE (overlay) - NOT card bottom */
    .related-products-section .product-action-1,
    .product-details-page .related-products .product-action-1,
    .row.mt-60 .product-action-1 {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        bottom: 10px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5 !important;
        width: auto !important;
    }
    
    /* Icon buttons - smaller size 32-36px */
    .related-products-section .product-action-1 .action-btn,
    .product-details-page .related-products .product-action-1 .action-btn,
    .row.mt-60 .product-action-1 .action-btn {
        flex: 0 0 auto !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    .related-products-section .product-action-1 .action-btn i,
    .product-details-page .related-products .product-action-1 .action-btn i,
    .row.mt-60 .product-action-1 .action-btn i {
        font-size: 14px !important;
        color: #2D3493 !important;
        margin: 0 !important;
    }
    
    /* Wishlist button */
    .related-products-section .product-action-1 .add-to-wishlist-btn:active,
    .product-details-page .related-products .product-action-1 .add-to-wishlist-btn:active,
    .row.mt-60 .product-action-1 .add-to-wishlist-btn:active {
        background: rgba(255, 229, 229, 0.98) !important;
        border-color: #E2185E !important;
    }
    
    .related-products-section .product-action-1 .add-to-wishlist-btn:active i,
    .product-details-page .related-products .product-action-1 .add-to-wishlist-btn:active i,
    .row.mt-60 .product-action-1 .add-to-wishlist-btn:active i {
        color: #E2185E !important;
    }
    
    /* Add to cart button */
    .related-products-section .product-action-1 .add-to-cart-btn,
    .product-details-page .related-products .product-action-1 .add-to-cart-btn,
    .row.mt-60 .product-action-1 .add-to-cart-btn {
        background: rgba(45, 52, 147, 0.95) !important;
        border-color: #2D3493 !important;
    }
    
    .related-products-section .product-action-1 .add-to-cart-btn i,
    .product-details-page .related-products .product-action-1 .add-to-cart-btn i,
    .row.mt-60 .product-action-1 .add-to-cart-btn i {
        color: #fff !important;
    }
    
    .related-products-section .product-action-1 .add-to-cart-btn:active,
    .product-details-page .related-products .product-action-1 .add-to-cart-btn:active,
    .row.mt-60 .product-action-1 .add-to-cart-btn:active {
        background: rgba(35, 42, 117, 0.98) !important;
        border-color: #232a75 !important;
        transform: translateX(-50%) scale(0.98) !important;
    }
}

/* ===================================================================
   26. PRODUCT DETAILS PAGE - COMPACT QUANTITY BUTTON (MOBILE)
   =================================================================== */
@media (max-width: 768px) {
    /* Reduce quantity selector size significantly */
    .detail-qty {
        min-width: auto !important;
        width: auto !important;
        max-width: 140px !important;
        height: 42px !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    
    .detail-qty .qty-down,
    .detail-qty .qty-up {
        min-width: 42px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        padding: 0 !important;
        border: none !important;
        background: #fff !important;
    }
    
    .detail-qty .qty-val {
        min-width: 50px !important;
        width: 50px !important;
        height: 42px !important;
        font-size: 16px !important;
        padding: 0 8px !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    
    /* Ensure quantity + wishlist row is properly constrained */
    .detail-qty-wishlist-row {
        max-width: 100% !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    
    /* Wishlist button - plain simple icon (no background, no border) */
    .detail-qty-wishlist-row .action-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        color: #2D3493 !important;
        transition: none !important;
    }
    
    .detail-qty-wishlist-row .action-btn:hover {
        background: transparent !important;
        color: #2D3493 !important;
        transform: none !important;
    }
    
    .detail-qty-wishlist-row .action-btn.active-wishlist,
    .detail-qty-wishlist-row .action-btn.wishlisted {
        color: #F74B81 !important;
        background: transparent !important;
    }
    
    .detail-qty-wishlist-row .action-btn i {
        font-size: 18px !important;
        transition: none !important;
    }
}

/* ===================================================================
   27. CART PAGE - MOBILE IMPROVEMENTS
   =================================================================== */
@media (max-width: 768px) {
    /* Cart product image - proper sizing */
    table.shopping-summery tbody tr td.image img,
    .cart-item-image img {
        width: 80px !important;
        height: 80px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
    
    /* Product title - reduce gap */
    table.shopping-summery tbody tr td.product-des h6,
    .cart-item-title {
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }
    
    /* Show reviews/rating section in cart - compact styling */
    table.shopping-summery tbody tr td.product-des .product-review,
    table.shopping-summery tbody tr td.product-des .product-rating,
    .cart-item-rating,
    .cart-item-reviews {
        display: block !important;
        font-size: 12px !important;
        margin: 4px 0 !important;
        color: #2D3493 !important;
    }
    
    /* Show both MRP and sale price - compact display */
    table.shopping-summery tbody tr td.product-des .product-price {
        margin-top: 4px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    
    table.shopping-summery tbody tr td.product-des .product-price .old-price {
        font-size: 13px !important;
        color: #999 !important;
        text-decoration: line-through !important;
    }
    
    table.shopping-summery tbody tr td.product-des .product-price span:not(.old-price) {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #3BB77E !important;
    }
    
    /* Quantity controls in cart - compact */
    .cart-quantity-wrapper {
        max-width: 110px !important;
        width: 110px !important;
        margin: 0 auto !important;
    }
    
    .cart-quantity-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important;
        padding: 0 !important;
    }
    
    .cart-quantity-input {
        width: 46px !important;
        height: 32px !important;
        min-width: 46px !important;
        font-size: 14px !important;
        padding: 0 6px !important;
    }
    
    /* Subtotal alignment */
    table.shopping-summery tbody tr td[data-title="Subtotal"] {
        text-align: center !important;
        padding: 8px 4px !important;
    }
    
    table.shopping-summery tbody tr td[data-title="Subtotal"] span {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    
    /* Remove excessive spacing in cart */
    table.shopping-summery tbody tr {
        padding: 12px 0 !important;
        margin-bottom: 12px !important;
    }
    
    /* Cart buttons - not full width unnecessarily */
    .cart-action .button,
    .cart-totals .button {
        max-width: 200px !important;
        margin: 0 auto !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* Cart summary card - clean spacing */
    .cart-totals {
        padding: 16px !important;
        margin-top: 20px !important;
    }
    
    .cart-totals h4 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    .cart-totals table tr td {
        padding: 8px 0 !important;
        font-size: 14px !important;
    }
    
    /* Ensure no unnecessary empty spaces */
    .cart-divider {
        margin: 8px 0 !important;
    }
}

/* ===================================================================
   28. GLOBAL PRODUCT ACTION ICONS SIZE REDUCTION (MOBILE)
   =================================================================== */
@media (max-width: 768px) {
    /* Apply to ALL product cards globally */
    .product-cart-wrap .product-action-1 .action-btn,
    .product-grid-3 .product-action-1 .action-btn,
    .new-arrivals-section .product-action-1 .action-btn,
    .best-offers-section .product-action-1 .action-btn,
    .product-list-view .product-action-1 .action-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    
    .product-cart-wrap .product-action-1 .action-btn i,
    .product-grid-3 .product-action-1 .action-btn i,
    .new-arrivals-section .product-action-1 .action-btn i,
    .best-offers-section .product-action-1 .action-btn i,
    .product-list-view .product-action-1 .action-btn i {
        font-size: 15px !important;
    }
    
    /* Exception: Cart button in horizontal layouts can be flexible */
    .new-arrivals-section .product-action-1 .add-to-cart-btn,
    .best-offers-section .product-action-1 .add-to-cart-btn {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 6px !important;
    }
}

/* ===================================================================
   29. NEW ARRIVALS - PROPER CARD GAPS (ENHANCED)
   =================================================================== */
@media (max-width: 768px) {
    .new-arrivals-section .carausel-6-columns {
        gap: 15px !important;
        padding: 10px 10px !important;
    }
    
    .new-arrivals-section .product-cart-wrap {
        margin-right: 0 !important;
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    
    /* Ensure smooth horizontal scroll with proper spacing */
    .new-arrivals-section .carausel-6-columns-cover {
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===================================================================
   30. (REMOVED — JivoChat replaced by Tawk.to)
   =================================================================== */

/* ===================================================================
   31. HOME PAGE MOBILE HORIZONTAL SCROLL SECTIONS
   =================================================================== */
@media (max-width: 768px) {
    /* Trending & Best Offers sections - Horizontal scroll on mobile */
    .new-arrivals-section .minimalist-product-grid,
    .best-offers-section .minimalist-product-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        padding-bottom: 10px !important;
        margin: 0 -5px;
        padding: 0 5px 15px 5px;
    }
    
    /* Cards in horizontal scroll */
    .new-arrivals-section .minimalist-product-card,
    .best-offers-section .minimalist-product-card {
        min-width: 160px !important;
        max-width: 160px !important;
        flex: 0 0 160px !important;
        scroll-snap-align: start;
        margin-bottom: 0 !important;
    }
    
    /* Compact card styling for horizontal scroll */
    .new-arrivals-section .minimalist-product-card,
    .best-offers-section .minimalist-product-card {
        min-height: auto !important;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    /* Image in horizontal cards */
    .new-arrivals-section .minimal-product-image,
    .best-offers-section .minimal-product-image {
        height: 140px !important;
        max-height: 140px;
    }
    
    .new-arrivals-section .minimal-img,
    .best-offers-section .minimal-img {
        height: 140px;
        object-fit: cover;
    }
    
    /* Product info compact */
    .new-arrivals-section .minimal-product-info,
    .best-offers-section .minimal-product-info {
        padding: 8px !important;
    }
    
    .new-arrivals-section .minimal-product-title,
    .best-offers-section .minimal-product-title {
        font-size: 11px !important;
        min-height: 20px !important;
        max-height: 24px;
        line-height: 1.1rem !important;
        margin-bottom: 2px !important;
    }
    
    .new-arrivals-section .minimal-product-desc,
    .best-offers-section .minimal-product-desc {
        font-size: 10px !important;
        /* min-height/max-height removed - they were clipping the description box independently
           of its actual text, so the margin-bottom below didn't reliably clear the price
           underneath (confirmed by user via devtools - removing these fixed the overlap). */
        line-height: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    
    .new-arrivals-section .minimal-price,
    .best-offers-section .minimal-price {
        margin-bottom: 4px !important;
        flex-direction: row !important;
        gap: 4px !important;
    }
    
    .new-arrivals-section .minimal-price-current,
    .best-offers-section .minimal-price-current {
        font-size: 13px !important;
    }
    
    .new-arrivals-section .minimal-price-old,
    .best-offers-section .minimal-price-old {
        font-size: 10px !important;
    }
    
    .new-arrivals-section .minimal-cart-btn,
    .best-offers-section .minimal-cart-btn {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 9px !important;
        padding: 0 6px !important;
        margin-top: 4px !important;
    }
    
    /* Hide badge size */
    .new-arrivals-section .minimal-discount-badge,
    .best-offers-section .minimal-discount-badge {
        font-size: 8px !important;
        padding: 2px 4px !important;
        top: 5px !important;
        left: 5px !important;
    }
    
    .new-arrivals-section .minimal-wishlist-btn,
    .best-offers-section .minimal-wishlist-btn {
        width: 24px !important;
        height: 24px !important;
        top: 5px !important;
        right: 5px !important;
    }
    
    .new-arrivals-section .minimal-wishlist-btn i,
    .best-offers-section .minimal-wishlist-btn i {
        font-size: 11px !important;
    }
    
    .new-arrivals-section .minimal-rating,
    .best-offers-section .minimal-rating {
        margin-bottom: 4px !important;
    }
    
    .new-arrivals-section .minimal-rating i,
    .best-offers-section .minimal-rating i {
        font-size: 9px !important;
    }
    
    /* Hide scrollbar but keep functionality */
    .new-arrivals-section .minimalist-product-grid::-webkit-scrollbar,
    .best-offers-section .minimalist-product-grid::-webkit-scrollbar {
        display: none;
    }
    
    .new-arrivals-section .minimalist-product-grid,
    .best-offers-section .minimalist-product-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Trusted Tales / Video Section - Horizontal scroll */
    .trusted-tales-section .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 10px 15px 10px !important;
    }
    
    .trusted-tales-section .row > [class*="col-"] {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        padding: 0 !important;
        scroll-snap-align: start;
    }
    
    .trusted-tales-section .video-card {
        height: 220px !important;
    }
    
    /* Hide scrollbar for video section */
    .trusted-tales-section .row::-webkit-scrollbar {
        display: none;
    }
    
    .trusted-tales-section .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Section spacing on mobile now comes entirely from .dz-section-spaced's margin-top/bottom
       (index.html) - this used to reintroduce 30px of padding here, at higher specificity than
       that rule (2 classes vs 1), so removing that padding on desktop never actually removed it
       on mobile. Same story for the heading's margin-bottom below - .section-title's own rule
       lost to this more specific one, so the heading kept its old gap on mobile only. */
    .new-arrivals-section,
    .best-offers-section,
    .trusted-tales-section {
        padding: 0 !important;
    }

    .new-arrivals-section .section-title,
    .best-offers-section .section-title,
    .trusted-tales-section .section-title {
        font-size: 18px !important;
        margin-bottom: 0 !important;
    }
    
    /* Container padding */
    .new-arrivals-section .container,
    .best-offers-section .container,
    .trusted-tales-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
}

/* Tablet view for sections - horizontal slider, same as desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .new-arrivals-section .minimalist-product-grid,
    .best-offers-section .minimalist-product-grid {
        /* keep as flex slider, handled by inline styles */
    }
}

/* ===================================================================
   32. HOME PAGE MOBILE - 2 CARDS PER ROW GRID LAYOUT
   Testimonials, Videos, Trust Assurance - All 2 per row
   Consistent 10px padding on all sections
   =================================================================== */
@media (max-width: 768px) {
    /* ===== GLOBAL SECTION PADDING - CONSISTENT 10px LEFT/RIGHT ===== */
    .main section .container,
    .trusted-tales-section .container,
    .new-arrivals-section .container,
    .best-offers-section .container,
    .testimonials-homepage-section .container,
    .trust-assurance-section .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Keep horizontal slider on mobile - DO NOT override to grid */
    /* Cards are sized 50% by the inline CSS (.product-slider-track .minimalist-product-card) */
    
    /* ===== TRUSTED TALES / VIDEO SECTION - uses .tales-slider-track, no .row ===== */
    .trusted-tales-section .tales-slider-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .trusted-tales-section .video-card {
        height: 200px !important;
    }
    
    .trusted-tales-section .video-media {
        height: 100% !important;
        object-fit: cover;
    }
    
    .trusted-tales-section .video-content {
        padding: 10px !important;
    }
    
    .trusted-tales-section .video-title {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    .trusted-tales-section .video-subtitle {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .trusted-tales-section .video-btn {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    
    .trusted-tales-section .video-badge {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }
    
    /* ===== TESTIMONIALS SECTION - ORIGINAL SINGLE CARD CAROUSEL ===== */
    .testimonials-homepage-section .testimonials-carousel-wrapper {
        overflow: hidden !important;
        width: 100% !important;
        position: relative !important;
        padding: 20px 0 60px !important;
    }
    
    .testimonials-homepage-section .testimonials-carousel-track {
        display: flex !important;
        overflow: visible !important;
        transition: transform 0.5s ease-in-out !important;
        width: 100% !important;
        gap: 0 !important;
    }
    
    /* Each slide takes full width with single card */
    .testimonials-homepage-section .testimonial-slide {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Each card within slide - full width single card */
    .testimonials-homepage-section .testimonial-slide .testimonial-card-horizontal {
        flex: 0 0 calc(100% - 20px) !important;
        min-width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        background: #fff !important;
        border-radius: 0 !important;
        padding: 20px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        margin: 0 auto !important;
    }
    
    .testimonials-homepage-section .testimonial-card-content {
        width: 100% !important;
    }
    
    .testimonials-homepage-section .testimonial-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .testimonials-homepage-section .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
    }
    
    .testimonials-homepage-section .testimonial-avatar img,
    .testimonials-homepage-section .testimonial-avatar-placeholder {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    .testimonials-homepage-section .testimonial-name {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
    }
    
    .testimonials-homepage-section .testimonial-product {
        font-size: 12px !important;
        color: #999 !important;
    }
    
    .testimonials-homepage-section .testimonial-rating {
        display: flex !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }
    
    .testimonials-homepage-section .testimonial-rating i {
        font-size: 14px !important;
        color: #ffa41c !important;
    }
    
    .testimonials-homepage-section .testimonial-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #2D3493 !important;
        margin-bottom: 12px !important;
    }
    
    .testimonials-homepage-section .testimonial-text p {
        margin: 0 !important;
    }
    
    .testimonials-homepage-section .testimonial-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        background: #e8f5e9 !important;
        color: #2e7d32 !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    /* Keep navigation dots visible */
    .testimonials-homepage-section .testimonials-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* ===== TRUST ASSURANCE SECTION - 2 PER ROW ===== */
    .trust-assurance-section .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .trust-assurance-section .row > [class*="col-"] {
        flex: unset !important;
        max-width: unset !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .trust-assurance-section .trust-item {
        padding: 15px 10px !important;
    }
    
    .trust-assurance-section .trust-icon i {
        font-size: 32px !important;
    }
    
    .trust-assurance-section .trust-title {
        font-size: 12px !important;
        line-height: 1.3;
    }
    
    /* ===== ALL SECTION TITLES - CONSISTENT SIZE ===== */
    /* This is the 4th place that was independently setting margin-bottom on the heading (found
       by disabling stylesheets one at a time and watching computed style change - a CSSOM
       .matches()-based selector scan kept missing it, false-negative, don't trust that method
       for this file again). Gap now lives on .section-slider-header/.tales-slider-header only. */
    .main section .section-title,
    .main section h3.section-title {
        font-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===================================================================
   ACCOUNT DASHBOARD - MOBILE OFFCANVAS SIDEBAR
   =================================================================== */

/* Hide desktop sidebar on mobile for all account pages */
@media (max-width: 768px) {
    .dashboard-menu {
        display: none !important;
    }
    
    /* Dashboard content full width */
    .page-content .col-lg-9.col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Reduce page padding */
    .page-content.pt-50 {
        padding-top: 15px !important;
    }
    
    .page-content.pb-50 {
        padding-bottom: 80px !important;
    }
    
    .dashboard-content.pl-30 {
        padding-left: 0 !important;
    }
}

/* Mobile Dashboard Toggle FAB - hidden; sidebar opened via bottom nav Account icon */
.mobile-dashboard-toggle {
    display: none !important;
}

/* Mobile Sidebar Overlay - Global */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
    opacity: 1;
}

/* Mobile Offcanvas Sidebar - Global */
.mobile-dashboard-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 1000001;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-dashboard-sidebar.active {
    left: 0;
}

/* Sidebar Header */
.mobile-sidebar-header {
    background: linear-gradient(135deg, #2D3493 0%, #1e2563 100%);
    padding: 20px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-sidebar-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    border: none;
    overflow: hidden;
}

.mobile-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-sidebar-user {
    flex: 1;
}

.mobile-sidebar-user h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 3px 0;
}

.mobile-sidebar-user p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin: 0;
}

.mobile-sidebar-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Sidebar Navigation */
.mobile-sidebar-nav {
    padding: 10px 0;
}

.mobile-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-sidebar-nav li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: #2D3493;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mobile-sidebar-nav a i {
    width: 20px;
    margin-right: 12px;
    font-size: 16px;
    color: #2D3493;
}

.mobile-sidebar-nav a:hover,
.mobile-sidebar-nav a.active {
    background: rgba(45, 52, 147, 0.08);
    color: #2D3493;
}

.mobile-sidebar-nav a.active {
    border-left: 3px solid #E2185E;
}

.mobile-sidebar-nav a.danger {
    color: #F74B81;
}

.mobile-sidebar-nav a.danger i {
    color: #F74B81;
}

.mobile-sidebar-nav a.danger:hover {
    background: rgba(247, 75, 129, 0.08);
}

/* Sidebar Footer */
.mobile-sidebar-footer {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    background: #f8f9fa;
}

.mobile-sidebar-footer .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #F74B81 0%, #E03A6F 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-sidebar-footer .logout-btn i {
    margin-right: 8px;
}

.mobile-sidebar-footer .logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(247, 75, 129, 0.4);
    color: #fff;
}

@media (max-width: 768px) {
    .mobile-sidebar-overlay {
        display: block !important;
    }
    
    .mobile-dashboard-sidebar {
        display: block !important;
    }
}

/* ===================================================================
   MOBILE SOCIAL ICONS - Missing container & anchor styles fix
   =================================================================== */
.mobile-social-icon {
    padding: 15px 0 10px;
    margin-top: 5px;
}

.mobile-social-icon a {
    display: inline-block;
}

.mobile-social-icon a img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    opacity: 0.8;
}
}