/* =====================================================================
   FVWL — homepage-hero met transparante header, en de bovenkant van Geurkaarsen
   ===================================================================== */

/* ---------- Homepage: header transparant en goud over de foto; verdwijnt bij naar beneden scrollen ---------- */
body.fvwl-hero-home .fvwl-hdr{ position:fixed; left:0; right:0; top:0; transition:transform .45s ease; } /* geen will-change: dat zou het mobiele paneel (position:fixed) in de header opsluiten */
body.fvwl-hero-home.admin-bar .fvwl-hdr{ top:32px; }
body.fvwl-hero-home .fvwl-hdr.is-hidden{ transform:translateY(-102%); }
.fvwl-hdr .fvwl-top, .fvwl-hdr .fvwl-bar, .fvwl-hdr .fvwl-nav, .fvwl-hdr .fvwl-nav__link, .fvwl-hdr .fvwl-tool, .fvwl-hdr .fvwl-burger{ transition:background-color .35s ease, color .35s ease, border-color .35s ease; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-top{ background:rgba(30,26,22,.5); color:#CCA569; border-bottom-color:transparent; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-cart__count{ background:#CCA569; color:#1F1F1F; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-bar{ background:transparent; border-bottom-color:transparent; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-nav{ border-top-color:rgba(204,165,105,.3); }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-nav__link,
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-tool,
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-burger{ color:#CCA569 !important; }
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-tool:hover{ color:#e6c995 !important; }
/* donker verloop achter de header, zodat goud leesbaar blijft op lichtere delen van de foto */
body.fvwl-hero-home .fvwl-hdr:not(.is-solid) .fvwl-bar::before{ content:""; position:absolute; inset:0 0 -48px 0; background:linear-gradient(to bottom, rgba(16,13,11,.72), rgba(16,13,11,.45) 60%, rgba(16,13,11,0)); pointer-events:none; z-index:-1; }

/* ---------- Homepage-hero ---------- */
.fvwl-hero{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#17130f; color:#fff; }
.fvwl-hero picture{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; display:block; }
.fvwl-hero__img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fvwl-hero__img{ object-fit:cover; object-position:70% 50%; }
.fvwl-hero__shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,12,10,.55) 0%, rgba(15,12,10,.25) 38%, rgba(15,12,10,0) 62%); }
.fvwl-hero__inner{ position:absolute; left:max(32px, calc((100vw - 1440px)/2 + 32px)); bottom:16vh; max-width:560px; }
.fvwl-hero__eyebrow{ margin:0 0 18px; padding:0; font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:#CCA569; line-height:1.4; }
.fvwl-hero__title{ margin:0 0 20px; padding:0; font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-weight:400; font-size:clamp(46px,6.2vw,92px); line-height:1.02; letter-spacing:.005em; color:#CCA569; text-transform:none; }
.fvwl-hero__text{ margin:0 0 34px; padding:0; font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:18px; line-height:1.55; letter-spacing:.03em; color:#CCA569; }
.fvwl-hero__btn{ display:inline-block; padding:16px 30px 14px; border:1px solid #CCA569; color:#CCA569 !important; font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:12px; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; transition:background-color .3s, color .3s, border-color .3s; }
.fvwl-hero__btn:hover, .fvwl-hero__btn:focus-visible{ background:#CCA569; border-color:#CCA569; color:#3A3A3A !important; }
/* oude hero's van de homepage (desktop en mobiel) verbergen */
body.fvwl-hero-home #et-main-area .et_pb_section_0, body.fvwl-hero-home #et-main-area .et_pb_section_1,
body.fvwl-hero-home #main-content .et_pb_section_0, body.fvwl-hero-home #main-content .et_pb_section_1{ display:none !important; }

@media (max-width:767px){
  .fvwl-hero{ height:85vh; height:85svh; min-height:520px; }
  .fvwl-hero__img{ object-position:50% 50%; }
  .fvwl-hero__shade{ background:linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(12,10,8,0) 30%, rgba(12,10,8,.2) 44%, rgba(12,10,8,.74) 64%, rgba(12,10,8,.9) 100%); }
  .fvwl-hero__inner{ left:20px; right:20px; bottom:34px; max-width:none; }
  .fvwl-hero__eyebrow{ font-size:11px; margin-bottom:12px; }
  .fvwl-hero__title{ font-size:44px; margin-bottom:12px; }
  .fvwl-hero__text{ font-size:16px; margin-bottom:22px; }
  .fvwl-hero__btn{ padding:14px 24px 12px; font-size:11px; }
}

/* ---------- Geurkaarsen: lage hero met trage zoom ---------- */
.fvwl-chero{ position:relative; height:min(34vh,420px); min-height:250px; overflow:hidden; background:#17130f; color:#fff; }
.fvwl-chero__media{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; overflow:hidden; }
.fvwl-chero__media picture{ position:absolute; inset:0; display:block; }
.fvwl-chero__img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; object-position:50% 62%; transform-origin:60% 60%; animation:fvwl-kenburns 28s ease-in-out infinite alternate; will-change:transform; }
@keyframes fvwl-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.fvwl-chero__shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,12,10,.62) 0%, rgba(15,12,10,.28) 45%, rgba(15,12,10,.05) 75%); }
.fvwl-chero__inner{ position:absolute; left:max(32px, calc((100vw - 1440px)/2 + 32px)); right:32px; bottom:28px; max-width:620px; }
.fvwl-chero__title{ margin:0 0 12px; padding:0; font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-weight:400; font-size:clamp(38px,4.2vw,60px); line-height:1.05; color:#fff; text-transform:none; }
.fvwl-chero__text{ margin:0; padding:0; font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:17px; line-height:1.55; letter-spacing:.03em; color:#f3ede2; }
body.fvwl-candles-top #et-main-area .et_pb_section_0, body.fvwl-candles-top #main-content .et_pb_section_0{ display:none !important; }

/* ---------- Geurkaarsen: schuivende rij stijlfamilies ---------- */
.fvwl-marquee{ background:#FAF6EF; padding:16px 0 18px; overflow:hidden; border-bottom:1px solid #e9e1d2; }
.fvwl-marquee__track{ display:flex; width:max-content; animation:fvwl-marquee 70s linear infinite; }
.fvwl-marquee:hover .fvwl-marquee__track, .fvwl-marquee:focus-within .fvwl-marquee__track{ animation-play-state:paused; }
@keyframes fvwl-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } } /* vier gelijke rijen: één rij opschuiven */
.fvwl-marquee__set{ display:flex; gap:16px; padding-right:16px; }
.fvwl-ftile{ position:relative; display:block; flex:0 0 auto; width:clamp(150px,12.5vw,190px); aspect-ratio:4/5; overflow:hidden; background:#2b2b2b; text-decoration:none; }
.fvwl-ftile img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; object-position:50% 50%; transition:transform .6s ease; }
.fvwl-ftile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(30,26,22,.82) 0%, rgba(30,26,22,.45) 30%, rgba(30,26,22,0) 62%); }
.fvwl-ftile:hover img{ transform:scale(1.04); }
.fvwl-ftile__txt{ position:absolute; left:14px; right:14px; bottom:10px; z-index:1; color:#fff; }
.fvwl-ftile__fam{ display:block; font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-size:22px; line-height:1.1; }
.fvwl-ftile__names{ display:block; margin-top:3px; font-family:"Josefin Sans",sans-serif; font-weight:300; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#e9dcc3; line-height:1.5; }
/* aanraakschermen: niet automatisch schuiven, met de vinger verschuiven */
@media (hover:none), (max-width:767px){
  .fvwl-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; padding:12px 0 14px; }
  .fvwl-marquee::-webkit-scrollbar{ display:none; }
  .fvwl-marquee__track{ animation:none; padding:0 16px; }
  .fvwl-marquee__set[aria-hidden="true"]{ display:none; }
  .fvwl-marquee__set{ gap:12px; padding-right:0; }
  .fvwl-ftile{ width:38vw; max-width:190px; scroll-snap-align:start; }
  .fvwl-ftile__names{ display:none; }
  .fvwl-ftile__fam{ font-size:18px; }
}
@media (max-width:767px){
  .fvwl-chero{ height:34vh; height:34svh; min-height:230px; }
  .fvwl-chero__inner{ left:20px; right:20px; bottom:22px; }
  .fvwl-chero__title{ font-size:38px; margin-bottom:8px; }
  .fvwl-chero__text{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .fvwl-chero__img{ animation:none; }
  .fvwl-marquee__track{ animation:none; }
  .fvwl-marquee{ overflow-x:auto; }
  .fvwl-marquee__set[aria-hidden="true"]{ display:none; }
}

/* ---------- Geurkaarsen: introtekst onder de producten ---------- */
.fvwl-cintro{ max-width:820px; margin:0 auto; padding:56px 24px 64px; text-align:center; font-family:"Josefin Sans",sans-serif; font-weight:300; color:#3A3A3A; }
.fvwl-cintro h2{ font-family:"Cormorant Garamond","Tenor Sans",Georgia,serif; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.2; margin:0 0 14px; padding:0; color:#3A3A3A; text-transform:none; }
.fvwl-cintro p{ font-size:17px; line-height:1.7; margin:0; }
@media (max-width:767px){
  .fvwl-chero__shade{ background:linear-gradient(180deg, rgba(15,12,10,.1) 0%, rgba(15,12,10,.3) 45%, rgba(15,12,10,.75) 100%); }
}