/* Halal It mobile navigation */
.mobile-nav-state {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mobile-nav-fallback-backdrop {
    display: none;
}

@media only screen and (max-width: 991px) {
    body.menuOn,
    body:has(#MobileNavState:checked) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.menuOn::after {
        content: none;
    }

    /* Balanced three-zone layout for controls, logo and cart. */
    .header-7 .header-main > .container-fluid {
        padding-right: clamp(12px, 4vw, 24px);
        padding-left: clamp(12px, 4vw, 24px);
    }

    .header-7 .header-main > .container-fluid > .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        min-height: 72px;
        margin-right: 0;
        margin-left: 0;
        column-gap: clamp(6px, 2vw, 14px);
    }

    .header-7 .header-main > .container-fluid > .row > .logo,
    .header-7 .header-main > .container-fluid > .row > .icons-col {
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .header-7 .header-main > .container-fluid > .row > .logo {
        position: static;
        grid-column: 2;
        justify-self: center;
        transform: none;
    }

    .header-7 .logo .logoImg {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-7 .logo img,
    .header-7 .logo .logoImg img {
        width: clamp(108px, 32vw, 128px);
        max-width: none;
        max-height: 64px;
        object-fit: contain;
    }

    .header-7 .header-main > .container-fluid > .row > .icons-col {
        display: flex;
        align-items: center;
        gap: clamp(2px, 1vw, 6px);
        min-width: 0;
    }

    .header-7 .header-main > .container-fluid > .row > .icons-col:first-child {
        grid-column: 1;
        justify-content: flex-start;
    }

    .header-7 .header-main > .container-fluid > .row > .icons-col:last-child {
        grid-column: 3;
        justify-content: flex-end;
    }

    .header-7 .header-main .icons-col .iconset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0;
    }

    .header-7 .header-main .icons-col .iconset .iconCot {
        width: clamp(36px, 10vw, 40px);
        height: clamp(36px, 10vw, 40px);
    }

    .menubar-mobile .menubar-item > .mobile-nav-bottom-toggle {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        min-height: 38px;
        padding: 0 10px;
        color: #222222;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        transition: color 160ms ease, transform 160ms ease;
    }

    .menubar-mobile .mobile-nav-bottom-toggle:hover,
    .menubar-mobile .mobile-nav-bottom-toggle:focus-visible,
    body:has(#MobileNavState:checked) .menubar-mobile .mobile-nav-bottom-toggle {
        color: #0e5b37;
    }

    .menubar-mobile .mobile-nav-bottom-toggle:active {
        transform: translateY(1px) scale(0.98);
    }

    .mobile-nav-fallback-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        margin: 0;
        background: rgba(5, 36, 23, 0.62);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        cursor: default;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    body.menuOn .mobile-nav-fallback-backdrop,
    body:has(#MobileNavState:checked) .mobile-nav-fallback-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav-wrapper {
        display: flex;
        flex-direction: column;
        width: min(88vw, 360px);
        height: 100vh;
        height: 100dvh;
        left: 0;
        top: 0;
        border-radius: 0 24px 24px 0;
        background: #f7f8f2;
        box-shadow: 20px 0 50px rgba(5, 52, 31, 0.28);
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transform: translate3d(-104%, 0, 0);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 180ms ease;
        will-change: transform;
    }

    .mobile-nav-wrapper.active,
    body:has(#MobileNavState:checked) .mobile-nav-wrapper {
        left: 0;
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
    }

    body:has(#MobileNavState:checked) .js-mobile-nav-toggle .anm-bars-r {
        display: none;
    }

    body:has(#MobileNavState:checked) .js-mobile-nav-toggle .icon.anm.anm-times-l {
        display: inline-block;
        color: #0e5b37;
    }

    .js-mobile-nav-toggle:active { transform: translateY(1px) scale(0.98); }

    .mobile-nav-wrapper .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 88px;
        padding: max(16px, env(safe-area-inset-top)) 18px 14px;
        background: #fff;
        border-bottom: 1px solid rgba(14, 91, 55, 0.12);
    }

    .mobile-nav-wrapper .mobile-menu-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 11px;
        color: #123c29;
        text-decoration: none;
    }

    .mobile-nav-wrapper .mobile-menu-brand img {
        width: 52px;
        max-height: 42px;
        object-fit: contain;
    }

    .mobile-nav-wrapper .mobile-menu-brand span {
        display: flex;
        flex-direction: column;
        min-width: 0;
        color: #123c29;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 750;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-nav-wrapper .mobile-menu-brand small {
        color: #bf8c19;
        font-size: 10px;
        line-height: 1.4;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-nav-wrapper .closemobileMenu,
    .mobileMenu-bg-black .closemobileMenu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #0e5b37;
        color: #fff;
        cursor: pointer;
        transition: background-color 160ms ease, transform 160ms ease;
    }

    .mobile-nav-wrapper .closemobileMenu:hover {
        background: #0a462b;
        transform: rotate(4deg);
    }

    .mobile-nav-wrapper .closemobileMenu .icon {
        position: static;
        float: none;
        padding: 0;
        color: currentColor;
        font-size: 17px;
    }

    #MobileNav {
        flex: 1 1 auto;
        height: auto;
        padding: 14px 14px max(28px, env(safe-area-inset-bottom));
        background: #f7f8f2;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(14, 91, 55, 0.3) transparent;
    }

    #MobileNav > li {
        margin: 0 0 8px;
        border: 1px solid rgba(14, 91, 55, 0.1);
        border-radius: 13px;
        background: #fff;
        overflow: hidden;
    }

    #MobileNav > li > a,
    .mobileMenu-bg-black #MobileNav > li > a {
        display: flex;
        align-items: center;
        min-height: 51px;
        padding: 12px 42px 12px 16px;
        color: #153f2c;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    #MobileNav > li > a::before {
        content: "";
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
        margin-right: 12px;
        border-radius: 50%;
        background: #d7a52c;
        box-shadow: 0 0 0 4px rgba(215, 165, 44, 0.12);
    }

    #MobileNav > li > a:hover,
    #MobileNav > li > a:focus-visible,
    .mobileMenu-bg-black #MobileNav > li > a:hover,
    .mobileMenu-bg-black #MobileNav > li > a:focus-visible {
        color: #0e5b37;
        background: #f2f7f0;
        opacity: 1;
    }

    #MobileNav li a .icon,
    .mobileMenu-bg-black #MobileNav li a .icon {
        color: #0e5b37;
    }

    #MobileNav li li a,
    #MobileNav li li li a,
    #MobileNav li li li li a,
    .mobileMenu-bg-black #MobileNav li.lvl1 li a,
    .mobileMenu-bg-black #MobileNav li.lvl1 li li a,
    .mobileMenu-bg-black #MobileNav li.lvl1 li li li a {
        background: #f5f8f2;
        color: #234b38;
        text-transform: none;
    }

    #MobileNav .mobile-menu-bottom {
        margin-top: 14px;
        padding: 18px;
        border: 1px solid rgba(14, 91, 55, 0.12);
        border-radius: 16px;
        background: #eaf2e8;
    }

    #MobileNav .mobile-menu-bottom li {
        background: transparent;
    }

    #MobileNav .mobile-menu-bottom a,
    .mobileMenu-bg-black #MobileNav .mobile-menu-bottom a {
        min-height: 32px;
        color: #234b38;
        font-weight: 550;
    }

    #MobileNav .mobile-menu-bottom a::before {
        content: none;
    }

    #MobileNav .mobile-menu-bottom .title,
    .mobileMenu-bg-black #MobileNav .mobile-menu-bottom .title {
        color: #123c29;
        border-top-color: rgba(14, 91, 55, 0.14);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    #MobileNav .mobile-menu-bottom .social-icons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #MobileNav .mobile-menu-bottom .social-icons li {
        margin: 0;
    }

    #MobileNav .mobile-menu-bottom .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 50%;
        background: #fff;
        color: #0e5b37;
    }

    .js-mobile-nav-toggle:focus-visible,
    .mobile-nav-wrapper a:focus-visible,
    .mobile-nav-wrapper button:focus-visible,
    .mobile-nav-wrapper [role="button"]:focus-visible {
        outline: 3px solid rgba(215, 165, 44, 0.8);
        outline-offset: 3px;
    }

    [dir="rtl"] .mobile-nav-wrapper {
        right: 0;
        left: auto;
        border-radius: 24px 0 0 24px;
        transform: translate3d(104%, 0, 0);
        box-shadow: -20px 0 50px rgba(5, 52, 31, 0.28);
    }

    [dir="rtl"] .mobile-nav-wrapper.active {
        transform: translate3d(0, 0, 0);
    }

    [dir="rtl"] #MobileNav > li > a::before {
        margin-right: 0;
        margin-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-wrapper,
    .mobile-nav-wrapper .closemobileMenu {
        transition: none;
    }
}