/* ==========================================================================
   Roovtop theme — components from brandbook v1.0 (chapter 08) and prototype v2.2
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--body);line-height:1.4;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:4px;z-index:100}
.skip:focus{left:8px}
h1,h2{font-family:var(--serif);font-weight:var(--serif-w);letter-spacing:var(--track-serif);line-height:1.1;margin:0}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3,h4{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.1;margin:0}
i,em{font-style:italic}
p{margin:0 0 1em}
.lbl,.eyebrow{font-family:var(--mono);font-size:var(--label);letter-spacing:0;line-height:1.4;text-transform:uppercase;color:inherit}
.lede{font-size:var(--lede);line-height:1.4;max-width:62ch}
.wrap{width:min(var(--wide),92%);margin:0 auto}
.sec-title{width:min(var(--wide),92%);margin:0 auto 26px;font-size:var(--h2)}

/* ---- buttons ---- */
/* buttons (AutoCamp): yellow / ink text / 1 px ink border; hover = yellow text + yellow border on the surface colour: ink fill on light surfaces, transparent on dark ones so the button sinks into the panel exactly */
:root{--btn-hover-bg:var(--ink)}
.book,.tents .panel,.inter .panel,.mobnav,.site-footer,.on-dark,.gal-end.on-dark{--btn-hover-bg:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:400 var(--btn)/1 var(--mono);text-transform:uppercase;padding:var(--btn-pad);border-radius:9999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s;min-height:var(--tap)}
.btn.primary{background:var(--accent-btn);color:var(--on-accent);border-color:var(--ink)}
.btn.primary:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.secondary:hover{background:var(--ink);color:var(--cream)}
.on-dark .btn.secondary,.ladder .btn.secondary{color:var(--cream);border-color:var(--cream)}

/* ---- announcement bar (AutoCamp, measured 1440): 50 px brown bar, sans 15 (13 mobile) sentence case, whole bar a link;
   one sentence drifts past in 30 s (10 s mobile), each copy takes a full viewport so only one is in view ---- */
.ticker{position:relative;z-index:30;display:block;background:var(--ink);color:var(--cream);height:var(--tick);overflow:hidden;font-family:var(--sans);font-size:15px;line-height:1;letter-spacing:0;text-decoration:none}
.ticker .track{display:flex;width:max-content;white-space:nowrap;animation:tick 30s linear infinite;will-change:transform}
.ticker .part{flex:0 0 auto;box-sizing:border-box;min-width:100vw;padding:0 20px;text-align:center;line-height:var(--tick)}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media(max-width:767px){.ticker{font-size:13px}.ticker .track{animation-duration:10s}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}.ticker .part:nth-child(2){display:none}}

/* ---- header: fixed, three floating blocks (AutoCamp pattern) ---- */
.hdr{position:fixed;left:0;right:0;top:var(--tick);z-index:40;padding:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none;will-change:transform}
.hdr>*{pointer-events:auto}
/* header blocks = AutoCamp, measured 2026-10-02 at 1440: nav pill, logo box 205 x 50 and book button 205 x 50, 20 px apart and
   from the edges, square corners; the button text is bold mono 15 (AutoCamp: Suisse Int'l Mono 700, ours Fragment Mono, bold synthesised) */
.hdr .blk{height:var(--hdr-block);display:flex;align-items:center;background:rgba(246,239,221,.96);backdrop-filter:blur(8px);border-radius:0;box-shadow:0 1px 0 rgba(29,26,21,.08),0 10px 30px -18px rgba(0,0,0,.5)}
.hdr .nav{padding:0 30px;gap:30px;font-size:15px;font-weight:var(--sans-w)}
.hdr .nav a{text-decoration:none;white-space:nowrap}
.hdr .nav a[aria-current],.hdr .nav a.is-active,.hdr .nav a:hover,.hdr .nav .item.open>a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* dropdown (AutoCamp, measured): opens on click (not hover), panel 10 px under the bar, text aligned with the parent (left -30 = panel padding), rows 35 px (15/15 + 10/10), shadow 0 4 25 / .1, 6 x 7 arrow 2 px after the label */
.hdr .nav .item{position:relative;height:100%;display:flex;align-items:center}
.hdr .nav .item>a svg{width:6px;height:7px;margin-left:2px;display:inline-block}
.hdr .nav .sub{display:none;position:absolute;top:100%;left:-30px;padding-top:10px;z-index:5}
.hdr .nav .item.open .sub{display:block}
.hdr .nav .sub .in{background:rgba(246,239,221,.98);backdrop-filter:blur(8px);border-radius:0;box-shadow:0 4px 25px rgba(0,0,0,.1);padding:10px 30px}
.hdr .nav .sub a{display:block;padding:10px 0;font-size:15px;line-height:15px}
.hdr .nav .muted{opacity:.6}
.hdr .actions{display:flex;gap:20px;align-items:flex-start;margin-left:auto}
.hdr .brand{justify-content:center;width:205px;padding:0 30px;box-sizing:border-box;text-decoration:none;transition:transform .3s ease;color:var(--ink)}
.hdr .brand svg{height:36px;width:auto;display:block}
body.hide-logo .hdr .brand{transform:translateY(calc(-1 * (var(--hdr-block) + 24px)))}
.hdr .cta{justify-content:center;width:205px;box-sizing:border-box;padding:0 30px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:0;text-transform:uppercase;transition:background .25s,color .25s}
.hdr .cta{border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.hdr .cta:hover{background:var(--accent-btn);color:var(--on-accent)}
body.scrolled .hdr .cta{background:var(--accent-btn);color:var(--on-accent);box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
.hdr .burger{-webkit-tap-highlight-color:transparent;display:none;width:50px;height:var(--hdr-block);border:0;background:rgba(246,239,221,.96);border-radius:0;cursor:pointer;box-shadow:0 1px 0 rgba(29,26,21,.08),0 10px 30px -18px rgba(0,0,0,.5)}
.hdr .burger i{display:block;width:20px;height:1px;background:var(--ink);margin:0 auto;box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink);transition:box-shadow .2s,transform .2s}
.hdr .burger i{position:relative}
body.menu-open .hdr .burger i{background:transparent;box-shadow:none}
body.menu-open .hdr .burger i::before,body.menu-open .hdr .burger i::after{content:"";position:absolute;left:0;top:0;width:20px;height:1px;background:var(--ink)}
body.menu-open .hdr .burger i::before{transform:rotate(45deg)}
body.menu-open .hdr .burger i::after{transform:rotate(-45deg)}
/* ---- phone menu = AutoCamp's mobile menu (measured at 390, 2026-10-03; Bjorn: the old card stuck to the header blocks).
   Full screen cream that fades in (opacity .3s), the header blocks float on it with the ticker moved away, content from
   80 px down with 20 px sides and scrolls when it is longer than the screen. On top the sub pages, sans 20/22 every 42 px;
   a question line (mono 13/21 label + small sans line); then a sand block 30 px lower (padding 17.5/20) with the main items
   in serif 35/38.5, letter-spacing -.05em, every 58.5 px. The sand block glides up 50 px while fading in, .3 s ease-out,
   starting .3 s after the tap, like AutoCamp's. ---- */
.mobnav{position:fixed;inset:0;z-index:35;box-sizing:border-box;background:var(--cream);color:var(--ink);padding:calc(var(--hdr-block) + 44px) 20px 30px;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .3s ease}
.mobnav.is-open{opacity:1}
.mobnav[hidden]{display:none}
body.menu-open{overflow:hidden}
body.menu-open .wa{display:none}
body.menu-open .hdr{transform:translateY(calc(-1 * var(--tick)))!important}
body.menu-anim .hdr{transition:transform .3s ease}
.mobnav a{color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.mobnav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.mobnav .muted{opacity:.6}
.mn-list a{display:block;font-family:var(--sans);font-weight:var(--sans-w);font-size:20px;line-height:24px;margin:0 0 18px}
.mn-ask{margin:3px 0 0}
.mn-ask p{margin:0}
.mn-ask .lbl{font-family:var(--mono);font-size:13px;line-height:21px;text-transform:uppercase;letter-spacing:0}
.mn-ask .small{font-family:var(--sans);font-size:14px;line-height:20px;margin:6px 0 0}
.mn-ask .small a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mn-main{background:var(--sand);margin:30px 0 0;padding:17.5px 20px;opacity:0;transform:translateY(50px);transition:opacity .3s cubic-bezier(0,0,.2,1),transform .3s cubic-bezier(0,0,.2,1)}
.mobnav.is-open .mn-main{opacity:1;transform:none;transition-delay:.3s}
.mn-main a{display:block;font-family:var(--serif);font-weight:var(--serif-w);font-size:35px;line-height:38.5px;letter-spacing:-.05em;padding:2px 0;margin:0 0 15.5px}
.mn-main>a:last-child,.mn-main>.mn-grp:last-child .mn-top{margin-bottom:0}
/* main items with children (Bjorn 2026-10-08, AutoCamp's About Us at 390): the item is a button with the small arrow; it opens
   in place to its sub pages in serif 20/22, every 32 px, 13 px under the item and 21 px above the next one */
.mn-top{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;font-family:var(--serif);font-weight:var(--serif-w);font-size:35px;line-height:38.5px;letter-spacing:-.05em;color:var(--ink);padding:2px 0;margin:0 0 15.5px;-webkit-tap-highlight-color:transparent}
.mn-top:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mn-top svg{width:9px;height:11px;flex:none;transition:transform .25s ease}
.mn-grp.is-open .mn-top{margin-bottom:13px}
.mn-grp.is-open .mn-top svg{transform:rotate(180deg)}
.mn-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.mn-grp.is-open .mn-sub{grid-template-rows:1fr}
.mn-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .3s}
.mn-grp.is-open .mn-in{visibility:visible;transition:none}
.mn-main .mn-in a{font-size:20px;line-height:24px;letter-spacing:-.03em;padding:0;margin:0 0 8px}
.mn-main .mn-in a:last-child{margin-bottom:21px}
.mn-main .mn-in a.sep{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mn-grp:last-child.is-open .mn-in a:last-child{margin-bottom:4px}
/* desktop dropdown: an item with class "extra" in its own box under the list (AutoCamp's "Visit Field Station") */
.hdr .nav .sub .in.extra{margin-top:14px;padding:18px 30px 16px}
.hdr .nav .sub .in.extra .lbl{white-space:nowrap;margin:0 0 6px;font-family:var(--mono);font-size:13px;line-height:17px;text-transform:uppercase;letter-spacing:0;color:var(--ink)}
.hdr .nav .sub .in.extra a{padding:6px 0 4px}
.hdr .nav .sub .in.extra.plain{padding:10px 30px}
.hdr .nav .sub .in.extra.plain a{padding:10px 0}
@media(prefers-reduced-motion:reduce){.mobnav,.mn-main,body.menu-anim .hdr,.mn-sub,.mn-top svg{transition:none}}
@media(max-width:1100px){
  /* compact header = AutoCamp below 1280 (measured at 390/768/1024/1180): logo 133 x 36, book 97 x 36, menu 50 x 36, 20 from the edges, 10 apart */
  .hdr{padding:20px;gap:10px;align-items:center}
  .hdr .nav{display:none}
  .hdr .actions{width:100%;gap:10px;align-items:center}
  .hdr .brand{width:auto;padding:0 15px;transition:none;order:1}
  .hdr .cta{order:2}
  .hdr .burger{order:3;margin-left:auto}
  body.hide-logo .hdr .brand{transform:none}
  .hdr .brand{min-width:133px;justify-content:center}
  .hdr .brand svg{height:26px}
  .hdr .burger{display:block}
  .hdr .cta{width:auto;padding:0 15px;font-size:13px;white-space:nowrap}
  /* with something in the cart (Bjorn 2026-10-10: "Boek nu niet meer nice", it broke over two lines): logo, Boek nu, then on
     the right a square cart block with the count in a small badge and the menu; the cart was a wide pill on the left */
  .hdr .cta{margin-right:auto}
  .hdr .burger{margin-left:0;flex:none}
  .hdr .cart-pill{order:3;position:relative;flex:none;width:var(--hdr-block);padding:0;justify-content:center}
  .hdr .cart-pill svg{flex:none;width:18px;height:18px}
  .hdr .cart-pill [data-cartcount]{position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--ink);color:var(--cream);font-size:10px;line-height:15px;text-align:center}
  .hdr .burger{order:4}
}
@media(max-width:374px){.hdr .actions{gap:6px}.hdr .cta{padding:0 12px}}   /* 360: logo, Boek nu, cart and menu still on one line */
/* pages other than the homepage need room under the fixed header */
body:not(.rt-home) main{padding-top:calc(var(--hdr-block) + 40px)}

/* ---- hero ---- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:var(--cream);isolation:isolate}
.hero .bg{position:absolute;inset:0;background:var(--ink) center 55%/cover no-repeat;z-index:-2}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(29,26,21,.86) 0%,rgba(29,26,21,.38) 40%,rgba(29,26,21,.08) 70%,rgba(29,26,21,.25) 100%)}
.hero .in{width:min(1200px,100%);margin:0 auto;padding:0 6vw 19vh}
.hero h1{font-size:var(--h1);line-height:1.1;margin:0 0 .3em;max-width:13ch;text-wrap:balance}
@media(max-width:900px){.hero{min-height:88vh}.hero .in{padding-bottom:12vh}}

/* ---- booking bar ---- */
.book{position:relative;z-index:5;width:min(var(--wide),92%);margin:-13vh auto 0;background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:22px 26px;display:grid;grid-template-columns:1.1fr 1.1fr .9fr auto;gap:18px;align-items:end;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.book.book-inline{margin:0 auto;box-shadow:none}
.book label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--sand)}
.book .val{font-family:var(--sans);font-size:18px;font-weight:var(--sans-w);color:#fff;border:0;border-bottom:1px solid rgba(246,239,221,.3);background:transparent;padding:6px 0;text-transform:none;letter-spacing:0;width:100%;color-scheme:dark;border-radius:0}
.book .field{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.book .field .lbl{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--sand)}
.book .pick{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;color:#fff}
.book .pick svg{flex:0 0 auto;color:var(--cream);opacity:.85}
.book .pick[aria-expanded=true]{border-bottom-color:var(--accent)}
.book .pick:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* AutoCamp calendar (measured 2026-09-21): dark panel under the field, month + year on the left, chevrons right,
   two-letter weekdays, 7 x 44 px cells; other-month days dimmed, the chosen day in yellow */
.book .cal,.book .menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;background:var(--ink-2);color:var(--cream);border-radius:var(--radius);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);padding:18px 18px 14px}
.book .cal[hidden],.book .menu[hidden]{display:none}
.book .cal{width:332px;max-width:calc(100vw - 40px)}
.book .cal .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-family:var(--sans);font-size:20px;color:#fff}
.book .cal .head b{font-weight:400;text-transform:capitalize}
.book .cal .nav{display:flex;gap:6px}
.book .cal .nav button{width:34px;height:34px;border-radius:9999px;border:1px solid transparent;background:transparent;color:var(--cream);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.book .cal .nav button:hover{border-color:var(--accent);color:var(--accent)}
.book .cal .nav button:disabled{opacity:.3;cursor:default;border-color:transparent;color:var(--cream)}
.book .cal .grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.book .cal .wd{font-family:var(--mono);font-size:11px;letter-spacing:0;text-transform:uppercase;color:var(--sand);padding:8px 0 10px}
.book .cal .d{height:40px;border:0;background:transparent;color:#fff;font-family:var(--sans);font-size:15px;cursor:pointer;border-radius:9999px;transition:background .12s,color .12s}
.book .cal .d.out{color:rgba(246,239,221,.35)}
.book .cal .d:disabled{color:rgba(246,239,221,.25);cursor:default}
.book .cal .d:not(:disabled):hover{background:rgba(246,239,221,.12)}
.book .cal .d.in{background:rgba(255,255,0,.14)}
.book .cal .d.on{background:var(--accent);color:var(--ink)}
.book .menu{list-style:none;margin:0;min-width:100%;padding:8px 0}
.book .menu li{padding:10px 20px;font-family:var(--sans);font-size:18px;color:#fff;cursor:pointer;white-space:nowrap}
.book .menu li:hover,.book .menu li[aria-selected=true]{color:var(--accent)}
.book .menu li:hover{background:rgba(246,239,221,.08)}
.book select.val{appearance:none;cursor:pointer}
.book .go{background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);font:400 var(--btn)/1 var(--mono);text-transform:uppercase;padding:var(--btn-pad);border-radius:9999px;cursor:pointer;white-space:nowrap;min-height:var(--tap);transition:background .15s,color .15s,border-color .15s}
.book .go:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.book a.go{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}   /* the soon panel's app link looks like the Check beschikbaarheid button, no underline (Bjorn 2026-11-10) */
.book .note{grid-column:1/-1;font-size:13px;color:var(--sand);margin:2px 0 0}
.book .note b{color:#fff;font-weight:600}
@media(max-width:900px){.book .cal{left:50%;transform:translateX(-50%)}.book .field[data-field=tot] .cal{left:auto;right:50%;transform:translateX(50%)}.book{grid-template-columns:1fr 1fr;margin-top:-6vh;gap:14px 16px;padding:18px 18px 16px}.book .go{grid-column:1/-1;width:100%;padding:12px 14px;font-size:13px;text-align:center}.book .val{font-size:17px}}
/* booking bar = AutoCamp's (measured 2026-10-02 at 1440 and 390): panel 885 wide, 40 px padding, square, #2C261B (our
   --ink-2), 20 px gaps; labels in plain text 15/15 white, values 25/27.5 with a 1 px white line, the button a slim
   yellow pill (5 px 15 px, mono 15). Phone: 30 px from the edges, still 40 px padding, everything stacked, labels 14,
   values 20/22. The dark panels that share .book (tent page, buy, checkout) follow the same padding and corners. */
.book{width:min(885px,calc(100% - 40px));padding:40px;border-radius:0;background:var(--ink-2);gap:20px}
.book .field{gap:12px}
.book .field .lbl{font-family:var(--sans);font-size:15px;line-height:15px;text-transform:none;color:#fff}
.book .val{font-size:25px;line-height:27.5px;padding:0 0 2px;border-bottom-color:#fff}
.book .go{padding:5px 15px;min-height:0;line-height:15px;align-self:center}
.book .note{margin:0}
@media(max-width:900px){
  .book{width:calc(100% - 60px);grid-template-columns:1fr;gap:20px;padding:40px}
  .book .field .lbl{font-size:14px;line-height:14px}
  .book .val{font-size:20px;line-height:22px;padding-bottom:4px}
  .book .go{width:100%;padding:12px 15px;font-size:15px}
  .book .field[data-field=tot] .cal{left:50%;right:auto;transform:translateX(-50%)}
}

/* ---- how it works / promises ---- */
.how{margin-top:72px}
.promise{width:min(var(--wide),92%);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 32px}
.promise div{border-top:1px solid var(--line);padding-top:14px}
.promise b{display:block;font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);line-height:1.1;margin-bottom:10px;letter-spacing:0}
.promise small{display:block;font-size:var(--body);line-height:1.4;color:var(--ink);text-wrap:balance}
.promise small a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- tents: AutoCamp-style carousel (full-bleed image + dark panel, controls row with counter) ---- */
.tents{margin-top:90px}
/* AutoCamp home "media carousel, large" (measured 1440): 770 high, photo 9/12 + dark panel 3/12 (8/12 + 4/12 from 1024 to 1279),
   panel padding 20/50, serif 45/49.5, text 15/21, 20 px between the lines; expand pill 48 x 20 at 20/20 in the photo;
   controls 20 px under the block: previous arrow left, counter (mono 15) and next arrow right with 30 px between them. */
.tents .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tents .rail::-webkit-scrollbar{display:none}
.tents .slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:9fr 3fr;height:770px}
.tents .media{position:relative;display:block;overflow:hidden;background:var(--ink-2)}
.tents .media a{display:block;position:absolute;inset:0}
.tents .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tents .media.fit{background:var(--sand)}
.tents .media.fit img{object-fit:contain;padding:6%}
/* studio photo on a cream canvas (1.4, the slide ratio at 1440): always whole, anchored bottom-right where the car leaves the frame; the cream canvas continues into the cream tile */
.tents .media.studio{background:var(--cream)}
.tents .media.studio img{object-fit:contain;object-position:right bottom}
@media(max-width:1023px){.tents .media.studio img{object-fit:cover}}   /* full width x 380 is about as wide as high: cover from the right keeps the whole tent and shows it larger */
.tents .expand{position:absolute;top:20px;left:20px;z-index:2;width:48px;height:20px;padding:0;border:0;background:transparent;color:var(--ink);cursor:zoom-in}
.tents .expand svg{display:block;width:48px;height:20px;fill:var(--cream);stroke:var(--ink)}
.tents .expand:hover svg{fill:var(--accent-btn)}
.tents .panel{background:var(--ink-2);color:var(--cream);display:flex;align-items:center;padding:20px 50px;min-width:0}
.tents .txt{width:100%}
.tents .txt h3{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h2);line-height:1.1;letter-spacing:var(--track-serif);margin:0 0 20px;color:#fff;overflow-wrap:anywhere}
.tents .txt p{font-size:var(--body);line-height:1.4;margin:0 0 20px;color:var(--cream)}
.tents .from{display:block;font-family:var(--mono);font-size:var(--label);letter-spacing:0;line-height:1.4;text-transform:uppercase;color:var(--stone-light);margin:0 0 20px}
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);font-family:var(--mono);font-size:var(--btn);font-weight:400;letter-spacing:0;line-height:1;text-transform:uppercase;padding:var(--btn-pad);border-radius:9999px;text-decoration:none;min-height:var(--tap);transition:background .15s,color .15s,border-color .15s}
.pill:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.pill,.btn,.book .go{white-space:nowrap}
.tents .controls{display:flex;align-items:center;margin-top:20px;padding:0 20px;font-family:var(--mono);font-size:15px;line-height:21px}
.tents .controls .count{margin-left:auto;margin-right:30px}
/* one short line per tent, centred in the row; the current one is ink. Nothing in this row moves with the clock. */
.tents .controls{position:relative}
.tents .controls .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex}
/* each line is a button to its tent: the line is 24 x 1, the button around it 30 x 32 so a thumb can hit it */
.tents .controls .dots button,.tents .controls .dots button:hover{width:30px;height:32px;border:0;border-radius:0;background:transparent;color:var(--ink);position:relative}
.tents .controls .dots button::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:currentColor;opacity:.2;transition:opacity .3s}
.tents .controls .dots button:hover::before{opacity:.55}
.tents .controls .dots button.is-on::before{opacity:1}
/* with autoplay (section gets .auto from theme.js) the current line fills from left to right in the time its tent is on
   screen: the pale line stays, an ink line of the same 1 px grows over it and fades out when the next tent takes over */
.tents .controls .dots button i{display:none}
.tents.auto .controls .dots button i{display:block;position:absolute;left:3px;right:3px;top:50%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .4s}
.tents.auto .controls .dots button.is-on i{opacity:1}
.tents.auto .controls .dots button.is-on::before{opacity:.2}
.tents .controls .count b,.reviews .controls .count b,.wf .controls .count b{font-weight:400}
@media(max-width:1279px){.tents .slide{grid-template-columns:8fr 4fr}}
@media(max-width:1023px){
  .tents{margin-top:64px}
  .tents .slide{grid-template-columns:1fr;grid-template-rows:380px 1fr;height:auto}   /* every slide is as high as the longest text: the panel takes the rest, so no cream strip under the photo */
  .tents .media{height:380px}
  .tents .expand{display:none}
  .tents .panel{padding:32px;align-items:flex-start}
  .tents .controls{margin-top:20px;padding:0 20px}
  .tents .controls .next{order:1;margin-left:10px}   /* both arrows left: the WhatsApp bubble sits bottom right */
  .tents .controls .count{order:2;margin-right:0}
  .tents .controls .dots{display:none}   /* phone: arrows and "1 / 3" only (Bjorn 2026-09-28: the lines only made it busier) */
}

/* ---- routes: three columns, sans title above a portrait photo (AutoCamp image listings, measured) ---- */
/* width = AutoCamp container (measured 2026-10-01): 50 px inset, max 1180 (1280 container) and 1436 from 1536 px (1536 container);
   cards 340 x 510 at 1440, 425 x 638 at 2000, 255 x 382 at 1024; 130 px above and below, 50 on the phone */
.routes{width:calc(100% - 100px);max-width:1180px;margin:130px auto 0}
.routes + section{margin-top:130px}
@media(min-width:1536px){.routes{max-width:1436px}}
.routes .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 80px}
.routes .col{display:flex;flex-direction:column}
.routes .col h3{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.4;letter-spacing:0;margin:0 0 20px}
.routes .img{display:block;overflow:hidden;background:var(--sand)}
.routes .img img{aspect-ratio:2/3;object-fit:cover;width:100%;transition:transform .6s}
.routes .img:hover img{transform:scale(1.03)}
.routes .col p{font-size:var(--body);line-height:1.4;color:var(--ink);margin:20px 0 20px}
.text-link{font-family:var(--mono);font-size:var(--label);font-weight:400;letter-spacing:0;line-height:1.4;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;margin-top:auto;align-self:flex-start;color:var(--ink)}
.text-link:hover{color:var(--accent-ink)}
@media(max-width:900px){
  .routes{width:100%;max-width:none;margin-top:50px}
  .routes + section{margin-top:50px}
  .routes .cols{display:flex;overflow-x:auto;gap:20px;padding:0 40px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .routes .cols::-webkit-scrollbar{display:none}
  .routes .col{flex:0 0 80vw}
  .routes .col h3{margin-bottom:20px}
}
/* title, photo, text and link of the three cards on shared rows, so the photos always start at the same height,
   also when one title runs over two lines (subgrid; without it the cards stay plain columns) */
@supports (grid-template-rows:subgrid){
  .routes .col{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .routes .col .text-link{align-self:start;justify-self:start}
  @media(max-width:900px){.routes .cols{display:grid;grid-auto-flow:column;grid-auto-columns:80vw;grid-template-columns:none}}
}

/* ---- interstitial: AutoCamp "in the headlines" (measured: block 944 of 1180, image 3/8, dark panel 5/8, 376 high) ---- */
.inter{--acg:1180px;width:calc(var(--acg) * .8);max-width:calc(100% - 40px);margin:130px auto 0}   /* AutoCamp: 8 of 10 columns of (container - 100) */
@media(min-width:1536px){.inter{--acg:1436px}}
@media(max-width:1279px){.inter{--acg:924px}}
.inter .panel{display:grid;grid-template-columns:3fr 5fr;min-height:376px;background:var(--ink-2);color:var(--cream)}
.inter img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:700/570}
.inter .txt{padding:50px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.inter h2{font-size:var(--h2);line-height:1.1;margin:0 0 20px;max-width:14ch;color:#fff}
.inter p{font-size:var(--body);line-height:1.4;max-width:44ch;color:var(--cream);margin:0 0 24px}
@media(max-width:900px){.inter{width:calc(100% - 80px);margin-top:80px}.inter .panel{grid-template-columns:1fr;min-height:0}.inter img{height:240px;aspect-ratio:auto}.inter .txt{padding:20px 20px 28px}}

/* ---- reviews: AutoCamp text carousel (measured 1440): slide 66% wide, gap 20, neighbours peek, endless loop, arrow pills at the edges ---- */
.reviews{margin:100px auto 0;width:100%;container-type:inline-size;--rw:66.2cqw;--rgap:20px}
.reviews .rail{display:flex;gap:var(--rgap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc((100cqw - var(--rw)) / 2);scroll-padding:0 calc((100cqw - var(--rw)) / 2)}
.reviews .rail::-webkit-scrollbar{display:none}
.reviews .slide{flex:0 0 var(--rw);aspect-ratio:943/354;scroll-snap-align:center;margin:0;padding:25px 50px;text-align:center;background:var(--sand);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
.reviews .title{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:var(--track-serif);margin:0 0 20px}
.reviews .quote{font-size:25px;line-height:1.1;margin:0 0 20px}
.reviews .who{font-family:var(--mono);font-size:15px;letter-spacing:0;line-height:1.4;text-transform:uppercase;color:var(--ink);margin:0}
.reviews .controls{display:flex;justify-content:space-between;padding:20px 20px 0}
/* arrow pills (AutoCamp: 48 x 20, 1 px border, 17 x 11 arrow) for every carousel */
.tents .controls button,.reviews .controls button,.wf .controls button,.tent-gal .controls button{width:48px;height:20px;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:9999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tents .controls button svg,.reviews .controls button svg,.wf .controls button svg,.tent-gal .controls button svg{display:block}
.tents .controls button:hover,.reviews .controls button:hover,.wf .controls button:hover,.tent-gal .controls button:hover{background:var(--accent-btn);color:var(--on-accent);border-color:var(--ink)}
.tents .controls button:disabled,.wf .controls button:disabled,.tent-gal .controls button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink);border-color:var(--ink)}
@media(max-width:900px){.reviews{margin-top:64px;--rw:78.4cqw;--rgap:8cqw}.reviews .slide{padding:25px;aspect-ratio:294/388}.reviews .title{font-size:35px}.reviews .quote{font-size:20px}.reviews .who{font-size:13px}.reviews .controls{padding:20px calc((100cqw - var(--rw)) / 2) 0}}   /* AutoCamp on a phone (Bjorn 2026-11-03): 294 x 388 at 375, 30 px apart */

/* ---- faq page ---- */
.faq-page{width:min(var(--wide),92%);margin:0 auto}
.faq-page .intro{font-size:var(--lede);max-width:56ch;color:var(--stone);margin:0 0 40px}
.faq-page .group{display:grid;grid-template-columns:1fr 2fr;gap:24px 60px;padding:34px 0;border-top:1px solid var(--line)}
.faq-page .group h2{font-size:var(--h2);font-weight:var(--serif-w);margin:0}
/* questions as sand blocks (AutoCamp /faq, measured 1440: block on the darker cream, 28 px padding, question sans, a 54 x 24 outlined pill with + / − at the right) */
.faq-page .items{display:grid;gap:12px}
.faq-page details{background:var(--sand);border-radius:var(--radius);padding:0}
.faq-page summary{font-family:var(--sans);font-size:var(--h3);line-height:1.15;font-weight:var(--sans-w);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;min-height:74px}
.faq-page summary::-webkit-details-marker{display:none}
.faq-page summary::after{content:'+';flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:54px;height:24px;border:1px solid var(--ink);border-radius:9999px;font-family:var(--sans);font-size:18px;line-height:1;color:var(--ink);transition:background .15s,color .15s}
.faq-page summary:hover::after{background:var(--ink);color:var(--cream)}
.faq-page details[open] summary::after{content:'−'}
.faq-page details p{margin:0;padding:0 28px 26px;color:var(--ink);font-size:var(--lede);line-height:1.4;max-width:64ch}
.faq-page .faq-help{margin-top:70px}
.faq-page .book{margin:60px auto 0}
@media(max-width:800px){.faq-page .group{grid-template-columns:1fr;gap:16px}.faq-page summary{padding:18px 20px;min-height:0;font-size:18px}.faq-page summary::after{width:44px;height:22px}.faq-page details p{padding:0 20px 20px}}

/* ---- contact page ---- */
.contact{width:min(var(--wide),92%);margin:0 auto}
.contact .gal-head .lede{margin:22px 0 0;color:var(--stone)}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:40px 80px;margin-top:50px;align-items:start}
.contact-ways{display:grid;gap:28px;position:sticky;top:calc(var(--tick) + var(--hdr-block) + 60px)}
.contact-ways .lbl{color:var(--stone);margin:0 0 6px}
.contact-ways p{margin:0;font-size:var(--lede);line-height:1.4}
.contact-ways a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.contact-ways small{display:block;color:var(--stone);margin-top:6px;font-size:var(--body);line-height:1.4;max-width:34ch}
.cform{position:relative;background:var(--sand);border-radius:var(--radius-lg);padding:34px 36px 32px}
.cform h2{font-size:var(--h3);font-family:var(--sans);font-weight:var(--sans-w);margin:0 0 22px}
.cform form{display:grid;gap:18px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform label{display:grid;gap:7px;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--stone)}
.cform input,.cform select,.cform textarea{width:100%;border:1px solid transparent;border-radius:var(--radius);background:var(--cream);color:var(--ink);padding:12px 14px;font-size:var(--body);font-family:var(--sans);line-height:1.3;transition:border-color .15s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--ink)}
.cform input::placeholder{color:var(--stone-light)}
.cform .sel{position:relative;display:block}
.cform select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.cform .sel::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cform textarea{min-height:150px;resize:vertical}
.cform .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;margin:0}
.cform .foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.cform .note{font-size:13px;line-height:1.4;color:var(--stone);margin:0;max-width:36ch}
.cform .note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cform .msg{margin:0;padding:12px 14px;border-radius:var(--radius);background:var(--cream);color:var(--ink);font-size:var(--body);border-left:3px solid var(--ink)}
.cform .btn[disabled]{opacity:.6;cursor:wait}
.cform .done h3{margin:0 0 10px;font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h2);letter-spacing:var(--track-serif)}
.cform .done p{margin:0;font-size:var(--lede);line-height:1.4;max-width:44ch}
.contact-faq{margin:90px auto 0;max-width:600px;text-align:center;display:flex;flex-direction:column;align-items:center}
.contact-faq h2{margin:0 0 12px}
.contact-faq p{font-size:var(--lede);line-height:1.4;margin:0 0 18px;color:var(--stone)}
.contact-faq .text-link{margin:0;align-self:auto}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}.contact-ways{position:static;gap:22px}.cform{padding:24px 20px}.cform .row{grid-template-columns:1fr}.contact-faq{margin-top:60px}}

/* ---- faq ---- */
.faq{width:min(var(--wide),92%);margin:80px auto 0}
.faq .sec-title{width:auto;margin:0 0 18px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--sans);font-size:var(--h3);line-height:1.1;font-weight:var(--sans-w);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--stone)}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:12px 0 0;color:var(--ink);font-size:var(--lede);line-height:1.4;max-width:70ch}

/* ---- closing ---- */
.closing{margin:90px 0 0;padding:70px 0;background:var(--sand)}
.closing .sec-title{margin-bottom:22px}

/* ---- footer ---- */
/* ---- footer in blocks (Bjorn 2026-11-03), AutoCamp measured at 1440: a band with 20 px padding; boxes 917 | 214 | 214
   wide, 20 px apart, 20 px inside; the big box and the link box two rows high (394 px), the two small boxes stacked in the
   last column; links 14-15 px with a 1 px underline, socials top left, the last box centred. The big box like AutoCamp's
   newsletter box: a plain sentence on top, the big serif fields at the bottom. Home: a photo fills the band, 794 px high at
   1440, and shows above the boxes. Phone: big, links, then the two small boxes side by side; no photo. ---- */
.site-footer{position:relative;isolation:isolate;margin-top:110px;padding:20px;background:var(--sand);color:var(--ink);font-size:15px;line-height:1.4}
.site-footer .fphoto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.site-footer .fphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-footer.has-photo{padding-top:max(300px,calc(16.67vw + 142px))}   /* AutoCamp: 380 px of photo above the boxes at 1440, 460 at 1920 (footer 794 / 874 high) */
.site-footer .fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,15.5%) minmax(200px,15.5%);grid-template-rows:auto auto;gap:20px;min-height:394px}
.site-footer .fbox{background:var(--cream);padding:20px;min-width:0}
.site-footer .fbig{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.site-footer .flinks{grid-row:span 2;display:flex;flex-direction:column;gap:20px}
.site-footer .flogo img{display:block;width:220px;height:auto}
.site-footer .fend{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.site-footer .fline{margin:0;font-family:var(--serif);font-weight:var(--serif-w);font-size:clamp(40px,4.2vw,68px);line-height:1;letter-spacing:var(--track-serif);max-width:15ch;text-wrap:balance}
.site-footer .fbook{display:inline-flex;align-items:center;flex:none;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;font:400 15px/1 var(--mono);text-transform:uppercase;padding:9px 18px 8px;transition:background .15s,color .15s}
.site-footer .fbook:hover{background:var(--ink);color:var(--accent)}
.site-footer .flist{list-style:none;margin:0;padding:0;display:grid;gap:3px;justify-items:start}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer .flist a,.site-footer .fmono{border-bottom:1px solid var(--ink);transition:opacity .15s}
.site-footer .flist a:hover,.site-footer .fmono:hover{opacity:.55}
.site-footer .fsocial .ext{font-size:10px;margin-left:3px;vertical-align:1px}
.site-footer .faddr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.site-footer .faddr p{margin:0}
.site-footer .fmono{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:1099px){.site-footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .fbig{grid-column:1/-1;grid-row:auto;min-height:300px}.site-footer .flinks{grid-row:span 2}}
@media(max-width:800px){
  .site-footer,.site-footer.has-photo{margin-top:72px;padding-top:20px}
  .site-footer .fphoto{display:none}
  .site-footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .site-footer .fbig,.site-footer .flinks{grid-column:1/-1;grid-row:auto}
  .site-footer .fbig{gap:56px;min-height:0}
  .site-footer .flogo img{width:180px}
  .site-footer .fline{font-size:38px}
  .site-footer .fbook{width:100%;justify-content:center;padding:13px 14px 12px}
  .site-footer .faddr{padding:20px 14px}
}

/* CookieYes: hide the floating "revisit" button; the footer link reopens the banner */
.cky-btn-revisit-wrapper{display:none!important}
/* ---- WhatsApp ---- */
.wa{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;align-items:center;gap:12px}
.wa .msg{display:none;background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:10px 34px 10px 14px;font-size:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.35);position:relative;max-width:260px}
.wa.show .msg{display:block}
.wa .msg small{display:block;color:var(--stone);font-size:12px;margin-top:2px}
.wa .msg .x{position:absolute;right:8px;top:8px;width:22px;height:22px;border:0;border-radius:50%;background:var(--sand);color:var(--ink);font-size:14px;cursor:pointer;line-height:1}
.btn-wa{width:52px;height:52px;border-radius:50%;background:var(--whatsapp);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);text-decoration:none}
@media(max-width:900px){.wa .msg{display:none!important}}

/* ---- generic pages (editor content) ---- */
.page-head{width:min(var(--wide),92%);margin:0 auto 28px}
.page-head h1{font-size:var(--h1);max-width:16ch;text-wrap:balance}
.entry-content{width:min(760px,92%);margin:0 auto 60px;line-height:1.4}
.entry-content>*+*{margin-top:1em}
.entry-content h2{margin-top:1.6em}
.entry-content h3{margin-top:1.4em}
.entry-content ul,.entry-content ol{padding-left:1.2em}
.entry-content a{text-decoration:underline;text-underline-offset:4px}
.entry-content .wp-block-button__link,.entry-content .button{background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;font:400 var(--btn)/1 var(--mono);text-transform:uppercase;text-decoration:none;padding:var(--btn-pad);transition:background .15s,color .15s,border-color .15s}
.entry-content .wp-block-button__link:hover,.entry-content .button:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.entry-content .alignwide{width:min(var(--wide),92vw);margin-left:calc(50% - min(var(--wide),92vw)/2)}
.entry-content .alignfull{width:100vw;margin-left:calc(50% - 50vw)}
.has-builder .entry-content{width:auto;margin:0}
.teaser{border-top:1px solid var(--line);padding:22px 0}
.teaser h2{font-size:var(--h3);font-weight:400}
.teaser h2 a{text-decoration:none}

/* ---- gallery page (AutoCamp /gallery, measured 1440/375): container 1180, 10-col grid, gap 20, blocks of 1/2/3 ---- */
body{overflow-x:clip}
.gal{width:min(var(--max),calc(100% - 80px));margin:110px auto 0}
.gal-head .lbl{margin:0 0 20px}
.gal-head h1{font-size:var(--h1);max-width:18ch}
.gal-intro{max-width:60ch;margin:24px 0 0;color:var(--stone)}
.gal-toggle{display:none}
.gal-filters{margin:65px 0 50px;display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1}
.gal-filters .row{display:flex;gap:20px;align-items:baseline}
.gal-filters .opts{display:flex;flex-wrap:wrap;gap:12px 20px}
.gal-filters button{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--ink);cursor:pointer;text-underline-offset:5px;text-decoration-thickness:1px}
.gal-filters button:hover{text-decoration:underline}
.gal-filters button[aria-pressed=true]{text-decoration:underline}
.gal-filters button small{font-size:inherit;color:var(--stone)}
.gal-grid{display:flex;flex-direction:column;gap:20px}
.g{display:grid;gap:20px;margin:0}
.g .c{position:relative;overflow:hidden;background:var(--sand);margin:0}
.g .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-stacked_a,.g-stacked_b{grid-template-columns:repeat(10,1fr)}
.g .sq{aspect-ratio:1}
.g-stacked_b .sq{grid-column:1/5}
.g-stacked_b .tall{grid-column:5/11;grid-row:1/3}
.g-stacked_a .tall{grid-column:1/7;grid-row:1/3}
.g-stacked_a .sq{grid-column:7/11}
.g-two{grid-template-columns:2fr 3fr;aspect-ratio:1180/450}
.g-pair{grid-template-columns:1fr 1fr}
.g-pair .c{aspect-ratio:3/4}
.g-single .c{background:none}
.g-single .c img{position:static;height:auto;max-height:min(820px,70vw);object-fit:cover}
.g .expand{display:none;position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:zoom-in}
.gal-more{display:flex;justify-content:center;margin:20px 0 0}
.gal-more .more{font-family:var(--mono);font-size:var(--btn);line-height:1;letter-spacing:0;text-transform:uppercase;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;padding:var(--btn-pad);cursor:pointer;min-height:var(--tap);transition:background .15s,color .15s,border-color .15s}
.gal-more .more:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.gal-empty{padding:40px 0;color:var(--stone)}
.gal-end{margin:60px auto 0;max-width:600px;text-align:center}
.gal-end h2{margin:0 0 14px}
.gal-end p{font-size:var(--lede);line-height:1.4;margin:0 0 22px}
.gal-end .acts{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}
.gal-end .text-link{margin:0;align-self:auto}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;display:none;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:contain}
.lightbox[open]{display:flex;animation:lb-in .3s cubic-bezier(0,0,.2,1)}
.lightbox::backdrop{background:rgba(42,38,32,.55);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.lightbox .frame{position:relative;max-width:96vw;max-height:92vh}
.lightbox img{display:block;width:auto;height:auto;max-width:96vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lightbox .close{position:absolute;top:20px;right:20px;z-index:2;font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:0;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;padding:5px 8px;cursor:pointer}
.lightbox .close:hover{background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
/* browse and zoom (Bjorn 2026-11-05): the site's arrow pills beside the photo, a click zooms in, then drag or scroll over the photo */
.lightbox img{cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none}
.lightbox.is-zoomed img{cursor:grab}
.lightbox.is-zoomed img.drag{cursor:grabbing}
.lightbox img.anim{transition:transform .22s cubic-bezier(0,0,.2,1)}
.lightbox .lb-nav{position:fixed;top:50%;z-index:3;transform:translateY(-50%);width:60px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:9999px;background:var(--cream);color:var(--ink);cursor:pointer;transition:background .15s}
.lightbox .lb-nav:hover{background:var(--accent)}
.lightbox .lb-nav[hidden]{display:none}
.lightbox .lb-prev{left:20px}
.lightbox .lb-next{right:20px}
.lightbox .lb-count{position:fixed;left:50%;bottom:6px;z-index:3;transform:translateX(-50%);margin:0;padding:5px 12px 4px;border-radius:9999px;background:var(--cream);color:var(--ink);font:400 12px/1 var(--mono)}
.lightbox .lb-count[hidden]{display:none}
.lightbox.is-zoomed .lb-nav,.lightbox.is-zoomed .lb-count{opacity:0;pointer-events:none}
@media(max-width:800px){.lightbox .lb-nav{top:auto;bottom:12px;transform:none;width:52px;height:28px}.lightbox .lb-prev{left:16px}.lightbox .lb-next{right:16px}}
.lightbox:focus,.lightbox:focus-visible,.lightbox .close:focus,.lightbox .close:focus-visible{outline:none}
@keyframes lb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}
@media(max-width:1100px){.g .expand{display:block}}
@media(max-width:900px){
  .gal{margin-top:10px;width:calc(100% - 80px)}
  .gal-toggle{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0;margin:50px 0 0;font:15px/1 var(--sans);color:var(--ink);cursor:pointer}
  .gal-toggle svg{display:block;transition:transform .15s}
  .gal-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  .gal-filters{display:none;margin:20px 0 0;font-size:14px}
  .gal-filters.open{display:flex}
  .gal-grid{margin-top:50px}
  /* collage on mobile: at most two side by side. The two squares share one row, the tall photo
     takes the full width underneath (or above), so nothing shrinks to a postage stamp. */
  .g{gap:14px}
  .g-stacked_a,.g-stacked_b{grid-template-columns:1fr 1fr;gap:14px}
  .g-stacked_b .sq{grid-column:auto;grid-row:1}
  .g-stacked_b .tall{grid-column:1/3;grid-row:2;aspect-ratio:3/4}
  .g-stacked_a .tall{grid-column:1/3;grid-row:1;aspect-ratio:3/4}
  .g-stacked_a .sq{grid-column:auto;grid-row:2}
  .g-two{grid-template-columns:1fr;aspect-ratio:auto}
  .g-two .c{aspect-ratio:3/2}
  .g-pair{gap:20px}
  .gal-end{margin-top:40px}
}

/* ---- wayfinder (AutoCamp quiz, measured): sand panel from the container edge to the right screen edge, 6/4 columns ---- */
.wf{margin:50px 0}
.wf .panel{background:var(--sand);color:var(--ink);padding:50px 0 50px 80px;margin-right:calc(50% - 50vw);display:grid;grid-template-columns:6fr 4fr;gap:20px;align-items:center}
.wf .q{padding-right:20px}
.wf h3{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.1;letter-spacing:0;margin:0 0 20px}
.wf .sentence{font-family:var(--serif);font-weight:var(--serif-w);font-size:24px;line-height:1.1;letter-spacing:var(--track-serif);position:relative}
@media(min-width:640px){.wf .sentence{font-size:35px}}
@media(min-width:1024px){.wf .sentence{font-size:45px}}
.wf .row{display:block;min-height:55px}
.wf label{margin-right:.18em}
.wf select{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 38px 2px 0;margin:0;text-transform:lowercase;cursor:pointer;max-width:100%;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%231D1A15' d='M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:26px 26px}
.wf select:hover{border-bottom-color:var(--accent-ink)}
.wf .measure{position:absolute;visibility:hidden;white-space:pre;pointer-events:none;text-transform:lowercase}
.wf .rail{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.wf .rail::-webkit-scrollbar{display:none}
.wf .card{flex:0 0 380px;max-width:80%;scroll-snap-align:start;text-decoration:none;color:var(--ink);display:block}
.wf .card img,.wf .card .ph{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--cream);padding:5%;box-sizing:border-box}
.wf .card .ph{display:grid;place-items:center;font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone)}
.wf .card h4{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.1;margin:20px 0 0}
.wf .card:hover h4{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.wf .card .lbl{display:block;margin-top:8px}
.wf .controls{display:grid;grid-template-columns:6fr 4fr;gap:20px;padding:20px 20px 0 50px;margin-right:calc(50% - 50vw)}
.wf .controls .in{grid-column:2;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:15px}
@media(max-width:900px){
  .wf .panel{grid-template-columns:1fr;padding:20px 0 20px 20px;gap:20px}
  .wf .row{min-height:35px}
  .wf select{padding-right:26px;background-size:18px 18px}
  .wf .card{flex-basis:78%}
  .wf .controls{grid-template-columns:1fr;padding:20px 20px 0 50px}
  .wf .controls .in{grid-column:1}
}

/* ---- cookie banner (CookieYes) in AutoCamp style (measured): cream box bottom-left, 340 wide, padding 14 20 18, shadow 0 9 26 / .28,
   no title, sans 15/1.4, yellow pill buttons (mono 15 uppercase, 1 px ink border, hover inverts); the preference modal in the same palette.
   The plugin writes its colours inline, hence !important. ---- */
.cky-consent-container{width:360px!important;max-width:calc(100vw - 28px)!important;border-radius:0!important;overflow:visible!important;max-height:none!important}
.cky-box-bottom-left{left:14px!important;bottom:14px!important;right:auto!important}
.cky-consent-container .cky-consent-bar{background:var(--cream)!important;border:0!important;border-radius:0!important;box-shadow:0 9px 26px rgba(2,2,3,.28)!important;padding:14px 20px 18px!important;font-family:var(--sans)!important}
.cky-consent-bar .cky-title{display:none!important}
.cky-consent-bar .cky-notice-des,.cky-consent-bar .cky-notice-des p{color:var(--ink)!important;font-family:var(--sans)!important;font-size:15px!important;line-height:1.4!important;padding:0!important;margin:0!important}
.cky-notice-btn-wrapper{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:10px!important;margin-top:18px!important;padding:0!important}
.cky-notice-btn-wrapper .cky-btn-accept{order:1!important}
.cky-notice-btn-wrapper .cky-btn-reject{order:2!important}
.cky-notice-btn-wrapper .cky-btn-customize{order:3!important}
.cky-btn,.cky-consent-bar .cky-btn,.cky-modal .cky-btn{flex:1 1 auto!important;width:auto!important;margin:0!important;font:400 15px/1 var(--mono)!important;text-transform:uppercase!important;letter-spacing:0!important;padding:8px 15px!important;min-height:33px!important;border-radius:9999px!important;border:1px solid var(--ink)!important;background:var(--accent)!important;color:var(--ink)!important;opacity:1!important;box-shadow:none!important;text-shadow:none!important;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.cky-btn:hover{background:var(--ink)!important;color:var(--accent)!important;border-color:var(--accent)!important;opacity:1!important}
.cky-btn:focus-visible,.cky-switch input[type="checkbox"]:focus-visible,.cky-accordion-btn:focus-visible,.cky-preference-header .cky-btn-close:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px}
.cky-modal{border-radius:0!important;background:var(--cream)!important;box-shadow:0 9px 26px rgba(2,2,3,.28)!important}
.cky-preference-center{background:var(--cream)!important;color:var(--ink)!important;border:0!important;border-radius:0!important;font-family:var(--sans)!important}
.cky-preference-header{border-bottom:1px solid var(--line)!important;padding:20px 24px!important}
.cky-preference-title{font-family:var(--serif)!important;font-weight:var(--serif-w)!important;font-size:28px!important;line-height:1.1!important;letter-spacing:var(--track-serif)!important;color:var(--ink)!important}
.cky-preference-content-wrapper,.cky-preference-content-wrapper p,.cky-accordion-header-des,.cky-accordion-header-des p,.cky-cookie-des-table,.cky-cookie-des-table *,.cky-empty-cookies-text{color:var(--ink)!important;font-family:var(--sans)!important;font-size:15px!important;line-height:1.4!important}
.cky-accordion-btn{color:var(--ink)!important;font-family:var(--sans)!important;font-weight:600!important;font-size:16px!important}
.cky-accordion{border-bottom:1px solid var(--line)!important}
.cky-always-active{color:var(--stone)!important;font-family:var(--mono)!important;font-size:13px!important;text-transform:uppercase!important;font-weight:400!important}
.cky-switch input[type="checkbox"]{background:var(--stone-light)!important}
.cky-switch input[type="checkbox"]:checked{background:var(--ink)!important}
.cky-switch input[type="checkbox"]:before{background:var(--cream)!important}
.cky-prefrence-btn-wrapper{display:flex!important;gap:10px!important;flex-wrap:wrap!important;padding:16px 24px!important;background:var(--cream)!important;border-top:1px solid var(--line)!important}
.cky-footer-wrapper{background:var(--cream)!important}
.cky-btn-revisit-wrapper{background:var(--ink)!important}

/* ---- assortment page /onze-daktenten/ (AutoCamp accommodation rhythm, measured 1440): container 1180,
   name + facts + price beside one tall photo, then a photo rail, then what is included ---- */
.tents-page{width:min(var(--max),calc(100% - 80px));margin:110px auto 0}
.tents-page .gal-intro{max-width:54ch;margin-top:22px}
.tents-page .gal-head .lede{font-size:var(--h3);line-height:1.4;max-width:44ch;margin:22px 0 0}
.tents-page .crumb{margin:0 0 26px}
.tent-detail h1{font-size:var(--h2);margin:0 0 16px}
/* model cards (AutoCamp /locations/): square photo, name 25, one paragraph, mono link */
.tent-list{display:grid;grid-template-columns:repeat(3,1fr);gap:80px;margin:60px 0 0}
.tents-page .wf{margin:110px 0 0}
/* the roof box, once, low on /daktent-huren/: one tent card laid on its side (photo on sand, name, one line, mono link), never bigger than a tent card */
.xsell{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:50px;align-items:center;width:min(var(--max),calc(100% - 80px));margin:100px auto 0}   /* the same page width as .tents-page: the card stands outside the article */
.xsell-media{display:block;aspect-ratio:1;background:var(--sand);padding:8%;box-sizing:border-box}
.xsell-media img{display:block;width:100%;height:100%;object-fit:contain}
.xsell-txt .lbl{margin:0 0 16px}
.xsell-txt h2{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.15;letter-spacing:0;margin:0 0 12px;max-width:18ch}
.xsell-txt h2 a{text-decoration:none;color:inherit}
.xsell-txt h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.xsell-txt p{font-size:var(--body);line-height:1.45;margin:0 0 20px;max-width:46ch}
.xsell-txt .text-link{margin:0}
@media(max-width:700px){.xsell{grid-template-columns:1fr;row-gap:22px;margin-top:70px}.xsell-media{max-width:260px}}
@media(max-width:640px){.xsell{width:calc(100% - 40px)}}
/* /dakkoffer-huren/: the one line under the card grid (other sizes on request, no "binnenkort" cards) */
.boxes-page .list-note{margin:48px 0 0;font-size:var(--body);line-height:1.5;color:var(--stone)}
.boxes-page .list-note a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.boxes-page .list-note a:hover{color:var(--accent-ink)}
/* Map next to the heading of /daktent-huren/ (roovtop_rent_map, Bjorn 2026-10-10, after AutoCamp /locations/):
   desktop only, in the empty half next to the heading, so the tents stay in view; the edges fade into the page */
.gal-head.has-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);column-gap:60px;align-items:start}
.rmap{position:relative;margin:-26px 0 0}
.rmap-in{position:relative}
.rmap-in img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);mask-composite:intersect}
.rmap-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rmap-routes path{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 5;opacity:0;transition:opacity .25s}
.rmap-routes path.on{opacity:1}
.rmap .pin{position:absolute;z-index:1;width:0;height:0;color:var(--ink);text-decoration:none}
.rmap .pin i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink);transition:transform .2s,background .2s,box-shadow .2s}
.rmap .pin.home i{left:-7px;top:-7px;width:14px;height:14px;background:var(--accent);box-shadow:inset 0 0 0 1.3px var(--ink)}
.rmap .pin .tag{position:absolute;top:0;left:11px;transform:translateY(-50%);padding:5px 9px 4px;border:1px solid var(--ink);border-radius:999px;background:var(--cream);font:400 11px/1 var(--mono);text-transform:uppercase;white-space:nowrap;transition:background .15s}
.rmap .pin .tag span{color:var(--stone)}
.rmap .pin.l .tag{left:auto;right:11px}
.rmap .pin.b .tag{left:0;top:10px;transform:translateX(-50%)}
.rmap .pin.home .tag{left:15px;background:var(--ink);color:var(--cream)}
.rmap a.pin:hover .tag,.rmap a.pin:focus-visible .tag{background:var(--accent)}
.rmap a.pin:hover .tag span,.rmap a.pin:focus-visible .tag span{color:var(--ink)}
.rmap a.pin:hover i,.rmap a.pin:focus-visible i{background:var(--accent);box-shadow:0 0 0 1.5px var(--ink);transform:scale(1.6)}
.rmap a.pin:focus-visible{outline:none}
.rmap a.pin:focus-visible .tag{outline:2px solid var(--ink);outline-offset:2px}
.gal-head .rmap-lbl{position:absolute;left:0;top:0;margin:0}
.rmap figcaption{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--stone);text-align:right}
@media(max-width:1099px){.gal-head.has-map{display:block}.rmap{display:none}}
/* "Wat gaat erin" next to the heading of /dakkoffer-huren/ (inc/boxfill.php): the open box from above, three packings to scale,
   tags on pins like the map, tabs in mono; on narrow screens under the intro at full width */
.gal-head.has-fill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:50px;align-items:start}
.boxes-page .tent-list{margin-top:16px}
.bxf{position:relative;margin:-92px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 52px;column-gap:4px;align-items:center}   /* up into the space above the heading, so the boxes are in view at once (Bjorn 2026-11-02) */
.bxf-lbl{display:none}
.bxf-item{transition:transform .28s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.bxf-hit{fill:transparent;stroke:none;pointer-events:fill}
.bxf-set:not(.is-on),.bxf-set:not(.is-on) .bxf-hit{pointer-events:none}   /* a set that is off must not catch the pointer (its hit shapes sit over the other sets) */
.bxf-item.is-hot{transform:translateY(-7px)}
.bxf-lead{transition:opacity .2s}
.bxf-pins.is-on .pin .tag{pointer-events:auto;cursor:default;transition:background .15s}
.bxf .pin .tag.is-hot{background:var(--accent)}
.bxf-in{position:relative}
.bxf-svg{display:block;width:100%;height:auto}
.bxf .shadow{fill:var(--ink);opacity:.05}
.bxf .shell{fill:var(--cream);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.bxf .rimline{fill:none;stroke:var(--ink);stroke-width:1;opacity:.45;stroke-linejoin:round}
.bxf .form{fill:none;stroke:var(--ink);stroke-width:1;opacity:.3;stroke-linecap:round}
.bxf .floor{fill:var(--sand);stroke:none}
.bxf .wallin{fill:#DFD0AF;stroke:none;opacity:.95}
.bxf .rimfill{fill:var(--cream);stroke:none}
.bxf .rimedge{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.bxf .shellwall{fill:var(--cream);stroke:none}
.bxf .it{fill:var(--cream);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.bxf .it.side{fill:#EFE6D2}
.bxf .dt{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.bxf .dt.fill{fill:var(--cream)}
.bxf .crease{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.3;stroke-linecap:round}
.bxf .it.cap{fill:var(--cream);stroke-width:.9}
.bxf .it.end{fill:var(--cream)}
.bxf .it.bind{fill:#EFE6D2;stroke-width:.8;stroke-opacity:.6}
.bxf-set{opacity:0;transition:opacity .35s}
.bxf-set.is-on{opacity:1}
.bxf-pins{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s}
.bxf-pins.is-on{opacity:1}
.bxf .lead{stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1 4.5;opacity:.6}
.bxf .dot{fill:var(--ink)}
.bxf .dim{stroke:var(--ink);stroke-width:1;stroke-linecap:round;opacity:.5}
.bxf .pin{position:absolute;width:0;height:0;color:var(--ink)}
.bxf .pin .tag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:5px 9px 4px;border:1px solid var(--ink);border-radius:999px;background:var(--cream);font:400 11px/1 var(--mono);text-transform:uppercase;white-space:nowrap}
.bxf-lbl{position:absolute;left:0;top:0;margin:0}
/* the tabs stay quiet (Bjorn: the booking button is the one thing that should ask for attention): a thin ring, a grey icon, the active one in ink */
.bxf-tabs{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.bxf-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--stone);cursor:pointer;opacity:.75;transition:opacity .15s}
.bxf-tab .ic{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;transition:border-color .15s,color .15s,background .15s}
.bxf-tab .ic svg{width:17px;height:17px;stroke-width:1.5}
.bxf-tab .lb{font:400 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.02em}
.bxf-tab:hover{opacity:1}
.bxf-tab:hover .ic{border-color:var(--ink);background:var(--accent);color:var(--ink)}
.bxf-tab.is-on{opacity:1;color:var(--ink)}
.bxf-tab.is-on .ic{border-color:var(--ink);background:var(--sand)}
.bxf-tab:focus-visible{outline:none}
.bxf-tab:focus-visible .ic{outline:2px solid var(--ink);outline-offset:2px}
.bxf figcaption{grid-column:1/-1;margin:-6px 0 0;font-size:13px;line-height:1.5;color:var(--stone);max-width:52ch}
/* under 1100px the drawing is not shown at all, like the roadbook map on /daktent-huren/ (Bjorn 2026-11-03: first below the cards,
   still "rommelig" on a phone; the box for rent is the only thing that matters there) */
@media(max-width:1099px){.gal-head.has-fill{display:block}.bxf{display:none}.boxes-page .tent-list{margin-top:40px}}
@media(max-width:600px){.bxf .pin .tag{font-size:9px;padding:3px 6px 2px}}
/* Brand tiles next to the heading of a tent list (shop/list.php, Bjorn 2026-10-10): the four logos in ink on sand,
   a click filters on that brand (same as the Merk row). Desktop only; each logo sized so they weigh the same */
.gal-head.has-brands{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,452px);column-gap:60px;align-items:start}
.sh-brands .lbl{margin:0 0 12px}
.sh-brands .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-brands button{display:grid;place-items:center;height:96px;padding:0;border:0;border-radius:0;background:var(--sand);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s,background .15s}
.sh-brands button:hover{background:#E2D2B4}
.sh-brands button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sh-brands button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sh-brands img{display:block;width:auto;height:auto;max-width:72%;max-height:46%}
.sh-brands .b-darche img{width:62%}
.sh-brands .b-james-baroud img{width:80%;max-width:80%}
.sh-brands .b-sheepie img{width:50%}
.sh-brands .b-wild-land img{height:48px;max-height:56%}
@media(max-width:1099px){.gal-head.has-brands{display:block}.sh-brands{display:none}}
.tent-card .media{display:block;aspect-ratio:1;background:var(--sand);margin:0 0 16px;overflow:hidden;padding:5%;box-sizing:border-box}
.tent-card .media img{display:block;width:100%;height:100%;object-fit:contain}
.tent-card .media.ph{display:flex;align-items:center;justify-content:center}
.tent-card .media.ph span{font-family:var(--serif);font-weight:var(--serif-w);font-size:30px;letter-spacing:var(--track-serif);color:var(--stone);opacity:.45}
.tent-card .lbl{margin:0 0 10px;color:var(--stone)}
.tent-card h2{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.1;letter-spacing:0;margin:0 0 10px}
.tent-card h2 a{text-decoration:none}
.tent-card h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.tent-card p{font-size:var(--body);line-height:1.4;margin:0 0 18px}
.tent-card.is-soon .lbl,.tent-card.is-soon p{color:var(--stone)}
/* Airstream-style slider (measured 1440): active slide 60 % of the container, neighbours .3 opacity and .75 scale,
   .3s cubic-bezier(.4,0,.2,1). Ours runs on native scroll-snap (swipe works everywhere) and bleeds to the screen edges. */
.tent-detail{margin-top:40px}
.tent-head{margin:0}
.tent-head .lede{font-size:var(--lede);line-height:1.4;margin:14px 0 0;max-width:52ch}
.tent-gal{--slide:560px;margin:30px calc(50% - 50vw) 0;overflow:hidden}
.tent-gal .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 calc(50% - var(--slide) / 2)}
.tent-gal .rail::-webkit-scrollbar{display:none}
.tent-gal .gshot{position:relative;flex:0 0 var(--slide);scroll-snap-align:center;margin:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2%;opacity:.3;transform:scale(.75);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);cursor:pointer}
.tent-gal .gshot.is-on{opacity:1;transform:none;cursor:default}
.tent-gal .gshot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.tent-gal .expand{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:zoom-in}
.tent-gal .gshot:not(.is-on) .expand{cursor:pointer}
.tent-gal .bar{width:min(var(--max),calc(100% - 80px));margin:16px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.tent-gal .cnt{margin:0;font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone)}
.tent-gal .controls{display:flex;gap:10px;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.tent-gal .gshot{transition:none}}
/* booking bar under the slider: same dark panel as on the homepage, inside the container */
.book.book-tent{width:100%;margin:34px 0 0;box-sizing:border-box}
.book.book-soon{grid-template-columns:1fr auto;align-items:center}
.book.book-box{grid-template-columns:1.1fr 1.1fr auto}   /* roof box: dates and the button, no persons */
.book.book-soon .say{margin:0;font-size:var(--body);line-height:1.4;color:var(--cream);max-width:60ch}
.tent{display:grid;grid-template-columns:6fr 5fr;gap:50px 80px;align-items:start;margin:70px 0 0}
.tent .txt>.lbl{margin:0 0 14px;color:var(--stone)}
.tent .facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tent .facts li{border-bottom:1px solid var(--line);padding:9px 0;font-size:var(--body);line-height:1.4}
.tent .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin:0 0 10px;font-family:var(--mono);letter-spacing:0;text-transform:uppercase}
.tent .price b{font-weight:400;font-size:var(--h3)}
.tent .price span{font-size:var(--label);color:var(--stone)}
.tent .fine{font-size:13px;line-height:1.45;color:var(--stone);margin:0 0 26px;max-width:44ch}
.tent .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
/* kopen: two text columns (AutoCamp "Inspired Design / Iconic Destinations"), compare table, numbered steps, price panel, dark why-panel */
.text-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 80px;margin:60px 0 0}
.text-cols h2{font-size:var(--h3);font-weight:var(--serif-w);margin:0 0 12px}
.text-cols p{font-size:var(--body);line-height:1.4;margin:0 0 16px;max-width:44ch}
.kopen-page>section,.kopen-page>.text-cols{margin-top:110px}
.kopen-page .sec-title{width:auto;margin:0 0 30px}
/* booking drawer (Selfbook pattern, measured at autocamp.com 2026-09-21) */
.bk{position:fixed;inset:0;z-index:80;background:rgba(39,39,39,.74);display:flex;justify-content:flex-end;padding:20px}
.bk[hidden]{display:none}
.bk-panel{width:600px;max-width:100%;height:100%;background:#F1EEE6;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:bk-in .3s cubic-bezier(0,0,.2,1)}
@keyframes bk-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.bk-head{display:flex;align-items:center;gap:14px;padding:18px 18px 18px 24px;background:rgba(44,38,27,.96);color:var(--cream)}
.bk-title{margin:0;flex:1;font-family:var(--mono);font-size:15px;letter-spacing:0;text-transform:uppercase;color:#fff}
.bk-back,.bk-close{width:44px;height:44px;border:0;border-radius:4px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s}
.bk-back{background:transparent;margin-left:-10px}
.bk-back[hidden]{display:none}
.bk-back:hover,.bk-close:hover{background:rgba(255,255,255,.28)}
.bk-help{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.bk-help:hover{color:var(--accent)}
.bk-sub{display:flex;gap:10px;flex-wrap:wrap;padding:12px 24px;background:rgba(44,38,27,.96);color:var(--cream);border-top:1px solid rgba(246,239,221,.12)}
.bk-chip{display:inline-flex;align-items:center;gap:12px;border:0;background:transparent;color:#fff;font-family:var(--sans);font-size:19px;padding:6px 14px 6px 0;cursor:pointer;border-radius:4px}
.bk-chip svg{width:26px;height:26px;stroke-width:1.1;color:#fff}
.bk-chip svg *,.bk-tent .specs svg *{vector-effect:non-scaling-stroke}
.bk-sub{padding:14px 24px;gap:16px}
.bk-chip:hover span{text-decoration:underline;text-underline-offset:4px}
.bk-body{flex:1;overflow:auto;padding:24px 32px 32px;-webkit-overflow-scrolling:touch}
.bk-card{background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bk-greet{padding:20px 22px;margin:0 0 24px}
.bk-greet h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:24px;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.bk-greet p{margin:0;font-size:16px;font-weight:var(--sans-w);color:var(--ink)}
.bk-tent{display:block;width:100%;text-align:left;border:0;padding:0;margin:0 0 24px;background:#fff;border-radius:8px;overflow:hidden;cursor:pointer;color:var(--ink);font:inherit;transition:box-shadow .15s}
.bk-tent:hover{box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
.bk-tent.is-off{cursor:default}
.bk-tent .pic{height:300px;background:var(--sand);display:flex;align-items:center;justify-content:center;padding:2% 4%;box-sizing:border-box;overflow:hidden}
.bk-tent .pic img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.bk-tent:not(.is-off):hover .pic img{transform:scale(1.06)}
.bk-tent .txt{display:block;padding:18px 24px 22px}
.bk-tent .row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.bk-tent h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:20px;line-height:1.2;margin:0;padding-top:6px}
.bk-tent .price{text-align:right;flex:0 0 auto}
.bk-tent .price b{display:block;font-family:var(--sans);font-weight:var(--sans-w);font-size:18px;line-height:1.2;white-space:nowrap}
.bk-tent .price b em{font-style:normal;font-size:14px;color:var(--stone);margin-right:6px}
.bk-tent .price small{display:block;font-size:11px;color:var(--stone);margin-top:3px}
.bk-tent .price.off b{color:var(--stone);font-size:13px;white-space:normal;max-width:24ch}
.bk-tent p{margin:10px 0 16px;font-size:15px;font-weight:var(--sans-w);line-height:1.4;color:var(--ink)}
.bk-tent .specs{display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.bk-tent .specs li{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--ink)}
.bk-tent .specs svg{width:26px;height:26px;stroke-width:1.1}
.bk-tent .go{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;padding:8px 16px}
.bk-tent.is-off .txt{opacity:.75}
.bk-filter{margin-left:auto}
.bk-filters{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:12px 24px 14px;background:rgba(44,38,27,.96);color:var(--cream);border-top:1px solid rgba(246,239,221,.12)}
.bk-filters[hidden]{display:none}
.bk-filters .opts{display:flex;gap:8px}
.bk-filters .opts button{border:1px solid rgba(246,239,221,.35);background:transparent;color:var(--cream);border-radius:9999px;padding:7px 14px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;cursor:pointer}
.bk-filters .opts button[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.bk-filters .tog{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.bk-filters .tog input{accent-color:var(--accent);width:16px;height:16px}
.bk-empty{color:var(--stone);font-size:15px;margin:0}
/* under a taken tent: someone is paying for it right now (free again at ...), and the nearest free periods, one tap each */
.bk-avail{margin:-12px 0 24px;padding:16px 24px 18px;background:#fff;border-radius:8px;font-size:15px;font-weight:var(--sans-w);color:var(--ink)}
.bk-avail p{margin:0 0 8px}
.bk-avail .lbl{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--stone);font-weight:400;margin:10px 0 8px}
.bk-avail .opts{display:flex;flex-wrap:wrap;gap:8px}
.bk-avail button{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;background:transparent;border:1px solid var(--ink);color:var(--ink);border-radius:9999px;padding:9px 16px;cursor:pointer}
.bk-avail button:hover{background:var(--ink);color:var(--accent);border-color:var(--accent)}
.bk-tent[hidden]+.bk-avail{display:none}
.bk-tent:hover .go{background:var(--ink);color:var(--accent);border-color:var(--accent)}
.bk-loading{margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--stone)}
.bk-frame{width:100%;border:0;min-height:600px;background:transparent;display:block}
.bk-panel .book{width:100%;margin:0 0 20px;padding:18px 20px;box-shadow:none;border-radius:8px;grid-template-columns:1fr 1fr}
.bk-panel .book .field[data-field=personen]{grid-column:1/-1}
.bk-panel .book .go{grid-column:1/-1;width:100%;text-align:center}
.bk-panel .book .note{display:none}
body.bk-open{overflow:hidden}
@media(max-width:900px){.bk{padding:0}.bk-panel{width:100%;border-radius:0;animation:bk-up .3s cubic-bezier(0,0,.2,1)}@keyframes bk-up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}.bk-body{padding:16px 16px 24px}.bk-head{padding:12px 12px 12px 18px}.bk-tent .pic{height:220px}}
/* the embed page: only the plugin form, in the drawer's palette */
body.embed-booking{background:#F1EEE6;padding:0!important;margin:0}
body.embed-booking .cky-modal,body.embed-booking .cky-overlay{display:none!important}
body.embed-booking .hdr,body.embed-booking .ticker,body.embed-booking .mobnav,body.embed-booking .wa,body.embed-booking .skip,body.embed-booking .cky-consent-container,body.embed-booking .cky-btn-revisit-wrapper{display:none!important}
body.embed-booking main{padding-top:0}   /* no header in the frame, so no room for it either */
body.embed-booking .embed-main{padding:20px 24px 0}
.rv-flow .roovtop-slots{display:block}
/* the booking flow (plugin 2.3), on the embed page in the drawer and on /daktent-huren/: the drawer's palette and type */
.rv-flow{--rv-primary:#1D1A15;--rv-primary-dark:#000;--rv-accent-bg:#F6EFDD;--rv-text:#1D1A15;--rv-muted:#665C50;--rv-card-bg:#fff;--rv-card-border:transparent;--rv-radius:8px;--rv-btn-radius:9999px;--rv-btn-text:#F6EFDD;--rv-font:var(--sans);--rv-font-size:15px;--rv-card-shadow:0 1px 2px rgba(0,0,0,.04);--rv-max-width:640px;--rv-line:rgba(29,26,21,.14)}
.rv-flow .rv-progress{font-family:var(--mono);letter-spacing:0}
.rv-flow .rv-step-title{font-family:var(--sans);font-weight:var(--sans-w);font-size:26px;letter-spacing:-.01em}
.rv-flow .rv-card h3,.rv-flow .rv-subhead,.rv-flow .rv-trip-txt strong,.rv-flow .rv-pack-head strong,.rv-flow .rv-extra-txt strong,.rv-flow .rv-choice-txt strong{font-family:var(--sans);font-weight:500}
.rv-flow .rv-subhead,.rv-flow .rv-slot-label,.rv-flow .rv-bar-total span,.rv-flow .rv-time-label,.rv-flow .rv-time-group{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;font-weight:400;color:var(--stone)}
.rv-flow input[type=text],.rv-flow input[type=email],.rv-flow input[type=tel],.rv-flow input[type=number],.rv-flow textarea,.rv-flow select{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-family:var(--sans);font-size:16px;padding:8px 0;width:100%}
.rv-flow input:focus,.rv-flow textarea:focus,.rv-flow select:focus{outline:none;border-bottom-color:var(--ink);box-shadow:none}
.rv-flow .roovtop-field label{font-size:13px;color:var(--stone);font-weight:400}
.rv-flow .roovtop-slot.roovtop-slot-active{background:var(--ink);border-color:var(--ink);color:var(--cream);font-weight:500}
.rv-flow .roovtop-slot:hover{border-color:var(--ink);background:#fff}
.rv-flow .rv-bar .roovtop-btn-primary,.rv-flow .roovtop-btn-primary{width:auto;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;padding:14px 26px;border-radius:9999px}
.rv-flow .roovtop-btn-primary:hover:not(:disabled){background:var(--btn-hover-bg);color:var(--accent);border-color:var(--accent)}
.rv-flow .roovtop-btn-primary:disabled{background:#E7E1D3;color:var(--stone);border-color:transparent}
.rv-flow .roovtop-btn-secondary{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;border-radius:9999px;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:10px 18px}
.rv-flow .rv-add{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase}
.rv-flow .rv-pack-price small{color:#2F6B3A}
.rv-flow .roovtop-price-advance{background:var(--cream);border-radius:6px;margin:14px 0 0;padding:12px 14px}
.rv-flow .roovtop-price-row{font-size:15px}
/* in the drawer: the page fills the frame and the bar sits on the bottom edge */
body.embed-booking .rv-flow{min-height:calc(100vh - 20px);display:flex;flex-direction:column;max-width:none}
body.embed-booking .rv-flow form{flex:1 0 auto;display:flex;flex-direction:column}
body.embed-booking .rv-flow .rv-step{padding-bottom:16px}
body.embed-booking .rv-bar{margin:auto -24px 0}
@media(max-width:900px){body.embed-booking .embed-main{padding:16px 16px 0}body.embed-booking .rv-bar{margin:auto -16px 0;padding-left:16px;padding-right:16px}.rv-flow .rv-step-title{font-size:22px}}
/* the drawer while the form is open: the frame gets the whole panel below the head */
.bk.is-framed .bk-sub,.bk.is-framed .bk-filters{display:none}
.bk.is-framed .bk-body{padding:0;overflow:hidden;display:flex;flex-direction:column}
.bk.is-framed [data-bk-step="2"]{flex:1;display:flex;flex-direction:column;min-height:0}
.bk.is-framed .bk-frame{flex:1;height:100%;min-height:0}
.bk.is-framed .bk-loading{margin:24px 24px 0}
/* buy overview: filter/sort bar in the gallery-filter idiom, compare tick on the card, sticky compare bar, compare dialog */
.kopen-page .gal-head h1{font-size:var(--h2);max-width:none}
.kopen-page .gal-head .lede{margin-top:14px}
.kopen-page .tent-list{margin-top:40px}
.tent-card.is-hidden{display:none}
.tent-card{display:flex;flex-direction:column}
.tent-card>.text-link:last-child{margin-top:auto;align-self:flex-start}
.kopen-page .tent-card p:not(.from),.shop-page .tent-card p:not(.from){margin-bottom:22px}
.spec-row{list-style:none;margin:10px 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
/* amenity idiom = AutoCamp location pages (measured 2026-10-02): line icon 37 px, 20 px gap, mono label at the label size, ink, centred */
.spec-row li{display:flex;flex-direction:column;align-items:center;gap:20px;font-family:var(--mono);font-size:var(--label);line-height:1.4;letter-spacing:0;text-transform:uppercase;color:var(--ink)}
.spec-row svg{display:block;width:46px;height:46px}   /* same icons and size as "In het kort" on the tent pages (2026-10-06) */
.spec-row svg *{vector-effect:non-scaling-stroke}
.card-foot{margin-top:auto}
.card-foot .from{margin:0 0 14px;color:var(--ink)}
.card-foot .line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 14px}
.card-foot .line .from{margin:0}
.card-foot .line .text-link{margin:0}
.card-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill.add{font-size:12px;padding:7px 14px;min-height:0}
.hdr .cart-pill{gap:8px;padding:0 18px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:15px;letter-spacing:0;pointer-events:auto}
.hdr .cart-pill[hidden]{display:none}
.hdr .cart-pill svg{display:block}
.hdr .cart-pill:hover{background:var(--accent-btn)}
/* "added" card (herzien 2026-10-10, Baymard added-to-cart: show what was added, with a picture, and two clear next
   steps). Dark card like the compare bar; desktop centred at the bottom, phone beside the WhatsApp bubble. */
.cart-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:41;width:min(400px,calc(100% - 40px));box-sizing:border-box;background:var(--ink);color:var(--cream);padding:14px 14px 14px 14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);animation:ct-in .25s cubic-bezier(.2,.7,.2,1)}
@keyframes ct-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.cart-toast .ct-top{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start}
.cart-toast .ct-img{display:block;width:64px;height:64px;background:var(--sand);overflow:hidden}
.cart-toast .ct-img img{display:block;width:100%;height:100%;object-fit:contain}
.cart-toast .ct-txt{min-width:0}
.cart-toast .ct-lbl{display:flex;align-items:center;gap:6px;margin:2px 0 6px;font-family:var(--mono);font-size:12px;line-height:1.2;letter-spacing:0;text-transform:uppercase;color:var(--sand)}
.cart-toast .ct-name{margin:0;font-size:16px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-toast .ct-meta{margin:3px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:0;color:var(--sand)}
.cart-toast .ct-meta:empty{display:none}
.cart-toast .ct-x{width:28px;height:28px;margin:-4px -4px 0 0;display:grid;place-items:center;background:none;border:0;color:var(--cream);cursor:pointer;border-radius:50%}
.cart-toast .ct-x:hover{background:rgba(255,255,255,.12)}
.cart-toast .ct-acts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0}
.cart-toast .ct-more{background:none;border:0;padding:0;color:var(--cream);font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
.cart-toast .pill{font-size:12px;padding:10px 16px;min-height:0}
@media(prefers-reduced-motion:reduce){.cart-toast{animation:none}}

/* cart page (herzien 2026-10-10): lines left, summary right (sticky); phone: summary under the lines */
.cart-page .gal-head.cart-head{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:20px;margin-bottom:40px}
.cart-head .lbl,.cart-head h1{grid-column:1}
.cart-head .cart-back{grid-column:2;grid-row:2;margin:0 0 10px}
.cart-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:60px;align-items:start}
.cart-wrap[hidden]{display:none}
.cart-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cart-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-item .ci-img{display:block;aspect-ratio:1;background:var(--sand);overflow:hidden}
.cart-item .ci-img img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.cart-item .ci-img:hover img{transform:scale(1.03)}
.cart-item .ci-name{display:block;font-size:var(--h3);line-height:1.15;text-decoration:none;color:var(--ink)}
.cart-item .ci-name:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.cart-item .ci-opt{margin:8px 0 0;font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone)}
.cart-item .ci-av{margin:10px 0 0;font-size:14px}
.cart-item .ci-qty{display:flex;align-items:center;gap:20px;margin:16px 0 0}
.cart-item .qty{display:inline-flex;align-items:center;border:1px solid var(--ink);border-radius:9999px}
.cart-item .qty button{width:38px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:9999px}
.cart-item .qty button:hover{background:var(--accent-btn)}
.cart-item .qty span{min-width:2ch;text-align:center;font-family:var(--mono);font-size:15px}
.cart-item .rm{background:none;border:0;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--stone);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.cart-item .rm:hover{color:var(--ink)}
.cart-item .ci-price{text-align:right}
.cart-item .ci-total{margin:0;font-family:var(--mono);font-size:18px;letter-spacing:0}
.cart-item .ci-each{margin:6px 0 0;font-size:13px;color:var(--stone)}
.cart-sum{position:sticky;top:110px;background:var(--sand);padding:30px 28px 26px}
.cart-sum h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);margin:0 0 18px}
.cart-sum dl{margin:0}
.cart-sum dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:15px}
.cart-sum dt span{color:var(--stone)}
.cart-sum dd{margin:0;font-family:var(--mono);letter-spacing:0;text-align:right}
.cart-sum .cart-free{margin:6px 0 4px;font-size:14px}
.cart-sum .cart-free p{margin:0 0 8px}
.cart-sum .cart-free .bar{display:block;height:4px;background:rgba(29,26,21,.15);overflow:hidden}
.cart-sum .cart-free .bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .4s ease}
.cart-sum .cart-total{border-top:1px solid rgba(29,26,21,.25);margin:14px 0 0;padding:6px 0 0}
.cart-sum .cart-total div{font-size:var(--h3);padding:10px 0 4px}
.cart-sum .cart-total dd{font-size:var(--h3)}
.cart-sum .cart-now{margin:2px 0 0;font-size:14px;color:var(--stone)}
.cart-sum .cart-go{display:flex;width:100%;box-sizing:border-box;justify-content:center;margin:20px 0 0}
.cart-sum .cart-alt{display:block;text-align:center;margin:14px 0 0}
.cart-sum .cart-fine{font-size:13px;line-height:1.45;color:var(--stone);margin:12px 0 0}
.cart-assure{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(29,26,21,.25);display:flex;flex-direction:column;gap:12px}
.cart-assure li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.4}
.cart-assure li[hidden]{display:none}
.cart-assure svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3}
.cart-assure a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:900px){
  .cart-wrap{grid-template-columns:1fr;gap:30px}
  .cart-sum{position:static;padding:24px 20px}
  .cart-item{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:20px 0}
  .cart-item .ci-price{grid-column:2;grid-row:1;justify-self:end;align-self:start}
  .cart-item .ci-main{grid-column:2;grid-row:1;padding-right:86px}
  .cart-item .ci-name{font-size:17px}
  .cart-item .ci-total{font-size:15px}
  .cart-item .ci-qty{gap:16px;margin-top:12px}
  .cart-page .gal-head.cart-head{grid-template-columns:1fr;margin-bottom:24px}
  .cart-head .cart-back{grid-column:1;grid-row:auto;margin:14px 0 0}
}
.cart-empty .acts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:22px}
.card-acts .text-link{margin:0}
.cmp{position:relative;cursor:pointer;display:inline-flex}
.cmp input{position:absolute;opacity:0;width:1px;height:1px}
.cmp span{display:inline-block;padding:7px 12px;border:1px solid var(--ink);border-radius:9999px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;transition:background .15s,color .15s}
.cmp:hover span{background:var(--accent-btn)}
.cmp input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cmp input:checked+span::before{content:"✓ "}
.cmp span,.pill.add{font-size:11px;padding:8px 14px}
.cmp input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.shop-empty{grid-column:1/-1;color:var(--stone);font-size:var(--lede);margin:0}
.cmp-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:24px;background:var(--ink);color:var(--cream);border-radius:9999px;padding:12px 14px 12px 24px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:calc(100% - 40px)}
.cmp-bar[hidden]{display:none}
.cmp-bar p{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.cmp-bar .acts{display:flex;align-items:center;gap:18px}
.cmp-bar .btn:disabled{opacity:.4;cursor:default}
.cmp-bar .btn .n{display:none}
/* phone (Bjorn 2026-10-09): the bar and the "added" toast sit beside the WhatsApp bubble (52 px at 18 px from the right
   edge), not under it; the count moves into the button so everything fits */
@media(max-width:640px){
  body .cmp-bar{left:16px;right:80px;transform:none;max-width:none;bottom:18px;min-height:52px;box-sizing:border-box}   /* body: wins over the 900 px rule further down */
  body .cart-toast{left:16px;right:80px;width:auto;transform:none;bottom:18px;padding:12px}
  .cart-toast .ct-img{width:56px;height:56px}
  .cart-toast .ct-name{font-size:15px}
  .cart-toast .ct-acts{flex-wrap:wrap;gap:10px}
  .cart-toast .pill{flex:1 1 auto;justify-content:center;padding:10px 12px}
  body .cmp-bar{justify-content:space-between;gap:12px;padding:5px 18px 5px 5px}
  .cmp-bar .acts .text-link{align-self:center;line-height:1;margin:0}
  .cmp-bar p{display:none}
  .cmp-bar .btn .n{display:inline}
  .cmp-bar .acts{width:100%;justify-content:space-between;gap:12px}
  .cmp-bar .btn{padding:9px 16px;min-height:0}
}
.cmp-bar .text-link{color:var(--cream);background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:0;margin:0}
.cmp-dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;display:none;align-items:center;justify-content:center}
.cmp-dialog[open]{display:flex;animation:lb-in .3s cubic-bezier(0,0,.2,1)}
.cmp-dialog::backdrop{background:rgba(29,26,21,.7)}
.cmp-dialog .frame{background:var(--cream);color:var(--ink);width:min(1000px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;padding:30px 34px 34px;box-sizing:border-box}
.cmp-dialog .head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 20px}
.cmp-dialog h2{font-size:var(--h2);margin:0}
.cmp-dialog .close{font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:0;background:var(--accent-btn);color:var(--on-accent);border:1px solid var(--ink);border-radius:9999px;padding:6px 10px;cursor:pointer}
.cmp-dialog .close:hover{background:var(--ink);color:var(--accent);border-color:var(--accent)}
.cmp-dialog .scroll{overflow-x:auto}
.cmp-dialog table{width:100%;border-collapse:collapse;font-size:var(--body);line-height:1.4}
.cmp-dialog th,.cmp-dialog td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-dialog thead th{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);line-height:1.1;padding-bottom:16px}
.cmp-dialog tbody th{font-family:var(--mono);font-weight:400;font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone);width:16%}
.cmp-dialog td.big{font-family:var(--mono);font-size:var(--h3);letter-spacing:0}
.cmp-dialog .text-link{margin:0}
@media(max-width:900px){.shop-bar{margin-top:28px}.kopen-page .tent-list{margin-top:30px}.cmp-bar{bottom:12px;gap:14px;padding:10px 10px 10px 18px}.cmp-dialog .frame{padding:20px}.cmp-dialog tbody th{width:22%}}
.compare .scroll{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;font-size:var(--body);line-height:1.4}
.compare th,.compare td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);line-height:1.1;padding-bottom:16px}
.compare thead th a{text-decoration:none}
.compare thead th a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.compare tbody th{font-family:var(--mono);font-weight:400;font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone);width:18%}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.steps li{border-top:1px solid var(--ink);padding-top:16px}
.steps .n{display:block;font-family:var(--mono);font-size:var(--label);letter-spacing:0;color:var(--stone);margin:0 0 14px}
.steps h3{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.1;margin:0 0 10px}
.steps p{font-size:var(--body);line-height:1.4;margin:0}
.tent-detail .steps{margin-top:110px}
.tent-detail .steps .sec-title{width:auto;margin:0 0 30px}
.tent-head .lbl{margin:0 0 14px;color:var(--stone)}
.tent .why-list{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--line)}
.tent .why-list li{border-bottom:1px solid var(--line);padding:9px 0;font-size:var(--body);line-height:1.4}
.book.book-price{grid-template-columns:1fr auto;align-items:center;gap:18px 40px}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:80px 0 0}
.why-cards .card{border-top:1px solid var(--ink);padding-top:16px}
.why-cards h2{font-size:var(--h3);font-weight:var(--serif-w);margin:0 0 10px}
.why-cards p{font-size:var(--body);line-height:1.4;margin:0;max-width:34ch}
.incl.specs{margin-top:80px}
.incl .know{margin-top:22px;border-top:0}
.incl .know li{font-size:var(--body)}
.book-price .sum .sub{font-size:13px;color:var(--sand)}
.book-price .cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.book-price .try{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.book-price .try:hover{color:var(--accent)}
.inter.why .panel{grid-template-columns:2fr 3fr}
.inter.why ul{list-style:none;margin:0 0 26px;padding:0}
.inter.why li{font-size:var(--body);line-height:1.4;color:var(--cream);padding:9px 0;border-top:1px solid var(--line-dark);max-width:48ch}
.inter.why li:first-child{border-top:0;padding-top:0}
.kopen-closing{background:var(--ink);color:var(--cream)}
.kopen-closing .gal-end{margin:0 auto;color:var(--cream)}
.kopen-closing .gal-end .sec-title{color:#fff;margin:0 auto 14px}
.kopen-closing .gal-end p{color:var(--cream)}
.kopen-closing .text-link{color:var(--cream)}
@media(max-width:900px){.text-cols{grid-template-columns:1fr;gap:30px;margin-top:40px}.kopen-page>section{margin-top:70px}.steps ol{grid-template-columns:1fr 1fr;gap:28px}.book.book-buy.book-price{grid-template-columns:1fr;gap:16px}.book-price .cta{align-items:stretch}.book-price .try{text-align:center}.why-cards{grid-template-columns:1fr;gap:28px;margin-top:50px}.incl.specs{margin-top:60px}.inter.why .panel{grid-template-columns:1fr}.tent-detail .steps{margin-top:70px}}
@media(max-width:640px){.steps ol{grid-template-columns:1fr}}
/* shop: price line on the card, order panel with the size picker (same dark panel as the booking bar) */
.tent-card .from{font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone);margin:-8px 0 14px}
.shop-group{margin:0}
.shop-group+.shop-group{margin-top:80px}
.shop-group .sec-title{width:auto;margin:60px 0 0}
.shop-group .sec-title+.tent-list{margin-top:30px}
.shop-page .gal-end{margin-top:110px}
.book.book-buy{grid-template-columns:1fr auto auto;align-items:end;gap:18px 40px}
.book-buy .pick{border:0;padding:0;margin:0;min-width:0}
.book-buy legend{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--sand);padding:0;margin:0 0 10px}
.book-buy .opts{display:flex;flex-wrap:wrap;gap:8px}
.book-buy .opt{position:relative;cursor:pointer}
.book-buy .opt input{position:absolute;opacity:0;width:1px;height:1px}
.book-buy .opt span{display:inline-block;padding:8px 14px;border:1px solid rgba(246,239,221,.35);border-radius:9999px;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--cream);transition:background .15s,color .15s,border-color .15s}
.book-buy .opt:hover span{border-color:var(--cream)}
.book-buy .opt input:checked+span{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.book-buy .opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.book-buy .sum{margin:0;display:flex;flex-direction:column;gap:6px}
.book-buy .sum .lbl{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase;color:var(--sand)}
.book-buy .sum b{font-family:var(--mono);font-weight:400;font-size:var(--h3);letter-spacing:0;color:#fff;line-height:1}
.book-buy .go{align-self:end}
@media(max-width:900px){.book.book-buy{grid-template-columns:1fr 1fr}.book-buy .pick{grid-column:1/-1}.book-buy .go{grid-column:1/-1}.book.book-buy.book-price{grid-template-columns:1fr}}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:50px 80px;margin:110px 0 0;padding-top:40px;border-top:1px solid var(--line)}
.incl h2{font-size:var(--h3);font-weight:400;margin:0 0 16px}
.incl ul{list-style:none;margin:0;padding:0}
.incl li{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--body);line-height:1.4}
.incl .mono li{font-family:var(--mono);letter-spacing:0;text-transform:uppercase}
.incl .fine{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--stone)}
.buy-bridge{margin-top:110px}
.soon{margin:110px 0 0}
.soon .sec-title{width:auto;margin:0 0 30px}
.soon .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:80px}
.soon .card .ph{aspect-ratio:1;background:var(--sand);display:flex;align-items:center;justify-content:center;margin:0 0 20px}
.soon .card .ph span{font-family:var(--serif);font-weight:var(--serif-w);font-size:30px;letter-spacing:var(--track-serif);color:var(--stone);opacity:.45}
.soon .card .lbl{margin:0 0 10px;color:var(--stone)}
.soon .card h3{font-size:var(--h3);font-weight:400;margin:0 0 8px}
.soon .card p{font-size:var(--body);line-height:1.4;margin:0 0 18px}
@media(max-width:900px){
  .tents-page{margin-top:10px;width:calc(100% - 80px)}
  .tent{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .tent-gal{--slide:70vw;margin-top:26px}
  .tent-gal .gshot{transform:scale(.85)}   /* smaller shrink, so the next photo still peeks in beside the current one */
  .tent-gal .bar{width:calc(100% - 40px)}
  .book.book-tent{margin-top:24px}
  .book.book-soon{grid-template-columns:1fr}
  .incl,.soon,.buy-bridge{margin-top:70px}
  .tent-list{grid-template-columns:1fr;gap:44px;margin-top:40px}
  .incl{grid-template-columns:1fr;gap:34px;padding-top:30px}
  .soon .cards{grid-template-columns:1fr;gap:40px}
  .soon .card .ph{aspect-ratio:16/9}
}
@media(max-width:640px){.tents-page{width:calc(100% - 40px)}}
/* tent page fine-tuning (Bjorn 2026-10-01). Price: three equal tiles, label above the amount */
.tent .price-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--sans);text-transform:none}
.tent .price-tiles .pt{display:flex;flex-direction:column;gap:6px;padding:14px 0 14px 18px;border-left:1px solid var(--line);font-size:inherit;color:var(--ink)}
.tent .price-tiles .pt:first-child{padding-left:0;border-left:0}
.tent .price-tiles i{font-style:normal;font-family:var(--mono);font-size:var(--label);line-height:1.4;text-transform:uppercase;color:var(--stone)}
.tent .price-tiles b{font-weight:400;font-size:var(--h3);line-height:1.1}
@media(max-width:900px){
  /* booking bar: two dates side by side, persons over the full width, button full width, short note centred */
  .book .field[data-field=personen]{grid-column:1/-1}
  .book .note{text-align:center;line-height:1.45}
  /* under the price: the bar with its button is right above, so no second button; the two links become rows */
  .tent .acts .btn{display:none}
  .tent .acts{display:block;margin-top:4px;border-top:1px solid var(--line)}
  .tent .acts .text-link,.tent .fit-link a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:var(--body);line-height:1.4;text-transform:none;text-decoration:none;color:var(--ink)}
  .tent .acts .text-link::after,.tent .fit-link a::after{content:"\2192";font-size:17px;line-height:1}
  .tent .fit-link{margin:0}
  /* included / to add: readable sans with a check or a plus instead of long mono capitals */
  #daktent .incl li{display:flex;gap:12px;align-items:baseline}
  #daktent .incl .mono li{font-family:var(--sans);text-transform:none}
  #daktent .incl .mono li::before{content:"\2713";flex:0 0 14px;color:var(--ink)}
  #daktent .incl ul:not(.mono) li::before{content:"+";flex:0 0 14px;color:var(--stone)}
  /* rent-first-buy-later panel: as wide as the rest of the page */
  .tents-page .inter{width:100%}
}

/* ---- about page (AutoCamp /about-us, measured 1440): full-bleed hero 760, eyebrow + serif 75/82.5,
   sticky story (image left 50%, text right in a 475 column), team, facts, two closing cards; 130 between sections ---- */
body.page-template-page-over-ons main{padding-top:0}   /* the hero runs up behind the header, like AutoCamp */
.ab{display:flex;flex-direction:column;gap:130px;padding-bottom:130px}
.ab-hero{width:100vw;margin-left:calc(50% - 50vw)}
.ab-hero img{display:block;width:100%;height:min(760px,78vh);object-fit:cover}
.ab-intro{width:min(var(--wide),92%);margin:0 auto}
.ab-intro .lbl{margin:0 0 20px}
.ab-intro .lede{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h1);line-height:1.1;letter-spacing:var(--track-serif);margin:0}
.ab-story{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.ab-story .media{position:sticky;top:0;height:100vh}
.ab-story .media .in{position:relative;width:100%;height:100%}
.ab-story .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.ab-story .media img.on{opacity:1}
/* a wide group photo (copy.php story[].whole) is shown whole when the sticky column gets taller than about 0.85:1 (1024 x 768, 1440 x 900); wider screens keep cover with its pos */
@media(min-width:901px) and (max-aspect-ratio:17/10){.ab-story .media img.whole{object-fit:contain;background:var(--cream)}}
.ab-story .text .block{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.ab-story .text .in{max-width:475px;margin:0 auto;padding:50px 20px}
.ab-story h2{font-size:var(--h2);margin:0 0 20px}
.ab-story p{font-size:var(--lede);line-height:1.4;margin:0 0 20px}
.ab-story .text-link{margin-top:4px}
.ab-facts,.ab-cards{width:min(var(--wide),92%);margin:0 auto}
.ab-facts h2{font-size:var(--h2);margin:0 0 20px}
.ab-facts dl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;border-top:1px solid var(--line)}
.ab-facts dl>div{padding:20px 0 0}
.ab-facts dt{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:0;color:var(--stone);margin:0 0 8px}
.ab-facts dd{font-family:var(--sans);font-size:var(--h3);line-height:1.2;margin:0}
.ab-cards{display:grid;grid-template-columns:1fr 1fr;gap:40px 120px}
.ab-cards .card{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit}
.ab-cards .card img{aspect-ratio:1;width:100%;object-fit:cover;display:block}
.ab-cards .q{font-family:var(--sans);font-size:var(--h3);line-height:1.1;margin:0}
.ab-cards .go{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.ab-cards .card:hover .go{color:var(--accent-ink)}
.ab-extra{width:min(var(--wide),92%);margin:0 auto}
@media(max-width:900px){
  .ab{gap:65px;padding-bottom:65px}
  .ab-hero img{height:56vh}
  .ab-story{grid-template-columns:1fr}
  .ab-story .media{position:static;height:auto}
  .ab-story .media .in{display:none}
  .ab-story .text .block{min-height:0}
  .ab-story .text .in{max-width:none;padding:0 4vw 40px}
  .ab-story .block::before{content:"";display:block;width:auto;aspect-ratio:4/3;background:var(--sand) center/cover no-repeat;background-image:var(--slide-img);margin:0 0 20px}   /* the block has no padding (its .in has), so no negative margin: that stuck out 4vw on both sides */
  .ab-story .block::before{background-position:var(--slide-pos,center)}   /* per-photo focus from copy.php about.story[].pos, as on desktop */
  .ab-cards{grid-template-columns:1fr;gap:40px}
  .ab-facts dl{grid-template-columns:1fr 1fr}
}

/* ---- "Past hij op mijn auto?" (page-past-hij-op-mijn-auto.php): FAQ rhythm, intro + facts left, the tool right;
   on a phone the tool first, the facts under it ---- */
/* the photo above "Past hij op mijn auto?" (Bjorn 2026-11-03: a big photo like AutoCamp's location pages, the Fiat 500 from step 1 of
   /hoe-het-werkt/ coming back); built like .hw-hero, a little lower because the check is what the page is for */
body:has(.fit-hero) main{padding-top:0}   /* the photo runs up behind the header on every size (Bjorn 2026-11-03: no cream band above it on a phone) */
.fit-hero img{display:block;width:100%;height:min(640px,74vh);object-fit:cover;object-position:45% 62%}
.fit-page.has-hero{margin-top:90px}
.fit-page{width:min(var(--wide),92%);margin:0 auto 80px}
.fit-grid{display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"intro main" "facts main";grid-template-rows:auto 1fr;gap:0 60px;align-items:start}
.fit-page .intro{grid-area:intro;font-size:var(--lede);max-width:34ch;color:var(--stone);margin:0 0 30px}
.fit-main{grid-area:main;min-width:0}
.fit-main .rv-fit{margin:0}
.fit-facts{grid-area:facts;margin:0;display:grid;gap:22px;position:sticky;top:120px}
.fit-facts div{border-top:1px solid var(--line);padding-top:14px}
.fit-facts dt{font-family:var(--sans);font-size:15px;font-weight:500;margin:0 0 6px}
.fit-facts dd{margin:0;font-size:14px;line-height:1.5;color:var(--stone)}
.fit-facts a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:1023px){
  .fit-grid{grid-template-columns:1fr;grid-template-areas:"intro" "main" "facts";gap:0}
  .fit-hero img{height:auto;aspect-ratio:11/8;object-position:50% 50%}   /* a touch taller than the photo's 3:2 so the car clears the header (76px); that takes 4% off each side, the bumpers sit at 8% and 90% (Bjorn: the whole car in view) */
  .fit-page.has-hero{margin-top:44px}
  .fit-page .intro{margin-bottom:20px}
  .fit-facts{position:static;margin-top:36px}
}

/* ---- the checker in a dialog over any page (theme.js, [data-fit-open]); the page inside it (?venster=1) is only the tool ---- */
body.embed-fit{background:var(--cream);padding:0!important;margin:0}
body.embed-fit .hdr,body.embed-fit .ticker,body.embed-fit .mobnav,body.embed-fit .wa,body.embed-fit .skip,body.embed-fit .site-footer,body.embed-fit .cky-consent-container,body.embed-fit .cky-btn-revisit-wrapper,body.embed-fit .cky-modal,body.embed-fit .cky-overlay{display:none!important}
body.embed-fit main{padding:18px 20px 28px!important}
@media(max-width:720px){body.embed-fit main{padding:12px 12px 24px!important}}
.fitdlg{border:0;padding:0;margin:auto;width:min(760px,calc(100vw - 40px));height:min(880px,calc(100vh - 40px));max-width:none;max-height:none;background:var(--cream);color:var(--ink);border-radius:var(--radius-lg,12px);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.fitdlg[open]{display:flex;flex-direction:column;animation:lb-in .25s cubic-bezier(0,0,.2,1)}
.fitdlg::backdrop{background:rgba(39,39,39,.6)}
.fitdlg-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 22px;background:var(--ink-2);color:var(--cream)}
.fitdlg-head p{margin:0;font-family:var(--mono);font-size:13px;text-transform:uppercase}
.fitdlg-close:focus:not(:focus-visible){outline:none}
.fitdlg-close{width:44px;height:44px;border:0;border-radius:var(--radius);background:rgba(255,255,255,.16);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fitdlg iframe{flex:1 1 auto;width:100%;border:0;background:var(--cream)}
html.fit-open{overflow:hidden}
@media(max-width:720px){.fitdlg{width:100vw;height:100dvh;height:100vh;border-radius:0;margin:0}}
@media(prefers-reduced-motion:reduce){.fitdlg[open]{animation:none}}
.fit-link{margin:14px 0 0;font-size:14px}
.fit-link a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bk-fit{margin:14px 4px 4px;font-size:14px;text-align:center;color:var(--stone)}
.bk-fit a{color:inherit;text-decoration:underline;text-underline-offset:4px}

/* ---- roadbooks (inc/roadbook.php; redesigned 2026-10-01). Article: the featured photo over the whole first screen,
   behind the header, with crumb, mono facts, serif title and deck on a soft dark fade; the facts on a sand bar over the
   bottom edge of the photo; the route navigation sticky next to the body (desktop), the "Dag ..." headings as stops on
   a thin timeline, "De route in het kort" as a day schedule; closing booking bar; the other roadbooks as cards.
   Archive: label + serif h1 + lede, the newest roadbook as a wide photo with its title on the fade, landscape cards. ---- */
.routes .col h3 a{color:inherit;text-decoration:none}
.routes .col .eyebrow{color:var(--stone);margin:0 0 10px}
body.single-roadbook main{padding-top:0}   /* the photo runs up behind the header */

/* article hero */
.rb-hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:980px;overflow:hidden;background:var(--ink-2);color:var(--cream);display:flex;align-items:flex-end}
.rb-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rb-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(29,26,21,.38) 0%,rgba(29,26,21,0) 22%,rgba(29,26,21,0) 38%,rgba(29,26,21,.8) 100%),linear-gradient(90deg,rgba(29,26,21,.28) 0%,rgba(29,26,21,0) 55%)}
.rb-hero-txt{position:relative;z-index:2;width:min(var(--wide),92%);margin:0 auto;padding:0 0 130px}
.rb-hero .crumb{margin:0 0 22px}
.rb-hero .crumb a{color:var(--cream);font-family:var(--mono);font-size:var(--label);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rb-hero .eyebrow{color:rgba(246,239,221,.85);margin:0 0 18px}
.rb-hero h1{font-size:var(--h1);max-width:14ch;margin:0;color:var(--cream);text-wrap:balance}
.rb-hero .deck{font-family:var(--serif);font-weight:var(--serif-w);font-size:clamp(22px,2.4vw,32px);line-height:1.2;letter-spacing:var(--track-serif);max-width:32ch;margin:22px 0 0;color:rgba(246,239,221,.88)}
.rb-hero.no-photo{height:auto;min-height:0;padding-top:calc(var(--hdr-block) + 60px)}
.rb-hero.no-photo::before{display:none}

/* facts on a sand bar over the bottom edge of the photo */
.rb-facts{position:relative;z-index:3;width:min(var(--wide),92%);margin:-62px auto 0;display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:20px 30px;padding:26px 30px;background:var(--sand);box-sizing:border-box}
.rb-facts div{margin:0}
.rb-facts dt{font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone);margin:0 0 6px}
.rb-facts dd{margin:0;font-size:var(--body);line-height:1.4}

/* route navigation next to the body */
.rb-layout{width:min(var(--wide),92%);margin:70px auto 0}
.rb-layout.has-toc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 70px;align-items:start}
.rb-toc{position:sticky;top:calc(var(--hdr-block) + 40px);padding:4px 0 0}
.rb-toc .lbl{color:var(--stone);margin:0 0 14px}
.rb-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rb-toc li{margin:0}
.rb-toc a{display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:1px solid transparent;color:var(--stone);text-decoration:none;font-size:14px;line-height:1.35;transition:color .15s,border-color .15s}
.rb-toc a span{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;margin:0 0 3px}
.rb-toc a:hover{color:var(--ink)}
.rb-toc a.is-on{color:var(--ink);border-left-color:var(--ink)}

/* legal pages (page-juridisch.php): the roadbook layout with plain, small text */
.lg .rb-layout{margin-top:40px}
.lg .rb-layout{width:100%}
@media (min-width:1101px){.lg .rb-layout.has-toc{grid-template-columns:250px minmax(0,680px)}}
.lg .gal-head h1{font-size:var(--h2)}
.lg .rb-body>p:first-child{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--lede);line-height:1.5;letter-spacing:0}
.lg .rb-body h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);line-height:1.3;letter-spacing:0;margin-top:2.2em}
.lg .rb-body p,.lg .rb-body li{font-size:var(--body);line-height:1.6}
.lg .rb-body p>strong:first-child{font-family:var(--mono);font-weight:400;font-size:var(--label);margin-right:6px}
.lg .rb-body ul{margin:.6em 0 1em}
.lg .rb-body li{margin:.35em 0}
.lg .rb-toc a{padding:6px 0 6px 18px}
.lg .rb-toc{max-height:calc(100vh - var(--hdr-block) - 60px);overflow:auto}
.lg-dl{display:flex;flex-wrap:wrap;gap:6px 24px;margin:18px 0 0}
.lg-inhoud{display:none}
.lg-form{border:1px solid var(--line);padding:20px 24px;margin-top:1em}
/* the body: a 680 column with a timeline */
.rb-body{width:auto;max-width:680px;margin:0}
.rb-layout:not(.has-toc) .rb-body{margin:0 auto}
.rb-body>p:first-child{font-family:var(--serif);font-weight:var(--serif-w);font-size:clamp(21px,2vw,25px);line-height:1.4;letter-spacing:var(--track-serif)}
.rb-body h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h2);line-height:1.1;letter-spacing:var(--track-serif);margin-top:1.5em;scroll-margin-top:calc(var(--hdr-block) + 40px)}
.rb-body h3{font-family:var(--sans);font-size:var(--h3);font-weight:var(--sans-w);line-height:1.4;letter-spacing:0;margin-top:1.4em}
.rb-body p,.rb-body li{font-size:var(--lede);line-height:1.6}
.rb-body .rb-day{position:relative;padding-top:2.2em;border-top:1px solid var(--line);margin-top:2.2em}
.rb-body .rb-day-n{display:inline-block;font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;background:var(--sand);padding:5px 10px;border-radius:9999px;margin:0 0 14px;vertical-align:top}
.rb-body .rb-day-n{display:table}
.rb-body .rb-summary-h{margin-top:1.6em}
.rb-body .rb-schedule{list-style:none;padding:6px 24px;margin:1em 0 0;background:var(--sand)}
.rb-body .rb-schedule li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(29,26,21,.12);margin:0;font-size:var(--body);line-height:1.45}
.rb-body .rb-schedule li:last-child{border-bottom:0}
.rb-body .rb-schedule strong{font-family:var(--mono);font-weight:400;font-size:var(--label);text-transform:uppercase;padding-top:2px}
.rb-body figure{margin:2.2em 0}
.rb-body .rb-photo{margin:2.6em 0}
.rb-body img{width:100%;height:auto;display:block}
.rb-body figcaption{font-family:var(--mono);font-size:var(--label);letter-spacing:0;text-transform:uppercase;color:var(--stone);margin-top:10px}
.rb-body .rb-tip{background:var(--sand);padding:26px 30px;margin:1.8em 0}
.rb-body .rb-tip>*+*{margin-top:.8em}
.rb-body .rb-tip h3{margin-top:0;font-family:var(--mono);font-size:var(--label);text-transform:uppercase}
.rb-body .rb-tip p,.rb-body .rb-tip li{font-size:var(--body)}
.rb-body blockquote{border:0;margin:1.8em 0;padding:0 0 0 24px;border-left:2px solid var(--ink);font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h2);line-height:1.15;letter-spacing:var(--track-serif)}
.rb-body .rb-note{margin:3.2em 0 0;padding:22px 0 0;border-top:1px solid var(--line)}   /* publication date + "Let op" under the text (Tom 2026-11-10) */
.rb-body .rb-note-date{display:block;font-family:var(--mono);font-size:var(--label);line-height:1.4;letter-spacing:0;text-transform:uppercase;color:var(--stone);margin:0 0 8px}
.rb-body .rb-note p{font-size:13px;line-height:1.5;color:var(--stone);margin:0}
.rb-body blockquote p{font-size:inherit;line-height:inherit}
.rb-go{margin-top:120px}
.rb-go .rb-go-text{font-family:var(--sans);font-size:var(--lede);line-height:1.4;margin-top:-10px;color:var(--stone)}
.rb-more{width:min(var(--wide),92%);margin:120px auto 0}
.rb-more .sec-title{width:100%;margin-left:0}
.rb-all{margin:40px 0 0}

/* archive */
.rb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px 50px;margin:70px 0 0}
.rb-grid.is-two{grid-template-columns:repeat(2,1fr)}
.rb-card{display:flex;flex-direction:column}
.rb-card .img{display:block;overflow:hidden;background:var(--sand);order:-1;margin:0 0 20px}
.rb-card .img img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rb-card .img:hover img{transform:scale(1.03)}
.rb-card .eyebrow{color:var(--stone);margin:0 0 10px}
.rb-card h3{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);font-weight:var(--serif-w);line-height:1.15;letter-spacing:var(--track-serif);margin:0 0 12px}
.rb-card h3 a{color:inherit;text-decoration:none}
.rb-card p{font-size:var(--body);line-height:1.5;margin:0 0 18px;max-width:52ch}
/* roadbook archive = AutoCamp /journal (measured 2026-10-03 at 1440 / 390): photo 450 high over the full width behind the
   header, pill 40 from its bottom; facts, serif title 45/49.5, text 15/21 and link 20 / 20 / 25 apart; heading serif 75
   150 lower; filter row 150 lower (label column 118, search on a 1 px line); cards 340 wide, 80 apart, square photo,
   then 20 / 20 / 20 / 20 between facts, sans title 25/27.5, text and link; rows 80 apart. Phone: gutter 40, title 35/38.5,
   heading 40/44, gaps 70, cards stacked 50 apart with a 16:9 photo, filter folded behind "Filter". */
body.post-type-archive-roadbook main{padding-top:0}   /* the photo runs up behind the header */
.rbj-in{width:calc(100% - 100px);max-width:1180px;margin:0 auto}
@media(min-width:1536px){.rbj-in{max-width:1436px}}
.rbj-nofeat{padding-top:calc(var(--tick) + var(--hdr-block) + 80px)}
.rbj-hero{position:relative;height:450px;overflow:hidden;background:var(--sand)}
.rbj-hero .media{position:absolute;inset:0;display:block}
.rbj-hero img{width:100%;height:100%;object-fit:cover;display:block}
.rbj-hero .rbj-in{position:absolute;left:0;right:0;bottom:40px;pointer-events:none}
.rbj-flag{display:inline-flex;align-items:center;height:27px;box-sizing:border-box;padding:0 20px;border:1px solid var(--ink);border-radius:9999px;background:var(--cream);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:0}
.rbj-feat{margin:20px 0 0;max-width:460px}
.rbj-facts{font-family:var(--mono);font-size:var(--label);line-height:1.4;text-transform:uppercase;letter-spacing:0;color:var(--ink);margin:0}
.rbj-feat .rbj-facts{margin:0 0 14px}
.rbj-feat h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:-.05em;margin:0}
.rbj-feat h2 a,.rbj-card h3 a{color:inherit;text-decoration:none}
.rbj-text{font-size:var(--body);line-height:1.4;margin:20px 0 0}
.rbj-feat .text-link{display:inline-block;margin-top:25px}
.rbj-title{font-family:var(--serif);font-weight:var(--serif-w);font-size:75px;line-height:1.1;letter-spacing:-.05em;margin:150px 0 0}
.rbj-filter{margin:150px 0 0}
.rbj-bar{display:grid;grid-template-columns:118px 1fr;align-items:end}
.rbj-toggle{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0;font:inherit;font-size:var(--body);line-height:1;color:var(--ink);cursor:pointer;justify-self:start}
.rbj-toggle svg{transition:transform .15s}
.rbj-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.rbj-search input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font:inherit;font-size:var(--body);line-height:1.2;color:var(--ink);padding:0 0 2px;outline:none;-webkit-appearance:none;appearance:none}
.rbj-search input::placeholder{color:var(--stone);opacity:.8}
.rbj-search input:focus{border-bottom-color:var(--accent-ink)}
.rbj-opts{margin:20px 0 0;display:flex;flex-direction:column;gap:20px}
.rbj-group{display:grid;grid-template-columns:118px 1fr;align-items:baseline}
.rbj-glbl{font-size:var(--body);line-height:1}
.rbj-choices{display:flex;flex-wrap:wrap;gap:12px 20px}
.rbj-choices button{background:none;border:0;padding:0;font:inherit;font-size:var(--body);line-height:1;color:var(--ink);cursor:pointer;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.rbj-choices button.is-on,.rbj-choices button:hover{text-decoration:underline}
.rbj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:80px;margin:50px 0 0}
.rbj-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rbj-card[hidden]{display:none}
.rbj-card .img{display:block;width:100%;overflow:hidden;background:var(--sand);margin:0 0 20px}
.rbj-card .img img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rbj-card .img:hover img{transform:scale(1.03)}
.rbj-card h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);line-height:1.1;letter-spacing:0;margin:20px 0 0}
.rbj-card .text-link{margin-top:20px}
.rbj-none{margin:50px 0 0;color:var(--stone)}
@media(min-width:901px){.rbj-toggle{pointer-events:none;cursor:default}.rbj-toggle svg{display:none}}   /* desktop: options always open, Filter is a label (AutoCamp) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){
  .rbj-in{width:calc(100% - 80px)}
  .rbj-hero .rbj-in{width:calc(100% - 80px)}
  .rbj-feat h2{font-size:35px}
  .rbj-feat .rbj-facts{margin-bottom:12px}
  .rbj-title{font-size:40px;margin-top:70px}
  .rbj-filter{margin-top:70px}
  .rbj-bar{grid-template-columns:130px 1fr}
  .rbj-opts{display:none;flex-direction:row;gap:30px;margin-top:30px}
  .rbj-filter.open .rbj-opts{display:grid;grid-template-columns:1fr 1fr}
  .rbj-group{grid-template-columns:1fr;row-gap:12px}
  .rbj-choices{flex-direction:column;gap:12px}
  .rbj-grid{grid-template-columns:1fr;gap:50px}
  .rbj-card .img img{aspect-ratio:16/9}
}
.rb-empty{margin:60px 0 0;color:var(--stone)}
.rb-closing{margin-top:120px}
@media(max-width:1100px){
  .rb-layout.has-toc{grid-template-columns:1fr}
  .rb-toc{display:none}
  .lg-inhoud{display:block;margin:24px 0 0;background:var(--sand);padding:14px 20px}
  .lg-inhoud summary{cursor:pointer;font-family:var(--mono);font-size:var(--label);text-transform:uppercase}
  .lg-inhoud ol{list-style:none;margin:12px 0 0;padding:0}
  .lg-inhoud li{margin:0}
  .lg-inhoud a{display:block;padding:7px 0;font-size:14px}
}
@media(max-width:1023px){
  .rb-hero{height:82vh;height:82svh;min-height:520px}
  .rb-hero-txt{width:calc(100% - 40px);padding-bottom:40px}
  .rb-hero .deck{font-size:20px}
  .rb-facts{margin-top:0;width:100%;grid-template-columns:repeat(2,1fr);gap:16px 20px;padding:22px 20px}
  .rb-facts div:first-child{grid-column:1/-1}
  .rb-layout{width:calc(100% - 40px);margin-top:40px}
  .rb-body .rb-schedule{padding:4px 18px}
  .rb-body .rb-schedule li{grid-template-columns:1fr;gap:4px}
  .rb-body .rb-tip{padding:22px 20px}
  .rb-go{margin-top:80px}
  .rb-more{width:calc(100% - 40px);margin-top:80px}
  .rb-grid,.rb-grid.is-two{grid-template-columns:1fr;gap:44px;margin-top:50px}
}

/* ---- Hoe het werkt (page-hoe-het-werkt.php, 2026-10-04): AutoCamp location page + "3 days in" itinerary, measured at 1440 and 390.
   Hero 760 high behind the header, booking bar over its lower edge; label mono + serif 75/82.5 + lede 25/35 (704 wide), 20 px apart;
   amenity grids: title sans 25 centred, 50 px lower items of 200 wide, 40/20 gap, icon 37 + 20 + mono 15/21 (phone: 140 wide, mono 11/15.4);
   facts: sand block from the left content edge to the right screen edge, photo left half, rows with a small icon (label column 253);
   statement serif 75 (phone 40); 130 px between sections (phone 65). ---- */
body:has(.hw-hero) main{padding-top:0}
.hw{--hw-w:min(1180px,calc(100% - 80px));padding-bottom:0}
.hw .ico *{vector-effect:non-scaling-stroke}
.hw-hero img{display:block;width:100%;height:min(760px,84vh);object-fit:cover;object-position:50% 45%}
.hw-intro,.hw-steps,.hw-amen,.hw-quote{width:var(--hw-w);margin:130px auto 0}
.hw-intro .lbl{margin:0 0 20px;font-size:var(--label);font-weight:400}
.hw-title{font-family:var(--serif);font-weight:var(--serif-w);font-size:75px;line-height:1.1;letter-spacing:-.05em;margin:0 0 20px;text-wrap:balance}
.hw-lede{font-size:25px;line-height:1.4;max-width:704px;margin:0}
.hw-steps h2,.hw-amen h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:25px;line-height:1.1;letter-spacing:0;text-align:center;margin:0 0 50px}
.hw-grid{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 20px;max-width:1080px}
.hw-grid li{width:200px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hw-grid li>a{display:flex;flex-direction:column;align-items:center;color:inherit;text-decoration:none}
.hw-grid .ico{display:block;width:46px;height:46px;flex:0 0 auto}   /* AutoCamp draws 37 px icons edge to edge; ours keep some air inside the 48 grid, so 46 px looks the same size (compared side by side 2026-10-05) */
.hw-grid span{margin-top:20px;font-family:var(--mono);font-size:15px;line-height:21px;text-transform:uppercase;letter-spacing:0}
.hw-grid small{display:block;font-size:13px;line-height:18px;color:var(--stone);text-transform:none;margin-top:4px}
.hw-grid a:hover span{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hw-grid a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* What is in a bundle (roovtop_bundle_pop, Bjorn 2026-10-10): a small dark card above the item on hover, keyboard
   focus or a tap, in the style of the dropdowns of the booking bar; the parts with their icons and the saving */
.hw-grid li.has-pop{position:relative}
.hw-pop-btn{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.hw-pop-btn:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.hw-pop-hint{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1;font-style:normal;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.hw-pop{position:absolute;z-index:20;left:50%;bottom:calc(100% + 14px);width:260px;padding:18px 20px 16px;background:var(--ink-2);color:var(--cream);text-align:left;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);transform:translate(calc(-50% + var(--shift,0px)),0);display:none}
.hw-pop::after{content:"";position:absolute;left:calc(50% - var(--shift,0px));bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--ink-2);transform:rotate(45deg)}
/* hidden = display:none, so a card off to the side never makes the page scroll sideways; it fades in when it opens */
.has-pop:hover .hw-pop,.has-pop:focus-within .hw-pop,.has-pop.is-open .hw-pop{display:block;animation:hwpop .18s ease-out}
@keyframes hwpop{from{opacity:0;margin-bottom:-8px}}
.hw-pop .lbl{margin:0 0 12px;font-family:var(--mono);font-size:11px;line-height:1.3;text-transform:uppercase;color:var(--stone-light)}
.hw-pop ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hw-grid .hw-pop li{display:flex;align-items:center;gap:12px;width:auto;flex-direction:row;text-align:left}
.hw-grid .hw-pop .ico{width:28px;height:28px;flex:0 0 28px}
.hw-grid .hw-pop li span{margin:0;font-family:var(--sans);font-size:15px;line-height:1.3;text-transform:none;white-space:nowrap}
/* too little room above (a fixed header on a phone): the card opens below the item */
.has-pop.below .hw-pop{bottom:auto;top:calc(100% + 14px)}
.has-pop.below .hw-pop::after{bottom:auto;top:-7px}
.hw-pop .save{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-dark);font-size:13px;line-height:1.4;color:var(--sand)}
.hw-extra-title{margin-top:110px!important}
.hw-note{text-align:center;color:var(--stone);font-size:15px;margin:40px auto 0;max-width:46ch}
/* the steps: the about page's sticky story (photo left, text right), with the itinerary's sub heads */
.hw-story{margin-top:130px}
.hw-story .block{scroll-margin-top:0}
.hw-story .text .in{max-width:475px}
.hw-story .lbl{margin:0 0 14px;color:var(--stone)}
.hw-story h2{font-size:45px;line-height:1.1;margin:0 0 30px}
.hw-story h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:20px;line-height:1.1;letter-spacing:0;margin:26px 0 10px}
.hw-story h2+h3{margin-top:0}
.hw-story p{font-size:15px;line-height:21px;margin:0}
.hw-story .text-link{display:inline-block;margin-top:30px}
.hw-facts{display:grid;grid-template-columns:1fr 1fr;margin:130px 0 0 max(40px,calc((100% - 1180px)/2));background:var(--sand);min-height:533px}
.hw-facts img{display:block;width:100%;height:100%;object-fit:cover}
.hw-facts .panel{display:flex;align-items:center;padding:60px 50px 60px 75px}
.hw-facts dl{display:grid;grid-template-columns:253px 1fr;gap:20px 0;margin:0;width:100%;max-width:530px}
.hw-facts dl>div{display:contents}
.hw-facts dt,.hw-facts dd{font-family:var(--mono);font-size:15px;line-height:21px;text-transform:uppercase;letter-spacing:0;margin:0}
.hw-facts dt{display:flex;align-items:flex-start;gap:10px}
.hw-facts dt .ico{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.hw-facts dd a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hw-quote{margin-top:130px}
.hw-quote blockquote{margin:0}
.hw-quote p{font-family:var(--serif);font-weight:var(--serif-w);font-size:75px;line-height:1.1;letter-spacing:-.05em;margin:0;text-wrap:balance}
.hw-quote figcaption{margin-top:30px}
.hw-faq{margin-top:130px;width:var(--hw-w)}
.hw-faq .group{border-top:0;padding:0}
.hw-faq .group>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hw-closing{margin-top:130px}
@media(max-width:1100px){.hw-facts dl{grid-template-columns:180px 1fr}.hw-facts .panel{padding:50px 40px}}
@media(max-width:900px){
  .hw-hero img{height:72svh;object-position:50% 45%}
  .hw-intro,.hw-steps,.hw-amen,.hw-quote,.hw-story,.hw-facts,.hw-faq,.hw-closing{margin-top:65px}
  .hw-title{font-size:40px}
  .hw-lede{font-size:20px}
  .hw-steps h2,.hw-amen h2{font-size:20px;margin-bottom:40px}
  .hw-grid{gap:30px 10px}
  .hw-grid li{width:140px}
  .hw-grid span{font-size:11px;line-height:15.4px}
  .hw-grid .ico{width:42px;height:42px}
  .hw-grid small{font-size:11px;line-height:15px}
  .hw-extra-title{margin-top:70px!important}
  .hw-story .text .in{max-width:none;padding:0 20px 50px}
  .hw-story .block::before{margin:0 0 24px;background-position:var(--slide-pos,center)}
  .hw-story h2{font-size:35px;margin-bottom:24px}
  .hw-story p{font-size:14px;line-height:19.6px}
  .hw-facts{grid-template-columns:1fr;margin-left:40px;min-height:0}
  .hw-facts img{height:285px}
  .hw-facts .panel{padding:40px 20px}
  .hw-facts dl{grid-template-columns:1fr;gap:6px 0}
  .hw-facts dd{margin-bottom:14px}
  .hw-facts dt,.hw-facts dd{font-size:13px;line-height:18.2px}
  .hw-quote p{font-size:40px}
}

/* ---- Icon grids on the tent pages (2026-10-05, Bjorn: less text, more telling; same idiom as /hoe-het-werkt/ and AutoCamp's
   amenities): roovtop_icon_grid() in functions.php. Items 200 wide, 40/20 gap, icon 46 + 20 + mono 15/21; --per items per row.
   .specs: the value in sans (units stay lower case), the label small in mono under it. ---- */
.icon-grid{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 20px;max-width:calc(var(--per,5) * 200px + (var(--per,5) - 1) * 20px)}
.icon-grid li{width:200px;display:flex;flex-direction:column;align-items:center;text-align:center}
.icon-grid .ico{display:block;width:46px;height:46px;flex:0 0 auto}
.icon-grid .ico *{vector-effect:non-scaling-stroke}
.icon-grid span{margin-top:20px;font-family:var(--mono);font-size:15px;line-height:21px;text-transform:uppercase;letter-spacing:0}
.icon-grid small{display:block;font-size:13px;line-height:18px;color:var(--stone);text-transform:none;margin-top:4px}
.icon-grid.specs span{font-family:var(--sans);font-size:20px;line-height:1.2;text-transform:none}
.icon-grid.specs small{font-family:var(--mono);font-size:13px;line-height:18px;text-transform:uppercase;margin-top:6px}
.tent-specs,.tent-amen{margin:110px 0 0}
.tent-specs h2,.tent-amen h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:25px;line-height:1.1;letter-spacing:0;text-align:center;margin:0 0 50px}
.tent-amen .tent-extra-title{margin-top:110px}
.tent-amen-note{text-align:center;color:var(--stone);font-size:15px;margin:40px auto 0;max-width:46ch}
.tent-service{margin-top:80px}
.tent-notes{max-width:640px;margin:50px auto 0;text-align:center}
.tent-notes .lbl{color:var(--stone);margin:0 0 10px}
.tent-notes ul{list-style:none;margin:0;padding:0}
.tent-notes li{font-size:15px;line-height:1.5;margin:0 0 6px}
.tent-notes b{font-weight:400;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0;color:var(--stone)}
.tent-notes a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tent-notes .fit-link{margin-top:20px}
.tent.tent-price{display:block;max-width:640px;margin:110px auto 0;text-align:center}
.tent-price .price-tiles{text-align:left}
.tent-price .fine{margin-left:auto;margin-right:auto}
.tent-price .acts{justify-content:center}
@media(max-width:900px){
  .tent-specs,.tent-amen,.tent.tent-price{margin-top:65px}
  .tent-service{margin-top:50px}
  .tent-specs h2,.tent-amen h2{font-size:20px;margin-bottom:36px}
  .tent-amen .tent-extra-title{margin-top:70px}
  .icon-grid{gap:30px 10px;max-width:none}
  .icon-grid li{width:140px}
  .icon-grid .ico,.spec-row svg{width:42px;height:42px}
  .icon-grid span{font-size:11px;line-height:15.4px}
  .icon-grid small{font-size:11px;line-height:15px}
  .icon-grid.specs span{font-size:17px}
  .icon-grid.specs small{font-size:11px;line-height:15px}
  .tent.tent-price{text-align:left}
  .tent-price .acts{justify-content:flex-start}
}

/* ---- Wayfinder: our own dropdown instead of the browser's (2026-10-05, Bjorn: "dropdowns in stijl"). theme.js keeps the
   native select (works without JS, carries the value) and puts a button + listbox in the sentence; the list is the booking
   bar's dark menu: --ink-2, sans 18, the chosen option in yellow. ---- */
.wf .wf-sel{position:relative;display:inline-block;vertical-align:baseline}
.wf .wf-native{position:absolute;left:0;top:0;width:1px!important;height:1px;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden}   /* fit() still sets an inline width */
.wf .pick{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 0 2px;margin:0;text-transform:lowercase;cursor:pointer;display:inline-flex;align-items:center;gap:.28em;text-align:left}
.wf .pick svg{width:.4em;height:.4em;flex:0 0 auto;transition:transform .2s ease}
.wf .pick[aria-expanded=true] svg{transform:rotate(180deg)}
.wf .pick:hover{border-bottom-color:var(--accent-ink)}
.wf .pick:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wf .wf-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:30;list-style:none;margin:0;padding:8px 0;min-width:100%;background:var(--ink-2);color:#fff;border-radius:var(--radius);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);outline:none}
.wf .wf-menu[hidden]{display:none}
.wf .wf-menu li{padding:10px 22px;font-family:var(--sans);font-weight:var(--sans-w);font-size:18px;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}
.wf .wf-menu li:hover,.wf .wf-menu li.is-active{background:rgba(246,239,221,.08)}
.wf .wf-menu li[aria-selected=true]{color:var(--accent)}

/* ---- Tent pages, rent + buy (inc/product.php, rebuilt 2026-10-05 after AutoCamp /accommodation/... measured at 1440 and
   390, and the Baymard product page research). Hero: left half cream with title serif 75/82.5 and the facts as a dash
   list 15/21 (max 525), right half the photo (720 x 765 at 1440) up behind the header; the booking panel (885) over the
   lower edge. Then: photos, highlights (image + headline + paragraph, alternating), specs as icons, a sand panel with the
   lists and a photo (from the content edge to the screen edge, 582 high), price + terms, reviews, other tents.
   Phone: the photo first (4:3, as AutoCamp 390 x 293), then title 40/44 and the list 14/19.6. ---- */
body:has(.pd-hero) main{padding-top:0}
body:has(.pd-hero){--pd-w:min(1180px,calc(100% - 80px));--pd-edge:max(40px,calc((100% - 1180px) / 2))}
.pd-hero{display:grid;grid-template-columns:1fr 1fr;min-height:765px}
.pd-copy{padding:140px 60px 150px var(--pd-edge);display:flex;flex-direction:column;align-items:flex-start}
.pd .crumb{margin:0 0 26px}
.pd-hero h1{font-family:var(--serif);font-weight:var(--serif-w);font-size:75px;line-height:1.1;letter-spacing:-.05em;margin:0 0 24px;max-width:560px;text-wrap:balance}
.pd-list{list-style:none;margin:0;padding:0;max-width:525px}
.pd-list li{position:relative;padding-left:16px;font-size:15px;line-height:21px}
.pd-list li::before{content:"-";position:absolute;left:0;top:0}
.pd-prices{font-family:var(--mono);font-size:15px;line-height:21px;text-transform:uppercase;letter-spacing:0;margin:26px 0 0}
.pd-copy .fit-link{margin-top:14px}
.pd-media{position:relative;min-height:100%;background:var(--sand);overflow:hidden}
.pd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pd-media.fit{background:var(--cream)}
/* a studio shot that is cut off at its right and bottom edge (home-darche-1500: the tent starts at 30% of the canvas width and 28% of
   its height): pinned to the bottom-right corner and drawn wider than the box, so the empty cream left and top fall away and the
   tent fills about 95% of the width; the cut edges run into the corner of the screen */
.pd-media.fit img{inset:auto 0 0 auto;width:136%;height:auto;max-width:none;object-fit:fill}
.book.pd-book{position:relative;z-index:5;width:min(885px,calc(100% - 80px));margin:-86px auto 0!important}
.pd-buybox{width:100%;max-width:525px;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.pd-buybox .sum{margin:0 0 16px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.pd-buybox .sum b{font-family:var(--sans);font-weight:var(--sans-w);font-size:35px;line-height:1}
.pd-buybox .sum span{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0;color:var(--stone)}
.pd-buybox .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.pd-buybox .note{font-size:13px;color:var(--stone);margin:14px 0 0}
/* size pills on the accessory page (light, the dark .book-buy versions stay for nothing else) */
.pd-buybox .pick{border:0;padding:0;margin:0 0 18px;min-width:0}
.pd-buybox .pick legend{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0;color:var(--stone);padding:0;margin:0 0 10px}
.pd-buybox .opts{display:flex;flex-wrap:wrap;gap:8px}
.pd-buybox .opt{position:relative;cursor:pointer}
.pd-buybox .opt input{position:absolute;opacity:0;width:1px;height:1px}
.pd-buybox .opt span{display:inline-block;padding:8px 16px;border:1px solid var(--ink);border-radius:9999px;font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:uppercase}
.pd-buybox .opt:hover span{background:var(--sand)}
.pd-buybox .opt input:checked+span{background:var(--ink);color:var(--cream)}
.pd-buybox .opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
/* "In winkelwagen" before a size is chosen: the open rows get a heavier outline and a line says what to pick */
.pd-buybox .pick.need legend{color:var(--ink)}
.pd-buybox .pick.need .opt span{box-shadow:0 0 0 1px var(--ink)}
.pd-buybox .sh-pick-hint{font-size:14px;line-height:1.4;margin:-8px 0 18px;padding-left:16px;position:relative}
.pd-buybox .sh-pick-hint::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:#d98a00}
.pd-buy .pd-copy{padding-bottom:110px}
.pd .pd-gal{margin-top:130px}
.pd-buy .pd-gal{margin-top:110px}
.pd-sec-title{font-family:var(--sans);font-weight:var(--sans-w);font-size:25px;line-height:1.1;letter-spacing:0;text-align:center;margin:0 0 40px}
.pd-hl{width:var(--pd-w);margin:130px auto 0;display:flex;flex-direction:column;gap:100px}
.pd-hl-row{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:center}
.pd-hl-row.flip{grid-template-columns:5fr 7fr}
.pd-hl-row.flip .pd-hl-img{order:2}
.pd-hl-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.pd-hl-img img{display:block;width:100%;height:100%;object-fit:cover}
.pd-hl-img.fit{background:var(--cream)}
.pd-hl-img.fit img{object-fit:contain}
.pd-hl-txt h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:-.05em;margin:0 0 20px}
.pd-hl-txt p{font-size:15px;line-height:21px;margin:0;max-width:420px}
.pd .tent-specs{margin-top:130px}
.pd-panel{display:grid;grid-template-columns:1fr 1fr;margin:130px 0 0 var(--pd-edge);background:var(--sand);min-height:582px}
.pd-panel-txt{padding:80px 60px 80px 100px;display:flex;flex-direction:column;justify-content:center}
.pd-panel h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:-.05em;margin:0 0 10px}
.pd-panel h3{font-family:var(--mono);font-weight:400;font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:0;color:var(--stone);margin:26px 0 8px}
.pd-priced li{display:flex;justify-content:space-between;gap:20px;max-width:420px}
.pd-priced b{font-weight:400;font-family:var(--mono);font-size:13px;color:var(--stone);white-space:nowrap}
.pd-fine{font-size:13px;line-height:1.45;color:var(--stone);margin:18px 0 0;max-width:420px}
.pd-fine a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pd-panel-img{position:relative;min-height:320px}
.pd-panel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pd-price{width:var(--pd-w);margin:130px auto 0;display:grid;grid-template-columns:4fr 7fr;gap:40px 80px;align-items:start}
.pd-price h2,.pd-sheet h2,.pd-more h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:-.05em;margin:0}
.pd .pd-price .tent{display:block;margin:0}
.pd-terms{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin:26px 0 0}
.pd-terms div{border-top:1px solid var(--line);padding-top:12px}
.pd-terms dt{font-family:var(--mono);font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:0;color:var(--stone);margin:0 0 4px}
.pd-terms dd{font-size:15px;line-height:21px;margin:0}
.pd-price .acts{margin-top:30px}
.pd-soon{font-size:15px;line-height:21px;margin:0;max-width:52ch}
.pd-sheet{width:var(--pd-w);margin:130px auto 0;display:grid;grid-template-columns:4fr 8fr;gap:40px 80px}
.pd-sheet-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 40px}
.pd-sheet h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:20px;line-height:1.2;letter-spacing:0;margin:0 0 12px}
.pd-sheet dl{margin:0}
.pd-sheet dl div{border-top:1px solid var(--line);padding:10px 0}
.pd-sheet dt{font-family:var(--mono);font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:0;color:var(--stone)}
.pd-sheet dd{margin:2px 0 0;font-size:17px;line-height:1.3}
.pd-more{width:var(--pd-w);margin:130px auto 0;padding-bottom:20px}
.pd-more h2{margin-bottom:40px}
.pd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:50px 60px}
.pd-card .img{display:block;aspect-ratio:1;background:var(--sand);padding:6%;box-sizing:border-box;margin:0 0 20px}
.pd-card .img img{display:block;width:100%;height:100%;object-fit:contain}
.pd-card .lbl{margin:0 0 8px;color:var(--stone)}
.pd-card h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:25px;line-height:1.1;letter-spacing:0;margin:0 0 12px}
.pd-card h3 a{color:inherit;text-decoration:none}
.pd-card h3 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pd-card .txt{font-size:15px;line-height:21px;margin:0 0 16px}
.pd ~ .reviews{margin-top:130px}
@media(max-width:1100px){
  .pd-hero h1{font-size:60px}
  .pd-copy{padding-right:40px}
  .pd-panel-txt{padding:60px 40px}
}
@media(max-width:900px){
  .pd-hero{grid-template-columns:1fr;min-height:0}
  .pd-media{order:-1;aspect-ratio:4/3;min-height:0}
  /* phone: the whole tent under the header blocks (Bjorn 2026-10-05): a taller box, the photo a little wider than the screen, the tent in the corner */
  .pd-media.fit{aspect-ratio:1/.87}   /* 340 high at 390, grows with the width so a tablet keeps the same picture */
  .pd-media.fit img{width:108%}
  .pd-copy{padding:36px 40px 0}
  .pd-hero h1{font-size:40px;line-height:1.1;margin-bottom:20px}
  .pd-list li{font-size:14px;line-height:19.6px}
  .book.pd-book{width:calc(100% - 60px);margin:36px auto 0!important}
  .pd-buy .pd-copy{padding-bottom:0}
  .pd .pd-gal,.pd-buy .pd-gal,.pd-hl,.pd .tent-specs,.pd-panel,.pd-price,.pd-sheet,.pd-more,.pd ~ .reviews{margin-top:65px}
  .pd-sec-title{font-size:20px;margin-bottom:26px}
  .pd-hl{gap:56px}
  .pd-hl-row,.pd-hl-row.flip{grid-template-columns:1fr;gap:22px}
  .pd-hl-row.flip .pd-hl-img{order:0}
  .pd-hl-txt h2{font-size:35px;margin-bottom:14px}
  .pd-hl-txt p{font-size:14px;line-height:19.6px}
  .pd-panel{grid-template-columns:1fr;margin-left:40px;min-height:0}
  .pd-panel-img{order:-1;min-height:0;height:285px}
  .pd-panel-txt{padding:36px 20px 40px}
  .pd-panel h2,.pd-price h2,.pd-sheet h2,.pd-more h2{font-size:35px}
  .pd-price,.pd-sheet{grid-template-columns:1fr;gap:20px}
  .pd-terms{grid-template-columns:1fr;gap:12px}
  .pd-sheet-groups{grid-template-columns:1fr;gap:24px}
  .pd-cards{grid-template-columns:1fr;gap:44px}
  .pd-card .img{aspect-ratio:16/9}
}

/* Shop plugin pages (/kopen/, 2026-10-06): product, category, shop home. Built on the buy page (pd-*) and the
   tent cards; only what is new is here. Supplier studio photos have a cream background (treated on import), so
   they sit on cream and are shown whole; lifestyle photos fill their frame. */
.sh-product .pd-media.sh-studio{background:var(--cream)}
.sh-product .pd-media.sh-studio img{object-fit:contain;padding:110px 6% 40px;box-sizing:border-box}
.sh-lede{font-size:var(--body);line-height:1.4;max-width:525px;margin:0}
.pd-buybox .sum s{font-family:var(--sans);font-size:20px;color:var(--stone)}
.pd-buybox .opt.is-na span{opacity:.35;text-decoration:line-through}
.sh-avline{margin:0 0 6px}
.sh-av{display:inline-flex;align-items:baseline;gap:9px;font-size:15px;line-height:1.35}
.sh-av i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--stone);transform:translateY(-1px)}
.sh-av-own i,.sh-av-orderable i{background:#2f7d32}
.sh-av-last i,.sh-av-expected i{background:#d98a00}
.sh-av-out i{background:transparent;border:1px solid var(--stone)}
.sh-pay{font-size:13px;color:var(--stone);margin:0 0 16px;min-height:0}
.sh-pay:empty{display:none}
.sh-desc{width:min(760px,calc(100% - 80px));margin:110px auto 0;font-size:var(--body);line-height:1.5}
.sh-desc p{margin:0 0 1em}
.sh-fits{width:var(--pd-w);margin:110px auto 0}
.sh-fits h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--h2);letter-spacing:var(--track-serif);margin:0 0 24px}
.sh-fits ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sh-fits a,.sh-subs a,.sh-subs span{display:inline-block;padding:8px 16px;border:1px solid var(--ink);border-radius:9999px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:0;text-decoration:none;color:var(--ink)}
.sh-fits a:hover,.sh-subs a:hover{background:var(--sand)}
.sh-subs{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0}
.sh-subs span[aria-current]{background:var(--ink);color:var(--cream)}
/* shop cards = the old buy overview (2026-10-09): the card photo is already square on sand with the product centred */
.sh-card .media.is-card,.sh-card .media.cover{padding:0}
.sh-card .media.cover img{object-fit:cover}
.sh-card .media .ph{display:block;width:100%;height:100%;background:var(--sand)}
.sh-card .media img{transition:transform .4s ease}
.sh-card .media:hover img{transform:scale(1.03)}
.kopen-page .sh-card p.sh-cardav{margin:-6px 0 14px}
.sh-card .sh-av{font-size:13px;line-height:1.35}
.sh-card[hidden],.sh-card.is-hidden{display:none}
.card-acts{position:relative}
.pill.add.ghost{background:transparent}
.pill.add.ghost:hover{background:var(--accent-btn);color:var(--on-accent);border-color:var(--ink)}
/* option list under "In winkelwagen" (same dark list as the booking bar) */
.sh-pick{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:min(300px,calc(100vw - 40px));background:var(--ink-2);color:var(--cream);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);padding:8px 0}
.sh-pick .t{margin:0;padding:8px 18px 6px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--sand)}
.sh-pick button{display:grid;grid-template-columns:1fr auto;gap:2px 16px;width:100%;text-align:left;background:none;border:0;padding:10px 18px;color:#fff;font-family:var(--sans);font-size:16px;line-height:1.25;cursor:pointer}
.sh-pick button .p{font-family:var(--mono);font-size:14px;letter-spacing:0;align-self:center}
.sh-pick button .a{grid-column:1/-1;font-size:12px;color:var(--sand)}
.sh-pick button:hover:not([disabled]),.sh-pick button:focus-visible{color:var(--accent);outline:0}
.sh-pick button[disabled]{opacity:.45;cursor:default}
.kopen-page .gal-head .lbl a{text-decoration:none;color:inherit}
.kopen-page .gal-head .lbl a:hover{text-decoration:underline;text-underline-offset:4px}
/* Filter and sort bar of the shop lists (inc/shop.php, Bjorn 2026-10-10: "overzichtelijker, minder rommelig"):
   one toolbar between two lines; filters are pills in the style of the map labels, each with a dark list like the
   booking bar; the chosen value shows in the pill; Direct leverbaar is an on/off pill; count and Sorteer on the right */
.shop-bar{margin:34px 0 0}
.sb-line{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sb-line .rows{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex:1;min-width:0}
.sb-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sb-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.sb-count{font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.sb-count.on-phone{display:none}
.dd{position:relative}
.dd-btn,.sb-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.dd-btn:hover,.sb-chip:hover,.dd.is-open .dd-btn{border-color:var(--ink)}
.dd-btn .v:not(:empty)::before{content:": "}
.dd-btn svg{flex:none;transition:transform .15s}
.dd.is-open .dd-btn svg{transform:rotate(180deg)}
.dd.is-set .dd-btn,.sb-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dd-btn:focus-visible,.sb-chip:focus-visible,.dd-menu button:focus-visible,.dd-menu a:focus-visible,.sb-clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dd-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:max(100%,210px);padding:8px 0;background:var(--ink-2);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.dd.is-open .dd-menu{display:block}
.dd-menu .dd-lbl{display:none}
.dd-menu button,.dd-menu a{display:block;width:100%;padding:10px 20px;border:0;background:none;color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.25;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.dd-menu button:hover,.dd-menu button[aria-pressed=true],.dd-menu a:hover,.dd-menu a[aria-current]{color:var(--accent)}
.dd-toggle .dd-menu{display:none!important}
.dd-sort .dd-btn{border-color:transparent;padding-right:0}
.dd-sort .dd-btn:hover,.dd-sort.is-open .dd-btn{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.dd-sort .dd-menu{left:auto;right:0}
.sb-clear{border:0;background:none;padding:0 4px;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.shop-bar-toggle{display:none}
/* the old buy page (page-kopen.php, only shown when the shop has no tents online) keeps its rows */
.shop-bar[data-shopbar]{display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1}
.shop-bar[data-shopbar] .row{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.shop-bar[data-shopbar] .lead{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;color:var(--stone);min-width:9ch}
.shop-bar[data-shopbar] .opts{display:flex;flex-wrap:wrap;gap:10px 20px}
.shop-bar[data-shopbar] button{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-underline-offset:5px;text-decoration-thickness:1px}
.shop-bar[data-shopbar] button:hover,.shop-bar[data-shopbar] button[aria-pressed=true]{text-decoration:underline}
@media(max-width:900px){
  .sb-line{flex-wrap:wrap;justify-content:space-between;padding:12px 0}
  .sb-count.on-phone{display:block}
  .sb-count.on-desk{display:none}
  .shop-bar-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-size:var(--body);line-height:1;color:var(--ink);cursor:pointer}
  .shop-bar-toggle svg{transition:transform .15s}
  .shop-bar.is-open .shop-bar-toggle svg{transform:rotate(180deg)}
  .sb-line .rows{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:22px;margin-top:6px;padding:22px 20px;background:var(--sand)}
  .shop-bar.is-open .sb-line .rows{display:flex}
  .sb-filters{flex-direction:column;align-items:stretch;gap:22px}
  .sb-right{margin:0}
  .dd-btn,.sb-chip{display:none}
  .dd-menu,.dd-toggle .dd-menu{position:static;display:flex!important;flex-wrap:wrap;gap:8px;min-width:0;padding:0;background:none;box-shadow:none}
  .dd-menu .dd-lbl{display:block;flex:0 0 100%;margin:0 0 2px;font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;color:var(--stone)}
  .dd-menu button,.dd-menu a{width:auto;padding:9px 14px;border:1px solid rgba(29,26,21,.22);border-radius:999px;color:var(--ink);font-size:14px;line-height:1}
  .dd-menu button:hover,.dd-menu a:hover{color:var(--ink);border-color:var(--ink)}
  .dd-menu button[aria-pressed=true],.dd-menu a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
  .sb-clear{align-self:flex-start;padding:0}
}
.sh-page .gal-head .crumb{margin:0 0 18px}
.sh-none{margin:40px 0 0;max-width:525px}
.sh-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;margin:60px 0 0}
.sh-cat{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.sh-cat .media{display:block;aspect-ratio:1;background:var(--sand);overflow:hidden;margin:0 0 14px}
.sh-cat .media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
.sh-cat .media.cover img{object-fit:cover}
.sh-cat:hover .media img{transform:scale(1.03)}
.sh-cat .name{font-size:var(--h3);line-height:1.1}
.sh-cat .n{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;color:var(--stone);margin-top:6px}
.sh-tents{margin-top:110px}
.sh-more .tent-list{margin-top:40px}
@media(max-width:900px){
  .sh-product .pd-media.sh-studio img{padding:80px 4% 16px}
  .sh-desc,.sh-fits{margin-top:65px}
  .sh-cats{grid-template-columns:repeat(2,1fr);gap:28px 16px}
}
.sh-ship{font-size:13px;color:var(--stone);margin:0 0 6px}

/* Checkout and order page (shop plugin, 2026-10-07): form left, sand overview right (phone: overview under the form) */
.co{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px 60px;align-items:start;margin:30px 0 0}
/* the start of the order: where you are, how you can pay, where we deliver (art. 6:230v lid 4 BW) */
.co-start{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;align-items:baseline}
.co-start p{margin:0;font-size:13px;color:var(--stone)}
.co-path{list-style:none;display:flex;margin:0;padding:0;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--stone)}
.co-path li+li::before{content:"→";margin:0 10px}
.co-path .now{color:var(--ink)}
.co-sec{margin:0 0 44px}
.co-sec h2,.co-sum h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);margin:0 0 18px}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.co-f{display:flex;flex-direction:column;gap:6px;font-size:13px}
.co-f>span{font-family:var(--mono);text-transform:uppercase;color:var(--stone)}
.co-f input,.co-f textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.co-f input:focus,.co-f textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.co-wide{grid-column:1/-1}
.co-grid .co-s{grid-column:auto}
.co-methods{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.co-m{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--line);background:#fff;cursor:pointer}
.co-m:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.co-m[hidden]{display:none}
.co-m input{margin:3px 0 0;accent-color:var(--ink)}
.co-m span{flex:1;display:flex;flex-direction:column;gap:4px}
.co-m b{font-weight:var(--sans-w);font-size:16px}
.co-m small,.co-m em{font-size:13px;color:var(--stone);font-style:normal}
.co-m em{white-space:nowrap;color:var(--ink)}
.co-country{display:flex;gap:8px;margin:0 0 14px}
.co-country .opt{position:relative;cursor:pointer}
.co-country input{position:absolute;opacity:0}
.co-country span{display:inline-block;padding:8px 16px;border:1px solid var(--ink);border-radius:9999px;font-family:var(--mono);font-size:13px;text-transform:uppercase}
.co-country input:checked+span{background:var(--ink);color:var(--cream)}
.co-pickonly{font-size:14px;margin:0 0 16px;max-width:560px}
.co-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* what the chosen delivery option needs, right under it (Bjorn 2026-11-06) */
.co-country[hidden],.co-detail[hidden],.co-pointsbox[hidden],.co-bring[hidden]{display:none}
.co-detail{margin-top:-11px;padding:20px 18px 24px;border:2px solid var(--ink);border-top:1px solid var(--line);background:#fff}
.co-detail h3{font-family:var(--sans);font-weight:var(--sans-w);font-size:17px;margin:0 0 12px}
.co-pointsbox{margin-top:20px}
.co-detail .co-hint{margin:0 0 14px}
.co-bring{margin-top:18px}
.co-bringmsg{font-size:15px;margin:0 0 14px}
.co-bringmsg.is-ok{font-family:var(--mono);font-size:14px}
.co-bringmsg.is-far{padding:10px 12px;background:var(--cream);border-left:3px solid #d98a00;font-size:14px;line-height:1.45}
.co-bring [data-co-bringterms]{padding:18px 18px 16px;background:var(--sand)}
.co-terms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.45}
.co-terms b{font-weight:600}
.co-bringok{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(29,26,21,.2);font-size:15px}
.co-agree{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;margin-top:18px}
.co-agree input{margin-top:3px;accent-color:var(--ink);width:18px;height:18px;flex:none}
.co-sum{background:var(--sand);padding:30px;position:sticky;top:110px}
.co-lines{list-style:none;margin:0 0 18px;padding:0}
.co-lines li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4}
.co-lines .t a{color:var(--ink)}
.co-lines small{display:block;color:var(--stone);font-size:12px;margin-top:3px}
.co-lines .n{font-family:var(--mono);color:var(--stone)}
.co-tot{margin:0 0 14px}
.co-tot div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.co-tot dt,.co-tot dd{margin:0}
.co-tot .big{font-size:24px;line-height:1.2;border-top:1px solid var(--ink);margin-top:8px;padding-top:12px}
.co-tot .now{font-weight:600}
.co-tot .later{color:var(--stone)}
.co-tot div[hidden]{display:none}
.co-free,.co-note{font-size:13px;margin:0 0 12px}
.co-bad{font-size:13px;margin:0 0 14px;padding:10px 12px;background:#fff;border-left:3px solid #d98a00}
.co-bad p{margin:0 0 4px}
.co-err{font-size:14px;color:#a1261d;margin:0 0 12px}
.co-go{width:100%;justify-content:center}
.co-go[disabled]{opacity:.5;cursor:default}
.co-pay{font-size:12px;color:var(--stone);margin:12px 0 0}
.sh-steps{list-style:none;display:flex;gap:0;margin:30px 0 0;padding:0;max-width:760px}
.sh-steps li{flex:1;border-top:3px solid var(--line);padding-top:10px;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--stone)}
.sh-steps li.done{border-color:var(--ink);color:var(--ink)}
.sh-steps li.now{border-color:var(--accent,#ff0);color:var(--ink)}
.sh-next{max-width:760px;margin:36px 0 0;padding:26px 30px 28px;background:var(--sand)}
.sh-next h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);margin:0 0 14px}
.sh-next ol{list-style:none;counter-reset:n;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.45}
.sh-next li{counter-increment:n;display:grid;grid-template-columns:24px 1fr;gap:10px}
.sh-next li::before{content:counter(n);font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--stone)}
/* checkout herzien 2026-10-10 (Bjorn: bezorgopties met prijs, afhaalpunt of pakketautomaat, alle gegevens):
   numbered sections, a hint under a field, options with their price, the pickup points as a list of cards */
.co-sec h2{display:flex;align-items:center;gap:12px}
/* a finished section gets its tick */
.co-sec.is-done .co-n{position:relative;font-size:0;animation:co-tick .22s ease-out}
.co-sec.is-done .co-n::after{content:"";position:absolute;left:8px;top:8px;width:12px;height:6px;box-sizing:border-box;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@keyframes co-tick{from{transform:scale(.72)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.co-sec.is-done .co-n{animation:none}}
.co-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:13px;flex:none}
.co-f small{font-size:12px;color:var(--stone);line-height:1.35}
.co-more{margin:0;display:flex;flex-wrap:wrap;gap:6px 24px}
.co-more .text-link{background:none;border:0;padding:0;cursor:pointer;margin:0}
.co-f[hidden]{display:none}
.co-sec[hidden]{display:none}
.co-country{align-items:center;flex-wrap:wrap}
.co-country .co-country-lbl{display:inline;padding:0;border:0;border-radius:0;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:var(--stone);margin-right:6px;background:none}
.co-opt em{font-family:var(--mono);font-size:15px;letter-spacing:0}
.co-opt.is-off{cursor:default;background:transparent}
.co-opt.is-off b{color:var(--stone)}
.co-hint{font-size:14px;color:var(--stone);margin:-6px 0 16px}
.co-hint[hidden]{display:none}
.co-found{display:flex;align-items:baseline;gap:10px;margin:0;font-size:15px}
.co-found[hidden]{display:none}
.co-found::before{content:'✓'}
.co-found span{flex:1;min-width:0}
.co-found .text-link{background:none;border:0;padding:0;cursor:pointer;margin:0}
.co-free{font-size:14px;margin:-6px 0 16px}
.co-grid-addr{grid-template-columns:1fr 1fr 1fr}
.co-grid-addr .co-f:first-child{grid-column:span 1}
.co-ptfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.co-ptfilter[hidden]{display:none}
.co-ptfilter button{padding:8px 14px;border:1px solid var(--ink);border-radius:9999px;background:transparent;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0;cursor:pointer;color:var(--ink)}
.co-ptfilter button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.co-points{display:flex;flex-direction:column;gap:8px}
.co-pt{display:grid;grid-template-columns:auto 64px 1fr auto;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);background:#fff;cursor:pointer}
.co-pt.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.co-pt input{margin:3px 0 0;accent-color:var(--ink)}
/* the carrier: its own logo, unchanged and in colour (Bjorn 2026-11-06); text only if a carrier has no logo here */
.co-pt .pt-c{justify-self:start;display:flex;align-items:center;justify-content:center;width:64px;height:32px;font-family:var(--mono);font-size:12px;letter-spacing:0;line-height:1.5;text-transform:uppercase;color:var(--ink)}
.co-pt .pt-c img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.co-pt .pt-dhl{background:#FC0;padding:0 8px;box-sizing:border-box}
.co-m .co-logos{flex:none;flex-direction:row;align-items:center;gap:8px;margin-top:6px}
.co-logos img{display:block;height:24px;width:auto}
.co-logos .is-dhl{background:#FC0;padding:6px 8px;box-sizing:border-box}
.co-pt .pt-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.co-pt .pt-t b{font-weight:var(--sans-w);font-size:15px}
.co-pt .pt-t small{font-size:13px;color:var(--stone);line-height:1.35}
.co-pt .pt-d{font-family:var(--mono);font-size:13px;white-space:nowrap}
.co-ptmore{background:none;border:0;padding:0;margin:14px 0 0;cursor:pointer}
.co-ptmore[hidden]{display:none}
/* where and when, right in the review, with a way back */
.co-where{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0;margin:0 0 6px;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.co-where p{margin:0}
.co-where small{display:block;font-size:13px;color:var(--stone);margin-top:3px}
.co-where button{flex:none;background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
/* what is still needed, right above the button */
.co-left{font-size:13px;line-height:1.4;margin:0 0 10px;color:var(--stone)}
.co-left[hidden]{display:none}
.co-left.is-ready{color:var(--ink);display:flex;align-items:center;gap:8px}
.co-left.is-ready::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f7d32;flex:none}
.co-agreeline,.co-next{font-size:12px;line-height:1.4;color:var(--stone);margin:10px 0 0}
.co-next{margin-top:4px}
.co-next[hidden]{display:none}
.co-coupon{margin:0 0 12px}
.co-cp-toggle{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.co-cp-toggle[hidden]{display:none}
.co-cp-form{display:flex;gap:8px;margin:8px 0 0}
.co-cp-form[hidden]{display:none}
.co-cp-form input{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--ink);background:#fff;text-transform:uppercase;letter-spacing:.03em}
.co-cp-apply{flex:none;padding:0 16px;border:1px solid var(--ink);background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0;cursor:pointer}
.co-cp-apply:hover{background:var(--accent-btn);color:var(--on-accent)}
.co-cp-msg{font-size:13px;margin:8px 0 0}
.co-cp-msg.is-err{color:#a1261d}
.co-cp-msg[hidden],.co-cp-on[hidden]{display:none}
.co-cp-on{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:8px 10px;background:var(--cream);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0}
.co-cp-on button{background:none;border:0;padding:0;font:inherit;color:var(--stone);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.co-tot .disc dd{color:#2f7d32}
.co-where[hidden]{display:none}
.co-lines li:has(.i){grid-template-columns:44px auto 1fr auto;align-items:start}
.co-lines .i{display:block;width:44px;height:44px;background:var(--cream);overflow:hidden}
.co-lines .i img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:900px){
  .co{grid-template-columns:1fr;gap:30px}
  .co-sum{position:static;padding:22px 20px}
  .co-grid{grid-template-columns:1fr 1fr}
  .co-grid-addr{grid-template-columns:1fr 1fr}
  .co-grid-addr .co-f:first-child{grid-column:1/-1}
  .co-pt{grid-template-columns:auto 1fr auto;padding:12px 14px}
  .co-pt .pt-c{grid-column:2;grid-row:1}
  .co-pt .pt-t{grid-column:2;grid-row:2}
  .co-pt .pt-d{grid-column:3;grid-row:1}
}
/* shop: reviews labelled (WINKEL-JURIDISCH.md), safety block, withdrawal page */
.sh-rv-head{font-family:var(--mono);font-size:var(--label);text-transform:uppercase;color:var(--stone);text-align:center;margin:0 0 24px}
/* Shop specifications as sand tiles (Bjorn 2026-10-10: "clean en rustig zoals AutoCamp, in vlakken"). The rows copy
   AutoCamp's location facts (measured on /location/asheville/ at 1440 and 390: two equal columns, label and value in
   mono 15/21 uppercase, 20 px between rows, no lines; phone mono 13/18.2). One tile per group, a figure beside the
   group name; the tiles flow in two balanced columns so a long group (Tent) and a short one (Algemeen) never leave a hole. */
.pd-specs{width:var(--pd-w);margin:130px auto 0}
.pd-specs h2{font-family:var(--serif);font-weight:var(--serif-w);font-size:45px;line-height:1.1;letter-spacing:-.05em;margin:0 0 40px}
.pd-specs-tiles{columns:2;column-gap:20px}
.pd-specs-tiles.cols{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}   /* tents: fixed places */
.pd-specs-tiles.cols>.col{min-width:0}
.pd-spec{break-inside:avoid;background:var(--sand);padding:40px 50px 44px;margin:0 0 20px}
.pd-spec h3{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-weight:var(--sans-w);font-size:25px;line-height:1.1;letter-spacing:0;margin:0 0 30px}
.pd-spec h3 .ico{width:40px;height:40px;flex:0 0 40px}
.pd-spec .ico *{vector-effect:non-scaling-stroke}
.pd-spec dl{margin:0}
.pd-spec dl>div{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:0 0 20px}
.pd-spec dl>div:last-child{margin-bottom:0}
.pd-spec dt,.pd-spec dd{font-family:var(--mono);font-size:15px;line-height:21px;text-transform:uppercase;letter-spacing:0;margin:0;overflow-wrap:break-word;min-width:0}
.pd-spec dt{color:var(--stone)}
.pd-spec dd.is-pick,.pd-spec dd[data-spdim]{position:relative}
.cmp-none{color:var(--stone)}   /* compare table: this product has no value for the row */
/* "Kies een maat" until an option is chosen: a button (underlined, chevron) that opens the sizes in a dark list */
.pd-spec .sp-pick{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pd-spec .sp-pick::after{content:"";flex:none;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.pd-spec .sp-pick[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.pd-spec .sp-pick:hover{text-decoration-thickness:2px}
.pd-spec .sp-pick:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sp-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:190px;max-width:calc(100vw - 40px);padding:8px 0;background:var(--ink-2);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.sp-menu .sp-lbl{margin:6px 20px 6px;font-family:var(--mono);font-size:12px;line-height:1;text-transform:uppercase;color:var(--stone-light)}
.sp-menu button{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;padding:9px 20px;border:0;background:none;color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.25;text-transform:none;text-align:left;cursor:pointer}
.sp-menu button b{font-weight:400;font-family:var(--mono);font-size:13px;color:var(--stone-light)}
.sp-menu button:hover,.sp-menu button:focus-visible{color:var(--accent);outline:0}
.sp-menu button:hover b,.sp-menu button:focus-visible b{color:var(--accent)}
.sp-menu button.na{opacity:.45}
.sp-menu button[aria-checked=true]{color:var(--accent)}
.sp-menu button[aria-checked=true] span::before{content:"✓";display:inline-block;width:0;margin-left:-14px;margin-right:14px;font-size:13px}
/* a value that follows the chosen size: still a button (dotted line, chevron), solid line on hover */
.pd-spec .sp-pick.sp-val{text-decoration-style:dotted;text-decoration-color:rgba(29,26,21,.55)}
.pd-spec .sp-pick.sp-val:hover,.pd-spec .sp-pick.sp-val[aria-expanded=true]{text-decoration-style:solid;text-decoration-color:currentColor}
.pd-spec dd[data-none]{white-space:pre-line}   /* the model number of every option, one per line, until one is chosen */   /* "Kies een maat" until an option is chosen */
.pd-spec dd a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pd-spec dd a[href^="mailto:"]{text-transform:none}
@media(max-width:1279px){.pd-spec{padding:34px 34px 38px}.pd-spec dt,.pd-spec dd{font-size:13px;line-height:18.2px}}
@media(max-width:900px){
  .pd-specs{margin-top:65px}
  .pd-specs h2{font-size:35px;margin-bottom:26px}
  .pd-specs-tiles{columns:1}
  .pd-specs-tiles.cols{grid-template-columns:1fr}
  .pd-spec{padding:30px 20px 32px;margin-bottom:12px}
  .pd-spec h3{font-size:20px;gap:12px;margin-bottom:22px}
  .pd-spec h3 .ico{width:32px;height:32px;flex-basis:32px}
  /* 270 px inside the tile: a smaller label column and label (mono 11, as on the cards) so values like FABRIEKSGARANTIE stay whole */
  .pd-spec dl>div{grid-template-columns:44% 1fr;gap:0 12px;margin-bottom:14px}
  .pd-spec dt{font-size:11px}
}
.co-legal{font-size:12.5px;line-height:1.45;color:var(--stone);margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.co-paynote{display:none}
.co-legal p{margin:0 0 8px}
.co-legal a{color:var(--ink)}
.co-paychoice{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.co-paychoice[hidden]{display:none}
.co-paychoice .co-m{padding:12px 14px}
/* Checkout on a phone (Bjorn 2026-11-09: "lange teksten aan elkaar, onoverzichtelijk"): one frame instead of a box in a
   box, the delivery terms as separate rows, only the chosen payment option explains itself, the fine print in two quiet
   groups. The desktop stays as it is. */
@media(max-width:600px){
  .co-detail{padding:18px 16px 20px}
  .co-bring [data-co-bringterms]{margin:0 -16px -20px;padding:20px 16px 18px}
  .co-bring h3{font-size:16px;margin-bottom:6px}
  .co-terms{gap:0;font-size:14px;line-height:1.45}
  .co-terms li{padding:11px 0;border-bottom:1px solid rgba(29,26,21,.12)}
  .co-terms b{display:block;margin-bottom:2px}
  .co-bringok{margin-top:14px;padding-top:0;border-top:0}
  .co-lines small{line-height:1.4}
  /* the payment choice as two tiles side by side, the chosen one explained once underneath */
  .co-paychoice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .co-paychoice .co-m{padding:14px 10px 14px 12px;gap:8px;align-items:center}
  .co-paychoice .co-m b{font-size:14px;line-height:1.25}
  .co-paychoice .co-m input{margin:0}
  .co-paychoice .co-m small{display:none}
  .co-paynote{display:block;grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--stone)}
  .co-agreeline,.co-next,.co-legal{text-align:center}
  .co-legal{font-size:12px;line-height:1.5}
  .co-legal p+p{font-size:0;line-height:0;margin:10px 0 0}
  .co-legal p+p a{display:inline-block;font-size:12px;line-height:1.5;margin:0 8px 4px}
}
.sh-wd{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.sh-wd .gal-head{margin:0}
.sh-wd h1{font-size:var(--h2)}
.sh-wd-fine{font-size:14px;color:var(--stone);max-width:460px;margin-top:16px}
.sh-wd-fine a{text-decoration:underline;text-underline-offset:3px}
.sh-wd-items{list-style:none;margin:0 0 20px;padding:0}
.sh-wd-items li{margin:0;border-bottom:1px solid rgba(29,26,21,.14)}
.sh-wd-items label{display:grid;grid-template-columns:auto 64px 1fr auto;gap:14px;align-items:center;padding:12px 0;cursor:pointer;font-size:15px}
.sh-wd-items input{margin:0;width:18px;height:18px;accent-color:var(--ink)}
.sh-wd-items .pic{width:64px;height:64px;background:var(--cream);display:block}
.sh-wd-items .pic img{width:100%;height:100%;object-fit:contain;display:block}
.sh-wd-items select{font:inherit;padding:6px 8px;border:1px solid var(--ink);background:#fff;color:var(--ink)}
.sh-wd-panel .co-f textarea{width:100%}
.sh-wd-who{font-size:14px;color:var(--stone);margin:14px 0 18px}
.sh-wd-panel{background:var(--sand);padding:36px}
.sh-wd-panel h2{font-family:var(--sans);font-weight:var(--sans-w);font-size:var(--h3);margin:0 0 18px}
.sh-wd-sum{margin:0 0 20px}
.sh-wd-sum div{display:grid;grid-template-columns:140px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sh-wd-sum dt{font-family:var(--mono);text-transform:uppercase;font-size:12px;color:var(--stone)}
.sh-wd-sum dd{margin:0}
.sh-wd-back{margin-top:14px}
.sh-wd-back .text-link{background:none;border:0;padding:0;cursor:pointer;font:inherit}
@media(max-width:900px){.sh-wd{grid-template-columns:1fr;gap:30px}.sh-wd-panel{padding:24px 20px}}

/* ---- dakkoffer page (2026-10-28): tent-page rhythm, sand placeholders until the box is photographed ---- */
.dk-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--sand);color:var(--stone)}
.dk-ph .ico{display:block;width:120px;height:120px;flex:0 0 auto}
.dk-ph .ico *{vector-effect:non-scaling-stroke}
.dk-ph span{font-family:var(--mono);font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:0}
.pd-panel-img.dk-ph{min-height:320px}
/* studio shot on crème: the whole car with the box in view, under the header blocks (like .sh-studio on the shop pages) */
.dk .pd-media.studio{background:var(--cream)}
.dk .pd-media.studio img{object-fit:contain;padding:130px 4% 40px;box-sizing:border-box}
.dk .crumb.lbl{color:var(--stone)}
.dk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:30px 0 0}
.dk .pd-copy .pd-fine{margin-top:16px}
.dk .faq-page{margin:130px auto 0}
.dk .faq-page .group{border-top:0;padding:0}
@media(max-width:900px){
  .dk .faq-page{margin-top:65px}
  .dk .pd-media.studio{aspect-ratio:4/3}
  .dk .pd-media.studio img{padding:90px 4% 16px}
  .dk-cta{margin-top:24px}
}

/* "Wat past erop" next to the heading of /fietsendrager-huren/ (inc/boxfill.php with bikefill-data.php): the same figure as the roof box, a technical drawing of the sawn-off roof and the bikes */
.bxf .car{fill:var(--cream);stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.bxf .car.side{fill:#EFE6D2}
.bxf .car.roof{fill:var(--cream)}
.bxf .glass{fill:#DFD0AF;stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.bxf .cut{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.bxf .alu{fill:#DAD4C6;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round}
.bxf .alu.dark{fill:#9C9486}
.bxf .alub{fill:#C9C2B3;stroke:var(--ink);stroke-width:.6}
.bxf .slot{fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.8}
.bxf .ln{fill:none;stroke:var(--ink);stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.bxf .fr{fill:var(--sand);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.bxf .fr.blkf{fill:var(--ink);stroke:var(--ink)}
.bxf .blk{fill:var(--ink);stroke:var(--ink);stroke-width:.5;stroke-linejoin:round}
.bxf .grey{fill:#5E574B;stroke:var(--ink);stroke-width:.7}
.bxf .ty{fill:var(--ink);stroke:none}
.bxf .tyl{fill:#6d6558;stroke:none}
.bxf .rimb{fill:#DAD4C6;stroke:var(--ink);stroke-width:.7}
.bxf .spk{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.75}
.bxf .gear{fill:#C9C2B3;stroke:var(--ink);stroke-width:.65;stroke-linejoin:round}
.bxf .hole{fill:var(--cream);stroke:var(--ink);stroke-width:.5}
.bxf .chn{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:1.5 1;stroke-linejoin:round}
.bxf .cbl{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.75;stroke-linecap:round}
.bxf .barx{fill:none;stroke:var(--ink);stroke-width:5.6;stroke-linecap:round}
.bxf .bay{fill:#6d6558;stroke:var(--ink);stroke-width:.8}
.bxf .batt{fill:var(--accent,#FFFF00);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.bxf .far{opacity:.5}
.bxf .gripx{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.bxf .boxw{fill:#EFE6D2;stroke:none}
.bxf .boxt{fill:var(--cream);stroke:none}
.bikes-page .bxf-tab .lb{display:none}   /* only the round icons; the name is in the title and aria-label */
.bikes-page .bxf figcaption{min-height:3em}   /* always room for two lines (13 px x 1.5), so the card below stays put when the tab changes */
@media(min-width:1100px){.bikes-page .gal-head.has-fill{grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:36px}}   /* the heading stays on one line */
.pd-price-note{margin:14px 0 0;font-size:var(--body);line-height:1.45;color:var(--stone);max-width:60ch}

/* 3D view of a tent (2026-11-04, inc/product.php). The 360 icon (Bjorn 2026-11-10: the square block was too heavy, "iets
   eleganter"): a small round frosted button, the same on the photo and on the slide. On hover the two arrows turn once around
   "360°"; theme.js gives every icon one turn the first time it comes into view, so people notice it without anything moving
   all the time. On the photo it stays clear of the booking bar and of the WhatsApp bubble on a short laptop screen. */
.pd-360{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;padding:0;border:1px solid rgba(39,39,39,.12);border-radius:50%;background:var(--cream);background:color-mix(in srgb,var(--cream) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px -10px rgba(0,0,0,.45);color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.pd-360:hover,.g3d-open:hover .pd-360{background:var(--cream);transform:scale(1.06)}
.pd-360:focus-visible,.g3d-open:focus-visible .pd-360{outline:2px solid var(--ink);outline-offset:3px}
.pd-360 .ico{display:block;width:34px;height:34px;flex:0 0 auto}
.pd-360 .ico *{vector-effect:non-scaling-stroke}
.pd-360 .ico path{transform-origin:24px 26px}
@keyframes r360-turn{to{transform:rotate(1turn)}}
.pd-360:hover .ico path,.g3d-open:hover .pd-360 .ico path,.pd-360.turn .ico path{animation:r360-turn .9s cubic-bezier(.45,0,.2,1)}
@media(prefers-reduced-motion:reduce){.pd-360 .ico path{animation:none!important}.pd-360:hover{transform:none}}
.pd-360.on-photo{position:absolute;right:96px;bottom:24px;z-index:2}
.g3d img{position:relative;transition:opacity .5s}
.g3d model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent;background:transparent;cursor:grab}
.g3d model-viewer:active{cursor:grabbing}
.g3d model-viewer::part(default-progress-bar){display:none}
.g3d.live img{opacity:0}
.gshot.g3d:not(.is-on) model-viewer{pointer-events:none}
.g3d-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.g3d-open .pd-360{position:absolute;right:16px;bottom:16px}
.gshot.g3d:not(.is-on) .pd-360{opacity:0}
@media(hover:hover) and (pointer:fine){.g3d-open{pointer-events:none}.g3d-open .pd-360{pointer-events:auto}}   /* the mouse grabs the tent, only the icon is a button */
html.v3d-on{overflow:hidden}
.v3d{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--cream);color:var(--ink);overflow:hidden}
.v3d[open]{display:flex;flex-direction:column;animation:lb-in .3s cubic-bezier(0,0,.2,1)}
.v3d::backdrop{background:var(--cream)}
.v3d-name{position:absolute;top:24px;left:20px;z-index:2;margin:0;font-family:var(--serif);font-weight:var(--serif-w);font-size:25px;line-height:1.1;letter-spacing:-.05em}
.v3d .close{position:absolute;top:20px;right:20px;z-index:2;height:36px;padding:0 14px;border:0;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:0;cursor:pointer}
.v3d .close:hover{background:var(--accent-btn);color:var(--ink)}
.v3d:focus,.v3d:focus-visible,.v3d .close:focus{outline:none}
.v3d .close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.v3d-view{position:relative;flex:1 1 auto;min-height:0}
.v3d-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s}
.v3d-view.live img{opacity:0}
.v3d-view model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent;--progress-bar-color:var(--ink);--progress-bar-height:2px;background:transparent}
.v3d-hint{position:absolute;left:0;right:0;bottom:12px;z-index:1;margin:0;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.2;color:var(--stone);text-transform:uppercase;letter-spacing:0;pointer-events:none;transition:opacity .4s}
.v3d-hint.gone{opacity:0}
/* bar: one row of pills; the toggle and the AR button stand in the view, the AR button shows only where AR works */
.v3d-bar{display:flex;gap:8px;flex:0 0 auto;padding:12px 20px 20px;justify-content:center}
.v3d-bar button,.v3d-toggle,.v3d-ar{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;box-sizing:border-box;height:36px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:0;white-space:nowrap;cursor:pointer}
.v3d-bar button:hover,.v3d-bar button.is-on,.v3d-toggle:hover{background:var(--ink);color:var(--cream)}
.v3d .ico{display:block;width:20px;height:20px;flex:0 0 auto}
.v3d .ico *{vector-effect:non-scaling-stroke}
.v3d-toggle,.v3d-ar{position:absolute;bottom:12px;z-index:2}
.v3d-toggle{left:20px;background:var(--cream)}
.v3d-ar{right:20px;background:var(--accent-btn)}
@media(max-width:900px){
  .pd-360{width:44px;height:44px}
  .pd-360 .ico{width:32px;height:32px}
  .pd-360.on-photo{right:12px;bottom:12px}
  .g3d-open .pd-360{right:10px;bottom:10px}
  .v3d-name{top:22px;font-size:20px}
  /* phone: every standpoint visible at once as a tile with a drawing, no row to swipe (Bjorn 2026-11-05); above it the two big buttons */
  .v3d-hint{bottom:62px}
  .v3d-toggle,.v3d-ar{bottom:8px;width:calc(50% - 16px);max-width:240px;height:42px;padding:0 6px;font-size:clamp(11px,3.3vw,13px)}
  .v3d-toggle{left:12px}
  .v3d-ar{right:12px}
  .v3d-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:4px 12px calc(10px + env(safe-area-inset-bottom))}
  .v3d-bar button{flex-direction:column;gap:3px;height:auto;padding:7px 0 6px;border:0;border-radius:0;font-size:10px}
  .v3d-bar .ico{width:30px;height:30px}
  .v3d-bar button:hover{background:transparent;color:var(--ink)}
  .v3d-bar button.is-on,.v3d-bar button.is-on:hover{background:var(--sand);color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){.v3d[open]{animation:none}}

/* ---- the words people search for are the real h1, in small letters above the big slogan (SEO 2026-11-06).
   .as-h1 = the slogan, a paragraph that keeps the look of the h1 it used to be. ---- */
h1.lbl{font-weight:400}
.as-h1{font-family:var(--serif);font-weight:var(--serif-w);letter-spacing:var(--track-serif);line-height:1.1;margin:0;font-size:var(--h1)}
.hero .as-h1{margin:0 0 .3em;max-width:13ch;text-wrap:balance}
.gal-head h1.lbl,.kopen-page .gal-head h1.lbl{font-size:var(--label);max-width:none}
.gal-head .as-h1{max-width:18ch}
.kopen-page .gal-head .as-h1{font-size:var(--h2);max-width:none}

/* the EU notice on the legal guarantee: readable at its own size, on a phone the width of the screen */
.eu-garantie{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:16px;border:0;background:#fff;color:var(--ink);overflow:auto}
.eu-garantie::backdrop{background:rgba(29,26,21,.6)}
.eu-garantie img{display:block;width:100%;height:auto}
.eu-garantie p{margin:10px 0 0;font-size:14px;text-align:center}
.eu-garantie a{text-decoration:underline;text-underline-offset:3px}
.eu-x{display:block;width:36px;height:36px;margin:0 0 10px auto;border:0;background:var(--ink);color:var(--cream);font-size:20px;line-height:1;cursor:pointer}

/* legal pages on paper and as the pdf with the order confirmation */
@media print{
  .ticker,.hdr,.site-footer,.btn-wa,.rb-toc,.lg-inhoud,.lg-dl,.cky-consent-container,.cky-modal,.cky-btn-revisit-wrapper{display:none!important}
  html,body{background:#fff!important;color:#000}
  main,#main,.lg{padding:0!important;margin:0!important}
  .lg .gal-head{padding:0;margin:0 0 16px;width:auto}
  .lg .gal-head .lbl{display:none}
  .lg .gal-head h1{font-size:26pt;line-height:1.1}
  .lg .rb-layout{display:block;width:auto;margin:0}
  .lg .rb-body{max-width:none}
  .lg .rb-body p,.lg .rb-body li{font-size:10pt;line-height:1.45}
  .lg .rb-body h2{font-size:13pt;margin-top:1.4em;break-after:avoid}
  .lg .rb-body a{text-decoration:none;color:inherit}
  .lg .rb-tip{background:none;border:1px solid #bbb;padding:10px 14px}
  .lg-form{break-inside:avoid}
  @page{size:A4;margin:18mm}
}