/* Mobile Optimizations for Bommakada */

@media only screen and (max-width: 767px) {

    /* --- General Layout & Spacing --- */
    .pt_120 {
        padding-top: 40px !important;
    }

    .pb_120 {
        padding-bottom: 40px !important;
    }

    .pt_160 {
        padding-top: 50px !important;
    }

    .pb_130 {
        padding-bottom: 50px !important;
    }

    .pt_60 {
        padding-top: 30px !important;
    }

    .pb_80 {
        padding-bottom: 30px !important;
    }

    .mb_50 {
        margin-bottom: 30px !important;
    }

    /* --- Header & Search --- */
    .header-top {
        display: none;
    }

    /* Hide top bar on mobile */

    .main-header .outer-box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap !important;
        /* Force single row */
        padding: 5px 0;
        position: relative;
        /* For toggler absolute positioning */
    }

    /* Logo - Compact */
    .main-header .logo-box {
        padding: 0;
        width: auto;
        flex: 0 0 auto;
        margin-right: 5px;
    }

    .main-header .logo-box img {
        max-width: 40px;
        /* Small icon size */
        height: auto;
    }

    /* Hide Support Box (Phone Number) on Mobile to free up space */
    .main-header .support-box {
        display: none !important;
    }

    /* Menu Area - Wrapper for Toggler */
    /* Ensure it takes space for the hamburger menu */
    .menu-area {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        padding: 0;
        margin: 0;
        overflow: visible;
        order: 1;
        /* Ensure it is first */
        display: flex;
        align-items: center;
    }

    /* Right Content - Flex Container for Search + Icons */
    .main-header .menu-right-content {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        padding: 0;
        flex: 0 0 auto;
        /* Changed from 1 1 auto */
        /* Take remaining space */
        flex-direction: row;
        /* Inline */
        width: auto;
        order: 3;
        /* Added for reordering */
    }

    /* Hide Search Box Completely on Mobile as requested */
    .main-header .search-box {
        display: none !important;
    }

    /* Ensure Icon List is still visible for Wishlist/Other but search input is gone */
    /* Search Bar - Flexible */
    /* The original .main-header .search-box rule is now effectively hidden by the above rule */
    /* The following rules for search-box are kept for completeness but won't apply if display: none */
    .main-header .search-box {
        width: auto !important;
        flex: 1 1 auto;
        margin: 0;
        position: relative;
    }

    .main-header .search-box .form-group {
        margin-bottom: 0;
    }

    .main-header .search-box .form-group input[type="search"] {
        height: 34px;
        /* Compact height */
        font-size: 13px;
        padding: 0 35px 0 10px;
        /* Make room for icon */
        border-radius: 4px;
        /* Slightly squarer or rounded */
    }

    .main-header .search-box .form-group button[type="submit"] {
        height: 30px;
        width: 30px;
        top: 2px;
        right: 2px;
        line-height: 30px;
        background: transparent;
        /* Cleaner look inside input */
        color: var(--theme-color);
    }

    /* Icons */
    .main-header .option-list {
        display: flex;
        gap: 8px;
        /* Compact gap */
        margin-right: 35px;
        /* Space for Toggler */
    }

    .main-header .option-list li {
        font-size: 16px;
        /* Slightly smaller icons */
    }

    .main-header .option-list li button,
    .main-header .option-list li a {
        color: #333;
    }

    /* Hide Category Toggle on Mobile */
    .main-header .option-list li.category-toggle {
        display: none !important;
    }

    /* --- Featured Section (2 Columns) --- */
    .featured-block {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 5px;
        /* Reduce gutter */
    }

    .featured-block-one .inner-box {
        padding: 15px;
    }

    .featured-block-one .inner-box .image-box {
        position: relative;
        width: 100%;
        height: 120px;
        /* Limit height */
        margin-bottom: 10px;
    }

    .featured-block-one .inner-box .image-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .featured-block-one .inner-box .text-box h2 {
        font-size: 18px !important;
        line-height: 1.2;
    }

    .featured-block-one .inner-box .text-box h4 {
        font-size: 14px !important;
    }

    .featured-block-one .inner-box .text-box .theme-btn {
        padding: 5px 15px;
        font-size: 12px;
        line-height: 24px;
    }

    /* --- Popular & Carousels --- */
    .popular-product .shop-block-one .inner-box .image-box img {
        height: 200px !important;
    }

    .category-block-one .inner-box .image-box img {
        width: 120px !important;
        height: 120px !important;
    }

    /* --- Headings --- */
    .sec-title h2 {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    /* --- Footer --- */
    .main-footer {
        padding: 40px 0 80px;
        /* Add bottom padding for fixed nav */
    }

    .footer-bottom .bottom-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding-bottom: 60px;
        /* Extra space */
    }

    /* --- Bottom Navigation Bar --- */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        height: auto;
        /* Allow growth */
        min-height: 60px;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
        /* Fix for iPhone Home Bar */
        border-top: 1px solid #eee;
    }

    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #333;
        /* Darker Text */
        font-size: 11px;
        font-weight: 600;
        /* Bolder Text */
        flex: 1;
        padding: 8px 0;
        /* consistent padding */
        position: relative;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 20px;
        margin-bottom: 4px;
        color: #333;
        display: block;
        /* Ensure it takes space */
        line-height: 1;
    }

    /* Specific Icons Fixes if using font-awesome or custom */
    .mobile-bottom-nav .nav-item i.fas,
    .mobile-bottom-nav .nav-item i.far {
        font-family: "Font Awesome 5 Pro";
        /* Ensure correct font family */
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--theme-color);
    }

    .mobile-bottom-nav .nav-item.active i {
        color: var(--theme-color);
    }

    .mobile-bottom-nav .icon-wrapper {
        position: relative;
        display: inline-block;
    }

    .mobile-bottom-nav .count {
        position: absolute;
        top: -5px;
        right: -8px;
        background: var(--theme-color);
        color: #fff;
        font-size: 9px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        font-weight: bold;
    }

    /* --- Rearrange Header for App-Like Feel --- */
    /* 1. Toggler Left - Ensure Visible & Clean */
    .menu-area .mobile-nav-toggler {
        position: relative;
        order: 1;
        margin-right: 15px;
        margin-top: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 30px;
        height: 30px;
        background: transparent !important;
        border: none;
    }

    .menu-area .mobile-nav-toggler i {
        color: #333 !important;
        font-size: 24px !important;
        display: block;
    }

    /* Remove old icon-bar rule or keep as fallback (but HTML changed) */
    .menu-area .mobile-nav-toggler .icon-bar {
        display: none !important;
    }

    /* Remove any weird pseudo elements if they exist */
    .menu-area .mobile-nav-toggler::before,
    .menu-area .mobile-nav-toggler::after {
        display: none !important;
    }

    /* 2. Logo Center */
    .main-header .logo-box {
        order: 2;
        /* Middle */
        flex: 1;
        /* Take space to push others */
        text-align: center;
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .main-header .logo-box img {
        max-width: 110px;
        /* Optimal size */
        height: auto;
    }

    /* 3. Right Content Clean Up */
    .main-header .menu-right-content {
        order: 3;
        /* Last */
        flex: 0 0 auto;
        justify-content: flex-end;
        width: auto;
        padding-right: 5px;
    }

    /* Hide Redundant Top Icons on Mobile (Cart & User are in Bottom Nav) */
    /* Keep Heart (Wishlist) and Search if exists */
    .main-header .option-list {
        margin-right: 0;
        /* Remove old spacer */
    }

    .main-header .option-list li.shop-cart,
    .main-header .option-list li a[href*="login"],
    .main-header .option-list li a[href*="account"] {
        display: none !important;
    }

    /* Ensure Header Container Alignment */
    .main-header .outer-box {
        justify-content: space-between;
        align-items: center;
        height: 60px;
        /* Fixed header height */
    }

    /* Fix Scroll to Top Overlap with Bottom Nav */
    .scroll-to-top {
        bottom: 80px !important;
        /* Lift above the 60px bottom nav */
    }

    /* --- Latest Media / News Section Fix --- */
    /* Override inline style 'flex: 0 0 20%' which squashes items on mobile */
    .news-section .news-block {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }

    .news-section .news-block .image-box img {
        height: auto !important;
        /* Let image scale naturally */
        min-height: 200px;
    }

    /* --- Category Carousel 1: "Story Circle" Style --- */
    .category-carousel .category-block-one .inner-box {
        text-align: center !important;
        /* Center Align Content under Image */
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .category-carousel .category-block-one .inner-box .image-box {
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
        /* Inline-block allows centering */
        text-align: center;
    }

    .category-carousel .category-block-one .inner-box .image-box figure.image img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
        /* Circle */
        object-fit: cover !important;
        border: 2px solid var(--theme-color) !important;
        padding: 2px;
        box-shadow: none !important;
        margin: 0 auto !important;
        /* Center the image */
    }

    .category-carousel .category-block-one .inner-box .image-box .shape {
        display: none !important;
    }

    .category-carousel .category-block-one .inner-box h4 {
        font-size: 14px !important;
        line-height: 1.2;
        margin-top: 5px;
        text-align: center;
        /* Center the name under the circle */
        padding-left: 0;
    }

    /* --- Category Carousel 2: "Square Card" Style --- */
    .category-carousel-2 .category-block-one .inner-box {
        text-align: center !important;
        /* Center Align Content under Image */
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .category-carousel-2 .category-block-one .inner-box .image-box {
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
        text-align: center;
    }

    /* Square Shape for Second Section */
    .category-carousel-2 .category-block-one .inner-box .image-box figure.image img {
        width: 130px !important;
        /* Larger for 2-column */
        height: 130px !important;
        border-radius: 15px !important;
        /* Soft Square */
        object-fit: cover !important;
        border: none !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 0;
        margin: 0 auto !important;
        /* Center the image */
    }

    .category-carousel-2 .category-block-one .inner-box .image-box .shape {
        display: none !important;
    }

    .category-carousel-2 .category-block-one .inner-box h4 {
        font-size: 14px !important;
        line-height: 1.4;
        margin-top: 8px;
        font-weight: 600;
        text-align: center;
        /* Center the name under the square */
        padding-left: 0;
    }
}

/* --- Popular Product & Top Selling Card Style --- */
.content-box.pl_40 {
    padding-left: 0 !important;
    /* Remove large padding on mobile */
    padding-right: 0 !important;
}

.popular-product .shop-block-one .inner-box,
.content-box.pl_40 .shop-block-one .inner-box {
    border: 1px solid #ddd !important;
    border-radius: 8px;
    padding: 5px;
    margin-bottom: 20px;
    background: #fff;
}

.popular-product .shop-block-one .image-box img,
.content-box.pl_40 .shop-block-one .image-box img {
    height: 150px !important;
    /* Limit height for 2-col layout */
    object-fit: contain !important;
}

.popular-product .shop-block-one .lower-content span.text,
.content-box.pl_40 .shop-block-one .lower-content span.text {
    font-size: 10px;
}

.popular-product .shop-block-one .lower-content h4 {
    font-size: 13px !important;
    line-height: 1.3;
    height: 35px;
    /* Fixed height for alignment */
    overflow: hidden;
}

.popular-product .shop-block-one .lower-content .price {
    font-size: 14px;
    font-weight: 700;
}

.category-carousel-2 .category-block-one .inner-box h4 a {
    display: block;
    white-space: normal;
    overflow: hidden;
}

/* --- Select from Collection (Horizontal Scroll on Mobile) --- */
@media only screen and (max-width: 767px) {

    /* Target the specific row structure with clearfix */
    .collection-section .tabs-content .tab .row.clearfix,
    .collection-section .tab .row.clearfix {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide scrollbar completely */
    .collection-section .tab .row::-webkit-scrollbar {
        display: none;
    }

    .collection-section .tab .row {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    /* Override Bootstrap col-sm-12 which forces 100% width */
    .collection-section .collection-block.col-sm-12,
    .collection-section .collection-block {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        width: 50% !important;
        scroll-snap-align: start;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Card styling */
    .collection-section .collection-block-one .inner-box {
        border: 1px solid #ddd !important;
        border-radius: 8px;
        padding: 8px;
        background: #fff;
        height: 100%;
        margin-bottom: 0;
    }

    .collection-section .collection-block-one .image-box img {
        height: 120px !important;
        width: 120px !important;
        object-fit: cover !important;
    }

    .collection-section .collection-block-one .lower-content h4 {
        font-size: 13px !important;
        line-height: 1.3;
        margin-top: 8px;
        text-align: center;
    }

    .collection-section .collection-block-one .lower-content h5 {
        font-size: 14px !important;
        font-weight: 700;
        text-align: center;
    }

    /* --- New Arrivals Section (2-item horizontal) --- */
    /* Remove container padding that constrains width */
    .shop-section.style-two .auto-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .shop-section.style-two .four-item-carousel {
        margin-left: 0 !important;
        margin-right: 0 !important;

        /* --- Spacing Fixes for Category Sections --- */
        /* Reduce bottom padding of the first category section */
        .category-section.centred.pt_120.pb_85 {
            padding-top: 60px !important;
            padding-bottom: 20px !important;
        }

        /* Reduce spacing for the second category section (Shop by Category) */
        .category-section.centred.pt_0.pb_85 {
            padding-bottom: 40px !important;
        }

        /* Reduce margin below section titles */
        .sec-title.mb_50 {
            margin-bottom: 30px !important;
        }

        .category-section .large-container .sec-title.mb_50 {
            margin-bottom: 20px !important;
        }

        /* --- Shop Page Mobile Optimization (2-Column Grid) --- */

        /* 1. Flex Container for Main Area */
        .shop-page-section .row.clearfix {
            display: flex;
            flex-direction: column;
        }

        /* 2. Move Sidebar to Bottom */
        .shop-page-section .sidebar-side {
            order: 2;
            /* Content first, sidebar second */
            margin-top: 30px;
        }

        .shop-page-section .content-side {
            order: 1;
            padding: 0 !important;
        }

        /* 3. Product Container - Force CSS GRID (The Ultimate Fix) */
        .shop-page-section .our-shop .item-shorting .left-column {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            /* Force 2 columns */
            gap: 15px !important;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;

            /* Reset Flex/Float properties */
            flex-direction: unset !important;
            flex-wrap: unset !important;
            align-items: start !important;
            position: relative !important;
        }

        /* Clearfix hack */
        .shop-page-section .our-shop .item-shorting .left-column::after {
            content: "" !important;
            display: table !important;
            clear: both !important;
        }

        /* 4. Product Item - Grid Child (Auto Width) */
        .shop-page-section .shop-block-one {
            width: auto !important;
            /* Let Grid decide width */
            max-width: none !important;
            flex: none !important;
            margin: 0 !important;
            padding: 0 !important;

            /* CRITICAL: Override Isotope styles */
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
            float: none !important;
            display: block !important;

            /* CRITICAL: Force top alignment in grid */
            align-self: start !important;
            vertical-align: top !important;
        }

        /* 4b. WhatsApp Order Button Spacing */
        .shop-page-section .shop-block-one .lower-content .btn-box {
            display: block !important;
            width: 100% !important;
            margin-top: 12px !important;
            clear: both !important;
        }

        .shop-page-section .shop-block-one .lower-content .btn-box a {
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            margin-top: 8px !important;
        }

        /* 4c. Image Height Fix for Mobile (Aggressive Reduction) */
        .shop-page-section .shop-block-one .inner-box .image-box .image img {
            height: 120px !important;
            /* Reduced to 120px for compact view */
            object-fit: contain !important;
            padding: 5px !important;
        }

        /* 5. Product Card Style - Compact Mobile */
        .shop-page-section .shop-block-one .inner-box {
            border: 1px solid #eee !important;
            border-radius: 8px !important;
            height: auto !important;
            width: 100% !important;
            padding: 5px !important;
            /* Reduced padding */
            padding-bottom: 5px !important;
            /* FIXED: Removed excessive 20px padding */
            background: #fff !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            overflow: hidden !important;
            position: relative !important;
        }

        .shop-page-section .shop-block-one .image-box {
            position: relative;
            width: 100%;
        }

        .shop-page-section .shop-block-one .image-box img {
            height: 150px !important;
            /* Fixed smaller height */
            width: 100% !important;
            object-fit: contain !important;
            padding: 5px !important;
            background: #fff;
        }

        /* Fix Badge Positioning */
        .shop-page-section .shop-block-one .image-box .status-badge,
        .shop-page-section .shop-block-one .image-box .discount-product-2 {
            position: absolute;
            top: 5px !important;
            left: 5px !important;
            z-index: 5;
            font-size: 10px !important;
            padding: 2px 6px !important;
            border-radius: 3px;
        }

        /* Hide unnecessary hover options on mobile */
        .shop-page-section .shop-block-one .image-box .option-list {
            display: none !important;
        }

        /* 6. Typography Adjustments */
        .shop-page-section .shop-block-one .lower-content {
            padding: 10px !important;
        }

        .shop-page-section .shop-block-one .lower-content h4 {
            font-size: 13px !important;
            line-height: 1.3;
            margin-bottom: 5px;
            height: 34px;
            /* Limit to 2 lines */
            overflow: hidden;
        }

        .shop-page-section .shop-block-one .lower-content .price {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .shop-page-section .shop-block-one .lower-content .btn-box {
            margin-top: 5px !important;
        }

        .shop-page-section .shop-block-one .lower-content .btn-box a {
            padding: 6px 12px !important;
            font-size: 12px !important;
            width: 100%;
            text-align: center;
        }

        /* Hide unnecessary elements on mobile shop card */
        .shop-page-section .shop-block-one .lower-content .text,
        .shop-page-section .shop-block-one .lower-content .rating {
            display: none !important;
        }
    }


    .shop-section.style-two .four-item-carousel .shop-block-one .inner-box {
        border: 1px solid #ddd !important;
        border-radius: 8px;
        padding: 5px;
        margin-bottom: 20px;
        background: #fff;
    }

    .shop-section.style-two .four-item-carousel .shop-block-one .image-box img {
        height: 150px !important;
        object-fit: contain !important;
    }

    .shop-section.style-two .four-item-carousel .shop-block-one .lower-content h4 {
        font-size: 13px !important;
        line-height: 1.3;
        height: 35px;
        overflow: hidden;
    }

    .shop-section.style-two .four-item-carousel .shop-block-one .lower-content .price {
        font-size: 14px;
        font-weight: 700;
    }

    /* Force Owl Carousel to show 2 items properly */
    .shop-section.style-two .four-item-carousel .owl-stage {
        display: flex !important;
    }

    /* --- Latest Media Section (Horizontal Scroll) --- */
    .news-section .row.clearfix {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .news-section .row.clearfix::-webkit-scrollbar {
        display: none;
    }

    /* Override inline styles and Bootstrap column classes */
    .news-section .news-block {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        width: 50% !important;
        scroll-snap-align: start;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .news-section .news-block-one .inner-box {
        border: 1px solid #ddd !important;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .news-section .news-block-one .image-box {
        position: relative;
    }

    .news-section .news-block-one .image-box img {
        height: 140px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Date and Author labels - make more readable */
    .news-section .news-block-one .image-box .post-info {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .news-section .news-block-one .image-box .post-info li {
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 4px 8px !important;
        border-radius: 4px;
        font-size: 10px !important;
        color: #333 !important;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48%;
    }

    .news-section .news-block-one .image-box .post-info li a {
        color: #333 !important;
        font-size: 10px !important;
    }

    /* Title - make larger and more readable */
    .news-section .news-block-one .lower-content {
        padding: 12px 10px !important;
        background: #fff;
    }

    .news-section .news-block-one .lower-content h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-weight: 600;
        color: #222;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 38px;
    }

    .news-section .news-block-one .lower-content h3 a {
        color: #222 !important;
        font-size: 14px !important;
    }
}

/* Desktop: Hide Bottom Nav */
@media only screen and (min-width: 768px) {
    .mobile-bottom-nav {
        display: none;
    }
}