/* Clean, light two-row header + full-width image-grid mega menu, modeled on
       friendsoftea.de (desktop only - on mobile the collapse stays hidden and
       the burger icon still opens the offcanvas category drawer instead). */
    .modern-navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        /* Without this, the browser's scroll anchoring "helpfully" nudges
           scrollTop to compensate whenever row 1's height changes (it's
           visible in the viewport when that happens) - that nudge re-fires
           our scroll handler, which can re-cross the threshold and toggle
           again, a few times, before it settles. This opts the header out
           of that compensation so our own toggle is the only thing moving it. */
        overflow-anchor: none;
    }

    .modern-navbar .navbar-collapse {
        flex-direction: column;
        align-items: stretch;
    }

    /* Row 1: logo left, search centered, account icons right. Collapses away
       on scroll (see .is-scrolled, toggled by mega_menu.js - it only commits
       to a state after a short dwell, so this transition isn't retriggered
       rapidly by momentary scroll jitter). */
    .navbar-top-row {
        display: flex;
        align-items: center;
        width: 100%;
        padding: .65rem 0;
        max-height: 100px;
        overflow: hidden;
        opacity: 1;
        transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
    }

    .modern-navbar.is-scrolled .navbar-top-row {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
    }

    .navbar-logo {
        flex: 0 0 auto;
        margin-right: 1.5rem;
        display: inline-flex;
    }

    .navbar-search-wrap {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }

    .navbar-search-wrap form {
        width: 100%;
        max-width: 480px;
        display: flex;
    }

    .modern-navbar .form-control {
        border-radius: 999px;
        border: 1px solid #e5e5e5;
        padding-left: 1rem;
    }

    .navbar-search-wrap .btn {
        border-radius: 999px;
        margin-left: -2.2rem;
        z-index: 3;
        background: transparent;
        border: none;
        color: #495057;
        flex: 0 0 auto;
    }

    .navbar-search-wrap .form-control {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Mobile search bar - same pill-input + overlapping icon-button
       treatment as the desktop one above. Doesn't touch .mobile-search's own
       display property (that's a sitewide responsive toggle); this only
       fixes the internal layout once it's shown. Without it the input stays
       stuck at a fixed 5rem (sitewide rule) next to Bootstrap's raw green
       .btn-success, which is the "stitched together" mismatch. */
    /* Mobile row: toggler | search | icons, ONE line. Two separate causes of
       the broken stack this replaces: the sitewide .mobile-search rule only
       toggles display, so the div sized itself to the input's natural width -
       and .navbar itself is flex-wrap:wrap, so the slightest overflow dropped
       items onto extra lines in DOM-order-but-wrapped positions (icons under
       the search pill, the submit magnifier next to the burger). nowrap makes
       one row the only possible outcome; the search then takes exactly the
       leftover space and shrinks on narrow phones instead of pushing anything
       out. Scoped to the width range in which these mobile elements are
       visible at all (styles.css shows them <768px). */
    @media (max-width: 767.98px) {
        .modern-navbar {
            flex-wrap: nowrap;
            align-items: center;
        }

        /* display INSIDE the media query only: the sitewide rule hides
           .mobile-icons on desktop with a lower-specificity selector, and an
           unscoped display:flex here overrode it - the flag/account/cart
           trio then showed twice, next to the desktop account icons. */
        .modern-navbar .mobile-icons {
            display: flex;
        }
    }

    .modern-navbar .mobile-search {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 .5rem;
    }

    .modern-navbar .mobile-icons {
        flex: 0 0 auto;
        align-items: center;
        gap: .9rem;
        white-space: nowrap;
    }

    .modern-navbar .mobile-search form {
        display: flex;
        align-items: center;
        width: 100%;
        /* THE line that was missing: the form carries Bootstrap's .form-inline,
           and .form-inline is flex-flow: row WRAP. Our display:flex above
           overrode the display half but left wrap in force - so once the row
           got tight, the submit button wrapped UNDER the input: search pill on
           its own line, a stray magnifier below it, and the whole bar twice as
           tall with the icons floating mid-height beside it. */
        flex-wrap: nowrap;
    }

    .modern-navbar .mobile-search .form-control {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .modern-navbar .mobile-search .btn {
        border-radius: 999px;
        margin-left: -2.4rem;
        z-index: 3;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #495057;
        flex: 0 0 auto;
    }

    .navbar-account-icons {
        flex: 0 0 auto;
        margin-left: 1.5rem;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .nav-label {
        margin-left: .35rem;
    }

    /* P0 overflow fix (SEO/UX audit fig. 1): between the md breakpoint and
       ~1250px the labeled account links + 480px search pill overflowed the
       viewport edge. In that band the text labels drop (icons + the 2-letter
       language code remain self-explanatory), the search pill narrows and the
       gaps tighten - nothing can push past the edge, no horizontal scroll. */
    @media (min-width: 768px) and (max-width: 1249.98px) {
        .nav-label {
            display: none;
        }

        .navbar-search-wrap form {
            max-width: 340px;
        }

        .navbar-logo {
            margin-right: 1rem;
        }

        .navbar-account-icons {
            margin-left: 1rem;
        }
    }

    /* Row 2: product categories - a frosted-glass strip (most visible once
       .modern-navbar is scrolled and page content passes behind it) with an
       outline-chip hover/active state, so it stays "glassy" rather than
       reading as a flat corporate color bar. */
    .navbar-bottom-row {
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0 1rem;
        background: rgba(255, 255, 255, .55);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border-top: 2px solid rgba(251, 143, 46, .4);
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    .category-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* box-shadow (not border) for the hover/open ring - a transparent
       border transitioning to a color on a border-radius:999px pill can
       render a seam/notch at one corner in some browsers. box-shadow
       follows the radius cleanly and has zero layout impact either way. */
    .category-nav-item {
        display: flex;
        align-items: center;
        margin: .4rem .2rem;
        border-radius: 999px;
        transition: background .2s ease, box-shadow .2s ease;
    }

    .category-nav-item:hover,
    .category-nav-item.open {
        box-shadow: inset 0 0 0 1.5px #fb8f2e;
        background: rgba(251, 143, 46, .1);
    }

    .category-nav-link {
        color: #1a1a1a !important;
        font-weight: 500;
        font-size: .95rem;
        white-space: nowrap;
        padding: .55rem .3rem .55rem .9rem !important;
    }

    .category-nav-link:hover {
        text-decoration: none;
        color: #1a1a1a !important;
    }

    .category-nav-caret-btn {
        background: none;
        border: none;
        color: #1a1a1a;
        padding: .55rem .9rem .55rem .1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .category-nav-caret {
        font-size: .6rem;
        transition: transform .2s ease;
    }

    /* Visibility is driven purely by JS toggling .open (immediate for
       first-row items, delayed for later rows - see mega_menu.js) rather
       than a plain CSS :hover rule, so a quick mouse pass-through over a
       lower row on the way to an already-open first-row panel doesn't
       instantly steal it. */
    .category-nav-item.open .category-nav-caret {
        transform: rotate(180deg);
    }

    .category-nav-item.open .category-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Anchored to the bottom of the whole navbar (.navbar is position:relative
       by default), i.e. below every wrapped row of top-level categories, not
       just the hovered row - see mega_menu.js for how row 2+ items reach it
       without instantly stealing an already-open row 1 panel. */
    .category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        z-index: 1200;
    }

    .category-dropdown-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 140px);
        justify-content: center;
        gap: 1.25rem;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        padding: 1.75rem 2.5rem;
    }

    .category-dropdown-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .6rem;
        padding: .5rem;
        border-radius: .65rem;
        text-decoration: none;
        color: #212529;
        transition: opacity .15s ease, transform .15s ease;
    }

    .category-dropdown-tile:hover {
        opacity: .7;
        transform: translateY(-2px);
        text-decoration: none;
        color: #212529;
    }

    .category-dropdown-tile-img {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border-radius: .75rem;
        background: #f1f3f5;
    }

    .category-dropdown-tile-name {
        font-size: .85rem;
        font-weight: 600;
        line-height: 1.25;
    }

    /* Mobile category drawer (the offcanvas the burger opens below the md
       breakpoint) - scoped to .mobile-category-drawer rather than editing
       the shared .bs-canvas rules in styles.css, since those are reused
       elsewhere (e.g. the cart flyout) and shouldn't change here. */
    .bs-canvas.mobile-category-drawer {
        width: 320px;
    }

    .mobile-category-drawer.bs-canvas-left {
        margin-left: -320px;
    }

    .mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.25rem;
        background: #fff;
        border-bottom: 1px solid #ececec;
        cursor: pointer;
    }

    .mobile-drawer-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1a1a1a;
    }

    .mobile-drawer-close {
        background: none;
        border: none;
        color: #1a1a1a;
        font-size: 1.05rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        cursor: pointer;
        transition: background .15s ease;
    }

    .mobile-drawer-close:hover {
        background: #f1f3f5;
    }

    .mobile-drawer-list {
        padding: .5rem 0 !important;
    }

    /* One row per top-level category = the link (navigates) + an optional
       expand button (toggles the subcategory accordion below it) - same
       split-affordance as the desktop nav link + caret, just inline instead
       of a flyout since there's no room for one here. */
    .mobile-drawer-row {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f3f5;
    }

    .mobile-drawer-item {
        display: flex;
        align-items: center;
        gap: .9rem;
        padding: .75rem 0 .75rem 1.25rem;
        flex: 1 1 auto;
        min-width: 0;
        color: #1a1a1a;
        text-decoration: none;
        transition: background .15s ease;
    }

    .mobile-drawer-item:hover,
    .mobile-drawer-item:active {
        background: rgba(251, 143, 46, .08);
        text-decoration: none;
        color: #1a1a1a;
    }

    .mobile-drawer-item-img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border-radius: .6rem;
        background: #f1f3f5;
        flex: none;
    }

    .mobile-drawer-item-name {
        flex: 1 1 auto;
        font-size: .92rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-drawer-item-arrow {
        color: #c7cdd4;
        font-size: .75rem;
        padding-right: 1.25rem;
    }

    .mobile-drawer-expand-btn {
        background: none;
        border: none;
        color: #fb8f2e;
        opacity: .75;
        padding: .9rem 1.25rem .9rem .5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        flex: none;
        transition: opacity .2s ease;
    }

    .mobile-drawer-row.open .mobile-drawer-expand-btn {
        opacity: 1;
    }

    .mobile-drawer-expand-caret {
        font-size: .75rem;
        transition: transform .2s ease;
    }

    .mobile-drawer-row.open .mobile-drawer-expand-caret {
        transform: rotate(180deg);
    }

    .mobile-drawer-subcats {
        display: none;
        flex-direction: column;
        background: #faf9f7;
        border-bottom: 1px solid #f1f3f5;
    }

    .mobile-drawer-row.open + .mobile-drawer-subcats {
        display: flex;
    }

    .mobile-drawer-subcat-link {
        padding: .6rem 1.25rem .6rem 3.4rem;
        color: #495057;
        font-size: .87rem;
        text-decoration: none;
        border-top: 1px solid #f1f3f5;
    }

    .mobile-drawer-subcat-link:first-child {
        border-top: none;
    }

    .mobile-drawer-subcat-link:hover,
    .mobile-drawer-subcat-link:active {
        background: rgba(251, 143, 46, .12);
        color: #1a1a1a;
        text-decoration: none;
    }

    /* Dark brand theme (footer-style: charcoal #1f2124 + orange #fb8f2e bottom line,
       mirroring the footer's orange top line). STANDARD for new-template sessions
       since 2026-08-05; ?nav_version=light shows the white variant for comparison.
       Legacy stays pixel-identical (no .nf-dark there). !important where the
       shared markup carries inline colors/backgrounds. */
    .modern-navbar.nf-dark {
        background-color: #1f2124 !important;
        border-bottom: 3px solid #fb8f2e;
    }

    /* Logo (new template): the unchanged full logo + the footer-brand orange dot
       right behind it. Offsets derived from the logo proportions (600x248, text
       baseline at y=215 -> at 60px display height the baseline sits 8px above the
       bottom edge; letters ~30px), so the dot sits on the logo's own baseline. */
    .nf-logo-wrap {
        display: inline-flex;
        align-items: flex-end;
    }

    .nf-logo-full {
        height: 60px;
        width: auto;
        display: block;
    }

    /* A real square (the "." glyph is round in Montserrat), sitting on the logo
       text's baseline. */
    .nf-logo-dot {
        width: 9px;
        height: 9px;
        background: #fb8f2e;
        display: inline-block;
        margin: 0 0 8px 4px;
    }

    .navbar-logo:hover {
        text-decoration: none;
    }

    /* Logo as white silhouette on the dark bar - the orange dot stays orange. */
    .modern-navbar.nf-dark .navbar-logo img {
        filter: brightness(0) invert(1);
    }

    .modern-navbar.nf-dark .navbar-account-icons a,
    .modern-navbar.nf-dark .mobile-icons a {
        color: #e9ecef !important;
    }

    .modern-navbar.nf-dark .navbar-account-icons a:hover,
    .modern-navbar.nf-dark .mobile-icons a:hover {
        color: #fb8f2e !important;
        text-decoration: none;
    }

    .modern-navbar.nf-dark .form-control {
        border-color: transparent;
    }

    .modern-navbar.nf-dark .navbar-toggler {
        border-color: rgba(255, 255, 255, .2);
    }

    .modern-navbar.nf-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Row 2 blends into the dark bar - no frosted strip, no mid lines; the orange
       border on .nf-dark is the only accent. */
    .modern-navbar.nf-dark .navbar-bottom-row {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: none;
        border-bottom: none;
    }

    .modern-navbar.nf-dark .category-nav-link,
    .modern-navbar.nf-dark .category-nav-caret-btn {
        color: #f1f3f5 !important;
    }

    /* styles.css draws a #F5F5F5 separator (border-right) between nav items -
       invisible on white, but on dark it shows up curved along the item's
       999px border-radius (the "white half circle" behind the name). Off here. */
    .modern-navbar.nf-dark .navbar-nav > .nav-item:not(:last-child) {
        border-right: none;
    }

    /* Hover/open keeps the base pill treatment (orange ring + tint) - it reads
       well on dark too, slightly stronger tint. */
    .modern-navbar.nf-dark .category-nav-item:hover,
    .modern-navbar.nf-dark .category-nav-item.open {
        background: rgba(251, 143, 46, .16);
    }

    /* Mega dropdown goes dark gray too, tiles in light text. */
    .modern-navbar.nf-dark .category-dropdown {
        background: #26282b;
        box-shadow: 0 16px 32px rgba(0, 0, 0, .45);
    }

    .modern-navbar.nf-dark .category-dropdown-tile,
    .modern-navbar.nf-dark .category-dropdown-tile:hover {
        color: #ffffff;
    }

    .modern-navbar.nf-dark .category-dropdown-tile-img {
        background: #33363b;
        transition: box-shadow .15s ease;
    }

    /* Hover on dark: no dimming (reads as disabled) - instead the orange ring
       around the image chip (same hover vocabulary as the category pills),
       keeping the base lift. */
    .modern-navbar.nf-dark .category-dropdown-tile:hover {
        opacity: 1;
    }

    .modern-navbar.nf-dark .category-dropdown-tile:hover .category-dropdown-tile-img {
        box-shadow: 0 0 0 2px #fb8f2e;
    }

    /* Minimal variant (one-page checkout, Navbar::init('checkout')): row 1 only - no category
       mega menu, not sticky - so the checkout shares this navbar instead of a static copy. */
    .modern-navbar.navbar-minimal { position: static; }
    .modern-navbar.navbar-minimal .navbar-bottom-row,
    .modern-navbar.navbar-minimal .navbar-toggler { display: none; }