/* ============================================================================
   fq-panel — the shared fold-out menu panel (all templates, one design).

   Built from Jenny's approved design (Claude Design project 9529aec2,
   menu-business1.html), direction "C": level 1 opens as an accordion, level 2
   and deeper slide the panel sideways with a back button and a breadcrumb. In
   the narrow drawer variant everything slides, because there is no room to
   indent.

   The panel is NOT the server-rendered <ul class="fq-menu"> itself. fq-panel.js
   reads that menu (or, on beauty1, Crafto's .navbar-nav) and builds this in the
   BODY — deliberately outside the header, because a sticky header carries a
   transform and a transformed ancestor breaks "position: fixed":

     body
       .fq-panel                 <- mirrors the nav's state classes
         .fq-nav__scrim          <- click-anywhere-to-close veil
         .fq-panel__box          <- the panel surface; the three variants move this
           .fq-panel__top        <- cart + login, close button
           .fq-search            <- only from ~12 items up
           .fq-panel__stage
             .fq-panel__scroll   <- level 1 + search hits
             .fq-drill           <- one layer per level you drilled into
           .fq-menu__foot        <- buttons, phone/address, languages

   Because the panel is its own DOM, the older ".fq-nav.is-burger .fq-menu ..."
   rules in fq-nav.css / custom-business1.css no longer match anything here —
   they style the original menu, which is hidden while the panel is up.

   Colours come only from the existing --fq-* tokens, so client house style and
   dark mode follow automatically. Behaviour: fq-panel.js.
   ============================================================================ */

/* ── Templates without the fq-nav bar system ─────────────────────────────────
   beauty1 runs on Crafto's Bootstrap navbar and therefore never loads
   fq-nav.css, where the --fq-* tokens live. It does have a full parallel set of
   its own (--bty-menu-*, in the same three themes), so the panel maps those
   across and comes out in exactly the client's house style either way.
   Deliberately a plain .bty-nav selector: it must lose to fq-nav.css for any
   template that does load it. */
.bty-nav {
  --fq-panel-bg:     var(--bty-menu-bg);
  --fq-panel-bg-2:   color-mix(in srgb, var(--bty-menu-fg) 7%, var(--bty-menu-bg));
  --fq-panel-bg-3:   color-mix(in srgb, var(--bty-menu-fg) 13%, var(--bty-menu-bg));
  --fq-panel-fg:     var(--bty-menu-fg);
  --fq-panel-fg-hi:  var(--bty-menu-fg-hi);
  --fq-panel-hover:  var(--bty-menu-hover);
  --fq-panel-border: var(--bty-menu-border);
  --fq-accent:       var(--bty-menu-accent);
  --fq-bar-bg:       var(--bty-menu-bg);
  --fq-topnav-fg:    var(--bty-menu-fg-hi);
  --fq-shadow:       0 22px 50px rgba(0, 0, 0, .28);
  --fq-ease:         cubic-bezier(.22, .61, .36, 1);
}
/* Crafto's own fold-out panel (and the copy of it that its script parks outside
   the navbar for phones) must stay down now that the shared panel took over. */
.bty-nav.fq-panel-on.is-burger .navbar-collapse { display: none; }
/* !important omdat Crafto's eigen regel voor dit blok er ook een heeft; zonder
   dat blijft de geparkeerde kopie van het menu gewoon staan. */
body.fq-panel-actief .navbar-modern-inner,
body.fq-panel-actief .navbar-full-screen-menu-inner { display: none !important; }
/*  This bar has no .fq-nav__bar; its row is a plain .container-fluid.

    Here stood four rules that only made sense while the overlay hung UNDER the
    bar: they lifted this nav (and its row) to z-index 9997/9998 so the hamburger
    stayed above the panel, recoloured Crafto's four burger lines to the accent so
    they stayed visible against the open panel, and folded those lines into a cross
    — Crafto does that off its own body.navbar-collapse-show, and that handler no
    longer runs.

    All four are gone now that the overlay comes down over the bar (10-08-2026).
    The z-index pair was the harmful one: at 9998 the bar would have been painted
    ON TOP of the panel's 9995, so the logo and hamburger would have shown straight
    through the menu. The other two are simply moot — the hamburger is hidden in all
    three variants now, and the panel's own close button took over. */

/* ── The original menu steps aside while the panel is in charge ──────────── */
.fq-nav.fq-panel-on.is-burger .fq-menu { display: none; }
/* business1 has its own veil on .fq-nav.is-burger::after; the panel brings a
   clickable scrim instead, so the two would stack up. */
.fq-nav.fq-panel-on.is-burger::after { display: none; }

/* ── Scrim ───────────────────────────────────────────────────────────────── */
/* High up, and not by accident: the panel now lives in the body, where it has
   to clear a sticky header (beauty1 pins one on scroll). Still below the cookie
   banner, which must stay on top of everything. */
.fq-nav__scrim {
  position: fixed; inset: 0; z-index: 9990;
  padding: 0; border: 0; cursor: pointer;
  background: rgba(14, 12, 10, .46);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--fq-ease), visibility .3s;
}
.fq-panel.is-burger.is-open .fq-nav__scrim { opacity: 1; visibility: visible; }
/* On a dark page the page itself is already dim, so the veil has to go deeper
   to still read as "the menu is what matters now". */
[data-bs-theme="dark"] .fq-nav__scrim { background: rgba(0, 0, 0, .62); }

/* ── Panel surface + the three fold-out variants ─────────────────────────── */
.fq-panel {
  font-family: var(--brand-font, system-ui, sans-serif);
  /* Own hairline colour. --fq-panel-border cannot be used for this: in the dark
     and warm menu themes it is deliberately "transparent" (those panels get
     their separation from the background steps), so every divider in here would
     silently disappear. Derived from the panel text, so it works on any theme. */
  --fq-p-line: color-mix(in srgb, var(--fq-panel-fg) 16%, transparent);
  /* Soft accent SURFACE. --fq-accent-soft cannot be used for this either: the
     bar themes define it as a lighter accent meant for TEXT on a dark panel
     (see .fq-mega__title in fq-nav.css), so using it as a background put light
     green text on a light green pill. This one is always a wash of the accent. */
  --fq-p-soft: color-mix(in srgb, var(--fq-accent) 18%, transparent);
}
.fq-panel *, .fq-panel *::before, .fq-panel *::after { box-sizing: border-box; }

.fq-panel__box {
  position: fixed; z-index: 9995;
  display: flex; flex-direction: column;
  background: var(--fq-panel-bg); color: var(--fq-panel-fg);
  box-shadow: var(--fq-shadow);
  overflow: hidden;
  visibility: hidden; opacity: 0;
  transition: opacity .22s var(--fq-ease), transform .28s var(--fq-ease), visibility .28s;
}
/* Only in hamburger mode: in bar mode the bar itself is the menu and a stray
   .is-open (left over from a resize) must never put a panel on screen. */
.fq-panel.is-burger.is-open .fq-panel__box { visibility: visible; opacity: 1; }

/* Overlay — comes down from the very top of the screen and covers the bar, over
   the page. The box lines up with the 1360px bar instead of touching the screen
   edges, so the bar's own width is still what you read, but it starts at the
   screen edge rather than under the bar.

   It used to hang under the bar, at the measured --fq-panel-top, with the bar and
   its hamburger staying crisp above it. That put a cross in the bar and none in
   the panel, so the overlay was the one variant that closed differently from the
   other two. Now it behaves like them: the panel covers the bar, brings its own
   close button in the top right, and the hamburger steps aside. (Jenny 10-08-2026.)

   No resting transform: opening is an ANIMATION (see fq-panel-in-top-plain below).
   No clip-path either — see there. */
.fq-panel.fq-mobile-overlay .fq-panel__box {
  /*  ABSOLUTE, not fixed like the other two. The panel is appended straight to
      <body> and every ancestor is position: static, so absolute anchors it to the
      document: the box starts at the top of the page and simply grows as long as
      the menu is. A menu that outgrows the screen therefore runs on below the fold
      and you scroll the PAGE to reach the rest — no scrollbar of its own inside the
      panel. That was the whole point (Jenny 10-08-2026): a little scrollbar in a
      menu reads as a cramped box, not as a menu.

      Fixed + max-height was the opposite bargain: the panel could never be taller
      than the screen, so the list had to scroll inside it. Deliberately NOT changed
      for the drawer and fullscreen — those two are viewport-filling by definition
      and scrolling inside them is correct. */
  position: absolute;
  top: 0;
  left: max(clamp(8px, 2vw, 20px), calc((100% - 1360px) / 2));
  right: max(clamp(8px, 2vw, 20px), calc((100% - 1360px) / 2));
  max-height: none;
  border-radius: 0 0 var(--wf-radius-card, 12px) var(--wf-radius-card, 12px);
  transform: none;
}
/*  Nothing inside the overlay scrolls on its own any more — the page carries it. */
.fq-panel.fq-mobile-overlay .fq-panel__stage,
.fq-panel.fq-mobile-overlay .fq-panel__scroll { flex: none; min-height: 0; overflow: visible; }
/*  CLIP, not hidden. Both cut the corners off the same way, but `hidden` makes the
    box a scroll container, and a sticky child sticks to its nearest scroll container
    — so the head below would have stuck to a box that never scrolls, which is to say
    it would not have stuck at all. `clip` creates no scroll container, so the head
    reaches past it to the page. A browser too old for `clip` keeps `hidden` and the
    head simply scrolls away with the rest: less good, never broken. */
.fq-panel.fq-mobile-overlay .fq-panel__box { overflow: hidden; overflow: clip; }
/*  Growing past the fold would carry the close button off the top of the screen,
    so the head sticks to the viewport for as long as the panel is in view. It needs
    its own background: the list scrolls under it, not behind a transparent strip.

    z-index 10, not the 3 it started on: an OPEN first-level row is sticky at z-index
    3 too (see .fq-list--1 > .is-open > .fq-row), and being later in the document it
    won that tie and painted straight over the close button. Same reason its `top`
    moves down by the height of the head below — otherwise the row it pins would come
    to rest underneath the head instead of against it, and you would watch a menu item
    slide behind the cross.

    --fq-kop is that height, written out once: 10px + 2px of padding around a 44px
    close button (the minimum touch target), so 56. Change the button and change this. */
.fq-panel.fq-mobile-overlay { --fq-kop: 56px; }
.fq-panel.fq-mobile-overlay .fq-panel__top {
  position: sticky; top: 0; z-index: 10;
  background: var(--fq-panel-bg);
}
.fq-panel.fq-mobile-overlay .fq-list--1 > .is-open > .fq-row { top: var(--fq-kop); }

/* Fullscreen — fills the screen, including the bar. Its own close button (see
   .fq-panel__top) takes over there. Deliberately NO clip-path: this box already
   is the whole viewport, so there is nothing above it to protect, and a clip on
   a full-screen surface costs a repaint of everything on it — see the two
   keyframes below. */
.fq-panel.fq-mobile-fullscreen .fq-panel__box {
  inset: 0; border-radius: 0; transform: none;
}

/* ── Opening: the panel comes down from the top of the screen ─────────────────
   Overlay and fullscreen open by sliding down from above: the box starts a full
   height higher and travels to its place, so the surface AND everything on it
   move in together — a slide, not a fade. Both rest against the top of the screen,
   so what starts above them is off-screen and never painted; a plain translate is
   all either of them needs.

   There used to be a second set of keyframes here, fq-panel-in-top, that ran a
   clip-path alongside the travel. The overlay needed it while it rested UNDER the
   bar: the clip lived in the box's own coordinates and so moved along, keeping the
   cut edge pinned to the bar's bottom edge, which was the only way to hide the
   incoming panel from whatever sat above it — an opaque utility strip on business1,
   a see-through bar over beauty1's hero photo. Since the overlay comes down over
   the bar (10-08-2026) there is nothing left to hide from, and the clip is gone.
   Good riddance: a clip-path is far harder to hand to the compositor than a
   transform, and repainting a large surface every frame is exactly what stuttered.
   will-change stays, so each panel still gets its own layer.

   An ANIMATION, deliberately, not a transition: a transition would run backwards
   on close, and the panel riding back up would fight the bar on the way out.
   Closing only fades (the base .fq-panel__box transition) with nothing moving —
   the usual asymmetry: enter with motion, leave quietly.

   The drawer keeps its own translateX; it is unaffected by all of this. */
@keyframes fq-panel-in-top-plain {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  /*  13-09-2026 (Tom): van 1,5 naar 0,5 seconde, voor overlay én fullscreen. Op een telefoon voelde
      ruim een seconde wachten op het menu als haperen, niet als rustig.
      Same halve seconde en dezelfde curve als fullscreen, zodat de twee varianten als één
     menu aanvoelen. Stond op twee seconden; Tom vond dat te lang aanvoelen (11-09-2026), dus de
     drie varianten zijn samen ingekort met behoud van hun onderlinge verhouding. It used to need a clip-path as well: the panel rested under the
     bar, so everything it travelled past on the way down — an opaque utility strip
     on business1, a see-through bar over beauty1's hero photo — had to be protected
     without knowing what was up there. Now the panel rests at the screen edge, so
     what starts above it is off-screen and never painted. Same reason fullscreen
     never needed one, and dropping it is what makes the slide smooth: a clip-path
     is far harder to hand to the compositor than a transform. */
  .fq-panel.fq-mobile-overlay.is-burger.is-open .fq-panel__box {
    animation: fq-panel-in-top-plain .5s cubic-bezier(.65, 0, .35, 1) both;
    will-change: transform;
  }
  /* A whole screen coming down is a statement, so it takes its time: een halve
     seconde op een gelijkmatige ease-in-out. Not var(--fq-ease): that is an ease-OUT, fine
     over 300ms, but stretched over more than a second it bolts away and then crawls the
     last stretch, which is exactly what reads as "not smooth". will-change lifts
     the panel onto its own layer for the duration, so the slide is one composited
     move instead of two seconds of repainting. */
  .fq-panel.fq-mobile-fullscreen.is-burger.is-open .fq-panel__box {
    animation: fq-panel-in-top-plain .5s cubic-bezier(.65, 0, .35, 1) both;
    will-change: transform;
  }
}
/* While it slides in the box must be a solid surface, not a ghost you can see
   the page through — so it turns opaque at once. The base rule's slower fade is
   left for the close, where nothing moves. */
.fq-panel.fq-mobile-overlay.is-open .fq-panel__box,
.fq-panel.fq-mobile-fullscreen.is-open .fq-panel__box {
  transition: opacity .1s var(--fq-ease), visibility 0s;
}

/* Drawer — slides in from the right, full height.
   The width grows with the screen instead of staying at the 340px that a phone
   needs: on a wide monitor that reads as a thin strip stuck to the edge, while
   the same 340px on a phone is nearly the whole screen. Hence a floor for the
   narrow end, a ceiling so it never becomes a half-page panel, and vw in between.
   min(100%, …) keeps it honest below 320px.

   It slides on a TRANSITION, not on keyframes like the other two: a drawer that
   slides back out the way it came in is exactly right, so running backwards on
   close is a feature here. What it does borrow from them is the pacing — a slow,
   deliberate way in (see .is-open below) and a brisk way out. */
.fq-panel.fq-mobile-drawer .fq-panel__box {
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(100%, clamp(320px, 28vw, 520px));
  border-radius: var(--wf-radius-card, 12px) 0 0 var(--wf-radius-card, 12px);
  transform: translateX(102%);
  /* Leaving: brisk, and the fade waits for the slide instead of emptying the
     drawer while it is still on screen. */
  transition: opacity .3s var(--fq-ease), transform .38s var(--fq-ease), visibility .38s;
}
/* Arriving: the same curve the overlay and the fullscreen menu use, at a pace
   that matches them. Shorter than their anderhalve seconde on purpose — the drawer
   covers a fraction of the distance, and holding it to the same clock would make
   it crawl. Meegekrompen met die twee (11-09-2026) zodat de verhouding blijft:
   0,9s tegen hun 1,5s. visibility 0s so it is there the instant it starts moving. */
.fq-panel.fq-mobile-drawer.is-open .fq-panel__box {
  transform: none;
  transition: opacity .2s var(--fq-ease), transform .9s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}

/* ── Own close button (drawer + fullscreen) ──────────────────────────────────
   Those two cover the bar, and the bar carries the hamburger. Lifting the bar
   back over the panel is worse than it sounds: on a wide screen the logo and
   the action buttons then land half on top of the drawer, cut off at the panel
   edge. So the panel closes itself and the bar stays under the veil, where a
   covered page belongs. In overlay mode the bar is fully visible and keeps its
   own button — no second one there. */
/* Head of the panel: cart and login on the left, close button on the right.
   Shown in all three variants — each one covers the bar, so the panel's own close
   button is the way out. Until 10-08-2026 the overlay was the exception: it left
   the bar visible and let the hamburger morph into a cross, so the head appeared
   there only when there were shop icons to put in it. */
.fq-panel__top { display: none; }
.fq-panel__top.has-icons,
.fq-panel.fq-mobile-overlay .fq-panel__top,
.fq-panel.fq-mobile-drawer .fq-panel__top,
.fq-panel.fq-mobile-fullscreen .fq-panel__top {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 10px clamp(10px, 1.6vw, 18px) 2px;
}
.fq-panel__icons { display: flex; align-items: center; gap: 6px; }
.fq-panel__close { margin-left: auto; }
.fq-panel__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--fq-panel-fg-hi); background: transparent;
  border: 1px solid var(--fq-p-line); border-radius: var(--wf-radius-button, 999px);
  transition: background .18s var(--fq-ease), color .18s var(--fq-ease);
}
.fq-panel__close:hover { background: var(--fq-panel-hover); color: var(--fq-accent); }
.fq-panel__close svg { width: 20px; height: 20px; }

/* business1 lifts its bar above the veil (z-index 85) so logo and button stay
   crisp. Wrong for all three variants now that each of them covers the page: the
   bar would hang over the panel, undimmed and cut off at the 1360px mark. Back
   under the veil for all three. (The overlay used to be the exception here — it
   left the bar on top so its hamburger stayed clickable.) */
.fq-nav.fq-panel-on.is-burger.fq-mobile-overlay.is-open .fq-nav__bar,
.fq-nav.fq-panel-on.is-burger.fq-mobile-drawer.is-open .fq-nav__bar,
.fq-nav.fq-panel-on.is-burger.fq-mobile-fullscreen.is-open .fq-nav__bar { z-index: auto; }

/* Two crosses in one corner reads as a mistake. The panel brings its own close
   button in all three variants, so the bar's hamburger steps aside everywhere;
   it is behind the panel there anyway. */
.fq-nav.fq-panel-on.is-burger.fq-mobile-overlay.is-open .fq-nav__toggle,
.fq-nav.fq-panel-on.is-burger.fq-mobile-drawer.is-open .fq-nav__toggle,
.fq-nav.fq-panel-on.is-burger.fq-mobile-fullscreen.is-open .fq-nav__toggle,
.bty-nav.fq-panel-on.is-burger.fq-mobile-overlay.is-open .navbar-toggler,
.bty-nav.fq-panel-on.is-burger.fq-mobile-drawer.is-open .navbar-toggler,
.bty-nav.fq-panel-on.is-burger.fq-mobile-fullscreen.is-open .navbar-toggler { visibility: hidden; }

/* ── Inside the panel ────────────────────────────────────────────────────── */
/* The stage does not scroll: it is what a drill layer measures its "inset: 0"
   against. Put the layers in the scrolling list instead and a layer opened
   halfway down the menu lands above the visible area. */
.fq-panel__stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.fq-panel__scroll {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 6px clamp(10px, 1.6vw, 18px) 10px;
}
/* On a wide panel (hamburger on desktop) cap the reading width — a menu item
   stretched over 1300px is a bar to swipe across, not a list to read. */
@media (min-width: 1000px) {
  .fq-panel.fq-mobile-overlay .fq-panel__scroll > .fq-list,
  .fq-panel.fq-mobile-fullscreen .fq-panel__scroll > .fq-list,
  .fq-panel.fq-mobile-overlay .fq-drill__scroll > .fq-list,
  .fq-panel.fq-mobile-fullscreen .fq-drill__scroll > .fq-list { max-width: 1080px; margin-inline: auto; }
  .fq-panel.fq-mobile-fullscreen .fq-panel__scroll { padding-inline: clamp(18px, 5vw, 64px); }
}

.fq-panel .fq-list { list-style: none; margin: 0; padding: 0; display: block; }
.fq-panel .fq-list li { position: static; margin: 0; }

/* ── A row ───────────────────────────────────────────────────────────────── */
.fq-panel .fq-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 14px;
  text-decoration: none; color: var(--fq-panel-fg-hi);
  font-size: 17px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35;
  text-transform: none; white-space: normal;
  border-radius: min(var(--wf-radius-card, 12px), 12px);
  transition: background .18s var(--fq-ease), color .18s var(--fq-ease);
}
.fq-panel .fq-row:hover { background: var(--fq-panel-hover); color: var(--fq-panel-fg-hi); }
.fq-panel .fq-row__txt { flex: 1; min-width: 0; }
.fq-panel :focus-visible { outline: 2px solid var(--fq-accent); outline-offset: 2px; }

/*  Hairline between the top-level items.

    Inset by the same 14px the row itself is padded with, instead of running edge to edge. A row has a
    border-radius that follows the client's corner setting, so a full-width rule met the rounded corner
    head-on: the line ran straight past a curve and the panel looked restless (Jenny 10-08-2026). With
    the rule starting where the label starts, the curve has room and the list reads as one column.

    Drawn as a background gradient rather than a border or an absolutely positioned pseudo-element: the
    list items are deliberately `position: static` (see .fq-list li above) and .fq-row already owns
    ::before for the current-page marker, so neither could be borrowed without side effects. */
.fq-panel .fq-list--1 > li + li {
  background-image: linear-gradient(var(--fq-p-line), var(--fq-p-line));
  background-repeat: no-repeat;
  background-position: 14px top;
  background-size: calc(100% - 28px) 1px;
}

/* Current page. */
.fq-panel .fq-row.is-current { color: var(--fq-accent); background: var(--fq-p-soft); }
.fq-panel .fq-row.is-current::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 3px; background: var(--fq-accent);
}

/* Caret. Pointing down = folds open here, pointing right = slides to a new
   layer. Selected via "a.fq-row >" so it outweighs the bar's own
   ".fq-has > a > .fq-caret { width:12px }" — otherwise the arrow stays a
   12px speck that is nowhere near a 44px tap target. */
.fq-panel a.fq-row > .fq-caret {
  flex: none; width: 26px; height: 26px; padding: 5px;
  color: var(--fq-panel-fg); opacity: .75;
  transition: transform .26s var(--fq-ease), opacity .18s var(--fq-ease);
}
.fq-panel a.fq-row:hover > .fq-caret { opacity: 1; }
.fq-panel .is-open > a.fq-row > .fq-caret { transform: rotate(180deg); color: var(--fq-accent); opacity: 1; }
.fq-panel a.fq-row--drill > .fq-caret,
.fq-panel .is-open > a.fq-row--drill > .fq-caret { transform: rotate(-90deg); }

/* ── Levels: weight drops, surface lightens ──────────────────────────────── */
.fq-panel .fq-list--2 { background: var(--fq-panel-bg-2); }
.fq-panel .fq-list--3, .fq-panel .fq-list--4 { background: var(--fq-panel-bg-3); }
.fq-panel .fq-list--2 > li > .fq-row { font-size: 16px; font-weight: 500; }
.fq-panel .fq-list--3 > li > .fq-row,
.fq-panel .fq-list--4 > li > .fq-row {
  font-size: 15px; font-weight: 400; color: var(--fq-panel-fg); min-height: 48px;
}
.fq-panel .fq-list--3 > li > .fq-row:hover,
.fq-panel .fq-list--4 > li > .fq-row:hover { color: var(--fq-panel-fg-hi); }
/* Inside a drill layer the list is the whole surface, so it must not paint its
   own darker/lighter block on top of the panel. */
.fq-panel .fq-drill .fq-list { background: transparent; }

/* Guide line along an open branch. */
.fq-panel .fq-branch { padding-left: 14px; border-left: 2px solid var(--fq-p-soft); margin-left: 5px; }

/* ── Accordion (level 1) ─────────────────────────────────────────────────── */
.fq-panel .fq-sub { overflow: hidden; }
.fq-panel .fq-sub[hidden] { display: none; }
.fq-panel .fq-sub-inner { padding: 6px 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  .fq-panel .fq-sub { transition: height .28s var(--fq-ease); }
}
/* The parent stays pinned to the top while you scroll its children, so you can
   always see which section you are in. */
.fq-panel .fq-list--1 > .is-open > .fq-row {
  position: sticky; top: 0; z-index: 3;
  background: var(--fq-panel-bg);
  box-shadow: 0 1px 0 var(--fq-p-line);
}

/* A long list of plain end pages splits into columns once the panel is wide.
   NOT for the drawer. These breakpoints measure the VIEWPORT, but the drawer is capped at
   `min(100%, clamp(320px, 28vw, 520px))` — so on a 1856px screen a 520px drawer was getting three
   columns of ~160px, with menu labels wrapping over three lines each. Overlay (full page width) and
   fullscreen (inset: 0) really are as wide as the viewport, so there the rule is right and stays.
   Reported by Tom on a business1 site with 11 menu items, 11-08-2026. */
@media (min-width: 900px) { .fq-panel:not(.fq-mobile-drawer) .fq-cols { columns: 2; column-gap: 24px; } }
@media (min-width: 1200px) { .fq-panel:not(.fq-mobile-drawer) .fq-cols { columns: 3; } }
.fq-panel .fq-cols > li { break-inside: avoid; }

/* ── Drill layers (level 2 and deeper) ───────────────────────────────────── */
.fq-panel .fq-drill {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--fq-panel-bg);
  transform: translateX(100%);
  transition: transform .3s var(--fq-ease);
}
.fq-panel .fq-drill[hidden] { display: none; }
.fq-panel .fq-drill.is-in { transform: none; }
.fq-panel .fq-drill__scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 4px clamp(10px, 1.6vw, 18px) 12px;
}

/* Head of a layer: back button + where you are. */
.fq-panel .fq-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px clamp(10px, 1.6vw, 18px);
  border-bottom: 1px solid var(--fq-p-line);
  background: var(--fq-panel-bg);
}
.fq-panel .fq-head__back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px 0 10px; cursor: pointer;
  font: 600 14.5px/1 var(--brand-font, system-ui, sans-serif);
  color: var(--fq-panel-fg-hi); background: transparent;
  border: 1px solid var(--fq-p-line);
  border-radius: var(--wf-radius-button, 999px);
  transition: background .18s var(--fq-ease);
}
.fq-panel .fq-head__back:hover { background: var(--fq-panel-hover); }
.fq-panel .fq-head__back svg { width: 16px; height: 16px; }
.fq-panel .fq-head__crumb {
  min-width: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fq-panel-fg); opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fq-panel .fq-head__titel {
  padding: 14px clamp(10px, 1.6vw, 18px) 4px;
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: var(--fq-panel-fg-hi); line-height: 1.25;
}

/* The category page itself stays reachable — sliding into a category must not swallow the
   link to that category's own page. De kop IS die link (zie fq-panel.js); daarom een pijltje
   erachter, want een dikke kop die stiekem klikbaar is ziet niemand. Een categorie zonder
   eigen pagina krijgt deze klasse niet en blijft dus gewoon een kop. */
.fq-panel .fq-head__titel--link {
  display: inline-flex; align-items: center; gap: .45em;
  text-decoration: none; color: inherit;
}
.fq-panel .fq-head__titel--link svg {
  width: .68em; height: .68em; flex: none; color: var(--fq-accent);
  transition: transform .35s var(--fq-ease);
}
.fq-panel .fq-head__titel--link:hover { text-decoration: underline; text-underline-offset: .18em; }
.fq-panel .fq-head__titel--link:hover svg { transform: translateX(.18em); }
@media (prefers-reduced-motion: reduce) {
  .fq-panel .fq-head__titel--link svg { transition: none; }
  .fq-panel .fq-head__titel--link:hover svg { transform: none; }
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.fq-panel .fq-search {
  flex: none; position: relative; z-index: 6;
  padding: 12px clamp(10px, 1.6vw, 18px);
  border-bottom: 1px solid var(--fq-p-line);
  background: var(--fq-panel-bg);
}
@media (min-width: 1000px) {
  .fq-panel.fq-mobile-overlay .fq-search__in,
  .fq-panel.fq-mobile-fullscreen .fq-search__in { max-width: 1080px; margin-inline: auto; }
}
.fq-panel .fq-search__in { position: relative; }
/* The field has to read as a field, not as a stripe of panel. --fq-panel-bg-2
   is only a hair away from the panel colour in the dark and warm themes, so the
   box vanished there while it looked fine on light. Mixing the panel TEXT into
   the panel colour always moves away from the background, whichever theme is
   on: lighter on a dark panel, darker on a light one. */
.fq-panel .fq-search input {
  width: 100%; font: 400 16px/1.4 var(--brand-font, system-ui, sans-serif);
  min-height: 48px; padding: 12px 44px 12px 46px;
  color: var(--fq-panel-fg-hi);
  background: color-mix(in srgb, var(--fq-panel-fg) 13%, var(--fq-panel-bg));
  border: 1px solid color-mix(in srgb, var(--fq-panel-fg) 32%, transparent);
  border-radius: var(--wf-radius-button, 999px);
}
.fq-panel .fq-search input::placeholder { color: var(--fq-panel-fg); opacity: .95; }
/* The magnifier is the label of this field; in the accent colour it says
   "search" before you have read the placeholder. */
.fq-panel .fq-search input:focus {
  outline: none; border-color: var(--fq-accent); box-shadow: 0 0 0 3px var(--fq-p-soft);
}
.fq-panel .fq-search__ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--fq-accent); opacity: 1; pointer-events: none;
}
.fq-panel .fq-search__wis {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%; color: var(--fq-panel-fg);
}
.fq-panel .fq-search.has-tekst .fq-search__wis { display: inline-flex; }

/* ── Lade: zoekveld OP de kopregel, naast de sluitknop ────────────────────────
   De lade is smal en hoog. Een eigen regel voor het zoekveld kostte daar ruim 60px voordat het
   menu zelf begon; naast de sluitknop is die ruimte terug en staat de eerste menu-regel meteen
   in beeld. fq-panel.js hangt het veld daarom in .fq-panel__top zodra de uitklapwijze de lade is.
   Alleen de lade: overlay en schermvullend zijn zo breed als het scherm, daar is een eigen regel
   met een gecentreerde maximumbreedte juist goed. */
.fq-panel.fq-mobile-drawer .fq-panel__top {
  gap: 10px;
  padding: 12px clamp(10px, 1.6vw, 18px);
  border-bottom: 1px solid var(--fq-p-line);
}
/*  Het veld vult wat de knoppen overlaten. min-width:0 is nodig omdat een flex-kind anders niet
    onder z'n eigen inhoud krimpt: met winkelmand én inloggen erbij duwde het veld de sluitknop
    anders van de regel af op een smalle lade (320px). */
.fq-panel.fq-mobile-drawer .fq-panel__top .fq-search {
  flex: 1 1 auto; min-width: 0;
  padding: 0; border-bottom: 0; background: transparent;
}
/*  Even hoog als de sluitknop (44px), zodat de twee op één lijn staan en niet de een de regel
    hoger maakt dan de ander. */
.fq-panel.fq-mobile-drawer .fq-panel__top .fq-search input {
  min-height: 44px; font-size: 15px; padding: 10px 40px 10px 42px;
}
.fq-panel.fq-mobile-drawer .fq-panel__top .fq-search__ico { left: 14px; width: 17px; height: 17px; }
.fq-panel.fq-mobile-drawer .fq-panel__top .fq-search__wis { right: 4px; width: 32px; height: 32px; }

.fq-panel .fq-search__wis:hover { background: var(--fq-panel-hover); color: var(--fq-panel-fg-hi); }
.fq-panel .fq-search__wis svg { width: 16px; height: 16px; }

/* Hits: a flat list with the path above each one, so a deep page still tells
   you where it lives. */
.fq-panel .fq-results { list-style: none; margin: 0; padding: 0; }
.fq-panel .fq-results > li + li { border-top: 1px solid var(--fq-p-line); }
.fq-panel .fq-hit {
  display: block; padding: 12px 14px; min-height: 52px; text-decoration: none;
  border-radius: min(var(--wf-radius-card, 12px), 12px);
}
.fq-panel .fq-hit:hover { background: var(--fq-panel-hover); }
.fq-panel .fq-hit__pad {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fq-panel-fg); opacity: .75;
}
.fq-panel .fq-hit__t { display: block; margin-top: 3px; font-size: 16px; font-weight: 500; color: var(--fq-panel-fg-hi); }
.fq-panel .fq-hit mark { background: var(--fq-p-soft); color: var(--fq-accent); padding: 0 2px; border-radius: 3px; }
.fq-panel .fq-geen { padding: 26px 14px; text-align: center; color: var(--fq-panel-fg); }
.fq-panel .fq-geen strong { display: block; margin-bottom: 4px; color: var(--fq-panel-fg-hi); font-size: 17px; font-weight: 600; }

/* ── Mega menu inside the panel ──────────────────────────────────────────── */
.fq-panel .fq-mega { list-style: none; margin: 0; padding: 0; display: block; }
.fq-panel .fq-mega__media {
  display: flex; align-items: flex-end; min-height: 110px; width: auto; height: auto;
  margin: 2px 0 10px; padding: 14px;
  border-radius: min(var(--wf-radius-card, 12px), 14px);
  background: var(--fq-panel-bg-3);
  border: 1px solid var(--fq-p-line);
  box-shadow: none; overflow: hidden; position: relative;
}
.fq-panel .fq-mega__media img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.fq-panel .fq-mega__media--ph {
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--fq-p-soft) 10px 11px);
}
.fq-panel .fq-mega__media::after { display: none; }
.fq-panel .fq-mega__cap {
  position: relative; z-index: 2; left: auto; right: auto; bottom: auto;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fq-panel-fg-hi);
}
.fq-panel .fq-mega__col { display: block; margin-bottom: 14px; break-inside: avoid; min-width: 0; }
/* Inside a mega menu the columns are the structure. Letting each nested list
   paint its own level colour turns that into a patchwork of grey blocks. */
.fq-panel .fq-mega .fq-list { background: transparent; }
.fq-panel .fq-mega__col > ul { list-style: none; margin: 0; padding: 0; }
.fq-panel .fq-mega__title {
  display: block; padding: 8px 14px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fq-accent);
}
.fq-panel .fq-mega__title:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .fq-panel .fq-mega { columns: 2; column-gap: 28px; }
  .fq-panel .fq-mega__media { column-span: all; }
}
@media (min-width: 1200px) { .fq-panel .fq-mega { columns: 3; } }

/* ── Foot: pinned to the bottom of the panel ─────────────────────────────── */
/* The foot that sits in the menu bar is only a SOURCE: fq-panel.js copies its HTML into the panel
   (see the `foot` selector there) and leaves the original where it is. It must never be visible on
   its own. With the hamburger on it disappeared along with the collapsed navbar, so nobody noticed;
   with the hamburger OFF the navbar is open on desktop and the buttons, phone number, address and
   language flags rendered raw, straight across the page. Hide it everywhere; the rule below (higher
   specificity) brings back the copy inside the panel. */
.fq-menu__foot { display: none; }
.fq-panel .fq-menu__foot {
  display: block; flex: none; list-style: none;
  /*  25px onderaan in plaats van 12: de taalvlaggen stonden vrijwel tegen de onderrand van de kaart
      aan, waardoor de voet er afgeknipt uitzag in plaats van afgerond (Jenny 10-08-2026). */
  padding: 10px clamp(10px, 1.6vw, 18px) 25px;
  border-top: 1px solid var(--fq-p-line);
  background: var(--fq-panel-bg-2);
}
.fq-panel .fq-menu__foot:empty { display: none; }
/*  Op een breed paneel is de menulijst afgetopt op 1080px en gecentreerd (zie de regel bij
    .fq-panel__scroll > .fq-list) — een menu-item over 1300px is een balk om langs te vegen, geen regel om
    te lezen. De voet deed daar niet aan mee en liep van rand tot rand, dus de knoppen, het telefoonnummer
    en de vlaggen begonnen ruim 100px links van het eerste menu-item. Nu volgen ze dezelfde leesbreedte.

    De voet zélf blijft op volle breedte: de achtergrond en het haarlijntje erboven horen de hele kaart te
    beslaan. Alleen de INHOUD wordt afgetopt. De 28px die eraf gaat is tweemaal de 14px binnenmarge van een
    menurij, waardoor de linkerrand van een knop exact onder de tekst van een menu-item uitkomt in plaats
    van onder de rand van zijn rij. */
@media (min-width: 1000px) {
  .fq-panel.fq-mobile-overlay .fq-menu__foot > *,
  .fq-panel.fq-mobile-fullscreen .fq-menu__foot > * {
    max-width: calc(1080px - 28px);
    margin-inline: auto;
  }
}
/* The foot used to hide above 960px, on the assumption that the bar and the top
   strip carry the same things there. They do — but the drawer and the fullscreen
   panel cover both, and the veil puts them out of reach, so the visitor lost the
   languages, the cart and the login the moment the menu opened. An open panel
   has to stand on its own. */

/* De bronkopie in de balk wordt hierboven al verborgen door `.fq-menu__foot { display: none }`
   (regel 572). Wij hadden daar bij de merge een tweede, op <header> gescopete regel naast staan —
   dezelfde diagnose, andere schrijfwijze. Die is er 08-08 uit gehaald: één regel op één plek. */
.fq-panel .fq-foot__cta { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fq-panel .fq-foot__cta > a {
  flex: 1 1 150px; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 14px; min-height: 46px; font-size: 14px;
  /* Wrapping, not nowrap: the client writes this label themselves, and a
     "Liever persoonlijk contact?" ran straight out of the drawer at its
     narrowest. */
  white-space: normal; text-align: center; line-height: 1.25;
  border-radius: var(--wf-radius-button, 999px); text-decoration: none;
}
/* The templates' own button styles are made for the menu BAR's background; on
   the panel surface an outline button turns dark ink on a dark panel. The shape
   above stays, the colours come from the panel tokens. */
.fq-panel .fq-foot__cta > a {
  border: 1px solid var(--fq-accent); background: transparent; color: var(--fq-panel-fg-hi);
}
.fq-panel .fq-foot__cta > a:hover { background: var(--fq-panel-hover); color: var(--fq-panel-fg-hi); }
/* The templates' own "filled" button keeps being the filled one here. */
.fq-panel .fq-foot__cta > a.biz-btn-fill,
.fq-panel .fq-foot__cta > a.b2-btn--dark,
.fq-panel .fq-foot__cta > a.bty-foot-cta--fill { background: var(--fq-accent); color: var(--fq-panel-bg); }
.fq-panel .fq-foot__cta > a.biz-btn-fill:hover,
.fq-panel .fq-foot__cta > a.b2-btn--dark:hover,
.fq-panel .fq-foot__cta > a.bty-foot-cta--fill:hover { background: var(--fq-accent); filter: brightness(1.08); }
.fq-panel .fq-foot__cta svg { width: 14px; height: 14px; flex: none; }

/* Contact and languages share one line; the address gives way first. */
.fq-panel .fq-foot__contact { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; }
.fq-panel .fq-foot__contact a,
.fq-panel .fq-foot__contact span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  color: var(--fq-panel-fg); text-decoration: none;
}
.fq-panel .fq-foot__contact span { min-width: 0; }
.fq-panel .fq-foot__contact span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-panel .fq-foot__contact a:hover { color: var(--fq-accent); }
.fq-panel .fq-foot__contact svg {
  width: 16px; height: 16px; flex: none; color: var(--fq-accent); fill: none; stroke: currentColor;
}
/* Row in the foot. Cart and login are moved out of it to the panel head (see
   .fq-panel__top), so in practice this holds the language flags — up to five of
   them, which is exactly one row of 44px tap targets. */
.fq-panel .fq-foot__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.fq-panel .fq-foot__icon,
.fq-panel__icons .fq-foot__icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; text-decoration: none;
  color: var(--fq-panel-fg-hi);
  border: 1px solid var(--fq-p-line); border-radius: var(--wf-radius-button, 999px);
  transition: background .18s var(--fq-ease), border-color .18s var(--fq-ease), color .18s var(--fq-ease);
}
.fq-panel .fq-foot__icon:hover { background: var(--fq-panel-hover); border-color: var(--fq-accent); color: var(--fq-accent); }
.fq-panel .fq-foot__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }
/* Count on the cart. Sits on the pill's edge, like the one in the bar. */
.fq-panel .fq-foot__badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  color: var(--fq-panel-bg); background: var(--fq-accent); border-radius: 999px;
}
/* Logged in: a dot instead of a number, same idea as the bar. */
.fq-panel .fq-foot__icon.is-in { border-color: var(--fq-accent); }
.fq-panel .fq-foot__icon.is-in::after {
  content: ""; position: absolute; right: 6px; bottom: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fq-accent);
}
.fq-panel .fq-foot__langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fq-panel .fq-foot__acties .fq-foot__langs { margin-top: 0; }
/* Flag only: with five languages enabled, flag + code would wrap to a second
   line on a phone. The language name lives in aria-label and title. */
.fq-panel .fq-foot__lang {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  font-size: 0; text-decoration: none; color: var(--fq-panel-fg);
  border: 1px solid var(--fq-p-line);
  border-radius: var(--wf-radius-button, 999px);
  transition: background .18s var(--fq-ease), border-color .18s var(--fq-ease);
}
.fq-panel .fq-foot__lang:hover { background: var(--fq-panel-hover); }
.fq-panel .fq-foot__lang.is-current { border-color: var(--fq-accent); background: var(--fq-p-soft); }
.fq-panel .fq-foot__lang.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 2px; background: var(--fq-accent);
}
/*  Een ronde vlag die de knop vult, net als in de bovenbalk (Jenny, 14-09-2026: "de vlaggetjes lijken niet
    vol gekleurd"). Het was een rechthoekje van 22x15 midden in een ronde knop van 44px.
    Eén schaalregel voor beide soorten vlaggen: de ingebouwde talen komen als inline SVG (3:2 en 5:3, met
    preserveAspectRatio="none"), de talen daarbuiten als afbeelding (it, pt, ... 4:3). De SVG wordt 150%
    breed en gecentreerd, de afbeelding bijgesneden met object-fit: cover; allebei vullen ze de cirkel. */
.fq-panel .fq-foot__lang .biz-lang-flag {
  display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--fq-p-line);
}
.fq-panel .fq-foot__lang .biz-lang-flag svg { display: block; width: 150%; height: 100%; margin-left: -25%; }
.fq-panel .fq-foot__lang .biz-lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Little screen height (landscape phone): strip the foot down so the list keeps
   its room. The flex model stays the same, so search and foot hold their place. */
@media (max-height: 700px) {
  .fq-panel .fq-menu__foot { padding-block: 8px 10px; }
  .fq-panel .fq-foot__contact span { display: none; }   /* address goes, phone stays */
  .fq-panel .fq-foot__contact a { min-height: 38px; }
  .fq-panel .fq-foot__cta > a { min-height: 42px; padding-block: 10px; }
  .fq-panel .fq-foot__langs { margin-top: 4px; }
  .fq-panel .fq-foot__lang { width: 40px; height: 40px; }
  .fq-panel .fq-foot__lang .biz-lang-flag { width: 28px; height: 28px; }
}
@media (max-height: 560px) {
  .fq-panel .fq-foot__contact { display: none; }
  .fq-panel .fq-menu__foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .fq-panel .fq-menu__foot > * { margin: 0; }
  .fq-panel .fq-foot__cta { flex: 1 1 200px; }
}

/* ── Floating widgets while the menu is open ─────────────────────────────────
   The cookie button sits fixed in the bottom-left corner on z-index 20990, far
   above the panel, and lands right on the language flags in the drawer. It is
   not part of the menu, so it steps aside for as long as the menu is open and
   comes back the moment it closes. */
body.fq-menu-open .wfcc-reopen {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--fq-ease, ease), visibility .2s;
}

/* ── Housekeeping ────────────────────────────────────────────────────────── */
.fq-panel [hidden] { display: none !important; }
/* Fallback for browsers without inert: a covered layer must not be tabbable or
   readable by a screen reader. */
.fq-panel [inert] { pointer-events: none; }
.fq-panel [inert] a, .fq-panel [inert] button, .fq-panel [inert] input { visibility: hidden; }
.fq-panel .fq-drill[inert] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fq-panel__box, .fq-nav__scrim,
  .fq-panel .fq-drill, .fq-panel .fq-sub, .fq-panel .fq-caret { transition: none !important; }
  /* The slide-in is already behind a no-preference query; this is the belt to
     that braces, so the panel simply appears. */
  .fq-panel__box { animation: none !important; }
}

/*  Een hoekpopup van de popups-module (z-index 20000, _SitePopups.cshtml) lag boven het geopende menu en
    dekte de menuvoet met de actieknoppen af. Zolang het menu open is, wijkt hij; sluit het menu, dan
    staat hij er weer precies zoals hij stond. (Tom, 13-09-2026) */
body:has(.fq-panel.is-open) .wfpop-overlay.wfpop-corner { visibility: hidden; }