/* Vakantiehuis Toxopeus — stijl van de oude site (Elementor) nagebouwd:
   beige-grijs vlak, witte kaarten (8px), oranje pil-knoppen, Urbanist koppen + Montserrat tekst. */
:root{
	--ox-bg:var(--c-sand); --ox-ink:var(--c-plum); --ox-h:var(--c-plum); --ox-or:var(--c-taupe); --ox-or2:var(--c-taupe-2); --ox-tab:var(--c-rose);
	--ox-grad:linear-gradient(var(--c-taupe-2) 0%,var(--c-taupe) 100%);
	--ox-w:1240px;
}
body.ox{background:var(--ox-bg);color:var(--ox-ink);font:400 16.5px/1.85 var(--f-body);margin:0;-webkit-font-smoothing:antialiased}
body.ox *{box-sizing:border-box}
body.ox img{max-width:100%;display:block}
body.ox a{color:inherit}
.ox-ic{width:1.25em;height:1.25em;flex:none}

/* ---------- knoppen ---------- */
.ox-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--ox-grad);color:#fff!important;font:500 16px/1.2 var(--f-body);padding:15px 20px;border-radius:252px;text-decoration:none!important;border:0;cursor:pointer;transition:filter .15s}
.ox-btn:hover{filter:brightness(1.07)}
.ox-btn--white{background:#fff;color:var(--ox-or)!important}
.ox-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:50;box-shadow:0 0 10px rgba(0,0,0,.5)}

/* ---------- header ---------- */
.ox-hd{background:var(--ox-bg);position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.ox-hd-in{max-width:var(--ox-w);margin:0 auto;padding:0 24px;min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ox-logo img{height:46px;width:auto}
.ox-nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.ox-nav a:not(.ox-btn){font:700 16px/1 var(--f-head);letter-spacing:.03em;text-transform:uppercase;color:var(--ox-ink);text-decoration:none;padding:8px 0}
.ox-nav a:not(.ox-btn):hover{color:var(--ox-or)}
.ox-nav a.is-active{opacity:.5}
.ox-toggle{position:absolute;opacity:0;pointer-events:none}
.ox-burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--ox-grad);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ox-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
@media(max-width:1060px){
	.ox-hd-in{min-height:80px;flex-wrap:wrap}
	.ox-burger{display:flex}
	.ox-nav{display:none;width:100%;order:3;padding-bottom:18px}
	.ox-toggle:checked~.ox-nav{display:block}
	.ox-nav ul{flex-direction:column;align-items:stretch;gap:0;background:#fff;border-radius:8px;padding:10px 20px}
	.ox-nav li{border-bottom:1px solid var(--c-cream);padding:6px 0}
	.ox-nav li:last-child{border:0;padding:12px 0 8px;text-align:center}
}

/* ---------- layout ---------- */
.ox-main{max-width:var(--ox-w);margin:0 auto;padding:0 24px 80px}
.ox-sec{margin-top:72px}
.ox-center{text-align:center;margin-top:28px}
.ox-card{background:#fff;border-radius:8px;padding:35px}
.ox-h2,.ox-prose h2{font:700 42px/1.15 var(--f-head);color:var(--ox-h);margin:0 0 .6em}
.ox-kicker{font:600 17px/1.5 var(--f-body);color:#fff;margin:0 0 10px}
.ox-stars{color:var(--ox-or);letter-spacing:.12em;font-size:18px}

/* ---------- hero ---------- */
.ox-herorow{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;margin-top:6px}
.ox-hero{position:relative;border-radius:8px;min-height:540px;background:#555 var(--img) center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden}
.ox-slides{position:absolute;inset:0;z-index:0}
.ox-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;border-radius:0}
.ox-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 60%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%)}
.ox-hero-in{position:relative;z-index:2;padding:40px;color:#fff;max-width:760px}
@media(prefers-reduced-motion:reduce){.ox-slide{animation:none!important}.ox-slide:first-child{opacity:1}}
.ox-hero h1{font:700 63px/1.05 var(--f-head);color:#fff;margin:0 0 14px}
.ox-hero .ox-lead,.ox-hero p{color:#fff;margin:0 0 12px}
.ox-rate{font-weight:600;color:#fff;margin-top:10px}
.ox-side{display:grid;grid-template-rows:repeat(3,1fr);gap:20px}
.ox-tile{position:relative;border-radius:8px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;color:#fff;text-decoration:none;overflow:hidden;
	background:radial-gradient(120% 120% at 15% 10%,var(--c-mauve) 0%,color-mix(in srgb, var(--c-mauve) 0%, transparent) 55%),radial-gradient(110% 120% at 95% 95%,var(--c-sky) 0%,color-mix(in srgb, var(--c-sky) 0%, transparent) 60%),var(--c-taupe);min-height:160px}
.ox-tile .ox-circ{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ox-or);display:grid;place-items:center}
.ox-tile .ox-circ .ox-ic{width:24px;height:24px}
.ox-tile b{font:600 19px/1.2 var(--f-body);text-decoration:underline;text-underline-offset:4px}

/* ---------- contactkaart + CTA ---------- */
.ox-contact{background:var(--ox-grad);color:#fff;border-radius:8px;padding:30px}
.ox-contact h2{font:700 26px/1.2 var(--f-cta);color:#fff;margin:0 0 16px}
.ox-contact ul{list-style:none;margin:0;padding:0}
.ox-contact li{border-top:1px solid rgba(255,255,255,.6)}
.ox-contact a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:14px 0;font-weight:500}
.ox-contact a:hover{text-decoration:underline}
.ox-bottom{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px}
.ox-cta{position:relative;border-radius:8px;padding:50px 44px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;min-height:330px;overflow:hidden;
	background:linear-gradient(rgba(22,60,110,.72),rgba(22,60,110,.72)),var(--bg) center/cover}
.ox-cta h2{font:700 36px/1.15 var(--f-cta);color:#fff;margin:0}
.ox-cta p{margin:0 0 6px;color:#fff}

/* ---------- home ---------- */
.ox-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;padding:22px 0;border-top:1px solid color-mix(in srgb, var(--c-plum) 25%, transparent);border-bottom:1px solid color-mix(in srgb, var(--c-plum) 25%, transparent)}
.ox-usp div{display:flex;align-items:center;gap:14px;font:600 16px/1.35 var(--f-body)}
.ox-usp .ox-circ{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ox-or);display:grid;place-items:center;flex:none}
.ox-usp .ox-circ .ox-ic{width:26px;height:26px}
.ox-two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ox-two--flip>:first-child{order:2}
.ox-photo{width:100%;border-radius:8px;aspect-ratio:4/3;object-fit:cover}
.ox-check,.ox-pins{list-style:none;margin:0 0 1.2em;padding:0}
.ox-check li{position:relative;padding:0 0 0 38px;margin:0 0 .7em;line-height:1.55}
.ox-check li::before{content:"✓";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--ox-or);color:#fff;font-size:14px;line-height:26px;text-align:center;font-weight:700}
.ox-pins li{position:relative;padding:0 0 0 34px;margin:0 0 .7em;line-height:1.55}
.ox-pins li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d58432' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.ox-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ox-review{margin:0;display:flex;flex-direction:column;gap:12px}
.ox-review blockquote{margin:0;font-style:italic;line-height:1.7;font-size:15.5px}
.ox-review figcaption{font-weight:600;margin-top:auto}
.ox-h3{font:700 24px/1.2 var(--f-head);color:var(--ox-h);margin:1.2em 0 .5em}

/* ---------- prose (vrije tekst uit data) ---------- */
.ox-prose p{margin:0 0 1.1em}
.ox-prose a{color:var(--ox-or);text-decoration:underline;text-underline-offset:3px}
.ox-prose h2{font-size:34px;margin-top:1.4em}
.ox-prose h2:first-child{margin-top:0}
.ox-prose h3{font:700 24px/1.25 var(--f-head);color:var(--ox-h);margin:1.2em 0 .4em}
.ox-prose ul{margin:0 0 1.2em;padding-left:1.2em}
.ox-prose li{margin:.25em 0}
.ox-prose blockquote{margin:0 0 .3em;font-style:italic}
.ox-pagecard{margin-top:24px}

/* ---------- mozaïek (Het vakantiehuis / Ontdekken) ---------- */
.ox-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px;margin-top:6px}
.ox-m{position:relative;display:block;border-radius:8px;overflow:hidden;background:#aaa}
.ox-m img{width:100%;height:100%;object-fit:cover}
.ox-m0{grid-row:1/3}
.ox-m3{grid-column:2}
.ox-m4{background:radial-gradient(120% 120% at 15% 10%,var(--c-mauve) 0%,color-mix(in srgb, var(--c-mauve) 0%, transparent) 55%),radial-gradient(110% 120% at 95% 95%,var(--c-sky) 0%,color-mix(in srgb, var(--c-sky) 0%, transparent) 60%),var(--c-taupe);display:flex;align-items:flex-end;padding:22px;color:#fff;text-decoration:none}
.ox-m4 span{font:600 19px/1.2 var(--f-body);text-decoration:underline;text-underline-offset:4px}

/* ---------- Het vakantiehuis ---------- */
.ox-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;margin-top:36px;align-items:start}
.ox-book{position:sticky;top:116px;background:#fff;border-radius:8px;padding:28px;text-align:center}
.ox-book h3{font:700 24px/1.2 var(--f-head);margin:0 0 8px;color:var(--ox-h)}
.ox-book p{margin:0 0 16px;font-size:15px;line-height:1.6}
.ox-cal{border:1px dashed var(--c-rose);border-radius:8px;padding:26px 14px;margin-bottom:18px;color:var(--c-taupe-3);font-size:14px}
.ox-title{font:700 42px/1.1 var(--f-head);color:var(--ox-h);margin:0}
.ox-sub{margin:6px 0 4px}
.ox-facts{display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:20px 0;padding:18px 0;border-top:1px solid color-mix(in srgb, var(--c-plum) 25%, transparent);border-bottom:1px solid color-mix(in srgb, var(--c-plum) 25%, transparent)}
.ox-facts li{display:flex;align-items:center;gap:10px;font-weight:600}
.ox-facts .ox-ic{color:var(--ox-or);width:26px;height:26px}
.ox-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}

/* ---------- Ontdekken ---------- */
.ox-tabs{position:relative}
.ox-tabs>input{position:absolute;opacity:0;pointer-events:none}
.ox-tabrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 34px}
.ox-tabrow label,.ox-tabrow a.ox-tablink{text-decoration:none;display:flex;align-items:center;justify-content:center;height:54px;padding:15px 35px;border-radius:66px;background:var(--ox-tab);color:#fff;font:500 16px/1 var(--f-body);cursor:pointer;text-align:center;transition:filter .15s}
.ox-tabrow label:hover,.ox-tabrow a.ox-tablink:hover{filter:brightness(1.05)}
.ox-panel{display:none}
#ox-t1:checked~.ox-tabrow label[for=ox-t1],#ox-t2:checked~.ox-tabrow label[for=ox-t2],#ox-t3:checked~.ox-tabrow label[for=ox-t3],#ox-t4:checked~.ox-tabrow label[for=ox-t4]{background:var(--ox-grad)}
#ox-t1:checked~.ox-panels .ox-p1,#ox-t2:checked~.ox-panels .ox-p2,#ox-t3:checked~.ox-panels .ox-p3,#ox-t4:checked~.ox-panels .ox-p4{display:block}
.ox-block{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin:0 0 56px}
.ox-block:nth-of-type(even) .ox-bimg{order:2}
.ox-block--solo{grid-template-columns:1fr}
.ox-block h2{font:700 30px/1.2 var(--f-head);color:var(--ox-h);margin:0 0 .5em}
.ox-block h3{font:700 22px/1.2 var(--f-head);color:var(--ox-h);margin:1em 0 .3em}
.ox-block ul{margin:0 0 1em;padding-left:1.2em}
.ox-block a{color:var(--ox-or);text-decoration:underline;text-underline-offset:3px}
.ox-block a.ox-btn{color:#fff;text-decoration:none}
.ox-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ox-soon{background:#fff;border-radius:8px;padding:50px 35px;text-align:center}

/* ---------- Foto's ---------- */
.ox-filter>input{position:absolute;opacity:0;pointer-events:none}
.ox-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.ox-pills label{padding:14px 30px;border-radius:66px;background:var(--ox-tab);color:#fff;font:500 16px/1 var(--f-body);cursor:pointer}
.ox-masonry{columns:3 320px;column-gap:14px}
.ox-masonry figure{margin:0 0 14px;break-inside:avoid;border-radius:8px;overflow:hidden;background:#fff}
.ox-masonry img{width:100%;height:auto}
.ox-masonry figcaption{padding:8px 12px;font-size:13px;line-height:1.4}
#ox-f-all:checked~.ox-pills label[for=ox-f-all],#ox-f-Buitenkant:checked~.ox-pills label[for=ox-f-Buitenkant],#ox-f-Binnenkant:checked~.ox-pills label[for=ox-f-Binnenkant],#ox-f-Omgeving:checked~.ox-pills label[for=ox-f-Omgeving],#ox-f-Plattegronden:checked~.ox-pills label[for=ox-f-Plattegronden]{background:var(--ox-grad)}
#ox-f-Buitenkant:checked~.ox-masonry figure:not([data-g=Buitenkant]),
#ox-f-Binnenkant:checked~.ox-masonry figure:not([data-g=Binnenkant]),
#ox-f-Omgeving:checked~.ox-masonry figure:not([data-g=Omgeving]),
#ox-f-Plattegronden:checked~.ox-masonry figure:not([data-g=Plattegronden]){display:none}

/* ---------- footer ---------- */
.ox-ft{max-width:var(--ox-w);margin:0 auto;padding:10px 24px 60px;text-align:center}
.ox-ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;list-style:none;margin:0 0 14px;padding:26px 0 0;border-top:1px solid color-mix(in srgb, var(--c-plum) 25%, transparent)}
.ox-ft-links a{font:500 14px/1.4 var(--f-body);color:var(--ox-or);text-decoration:none}
.ox-ft-links a:hover{text-decoration:underline}
.ox-ft-base{font-size:13px;margin:0;opacity:.8}

/* ---------- responsive ---------- */
@media(max-width:1000px){
	.ox-herorow,.ox-bottom,.ox-cols{grid-template-columns:1fr}
	.ox-side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
	.ox-book{position:static}
	.ox-hero{min-height:440px}
	.ox-hero h1{font-size:44px}
	.ox-usp{grid-template-columns:1fr 1fr}
	.ox-two,.ox-block{grid-template-columns:1fr;gap:24px}
	.ox-two--flip>:first-child,.ox-block:nth-of-type(even) .ox-bimg{order:0}
	.ox-reviews{grid-template-columns:1fr}
	.ox-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:260px 150px 150px}
	.ox-m0{grid-column:1/3;grid-row:1}
	.ox-m3{grid-column:auto}
	.ox-tabrow{grid-template-columns:1fr 1fr}
	.ox-checkgrid{grid-template-columns:1fr}
	.ox-h2{font-size:32px}
}
@media(max-width:560px){
	.ox-side{grid-template-columns:1fr}
	.ox-usp{grid-template-columns:1fr}
	.ox-hero-in{padding:26px}
	.ox-tabrow label,.ox-tabrow a.ox-tablink{padding:12px 14px}
	.ox-card{padding:24px}
	.ox-cta{padding:34px 24px}
	.ox-cta h2{font-size:28px}
}