/* 3dhuisjes (Wouter 24 Oct): the shop's own brand, only on /shop (was mimi.maison). Cream, deep red, olive; a colour per product. */
:root{--red:#8b1a1f;--olive:#4a4320;--k-kerstbal:#8b1a1f;--k-vogelhuisje:#6e7a4c;--k-poppenhuis:#d4646a;--k-brievenbus:#a8641f;--k-pennenbak:#5b3d2b;--k-spaarpot:#c0566b;--bg:247,241,234;--night:#f7f1ea;--cream:#f7f1ea;--paper:#fbf7f2;--wall:#efe5d9;--brown:#5b3d2b;--brown2:#7a5640;--coral:#e98a7d;--coral2:#d9705f;--sage:#8c9a82;--brass:#b8925a;--gold:#b8925a;--gold2:#9c7746;--ink:#4a3426;--muted:#8a7565;--line:#e6d9ca;--green:#5b3d2b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.55 Jost,Manrope,system-ui,sans-serif;transition:background-color .7s ease}
a{color:inherit}
h1,h2{font-family:Jost,system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;margin:0;color:var(--brown)}
em{font-style:normal}
.eyebrow{margin:0 0 12px;font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--brown2)}
.eyebrow.dark{color:var(--brown2)}

/* ---- wordmark ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(rgba(var(--bg),.92),rgba(var(--bg),0));color:var(--brown);transition:background .3s}
.top.solid{background:rgba(var(--bg),.96);box-shadow:0 1px 0 var(--line)}
.brand{flex:none;display:flex;align-items:center;text-decoration:none}
.wm{display:block;background:no-repeat center/contain url("woordmerk.webp");width:150px;height:39px}
.deadline{font-size:12px;font-weight:500;text-decoration:none;border:1px solid var(--line);color:var(--brown);background:rgba(255,255,255,.6);padding:6px 12px;border-radius:99px;white-space:nowrap;backdrop-filter:blur(6px)}
.deadline[hidden]{display:none}
.lang{margin-left:auto;display:flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.65);border:1px solid var(--line);backdrop-filter:blur(6px)}
.lang button{border:0;background:none;font:500 11px Jost,sans-serif;letter-spacing:.12em;color:var(--brown2);padding:5px 8px;border-radius:99px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--brown);color:#fff}
@media (max-width:440px){.wm{width:118px;height:31px}.deadline{font-size:11px;padding:5px 9px}.top{gap:8px}}

/* ---- stage ---- */
.stage{position:relative;background:var(--night);color:var(--ink);transition:background-color .7s ease}
.view{position:relative;height:clamp(420px,64svh,740px);overflow:hidden}
.view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.view canvas:active{cursor:grabbing}
.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--bg),.75) 0,rgba(var(--bg),0) 30%,rgba(var(--bg),0) 82%,var(--night) 100%)}
.headline{position:absolute;top:calc(64px + env(safe-area-inset-top));left:16px;right:16px;pointer-events:none;text-align:center}
.headline h1{font-size:clamp(30px,8.2vw,62px);line-height:1.04;color:var(--brown)}
.headline h1 em{display:block;color:var(--coral2);font-weight:400}
.removed{position:absolute;left:16px;right:16px;top:42%;max-width:520px;margin:0 auto;padding:16px;border-radius:18px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 18px 40px rgba(91,61,43,.15)}
.removed p{margin:6px 0 0;font-size:14px}
.panel{position:relative;padding:4px 16px calc(22px + env(safe-area-inset-bottom));max-width:620px;margin:0 auto}

/* ---- the products as tiles, like the shelf in the brand picture ---- */
.prod{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 8px;padding:4px 16px 8px;scroll-snap-type:x mandatory}
.prod::-webkit-scrollbar{display:none}
.prod button{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--brown);font:400 10.5px Jost,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:8px 6px 10px;border-radius:18px;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,border-color .2s}
.prod button .ic{width:58px;height:58px}
.prod button:hover{transform:translateY(-2px)}
.prod button[aria-pressed=true]{border-color:var(--brown);box-shadow:0 10px 26px rgba(91,61,43,.14),inset 0 0 0 1px var(--brown)}
.prod button em{font-style:normal;font-size:9px;letter-spacing:.14em;margin-top:-2px;padding:1px 7px;border-radius:99px;background:var(--coral);color:#fff}
.prod-size{margin:2px 0 14px;font-size:14px;color:var(--muted);text-align:center}

/* ---- search, colours, photo ---- */
.find{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:4px 8px 4px 18px;box-shadow:0 14px 36px rgba(91,61,43,.12),0 0 0 1px var(--line)}
.find svg{width:22px;height:22px;flex:none;fill:var(--brown2)}
.find input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;color:var(--ink);padding:14px 4px}
.find input::placeholder{color:#a89585}
.sugg{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 18px 50px rgba(91,61,43,.18);max-height:46vh;overflow:auto}
.sugg.light{top:calc(100% + 6px);box-shadow:0 10px 30px rgba(91,61,43,.12);border:1px solid var(--line)}
.sugg li{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;cursor:pointer;font-size:15px}
.sugg li::before{content:"";width:18px;height:18px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e98a7d'%3E%3Cpath d='M12 3 2 11h3v9h5v-6h4v6h5v-9h3z'/%3E%3C/svg%3E")}
.sugg li:hover,.sugg li[aria-selected=true]{background:var(--cream)}
.sugg li.wait{color:var(--muted)}
.found{display:flex;align-items:center;gap:8px;margin:14px 6px 0;font-weight:500;font-size:15px;color:var(--brown);min-height:24px}
.found .dot{width:9px;height:9px;border-radius:50%;background:var(--coral);flex:none}
.found #addr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg{margin:8px 6px 0;font-size:14px;color:var(--coral2)}
.msg.dark{color:#a24a3a}
.paint{margin-top:14px}
.tabs{display:flex;gap:6px;padding:4px;background:var(--wall);border-radius:99px}
.tabs button{flex:1;border:0;background:none;color:var(--brown2);font:500 13px Jost,sans-serif;letter-spacing:.06em;padding:9px 6px;border-radius:99px;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--brown);box-shadow:0 3px 10px rgba(91,61,43,.12)}
.sw{display:flex;gap:12px;padding:14px 8px 10px;overflow-x:auto;scrollbar-width:none}
.sw::-webkit-scrollbar{display:none}
.sw button{flex:none;width:40px;height:40px;border-radius:50%;border:3px solid #fff;padding:0;cursor:pointer;box-shadow:0 3px 10px rgba(91,61,43,.2);transition:transform .15s}
.sw button[aria-pressed=true]{transform:scale(1.1);box-shadow:0 0 0 2px var(--brown),0 6px 14px rgba(91,61,43,.25)}
.photo{margin:4px 0 14px}
.photo .up{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px dashed #d8c6b3;border-radius:18px;cursor:pointer;color:var(--brown);background:rgba(255,255,255,.5)}
.photo .up:hover{border-color:var(--coral);background:#fff}
.photo .up input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo .up:has(input:disabled){opacity:.5;cursor:default}
.photo .up svg{flex:none;width:26px;height:26px;fill:var(--coral)}
.photo .up span{display:flex;flex-direction:column;gap:1px}
.photo .up b{font-weight:500;font-size:15px}
.photo .up small{font-size:13px;color:var(--muted)}
.thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.thumbs:empty{display:none}
.thumbs li{position:relative;width:64px;height:64px;border-radius:12px;overflow:visible}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 4px 12px rgba(91,61,43,.2);display:block}
.thumbs .pc{position:absolute;left:5px;bottom:5px;display:flex;gap:2px}
.thumbs .pc i{width:12px;height:12px;border-radius:50%;border:1.5px solid #fff}
.thumbs .x{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--brown);color:#fff;font:500 18px/26px Jost,sans-serif;padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(91,61,43,.35)}

/* ---- buttons ---- */
.cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:17px 24px;border-radius:99px;text-decoration:none;color:#fff;font-weight:500;font-size:17px;letter-spacing:.02em;background:var(--brown);box-shadow:0 12px 28px rgba(91,61,43,.28)}
.cta b{font-weight:500;font-size:20px}
.cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-60%}100%{left:130%}}
.cta.soon{background:#b9a596;box-shadow:none;cursor:default}
.cta.soon::after{display:none}
.share{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:12px 0 4px;padding:14px 16px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--brown);font:500 15px Jost,sans-serif;cursor:pointer}
.share:hover{border-color:var(--coral)}
.share svg{width:20px;height:20px;fill:var(--coral)}
.cap{margin:8px 0 0;text-align:center;font-size:11.5px;color:var(--muted)}

/* ---- promise ---- */
.promise{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;padding:34px 16px 38px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.promise b{display:block;font-weight:500;font-size:21px;color:var(--brown)}
.promise span{font-size:13px;color:var(--muted)}

/* ---- how it works ---- */
.how{background:var(--night);padding:64px 20px 56px;text-align:center;transition:background-color .7s ease}
.how h2{font-size:clamp(28px,7vw,44px);line-height:1.1;margin-bottom:30px}
.how h2 em{display:block;color:var(--coral2);font-weight:400}
.how ol{list-style:none;margin:0 auto;padding:0;max-width:880px;display:grid;gap:14px;grid-template-columns:1fr;text-align:left}
@media(min-width:760px){.how ol{grid-template-columns:repeat(3,1fr)}}
.how li{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:22px;background:var(--paper);border:1px solid var(--line)}
.how li b{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:500 17px Jost,sans-serif;color:#fff;background:var(--coral)}
.how li strong{display:block;font-weight:500;font-size:17px;color:var(--brown);margin-bottom:3px}
.how li span{font-size:14px;color:var(--muted);line-height:1.45}

/* ---- the family in the tree (Christmas evening, the one dark room) ---- */
.tree{position:relative;background:#14241b;color:#f5eee6}
.tree canvas{display:block;width:100%;aspect-ratio:4/5;max-height:88vh}
.tree::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--night) 0,rgba(20,36,27,0) 12%,rgba(20,36,27,0) 62%,rgba(20,36,27,.9) 100%)}
.tree-text{position:absolute;z-index:2;left:16px;right:16px;bottom:24px;pointer-events:none}
.tree-text .eyebrow{color:#f0c9b8}
.tree-text h2{font-size:clamp(30px,7.4vw,50px);line-height:1.05;color:#fff}
.tree-text h2 em{color:#f3a99c;font-weight:400}

/* ---- order ---- */
.order{padding:40px 16px 8px;display:grid;gap:24px;background:var(--cream);border-radius:30px 30px 0 0;margin-top:-30px;position:relative;z-index:3}
.family h2{font-size:clamp(28px,7vw,40px);line-height:1.08}
.gift{margin:8px 0 0;color:var(--muted)}
.cart{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.cart li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;cursor:pointer}
.cart li[aria-current=true]{border-color:var(--brown);box-shadow:0 0 0 1px var(--brown)}
.cart .dots{display:flex;flex:none}
.cart .dots i{width:16px;height:16px;border-radius:50%;border:2px solid #fff;margin-left:-5px;box-shadow:0 0 0 1px var(--line)}
.cart .dots i:first-child{margin-left:0}
.cart .nm{flex:1;min-width:0;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart .nm small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.cart .rm{flex:none;border:0;background:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;padding:6px}
.add{margin-top:14px}
.add label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--brown)}
.search{position:relative}
.search input{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:16px;border:1.5px dashed #d8c6b3;background:#fff}
.prices{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p{background:#fff;color:var(--brown);border:1px solid var(--line);border-radius:18px;padding:14px 4px;text-align:center;transition:transform .25s,background .25s}
.p span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.p b{display:block;font-weight:500;font-size:clamp(20px,5.6vw,27px);line-height:1.2}
.p i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.p em{display:inline-block;margin-top:6px;font-size:11px;font-weight:500;padding:2px 9px;border-radius:99px;background:#fbe3dd;color:var(--coral2)}
.p.on{background:var(--brown);color:#fff;border-color:var(--brown);transform:translateY(-4px);box-shadow:0 12px 26px rgba(91,61,43,.25)}
.p.on span,.p.on i{color:rgba(255,255,255,.75)}
.p.on em{background:var(--coral);color:#fff}
.more{margin:10px 0 0;font-size:13px;color:var(--muted)}
.checkout{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px;box-shadow:0 20px 50px rgba(91,61,43,.08)}
.sum{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sum span{font-weight:500;font-size:17px;color:var(--brown)}
.sum small{display:block;color:var(--muted);font-size:13px}
.sum .tot{text-align:right}
.sum .tot b{font-weight:500;font-size:34px;line-height:1;color:var(--brown)}
.sum .tot small{color:var(--coral2);font-weight:500}
.incl{margin:6px 0 0;font-size:13px;color:var(--muted)}
fieldset{border:0;padding:0;margin:18px 0 0;display:grid;gap:10px}
legend{font-weight:500;margin-bottom:6px;padding:0;color:var(--brown)}
fieldset label{display:grid;gap:4px;font-size:13px;font-weight:500;color:var(--brown2)}
fieldset input{font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);width:100%;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px}
.agree input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brown)}
#pay{margin-top:16px;width:100%;font:500 18px Jost,sans-serif;padding:17px;border:0;border-radius:99px;background:var(--brown);color:#fff;cursor:pointer;box-shadow:0 12px 26px rgba(91,61,43,.25)}
#pay:disabled{opacity:.6;cursor:default}
.paywith{margin:12px 0 0;text-align:center;font-size:12px;color:var(--muted);line-height:2}
.pm{display:inline-block;margin:0 3px;padding:2px 9px;border:1px solid var(--line);border-radius:8px;font-weight:500;color:var(--ink);background:var(--paper)}
.err{margin:10px 0 0;color:#a24a3a;font-size:14px}
.fine{background:var(--cream);margin:0;padding:20px 16px 48px;font-size:12px;color:var(--muted)}
.fine p{max-width:1100px;margin:0 auto 8px}
.fine .mark{font-family:Comfortaa,Jost,sans-serif;font-weight:700;color:var(--brown)}

/* ---- sticky bar ---- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(var(--bg),0),rgba(var(--bg),.95) 40%);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.bar.on{transform:none;pointer-events:auto}
.bar a{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto;padding:15px 22px;border-radius:99px;text-decoration:none;color:#fff;font-weight:500;background:var(--brown);box-shadow:0 12px 30px rgba(91,61,43,.3)}
.bar b{font-weight:500;font-size:19px}

@media (min-width:900px){
  .headline{top:110px}
  .promise{grid-template-columns:repeat(4,1fr);padding:42px max(24px,calc(50% - 560px))}
  .tree canvas{aspect-ratio:16/8}
  .tree-text{left:max(48px,calc(50% - 560px));bottom:56px;max-width:620px}
  .order{grid-template-columns:1.1fr 1fr;align-items:start;padding:60px max(24px,calc(50% - 560px)) 24px}
  .checkout{position:sticky;top:80px}
  .prod{grid-auto-columns:1fr;overflow:visible}
}
@media (prefers-reduced-motion:reduce){.cta::after{animation:none}}

/* ---- each product its own room, in the brand's light tones ---- */
body[data-product=pennenbak]{--bg:241,233,222;--night:#f1e9de}
body[data-product=vogelhuisje]{--bg:234,237,226;--night:#eaede2}
body[data-product=poppenhuis]{--bg:246,232,226;--night:#f6e8e2}
body[data-product=brievenbus]{--bg:231,234,230;--night:#e7eae6}

/* zoom: + and − bottom right of the stage, the reset once zoomed in */
.zoom{position:absolute;right:14px;bottom:18px;z-index:4;display:flex;flex-direction:column;gap:6px}
.zoom button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.82);color:var(--brown);font:400 22px/1 Jost,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(91,61,43,.14);backdrop-filter:blur(6px)}
.zoom button[data-z=reset]{display:none;font-size:18px}
.zoom.on button[data-z=reset]{display:block}

/* ==== 3dhuisjes (Wouter 24 Oct) ==== */
.ic{display:block;flex:none;border-radius:50%;background:no-repeat center/contain;filter:drop-shadow(0 4px 8px rgba(60,30,20,.18))}
[data-p=kerstbal] .ic{background-image:url("ic-kerstbal.webp")}
[data-p=vogelhuisje] .ic{background-image:url("ic-vogelhuisje.webp")}
[data-p=poppenhuis] .ic{background-image:url("ic-poppenhuis.webp")}
[data-p=brievenbus] .ic{background-image:url("ic-brievenbus.webp")}
[data-p=pennenbak] .ic{background:#fffaf4 no-repeat center/56% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3d2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14l-1.4 9H6.4z'/%3E%3Cpath d='M8 11 7 3M12 11V4M16 11l2-7'/%3E%3C/svg%3E");box-shadow:inset 0 0 0 1px #eadccd}

.shelf{padding:calc(64px + env(safe-area-inset-top)) 16px 26px;background:radial-gradient(120% 70% at 50% 0,#fffaf3,var(--cream) 70%)}
.shelf-head{text-align:center;margin:6px 0 20px}
.wm.big{width:min(560px,86vw);height:calc(min(560px,86vw) * .26);margin:0 auto}
.tag{margin:10px 0 0;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--olive)}
.tag::after{content:"";display:block;width:34px;height:1.5px;background:var(--red);margin:12px auto 0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:1200px;margin:0 auto}
@media(min-width:900px){.cards{grid-template-columns:repeat(4,1fr);gap:14px}}
.card{position:relative;overflow:hidden;aspect-ratio:4/5;border:0;padding:0;border-radius:18px;cursor:pointer;background:#e9dfd3 no-repeat center/cover;box-shadow:0 14px 34px rgba(60,30,20,.16);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;font:inherit;color:inherit;text-align:left}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(60,30,20,.22)}
.card[aria-pressed=true]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--kc,var(--red)),0 18px 40px rgba(60,30,20,.24)}
.card[data-p=kerstbal]{--kc:var(--k-kerstbal);background-image:url("bg-kerstbal.webp")}
.card[data-p=vogelhuisje]{--kc:var(--k-vogelhuisje);background-image:url("bg-vogelhuisje.webp")}
.card[data-p=poppenhuis]{--kc:var(--k-poppenhuis);background-image:url("bg-poppenhuis.webp")}
.card[data-p=brievenbus]{--kc:var(--k-brievenbus);background-image:url("bg-brievenbus.webp")}
.card[data-p=pennenbak]{--kc:var(--k-pennenbak);background-image:radial-gradient(90% 70% at 30% 20%,#fff6e8,#e8d6bf 60%,#cdb394)}
.card canvas{position:absolute;left:6%;top:6%;width:88%;height:auto;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 16px 18px rgba(40,20,10,.35));opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.card canvas.on{opacity:1;transform:none}
.card .pill{position:absolute;left:8px;right:8px;bottom:10px;display:flex;align-items:center;gap:0;border-radius:99px;background:var(--kc);color:#fff;box-shadow:0 8px 20px rgba(40,20,10,.25)}
.card .pill .ic{width:46px;height:46px;margin:-4px 2px -4px -4px;background-color:#fffaf4;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.card .pill>span{display:flex;flex-direction:column;min-width:0;padding:6px 12px 6px 6px;line-height:1.15}
.card .pill b{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pill small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.92;white-space:nowrap}
.card .idea{position:absolute;top:10px;right:10px;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--k-brievenbus)}
@media(min-width:600px){.card .pill b{font-size:12.5px}.card .pill small{font-size:12px}.card .pill .ic{width:54px;height:54px}}
.shelf-say{max-width:640px;margin:16px auto 0;text-align:center;font-size:14px;color:var(--muted)}
.shelf-say b{font-weight:500;color:var(--olive)}

/* the stage: the product floats in front of its own photo */
.view{background:#efe6da no-repeat center/cover}
body[data-product=kerstbal] .view{background-image:url("bg-kerstbal.webp")}
body[data-product=vogelhuisje] .view{background-image:url("bg-vogelhuisje.webp")}
body[data-product=poppenhuis] .view{background-image:url("bg-poppenhuis.webp")}
body[data-product=brievenbus] .view{background-image:url("bg-brievenbus.webp")}
body[data-product=pennenbak] .view{background-image:radial-gradient(90% 70% at 30% 20%,#fff6e8,#e8d6bf 60%,#cdb394)}
.veil{background:linear-gradient(180deg,rgba(var(--bg),.82) 0,rgba(var(--bg),0) 26%,rgba(var(--bg),0) 84%,var(--night) 100%)}
.headline h1{text-shadow:0 1px 18px rgba(255,248,238,.8)}
.headline h1 em{color:var(--kc,var(--red))}
body[data-product=kerstbal]{--kc:var(--k-kerstbal)}
body[data-product=vogelhuisje]{--kc:var(--k-vogelhuisje)}
body[data-product=poppenhuis]{--kc:var(--k-poppenhuis)}
body[data-product=brievenbus]{--kc:var(--k-brievenbus)}
body[data-product=pennenbak]{--kc:var(--k-pennenbak)}
.prod button[aria-pressed=true]{border-color:var(--kc);box-shadow:0 10px 26px rgba(60,30,20,.14),inset 0 0 0 1px var(--kc)}
.cta,#pay,.bar a{background:var(--kc,var(--red))}
.lang button[aria-pressed=true]{background:var(--red)}

/* technical specifications + the print farm */
.specs{display:grid;gap:22px;padding:46px 16px 50px;background:#fffaf4;border-bottom:1px solid var(--line)}
@media(min-width:900px){.specs{grid-template-columns:1fr 1fr;align-items:center;padding:64px max(24px,calc(50% - 560px))}}
.specs h2{font-size:clamp(26px,6.4vw,38px);line-height:1.1;margin-bottom:18px}
.specs h2 em{color:var(--kc,var(--red))}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th{text-align:left;font-weight:400;color:var(--muted);padding:10px 12px 10px 0;width:42%;vertical-align:top;border-bottom:1px solid var(--line)}
.spec td{padding:10px 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.spec td small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.spec-note{margin:12px 0 0;font-size:12px;color:var(--muted)}
.dl{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 18px;border-radius:18px;text-decoration:none;color:var(--kc,var(--red));background:#fff;border:1.5px solid var(--kc,var(--red));box-shadow:0 8px 22px rgba(60,30,20,.08)}
.dl svg{width:26px;height:26px;fill:currentColor;flex:none}
.dl span{display:flex;flex-direction:column}
.dl b{font-weight:500;font-size:15px}
.dl small{font-size:12.5px;color:var(--muted)}
.dl:hover{background:var(--kc,var(--red));color:#fff}.dl:hover small{color:rgba(255,255,255,.8)}
.farm{margin:0}
.farm-img{aspect-ratio:1920/1414;border-radius:20px;background:#ddd no-repeat center/cover url("printfarm.webp");box-shadow:0 18px 40px rgba(60,30,20,.15)}
.farm figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.farm figcaption b{font-weight:500;color:var(--ink)}
.fine .mark{font-family:Jost,sans-serif;font-weight:600;color:var(--red)}
.top .brand{opacity:0;transition:opacity .3s}.top.solid .brand{opacity:1}
.panel .dl{margin-top:10px}
@media(max-width:599px){.card .pill{left:6px;right:6px;bottom:8px}.card .pill .ic{width:38px;height:38px;margin:-3px 0 -3px -3px}.card .pill>span{padding:5px 8px 5px 6px}.card .pill b{font-size:10px;letter-spacing:.06em}.card .pill small{font-size:9.5px;letter-spacing:.04em}}
.bar[hidden]{display:none}
.headline h1{text-shadow:0 0 22px rgba(255,250,242,.95),0 0 4px rgba(255,250,242,.8)}

.card[hidden],.prod button[hidden]{display:none}
.top-find{max-width:520px;margin:20px auto 0;text-align:left}
#top-msg{max-width:520px;margin:10px auto 0}
body[data-product=spaarpot]{--bg:246,232,226;--night:#f6e8e2;--kc:var(--k-spaarpot)}
body[data-product=spaarpot] .view{background-image:url("bg-poppenhuis.webp")}
.card[data-p=spaarpot]{--kc:var(--k-spaarpot);background-image:url("bg-poppenhuis.webp")}
[data-p=spaarpot] .ic{background:#fffaf4 no-repeat center/58% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0566b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 7.5h4'/%3E%3Ccircle cx='12' cy='14.5' r='2.6'/%3E%3C/svg%3E");box-shadow:inset 0 0 0 1px #eadccd}
@media(min-width:900px){.cards{grid-template-columns:repeat(5,1fr)}}