/* Caarsen voor jouw — FX Studio 4 runtime styles (shop side). Only active when fx-runtime.js marks <html>.
   Section variants, button styles, motion presets, particles layer, edit-mode outlines. No gold, no serif, no italic. */

/* ---------- background layer (image / video) ---------- */
#fxs-bg{position:fixed;inset:0;z-index:-1;background:center/cover no-repeat;pointer-events:none}
#fxs-bg video{width:100%;height:100%;object-fit:cover;display:block}
#fxs-bg::after{content:"";position:absolute;inset:0;background:rgba(var(--h-bg-rgb,20,12,7),var(--fxs-ov,.55))}
#fxs-particles{position:fixed;inset:0;width:100vw;height:100vh;z-index:3;pointer-events:none}
#spotlight.fxs-off{display:none !important}
.fxs-navhide{display:none !important}

/* ---------- buttons ---------- */
html[data-fxs-btn="rounded"] .btn,html[data-fxs-btn="rounded"] .ct-send{border-radius:14px}
html[data-fxs-btn="square"] .btn,html[data-fxs-btn="square"] .ct-send{border-radius:4px}
html[data-fxs-btn="outline"] .btn-primary,html[data-fxs-btn="outline"] .ct-send{background:transparent !important;border:2px solid var(--h-amber,var(--accent)) !important;color:var(--h-amber,var(--accent)) !important;box-shadow:none}
html[data-fxs-btn="outline"] .btn-primary:hover{background:rgba(var(--h-amber-rgb),.12) !important}
html[data-fxs-btn="glass"] .btn{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.28) !important;color:var(--h-tx,#fff) !important;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
html[data-fxs-btn="soft"] .btn-primary,html[data-fxs-btn="soft"] .ct-send{background:rgba(var(--h-amber-rgb),.18) !important;color:var(--h-hi,var(--h-amber)) !important;border:1px solid rgba(var(--h-amber-rgb),.35) !important;box-shadow:none}

/* ---------- section spacing ---------- */
main > [data-fxs-sp="compact"].block,main > [data-fxs-sp="compact"]{padding-top:clamp(24px,3.5vw,44px) !important;padding-bottom:clamp(24px,3.5vw,44px) !important}
main > [data-fxs-sp="ruim"].block,main > [data-fxs-sp="ruim"]{padding-top:clamp(70px,11vw,150px) !important;padding-bottom:clamp(70px,11vw,150px) !important}
main > [data-fxs-hide]{display:none !important}

/* ---------- hero variants: A = default, B = centred, C = magazine (bottom-left, big) ---------- */
#hero[data-fxs-v="B"] .hero-inner{display:flex;justify-content:center;text-align:center}
#hero[data-fxs-v="B"] .hero-copy{margin:0 auto;max-width:760px}
#hero[data-fxs-v="B"] .hero-cta,#hero[data-fxs-v="B"] .hero-trust{justify-content:center}
#hero[data-fxs-v="B"] p.lead{margin-left:auto;margin-right:auto}
#hero[data-fxs-v="C"]{align-items:flex-end}
#hero[data-fxs-v="C"] .hero-inner{padding-bottom:clamp(40px,8vh,90px)}
#hero[data-fxs-v="C"] .hero-copy{max-width:min(1000px,100%)}
#hero[data-fxs-v="C"] .hero-title{font-size:clamp(2.6rem,8vw,7rem);line-height:.95}

/* ---------- collection columns ---------- */
@media (min-width:761px){
  #winkel[data-fxs-v="2"] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #winkel[data-fxs-v="3"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #winkel[data-fxs-v="4"] .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
}
@media (min-width:761px) and (max-width:1060px){ #winkel[data-fxs-v="4"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ #winkel[data-fxs-v="4"] .grid,#winkel[data-fxs-v="3"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }

/* ---------- lookbook: pin (default) / swipe (native snap) / grid ---------- */
#lookbook[data-fxs-lb="swipe"] .lb-pin,#lookbook[data-fxs-lb="grid"] .lb-pin{height:auto !important;min-height:0 !important;display:block !important;padding:clamp(56px,8vw,96px) 0 24px !important}
#lookbook[data-fxs-lb="swipe"] .lb-track{transform:none !important;width:auto !important;overflow-x:auto !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:18px;scrollbar-width:thin}
#lookbook[data-fxs-lb="swipe"] .lb-item{scroll-snap-align:center;height:auto !important;width:clamp(240px,30vw,400px) !important;aspect-ratio:4/5}
#lookbook[data-fxs-lb="grid"] .lb-track{transform:none !important;width:auto !important;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));max-width:var(--maxw);margin:0 auto;padding:0 20px !important;box-sizing:border-box}
#lookbook[data-fxs-lb="grid"] .lb-item{width:auto !important;height:auto !important;aspect-ratio:4/5}
#lookbook[data-fxs-lb="swipe"] .lb-progress,#lookbook[data-fxs-lb="grid"] .lb-progress{display:none}

/* ---------- other variants ---------- */
[data-section="waarden"][data-fxs-v="2"] .values{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-section="waarden"][data-fxs-v="list"] .values{grid-template-columns:1fr;max-width:760px}
[data-section="waarden"][data-fxs-v="list"] .value{display:grid;grid-template-columns:auto 1fr;column-gap:16px;text-align:left;align-items:center}
[data-section="waarden"][data-fxs-v="list"] .value p{grid-column:2}
@media (max-width:560px){ [data-section="waarden"][data-fxs-v="2"] .values{grid-template-columns:1fr} }
@media (min-width:761px){ #over[data-fxs-v="rechts"] .story-art{order:2} }
#herfstbanner[data-fxs-v="stil"] .marquee{display:none}
#quiz[data-fxs-v="breed"] > .wrap{max-width:none;padding-left:0;padding-right:0}
#quiz[data-fxs-v="breed"] .quizcard{border-radius:0}
#vband[data-fxs-v="kort"]{min-height:min(56svh,520px)}

/* ---------- motion: global entrance presets for the shop's .reveal elements ---------- */
html.fxs-doc .reveal{transition-duration:calc(.7s / var(--fxs-speed,1)),calc(.7s / var(--fxs-speed,1))}
html[data-fxs-entrance="fade"] .reveal:not(.in){transform:none}
html[data-fxs-entrance="zoom-in"] .reveal:not(.in){transform:scale(calc(1 - .07 * var(--fxs-int,1)))}
html[data-fxs-entrance="blur-in"] .reveal:not(.in){transform:translateY(calc(12px * var(--fxs-int,1)));filter:blur(calc(10px * var(--fxs-int,1)))}
html[data-fxs-entrance="blur-in"] .reveal{transition-property:opacity,transform,filter}
html[data-fxs-entrance="slide-left"] .reveal:not(.in){transform:translateX(calc(-40px * var(--fxs-int,1)))}
html[data-fxs-entrance="rise-mask"] .reveal:not(.in){transform:translateY(calc(40px * var(--fxs-int,1)));clip-path:inset(0 0 100% 0)}
html[data-fxs-entrance="rise-mask"] .reveal{transition-property:opacity,transform,clip-path;clip-path:inset(0 0 0 0)}
html[data-fxs-entrance="fade-up"] .reveal:not(.in){transform:translateY(calc(22px * var(--fxs-int,1)))}
html[data-fxs-entrance="none"] .reveal{opacity:1 !important;transform:none !important;transition:none !important}

/* ---------- motion: per-element entrance (data-fxs-anim) ---------- */
[data-fxs-anim]{transition:opacity var(--fxs-dur,900ms) cubic-bezier(.22,1,.36,1) var(--fxs-delay,0ms),transform var(--fxs-dur,900ms) cubic-bezier(.22,1,.36,1) var(--fxs-delay,0ms),filter var(--fxs-dur,900ms) ease var(--fxs-delay,0ms),clip-path var(--fxs-dur,900ms) cubic-bezier(.22,1,.36,1) var(--fxs-delay,0ms)}
[data-fxs-anim]:not(.fxs-in){opacity:0}
[data-fxs-anim="fade-up"]:not(.fxs-in){transform:translateY(calc(28px * var(--fxs-int,1)))}
[data-fxs-anim="zoom-in"]:not(.fxs-in){transform:scale(calc(1 - .1 * var(--fxs-int,1)))}
[data-fxs-anim="slide-left"]:not(.fxs-in){transform:translateX(calc(-56px * var(--fxs-int,1)))}
[data-fxs-anim="slide-right"]:not(.fxs-in){transform:translateX(calc(56px * var(--fxs-int,1)))}
[data-fxs-anim="blur-in"]:not(.fxs-in){filter:blur(calc(14px * var(--fxs-int,1)));transform:scale(1.03)}
[data-fxs-anim="rise-mask"]{clip-path:inset(0 0 0 0)}
[data-fxs-anim="rise-mask"]:not(.fxs-in){clip-path:inset(0 0 100% 0);transform:translateY(calc(30px * var(--fxs-int,1)))}
[data-fxs-anim="pop"]{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
[data-fxs-anim="pop"]:not(.fxs-in){transform:scale(.7)}
[data-fxs-anim="flip-up"]:not(.fxs-in){transform:perspective(700px) rotateX(calc(40deg * var(--fxs-int,1))) translateY(20px);transform-origin:50% 100%}
[data-fxs-anim="float"].fxs-in{animation:fxsFloat calc(5s / var(--fxs-speed,1)) ease-in-out var(--fxs-delay,0ms) infinite}
[data-fxs-anim="float"]:not(.fxs-in){transform:translateY(16px)}
@keyframes fxsFloat{0%,100%{translate:0 0}50%{translate:0 calc(-10px * var(--fxs-int,1))}}

/* ---------- motion: marquee, Ken Burns, scroll scenes, magnetic/tilt off ---------- */
html.fxs-doc .marquee-in{animation-duration:var(--fxs-marq,26s)}
html.fxs-marq-stop .marquee-in{animation-play-state:paused}
html.fxs-kb .story-frame img,html.fxs-kb .vband-media,html.fxs-kb .lb-item img,html.fxs-kb #fxs-bg{animation:fxsKB calc(18s / var(--fxs-speed,1)) ease-in-out infinite alternate}
@keyframes fxsKB{from{scale:1}to{scale:calc(1 + .1 * var(--fxs-int,1))}}
html.fxs-scenes main > [data-section] > .wrap{opacity:calc(.25 + .75 * var(--fxs-p,1));translate:0 calc((1 - var(--fxs-p,1)) * 36px * var(--fxs-int,1));scale:calc(.97 + .03 * var(--fxs-p,1));transition:opacity .15s linear}
html.fxs-nomag .magnetic{transform:none !important}
html.fxs-notilt .tilt,html.fxs-notilt .lb-item{transform:none !important}
.fxs-tglow{position:fixed;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;z-index:120;background:radial-gradient(circle,rgba(var(--glow-col,255,178,92),calc(.35 * var(--fx-glow,.9))),transparent 70%);animation:fxsTg .9s ease-out forwards}
@keyframes fxsTg{from{opacity:1;scale:.3}to{opacity:0;scale:1.4}}
.fxs-flash{animation:fxsFlash .9s ease}
@keyframes fxsFlash{0%{box-shadow:0 0 0 0 rgba(255,140,90,.0)}30%{box-shadow:0 0 0 6px rgba(255,140,90,.55)}100%{box-shadow:0 0 0 14px rgba(255,140,90,0)}}

@media (prefers-reduced-motion:reduce){
  [data-fxs-anim]{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;animation:none !important;transition:none !important}
  html.fxs-kb .story-frame img,html.fxs-kb .vband-media,html.fxs-kb .lb-item img,html.fxs-kb #fxs-bg{animation:none}
  html.fxs-scenes main > [data-section] > .wrap{opacity:1;translate:none;scale:none}
  .fxs-tglow{display:none}
}

/* ---------- edit mode (FX Studio preview only) ---------- */
html.fxs-edit{scroll-behavior:auto}
html.fxs-edit:not(.fxs-interact) body *{cursor:default}
html.fxs-edit:not(.fxs-interact) [data-fxs-id]{cursor:pointer}
html.fxs-edit main > [data-fxs-hide]{display:block !important;position:relative;max-height:56px !important;min-height:56px !important;overflow:hidden !important;padding:0 !important;margin:0 !important}
html.fxs-edit main > [data-fxs-hide] > *{visibility:hidden}
html.fxs-edit main > [data-fxs-hide]::after{content:attr(data-fxs-hlabel) "  ·  niet zichtbaar voor bezoekers";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 13px/1.2 Poppins,system-ui,sans-serif;color:#fff2e6;letter-spacing:.02em;background:repeating-linear-gradient(135deg,rgba(196,93,43,.32) 0 12px,rgba(26,18,13,.85) 12px 24px);border-block:1px dashed rgba(255,170,120,.6);z-index:5}
html.fxs-edit #intro{display:none !important}
.fxs-box{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;border-radius:8px;opacity:0;transition:opacity .15s,transform .12s cubic-bezier(.22,1,.36,1),width .12s,height .12s}
.fxs-box-h{outline:2px dashed rgba(255,166,120,.95);outline-offset:2px;background:rgba(255,140,90,.06)}
.fxs-box-s{outline:2.5px solid #ff8a5c;outline-offset:2px;box-shadow:0 0 0 6px rgba(255,138,92,.18),0 0 40px rgba(255,138,92,.25)}
.fxs-box b{position:absolute;left:-2px;top:-28px;font:600 11.5px/1 Poppins,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;max-width:min(340px,90vw);overflow:hidden;text-overflow:ellipsis;padding:6px 9px;border-radius:7px 7px 7px 2px;background:#2b1a10;color:#ffe6d6;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.fxs-box-s b{background:#ff8a5c;color:#2b1a10}
.fxs-box.fxs-lb-in b{top:4px;left:4px;border-radius:7px}

/* ---------- light palettes (Minimal crème, Zomer zand, Salie & linnen): the shop CSS was made for dark seasons ---------- */
html.fxs-light main :is(h2,h3,h4):not(.quizcard *):not(.vband *):not(.card *):not(.value *):not(.lb-item *){color:var(--h-tx) !important}
html.fxs-light #hero,html.fxs-light #vband,html.fxs-light .quizcard,html.fxs-light .foot,html.fxs-light .value,html.fxs-light .card,html.fxs-light .lb-item{--h-tx:#fff6ee;--h-tx2:#fff6ee;--h-mu:#e3d3c4;--h-line-rgb:255,236,220}
html.fxs-light main .btn-ghost:not(#hero *):not(#vband *):not(.quizcard *){color:var(--h-tx) !important;border-color:rgba(var(--h-line-rgb),.35) !important;background:rgba(var(--h-line-rgb),.05) !important}
html.fxs-light .marquee-in{color:var(--h-mu)}
html.fxs-light .eyebrow.light:not(.quizcard *){color:var(--h-rust) !important}
html.fxs-light .lb-head h2,html.fxs-light .lb-head p{color:var(--h-tx) !important}