/* =====================================================================
   FVWL — header met mega-menu
   Licht: wit met antraciete tekst; goud alleen als dunne lijn bij hover/actief (designsysteem, fvwl-design.css).
   Josefin Sans (menu, labels) · Cormorant Garamond (titels op tegels)
   ===================================================================== */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/cormorant-garamond-400-latin.woff2") format("woff2");
}
.fvwl-hdr{
  --ink:var(--fvwl-anthracite,#3A3A3A); --gold:var(--fvwl-gold,#CCA569); --paper:var(--fvwl-white,#fff); --soft:var(--fvwl-paper,#FAF8F4); --line:var(--fvwl-line,#E5E2DC);
  position:sticky; top:0; z-index:99990; font-family:"Josefin Sans",sans-serif; font-weight:300; color:var(--ink);
}
.admin-bar .fvwl-hdr{ top:32px; }
.fvwl-hdr *, .fvwl-hdr *::before, .fvwl-hdr *::after{ box-sizing:border-box; }
.fvwl-hdr a{ color:inherit; text-decoration:none; }
.fvwl-hdr ul{ list-style:none !important; margin:0; padding:0 !important; }
.fvwl-hdr button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.fvwl-ico{ display:block; }

/* Oude Theme Builder-header verbergen (blijft in de database staan) */
body.fvwl-new-header .et-l--header,
body.fvwl-new-header #main-header,
body.fvwl-new-header #top-header{ display:none !important; }
body.fvwl-new-header #page-container{ padding-top:0 !important; margin-top:0 !important; }

/* ---------- Bovenbalk ---------- */
.fvwl-top{ background:var(--soft); color:var(--ink); border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.fvwl-top__inner{ max-width:1440px; margin:0 auto; padding:0 32px; min-height:36px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.fvwl-top__links{ display:flex; gap:22px; }
.fvwl-top__links a{ opacity:.85; transition:opacity .2s; }
.fvwl-top__links a:hover{ opacity:1; }
.fvwl-top__msg{ margin:0; padding:9px 0 7px; text-align:center; line-height:1.5; color:inherit; font-size:11px; }
.fvwl-lang{ position:relative; justify-self:end; }
.fvwl-lang__btn{ display:flex !important; align-items:center; gap:4px; letter-spacing:.16em; padding:8px 0 6px !important; color:inherit !important; }
.fvwl-lang__btn .fvwl-ico{ width:14px; height:14px; }
.fvwl-lang__list{ position:absolute; right:-12px; top:100%; min-width:64px; background:var(--paper); border:1px solid var(--line); padding:6px 0 !important; display:none; z-index:5; }
.fvwl-lang.is-open .fvwl-lang__list, .fvwl-lang:hover .fvwl-lang__list{ display:block; }
.fvwl-lang__list a{ display:block; padding:8px 16px 6px; color:var(--ink); }
.fvwl-lang__list a:hover{ background:var(--soft); }

/* ---------- Hoofdbalk ---------- */
.fvwl-bar{ background:var(--paper); border-bottom:1px solid var(--line); position:relative; }
.fvwl-bar__inner{ max-width:1440px; margin:0 auto; padding:0 32px; min-height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.fvwl-burger{ display:none !important; }
.fvwl-logo{ grid-column:2; justify-self:center; display:block; line-height:0; }
.fvwl-logo img{ height:62px; width:auto; display:block; }
.fvwl-tools{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:22px; }
.fvwl-tool{ display:inline-flex !important; align-items:center; justify-content:center; width:28px; height:28px; color:var(--ink) !important; transition:color .2s; }
.fvwl-tool:hover{ color:var(--fvwl-ink,#1F1F1F) !important; }
/* Tikdoel van 44 × 44 px (iPhone): het icoon blijft 28 px, het aanraakvlak eromheen is groter. Gemeten in WebKit, 12 nov. */
.fvwl-tool, .fvwl-burger{ position:relative; }
.fvwl-tool::after, .fvwl-burger::after{ content:""; position:absolute; inset:-8px; }

.fvwl-nav{ grid-column:1; grid-row:1; }
.fvwl-nav__list{ display:flex; flex-wrap:nowrap; gap:0 22px; align-items:center; }
.fvwl-nav__link{ display:block; padding:38px 0 34px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; position:relative; color:var(--ink) !important; }
.fvwl-nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:28px; height:1px; background:var(--gold); transition:right .25s ease; }
.fvwl-nav__item:hover > .fvwl-nav__link::after,
.fvwl-nav__item.is-open > .fvwl-nav__link::after,
.fvwl-nav__link:focus-visible::after{ right:0; }

/* ---------- Mega-menu ----------
   Geen beeldtegels (schakelaar in Weergave → FVWL header, standaard uit).
   Opbouw: links een smalle kolom (bv. “Ontdek”), een dunne lijn, daarnaast gelijke kolommen met een kop in
   Cormorant Garamond en de links eronder. Goud alleen als lijn: onder de kop van de sectie en bij hover. */
.fvwl-mega{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -24px rgba(58,58,58,.28); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:4; }
.fvwl-nav__item.is-open > .fvwl-mega{ opacity:1; visibility:visible; transform:none; }
.fvwl-mega__inner{ max-width:1440px; margin:0 auto; padding:46px 56px 56px; display:grid; grid-template-columns:minmax(0,1fr); gap:44px 0; align-items:stretch; }
.fvwl-mega__inner--aside{ grid-template-columns:minmax(170px,236px) minmax(0,1fr); }
.fvwl-mega__inner--aside > .fvwl-mega__aside{ padding-right:44px; }
.fvwl-mega__inner--aside > .fvwl-mega__main{ border-left:1px solid var(--line); padding-left:60px; }
.fvwl-mega__col + .fvwl-mega__col, .fvwl-mega__sec + .fvwl-mega__sec{ margin-top:36px; }
.fvwl-hdr .fvwl-mega__title{ margin:0 0 22px; padding:0; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); font-weight:400; line-height:1.4; }
.fvwl-mega__title-t{ display:inline-block; padding-bottom:9px; border-bottom:1px solid transparent; }
.fvwl-mega__title--accent .fvwl-mega__title-t{ border-bottom-color:var(--gold); }
/* gelijke kolommen; kop en lijst delen de rijen van het raster, zodat de lijsten op één lijn beginnen (ook als een kop op twee regels staat) */
.fvwl-mega__fams{ display:grid; grid-template-columns:repeat(var(--fvwl-n,5),minmax(0,1fr)); gap:0 36px; }
.fvwl-mega__group{ display:grid; grid-template-rows:subgrid; grid-row:span 2; align-content:start; }
.fvwl-hdr .fvwl-mega__sub{ margin:0 0 17px; padding:0; font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-size:25px; font-weight:400; line-height:1.15; letter-spacing:.01em; color:var(--fvwl-ink,#1F1F1F); }
.fvwl-hdr .fvwl-mega__group:not(:has(ul)) .fvwl-mega__sub{ margin-bottom:0; }
.fvwl-mega__sub a{ color:inherit; background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat; transition:background-size .25s; padding-bottom:2px; }
.fvwl-mega__sub a:hover, .fvwl-mega__sub a:focus-visible{ background-size:100% 1px; }
/* links: 15 px, antraciet, gewoon gewicht (dun leest als lichtgrijs), ruime regelafstand, dunne gouden lijn bij hover */
.fvwl-mega li, .fvwl-m__sub li{ margin:0 0 14px; break-inside:avoid; }
.fvwl-mega li:last-child, .fvwl-m__sub li:last-child{ margin-bottom:0; }
.fvwl-mega li a, .fvwl-m__sub li a{ font-size:15px; font-weight:400; letter-spacing:.03em; line-height:1.45; color:var(--ink); background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat; transition:background-size .25s; padding-bottom:3px; }
.fvwl-mega li a:hover, .fvwl-mega li a:focus-visible, .fvwl-m__sub li a:hover{ background-size:100% 1px; }
/* beeldtegels (alleen als ze aan staan): een rij onder de kolommen, nooit breder dan 220 px per tegel */
.fvwl-mega__tiles{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:16px; justify-content:end; border-top:1px solid var(--line); padding-top:32px; }
.fvwl-tile{ position:relative; display:block; overflow:hidden; aspect-ratio:4/5; background:#2b2b2b; }
.fvwl-tile img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; transition:transform .6s ease; }
.fvwl-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(30,26,22,.72) 0%, rgba(30,26,22,.12) 48%, rgba(30,26,22,0) 70%); }
.fvwl-tile:hover img{ transform:scale(1.04); }
.fvwl-tile__txt{ position:absolute; left:16px; right:16px; bottom:14px; z-index:1; color:#fff; font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-size:21px; line-height:1.15; letter-spacing:.01em; }
.fvwl-tile__txt::after{ content:""; display:block; width:28px; height:1px; background:var(--gold); margin-top:10px; }

/* ---------- Zoeken ---------- */
.fvwl-search{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 24px 40px -24px rgba(58,58,58,.28); z-index:6; }
.fvwl-search[hidden]{ display:none; }
.fvwl-search__form{ max-width:900px; margin:0 auto; padding:26px 32px 22px; display:flex; align-items:center; gap:14px; }
.fvwl-search__form input[type="search"]{ flex:1; border:0 !important; border-bottom:1px solid var(--ink) !important; border-radius:0 !important; background:transparent !important; padding:10px 0 8px !important;
  font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-size:26px; color:var(--ink) !important; outline:none; box-shadow:none !important; -webkit-appearance:none; }
.fvwl-search__form input::placeholder{ color:var(--fvwl-muted,#6B6761); }
.fvwl-search__results{ max-width:900px; margin:0 auto; padding:0 32px 26px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 24px; }
.fvwl-search__results:empty{ display:none; }
.fvwl-sr{ display:flex; gap:14px; align-items:center; }
.fvwl-sr img{ width:64px; height:80px; object-fit:cover; background:var(--fvwl-stone,#F2F0EC); flex:0 0 64px; }
.fvwl-sr__name{ display:block; font-size:15px; font-weight:400; letter-spacing:.02em; line-height:1.4; color:var(--fvwl-ink,#1F1F1F); }
.fvwl-sr__price{ display:block; font-size:14px; color:var(--fvwl-anthracite,#3A3A3A); margin-top:4px; }
.fvwl-search__msg, .fvwl-search__all{ grid-column:1/-1; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.fvwl-search__all a{ border-bottom:1px solid var(--gold); padding-bottom:3px; }

/* ---------- Mobiel paneel ---------- */
.fvwl-drawer, .fvwl-scrim{ display:none; }
.fvwl-drawer[hidden], .fvwl-scrim[hidden]{ display:none !important; }

@media (max-width:1360px){
  .fvwl-nav__list{ gap:0 16px; }
  .fvwl-nav__link{ font-size:11px; letter-spacing:.13em; }
}
@media (max-width:1023px){
  .fvwl-top__inner{ grid-template-columns:1fr auto; padding:0 16px; gap:10px; }
  .fvwl-top__links{ display:none; }
  .fvwl-top__msg{ text-align:left; font-size:10px; letter-spacing:.12em; }
  .fvwl-top__sep, .fvwl-top__second{ display:none; }
  .fvwl-bar__inner{ grid-template-columns:1fr auto 1fr; padding:0 16px; min-height:68px; gap:10px; }
  .fvwl-nav{ display:none; }
  .fvwl-burger{ display:inline-flex !important; grid-column:1; justify-self:start; width:32px; height:32px; align-items:center; justify-content:center; }
  .fvwl-logo img{ height:44px; }
  .fvwl-tools{ gap:12px; }
  .fvwl-account{ display:none !important; }
  .fvwl-search__form{ padding:16px 16px 14px; }
  .fvwl-search__form input[type="search"]{ font-size:20px; }
  .fvwl-search__results{ grid-template-columns:1fr; padding:0 16px 18px; }

  .fvwl-scrim{ display:block; position:fixed; inset:0; background:rgba(58,58,58,.42); z-index:99991; }
  .fvwl-drawer{ display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; width:min(90vw,400px); background:var(--paper); z-index:99992; overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:18px 0 40px rgba(58,58,58,.2); animation:fvwl-in .28s ease both; }
  @keyframes fvwl-in{ from{ transform:translateX(-100%); } to{ transform:none; } }
  .fvwl-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
  .fvwl-drawer__title{ font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-size:26px; }
  .fvwl-hdr ul.fvwl-m{ padding:6px 20px !important; }
  .fvwl-m__item{ border-bottom:1px solid var(--line); }
  .fvwl-m__link{ display:flex !important; width:100%; align-items:center; justify-content:space-between; padding:18px 0 15px !important; font-size:13px; letter-spacing:.2em; text-transform:uppercase; text-align:left; color:var(--ink) !important; }
  .fvwl-m__toggle .fvwl-ico{ width:16px; height:16px; transition:transform .2s; }
  .fvwl-m__toggle[aria-expanded="true"] .fvwl-ico{ transform:rotate(180deg); }
  .fvwl-m__sub{ padding:4px 0 24px; }
  .fvwl-m__sub[hidden]{ display:none; }
  .fvwl-hdr .fvwl-m__sub .fvwl-mega__title{ margin:18px 0 14px; }
  .fvwl-m__sub .fvwl-mega__col + .fvwl-mega__col, .fvwl-m__sub .fvwl-mega__sec + .fvwl-mega__sec{ margin-top:0; }
  .fvwl-m__sub .fvwl-mega__main{ margin-top:14px; }
  .fvwl-m__sub .fvwl-mega__fams{ display:block; columns:2; column-gap:24px; }
  .fvwl-m__sub .fvwl-mega__group{ display:block; break-inside:avoid; padding-bottom:24px; }
  .fvwl-m__sub .fvwl-mega__group:not(:has(ul)){ padding-bottom:14px; }
  .fvwl-hdr .fvwl-m__sub .fvwl-mega__sub{ font-size:20px; margin-bottom:12px; }
  .fvwl-m__sub li{ margin-bottom:13px; }
  .fvwl-m__sub li a{ display:inline-block; }
  .fvwl-m__tiles{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }
  .fvwl-tile--sm{ flex:0 0 132px; aspect-ratio:4/5; scroll-snap-align:start; }
  .fvwl-tile--sm .fvwl-tile__txt{ font-size:16px; left:10px; right:10px; bottom:10px; }
  .fvwl-tile--sm .fvwl-tile__txt::after{ margin-top:6px; width:20px; }
  .fvwl-drawer__foot{ margin-top:auto; padding:20px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; border-top:1px solid var(--line); }
  body.fvwl-drawer-open{ overflow:hidden; }
}
@media (prefers-reduced-motion:reduce){
  .fvwl-hdr *{ transition:none !important; animation:none !important; }
}

/* ---------- Desktop-indeling (≥ 1200 px) ----------
   Twee rijen: het logo exact in het midden met de iconen rechts, het menu gecentreerd eronder.
   Eén rij met het menu links van een gecentreerd logo past niet: zes menu-items zijn in het Frans en
   Duits breder dan de halve balk (getest op 1440 en 1680 px). */
@media (min-width:1024px){
  .fvwl-logo{ position:absolute; left:50%; top:46px; transform:translate(-50%,-50%); grid-column:1 / -1; grid-row:1; }
}
@media (min-width:1024px){
  .fvwl-bar__inner{ grid-template-columns:1fr; grid-template-rows:92px auto; gap:0; }
  .fvwl-tools{ grid-column:1; grid-row:1; justify-self:end; }
  .fvwl-nav{ grid-column:1; grid-row:2; justify-self:center; border-top:1px solid var(--line); width:100%; }
  .fvwl-nav__list{ justify-content:center; gap:0 34px; }
  .fvwl-nav__link{ padding:17px 0 15px; font-size:12px; letter-spacing:.2em; }
  .fvwl-nav__link::after{ bottom:10px; }
}
.fvwl-search__form input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }

/* ---------- Tablet liggend / kleine laptop (1024–1199 px): desktopmenu, iets compacter ---------- */
@media (min-width:1024px) and (max-width:1199px){
  .fvwl-nav__list{ gap:0 22px; }
  .fvwl-nav__link{ font-size:11px; letter-spacing:.16em; }
  .fvwl-mega__inner{ padding:36px 32px 44px; }
  .fvwl-mega__inner--aside{ grid-template-columns:172px minmax(0,1fr); } /* “Geschenkgutscheine” (DE) past op één regel */
  .fvwl-mega__inner--aside > .fvwl-mega__aside{ padding-right:16px; }
  .fvwl-mega__inner--aside > .fvwl-mega__main{ padding-left:28px; }
  .fvwl-mega__fams{ gap:0 16px; }
  .fvwl-hdr .fvwl-mega__sub{ font-size:20px; letter-spacing:0; }
  .fvwl-mega__tiles{ grid-template-columns:repeat(3,minmax(0,180px)); }
}
/* ---------- Mandje met aantal ---------- */
.fvwl-cart{ position:relative; }
.fvwl-cart__count{ position:absolute; top:-5px; right:-8px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--ink); color:#fff;
  font-size:10px; line-height:17px; text-align:center; letter-spacing:0; font-weight:400; }
.fvwl-cart__count.is-empty{ display:none; }
.fvwl-top__links a{ white-space:nowrap; }
@media (min-width:1024px) and (max-width:1199px){
  .fvwl-top__msg{ font-size:10px; letter-spacing:.12em; }
  .fvwl-top__links{ gap:14px; font-size:10px; letter-spacing:.12em; }
}

/* ---------- Variant: één rij — menu links van het gecentreerde logo, iconen rechts (zoals Baobab) ----------
   Aan met Weergave → FVWL header → “Opbouw van de balk”, of ?fvwl_hdr=een.
   Gemeten op 12 nov (vijf items, zonder “Collecties”): op 1024 px past het niet (NL, FR en DE schuiven onder het logo), op 1440 px
   net (FR “Bougies parfumées”). Daarom pas vanaf 1400 px op één rij; smaller blijft het de opbouw met twee rijen. */
@media (min-width:1400px){
  .fvwl-hdr--row .fvwl-bar__inner{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-rows:92px; gap:40px; }
  .fvwl-hdr--row .fvwl-logo{ position:static; transform:none; grid-column:2; grid-row:1; }
  .fvwl-hdr--row .fvwl-nav{ grid-column:1; grid-row:1; justify-self:start; border-top:0; width:auto; min-width:0; }
  .fvwl-hdr--row .fvwl-nav__list{ justify-content:flex-start; gap:0 26px; }
  .fvwl-hdr--row .fvwl-nav__link{ padding:38px 0 34px; font-size:11.5px; letter-spacing:.15em; }
  .fvwl-hdr--row .fvwl-nav__link::after{ bottom:30px; }
  .fvwl-hdr--row .fvwl-tools{ grid-column:3; grid-row:1; }
}

/* ---------- Bovenbalk leesbaarder (12 nov): antraciete tekst in gewoon gewicht, goud alleen als klein accent ----------
   De dunne letter (300) op 11 px las als lichtgrijs/goud. Over de foto van de homepage blijft de balk goud (hero.css). */
.fvwl-top{ color:var(--fvwl-ink,#1F1F1F); font-weight:400; }
.fvwl-top__msg{ font-weight:400; color:var(--fvwl-anthracite,#3A3A3A); }
.fvwl-top__msg::before{ content:""; display:inline-block; width:5px; height:5px; margin:0 12px 0 0; border-radius:50%; background:var(--gold); vertical-align:2px; }
.fvwl-top__links a, .fvwl-lang__btn{ font-weight:400; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-top__msg{ color:inherit; }

/* ----- Plakkende header op de hele site, ook op mobiel (beslissing B10, 12 nov) -----
   Op mobiel staan html en body op overflow-x:hidden (Divi of een oude snippet). Daardoor wordt body een scrollcontainer en plakt de
   header niet. "clip" verbergt de horizontale overloop ook, zonder dat effect. Niet als een paneel open is (zijmandje, mobiel menu,
   filter): die zetten zelf overflow op hidden om het scrollen van de pagina te blokkeren. Zelfde regel als in fvwl-collectie.css (deel 10).
   Wegschuiven bij naar beneden scrollen, terugkomen bij omhoog scrollen: header.js. */
html:has(body.fvwl-new-header):not(.xoo-wsc-cart-active):not(:has(body.fvwl-drawer-open)):not(:has(body.xoo-wsc-cart-active)):not(:has(.wpc-filters-widget-content.wpc-opened)),
body.fvwl-new-header:not(.xoo-wsc-cart-active):not(.fvwl-drawer-open):not(:has(.wpc-filters-widget-content.wpc-opened)){ overflow-x:clip !important; overflow-y:visible !important; }
/* geen will-change/transform in rust: het mobiele paneel (position:fixed) staat in de header */
body.fvwl-new-header .fvwl-hdr{ transition:transform .32s cubic-bezier(.2,.7,.2,1); }
body.fvwl-new-header .fvwl-hdr.is-hidden{ transform:translateY(-102%); }
@media (prefers-reduced-motion:reduce){ body.fvwl-new-header .fvwl-hdr{ transition:none; } }