/* ============================================================
   Modern 2026 — MOBILE-FIRST refinements
   ------------------------------------------------------------
   Loaded LAST so it overrides modern-2026.css and any RTL sheet.
   Scope: Home (index), About, Contact + the global header/footer
   bits that appear on every page.
   ============================================================ */

/* ===========================================================
   00. JS-INJECTED MOBILE-DRAWER ELEMENTS — hide on desktop
   ===========================================================
   The layout's JS injects `.m-nav-header` and `.m-nav-close` into the
   navbar collapse container on every page load (so a re-opened drawer
   is ready instantly). Those elements MUST stay hidden on the desktop
   nav, otherwise the close-button and the orange header strip leak
   into the wide-screen header.
*/
.m-nav-header,
.m-nav-close {
    display: none !important;
}
/* Re-enable inside the mobile drawer (≤ 991.98px) */
@media (max-width: 991.98px) {
    .m-nav-header  { display: flex !important; }
    .m-nav-close   { display: inline-flex !important; }
}

/* ===========================================================
   01. HEADER — sticky compact mobile nav
   =========================================================== */
@media (max-width: 991.98px) {

    /* Make the legacy main nav truly sticky on scroll, with a glassy look */
    .navbar.main_menu.header_overlay {
        position: sticky !important;
        top: 0;
        z-index: 1040;
        backdrop-filter: saturate(150%) blur(14px);
        -webkit-backdrop-filter: saturate(150%) blur(14px);
        background: rgba(255,255,255,.86);
        border-bottom: 1px solid rgba(0,0,0,.05);
        padding: 8px 0 !important;
        transition: padding .25s var(--m-ease, ease), background .25s var(--m-ease, ease);
    }
    /* When the drawer opens, boost the entire navbar's stacking context so
       the drawer (z-index:99999 inside .navbar) actually outranks the
       backdrop (z-index:99998 on body::before). Without this the sticky
       navbar's stacking context caps everything inside it at z-index 1040
       in the body context — which the backdrop overpowers, blocking taps. */
    body.m-nav-open .navbar.main_menu.header_overlay {
        z-index: 999999;
    }
    .navbar.main_menu.is-scrolled {
        padding: 6px 0 !important;
        background: rgba(255,255,255,.94);
        box-shadow: 0 6px 22px -10px rgba(var(--theme-dark-rgb,42,31,23), .18);
    }

    /* Logo: tighter on mobile */
    .navbar-brand img {
        max-height: 44px;
        width: auto;
    }

    /* ========================================================
       SIDE DRAWER — premium glass panel
       ========================================================
       The collapsed Bootstrap menu becomes a fixed left/right
       drawer with a brand-tinted header strip, large clean
       nav items and a stylish action footer.
    */
    /* Solid white drawer — no gradients, no inset-shadows. The simpler the
       composition the more reliably mobile Webkit renders it without
       producing the ghosted/mirrored artefacts you can sometimes see when
       a parent has a translate transform plus filters/blurs. */
    /* ===== Drawer container — wider, premium feel ===== */
    .main_menu .navbar-collapse {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100vh;
        height: 100dvh;
        width: min(90vw, 380px);
        background: #ffffff;
        padding: 0;
        box-shadow: 0 0 60px rgba(0,0,0,.30);
        transform: translateX(-100%);
        transition: transform .35s cubic-bezier(.32, .72, 0, 1);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 99999;                      /* always on top of everything */
        display: flex !important;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
    }
    [dir="rtl"] .main_menu .navbar-collapse { transform: translateX(100%); }
    .main_menu .navbar-collapse.show { transform: translateX(0); }

    /* ===== Drawer header — bold gradient with prominent logo ===== */
    .main_menu .m-nav-header {
        position: relative;
        background: linear-gradient(135deg, #b8541a 0%, #8a3f12 100%);
        padding: 24px 60px;                  /* breathing room + room for close btn */
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-height: 150px;                   /* taller so the full logo fits */
    }
    /* Decorative dots pattern on the header for visual interest */
    .main_menu .m-nav-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
        background-size: 16px 16px;
        opacity: .6;
        pointer-events: none;
    }
    /* Show the FULL logo — no fixed height, just upper bounds so it never
       overflows the header. `object-fit: contain` guarantees no cropping. */
    .main_menu .m-nav-header__logo {
        max-height: 110px;                   /* room for tall logos */
        max-width: 100%;                     /* full available width */
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
    }
    .main_menu .m-nav-header__title {
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        margin: 0;
        position: relative;
        z-index: 1;
    }
    .main_menu .m-nav-close {
        position: absolute;
        top: 14px;
        inset-inline-end: 14px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,.20) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        padding: 0 !important;
        line-height: 1 !important;
        outline: 0 !important;
        z-index: 2;
        transition: background .2s ease;
    }
    .main_menu .m-nav-close:hover {
        background: rgba(255,255,255,.35) !important;
    }

    /* ===== Backdrop ===== */
    body.m-nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.60);
        z-index: 99998;                      /* just below the drawer */
        animation: m-fade .25s ease;
    }
    @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

    /* ===== Nav links — bigger, bolder, with icon prefix ===== */
    .main_menu .navbar-nav {
        margin: 0 !important;
        gap: 4px;
        padding: 20px 14px 12px;
        flex: 0 0 auto;            /* shrink to content so footer rises */
        list-style: none;
    }
    .main_menu .navbar-nav .nav-item { position: relative; }
    .main_menu .navbar-nav .nav-link {
        padding: 16px 18px !important;
        border-radius: 14px;
        font-size: 16px !important;
        font-weight: 600;
        color: #2a1f17 !important;
        transition: background .2s ease, color .2s ease;
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 14px;
        text-align: start;
    }
    /* Icon wrapper before each nav link (injected by JS as <span class="m-nav-ico">) */
    .main_menu .navbar-nav .nav-link .m-nav-ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #f7f3ee;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #b8541a;
        font-size: 14px;
        flex-shrink: 0;
        transition: background .2s ease, color .2s ease;
    }
    .main_menu .navbar-nav .nav-link:hover {
        background: #faf5ee;
        color: #b8541a !important;
    }
    .main_menu .navbar-nav .nav-link:hover .m-nav-ico {
        background: #b8541a;
        color: #fff;
    }
    .main_menu .navbar-nav .nav-link.active {
        background: linear-gradient(135deg, #b8541a, #8a3f12);
        color: #fff !important;
        box-shadow: 0 10px 20px -8px rgba(184,84,26,.55);
    }
    .main_menu .navbar-nav .nav-link.active .m-nav-ico {
        background: rgba(255,255,255,.22);
        color: #fff;
    }
    /* Chevron arrow at the end of each link (RTL-aware) */
    .main_menu .navbar-nav .nav-link::after {
        content: "\f054";                      /* fa-chevron-right */
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        margin-inline-start: auto;
        font-size: 11px;
        opacity: .35;
        transition: transform .2s ease, opacity .2s ease;
    }
    [dir="rtl"] .main_menu .navbar-nav .nav-link::after {
        content: "\f053";                      /* fa-chevron-left in RTL */
    }
    .main_menu .navbar-nav .nav-link:hover::after,
    .main_menu .navbar-nav .nav-link.active::after {
        opacity: 1;
        transform: translateX(2px);
    }
    [dir="rtl"] .main_menu .navbar-nav .nav-link:hover::after,
    [dir="rtl"] .main_menu .navbar-nav .nav-link.active::after {
        transform: translateX(-2px);
    }

    /* ===== Section divider above footer ===== */
    .main_menu .menu_icon::before {
        content: attr(data-label);
        position: absolute;
        top: -10px;
        inset-inline-start: 18px;
        background: #fff;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #8c7a66;
    }

    /* ===== Action footer ===== sits directly below nav-links (not pinned to
       the bottom of the drawer). The drawer's remaining space is left empty
       so the user's eye lands on the action buttons immediately. */
    .main_menu .menu_icon {
        margin: 0 !important;
        padding: 22px 18px;
        border-top: 1px solid #ece4d6;
        background: #fbf8f3;
        gap: 10px;
        justify-content: flex-start !important;
        align-items: center;
        flex-shrink: 0;
        flex-wrap: wrap;
        list-style: none;
        position: relative;
    }
    .main_menu .menu_icon > li > a:not(.common_btn) {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #ece4d6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2a1f17;
        font-size: 16px;
        transition: background .2s ease, color .2s ease, transform .2s ease;
        position: relative;
        text-decoration: none;
    }
    .main_menu .menu_icon > li > a:not(.common_btn):hover {
        background: #b8541a;
        color: #fff;
        border-color: #b8541a;
        transform: translateY(-2px);
    }
    /* Cart count badge */
    .main_menu .menu_icon .topbar_cart_qty {
        position: absolute;
        top: -5px;
        inset-inline-end: -5px;
        min-width: 20px;
        height: 20px;
        background: #e0a82e;
        color: #2a1f17;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border: 2px solid #fff;
        line-height: 1;
    }
    /* Reservation full-width CTA */
    .main_menu .menu_icon > li > a.common_btn {
        flex: 1 1 100%;
        margin: 12px 0 0;
        text-align: center;
        padding: 16px 18px !important;
        border-radius: 14px !important;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        background: linear-gradient(135deg, #b8541a, #8a3f12) !important;
        color: #fff !important;
        box-shadow: 0 12px 24px -8px rgba(184,84,26,.55);
        text-decoration: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .main_menu .menu_icon > li > a.common_btn i {
        font-size: 14px;
    }

    /* Hamburger button — icon-only chip on mobile */
    .navbar-toggler {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 12px;
        background: var(--m-bg-2, #f7f3ee) !important;
        color: var(--m-text, #2a1f17);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(var(--theme-brand-rgb,184,84,26), .25) !important; }

    /* TOPBAR: trim to essentials on tiny screens — keep phone + lang only */
    .m-topbar { padding: 6px 0 !important; }
    .m-topbar__left .m-tb-text { display: none; }   /* hours/email take space */
    .m-topbar__left .m-tb-item:first-child {
        font-size: 11px;
        opacity: .85;
    }
    .m-topbar__right { gap: 8px !important; }
    .m-tb-phone__text small { display: none; }
    .m-tb-phone__text strong { font-size: 12px; }
}

/* ===========================================================
   02. HERO BANNER — quieter & taller usable area on phones
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__banner { padding-block: 30px !important; }
    .wsus__banner_overlay { padding: 18px 0 !important; }
    .wsus__banner_text { padding: 14px 0 !important; text-align: center; }
    .wsus__banner_text h1 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.18; }
    .wsus__banner_text h3 { font-size: clamp(15px, 4vw, 18px) !important; }
    .wsus__banner_text p { font-size: 14px; line-height: 1.6; }
    .wsus__banner_text ul { justify-content: center; }
    .wsus__banner_img .img { max-width: 78%; margin: 0 auto; }
    .banner_shape_1, .banner_shape_2 { display: none; }
}

/* ===========================================================
   03. CATEGORIES — Jahez/HungerStation-style swipe slider
   ===========================================================
   The home page already wraps categories in `.menu_filter`.
   On mobile we override its layout to a horizontal scroll
   container with snap + hidden scrollbar + sticky behaviour.
*/
.m-cat-slider {
    position: relative;
    margin-bottom: 22px;
}
/* Sticky behaviour kicks in once the section is in view.
   `--m-nav-h` is measured & set in JS on every resize/scroll so the slider
   always lands EXACTLY below the navbar — no overlap, no gap. */
@media (max-width: 991.98px) {
    .m-cat-slider.is-stuck {
        position: sticky;
        top: var(--m-nav-h, 64px);
        z-index: 30;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 8px 0 6px;
        margin-inline: -12px;
        padding-inline: 12px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 6px 14px -10px rgba(0,0,0,.1);
    }
}

/* Slider rail — scrolls horizontally, snap, no visible scrollbar.
   Targets BOTH the home page (`.menu_filter > button`) AND the products
   listing page (`.m-category-chips > .m-chip`) so the same swipe behaviour
   appears on every category strip. */
@media (max-width: 991.98px) {
    .m-cat-slider .menu_filter,
    .m-cat-slider .m-category-chips {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        -webkit-overflow-scrolling: touch;
        padding: 6px 16px 14px !important;
        margin: 0 -16px 8px !important;
        gap: 12px !important;
        scrollbar-width: none;
    }
    .m-cat-slider .menu_filter::-webkit-scrollbar,
    .m-cat-slider .m-category-chips::-webkit-scrollbar { display: none; }

    /* Wider chips — Jahez-style spacious pills with min-width so even short
       category names ("All", "Hot") get a generous touch target. */
    .m-cat-slider .menu_filter button,
    .m-cat-slider .m-category-chips .m-chip {
        flex-shrink: 0 !important;
        scroll-snap-align: start;
        min-width: 110px;
        padding: 14px 26px !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        border-radius: 18px !important;
        white-space: nowrap;
        letter-spacing: .015em;
        justify-content: center;
        line-height: 1.2 !important;
    }

    /* Tighter dot before label so the wider chip stays balanced */
    .m-cat-slider .menu_filter button::before {
        width: 7px !important;
        height: 7px !important;
    }

    /* Active chip: solid + slight scale so it pops on a busy rail */
    .m-cat-slider .menu_filter button.active,
    .m-cat-slider .m-category-chips .m-chip.active {
        transform: scale(1.05);
        box-shadow: 0 10px 22px -6px rgba(var(--theme-brand-rgb,184,84,26), .55);
        min-width: 120px;
    }
}

/* Tiny phones (< 380px): trim padding so 1.5 chips still fit on screen */
@media (max-width: 380px) {
    .m-cat-slider .menu_filter button,
    .m-cat-slider .m-category-chips .m-chip {
        min-width: 100px;
        padding: 12px 20px !important;
        font-size: 13.5px !important;
    }

    /* Soft fade hints at the edges so users know more chips exist */
    .m-cat-slider::before,
    .m-cat-slider::after {
        content: "";
        position: absolute;
        top: 0; bottom: 12px;
        width: 28px;
        z-index: 2;
        pointer-events: none;
    }
    .m-cat-slider::before {
        inset-inline-start: 0;
        background: linear-gradient(to right, #fff, rgba(255,255,255,0));
    }
    .m-cat-slider::after {
        inset-inline-end: 0;
        background: linear-gradient(to left, #fff, rgba(255,255,255,0));
    }
    [dir="rtl"] .m-cat-slider::before {
        background: linear-gradient(to left, #fff, rgba(255,255,255,0));
    }
    [dir="rtl"] .m-cat-slider::after {
        background: linear-gradient(to right, #fff, rgba(255,255,255,0));
    }
}

/* Desktop: still allow the slider container without enforcing scroll */
@media (min-width: 992px) {
    .m-cat-slider .menu_filter {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===========================================================
   04. TOOLBAR LAYOUT — slider full-width, toggle centered below
   ===========================================================
   Stack the filter toolbar vertically on EVERY screen size:
     1) categories slider on top (full width)
     2) grid/list toggle centered below it
   This gives the slider all available room and stops the toggle
   from competing for horizontal space on narrow phones.
*/
.m-filter-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;       /* slider stretches full-width */
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}
.m-filter-toolbar > .m-cat-slider {
    width: 100%;
    flex: 1 1 100%;
    margin-bottom: 0 !important;
}
.m-filter-toolbar > .m-view-toggle {
    align-self: center;                    /* center the toggle pill */
    margin: 0 auto;
}

/* Mobile: keep the toggle visible (override legacy hide-on-mobile rule) */
@media (max-width: 575.98px) {
    .m-view-toggle {
        display: inline-flex !important;
        padding: 3px !important;
    }
    .m-view-toggle__btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px;
    }
    .m-filter-toolbar { gap: 10px !important; margin-bottom: 18px !important; }
}

/* ===========================================================
   05. PRODUCT GRID — tighter spacing, 2-up grid on phones
   =========================================================== */
@media (max-width: 575.98px) {
    .m-view-grid { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
    .m-view-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .wsus__menu_item .wsus__menu_item_text { padding: 10px 12px !important; }
    .wsus__menu_item .title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2;
    }
    .wsus__menu_item .price {
        font-size: 14px !important;
    }
    .wsus__add_btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}

/* ===========================================================
   06. SECTIONS — tighter vertical rhythm on phones
   =========================================================== */
@media (max-width: 767.98px) {
    .mt_95, .xs_mt_65 { margin-top: 50px !important; }
    .mt_100, .xs_mt_70 { margin-top: 50px !important; }
    .mb_45, .mb_50 { margin-bottom: 22px !important; }
    .pt_100, .xs_pt_70 { padding-top: 48px !important; }
    .pb_100, .xs_pb_70 { padding-bottom: 48px !important; }

    .wsus__section_heading h2 {
        font-size: clamp(22px, 6.5vw, 30px) !important;
        line-height: 1.2;
    }
    .wsus__section_heading h4 {
        font-size: 13px !important;
        letter-spacing: 2px;
    }
    .wsus__section_heading p {
        font-size: 14px !important;
    }
}

/* ===========================================================
   07. ABOUT PAGE — mobile polish
   =========================================================== */
@media (max-width: 767.98px) {
    .wsus__breadcrumb { padding-block: 60px !important; }
    .wsus__breadcrumb_text h1 { font-size: clamp(26px, 7vw, 36px) !important; }
    .wsus__breadcrumb_text ul { justify-content: center; flex-wrap: wrap; gap: 4px 10px; }

    .m-about-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }
    .m-about-imgwrap {
        max-width: 92%;
        margin: 0 auto;
    }
    .m-about-experience {
        font-size: 13px;
        padding: 12px 16px !important;
    }
    .m-about-experience strong { font-size: 22px !important; }

    /* Stat / counter cards stack 2-up on phones, 1-up on tiny screens */
    .m-about-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .m-about-stat__num { font-size: 28px !important; }
    .m-about-stat__label { font-size: 12px !important; }
}
@media (max-width: 380px) {
    .m-about-stats { grid-template-columns: 1fr !important; }
}

/* ===========================================================
   08. CONTACT PAGE — mobile polish
   =========================================================== */
@media (max-width: 767.98px) {
    .m-contact-intro { padding-block: 36px !important; }
    .m-contact-intro__title { font-size: clamp(22px, 6.5vw, 30px) !important; }
    .m-contact-intro__lead  { font-size: 14px !important; }

    .m-contact-tiles {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .m-contact-tile {
        padding: 14px 16px !important;
        gap: 14px;
    }
    .m-contact-tile__icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px;
    }
    .m-contact-tile__body small { font-size: 11px !important; }
    .m-contact-tile__body strong { font-size: 14px !important; }

    /* Form inputs big enough to never zoom on iOS (≥16px font-size) */
    .m-contact-form input,
    .m-contact-form textarea,
    .m-contact-form select {
        font-size: 16px !important;
        padding: 14px 16px !important;
        border-radius: 14px !important;
    }
    .m-contact-form button[type="submit"] {
        width: 100%;
        padding: 14px !important;
        font-size: 15px !important;
    }
}

/* ===========================================================
   09. FOOTER — collapsed vertical layout on phones
   =========================================================== */
@media (max-width: 767.98px) {
    footer .pt_100 { padding-top: 50px !important; }
    footer .pb_100 { padding-bottom: 30px !important; }
    .wsus__footer_content { margin-bottom: 26px; text-align: start; }
    .wsus__footer_content h3 {
        font-size: 16px !important;
        margin-bottom: 12px;
    }
    .wsus__footer_content ul li a { font-size: 14px; }

    .wsus__footer_bottom_text {
        flex-direction: column !important;
        gap: 10px;
        text-align: center;
        padding: 16px 0;
    }
    .wsus__footer_bottom_text ul { justify-content: center; }
}

/* ===========================================================
   10. SCROLL-TO-TOP — circular button on phones (cleaner)
   ===========================================================
   The arrow icon is already provided by `.wsus__scroll_btn::before`
   in modern-2026.css — DO NOT add another pseudo-element here, or
   two arrows will render side-by-side.
*/
@media (max-width: 575.98px) {
    .wsus__scroll_btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;        /* hides the "Go to top" text label */
        position: fixed;
        inset-inline-end: 14px;
        bottom: 14px;
        z-index: 50;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ===========================================================
   11. TAP TARGETS & ACCESSIBILITY
   =========================================================== */
@media (max-width: 767.98px) {
    /* All interactive controls min 40×40 for touch */
    a, button { -webkit-tap-highlight-color: rgba(var(--theme-brand-rgb,184,84,26), .15); }

    /* Prevent body scroll when the side drawer is open */
    body.m-nav-open { overflow: hidden; }
}