/* ========================================
   CUSTOM FIXES FOR CATEGORY & PRODUCT CARDS
   ======================================== */

/* Banner: prevent blank white flash while images load */
.banner-slider .swiper-slide {
    background: #f0f0f0;
}
.banner-slider .banner-img {
    min-height: 160px;
    display: block;
    width: 100%;
    object-fit: cover;
}

/* Fix Category Page Hover Overflow Issues */
@media (min-width: 992px) {

    /* Ensure ONLY category sections allow overflow for hover effects */
    section.section-b-space:has(.categories-slider.category-list) {
        overflow: visible !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    section.section-b-space:has(.categories-slider.category-list) .custom-container {
        overflow: visible !important;
    }

    /* Category List Grid - More spacing */
    section.section-b-space .categories-slider.category-list {
        overflow: visible !important;
        padding: 40px 25px !important;
        gap: 30px !important;
    }

    /* Category Box - Enhanced Hover */
    section.section-b-space .category-box {
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    section.section-b-space .category-box:hover {
        z-index: 100 !important;
        transform: translateY(-15px) scale(1.08) !important;
        box-shadow: 0 30px 60px rgba(39, 119, 252, 0.35) !important;
    }

    /* Ensure list items don't clip */
    section.section-b-space .categories-slider.category-list li {
        overflow: visible !important;
        z-index: 1;
    }

    section.section-b-space .categories-slider.category-list li:hover {
        z-index: 100;
    }

    /* Category Name - Single line, no wrap */
    .categories-slider.custom-scrollbar .category-box h5 {
        white-space: nowrap !important;
        overflow: hidden !important;
        max-width: 100% !important;
        position: relative;
        display: block;
    }

    /* Marquee animation for long category names - slow ping-pong effect */
    @keyframes marquee {
        0%, 20% {
            transform: translateX(0%);
        }

        45%, 55% {
            transform: translateX(-40%);
        }

        80%, 100% {
            transform: translateX(0%);
        }
    }

    /* Only apply marquee to text that overflows */
    .categories-slider.custom-scrollbar .category-box h5 span {
        display: inline-block;
        white-space: nowrap;
    }

    /* Apply marquee animation only when text is too long */
    .categories-slider.custom-scrollbar .category-box h5.long-text span {
        animation: marquee 6s ease-in-out infinite;
    }

    /* Desktop Product Cards - Show Add Icon ALWAYS */
    .product-box .product-content .add-icon,
    .product-box .add-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .product-box .product-content .add-icon {
        position: absolute !important;
        top: -16px !important;
        right: 10px !important;
        background: radial-gradient(70.25% 76.67% at 33.33% 28.33%, #5ba3ff 0%, #1e60f2 100%) !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 100% !important;
        z-index: 10 !important;
    }

    /* Compact Product Card - Show Add Icon */
    .compact-product-card .compact-add-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Vertical Product Cards */
    .product-box.vertical-product .add-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Like Icon - Ensure it starts unselected */
    .like-icon {
        cursor: pointer;
    }

    .like-icon .fill-icon {
        display: none !important;
    }

    .like-icon.active .fill-icon {
        display: flex !important;
        color: rgba(255, 77, 77, 1) !important;
    }

    .like-icon.active .outline-icon {
        display: none !important;
    }

    /* Compact Like Icon */
    .compact-like-icon {
        cursor: pointer;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .compact-like-icon.inactive {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .compact-like-icon .outline-icon {
        display: flex !important;
    }

    .compact-like-icon .fill-icon {
        display: none !important;
    }

    .compact-like-icon.active .fill-icon {
        display: flex !important;
        color: rgba(255, 77, 77, 1) !important;
    }

    .compact-like-icon.active .outline-icon {
        display: none !important;
    }

    /* Wishlist Remove Button - Ensure icon is visible */
    .wishlist-remove-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .wishlist-remove-btn i,
    .wishlist-remove-btn .iconsax {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================
   HOME PAGE PRODUCT SECTIONS
   ======================================== */
@media (min-width: 992px) {

    /* Swiper containers - Keep horizontal overflow hidden but allow vertical */
    .swiper.home-section-swiper {
        overflow: hidden !important;
    }

    .swiper.home-section-swiper .swiper-wrapper {
        overflow: visible !important;
    }

    .swiper.home-section-swiper .swiper-slide {
        overflow: visible !important;
    }

    /* Product grid rows */
    .row.g-3 {
        overflow: visible !important;
    }
}

/* ========================================
   DESKTOP BANNER SECTION
   ======================================== */
@media (min-width: 992px) {

    /* Desktop Banner Container - NO PADDING */
    .desktop-banner-slider {
        position: relative;
        margin: 30px 0;
        padding: 0 !important;
    }

    .desktop-banner-slider .swiper-slide {
        height: auto;
    }

    /* Big Banner (Left Side) */
    .desktop-banner-slider .big-banner {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: block;
    }

    .desktop-banner-slider .big-banner:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    /* Small Banners (Right Side) */
    .desktop-banner-slider .small-banner {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: block;
        height: 100%;
    }

    .desktop-banner-slider .small-banner:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    /* Rounded corners */
    .rounded-4 {
        border-radius: 16px !important;
    }

    /* Navigation Arrows */
    .desktop-banner-slider .swiper-button-next,
    .desktop-banner-slider .swiper-button-prev {
        width: 45px;
        height: 45px;
        background: white;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        color: #2777FC;
    }

    .desktop-banner-slider .swiper-button-next:after,
    .desktop-banner-slider .swiper-button-prev:after {
        font-size: 20px;
        font-weight: bold;
    }

    .desktop-banner-slider .swiper-button-next:hover,
    .desktop-banner-slider .swiper-button-prev:hover {
        background: #2777FC;
        color: white;
    }

    /* Pagination */
    .desktop-banner-slider .desktop-banner-pagination {
        bottom: 20px !important;
    }

    .desktop-banner-slider .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: white;
        opacity: 0.7;
        border: 2px solid #2777FC;
    }

    .desktop-banner-slider .swiper-pagination-bullet-active {
        background: #2777FC;
        opacity: 1;
    }
}


/* ========================================
   CATEGORY IMAGE FIT FIX
   ======================================== */
/* Mobile Category Images */
.categories-slider li .category-box .category-box-img .category-img {
    object-fit: contain !important;
    padding: 10px;
}

/* Desktop Category Images */
@media (min-width: 992px) {
    section.section-b-space .category-box-img img {
        object-fit: contain !important;
        padding: 15px;
    }

    /* Home page category images */
    .categories-slider.custom-scrollbar .category-box-img .category-img {
        object-fit: contain !important;
        padding: 10px;
    }
}


/* Category images - No animations, clean look */
.category-box-img {
    position: relative;
}

.category-box-img img {
    position: relative;
}


/* ========================================
   CATEGORY PAGE MOBILE GRID FIX
   ======================================== */
@media (max-width: 991px) {

    /* Prevent horizontal scroll on entire page */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Mobile: 4 columns grid for categories */
    .categories-slider.category-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px;
        padding: 15px !important;
        margin: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
    }

    .categories-slider.category-list li {
        width: auto !important;
        min-width: 0 !important;
    }

    /* Ensure parent container doesn't allow horizontal overflow */
    section.section-b-space:has(.categories-slider.category-list) {
        overflow-x: hidden;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100vw !important;
    }

    section.section-b-space:has(.categories-slider.category-list) .custom-container {
        max-width: 100%;
        overflow: hidden;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   BOTTOM MENU FIXES
   ======================================== */
/* Default: Center active indicator for buttons WITHOUT badges (Profile) */
/* FIX: Reduce bottom menu height and padding */
.bottom-menu {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    /* Optional: Add support for iPhone X+ home bar */
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
}

.bottom-menu li a {
    position: relative !important;
    display: block !important;
}

.bottom-menu li a.active::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -10px !important;
}

.bottom-menu li a.active::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -12px !important;
}


/* Ensure anchor is positioned relative for absolute badges */
/* CRITICAL: Disable ALL transitions on bottom menu to prevent sliding animation during page navigation */
.bottom-menu,
.bottom-menu li,
.bottom-menu li a,
.bottom-menu li a *,
.bottom-menu li a .iconsax,
.bottom-menu li a .iconsax svg,
.bottom-menu li a i,
.bottom-menu li a h6,
.bottom-menu li a .text-content {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.bottom-menu li a {
    position: relative !important;
}

/* Fix cart badge position - User preferred "perfect" positioning */
.bottom-menu li a .cart-badge {
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    left: auto !important;
    transform: none !important;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
    /* Prevent animation during page navigation */
    transition: none !important;
    animation: none !important;
    /* display visibility controlled by JS */
}

/* Fix wishlist badge position - Same as cart */
.bottom-menu li a .wishlist-badge,
.bottom-menu li a .nav-badge {
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    left: auto !important;
    transform: none !important;
    background: #ff6b9d;
    color: white;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    /* overridden by JS often */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0 4px;
    z-index: 10;
    /* Prevent animation during page navigation */
    transition: none !important;
    animation: none !important;
}


/* ========================================
   MANAGE ADDRESS MOBILE FIX
   ======================================== */
@media (max-width: 991px) {

    /* Fix address boxes overlapping */
    .address-listing li.address-box {
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .address-box {
        margin-bottom: 20px !important;
        overflow: visible !important;
    }
}

/* Address Management - Mobile Icons */
.address-box .address-detail .d-flex.gap-2 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.address-box .address-detail .d-flex.gap-2 a svg {
    width: 16px;
    height: 16px;
    display: block;
}

.address-box .address-detail .d-flex.gap-2 a.btn-outline-primary svg {
    stroke: #0d6efd;
}

.address-box .address-detail .d-flex.gap-2 a.btn-outline-danger svg {
    stroke: #dc3545;
}

.address-box .address-detail .d-flex.gap-2 a:hover {
    opacity: 0.8;
}

/* ========================================
   OFFCANVAS BACKDROP FIX
   ======================================== */
/* Ensure offcanvas backdrop is always clickable and properly layered */
.offcanvas-backdrop {
    z-index: 1040 !important;
    pointer-events: auto !important;
}

.offcanvas-backdrop.show {
    opacity: 0.5 !important;
}

/* Ensure sidebar offcanvas is above backdrop */
.sidebar-offcanvas {
    z-index: 1045 !important;
}

/* Prevent any element from blocking backdrop clicks */
.offcanvas-backdrop.fade.show {
    cursor: pointer;
}

/* ========================================
   HEADER LOCATION VISIBILITY FIX
   ======================================== */
.header-location {
    display: block !important;
    margin-right: auto;
    margin-left: 15px;
    z-index: 10;
}

.location-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 380px) {
    .header-location .location-info h5 {
        max-width: 80px !important;
    }
}

/* ========================================
   HOME PAGE CATEGORY SLIDER UI UPDATE
   (Squircle Shape - Like Photo)
   ======================================== */
/* Target only the Home Page slider */
.categories-slider.custom-scrollbar li .category-box .category-box-img {
    width: 76px !important;
    /* Slightly larger for better visibility */
    height: 76px !important;
    border-radius: 24px !important;
    /* Squircle shape: ~30-32% radius */
    background-color: #f3f3f3;
    /* Light subtle gray background */
    overflow: hidden;
    /* Clip image to squircle */
    padding: 0 !important;
    /* Remove internal padding so image fills space */
    margin: 0 auto;
    /* Center it */
    box-shadow: none !important;
    /* Clean look */
}

/* Category Page Specific (Mobile Grid) - Zero Padding as requested */
@media (max-width: 991px) {
    .categories-slider.category-list li .category-box .category-box-img .category-img {
        padding: 0 !important;
        /* ZERO padding for Category Page */
    }
}

/* The Image itself */
.categories-slider.custom-scrollbar li .category-box .category-box-img .category-img {
    border-radius: 0 !important;
    /* Parent handles clipping */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Ensure photo covers the entire squircle */
    padding: 1px !important;
    /* Changed from 0 to 1px as requested */
    /* Remove padding */
    background: transparent !important;
}

/* The Category Text */
.categories-slider.custom-scrollbar li .category-box h5 {
    margin-top: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

/* Adjust container spacing */
.categories-slider.custom-scrollbar {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
}

/* DESKTOP VIEW: More breathing room */
@media (min-width: 992px) {
    .categories-slider.custom-scrollbar {
        gap: 35px !important;
        /* Increased gap for desktop */
    }

    /* Fix banner section padding top 0 as requested */
    section.position-relative:has(.desktop-banner-container),
    .desktop-banner-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* MOBILE VIEW: Show 4.5 items exactly */
@media (max-width: 991px) {
    .categories-slider.custom-scrollbar {
        display: flex !important;
        gap: 10px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        padding-left: 15px !important;
        /* Start padding */
        padding-right: 15px !important;
        /* End padding */
        padding-bottom: 10px !important;
        /* Mobile: 10px padding bottom */
        justify-content: flex-start !important;
    }

    .categories-slider.custom-scrollbar li {
        flex: 0 0 auto !important;
        width: 21% !important;
        /* 4.5 items (100% / 4.7 approx) */
        min-width: 21% !important;
        scroll-snap-align: start;
    }

    /* Adjust box size relative to the flexible list item */
    .categories-slider.custom-scrollbar li .category-box .category-box-img {
        width: 70px !important;
        /* Slightly smaller to fit 4.5 items */
        height: 70px !important;
        border-radius: 22px !important;
    }
}

/* ========================================
   MOBILE TWA FIXES (Scrollbar & UI)
   ======================================== */
@media (max-width: 991px) {

    /* Hide ALL scrollbars for TWA/Native feel */
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background: transparent;
        display: none;
    }

    * {
        -ms-overflow-style: none !important;
        /* IE and Edge */
        scrollbar-width: none !important;
        /* Firefox */
    }

    /* Except for specific horizontal sliders where functionality might need it (handled by js usually, but just in case) */
}

/* Sidebar Header Styling */
.offcanvas.sidebar-offcanvas .offcanvas-header,
.offcanvas-header.sidebar-header {
    background-color: #ffffff;
    padding: 0 !important;
    /* No padding - banner fills edge-to-edge */
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

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

/* Sidebar Badges - Premium Look */
.sidebar-offcanvas .link-section li a .badge {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(238, 90, 90, 0.3) !important;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   MOBILE HEADER FIXES (STICKY TOP)
   ======================================== */
@media (max-width: 991px) {

    /* Add padding to body so content doesn't hide behind fixed header */
    body {
        padding-top: 60px !important;
    }

    /* Fixed Header Styling */
    .header,
    .product-header,
    .main-header,
    .search-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1040 !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }

    /* Product Details page header — match home/category height */
    .product-header.main-header {
        padding-top: 0 !important;
    }

    .product-header .custom-container {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .product-header .header-panel {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .product-header .header-panel h3 {
        font-size: 16px !important;
    }

    /* Fix overlap on Product Details page where content touches header */
    .product-header+.custom-container {
        margin-top: 10px !important;
    }
}

/* ========================================
   TAP TO TOP MOBILE FIX
   ======================================== */
/* Fix positioning and visibility on mobile */
.tap-to-top-box {
    position: fixed !important;
    bottom: 100px !important;
    right: 14px !important;
    left: auto !important;
    transform: scale(0);
    transition: transform 0.3s ease;
    z-index: 1040 !important;
    width: auto !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border-radius: 50px !important;
    padding: 8px 14px !important;
}

/* Show when JS sets scale(1) */
.tap-to-top-box[style*="scale(1)"] {
    transform: scale(1) !important;
}

/* Mobile Specific Adjustments */
@media (max-width: 991px) {
    .tap-to-top-box {
        bottom: 85px !important;
        right: 12px !important;
        padding: 8px 14px !important;
    }

    .tap-to-top-box .scroll-to-top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--theme-color, #2777FC);
        font-weight: 500;
        font-size: 14px;
    }

    .tap-to-top-box .scroll-to-top .arrow {
        font-size: 16px;
    }
}

/* Vertical Product Card Styles (Ported from temp template) */
.product-box.vertical-product {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    min-height: 110px;
    overflow: hidden;
}

.product-box.vertical-product .add-icon {
    top: unset;
    bottom: 5px;
    right: 10px;
}

.product-box.vertical-product .order-btn {
    position: absolute;
    top: unset;
    bottom: 10px;
    right: 10px;
    padding: 8px;
}

.product-box.vertical-product .like-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.product-box.vertical-product .like-icon .icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-box.vertical-product .like-icon .fill-icon {
    display: none;
}

.product-box.vertical-product .like-icon.active .outline-icon {
    display: none;
}

.product-box.vertical-product .like-icon.active .fill-icon {
    display: flex;
    color: #ff3939;
    /* Error/Heart color */
}

/* Animations for heart icon */
.product-box.vertical-product .like-icon.active .effect:before {
    animation: fireworkLine 0.5s linear 0.1s;
}

.product-box.vertical-product .like-icon.active .effect:after {
    animation: fireworkPoint 0.5s linear 0.1s;
}

.product-box.vertical-product .product-img {
    position: unset;
    padding: 0;
    width: 110px;
    min-width: 110px;
    height: 110px;
    min-height: 110px;
    flex-shrink: 0;
    background-color: #f9f9f9;
    border-right: 1px solid #eee;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-box.vertical-product .product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-box.vertical-product .product-content {
    position: relative;
    padding: 10px 15px;
    width: calc(100% - 110px);
}

.product-box.vertical-product .product-content h6 {
    margin-bottom: 5px;
    font-size: 13px;
    color: #999;
}

.product-box.vertical-product .product-content h5 {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.product-box.vertical-product .product-content .quantity-content {
    margin-top: -8px;
}

.product-box.vertical-product .product-content .bottom-content .price {
    font-size: 16px;
    font-weight: 600;
    color: #2777FC;
    /* Theme color */
}

.product-box.vertical-product .product-content .bottom-content .price del {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin-left: 5px;
}

/* ========================================
   ACCOUNT PAGE - PROFILE LISTING FIX
   ======================================== */
/* Fix profile-box icons not centered above text */
@media (max-width: 991.98px) {
    .profile-wrapper .profile-listing li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }

    .profile-wrapper .profile-listing li .profile-box {
        margin: 0 auto;
    }
}

/* ========================================
   MOBILE HEADER BRAND LOGO FIX
   ======================================== */
/* Fix hamburger icon and brand logo overlapping on mobile */
@media (max-width: 991px) {

    /* The brand-logo should NOT have the fixed width of icon buttons */
    .header .head-content a.brand-logo {
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-left: 10px !important;
        /* Space after hamburger */
    }

    /* Ensure sidebar button maintains position */
    .header .head-content .sidebar-btn {
        flex-shrink: 0;
    }

    /* Ensure proper flex alignment in head-content */
    .header .head-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0 !important;
        /* We'll handle spacing manually */
    }

    /* Brand logo text styling */
    .header .head-content a.brand-logo h3.logo {
        font-size: 18px !important;
        white-space: nowrap;
    }

    /* Right side actions container */
    .header .head-content .ms-auto {
        margin-left: auto !important;
        flex-shrink: 0;
    }
}

/* ========================================
   DESKTOP PRODUCT SIZING FIX
   ======================================== */
@media (min-width: 992px) {

    /* Prevent product cards from becoming too huge, but let them fill their slot */
    .compact-product-card,
    .vertical-product,
    .product-box {
        width: 240px !important;
        /* Force standard width */
        max-width: 100% !important;
        /* Safety */
        margin: 0 auto;
        /* Center in slide */
    }

    /* Override global CSS that might be forcing 100% width on slides */
    .swiper-slide {
        width: auto !important;
        display: flex;
        justify-content: center;
    }
}

/* ========================================
   NOT IN YOUR AREA OVERLAY (Swiggy-style)
   ======================================== */
#notInAreaOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.not-in-area-content {
    text-align: center;
    max-width: 400px;
    padding: 40px 30px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.not-in-area-icon {
    margin-bottom: 24px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.not-in-area-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.not-in-area-subtitle {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

.not-in-area-subtitle strong {
    color: #FF6B35;
    font-weight: 600;
}

.not-in-area-content .btn-primary {
    background: linear-gradient(135deg, #FF6B35 0%, #f85a21 100%);
    border: none;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.35);
    transition: all 0.3s ease;
}

.not-in-area-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 107, 53, 0.45);
}

/* Empty Area Message (for individual sections) */
.empty-area-msg {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px 20px;
    margin: 10px 0;
}

.empty-area-msg i {
    color: #adb5bd;
    display: block;
    margin-bottom: 10px;
}

.empty-area-msg p {
    margin: 0;
    font-size: 14px;
}

/* ========================================
   PRODUCT CARD TEXT CLAMP & PREMIUM STYLING
   ======================================== */
/* Base text clamp for product cards */
.product-text-clamp {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word;
}


/* ========================================
   ADDRESS FIELD SHAKE VALIDATION ANIMATION
   ======================================== */
@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-7px); }
    30%       { transform: translateX(7px); }
    45%       { transform: translateX(-5px); }
    60%       { transform: translateX(5px); }
    75%       { transform: translateX(-3px); }
    90%       { transform: translateX(3px); }
}

.field-shake {
    animation: field-shake 0.45s ease-in-out !important;
}

.form-control.is-invalid + .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block !important;
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

/* ========================================
   PRODUCT CARD IMAGE FIT FIX
   ======================================== */
/* Override style.css flex-centering and padding */
.product-box .product-img {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    height: 120px !important;
    padding: 0 !important;
    background: #f8f9fa;
}

/* Target only product images (class .img) - NOT heart/badge icons */
.product-box .product-img img.img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

/* Badge ribbon stays on top */
.product-box .product-img .badge-img {
    position: absolute !important;
    z-index: 5 !important;
    pointer-events: none;
    width: auto !important;
    height: auto !important;
    top: 10px !important;
    left: 10px !important;
}

/* Like icon stays at top-right, not full size */
.product-box .product-img .like-icon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    z-index: 6 !important;
}

/* ========================================
   PREMIUM PRODUCT CARD REDESIGN
   ======================================== */

/* Card base - clean white with premium shadow */
.product-box {
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.product-box:active {
    transform: scale(0.97) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Like icon - circular frosted glass button */
.product-box .product-img .like-icon {
    background: rgba(255, 255, 255, 0.88) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(4px) !important;
}

.product-box .product-img .like-icon img.icon {
    width: 15px !important;
    height: 15px !important;
    position: static !important;
    object-fit: contain !important;
}

/* Content area */
.product-box .product-content {
    padding: 8px 9px 22px !important;
    background: #ffffff !important;
    position: relative !important;
}

/* Discount pill - small red pill in content area (no longer over the image) */
.product-discount-pill {
    display: inline-block;
    background: linear-gradient(135deg, #ff4444 0%, #ff2d2d 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 20px;
    margin-bottom: 4px;
    line-height: 1.5;
}

/* ── PRODUCT CARD TYPOGRAPHY (FINAL) ── */

/* h6 = Product Name: blue, bold, 1-line */
.product-box .product-content h6.content-color {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #4f86f7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0em !important;
    margin-bottom: 3px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* h5 = Description: muted grey, medium weight */
.product-box .product-content a h5,
.product-box .product-content h5.title-color {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #76787d !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
    min-height: unset !important;
    text-decoration: none !important;
    letter-spacing: 0em !important;
}

/* ApnyDukan brand tag - positioned bottom-right of card */
.product-box {
    position: relative !important;
}
.product-box::after {
    content: none !important;
    display: none !important;
}
.apnydukan-card-tag {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 18px;
    background: #f0f1f3;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 0 14px 0;
    z-index: 2;
    pointer-events: none;
}

/* Hide tag on vertical (recommended/cart) product cards */
.vertical-product .apnydukan-card-tag,
.product-box.vertical-product .apnydukan-card-tag {
    display: none !important;
}

/* Star rating tighter */
.product-box .product-content .rating-list {
    margin: 2px 0 4px !important;
    padding: 0 !important;
}

.product-box .product-content .rating-list li img {
    width: 11px !important;
    height: 11px !important;
}

/* Price row */
.product-box .product-content .bottom-content .price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111 !important;
    gap: 5px !important;
    align-items: baseline !important;
}

.product-box .product-content .bottom-content .price del {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #b0b0b0 !important;
}

/* Add-to-cart button - premium blue circle */
.product-box .product-content .add-icon {
    background: linear-gradient(135deg, #2777FC 0%, #1a60dd 100%) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(39, 119, 252, 0.38) !important;
    transition: box-shadow 0.2s ease !important;
}

.product-box .product-content .add-icon img {
    width: 14px !important;
    height: 14px !important;
    filter: brightness(0) invert(1) !important;
}

/* Out-of-stock badge */
.product-box .product-content .badge.bg-danger {
    font-size: 9px !important;
    padding: 3px 7px !important;
    border-radius: 20px !important;
}

/* ========================================
   BADGE SMALL PILL ON IMAGE + CARD HEIGHT FIX
   ======================================== */

/* Badge: small modern pill on top-left of image, doesn't cover much */
.product-box .product-img .badge-img {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 6 !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #ff4444 0%, #e02020 100%) !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
    clip-path: none !important;
    box-shadow: 0 1px 5px rgba(220, 30, 30, 0.35) !important;
}

.product-box .product-img .badge-img span {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

/* h5 description: 2-line clamp for card height alignment */
.product-box .product-content a h5.title-color,
.product-box .product-content h5.title-color {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 33px !important;
    min-height: 33px !important;
    line-height: 1.4 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #76787d !important;
    letter-spacing: 0em !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* ========================================
   PRODUCT CARD - COMPREHENSIVE FIXES
   ======================================== */

/* 1. IMAGE CONTAINER: aspect-ratio 1:1 so square images fill width too */
.product-box .product-img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

/* 2. BADGE: restore original chevron/ribbon shape, keep small */
.product-box .product-img .badge-img {
    clip-path: polygon(100% 0, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0) !important;
    border-radius: 0 !important;
    padding: 2px 14px 2px 8px !important;
    height: 20px !important;
    width: auto !important;
    background: #e52b2b !important;
    background-image: none !important;
    box-shadow: none !important;
    top: 10px !important;
    left: 0 !important;
}

.product-box .product-img .badge-img span {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

/* 3. h6 name label: 1-line, consistent */
.product-box .product-content h6.content-color {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #4f86f7 !important;
    letter-spacing: 0em !important;
}

/* 4. CATEGORY PAGE/HOME SLIDER: Uniform width for category boxes and 1-line text */
@media (min-width: 992px) {
    .categories-slider li {
        width: 100px !important;
        display: inline-block !important;
    }
    .categories-slider .category-box {
        width: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}
.categories-slider .category-box h5 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* 5. SPACING: tighten gap between title -> stars -> price */
.product-box .product-content a {
    display: block !important;
    margin-bottom: 0 !important;
}

.product-box .product-content .rating-list {
    margin: 1px 0 2px !important;
    padding: 0 !important;
}

.product-box .product-content .bottom-content {
    margin-top: 2px !important;
    padding-top: 0 !important;
}

.product-box .product-content .bottom-content .price {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ========================================
   SEARCH PAGE - RESULTS TITLE MOBILE FIX
   Prevents #resultsTitle from going behind
   the fixed .search-header
   ======================================== */
@media (max-width: 991px) {
    /* The search-header is fixed, so content beneath it needs extra top spacing */
    #search-page-wrapper .search-header {
        height: auto;
    }

    /* Push the content sections below the fixed search bar */
    #search-page-wrapper > section:not(.search-header) {
        position: relative;
        z-index: 1;
    }

    /* Specific fix: results title and product grid need visible spacing below the ~60px fixed search bar */
    #search-page-wrapper .section-b-space.d-lg-none {
        padding-top: 70px !important;
    }

    #search-page-wrapper .title#resultsTitle {
        padding-top: 0;
        margin-top: 0;
    }

    #search-page-wrapper .title#resultsTitle h3 {
        font-size: 16px;
        font-weight: 600;
    }
}

/* ========================================
   FOUC (Flash of Unstyled Content) FIX
   Prevents white flash / bare icons before
   page fully loads — ALL pages covered
   Primary blocker is in <head> inline style
   This CSS reinforces it for deeper elements
   ======================================== */
body:not(.page-loaded) .header,
body:not(.page-loaded) .product-header,
body:not(.page-loaded) .search-header,
body:not(.page-loaded) .bottom-menu,
body:not(.page-loaded) .sidebar-offcanvas,
body:not(.page-loaded) .main-content,
body:not(.page-loaded) #search-page-wrapper,
body:not(.page-loaded) section:not(.loader-wrapper),
body:not(.page-loaded) .custom-container,
body:not(.page-loaded) .categories-slider,
body:not(.page-loaded) .category-box,
body:not(.page-loaded) .product-box,
body:not(.page-loaded) .banner-slider,
body:not(.page-loaded) .fixed-btn-grp,
body:not(.page-loaded) .product-content-section,
body:not(.page-loaded) .product-style-image,
body:not(.page-loaded) .desktop-product-layout,
body:not(.page-loaded) .offcanvas,
body:not(.page-loaded) .panel-space,
body:not(.page-loaded) .title {
    opacity: 0 !important;
}

body.page-loaded .header,
body.page-loaded .product-header,
body.page-loaded .search-header,
body.page-loaded .bottom-menu,
body.page-loaded .sidebar-offcanvas,
body.page-loaded .main-content,
body.page-loaded #search-page-wrapper,
body.page-loaded section:not(.loader-wrapper),
body.page-loaded .custom-container,
body.page-loaded .categories-slider,
body.page-loaded .category-box,
body.page-loaded .product-box,
body.page-loaded .banner-slider,
body.page-loaded .fixed-btn-grp,
body.page-loaded .product-content-section,
body.page-loaded .product-style-image,
body.page-loaded .desktop-product-layout,
body.page-loaded .offcanvas,
body.page-loaded .panel-space,
body.page-loaded .title {
    opacity: 1 !important;
    transition: opacity 0.1s ease-in;
}

/* Ensure the loader itself remains visible */
.loader-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Skeleton screens stay visible during FOUC hiding */
.skeleton-screen {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Hide skeleton once page is loaded */
body.page-loaded .skeleton-screen {
    display: none !important;
}

/* Also ensure PWA install banner stays visible once shown */
#pwaInstallBanner {
    visibility: visible !important;
}

/* Skeleton Shimmer for Filtering State */
.filtering-active {
    pointer-events: none;
}
.filtering-active .product-img::after,
.filtering-active .product-detail::after,
.filtering-active .d-flex.flex-column.px-3::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: skShimmer 1.2s infinite;
    z-index: 10;
    border-radius: inherit;
}
.product-box, .product-item-desktop { position: relative; overflow: hidden; }

/* ========================================
   MOBILE PRODUCT CARD SPACING REFINEMENTS
   ======================================== */
@media (max-width: 991.98px) {
    /* Adjust add-icon positioning exactly to user spec, excluding vertical products */
    .product-box:not(.vertical-product) .add-icon {
        top: -20px !important;
    }
    
    /* Ensure vertical product add icon stays cleanly in bottom right corner where it belongs */
    .product-box.vertical-product .add-icon {
        top: unset !important;
        bottom: 5px !important;
        right: 10px !important;
    }
    
    /* Update padding bottom for tighter bottom row alignment to 10px */
    .product-box .product-content {
        padding-bottom: 10px !important;
    }
    
    .product-box.vertical-product .product-content {
        padding-bottom: 10px !important;
    }

    /* Force hide our custom desktop description on mobile */
    .desktop-desc {
        display: none !important;
    }
}

/* Enforce exactly 2 lines (dedicated space) for the description on desktop explicitly */
@media (min-width: 992px) {
    .desktop-desc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-overflow: ellipsis !important;
        height: 36px !important; /* Forces dedicated 2-row layout (13px * 1.4 * 2) */
        min-height: 36px !important;
    }
}