/* The new frame (Wouter 26 Oct 14:26-14:31): compact header with the logos top left, a rail on the left that opens on hover,
   a cinematic hero with a real-looking fir branch, flickering lights and a bigger house you turn yourself, an honest counter,
   payment logos only where you order. Loaded after shop.css (and klm.css / aanhuis.css) on all three pages. */
:root{--lx-accent:#f4c27a;--lx-solid:#5c1a22;--lx-solid-h:#74222c;--lx-glass:rgba(16,11,8,.42);--lx-ease:cubic-bezier(.2,.7,.1,1)}
html.klm{--lx-accent:#8fd3f4;--lx-solid:#00A1DE;--lx-solid-h:#0089bd}
html.ah{--lx-accent:#e9d9a8;--lx-solid:#7D7455;--lx-solid-h:#665e44}
html{scroll-behavior:smooth;scroll-padding-top:76px}

/* ── header ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
header.top.top{position:fixed!important;top:0;left:0;right:0;z-index:70;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,3vw,36px)!important;
  background:rgba(250,246,240,.82)!important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(60,40,20,.08)!important;transition:background .5s var(--lx-ease),color .5s var(--lx-ease),box-shadow .5s}
html.in-hero .top{background:linear-gradient(180deg,rgba(10,7,5,.55),rgba(10,7,5,.12))!important;box-shadow:none!important;color:#fbf3e6}
.top .nav,.top .hdr-pay,.top .klm-link,.top .nb-cta,.top .back-shop,.top #deadline,.ah-bar{display:none!important}
.top .brand{display:flex;align-items:center;gap:10px;min-width:0}
.top .wm{width:104px!important;height:27px!important;background-size:contain;background-repeat:no-repeat;background-position:left center;display:block}
html.in-hero .top .wm{background-image:url("woordmerk-licht.svg")}
.top .right{display:flex;align-items:center;gap:10px}
header.top .lang{display:flex;gap:2px;padding:3px;border-radius:99px;background:rgba(0,0,0,.06)}
html.in-hero .top .lang{background:rgba(255,255,255,.1)}
.top .lang button{min-width:34px;height:28px;padding:0 9px;border-radius:99px;font:600 11.5px/1 Jost,system-ui,sans-serif;letter-spacing:.08em;border:0;background:none;color:inherit;opacity:.7;cursor:pointer}
.top .lang button[aria-pressed="true"]{background:var(--lx-solid);color:#fff;opacity:1}
.top .order-btn{background:var(--lx-solid)!important;color:#fff!important;font:500 14px/1 Jost,system-ui,sans-serif;padding:11px 18px;border-radius:99px;text-decoration:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);transition:transform .25s var(--lx-ease),background .25s}
.top .order-btn:hover{background:var(--lx-solid-h)!important;transform:translateY(-1px)}
/* partner logos: small and on one line */
html.klm .top .brand .klmlogo{height:30px!important;width:auto!important}
html.klm .top .brand .xx,html.ah .top .brand .xx{width:12px!important;height:12px!important;color:currentColor;opacity:.75}
html.klm .top .hd-home,html.ah .top .hd-home{display:flex;align-items:center}
html.klm .top .hd-home .wm,html.ah .top .hd-home .wm{width:96px!important;height:24px!important;position:static!important;top:auto!important}
html.ah .top .ah-home{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
html.ah .top .ah-home svg{height:30px;width:auto}
html.ah .top .ah-home .hd small{display:none}
html.ah .top .ah-home .hd b{font:600 15px/1 Outfit,Jost,sans-serif}
html.in-hero.klm .top .klmlogo path{fill:#fff}
/* the counter in the header */
.hr-count{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;border:1px solid currentColor;border-color:rgba(92,26,34,.22);color:inherit;text-decoration:none;font:400 13px/1 Jost,system-ui,sans-serif;white-space:nowrap}
html.in-hero .hr-count{border-color:rgba(255,255,255,.22)}
.hr-count b{font-weight:600;font-variant-numeric:tabular-nums}.hr-count em{font-style:normal;opacity:.5}
.hr-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:99px;border:1px solid rgba(0,0,0,.12);background:none;color:inherit;cursor:pointer}
html.in-hero .hr-burger{border-color:rgba(255,255,255,.25)}
.hr-burger svg{width:20px;height:20px}
@media (max-width:1280px){.hr-count{display:none}}
@media (max-width:1023px){.hr-burger{display:inline-flex}}
@media (max-width:560px){.top{height:56px}.top .order-btn{padding:10px 14px;font-size:13px}.top .wm{width:88px!important;height:23px!important}
  html.klm .top .brand .klmlogo{height:24px!important}html.klm .top .hd-home .wm,html.ah .top .hd-home .wm{width:78px!important;height:20px!important}
  html.ah .top .ah-home .hd{display:none}.top .lang button{min-width:30px;padding:0 7px}.top .right{gap:6px}}
@media (max-width:380px){.top .order-btn{display:none}}

/* ── the rail ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hr-rail{display:none}
@media (min-width:1024px){
  .hr-rail{display:block;position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:65;padding:10px 5px;border-radius:22px;background:var(--lx-glass);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 40px -22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);
    color:#fbf3e6;width:28px;overflow:hidden;transition:width .45s var(--lx-ease),background .45s,padding .45s}
  .hr-rail:hover,.hr-rail:focus-within{width:224px;background:rgba(16,11,8,.78);padding:10px 12px}
  .hr-rail ol{list-style:none;margin:0;padding:0;position:relative}
  .hr-rail ol:before{content:"";position:absolute;left:8.5px;top:14px;bottom:14px;width:1px;background:rgba(255,255,255,.16)}
  .hr-rail a{display:flex;align-items:center;gap:14px;height:32px;color:inherit;text-decoration:none;white-space:nowrap;font:400 14px/1 Jost,system-ui,sans-serif;border-radius:10px}
  .hr-rail a i{position:relative;flex:none;width:18px;height:18px;display:grid;place-items:center}
  .hr-rail a i:after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .35s var(--lx-ease)}
  .hr-rail a:hover i:after{background:#fff;width:8px;height:8px}
  .hr-rail a.on i:after{width:10px;height:10px;background:var(--lx-accent);box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 14px var(--lx-accent)}
  .hr-rail a span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--lx-ease)}
  .hr-rail:hover a span,.hr-rail:focus-within a span{opacity:1;transform:none}
  .hr-rail a.on span{color:var(--lx-accent)}
  .hr-rail .x{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);display:none}
  .hr-rail:hover .x,.hr-rail:focus-within .x{display:block}
  .hr-rail .x a{height:30px;padding-left:32px;font-size:13px;opacity:.85}
  .hr-rail .x a:hover{opacity:1;color:var(--lx-accent)}
}
@media (min-width:1024px) and (max-width:1199px){.hr-rail{left:6px}}

/* ── the menu sheet (phones and tablets) ──────────────────────────────────────────────────────────────────────────────── */
.hr-sheet{position:fixed;inset:0;z-index:90;background:rgba(10,7,5,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lx-fade .3s var(--lx-ease)}
.hr-sheet[hidden]{display:none}
.hr-sheet .in{position:absolute;left:0;top:0;bottom:0;width:min(86vw,380px);background:#14100c;color:#fbf3e6;padding:72px 28px 28px;overflow:auto;animation:lx-slide .45s var(--lx-ease);box-shadow:20px 0 60px -20px rgba(0,0,0,.6)}
.hr-sheet .x-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:none;color:inherit;display:grid;place-items:center}
.hr-sheet .x-close svg{width:20px;height:20px}
.hr-sheet ol{list-style:none;margin:0;padding:0}
.hr-sheet ol a{display:flex;align-items:baseline;gap:14px;padding:13px 0;color:inherit;text-decoration:none;font:400 26px/1.15 var(--serif,Fraunces),Georgia,serif;border-bottom:1px solid rgba(255,255,255,.08)}
.hr-sheet ol a small{font:500 11px/1 Jost,sans-serif;letter-spacing:.1em;color:var(--lx-accent)}
.hr-sheet .x{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.hr-sheet .x a{color:inherit;text-decoration:none;font:500 15px/1 Jost,sans-serif;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06)}
html.hr-sheet-on{overflow:hidden}
@keyframes lx-fade{from{opacity:0}}@keyframes lx-slide{from{transform:translateX(-100%)}}

/* ── the hero ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hero2{min-height:min(100svh,980px)!important}
.hero2-bg{animation:lx-push 2.6s var(--lx-ease) both,lx-drift 26s ease-in-out 2.6s infinite alternate}
@keyframes lx-push{from{transform:scale(1.16);filter:saturate(1.1) brightness(.25) blur(4px)}}
@keyframes lx-drift{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.2%,-.8%,0)}}
.hero2:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:lx-grain 1.2s steps(6) infinite}
@keyframes lx-grain{0%{background-position:0 0}20%{background-position:-40px 20px}40%{background-position:30px -50px}60%{background-position:-20px 60px}80%{background-position:50px 10px}100%{background-position:0 0}}
.hero2-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;max-width:1320px!important;padding-top:clamp(96px,11vw,128px)!important;z-index:2}
.hero2 .kicker{letter-spacing:.32em}
.hero2 .big-h{font-size:clamp(44px,6.4vw,92px)!important;line-height:.98!important;letter-spacing:-.02em}
.hero2-text>*{animation:lx-up 1.1s var(--lx-ease) both}
.hero2-text>*:nth-child(1){animation-delay:.35s}.hero2-text>*:nth-child(2){animation-delay:.5s}.hero2-text>*:nth-child(3){animation-delay:.7s}
.hero2-text>*:nth-child(4){animation-delay:.85s}.hero2-text>*:nth-child(n+5){animation-delay:1s}
@keyframes lx-up{from{opacity:0;transform:translateY(22px)}}
/* the house, bigger and hanging from the branch */
.hero2-ball{width:min(100%,720px)!important;animation:lx-in 1.8s var(--lx-ease) .4s both}
@keyframes lx-in{from{opacity:0;transform:translateY(-30px) scale(.96)}}
.hero2-ball .hero-branch,.hero2-ball .thread{display:none!important}
.hero2-ball .hr-fir{position:absolute;left:50%;top:-24%;width:200%;height:46%;transform:translateX(-50%);z-index:3;pointer-events:none;animation:lx-sway 9s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 24%);mask-image:linear-gradient(90deg,transparent 2%,#000 24%)}
/* KLM: the plane flies behind the branch on the right, never over the words */
.klm .hero-plane{top:78px!important;right:4%!important;width:min(20vw,260px)!important;z-index:1!important;animation:lx-fly 22s linear infinite!important}
@keyframes lx-fly{0%{transform:translate(22vw,2vh);opacity:0}8%{opacity:1}58%{opacity:1}72%{transform:translate(-26vw,-2vh);opacity:0}100%{transform:translate(-26vw,-2vh);opacity:0}}
@keyframes lx-sway{from{transform:translateX(-50%) rotate(-.35deg)}to{transform:translateX(-50%) translateY(3px) rotate(.35deg)}}
.hero2-ball .moment{animation:lx-swing 7s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes lx-swing{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
.hero2-ball:before{inset:14% 6% 0!important}
.hr-drag{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:99px;background:rgba(10,7,5,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fbf3e6;font:500 12.5px/1 Jost,system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;pointer-events:none;transition:opacity .6s,transform .6s var(--lx-ease);animation:lx-up 1s var(--lx-ease) 2.2s both}
.hr-drag svg{width:16px;height:16px;animation:lx-rot 3s var(--lx-ease) infinite}
@keyframes lx-rot{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}
.hero2-ball.touched .hr-drag{opacity:0;transform:translateX(-50%) translateY(8px)}
.hero2-ball .imp{z-index:4}
/* the countdown under the hero's ticks */
.hr-countdown{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#efe2cf}
.hr-countdown .cd{display:flex;gap:6px}
.hr-countdown .cd span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;height:58px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hr-countdown .cd b{font:500 22px/1 var(--serif,Fraunces),Georgia,serif;font-variant-numeric:tabular-nums;color:#fff8ee}
.hr-countdown .cd i{font:500 10px/1 Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal;opacity:.65;margin-top:5px}
.hr-countdown p{margin:0;font:400 14px/1.45 Jost,system-ui,sans-serif;max-width:260px}
.hr-countdown p em{font-style:normal;opacity:.7}
.hr-countdown p strong{display:block;font-weight:600;color:var(--lx-accent)}
.hr-countdown .closed{max-width:420px}
@media (max-width:900px){
  .hero2-in{grid-template-columns:1fr!important;padding-top:84px!important}
  .hero2-ball{width:100%!important;max-width:560px;margin:2vw auto 34px!important}
  .hero2 .kicker{letter-spacing:.2em}
  .hero2-ball .hr-fir{top:-16%;height:38%;width:190%}
  .hero2 .big-h{font-size:clamp(40px,11vw,60px)!important}
  .hr-countdown .cd span{min-width:48px;height:52px}.hr-countdown .cd b{font-size:19px}
}
/* the floating order bar never sits over the hero */
html.in-hero #bar{opacity:0;pointer-events:none;transform:translateY(20px)}
#bar{transition:opacity .4s,transform .5s var(--lx-ease)}

/* ── finish ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.hero2-bg,.hero2:after,.hero2-text>*,.hero2-ball,.hero2-ball .hr-fir,.hero2-ball .moment,.hr-drag,.hr-drag svg{animation:none!important}}

/* aanhuis: its hero is light, so the header stays light there too; both logos stay, small */
html.ah.in-hero .top{background:linear-gradient(180deg,rgba(251,247,240,.9),rgba(251,247,240,.55))!important;color:#312518}
html.ah.in-hero .top .wm{background-image:url("woordmerk.svg")}
html.ah.in-hero .hr-burger{border-color:rgba(0,0,0,.14)}
html.ah.in-hero .top .lang{background:rgba(0,0,0,.06)}
header.top .lang{display:flex!important}
html.ah .top .hd-home,html.klm .top .hd-home,html.ah .top .xx,html.klm .top .xx{display:flex!important}
.top .order-btn{white-space:nowrap}
@media (max-width:560px){html.ah .top .order-btn,html.klm .top .order-btn{display:none}}
header.top .wm{display:block!important}

/* ── 26 Oct 15:40 (Wouter: "de vaste navigatie links moet altijd in beeld en de zoekbalk voor een adres moet ook ergens altijd
   vast in beeld"): the rail is a fixed side column with its labels, the page sits next to it; the address search docks in
   the header once the hero's own search scrolls away, and on phones in a bar at the bottom with the menu. ───────────── */
@media (min-width:1024px){
  body{padding-left:208px}
  .hr-rail,.hr-rail:hover,.hr-rail:focus-within{left:0;top:64px;bottom:0;transform:none;width:208px;border-radius:0;padding:28px 14px 20px 18px;
    background:#120d0a;color:#fbf3e6;box-shadow:none;border-right:1px solid rgba(255,255,255,.06);overflow:auto}
  .hr-rail a span{opacity:1;transform:none}
  .hr-rail .x{display:block}
  .hr-rail a{height:36px}
  header.top.top{left:0;right:0}
}
.hr-qhold{position:relative}
.hr-qslot{display:none}
@media (min-width:1024px){
  html.q-dock .hr-qslot{display:block;position:fixed;top:9px;left:232px;width:min(460px,calc(100vw - 640px));z-index:71}
  .hr-qslot .top-find{max-width:none;padding:3px 3px 3px 14px;border-radius:12px;box-shadow:0 8px 24px -14px rgba(0,0,0,.5)}
  .hr-qslot .top-find input{padding:9px 6px;font-size:14px}
  .hr-qslot .top-find .see{padding:9px 14px;font-size:13px;border-radius:9px}
  .hr-qslot .top-find .see svg{display:none}
}
.hr-dock{display:none}
@media (max-width:1023px){
  html.q-dock .hr-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:72;gap:8px;align-items:center;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(18,13,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -10px 30px -16px rgba(0,0,0,.6);animation:lx-fade .3s var(--lx-ease)}
  .hr-dock .slot{flex:1;min-width:0}
  .hr-dock .top-find{max-width:none;padding:3px 3px 3px 10px;border-radius:12px;box-shadow:none}
  .hr-dock .top-find>svg{display:none}
  .hr-dock .top-find input{padding:10px 4px;font-size:16px}
  .hr-dock .top-find .see{padding:10px 12px;font-size:13px;border-radius:9px;white-space:nowrap}
  .hr-dock .top-find .see .lbl{display:none}
  .hr-dock .top-find .sugg{top:auto;bottom:calc(100% + 8px)}
  .hr-dock .menu{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:none;color:#fbf3e6;display:grid;place-items:center}
  .hr-dock .menu svg{width:20px;height:20px}
  html.q-dock body{padding-bottom:72px}
}
.hr-qslot .top-find,.hr-dock .top-find{margin:0!important}
@media (min-width:1024px){html.q-dock .hr-qslot{top:11px}.hr-rail .x a{white-space:normal;height:auto;min-height:30px;padding:6px 0 6px 32px;line-height:1.25}}
@media (max-width:1023px){.hr-dock .top-find .see{width:44px;height:40px;padding:0;display:grid;place-items:center}.hr-dock .top-find .see svg{display:block!important;width:18px;height:18px;fill:#fff}}
/* 26 Oct 15:51 (Wouter: "haal de links naar KLM huisje en Aanhuisje van de 3dhuisje algemene website af"): hidden on the main shop, kept in the page */
html:not(.klm):not(.ah) a[href$="/klm"],html:not(.klm):not(.ah) a[href$="/aanhuis"]{display:none!important}
@media (min-width:1024px){html.q-dock .hr-qslot{position:static;flex:0 1 460px;width:auto;min-width:0;margin:0 20px}}
/* 26 Oct 15:57 (Wouter: "misschien dat zwart aan de zijkant als achtergrond kan gezelliger?"): a warm, light side column */
@media (min-width:1024px){
  .hr-rail,.hr-rail:hover,.hr-rail:focus-within{--rl-bg:#f7efe3;--rl-ink:#3a2a22;--rl-dot:rgba(92,26,34,.28);--rl-on:var(--lx-solid);
    background:radial-gradient(120% 40% at 0% 0%,rgba(244,194,122,.35),transparent 70%),radial-gradient(90% 30% at 100% 100%,rgba(193,101,42,.12),transparent 70%),var(--rl-bg);
    color:var(--rl-ink);border-right:1px solid rgba(92,60,40,.12);box-shadow:inset -12px 0 24px -20px rgba(92,60,40,.25)}
  html.klm .hr-rail{--rl-bg:#eef6fb;--rl-ink:#0e2a4a;--rl-dot:rgba(0,161,222,.35)}
  html.ah .hr-rail{--rl-bg:#f6f1e6;--rl-ink:#3d3725;--rl-dot:rgba(125,116,85,.4)}
  .hr-rail ol:before{background:var(--rl-dot)}
  .hr-rail a i:after{background:var(--rl-dot)}
  .hr-rail a:hover i:after{background:var(--rl-on)}
  .hr-rail a.on i:after{background:var(--rl-on);box-shadow:0 0 0 4px rgba(255,255,255,.7),0 0 14px rgba(244,194,122,.9)}
  .hr-rail a.on span{color:var(--rl-on);font-weight:500}
  .hr-rail .x{border-top-color:rgba(92,60,40,.14)}
  .hr-rail .x a:hover{color:var(--rl-on)}
}
@media (min-width:1024px){html.in-hero:not(.ah) body{background-image:linear-gradient(var(--hr-cap,#1b120e),var(--hr-cap,#1b120e));background-size:208px 64px;background-repeat:no-repeat;background-attachment:fixed}html.klm{--hr-cap:#0a2240}}
/* the address suggestions open above the lines under the search (the reveal animation gave those their own layer) */
.hr-qhold{position:relative;z-index:30}
.top-find .sugg{z-index:40}