/* ==========================================================================
   NUTMOND — MOBILE RESPONSIVE OVERRIDES
   Applies to: header.php, index.php, footer.php
   Loaded AFTER all other stylesheets (see header.php <link> order) so these
   rules can safely override desktop-only styles that ship with the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL / SAFETY NET
   -------------------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

/* NOTE: do NOT also set overflow-x: hidden on body — with html already
   set to hidden, an additional overflow value on body creates its own
   (non-scrolling) overflow box around all page content, which silently
   breaks position: sticky for anything inside it (like #header below).
   html's rule alone already clips horizontal bleed at the viewport level. */

img {
    max-width: 100%;
    height: auto;
}

/* Bootstrap columns that only ship with a single breakpoint class
   (e.g. col-lg-6 with no sm/md variant) have no width/gutter at all
   below that breakpoint. This keeps content from bleeding into the
   row's negative margins on phones. */
@media (max-width: 991px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* --------------------------------------------------------------------------
   1. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Header is `header-transparent` by default (meant to sit over the
       hero on desktop). On mobile we pin it to the top of the viewport
       on scroll, so give it a solid background — otherwise page content
       would show through behind the nav once it's stuck. */
    #header {
        position: fixed !important;
        top: 0 !important;
        z-index: 999 !important;
        background: #1a3a20;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    /* Fixed positioning takes #header out of normal document flow, so
       without this every page's content starts at the very top of the
       body and renders underneath the header instead of below it. The
       --nm-header-h variable is the header's real measured height (set
       by a small script in footer.php, so it always matches the actual
       rendered header instead of a guessed pixel value that drifts out
       of sync whenever the header's content changes). The static 90px
       is only a fallback for the instant before that script runs. */
    body {
        padding-top: var(--nm-header-h, 90px);
    }

    /* header-fix-css.css sets `.header-transparent { position: relative !important; }`
       at this same breakpoint. Our #header rule above already outranks it on
       specificity (ID > class), but this direct override matches it selector-
       for-selector as a second line of defense in case of caching/load-order
       issues, since this file loads after header-fix-css.css. */
    .header-transparent {
        position: sticky !important;
        top: 0 !important;
    }

    .header .navbar-container {
        padding: 10px 0;
    }

    .header .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo column + nav column share one line with the toggler */
    .header .col-lg-5,
    .header .col-lg-2 {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    /* Reorder header columns: logo left, then one tight right-hand
       cluster of [cart, account, toggler] in that order.
       DOM order is [nav+toggler, logo, cart/account] so we override with `order`.
       Anchored to #header (ID selector) so this always outranks any
       theme CSS (master.css / style-12.css) that might otherwise win
       a specificity tie against a class-only selector. */
    #header .row > .col-lg-2 {
        order: -1 !important;
        flex-shrink: 0;
    }

    #header .row > .col-lg-5:nth-child(3) {
        order: 2 !important;
        flex-shrink: 0;
    }

    #header .row > .col-lg-5:nth-child(1) {
        order: 3 !important;
        flex-shrink: 0;
        margin-left: 6px;
    }

    /* Right-hand cluster: cart + account, evenly spaced, right-aligned
       flush against the toggler so nothing floats away on its own.
       FIX: master6471.css has `.header-transparent .header-nav-right-info.float-right
       { display: none; }` at its 767px breakpoint (3 classes = 0,3,0 specificity),
       which was beating this rule's plain 1-class selector (0,1,0) regardless of
       load order — that's what was hiding the cart/account icons on mobile.
       Anchoring to #header (ID) + !important guarantees this always wins. */
    #header .header-nav-right-info,
    #header .header-nav-right-info.float-right {
        float: none !important;
        display: flex !important;
        align-items: center;
        gap: 14px;
       
        margin: 0;
        padding: 0;
    }

    .header-nav-right-info li {
        display: flex;
        align-items: center;
    }
.header-transparent .header-nav-right-info li a {
  color: #1a3a20 !important;
}
    /* Account icon: match size/weight to the cart icon so the pair
       reads as one consistent icon group, not two mismatched buttons */
    .navSidebar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
    }

    /* Remove Bootstrap's auto-caret on the account toggle — with a
       distinct user icon now in place, the extra arrow is just noise */
    .navSidebar-button.dropdown-toggle::after {
        display: none;
    }

    /* Cart + account: identical round white buttons with a dark-green
       icon, so the two read as one matched icon group in the center
       of the header, between the logo and the menu button. */
    .header-icon-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        color: #1a3a20 !important;
        font-size: 15px;
        position: relative;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
    }

    /* Badge shape/position only — NOT color. Color is decided by
       has-items state, defined once in header-fix-css.css so cart and
       wishlist badges behave identically at every breakpoint:
         - default (count = 0): .header-fix-css.css base color
         - has-items (count > 0): yellow, via .has-items class set in
           header.php from $nm_cart_count / $nm_wishlist_count
       This file only ever loaded a hardcoded gold here regardless of
       count, which is what made every badge look "has items" all the
       time on mobile even with an empty cart/wishlist — removed. */
    .header-icon-btn sup {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    /* Menu (hamburger) button: sits at the far right, styled as a
       square button so it reads distinctly from the round cart/account
       icons in the middle of the header. */
    .header-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        flex-shrink: 0;
    }

    .header-menu-btn .navbar-toggler-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
    }

    /* NOTE ON THE LOGO: master6471.css swaps which logo shows on mobile
       (hides #col-lg-2 .nav-logo, force-shows the .navbar-brand duplicate
       instead), and two rounds of CSS-only overrides here weren't
       reliably beating it — possibly a caching issue, possibly a class-
       state edge case impossible to diagnose without live DOM access.
       This is now fixed directly in header.php with inline styles on the
       .col-lg-2 / .nav-logo / img elements (and on .navbar-brand to hide
       it), since inline styles can't be out-specificity'd by any external
       stylesheet. See header.php — no CSS change needed here anymore. */

    /* Kill Bootstrap's row negative margin + column gutter so the
       logo column truly starts at the container edge instead of
       being offset inward. */
    .header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #header .row > .col-lg-2 {
        order: -1 !important; /* always first, ahead of any other order value */
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .nav-logo {
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* header-fix-css.css sets `.nav-logo img { max-height: 140px !important; }`
       which (because it's !important) wins over this file's old 60px rule
       even though this stylesheet loads last. Match its specificity/!important
       here so the mobile size actually applies. */
    .header .nav-logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    .navbar-toggler {
        padding: 6px 10px;
        border: none;
    }

    .navbar-toggler-icon {
        font-size: 22px;
        color: #fff;
    }

    /* Collapsed mobile menu panel — a dropdown pinned below the header.
       IMPORTANT: this uses position:fixed (viewport-relative), not
       position:absolute. Absolute was tried first and seemed right
       since #header itself is fixed — but Bootstrap's own .navbar
       class sets `position: relative` on the <nav> that wraps this
       menu (see bootstrap6471.css), and that nav sits BETWEEN this
       panel and #header. Being the nearer positioned ancestor, that
       nav — not #header — became the actual containing block, which
       made the open menu unreliable (able to shift/disappear) as the
       page scrolled. position:fixed sidesteps that entirely: it's
       anchored to the viewport itself, immune to any positioned
       ancestor in between, so it can no longer be knocked around by
       scrolling regardless of what other CSS touches this chain later.
       --nm-header-h is the same measured header-height variable used
       for the body offset earlier (see footer.php), so this sits
       flush against the real header regardless of its exact height. */
    #primary-nav.collapse.show,
    #primary-nav.collapsing {
        position: fixed;
        top: var(--nm-header-h, 90px);
        left: 0;
        right: 0;
        background: #1a3a20;
        margin-top: 0;
        padding: 10px 15px 15px;
        border-radius: 0 0 8px 8px;
        width: auto;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 998;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    /* Keep the toggler above the dropdown panel and above anything else
       in the header, so it's always visible and clickable to close the
       menu again. */
    .header-menu-btn,
    button[data-target="#primary-nav"] {
        position: relative;
        z-index: 999;
    }

    .header .main-menu {
        flex-direction: column;
        width: 100%;
    }

    .header .main-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header .main-menu > li:last-child {
        border-bottom: none;
    }

    .header .main-menu > li > a {
        display: block;
        padding: 12px 4px;
        color: #fff !important;
    }

    /* Right-side info (order btn / cart / account) */
    #header .header-nav-right-info,
    #header .header-nav-right-info.float-right {
        float: none !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .header-nav-right-info .header-book-btn {
        display: none;
    }

    .header-nav-right-info .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Keep the account dropdown on-screen instead of overflowing right */
    .user-account-menu {
        right: -10px;
        left: auto;
        min-width: 150px;
    }

    /* --------------------------------------------------------------------
       1b. FALLBACK — works even if header.php still has the ORIGINAL
       markup (span.icon.icon-cart / i.icon-menu) instead of the updated
       Font Awesome classes. The custom "icon" font these classes point to
       does not appear to be rendering on this build, so instead of
       relying on that font we draw the icons ourselves with Font
       Awesome 5 (already loaded in <head> as font-awesome-5-all-css)
       via ::before content, and turn the surrounding links into visible
       round/square buttons.

       These are targeted by FUNCTIONAL attributes (href, id, data-target)
       rather than CSS classes, because those attributes are wired to real
       PHP/JS behavior (the cart link, the Bootstrap dropdown, the
       Bootstrap collapse toggle) and are far less likely to have drifted
       from what this stylesheet expects than a styling class name would
       be. This block does not require any specific class name to exist
       on these elements at all.
       -------------------------------------------------------------------- */

    /* Cart button — the link to cart.php */
    a[href="cart.php"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50%;
        background: #fff;
        position: relative;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        overflow: visible;
    }

    a[href="cart.php"] i {
        font-size: 0 !important;
        color: transparent !important;
    }

    a[href="cart.php"]::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f07a";
        font-size: 15px;
        color: #1a3a20;
        line-height: 1;
    }

    /* Badge (sup) styling now lives in one place: header-fix-css.css's
       `.header-icon-btn sup` / `.has-items` rules, which apply to every
       icon (cart, wishlist) at every width. This used to hardcode a
       permanent gold background here specifically for the cart icon —
       that's stale now the count-based color logic exists, and it was
       overriding that logic (a[href="cart.php"] sup is more specific
       than .header-icon-btn sup, so it always won regardless of the
       actual count). Removed so cart follows the same real logic as
       every other icon instead of always showing gold. */

    /* Account button — the dropdown toggle with id="userAccountToggle" */
    #userAccountToggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50%;
        background: #fff;
    }

    #userAccountToggle * {
        font-size: 0 !important;
        color: transparent !important;
    }

    #userAccountToggle::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
        font-size: 15px;
        color: #1a3a20;
        line-height: 1;
    }

    #userAccountToggle::after {
        display: none !important;
    }

    /* Menu (hamburger) button — the button that toggles #primary-nav */
    button[data-target="#primary-nav"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    button[data-target="#primary-nav"] * {
        font-size: 0 !important;
        color: transparent !important;
    }

    button[data-target="#primary-nav"]::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0c9";
        font-size: 16px;
        color: #fff;
        line-height: 1;
    }
}

@media (max-width: 575px) {
    .header-nav-right-info .header-book-btn {
        display: none;
    }

    .header .nav-logo img {
        max-height: 36px !important;
    }
}

/* --------------------------------------------------------------------------
   2. HERO SLIDER (homepage swiper)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .nutmond-slider-wrapper .swiper,
    .swiper {
        min-height: 100dvh;
        height: 100dvh;
    }

    .slider-container {
        padding: 0 20px;
    }

    .price-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 20px;
    }

    .menu-options {
        max-width: 100%;
    }

    .price-box {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .main-title {
        font-size: 2.3rem;
        margin-bottom: 16px;
    }

    .tagline {
        font-size: 0.95rem;
    }

    .image-wrapper {
        max-width: 500px;
    }

    /* Thin out the floating particle animation so it doesn't clutter
       a small screen or overlap the text/price bar. */
    .nut-particle {
        width: 42px !important;
        height: 42px !important;
    }

    .nut-particle.sm { width: 30px !important; height: 30px !important; }
    .nut-particle.xs { width: 22px !important; height: 22px !important; }
    .nut-particle.lg { width: 54px !important; height: 54px !important; }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
        top: auto !important;
        bottom: 12px;
    }

    .swiper-button-prev { left: 12px; }
    .swiper-button-next { right: 12px; }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.8rem;
    }

    .image-wrapper {
        max-width: 400px;
    }

    .price-bar {
        padding: 14px 16px;
    }

    .menu-options p {
        font-size: 0.85rem;
    }

    /* Hide the smallest floating particles entirely on very small phones —
       keeps the hero readable without visual clutter. */
    .nut-particle.xs,
    .nut-particle.sm {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3. TWO-COLUMN ELEMENTOR SECTIONS (Welcome / Our Promise / Delivery)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .elementor-element-9e63d75 > .elementor-container,
    .elementor-column-gap-default {
        flex-wrap: wrap;
    }

    .elementor-column.elementor-col-50 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100%;
    }

    /* Sections that force display:flex via inline style (Our Promise /
       Delivery) should stack vertically instead of side-by-side.
       DOM order already puts text before image, which reads correctly
       stacked, so no reordering is needed. */
    .elementor-element[style*="display:flex"] {
        flex-direction: column;
    }

    .ts-section-title.title-left,
    .ts-section-title[style*="text-align:left"],
    .section-title[style*="text-align:left"] {
        text-align: center !important;
    }

    .elementor-widget-wrap[style*="padding: 40px 30px"] {
        padding: 30px 20px !important;
    }
}

/* --------------------------------------------------------------------------
   4. PRODUCT SLIDER (owl-carousel)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ts-product-item.ts-product-slider {
        padding: 0 10px;
    }

    .ts-product-single-item {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   5. FOOD MENU TABS + MENU GRID
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .nav-menu-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 8px;
    }

    .nav-menu-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .nav-menu-tabs li.col {
        flex: 0 0 auto;
        width: auto;
        padding: 0 10px;
    }

    .nav-menu-tabs a {
        white-space: nowrap;
        font-size: 13px;
    }

    .nav-menu-tabs img {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 991px) {
    /* col-xs-12/col-sm-6/col-md-6 menu blocks have no explicit gutter
       below the 576px breakpoint — restore it explicitly. */
    .menu-block {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .menu-block.col-sm-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .menu-block .inner-box .text {
        padding-right: 0;
    }

    .menu-block .info.clearfix {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
   6. TESTIMONIALS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* style-12.css forces the testimonial columns to a fixed 50/50 split
       at every screen size — override that so it stacks on tablets/phones. */
    .testimonial-carousel.owl-carousel .owl-item .row {
        flex-wrap: wrap;
    }

    .testimonial-carousel.owl-carousel .owl-item .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .testimonial-thumb {
        margin-bottom: 16px;
    }

    .testimonial-author-content.two {
        padding: 10px 5px;
        text-align: center;
    }

    .testimonial-footer.media {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .testimonial-author-content.two .testimonial-text {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* --------------------------------------------------------------------------
   7. GALLERY
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gallery-columns-4 .gallery-item {
        max-width: 50% !important;
        width: 50% !important;
        box-sizing: border-box;
        padding: 5px;
    }
}

@media (max-width: 480px) {
    .gallery-columns-4 .gallery-item {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   8. BLOG / NEWS CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .latest-blog .col-lg-4 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 24px;
    }

    .latest-blog .col-lg-4:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ts-footer .footer-widget {
        text-align: center;
        margin-bottom: 24px;
    }

    .ts-footer .col-lg-3,
    .ts-footer .col-md-6 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .footer-logo-area {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .ts-footer .row.copyright {
        text-align: center;
    }

    .ts-footer .copyright-text {
        margin-bottom: 16px;
    }

    #footer-menu.footer-menu {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 0;
        margin-bottom: 12px;
    }

    .footer-social ul {
        justify-content: center;
        display: flex;
        gap: 10px;
    }

    .ts-footer .col-lg-6 {
        width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   10. SHOP PAGE — hide sidebar on mobile/tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .shop-section .col-lg-3 {
        display: none !important;
    }

    .shop-section .col-lg-9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .ts-footer {
        padding: 30px 0 15px;
    }

    .footer-widget .widget-title {
        font-size: 16px;
    }

    .BackTo {
        width: 38px;
        height: 38px;
        line-height: 38px;
    }
        .tab-content{
        padding:0px 20px;
    }
}