/* =========================================================
   DELIVERY / PICKUP SELECTOR
========================================================= */

body.km-delivery-is-open{
    overflow:hidden
}

.km-delivery-overlay{
    position:fixed;
    z-index:2098;
    inset:0;
    background:rgba(10,10,10,.48);
    opacity:0;
    backdrop-filter:blur(5px);
    transition:opacity .25s ease
}

.km-delivery-overlay.is-open{
    opacity:1
}

.km-delivery-overlay[hidden]{
    display:none
}

.km-delivery-sheet{
    position:fixed;
    z-index:2099;
    top:50%;
    left:50%;
    display:flex;
    width:min(560px,calc(100vw - 32px));
    max-height:min(690px,calc(100vh - 44px));
    overflow:hidden;
    flex-direction:column;
    border:1px solid rgba(23,23,23,.08);
    border-radius:28px;
    background:#fffdf9;
    color:#171717;
    box-shadow:0 34px 100px rgba(0,0,0,.22);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,-46%) scale(.975);
    transition:
        opacity .25s ease,
        transform .3s cubic-bezier(.22,.75,.24,1),
        visibility .3s ease
}

.km-delivery-sheet.is-open{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1)
}

.km-delivery-sheet__head{
    display:flex;
    padding:24px 24px 18px;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(23,23,23,.07)
}

.km-delivery-sheet__eyebrow{
    display:block;
    margin-bottom:4px;
    color:var(--brand);
    font-size:9px;
    font-weight:850
}

.km-delivery-sheet__head h2{
    margin:0;
    color:#171717;
    font-size:22px;
    font-weight:900;
    line-height:1.35
}

.km-delivery-sheet__close{
    display:grid;
    width:40px;
    height:40px;
    flex:0 0 40px;
    padding:0;
    place-items:center;
    border:1px solid rgba(23,23,23,.09);
    border-radius:50%;
    background:#fff;
    color:#171717;
    cursor:pointer;
    font-size:23px
}

.km-delivery-tabs{
    display:grid;
    margin:16px 24px 0;
    padding:4px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    border-radius:18px;
    background:#f2efe8
}

.km-delivery-tabs:has(.km-delivery-tab:only-child){
    grid-template-columns:1fr
}

.km-delivery-tab{
    display:flex;
    min-height:64px;
    padding:8px 12px;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#79746d;
    cursor:pointer;
    font-family:inherit;
    text-align:start;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease
}

.km-delivery-tab.is-active{
    background:#fff;
    color:#171717;
    box-shadow:0 4px 16px rgba(0,0,0,.055)
}

.km-delivery-tab__icon{
    display:grid;
    width:36px;
    height:36px;
    flex:0 0 36px;
    place-items:center;
    border-radius:12px;
    background:rgba(23,23,23,.05);
    color:var(--brand);
    font-size:20px
}

.km-delivery-tab strong,
.km-delivery-tab small{
    display:block
}

.km-delivery-tab strong{
    font-size:12px;
    font-weight:850
}

.km-delivery-tab small{
    margin-top:2px;
    color:#969089;
    font-size:8.5px
}

.km-delivery-sheet__body{
    min-height:0;
    padding:18px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none
}

.km-delivery-sheet__body::-webkit-scrollbar{
    width:0;
    height:0
}

.km-delivery-panel{
    display:none
}

.km-delivery-panel.is-active{
    display:block
}

.km-delivery-search{
    display:grid;
    height:48px;
    margin-bottom:14px;
    padding-inline:14px;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:8px;
    border:1px solid rgba(23,23,23,.10);
    border-radius:14px;
    background:#fff
}

.km-delivery-search i{
    color:#9a958e;
    font-size:19px
}

.km-delivery-search input{
    width:100%;
    height:100%;
    padding:0;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#171717;
    font-family:inherit;
    font-size:12px;
    box-shadow:none!important
}

.km-delivery-search input::placeholder{
    color:#aaa49d
}

.km-delivery-list{
    display:grid;
    gap:8px
}

.km-delivery-city{
    overflow:hidden;
    border:1px solid rgba(23,23,23,.08);
    border-radius:16px;
    background:#fff;
    transition:border-color .2s ease,box-shadow .2s ease
}

.km-delivery-city.is-open{
    border-color:rgba(23,23,23,.14);
    box-shadow:0 8px 24px rgba(0,0,0,.035)
}

.km-delivery-city__toggle{
    display:grid;
    width:100%;
    min-height:58px;
    padding:8px 12px;
    grid-template-columns:36px minmax(0,1fr) auto 24px;
    align-items:center;
    gap:9px;
    border:0;
    background:#fff;
    color:#171717;
    cursor:pointer;
    font-family:inherit;
    text-align:start
}

.km-delivery-city__pin{
    display:grid;
    width:36px;
    height:36px;
    place-items:center;
    border-radius:12px;
    background:#f3f0ea;
    color:var(--brand);
    font-size:18px
}

.km-delivery-city__name{
    font-size:13px;
    font-weight:900
}

.km-delivery-city__count{
    display:grid;
    min-width:58px;
    height:25px;
    padding-inline:8px;
    place-items:center;
    border-radius:999px;
    background:#f4f2ed;
    color:#8b867f;
    font-size:8px;
    font-weight:800
}

.km-delivery-city__arrow{
    color:#8e8982;
    font-size:20px;
    transition:transform .2s ease
}

.km-delivery-city.is-open .km-delivery-city__arrow{
    transform:rotate(180deg)
}

.km-delivery-city__regions{
    padding:0 12px 12px
}

.km-delivery-city__regions[hidden]{
    display:none
}

.km-delivery-region{
    position:relative;
    display:grid;
    min-height:46px;
    padding:7px 9px;
    grid-template-columns:20px minmax(0,1fr);
    align-items:center;
    gap:8px;
    border-top:1px solid rgba(23,23,23,.055);
    color:#5f5a54;
    cursor:pointer
}

.km-delivery-region input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.km-delivery-region__radio{
    position:relative;
    width:17px;
    height:17px;
    border:1px solid #c7c2bb;
    border-radius:50%
}

.km-delivery-region.is-selected .km-delivery-region__radio{
    border-color:var(--brand)
}

.km-delivery-region.is-selected .km-delivery-region__radio::after{
    position:absolute;
    inset:3px;
    content:'';
    border-radius:50%;
    background:var(--brand)
}

.km-delivery-region__name{
    font-size:11px;
    font-weight:700
}

.km-delivery-region.is-selected{
    margin-inline:-4px;
    padding-inline:13px;
    border-radius:10px;
    background:#faf7f2;
    color:#171717
}


.km-delivery-empty-small{
    padding:14px 8px 4px;
    color:#999;
    font-size:10px;
    text-align:center
}

.km-delivery-empty,
.km-delivery-search-empty{
    display:flex;
    min-height:150px;
    padding:24px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#807a73;
    text-align:center
}

.km-delivery-empty i,
.km-delivery-search-empty i{
    margin-bottom:8px;
    color:var(--brand);
    font-size:30px
}

.km-delivery-empty strong,
.km-delivery-search-empty strong{
    font-size:12px
}

.km-delivery-search-empty small{
    margin-top:4px;
    color:#aaa39b;
    font-size:9px
}

.km-pickup-intro{
    display:flex;
    margin-bottom:14px;
    padding:14px;
    align-items:center;
    gap:11px;
    border-radius:16px;
    background:#f5f2ec
}

.km-pickup-intro > i{
    color:var(--brand);
    font-size:24px
}

.km-pickup-intro strong,
.km-pickup-intro span{
    display:block
}

.km-pickup-intro strong{
    color:#171717;
    font-size:12px
}

.km-pickup-intro span{
    margin-top:2px;
    color:#88827a;
    font-size:9px
}

.km-pickup-list{
    display:grid;
    gap:8px
}

.km-pickup-branch{
    position:relative;
    display:grid;
    min-height:68px;
    padding:10px 12px;
    grid-template-columns:42px minmax(0,1fr) 20px;
    align-items:center;
    gap:10px;
    border:1px solid rgba(23,23,23,.08);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease
}

.km-pickup-branch input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.km-pickup-branch.is-selected{
    border-color:var(--brand);
    box-shadow:0 7px 22px rgba(0,0,0,.04)
}

.km-pickup-branch__icon{
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:13px;
    background:#f3f0ea;
    color:var(--brand);
    font-size:20px
}

.km-pickup-branch__copy strong,
.km-pickup-branch__copy small{
    display:block
}

.km-pickup-branch__copy strong{
    color:#171717;
    font-size:11.5px;
    font-weight:850
}

.km-pickup-branch__copy small{
    margin-top:3px;
    color:#918b84;
    font-size:9px
}

.km-pickup-branch__radio{
    position:relative;
    width:18px;
    height:18px;
    border:1px solid #c7c2bb;
    border-radius:50%
}

.km-pickup-branch.is-selected .km-pickup-branch__radio{
    border-color:var(--brand)
}

.km-pickup-branch.is-selected .km-pickup-branch__radio::after{
    position:absolute;
    inset:4px;
    content:'';
    border-radius:50%;
    background:var(--brand)
}

.km-delivery-sheet__footer{
    display:grid;
    padding:14px 24px 18px;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    border-top:1px solid rgba(23,23,23,.08);
    background:#fffdf9
}

.km-delivery-selected small,
.km-delivery-selected strong,
.km-delivery-selected__cost{
    display:block
}

.km-delivery-selected small{
    margin-bottom:2px;
    color:#9a948d;
    font-size:8.5px
}

.km-delivery-selected strong{
    max-width:260px;
    overflow:hidden;
    color:#171717;
    font-size:12px;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap
}

.km-delivery-selected__cost{
    margin-top:3px;
    color:var(--brand);
    font-size:9px;
    font-weight:800
}

.km-delivery-confirm{
    display:inline-flex;
    min-height:46px;
    padding:0 20px;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:14px;
    background:#171717;
    color:#fff;
    cursor:pointer;
    font-family:inherit;
    font-size:11px;
    font-weight:850;
    transition:opacity .2s ease,transform .2s ease
}

.km-delivery-confirm:not(:disabled):hover{
    transform:translateY(-1px)
}

.km-delivery-confirm:disabled{
    opacity:.35;
    cursor:not-allowed
}

.km-delivery-message{
    margin:0 24px 16px;
    padding:10px 12px;
    border-radius:12px;
    background:#fff4f4;
    color:#9b1c1c;
    font-size:10px;
    line-height:1.6
}

.km-header__delivery-btn{
    border:0;
    cursor:pointer;
    font-family:inherit
}

@media(max-width:767px){
    .km-delivery-sheet{
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        max-height:84dvh;
        border-right:0;
        border-bottom:0;
        border-left:0;
        border-radius:26px 26px 0 0;
        opacity:1;
        transform:translateY(104%)
    }

    .km-delivery-sheet.is-open{
        transform:translateY(0)
    }

    .km-delivery-sheet__head{
        padding:19px 18px 14px
    }

    .km-delivery-sheet__head h2{
        font-size:19px
    }

    .km-delivery-tabs{
        margin:13px 18px 0
    }

    .km-delivery-sheet__body{
        padding:15px 18px
    }

    .km-delivery-sheet__footer{
        padding:12px 18px max(14px,env(safe-area-inset-bottom));
        grid-template-columns:minmax(0,1fr) auto
    }

    .km-delivery-selected strong{
        max-width:44vw
    }

    .km-delivery-confirm{
        min-height:38px;
        padding-inline:14px
    }
}

@media(max-width:390px){
    .km-delivery-selected{
        display:none
    }

    .km-delivery-sheet__footer{
        grid-template-columns:1fr
    }

    .km-delivery-confirm{
        width:100%
    }
}

@media(prefers-reduced-motion:reduce){
    .km-delivery-sheet,
    .km-delivery-overlay{
        transition:none
    }
}

/* =========================================================
   DRAWER
========================================================= */

body.km-menu-is-open{
    overflow:hidden
}

.km-menu-overlay{
    position:fixed;
    z-index:1998;
    inset:0;
    background:rgba(11,11,11,.46);
    opacity:0;
    backdrop-filter:blur(4px);
    transition:opacity .28s ease
}

.km-menu-overlay.is-open{
    opacity:1
}

.km-menu-overlay[hidden]{
    display:none
}

.km-drawer{
    position:fixed;
    z-index:1999;
    top:0;
    bottom:0;
    width:min(440px,calc(100vw - 26px));
    overflow:hidden;
    background:#fffdf9;
    color:#171717;
    box-shadow:0 0 70px rgba(0,0,0,.18);
    visibility:hidden;
    transition:
        transform .38s cubic-bezier(.22,.75,.24,1),
        visibility .38s ease
}

html[dir="rtl"] .km-drawer{
    right:0;
    transform:translateX(104%)
}

html[dir="ltr"] .km-drawer{
    left:0;
    transform:translateX(-104%)
}

.km-drawer.is-open{
    visibility:visible;
    transform:translateX(0)!important
}

.km-drawer__head{
    display:flex;
    min-height:88px;
    padding:16px 24px;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(23,23,23,.08)
}

.km-drawer__brand{
    display:flex;
    width:150px;
    height:54px;
    align-items:center;
    color:#171717!important;
    text-decoration:none!important
}

.km-drawer__brand img{
    display:block;
    max-width:100%;
    max-height:48px;
    object-fit:contain
}

.km-drawer__brand strong{
    font-size:18px;
    font-weight:900
}

.km-drawer__close{
    display:grid;
    width:42px;
    height:42px;
    padding:0;
    place-items:center;
    border:1px solid rgba(23,23,23,.09);
    border-radius:50%;
    background:#fff;
    color:#171717;
    cursor:pointer;
    font-size:24px;
    transition:transform .2s ease,background .2s ease
}

.km-drawer__close:hover{
    transform:rotate(5deg);
    background:#f4f1eb
}

.km-drawer__body{
    height:calc(100% - 158px);
    padding:22px 24px 28px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin
}

.km-drawer__nav{
    display:grid;
    gap:9px
}

.km-drawer__nav-link{
    display:grid;
    min-height:72px;
    padding:10px 12px;
    grid-template-columns:44px minmax(0,1fr) 26px;
    align-items:center;
    gap:12px;
    border:1px solid rgba(23,23,23,.07);
    border-radius:18px;
    background:#fff;
    color:#171717!important;
    text-decoration:none!important;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease
}

.km-drawer__nav-link:hover{
    transform:translateY(-2px);
    border-color:rgba(23,23,23,.14);
    box-shadow:0 10px 26px rgba(0,0,0,.055)
}

.km-drawer__nav-icon{
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border-radius:14px;
    background:#f2efe8;
    color:var(--brand);
    font-size:21px
}

.km-drawer__nav-link strong,
.km-drawer__nav-link small{
    display:block
}

.km-drawer__nav-link strong{
    font-size:13px;
    font-weight:850;
    line-height:1.4
}

.km-drawer__nav-link small{
    margin-top:3px;
    color:#8a867f;
    font-size:9px;
    line-height:1.55
}

.km-drawer__nav-arrow{
    color:#8d8982;
    font-size:18px
}

.km-drawer__categories{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid rgba(23,23,23,.09)
}

.km-drawer__section-head{
    display:flex;
    margin-bottom:15px;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px
}

.km-drawer__section-head span{
    display:block;
    margin-bottom:4px;
    color:var(--brand);
    font-size:9px;
    font-weight:850
}

.km-drawer__section-head h3{
    margin:0;
    color:#171717;
    font-size:20px;
    font-weight:900;
    line-height:1.35
}

.km-drawer__section-head a{
    color:#6d6963!important;
    text-decoration:none!important;
    font-size:10px;
    font-weight:800;
    white-space:nowrap
}

.km-drawer__category-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
}

.km-drawer__category{
    display:grid;
    min-width:0;
    min-height:64px;
    padding:8px;
    grid-template-columns:46px minmax(0,1fr) 18px;
    align-items:center;
    gap:9px;
    border:1px solid rgba(23,23,23,.07);
    border-radius:16px;
    background:#fff;
    color:#171717!important;
    text-decoration:none!important;
    transition:border-color .2s ease,transform .2s ease
}

.km-drawer__category:hover{
    transform:translateY(-2px);
    border-color:rgba(23,23,23,.15)
}

.km-drawer__category-media{
    display:grid;
    width:46px;
    height:46px;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#f0ede6;
    color:var(--brand);
    font-size:19px
}

.km-drawer__category-media img{
    width:100%;
    height:100%;
    object-fit:cover
}

.km-drawer__category-name{
    min-width:0;
    overflow:hidden;
    font-size:11px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap
}

.km-drawer__category > i{
    color:#aaa59d;
    font-size:15px
}

.km-drawer__empty{
    grid-column:1/-1;
    display:flex;
    min-height:145px;
    padding:24px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:1px dashed rgba(23,23,23,.14);
    border-radius:18px;
    background:#f8f6f1;
    text-align:center
}

.km-drawer__empty > i{
    margin-bottom:8px;
    color:var(--brand);
    font-size:30px
}

.km-drawer__empty strong{
    font-size:12px
}

.km-drawer__empty small{
    max-width:260px;
    margin-top:5px;
    color:#8a867f;
    font-size:9px;
    line-height:1.7
}

.km-drawer__footer{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    min-height:70px;
    padding:12px 24px;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid rgba(23,23,23,.08);
    background:#fffdf9
}

.km-drawer__language{
    display:inline-flex;
    min-height:38px;
    padding:0 13px;
    align-items:center;
    gap:7px;
    border:1px solid rgba(23,23,23,.10);
    border-radius:999px;
    background:#fff;
    color:#171717!important;
    text-decoration:none!important;
    font-size:10px;
    font-weight:800
}

.km-drawer__language i{
    font-size:16px
}

.km-drawer__footer-name{
    max-width:180px;
    overflow:hidden;
    color:#9a958d;
    font-size:9px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap
}

/* =========================================================
   KARAM RESTAURANT HEADER — REFERENCE LAYOUT
   Dynamic brand color from dashboard: var(--brand)
========================================================= */

.km-header{
    --km-header-max:1480px;
    --km-dark:#171717;
    --km-page:#f5f5f5;

    position:relative;
    z-index:1200;
    width:100%;
    padding-bottom:34px;
    background:var(--km-page);
    box-sizing:border-box;
}

.km-header *,
.km-header *::before,
.km-header *::after,
.km-drawer *,
.km-drawer *::before,
.km-drawer *::after{
    box-sizing:border-box;
}

.km-header__main{
    position:relative;
    width:100%;
    min-height:264px;
    overflow:hidden;
    background:
        radial-gradient(circle at 9% 78%,rgba(255,255,255,.10) 0 2px,transparent 2.5px) 0 0/16px 16px,
        linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14)),
        var(--brand);
}

.km-header__main::before,
.km-header__main::after{
    position:absolute;
    content:'';
    pointer-events:none;
}

.km-header__main::before{
    top:-150px;
    right:-130px;
    width:410px;
    height:410px;
    border-radius:50%;
    background:rgba(255,255,255,.055);
}

.km-header__main::after{
    right:4%;
    bottom:-150px;
    width:270px;
    height:270px;
    border-radius:48% 52% 60% 40%;
    background:rgba(0,0,0,.055);
    transform:rotate(22deg);
}

.km-header__inner{
    position:relative;
    z-index:2;
    display:grid;
    width:min(100%,var(--km-header-max));
    min-height:112px;
    margin:0 auto;
    padding-inline:54px;
    grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);
    align-items:start;
    gap:34px;
    direction:ltr;
}

.km-header__left,
.km-header__right{
    display:flex;
    min-width:0;
    padding-top:31px;
    align-items:center;
    gap:18px;
}

.km-header__left{
    justify-content:flex-start;
}

.km-header__right{
    justify-content:flex-end;
}

html[dir="rtl"] .km-header__left,
html[dir="rtl"] .km-header__right{
    direction:rtl;
}

html[dir="ltr"] .km-header__left,
html[dir="ltr"] .km-header__right{
    direction:ltr;
}

.km-header__brand{
    position:relative;
    z-index:3;
    display:flex;
    width:170px;
    height:132px;
    align-items:center;
    justify-content:center;
    justify-self:center;
    overflow:hidden;
    border-radius:0 0 24px 24px;
    background:#fff;
    color:#171717!important;
    text-decoration:none!important;
    box-shadow:0 14px 36px rgba(0,0,0,.13);
}

.km-header__brand img{
    display:block;
    width:auto;
    max-width:126px;
    height:auto;
    max-height:86px;
    object-fit:contain;
}

.km-header__brand strong{
    padding:12px;
    color:#171717;
    font-size:20px;
    font-weight:900;
    text-align:center;
}

.km-header__action,
.km-header__lang{
    display:inline-flex;
    min-height:48px;
    padding:0;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    background:transparent;
    color:var(--on-brand,#fff)!important;
    font-family:inherit;
    font-size:14px;
    font-weight:850;
    text-decoration:none!important;
    white-space:nowrap;
}

button.km-header__action{
    cursor:pointer;
}

.km-header__action:hover,
.km-header__lang:hover{
    color:var(--on-brand,#fff)!important;
    opacity:.88;
}

.km-header__icon,
.km-header__plain-icon{
    position:relative;
    display:grid;
    width:43px;
    height:43px;
    flex:0 0 43px;
    place-items:center;
    border-radius:50%;
    color:var(--on-brand,#fff);
    font-size:23px;
}

.km-header__icon{
    background:rgba(0,0,0,.13);
}

.km-header__plain-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    background:transparent;
    font-size:23px;
}

.km-header__divider{
    width:1px;
    height:34px;
    flex:0 0 1px;
    background:rgba(255,255,255,.34);
}

.km-header__cart-count{
    position:absolute;
    top:-6px;
    right:-6px;
    display:grid;
    min-width:22px;
    height:22px;
    padding:0 5px;
    place-items:center;
    border:2px solid var(--brand);
    border-radius:999px;
    background:#ff2a2a;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
}

.km-header__cart-count[hidden]{
    display:none!important;
}

/* FLOATING WHITE PANEL */
.km-header__panel-wrap{
    position:relative;
    z-index:4;
    width:100%;
    margin-top:-108px;
    padding-inline:26px;
}

.km-header__panel{
    width:min(100%,1480px);
    margin:0 auto;
    padding:44px 44px 40px;
    border:1px solid rgba(23,23,23,.055);
    border-radius:34px;
    background:#fff;
    box-shadow:0 18px 52px rgba(0,0,0,.075);
}

/* SEARCH */
.km-header-search{
    width:100%;
}

.km-header-search__form{
    display:grid;
    width:100%;
    grid-template-columns:165px minmax(0,1fr);
    align-items:center;
    gap:18px;
    direction:ltr;
}

.km-header-search__form button{
    display:inline-flex;
    width:165px;
    height:68px;
    padding:0 24px;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    border-radius:999px;
    background:var(--brand);
    color:var(--on-brand,#fff);
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.km-header-search__form button i{
    font-size:24px;
}

.km-header-search__field{
    display:grid;
    width:100%;
    height:68px;
    padding-inline:22px;
    grid-template-columns:minmax(0,1fr) 30px;
    align-items:center;
    gap:10px;
    border:1px solid rgba(23,23,23,.10);
    border-radius:999px;
    background:#fff;
    box-shadow:inset 0 0 0 1px rgba(23,23,23,.015),0 8px 28px rgba(0,0,0,.035);
    transition:border-color .2s ease,box-shadow .2s ease;
}

.km-header-search__field:focus-within{
    border-color:var(--brand);
    box-shadow:0 10px 30px rgba(0,0,0,.055);
}

.km-header-search__field input{
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    padding:0;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#171717!important;
    font-family:inherit!important;
    font-size:14px!important;
    box-shadow:none!important;
}

.km-header-search__field input::placeholder{
    color:#aaa8a4;
}

.km-header-search__field > i{
    color:var(--brand);
    font-size:25px;
}

/* DARK BENEFITS BAR */
.km-header__benefits{
    display:grid;
    min-height:104px;
    margin-top:34px;
    padding:14px 18px;
    grid-template-columns:1.15fr 1fr 1fr;
    align-items:center;
    gap:0;
    border-radius:20px;
    background:
        linear-gradient(120deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
        #181818;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
    direction:rtl;
}

.km-header__benefit{
    position:relative;
    display:flex;
    min-width:0;
    min-height:76px;
    padding:8px 34px;
    align-items:center;
    gap:16px;
    color:#fff;
}

.km-header__benefit:not(:last-child)::after{
    position:absolute;
    top:14px;
    bottom:14px;
    left:0;
    width:1px;
    content:'';
    background:rgba(255,255,255,.18);
}

.km-header__benefit-icon{
    display:grid;
    width:48px;
    height:48px;
    flex:0 0 48px;
    place-items:center;
    color:var(--brand);
    font-size:31px;
}

.km-header__benefit strong,
.km-header__benefit small{
    display:block;
}

.km-header__benefit strong{
    overflow:hidden;
    color:#fff;
    font-size:13px;
    font-weight:900;
    line-height:1.5;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.km-header__benefit small{
    margin-top:3px;
    color:rgba(255,255,255,.55);
    font-size:10px;
    line-height:1.55;
}

.km-header__benefit--delivery{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
}

.km-header__delivery-copy{
    min-width:0;
}

.km-header__delivery-copy small{
    display:block;
    margin:0 0 2px;
    color:rgba(255,255,255,.55);
    font-size:10px;
}

.km-header__delivery-copy strong{
    display:block;
    max-width:280px;
    overflow:hidden;
    color:#fff;
    font-size:14px;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.km-header__delivery-btn{
    display:inline-flex;
    min-width:92px;
    min-height:46px;
    padding:0 17px;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:var(--brand)!important;
    font-family:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.km-header__delivery-btn i{
    font-size:17px;
}

/* TABLET */
@media(max-width:1100px){
    .km-header__inner{
        padding-inline:24px;
        grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);
        gap:20px;
    }

    .km-header__brand{
        width:140px;
        height:118px;
    }

    .km-header__action,
    .km-header__lang{
        font-size:12px;
    }

    .km-header__left,
    .km-header__right{
        gap:10px;
    }

    .km-header__panel{
        padding:32px;
    }

    .km-header__benefit{
        padding-inline:18px;
    }

    .km-header__benefit small{
        display:none;
    }
}

/* MOBILE */
@media(max-width:767px){
    .km-header{
        padding-bottom:8px;
        background:#fffdf9;
    }

    .km-header__main{
        min-height:64px;
        overflow:visible;
        background:
            linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.08)),
            var(--brand);
    }

    .km-header__main::before,
    .km-header__main::after{
        display:none;
    }

    .km-header__inner{
        min-height:64px;
        padding-left:max(10px,env(safe-area-inset-left));
        padding-right:max(10px,env(safe-area-inset-right));
        grid-template-columns:42px minmax(0,1fr) 42px;
        align-items:center;
        gap:6px;
    }

    .km-header__left,
    .km-header__right{
        width:42px;
        min-width:42px;
        padding-top:0;
        gap:0;
    }

    .km-header__left{
        justify-content:flex-start;
    }

    .km-header__right{
        justify-content:flex-end;
    }

    .km-header__lang,
    .km-header__divider,
    .km-header__account,
    .km-header__action-text{
        display:none!important;
    }

    .km-header__brand{
        width:92px;
        height:58px;
        border-radius:0 0 14px 14px;
        box-shadow:0 7px 18px rgba(0,0,0,.12);
    }

    .km-header__brand img{
        max-width:74px;
        max-height:44px;
    }

    .km-header__action,
    button.km-header__action{
        width:40px;
        min-width:40px;
        min-height:40px;
        padding:0;
    }

    .km-header__icon{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:20px;
    }

    .km-header__panel-wrap{
        margin-top:0;
        padding:7px 10px 5px;
        background:#fffdf9;
    }

    .km-header__panel{
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    .km-header-search__form{
        height:44px;
        grid-template-columns:44px minmax(0,1fr);
        gap:7px;
    }

    .km-header-search__form button{
        width:44px;
        height:44px;
        padding:0;
        border-radius:13px;
        box-shadow:none;
    }

    .km-header-search__form button span{
        display:none;
    }

    .km-header-search__form button i{
        font-size:20px;
    }

    .km-header-search__field{
        height:44px;
        padding-inline:13px;
        grid-template-columns:minmax(0,1fr) 22px;
        border-radius:13px;
        background:#f5f2ec;
        box-shadow:none;
    }

    .km-header-search__field input{
        font-size:11px!important;
    }

    .km-header-search__field > i{
        font-size:19px;
    }

    .km-header__benefits{
        min-height:50px;
        margin-top:7px;
        padding:5px 7px;
        grid-template-columns:1fr;
        border-radius:13px;
    }

    .km-header__benefit--support,
    .km-header__benefit--secure{
        display:none;
    }

    .km-header__benefit{
        min-height:40px;
        padding:3px 4px;
    }

    .km-header__benefit::after{
        display:none!important;
    }

    .km-header__benefit--delivery{
        grid-template-columns:30px minmax(0,1fr) auto;
        gap:7px;
    }

    .km-header__benefit-icon{
        width:30px;
        height:30px;
        flex-basis:30px;
        font-size:20px;
    }

    .km-header__delivery-copy small{
        font-size:7px;
    }

    .km-header__delivery-copy strong{
        max-width:48vw;
        font-size:9.5px;
    }

    .km-header__delivery-btn{
        min-width:55px;
        min-height:30px;
        padding-inline:9px;
        font-size:8px;
    }

    .km-header__delivery-btn i{
        font-size:14px;
    }
}

/* DRAWER RESPONSIVE */
@media(max-width:767px){
    .km-drawer{
        width:min(390px,calc(100vw - 14px));
    }

    .km-drawer__head{
        min-height:76px;
        padding:11px 16px;
    }

    .km-drawer__brand{
        width:125px;
        height:48px;
    }

    .km-drawer__brand img{
        max-height:42px;
    }

    .km-drawer__close{
        width:38px;
        height:38px;
        font-size:22px;
    }

    .km-drawer__body{
        height:calc(100% - 138px);
        padding:16px 16px 22px;
    }

    .km-drawer__nav{gap:7px}

    .km-drawer__nav-link{
        min-height:62px;
        padding:8px 9px;
        grid-template-columns:38px minmax(0,1fr) 22px;
        gap:10px;
        border-radius:15px;
    }

    .km-drawer__nav-icon{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:19px;
    }

    .km-drawer__nav-link strong{font-size:12px}
    .km-drawer__nav-link small{font-size:8px}

    .km-drawer__categories{
        margin-top:22px;
        padding-top:20px;
    }

    .km-drawer__section-head h3{font-size:18px}

    .km-drawer__category-grid{gap:7px}

    .km-drawer__category{
        min-height:58px;
        padding:6px;
        grid-template-columns:40px minmax(0,1fr) 15px;
        gap:7px;
        border-radius:14px;
    }

    .km-drawer__category-media{
        width:40px;
        height:40px;
    }

    .km-drawer__category-name{font-size:10px}

    .km-drawer__footer{
        min-height:62px;
        padding:10px 16px;
    }
}

@media(max-width:390px){
    .km-header__brand{width:84px}
    .km-header__delivery-copy strong{max-width:43vw}
    .km-drawer__category-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
    .km-delivery-sheet,
    .km-delivery-overlay,
    .km-drawer,
    .km-menu-overlay,
    .km-drawer__nav-link,
    .km-drawer__category{
        transition:none;
    }
}

/* =========================================================
   KARAM DELIVERY POPUP — TRUE MOBILE FULL SCREEN
========================================================= */

@media (max-width: 767px) {

    /* الطبقة المعتمة تغطي الهيدر والـBottom Navigation */
    .km-delivery-overlay{
        position:fixed !important;
        inset:0 !important;

        z-index:2147483600 !important;

        background:rgba(10,10,10,.48) !important;

        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }


    /* البوب أب نفسه فوق كل عناصر الموقع */
    .km-delivery-sheet{
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        z-index:2147483601 !important;

        width:100% !important;
        height:100dvh !important;
        max-height:100dvh !important;

        border:0 !important;
        border-radius:0 !important;

        background:#fffdf9 !important;

        opacity:1 !important;
        visibility:hidden;

        transform:translateY(100%) !important;
    }


    .km-delivery-sheet.is-open{
        visibility:visible !important;
        transform:translateY(0) !important;
    }


    /* رأس البوب أب يحترم نوتش الآيفون */
    .km-delivery-sheet__head{
        padding-top:
            calc(
                18px
                + env(safe-area-inset-top)
            ) !important;
    }


    /* المناطق هي الجزء الذي يعمل Scroll */
    .km-delivery-sheet__body{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;

        -webkit-overflow-scrolling:touch;
    }


    /* الجزء السفلي فوق Safe Area */
    .km-delivery-sheet__footer{
        flex:0 0 auto;

        padding-bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            ) !important;
    }
}
/* =========================================================
   KARAM — PREMIUM MOBILE MENU
   Full-screen above header + bottom navigation
   Logo stays centered, close button on the left
========================================================= */

@media (max-width: 767px) {

    /* Overlay must sit above header + app tabbar */
    .km-menu-overlay{
        position:fixed !important;
        inset:0 !important;
        z-index:2147483299 !important;

        background:rgba(10,10,10,.44) !important;

        opacity:0;
        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }

    .km-menu-overlay.is-open{
        opacity:1 !important;
    }


    /* Full-screen menu */
    .km-drawer{
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        z-index:2147483300 !important;

        width:100% !important;
        max-width:none !important;
        height:100dvh !important;

        overflow:hidden !important;

        border:0 !important;
        border-radius:0 !important;

        background:#fffdf9 !important;

        box-shadow:none !important;

        visibility:hidden;

        transform:translateY(-18px) scale(.985) !important;
        opacity:0;

        transition:
            transform .28s cubic-bezier(.22,.75,.24,1),
            opacity .22s ease,
            visibility .28s ease !important;
    }

    html[dir="rtl"] .km-drawer,
    html[dir="ltr"] .km-drawer{
        right:0 !important;
        left:0 !important;
        transform:translateY(-18px) scale(.985) !important;
    }

    .km-drawer.is-open{
        visibility:visible !important;

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


    /* =====================================================
       TOP BAR
       logo stays exactly centered
       close button fixed on LEFT
    ===================================================== */

    .km-drawer__head{
        position:relative !important;

        display:flex !important;

        min-height:
            calc(
                74px
                + env(safe-area-inset-top)
            ) !important;

        padding:
            calc(8px + env(safe-area-inset-top))
            16px
            8px !important;

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

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

        background:
            color-mix(
                in srgb,
                var(--brand) 6%,
                #fffdf9
            ) !important;
    }

    .km-drawer__brand{
        position:absolute !important;

        top:
            calc(
                8px
                + env(safe-area-inset-top)
            ) !important;

        left:50% !important;

        width:92px !important;
        height:56px !important;

        margin:0 !important;

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

        border-radius:0 0 14px 14px !important;

        background:#fff !important;

        box-shadow:0 7px 18px rgba(0,0,0,.10) !important;

        transform:translateX(-50%) !important;
    }

    .km-drawer__brand img{
        max-width:74px !important;
        max-height:42px !important;
        object-fit:contain !important;
    }

    .km-drawer__close{
        position:absolute !important;

        top:
            calc(
                17px
                + env(safe-area-inset-top)
            ) !important;

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

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

        border:1px solid rgba(23,23,23,.09) !important;
        border-radius:50% !important;

        background:#fff !important;
        color:#171717 !important;

        box-shadow:0 5px 16px rgba(0,0,0,.05) !important;

        font-size:22px !important;
    }


    /* =====================================================
       SCROLL AREA
    ===================================================== */

    .km-drawer__body{
        height:
            calc(
                100dvh
                - 74px
                - env(safe-area-inset-top)
                - 66px
                - env(safe-area-inset-bottom)
            ) !important;

        padding:18px 16px 24px !important;

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

        -webkit-overflow-scrolling:touch;
    }


    /* =====================================================
       MAIN MENU — compact app-like cards
    ===================================================== */

    .km-drawer__nav{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;
    }

    .km-drawer__nav-link{
        display:flex !important;

        min-height:104px !important;
        padding:14px 10px !important;

        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        gap:8px !important;

        border:1px solid rgba(23,23,23,.07) !important;
        border-radius:20px !important;

        background:#fff !important;

        text-align:center !important;

        box-shadow:0 8px 24px rgba(0,0,0,.035) !important;
    }

    .km-drawer__nav-link:hover,
    .km-drawer__nav-link:active{
        transform:none !important;

        border-color:
            color-mix(
                in srgb,
                var(--brand) 28%,
                rgba(23,23,23,.07)
            ) !important;

        background:
            color-mix(
                in srgb,
                var(--brand) 5%,
                #fff
            ) !important;
    }

    .km-drawer__nav-icon{
        width:44px !important;
        height:44px !important;

        border-radius:14px !important;

        background:
            color-mix(
                in srgb,
                var(--brand) 8%,
                #f4f1eb
            ) !important;

        color:var(--brand) !important;

        font-size:21px !important;
    }

    .km-drawer__nav-link strong{
        font-size:11.5px !important;
        font-weight:850 !important;
        line-height:1.4 !important;
    }

    .km-drawer__nav-link small{
        display:none !important;
    }

    .km-drawer__nav-arrow{
        display:none !important;
    }


    /* =====================================================
       CATEGORIES
    ===================================================== */

    .km-drawer__categories{
        margin-top:24px !important;
        padding-top:22px !important;

        border-top:1px solid rgba(23,23,23,.08) !important;
    }

    .km-drawer__section-head{
        margin-bottom:13px !important;

        align-items:flex-end !important;
    }

    .km-drawer__section-head span{
        margin-bottom:3px !important;

        color:var(--brand) !important;

        font-size:8px !important;
        font-weight:900 !important;
    }

    .km-drawer__section-head h3{
        font-size:20px !important;
        font-weight:900 !important;
    }

    .km-drawer__section-head a{
        padding:6px 9px !important;

        border-radius:999px !important;

        background:#f3f0ea !important;
        color:#5f5b55 !important;

        font-size:8.5px !important;
    }

    .km-drawer__category-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:9px !important;
    }

    .km-drawer__category{
        min-height:62px !important;
        padding:7px 9px !important;

        grid-template-columns:
            42px
            minmax(0,1fr) !important;

        gap:9px !important;

        border:1px solid rgba(23,23,23,.07) !important;
        border-radius:17px !important;

        background:#fff !important;
    }

    .km-drawer__category-media{
        width:42px !important;
        height:42px !important;

        border-radius:50% !important;

        background:#f3f0ea !important;
    }

    .km-drawer__category-name{
        font-size:10.5px !important;
        font-weight:800 !important;

        white-space:normal !important;
        line-height:1.35 !important;
    }

    .km-drawer__category > i{
        display:none !important;
    }


    /* =====================================================
       FIXED BOTTOM INSIDE THE MENU
    ===================================================== */

    .km-drawer__footer{
        z-index:3 !important;

        min-height:
            calc(
                66px
                + env(safe-area-inset-bottom)
            ) !important;

        padding:
            10px
            16px
            calc(
                10px
                + env(safe-area-inset-bottom)
            ) !important;

        border-top:1px solid rgba(23,23,23,.07) !important;

        background:rgba(255,253,249,.98) !important;

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .km-drawer__language{
        min-height:36px !important;
        padding:0 12px !important;

        background:#fff !important;

        font-size:9px !important;
    }

    .km-drawer__footer-name{
        font-size:8.5px !important;
    }
}


/* Very small phones */
@media (max-width: 390px) {

    .km-drawer__nav-link{
        min-height:96px !important;
    }

    .km-drawer__category-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .km-drawer__category{
        padding:6px !important;
    }

    .km-drawer__category-name{
        font-size:9.5px !important;
    }
}