/* =========================================================
   Header Start
   ========================================================= */

/* =========================================================
   DESKTOP ONLY — Hover Sub Menu
   ========================================================= */

@media (min-width: 769px) {

    .menu-category:hover > .sub-menu {
        opacity: 1;
        visibility: visible;

        transform:
            translateX(0)
            scale(1);
    }

}

@media (max-width: 768px) {

    .category-dropdown {
        position: static;
    }

    .category-menu {
        position: fixed;

        top: 72px;
        left: 10px;
        right: 10px;

        width: auto;

        max-height: calc(100vh - 90px);

        overflow-y: auto;

        transform:
            translateY(15px)
            scale(.98);
    }

    .category-menu::before {
        display: none;
    }

    .category-dropdown:hover .category-menu {
        transform:
            translateY(0)
            scale(1);
    }

    .sub-menu {
        position: static;

        width: auto;

        margin: 0 8px 6px 60px;

        box-shadow: none;

        border: 1px solid #eeeaf7;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .sub-menu::before {
        display: none;
    }

    .menu-category:hover > .sub-menu {
        display: block;

        transform: none;
    }

    .main-category {
        min-height: 58px;
    }
}


/* =========================================================
   Header End
   ========================================================= */


@media (max-width: 1100px) {
    .header-row {
        flex-wrap: wrap;
        padding: 14px 0;
    }

    .search-box {
        /*order: 5;*/
        max-width: 270px;
        /*flex-basis: 100%;*/
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(4, minmax(190px, 1fr));
        overflow-x: auto;
        scrollbar-width: none;
    }

    .product-grid::-webkit-scrollbar {
        display: none;
    }

    .product-card {
        min-width: 190px;
    }
}

@media (max-width: 768px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .topbar {
        display: none;
    }

    .header-row {
        min-height: 72px;
        gap: 10px;
        padding: 10px 10px;
    }
    .rating-wrap i{
        font-size: 8px;
    }
    .brand {
        font-size: 20px;
    }
    .service_title h4 {
        font-size: 10px;
    }
    .service_title p {
        font-size: 9px;
    }
    .rating small{
        display: none;
    }
    .singleProductActive {
        height: 60px;
    }
    .single_product_list ul li .single_product_list_link {
        font-size: 9px;
    }
    .brand-icon {
        width: 34px;
        height: 39px;
        font-size: 15px;
    }


    .bg-sub-wrap {
        padding: 0px;
    }


    .search-box {
        order: initial;
        flex: 1;
        margin-left: 5px;
        height: 40px;
        width: 130px;
    }

    .search-box button {
        width: 50px;
    }

    .mobile-menu-btn {
        display: block;
    }


    .nav-inner {
        min-height: auto;
        padding: 15px 0;
        flex-direction: column;
        gap: 15px;
    }

    .hero-section {
        padding-top: 8px;
    }

    .hero-slider {
        border-radius: 9px;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
    }

    .category-card {
        min-height: 80px;
        padding: 5px 3px;
        border-radius: 4px;
        font-size: 6px;
    }
    .categories .category-card img{
        width: 60px;
        height: 35px;
    }
    .categories .cat-text {
        max-width: 40px;
    }

    .category-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .promo-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-section.highlighted {
        padding: 17px 8px;
        border-radius: 14px;
    }

    .product-grid {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .product-card {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
        scroll-snap-align: start;
    }

    .product-image {
        /*height: 130px;*/
        padding: 14px 10px 5px;
    }
    .product-image img{
        height: 140px;
    }

    .product-info {
        padding: 7px;
    }

    .carousel-arrow {
        display: none;
    }

    .footer {
        margin-top: 75px;
        border-radius: 14px 14px 0 0;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 22px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        gap: 10px;
        flex-direction: column;
    }
    .search-box .content-wrap{
        display: none;
    }
}

@media (max-width: 480px) {

    .brand span:last-child {
        display: none;
    }

    .header-row {
        gap: 7px;
    }

    .search-box input {
        padding-left: 12px;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .section-title-row h2 {
        font-size: 14px;
    }

    .product-card {
        flex-basis: 48%;
    }

    .product-image {
        /*height: 112px;*/
    }

    .product-info h3 {
        font-size: 9px;
    }

    .price-row strong {
        font-size: 10px;
    }

    .price-row del {
        font-size: 10px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col {
        gap: 6px;
    }

    .subscribe {
        grid-column: 1;
    }
}


@media (max-width: 768px) {

    .category-dropdown {
        width: 100%;
        order: 10;
        position: relative;
    }

    .category-dropdown .category-btn {
        width: 100%;
        height: 38px;
        justify-content: flex-start;
        padding: 0 14px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
    }

    .category-dropdown .category-btn span {
        flex: 1;
        text-align: left;
    }
    .fixed_product_sticky {
        border-radius: 8px 0 0 8px;
    }
    .fixed_product_sticky_icon i {
        font-size: 14px;
    }
    .fixed_product_sticky_count p {
        font-size: 8px;
    }
    /* =====================================
       CATEGORY MENU - CLOSED
    ===================================== */

    .category-dropdown .category-menu {
        position: absolute;

        top: calc(100% + 8px);
        left: 0;
        right: 0;

        width: 100%;

        max-height: calc(100vh - 140px);
        overflow-y: auto;

        border-radius: 13px;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(10px) scale(.98) !important;

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

        z-index: 9999;
    }


    /* =====================================
       CATEGORY MENU - OPEN
    ===================================== */

    .category-dropdown.active .category-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) scale(1) !important;
    }


    /* =====================================
       IMPORTANT:
       DISABLE HOVER ON MOBILE
    ===================================== */

    .category-dropdown:hover .category-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(10px) scale(.98) !important;
    }

    .category-dropdown.active:hover .category-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) scale(1) !important;
    }


    .category-menu::before {
        display: block;
        left: 25px;
    }


    /* =====================================
       SUB MENU
    ===================================== */

    .sub-menu {
        position: static;

        width: calc(100% - 20px);

        margin: 0 10px 0 50px;

        box-shadow: none;

        border: 0;
        margin-left: 20px;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        max-height: 0;
        overflow: hidden;

        transform: translateY(-6px);

        transition:
            max-height .35s ease,
            opacity .25s ease,
            transform .25s ease,
            margin .35s ease,
            padding .35s ease,
            visibility .25s ease;
    }


    /* CLICK → OPEN */

    .menu-category.active > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        max-height: 500px;

        transform: translateY(0);

        margin-bottom: 7px;

        padding-top: 8px;
        padding-bottom: 8px;
    }


    /* MOBILE HOVER DISABLE */

    .menu-category:hover > .sub-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        max-height: 0;

        transform: translateY(-6px);

        margin-bottom: 0;

        padding-top: 0;
        padding-bottom: 0;
    }


    /* ACTIVE থাকলে hover হলেও open থাকবে */

    .menu-category.active:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        max-height: 500px;

        transform: translateY(0);

        margin-bottom: 7px;

        padding-top: 8px;
        padding-bottom: 8px;
    }


    .main-category {
        min-height: 55px;
    }



    /* ===============================
       MOBILE MENU BUTTON
    =============================== */

    .site-header{
        position: relative;
    }

    .mobile-menu-btn {
        display: flex;

        width: 36px;
        height: 36px;

        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 4px;

        background: #f5f5f5;
        color: #222;

        font-size: 18px;

        cursor: pointer;

        transition: all .3s ease;
    }

    .mobile-menu-btn:hover {
        background: #eeeeee;
    }


    /* ===============================
       MOBILE NAV - CLOSED
    =============================== */

    .main-nav {
        display: block;

        position: absolute;

        top: 50%;
        left: 0;
        right: 0;

        width: 100%;

        background: #fff;

        border-top: 1px solid var(--border);
        border-bottom: 1px solid #eee;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform: translateY(-12px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

        z-index: 9998;
    }


    /* ===============================
       MOBILE NAV - OPEN
    =============================== */

    .main-nav.open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


    /* ===============================
       NAV ITEMS
    =============================== */

    .nav-inner {
        display: flex;

        flex-direction: column;

        width: 100%;

        padding: 8px 15px;
    }


    .nav-inner a {
        width: 100%;

        min-height: 30px;

        display: flex;
        align-items: center;

        padding: 0 15px;

        color: #333;

        text-decoration: none;

        font-size: 10px;
        font-weight: 500;

        border-bottom: 1px solid #f1f1f1;

        border-radius: 8px;

        transition: all .25s ease;
    }


    .nav-inner a:last-child {
        border-bottom: none;
    }


    .nav-inner a:hover {
        background: #f7f7f7;

        padding-left: 22px;
    }


    .nav-inner a.active {
        background: #f7f7f7;
    }


    /* ===============================
       HAMBURGER ANIMATION
    =============================== */

    .mobile-menu-btn i {
        transition: transform .3s ease;
    }

    .main-nav.open ~ .mobile-menu-btn i {
        transform: rotate(90deg);
    }

    /* ===============================
       HEADER ACTION
    =============================== */

    .site-header .main-header .header-actions{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        justify-content: space-between;
        background: white;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 15px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        z-index: 11;

        display: none;
    }
}