/* ============================================================
   BELARA HOME MOBILE HEADER V1
   Homepage + Mobile <= 767px ONLY
   Header / Menu / Search ONLY
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       HEADER SAFETY
       -------------------------------------------------------- */

    body.home.belara2-site header {
        position: relative !important;
    }


    /* --------------------------------------------------------
       NEW ACCOUNT / WISHLIST / CART ACTIONS
       -------------------------------------------------------- */

    body.home.belara2-site
    .belara-mobile-header-actions-v1 {

        position: absolute !important;

        top: 9px !important;
        right: 12px !important;

        z-index: 10020 !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 4px !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home.belara2-site
    .belara-mobile-header-action-v1 {

        position: relative !important;

        display: inline-flex !important;

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

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        max-width: 34px !important;
        max-height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-radius: 50% !important;

        background: transparent !important;

        box-shadow: none !important;

        color: #2A1210 !important;

        text-decoration: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    body.home.belara2-site
    .belara-mobile-header-action-v1 svg {

        display: block !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        max-width: 22px !important;
        max-height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        stroke: currentColor !important;

        fill: none !important;

        overflow: visible !important;
    }


    body.home.belara2-site
    .belara-mobile-header-action-v1:active {

        transform: scale(.96) !important;
    }


    /* Cart count */

    body.home.belara2-site
    .belara-mobile-cart-count-v1 {

        position: absolute !important;

        top: -3px !important;
        left: -3px !important;

        z-index: 3 !important;

        display: flex !important;

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

        min-width: 17px !important;
        height: 17px !important;

        padding: 0 4px !important;

        border-radius: 999px !important;

        background: #2A1210 !important;

        color: #FFF7EF !important;

        font-family: "Almarai", sans-serif !important;

        font-size: 9px !important;
        font-weight: 800 !important;

        line-height: 1 !important;

        box-sizing: border-box !important;
    }


    /*
     * Hide broken original mobile action elements.
     * The replacement above is independent.
     */

    body.home.belara2-site
    header .belara-mobile-original-action-v1 {

        display: none !important;
    }


    body.home.belara2-site
    header .cart-count:not(.belara-mobile-cart-count-v1),

    body.home.belara2-site
    header .wishlist-count,

    body.home.belara2-site
    header [class*="cart-count"]:not(.belara-mobile-cart-count-v1),

    body.home.belara2-site
    header [class*="wishlist-count"] {

        display: none !important;
    }


    /* --------------------------------------------------------
       SEARCH REPAIR
       -------------------------------------------------------- */

    body.home.belara2-site
    .belara-mobile-search-button-v1 {

        position: relative !important;

        display: inline-flex !important;

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

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: transparent !important;

        background-image: none !important;

        box-shadow: none !important;

        color: #2A1210 !important;

        font-size: 0 !important;

        line-height: 1 !important;

        overflow: visible !important;

        appearance: none !important;
        -webkit-appearance: none !important;
    }


    body.home.belara2-site
    .belara-mobile-search-button-v1::before,

    body.home.belara2-site
    .belara-mobile-search-button-v1::after {

        content: none !important;

        display: none !important;
    }


    body.home.belara2-site
    .belara-mobile-search-button-v1 > * {

        display: none !important;
    }


    body.home.belara2-site
    .belara-mobile-search-button-v1
    > .belara-search-svg-v1 {

        display: block !important;

        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;

        max-width: 21px !important;
        max-height: 21px !important;

        margin: 0 !important;
        padding: 0 !important;

        stroke: #2A1210 !important;
        fill: none !important;
    }


    /* --------------------------------------------------------
       MOBILE MENU PANEL
       -------------------------------------------------------- */

    body.home.belara2-site
    .belara-mobile-menu-overlay-v1 {

        position: fixed !important;

        inset: 0 !important;

        z-index: 100000 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        background: rgba(20, 8, 7, .48) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-overlay-v1.is-open {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-panel-v1 {

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: min(86vw, 345px) !important;
        height: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        margin: 0 !important;

        padding:
            calc(18px + env(safe-area-inset-top))
            18px
            calc(24px + env(safe-area-inset-bottom)) !important;

        background: #FFF7EF !important;

        color: #2A1210 !important;

        box-shadow:
            18px 0 45px
            rgba(42, 18, 16, .18) !important;

        transform: translateX(-102%) !important;

        transition: transform .28s ease !important;

        overflow-y: auto !important;
        overscroll-behavior: contain !important;

        box-sizing: border-box !important;

        direction: rtl !important;

        text-align: right !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-overlay-v1.is-open
    .belara-mobile-menu-panel-v1 {

        transform: translateX(0) !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-head-v1 {

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 12px !important;

        margin:
            0
            0
            16px !important;

        padding:
            0
            0
            14px !important;

        border-bottom:
            1px solid
            rgba(201, 163, 91, .28) !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-title-v1 {

        margin: 0 !important;

        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;

        font-size: 18px !important;
        font-weight: 800 !important;

        line-height: 1.5 !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-close-v1 {

        display: inline-flex !important;

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

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            rgba(42, 18, 16, .12) !important;

        border-radius: 50% !important;

        background: #fff !important;

        color: #2A1210 !important;

        font-size: 26px !important;
        font-weight: 400 !important;

        line-height: 1 !important;

        cursor: pointer !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-list-v1 {

        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-list-v1 li {

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-list-v1 a {

        position: relative !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        min-height: 48px !important;

        margin: 0 !important;

        padding:
            11px
            3px !important;

        border-bottom:
            1px solid
            rgba(42, 18, 16, .07) !important;

        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;

        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 1.65 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-list-v1 a::after {

        content: "‹" !important;

        display: inline-block !important;

        color: #C9A35B !important;

        font-size: 22px !important;

        line-height: 1 !important;
    }


    body.home.belara2-site
    .belara-mobile-menu-all-v1 {

        display: flex !important;

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

        min-height: 46px !important;

        margin:
            18px
            0
            0 !important;

        padding:
            10px
            14px !important;

        border:
            1px solid
            #C9A35B !important;

        border-radius: 10px !important;

        background: transparent !important;

        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;

        font-size: 13px !important;
        font-weight: 800 !important;

        line-height: 1.5 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    body.belara-mobile-menu-open-v1 {

        overflow: hidden !important;
    }

}


/* END BELARA HOME MOBILE HEADER V1 */



/* ============================================================
   BELARA MOBILE SEARCH POSITION V1.1
   Search only — does not touch menu/header actions/hero
   ============================================================ */

@media (max-width: 767px) {

    body.home.belara2-site
    header form:has(.belara-mobile-search-button-v1) {

        position: relative !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    body.home.belara2-site
    header form:has(.belara-mobile-search-button-v1)
    input[type="search"],

    body.home.belara2-site
    header form:has(.belara-mobile-search-button-v1)
    input[name="s"] {

        width: 100% !important;

        padding-left: 52px !important;

        box-sizing: border-box !important;
    }


    body.home.belara2-site
    header form:has(.belara-mobile-search-button-v1)
    .belara-mobile-search-button-v1 {

        position: absolute !important;

        left: 10px !important;
        right: auto !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        z-index: 5 !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;

        margin: 0 !important;
    }


    body.home.belara2-site
    header form:has(.belara-mobile-search-button-v1)
    .belara-mobile-search-button-v1
    .belara-search-svg-v1 {

        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;

        max-width: 20px !important;
        max-height: 20px !important;
    }

}

/* END BELARA MOBILE SEARCH POSITION V1.1 */