:root{
--bg:#FFFFFF;--bg-2:#F7F7F5;--cream:#F7F7F5;--wood:#737373;--wood-dark:#404040;
--terra:#F95300;--terra-dark:#D94600;--ink:#0E0E0E;--ink-2:#404040;--line:#E5E5E5;
--white:#fff;--gold:#F95300;--shadow:0 4px 24px rgba(14,14,14,.08);
--shadow-lg:0 12px 48px rgba(14,14,14,.15);--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:500;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5vw,4rem)}h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}h3{font-size:1.35rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:all .25s;text-align:center}
.btn-primary{background:var(--terra);color:#fff}
.btn-primary:hover{background:var(--terra-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(249,83,0,.3)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-sm{padding:10px 20px;font-size:.85rem}
/* Top USP bar */
.topbar{background:var(--ink);color:#f5ead8;font-size:.82rem;padding:8px 0}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-usps{display:flex;gap:22px;flex-wrap:wrap}
.topbar-usps span::before{content:"✓ ";color:var(--gold)}
/* Header */
.header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--ink)}
.logo img{height:44px;width:auto}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-size:.93rem;font-weight:500;color:var(--ink-2);transition:color .2s;position:relative}
.nav a:hover,.nav a.active{color:var(--terra)}
.header-actions{display:flex;align-items:center;gap:14px}
.icon-btn{width:42px;height:42px;border-radius:50%;background:var(--cream);display:grid;place-items:center;position:relative;border:none;cursor:pointer}
.icon-btn:hover{background:var(--wood);color:#fff}
.cart-count{position:absolute;top:-4px;right:-4px;background:var(--terra);color:#fff;font-size:.7rem;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;font-weight:700;padding:0 5px}
.hamburger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer}
/* Hero with video bg */
.hero{position:relative;padding:130px 0 140px;overflow:hidden;color:#fff;min-height:640px;display:flex;align-items:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(25,16,10,.82) 0%,rgba(30,20,12,.6) 50%,rgba(40,25,15,.4) 100%);z-index:1}
.hero .container{position:relative;z-index:2}
.hero-content{max-width:620px;position:relative;z-index:2}
.hero-eyebrow{display:inline-block;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);padding:9px 20px;border-radius:999px;font-size:.82rem;font-weight:600;margin-bottom:26px;letter-spacing:.02em}
.hero h1{margin-bottom:22px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero h1 em{font-style:italic;color:var(--gold);font-family:'Fraunces',serif}
.hero p{font-size:1.12rem;color:rgba(255,255,255,.9);margin-bottom:34px;max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.btn-outline-light{background:transparent;color:#fff;border:2px solid #fff;padding:14px 28px;border-radius:999px;font-weight:600;font-size:.95rem;display:inline-block;transition:all .25s;cursor:pointer}
.btn-outline-light:hover{background:#fff;color:var(--ink)}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;padding-top:30px;border-top:1px solid rgba(255,255,255,.22)}
.hero-stats div strong{display:block;font-family:'Fraunces',serif;font-size:1.9rem;color:var(--gold)}
.hero-stats div span{font-size:.82rem;color:rgba(255,255,255,.78)}
/* Sections */
section{padding:80px 0}
.sec-head{text-align:center;margin-bottom:50px}
.sec-head .eyebrow{color:var(--terra);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;display:block}
.sec-head h2{margin-bottom:14px}
.sec-head p{color:var(--ink-2);max-width:600px;margin:0 auto}
/* Categories */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;grid-template-rows:280px 280px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-card:hover img{transform:scale(1.06)}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,34,27,.85),transparent 55%)}
.cat-card .label{position:absolute;left:24px;bottom:22px;right:24px;color:#fff;z-index:2}
.cat-card .label small{font-size:.8rem;opacity:.9;display:block;margin-bottom:4px}
.cat-card .label h3{color:#fff;font-size:1.6rem}
/* Product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px}
.prod-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all .3s;cursor:pointer}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prod-img{aspect-ratio:1;overflow:hidden;background:var(--cream);position:relative}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod-card:hover .prod-img img{transform:scale(1.05)}
.prod-badge{position:absolute;top:14px;left:14px;background:var(--terra);color:#fff;font-size:.72rem;padding:5px 11px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.prod-info{padding:20px}
.prod-info .brand{font-size:.75rem;color:var(--wood-dark);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.prod-info h3{font-size:1.1rem;margin:6px 0 10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600}
.prod-specs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:.75rem;color:var(--ink-2)}
.prod-specs span{background:var(--cream);padding:3px 9px;border-radius:999px}
.prod-price{display:flex;align-items:baseline;justify-content:space-between}
.prod-price strong{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--terra)}
.prod-price small{color:var(--ink-2);font-size:.8rem}
/* USP strip */
.usp-strip{background:var(--ink);color:#f5ead8;padding:60px 0}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.usp-item{text-align:center}
.usp-item .ico{width:56px;height:56px;margin:0 auto 16px;background:var(--terra);border-radius:50%;display:grid;place-items:center;font-size:1.5rem}
.usp-item h4{font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:6px;color:#fff}
.usp-item p{font-size:.88rem;opacity:.8}
/* Showroom section */
.showroom-sec{background:var(--bg-2)}
.showroom-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.showroom-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.showroom-img img{width:100%;height:100%;object-fit:cover}
.showroom-text h2{margin-bottom:20px}.showroom-text p{color:var(--ink-2);margin-bottom:18px;font-size:1.05rem}
.showroom-hours{background:#fff;border-radius:var(--radius);padding:24px;margin:24px 0;box-shadow:var(--shadow)}
.showroom-hours h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wood-dark);margin-bottom:14px}
.hours-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.92rem;border-bottom:1px dashed var(--line)}
.hours-row:last-child{border:none}
.hours-row.closed{color:#b0a090}
/* Reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow)}
.review .stars{color:var(--gold);margin-bottom:12px;font-size:1.1rem}
.review p{color:var(--ink-2);font-style:italic;margin-bottom:16px}
.review .author{font-weight:600;font-size:.9rem}
.review .author small{display:block;color:var(--ink-2);font-weight:400;font-size:.8rem}
/* Footer */
footer{background:var(--ink);color:#C9C2B8;padding:70px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-col h5{color:#fff;font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:18px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:10px;font-size:.9rem}
.foot-col a:hover{color:var(--gold)}
.foot-col p{font-size:.9rem;line-height:1.7}
.foot-bottom{border-top:1px solid #3d3128;padding-top:24px;text-align:center;font-size:.82rem;opacity:.7}
/* SHOP page */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:40px 0 80px}
.filters{background:#fff;padding:26px;border-radius:var(--radius);box-shadow:var(--shadow);height:fit-content;position:sticky;top:100px}
.filters h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wood-dark);margin:22px 0 12px}
.filters h4:first-child{margin-top:0}
.filter-opt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.9rem;cursor:pointer;color:var(--ink-2)}
.filter-opt input{accent-color:var(--terra);width:16px;height:16px}
.filter-opt:hover{color:var(--terra)}
.shop-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:14px}
.shop-bar .count{color:var(--ink-2);font-size:.9rem}
.shop-bar select{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:inherit;font-size:.88rem;cursor:pointer}
.page-header{background:var(--bg-2);padding:60px 0 40px;text-align:center}
.breadcrumbs{font-size:.82rem;color:var(--ink-2);margin-bottom:12px}
.breadcrumbs a:hover{color:var(--terra)}
/* PRODUCT page */
.prod-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:40px 0}
.prod-gallery{position:sticky;top:100px;height:fit-content}
.prod-gallery .main{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:var(--cream)}
.prod-gallery .main img{width:100%;height:100%;object-fit:cover}
.prod-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prod-thumbs div{aspect-ratio:1;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--cream)}
.prod-thumbs div.active{border-color:var(--terra)}
.prod-thumbs img{width:100%;height:100%;object-fit:cover}
.prod-detail h1{font-size:2.4rem;margin-bottom:8px}
.prod-detail .brand-tag{color:var(--wood-dark);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.prod-price-big{font-family:'Fraunces',serif;font-size:2.6rem;color:var(--terra);margin:14px 0}
.prod-price-big small{font-size:1rem;color:var(--ink-2);font-family:'Plus Jakarta Sans',sans-serif}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0;padding:22px;background:var(--cream);border-radius:var(--radius)}
.spec-list div{font-size:.88rem}
.spec-list div small{display:block;color:var(--ink-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
/* Calculator */
.calc{background:#fff;border:2px solid var(--terra);border-radius:var(--radius);padding:26px;margin:24px 0;box-shadow:var(--shadow)}
.calc h3{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:6px;color:var(--terra)}
.calc .sub{font-size:.85rem;color:var(--ink-2);margin-bottom:18px}
.calc-input{display:flex;gap:12px;margin-bottom:18px}
.calc-input input{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit}
.calc-input input:focus{outline:none;border-color:var(--terra)}
.calc-result{background:var(--bg-2);border-radius:10px;padding:16px;margin-bottom:18px;display:none}
.calc-result.show{display:block}
.calc-result .row{display:flex;justify-content:space-between;padding:6px 0;font-size:.9rem}
.calc-result .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:1.1rem;font-weight:700}
.calc-result .row.total strong{color:var(--terra);font-family:'Fraunces',serif;font-size:1.4rem}
.addons{margin:18px 0}
.addon{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-2);border-radius:10px;margin-bottom:8px;cursor:pointer}
.addon input{accent-color:var(--terra);width:18px;height:18px}
.addon-info{flex:1;font-size:.88rem}
.addon-info strong{display:block}
.addon-info small{color:var(--ink-2)}
.addon-price{font-weight:700;color:var(--terra)}
/* Cart page */
.cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;padding:40px 0 80px}
.cart-item{display:grid;grid-template-columns:100px 1fr auto;gap:20px;padding:20px;background:#fff;border-radius:var(--radius);margin-bottom:14px;box-shadow:var(--shadow);align-items:center}
.cart-item img{width:100px;height:100px;object-fit:cover;border-radius:10px}
.cart-item h4{font-size:1.05rem;margin-bottom:4px}
.cart-item .meta{font-size:.82rem;color:var(--ink-2);margin-bottom:8px}
.qty-ctrl{display:inline-flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:999px;padding:4px}
.qty-ctrl button{width:28px;height:28px;border-radius:50%;border:none;background:#fff;cursor:pointer;font-weight:700}
.item-price{text-align:right}
.item-price strong{display:block;font-family:'Fraunces',serif;color:var(--terra);font-size:1.2rem}
.item-price button{background:none;border:none;color:var(--ink-2);font-size:.78rem;cursor:pointer;margin-top:6px;text-decoration:underline}
.cart-summary{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);height:fit-content;position:sticky;top:100px}
.cart-summary h3{margin-bottom:20px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;font-size:.92rem;border-bottom:1px dashed var(--line)}
.sum-row.big{border:none;border-top:2px solid var(--ink);margin-top:10px;padding-top:16px;font-size:1.15rem;font-weight:700}
.sum-row.big strong{color:var(--terra);font-family:'Fraunces',serif;font-size:1.5rem}
.empty-cart{text-align:center;padding:80px 20px}
.empty-cart h2{margin-bottom:14px}
/* Checkout */
.checkout-form{display:grid;gap:18px;background:#fff;padding:32px;border-radius:var(--radius);box-shadow:var(--shadow)}
.checkout-form h3{margin-bottom:10px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input,.field textarea,.field select{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--bg)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--terra)}
.pay-options{display:grid;gap:10px}
.pay-opt{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--line);border-radius:10px;cursor:pointer}
.pay-opt input{accent-color:var(--terra)}
.pay-opt.active{border-color:var(--terra);background:#fff5f0}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:40px 0 80px}
.contact-info h3{margin-bottom:14px}
.contact-info .item{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .item strong{display:block;color:var(--wood-dark);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
/* Flash */
.flash{position:fixed;top:100px;right:24px;background:var(--ink);color:#fff;padding:16px 24px;border-radius:10px;box-shadow:var(--shadow-lg);z-index:100;transform:translateX(400px);transition:transform .35s;font-size:.9rem}
.flash.show{transform:translateX(0)}
.flash.success{background:#3d7a4a}
/* Responsive */
@media(max-width:900px){
.nav{display:none}.hamburger{display:block}
.hero{padding:70px 0 80px;min-height:540px}
.hero-video{object-position:center}
.cat-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.cat-card:nth-child(1){grid-row:auto;grid-column:span 2}
.usp-grid{grid-template-columns:1fr 1fr;gap:30px}
.showroom-grid,.prod-detail,.cart-layout,.contact-grid,.shop-layout{grid-template-columns:1fr;gap:30px}
.reviews-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.form-row{grid-template-columns:1fr}
.prod-gallery,.cart-summary,.filters{position:static}
}
/* === High-end polish === */
.topbar-usps span{transition:color .2s}
.btn-primary{box-shadow:0 4px 14px rgba(249,83,0,.25)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(249,83,0,.4)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--terra);transition:right .3s}
.nav a:hover::after,.nav a.active::after{right:0}
section{scroll-margin-top:80px}
.hero h1{animation:fadeUp .8s ease both}
.hero p{animation:fadeUp .8s ease .15s both}
.hero-cta{animation:fadeUp .8s ease .3s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.icon-btn{transition:all .25s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
img[loading="lazy"]{transition:opacity .4s}
::selection{background:var(--terra);color:#fff}
html{scroll-behavior:smooth}
@media(max-width:768px){.cfg-tabs{width:100%}.cfg-tab{flex:1;padding:12px 16px;font-size:.85rem}}
/* === V3: Premium header + dropdown + logo + WhatsApp === */
/* Topbar — premium */
.topbar{background:linear-gradient(90deg,#1a120b 0%,#0E0E0E 50%,#1a120b 100%);color:#e8d4b0;font-size:.78rem;padding:10px 0;letter-spacing:.02em;border-bottom:1px solid rgba(212,165,116,.2)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-usps{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.topbar-usps span{display:inline-flex;align-items:center;gap:7px;color:#e8d4b0;font-weight:500}
.topbar-usps span::before{content:none}
.topbar-usps span svg{color:var(--gold);flex-shrink:0}
.topbar-right{display:flex;align-items:center;gap:12px;color:#F95300}
.topbar-phone{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;transition:color .2s}
.topbar-phone:hover{color:var(--gold)}
.topbar-sep{color:rgba(212,165,116,.4)}
.topbar-hours{font-size:.76rem;color:rgba(232,212,176,.75)}
@media(max-width:860px){.topbar-hours,.topbar-sep{display:none}.topbar-usps{gap:14px;font-size:.72rem}.topbar-usps span:nth-child(4){display:none}}
/* Header — bigger logo, centered nav, tighter spacing */
.header{background:rgba(250,246,241,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(229,217,198,.6)}
.header-inner{padding:14px 0;gap:30px}
.logo img{height:60px !important;width:auto;display:block}
.logo span{display:none} /* hide duplicate text — logo has name */
.nav{display:flex;gap:8px;align-items:center;flex:1;justify-content:flex-end;padding-right:24px}
.nav > a,.nav-dd > a{padding:10px 16px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--ink);transition:all .2s;display:inline-flex;align-items:center;gap:5px;position:relative}
.nav > a::after,.nav-dd > a::after{display:none} /* remove old underline */
.nav > a:hover,.nav-dd:hover > a{background:var(--cream);color:var(--ink)}
.nav > a.active{background:var(--cream);color:var(--terra)}
/* nav-cta oranje verwijderd (fase1) */
/* nav-cta oranje verwijderd (fase1) */
/* nav-cta oranje verwijderd (fase1) */
/* Dropdown */
.nav-dd{position:relative}
.nav-dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 20px 50px rgba(14,14,14,.15);min-width:280px;opacity:0;visibility:hidden;transition:all .25s;z-index:100}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.nav-dd-menu a{display:flex;flex-direction:column;padding:12px 14px;border-radius:10px;transition:background .15s}
.nav-dd-menu a:hover{background:var(--cream)}
.nav-dd-menu a strong{font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:2px}
.nav-dd-menu a small{color:var(--ink-2);font-size:.78rem;font-weight:400}
/* Hamburger — premium 3-line */
.hamburger{display:none;background:none;border:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);transition:all .3s;border-radius:2px}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){
.hamburger{display:flex}
.nav{position:fixed;top:0;right:-100%;width:100vw;max-width:100vw;height:100vh;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:80px 28px 32px;gap:0;box-shadow:none;transition:right .3s ease;z-index:60;overflow-y:auto}
.nav.open,body.menu-open .nav{right:0}
.nav > a,.nav-dd > a{padding:18px 4px !important;width:100%;justify-content:space-between;font-size:1.1rem !important;font-weight:500 !important;color:#1a130d !important;border-bottom:1px solid rgba(0,0,0,0.08) !important;text-decoration:none}
.nav-cta{margin-top:10px;text-align:center;justify-content:center}
.nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:8px 0 12px 16px;min-width:0;background:transparent;display:block}
.nav-dd-menu a{display:flex;flex-direction:column;padding:10px 14px;border-radius:8px;color:#1a130d;text-decoration:none;background:rgba(238,116,34,0.04);margin-bottom:6px;border:none !important}
.nav-dd-menu a:hover{background:rgba(238,116,34,0.1)}
.nav-dd-menu a strong{font-size:.95rem;font-weight:600;color:#1a130d}
.nav-dd-menu a small{font-size:.8rem;color:rgba(26,19,13,0.6);margin-top:2px}
.nav > a.active{color:#ee7422 !important;font-weight:600 !important}
.nav-dd.mobile-open .nav-dd-menu{display:block}
.nav-dd-menu::before{display:none}
}
/* WhatsApp float button */
.wa-float{position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:#25D366;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:998;color:#fff;transition:all .25s;animation:waPulse 2.5s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1);box-shadow:0 12px 30px rgba(37,211,102,.55)}
.wa-float svg{width:32px;height:32px}
.wa-float::after{content:"Vraag advies";position:absolute;right:72px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.wa-float:hover::after{opacity:1}
@keyframes waPulse{0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 8px 24px rgba(37,211,102,.4),0 0 0 14px rgba(37,211,102,0)}}
@media(max-width:640px){.wa-float{width:54px;height:54px;bottom:18px;right:18px}.wa-float::after{display:none}}
/* Premium upgrades across site */
.btn-primary{background:linear-gradient(135deg,var(--terra) 0%,var(--terra-dark) 100%)}
.hero-eyebrow{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* === V4: Premium content sections === */
/* Trust strip (brand dealers) */
.trust-strip{padding:40px 0 !important;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-label{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:20px}
.trust-logos{display:flex;justify-content:center;align-items:center;gap:50px;flex-wrap:wrap}
.trust-logos span{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;color:var(--ink);opacity:.55;font-style:italic;transition:opacity .2s;letter-spacing:.02em}
.trust-logos span:hover{opacity:1;color:var(--terra)}
@media(max-width:640px){.trust-logos{gap:24px}.trust-logos span{font-size:1rem}}
/* USP strip upgrade — SVG icons in gold circle */
.usp-strip{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);padding:70px 0 !important}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:860px){.usp-grid{grid-template-columns:repeat(2,1fr)}}
.usp-item{text-align:center;padding:30px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:all .3s;box-shadow:0 1px 3px rgba(14,14,14,.04)}
.usp-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.usp-item .ico{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--wood-dark));color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(212,165,116,.3)}
.usp-item .ico svg{width:28px;height:28px}
.usp-item h4{font-family:'Fraunces',serif;font-size:1.15rem;margin-bottom:8px;color:var(--ink)}
.usp-item p{font-size:.88rem;color:var(--ink-2);line-height:1.55}
/* Process section — timeline style */
.process-sec{background:var(--ink);color:#f5ead8;padding:100px 0 !important;position:relative;overflow:hidden}
.process-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(212,165,116,.15),transparent 60%);pointer-events:none}
.process-sec .sec-head{text-align:center;margin-bottom:60px;position:relative}
.process-sec .eyebrow{color:var(--gold);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.process-sec h2{color:#fff;margin:14px 0 14px}
.process-sec h2 em{color:var(--gold);font-style:italic}
.process-sec .sec-head p{color:rgba(245,234,216,.75);max-width:580px;margin:0 auto;font-size:1.05rem}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.process-grid::before{content:"";position:absolute;top:40px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,165,116,.4),rgba(212,165,116,.4),transparent)}
@media(max-width:860px){.process-grid{grid-template-columns:repeat(2,1fr)}.process-grid::before{display:none}}
@media(max-width:520px){.process-grid{grid-template-columns:1fr}}
.process-step{position:relative;padding:20px;text-align:center}
.process-num{width:80px;height:80px;margin:0 auto 22px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);display:grid;place-items:center;font-family:'Fraunces',serif;font-size:1.6rem;color:var(--gold);font-weight:500;position:relative;z-index:2;transition:all .3s}
.process-step:hover .process-num{background:var(--gold);color:var(--ink);transform:scale(1.08)}
.process-step h3{font-family:'Fraunces',serif;font-size:1.2rem;color:#fff;margin-bottom:10px}
.process-step p{color:rgba(245,234,216,.72);font-size:.92rem;line-height:1.6}
/* Product cards upgrade */
.prod-card{background:#fff;border-radius:var(--radius);overflow:hidden;transition:all .3s;border:1px solid var(--line);display:block}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--wood)}
.prod-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.prod-badge{position:absolute;top:14px;left:14px;background:var(--terra);color:#fff;font-size:.7rem;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 10px rgba(249,83,0,.3);z-index:2}
.prod-info{padding:20px}
.prod-info .brand{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--wood-dark);font-weight:600;margin-bottom:6px}
.prod-info h3{font-size:1.05rem;margin-bottom:10px;line-height:1.3}
.prod-specs{display:flex;gap:8px;margin-bottom:12px}
.prod-specs span{font-size:.72rem;padding:3px 10px;background:var(--cream);border-radius:999px;color:var(--ink-2);font-weight:500}
.prod-price{display:flex;align-items:baseline;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.prod-price strong{font-family:'Fraunces',serif;font-size:1.35rem;color:var(--terra)}
.prod-price small{color:var(--ink-2);font-size:.8rem}
/* Reviews upgrade */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.reviews-grid{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;box-shadow:0 2px 8px rgba(14,14,14,.04);transition:all .3s}
.review:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.review::before{content:"\201C";position:absolute;top:-5px;right:20px;font-family:'Fraunces',serif;font-size:5rem;color:var(--cream);line-height:1;font-weight:600}
.review .stars{color:var(--gold);font-size:1rem;letter-spacing:.15em;margin-bottom:12px;position:relative;z-index:1}
.review p{font-size:.95rem;color:var(--ink);line-height:1.65;margin-bottom:18px;font-style:italic;position:relative;z-index:1}
.review .author{font-weight:600;color:var(--ink);font-size:.92rem;padding-top:14px;border-top:1px solid var(--line)}
.review .author small{display:block;font-weight:400;color:var(--ink-2);font-size:.78rem;margin-top:2px}
/* Category cards upgrade */
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;display:block;box-shadow:var(--shadow)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-card:hover img{transform:scale(1.08)}
.cat-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(25,15,8,.85) 100%);z-index:1}
.cat-card .label{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:2}
.cat-card .label small{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:6px;font-weight:600}
.cat-card .label h3{color:#fff;font-size:1.25rem}
.cat-card::after{content:"→";position:absolute;top:20px;right:20px;width:42px;height:42px;background:#fff;color:var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:600;opacity:0;transform:translateX(10px);transition:all .3s;z-index:2}
.cat-card:hover::after{opacity:1;transform:translateX(0)}
/* Section heads refined */
.sec-head{text-align:center;margin-bottom:50px;max-width:700px;margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);font-weight:600;margin-bottom:14px}
.sec-head h2{margin-bottom:12px}
.sec-head h2 em{color:var(--terra);font-style:italic}
.sec-head p{color:var(--ink-2);font-size:1.02rem;max-width:560px;margin:0 auto}
/* === V5: Reviews slider, Quiz, FAQ === */
/* Reviews slider */
.reviews-slider{position:relative;max-width:900px;margin:0 auto;overflow:hidden}
.reviews-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.reviews-track .review{flex:0 0 100%;min-width:100%;margin-right:24px;box-sizing:border-box}
.reviews-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.reviews-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--line);cursor:pointer;transition:all .25s;padding:0}
.reviews-dots button.active{background:var(--terra);width:28px;border-radius:4px}
.reviews-dots button:hover{background:var(--wood)}
/* Quiz */
.quiz-sec{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);padding:90px 0 !important}
.quiz-box{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-lg);position:relative}
.quiz-progress{height:4px;background:var(--cream);border-radius:2px;margin-bottom:32px;overflow:hidden}
.quiz-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--terra),var(--gold));transition:width .4s;border-radius:2px}
.quiz-step{display:none;animation:fadeUp .5s ease}
.quiz-step.active{display:block}
.quiz-step h3{font-size:1.35rem;margin-bottom:22px;text-align:center;font-family:'Fraunces',serif}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.quiz-opts{grid-template-columns:1fr}}
.quiz-opts button{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:20px;cursor:pointer;font-family:inherit;font-weight:600;color:var(--ink);transition:all .25s;font-size:.95rem;text-align:center}
.quiz-opts button:hover{border-color:var(--terra);background:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(249,83,0,.12)}
.quiz-colors button{padding:30px 14px;color:#fff;background:var(--c);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0 1px,transparent 1px 22px);text-shadow:0 1px 3px rgba(0,0,0,.4);border-color:transparent}
.quiz-colors button:hover{transform:translateY(-2px) scale(1.02)}
.quiz-result{text-align:center}
.quiz-badge{display:inline-block;background:var(--gold);color:var(--ink);padding:6px 16px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.quiz-result h3{font-size:1.9rem;color:var(--terra);margin-bottom:10px}
.quiz-result p{color:var(--ink-2);max-width:480px;margin:0 auto 24px;font-size:1rem;line-height:1.6}
.quiz-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* FAQ */
.faq-sec{padding:90px 0 !important;background:var(--bg)}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .25s}
.faq-item[open]{border-color:var(--wood);box-shadow:var(--shadow)}
.faq-item summary{padding:22px 26px;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--terra)}
.faq-icon{width:32px;height:32px;border-radius:50%;background:var(--cream);display:grid;place-items:center;font-size:1.4rem;font-weight:300;color:var(--ink);transition:all .3s;flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;line-height:1}
.faq-item[open] .faq-icon{background:var(--terra);color:#fff;transform:rotate(45deg)}
.faq-item p{padding:0 26px 24px;color:var(--ink-2);line-height:1.7;font-size:.95rem;animation:fadeUp .35s ease}
/* === V6: Logo integration + brand grid + form messages === */
/* Logo — subtle containing card that makes the dark JPG look intentional */
.logo{display:inline-flex;align-items:center;padding:0;background:transparent;border-radius:8px;transition:transform .25s}
.logo:hover{transform:translateY(-1px)}
.logo img{height:52px !important;width:auto;display:block;border-radius:6px;box-shadow:0 2px 8px rgba(14,14,14,.08)}
.header{background:#FFFFFF !important;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(229,217,198,.8)}
.header-inner{padding:14px 0}
@media(max-width:640px){.logo img{height:42px !important}}
/* Brand grid — premium partners */
.trust-strip{padding:90px 0 !important;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);border-top:none;border-bottom:none}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media(max-width:860px){.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){.brand-grid{grid-template-columns:repeat(2,1fr)}}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 14px;text-align:center;transition:all .3s;cursor:default;position:relative;overflow:hidden}
.brand-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--terra),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.brand-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.brand-card:hover::before{transform:scaleX(1)}
.brand-card .brand-name{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.brand-card small{display:block;font-size:.74rem;color:var(--ink-2);line-height:1.35}
/* Form messages */
.msg-ok{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#1b5e20;padding:14px 18px;border-radius:10px;margin-bottom:16px;font-weight:500;border-left:4px solid #2e7d32}
.msg-err{background:linear-gradient(135deg,#ffebee,#ffcdd2);color:#b71c1c;padding:14px 18px;border-radius:10px;margin-bottom:16px;font-weight:500;border-left:4px solid #c62828}
/* Contact info — clickable links */
.contact-info .item a{color:var(--terra);font-weight:500;transition:color .2s}
.contact-info .item a:hover{color:var(--terra-dark);text-decoration:underline}
/* === V7: Structural spacing + section contrast === */
/* Give partners section a distinct background (lighter) and USP a different one (deeper cream) so they don't visually merge */
.trust-strip{background:#fff !important;padding:80px 0 !important;position:relative}
.trust-strip::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:var(--wood);opacity:.3}
.usp-strip{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%) !important;padding:80px 0 !important;position:relative}
/* Category section spacing */
section{padding:70px 0}
.sec-head{margin-bottom:42px}
/* Hero polish — less heavy stats */
.hero{min-height:580px !important;padding:110px 0 120px !important}
/* Brand cards — more sophisticated */
.brand-card{padding:28px 16px;background:#FFFFFF;border:1px solid transparent;box-shadow:0 1px 3px rgba(14,14,14,.05)}
.brand-card:hover{background:#fff;border-color:var(--gold);box-shadow:0 10px 30px rgba(14,14,14,.08);transform:translateY(-3px)}
.brand-card .brand-name{font-size:1.15rem}
.brand-card small{font-size:.76rem;margin-top:4px;opacity:.8}
/* Better visual rhythm — USP cards more distinctive than brand cards */
.usp-item{background:#fff;padding:34px 22px;border:1px solid rgba(229,217,198,.6)}
.usp-item .ico{width:54px;height:54px;margin-bottom:16px}
.usp-item .ico svg{width:24px;height:24px}
/* Logo-matching header transition */
.topbar{border-bottom:none}
.header{box-shadow:0 1px 0 rgba(229,217,198,.5)}
/* === V7b: Legal page (privacy) === */
.legal-body{max-width:780px;margin:0 auto;color:var(--ink);line-height:1.75;font-size:1rem}
.legal-body h2{font-family:'Fraunces',serif;font-size:1.45rem;margin:36px 0 14px;color:var(--ink);padding-top:14px;border-top:1px solid var(--line)}
.legal-body h2:first-of-type{border-top:none;padding-top:0}
.legal-body p{margin-bottom:14px;color:var(--ink-2)}
.legal-body ul{margin:0 0 18px 0;padding-left:20px}
.legal-body li{margin-bottom:8px;color:var(--ink-2)}
.legal-body a{color:var(--terra);text-decoration:underline}
.legal-body a:hover{color:var(--terra-dark)}
.legal-body strong{color:var(--ink);font-weight:600}
/* Page header shared */
.page-header{background:var(--bg-2);padding:60px 0 30px;border-bottom:1px solid var(--line)}
.page-header h1{font-family:'Fraunces',serif;margin-top:10px}
.breadcrumbs{font-size:.85rem;color:var(--ink-2)}
.breadcrumbs a{color:var(--terra)}
/* === V8: Dark header — integrates the black logo naturally === */
.header{background:linear-gradient(180deg,#1e1509 0%,#261b0f 100%) !important;border-bottom:1px solid rgba(212,165,116,.15) !important;box-shadow:0 2px 20px rgba(0,0,0,.15) !important;position:sticky;top:0;z-index:50}
.header-inner{padding:12px 0 !important}
/* Logo — now sits on dark so JPG integrates, no card wrapper look */
.logo{padding:0;background:none;transition:opacity .2s}
.logo:hover{opacity:.85;transform:none}
.logo img{height:54px !important;border-radius:4px;box-shadow:none;background:transparent}
@media(max-width:640px){.logo img{height:44px !important}}
/* Nav links — light text on dark bg */
.nav > a,.nav-dd > a{color:rgba(245,234,216,.85) !important;font-weight:500}
.nav > a:hover,.nav-dd:hover > a{background:rgba(212,165,116,.12) !important;color:#fff !important}
.nav > a.active{background:rgba(212,165,116,.15) !important;color:var(--gold) !important}
/* Configurator CTA stays terra — but add a gold glow on dark */
/* nav-cta oranje verwijderd (fase1) */
/* nav-cta oranje verwijderd (fase1) */
/* Dropdown — keep light panel, adjust arrow */
.nav-dd-menu{background:#fff;border:1px solid rgba(212,165,116,.3)}
.nav-dd-menu::before{background:#fff;border-left:1px solid rgba(212,165,116,.3);border-top:1px solid rgba(212,165,116,.3)}
/* Cart icon — light on dark */
.icon-btn{background:rgba(255,255,255,.08) !important;color:#f5ead8 !important;border:1px solid rgba(212,165,116,.2)}
.icon-btn:hover{background:rgba(212,165,116,.2) !important;color:#fff !important}
.icon-btn svg{stroke:#f5ead8}
.icon-btn:hover svg{stroke:#fff}
.cart-count{background:var(--terra) !important;color:#fff;border:2px solid #1e1509}
/* Hamburger bars — light */
.hamburger span{background:#f5ead8 !important}
/* Topbar — match the darker header, slightly deeper */
.topbar{background:linear-gradient(90deg,#120c06 0%,#1e1509 50%,#120c06 100%) !important;border-bottom:1px solid rgba(212,165,116,.12) !important}
/* Mobile slide-in nav — keep light but adjust trigger */
@media(max-width:960px){
.nav{background:#fff !important}
.nav > a,.nav-dd > a{color:var(--ink) !important}
.nav > a:hover,.nav-dd:hover > a{background:var(--cream) !important;color:var(--ink) !important}
.nav > a.active{background:var(--cream) !important;color:var(--terra) !important}
}
/* === V9: Pure black header/topbar === */
.header{background:#000 !important;border-bottom:1px solid rgba(212,165,116,.18) !important}
.topbar{background:#000 !important;border-bottom:1px solid rgba(212,165,116,.1) !important}
.cart-count{border-color:#000 !important}
/* === V10: Footer USP bar (replaces topbar) === */
.foot-usp-bar{background:linear-gradient(180deg,var(--bg-2) 0%,var(--cream) 100%);border-top:1px solid var(--line);padding:32px 0}
.foot-usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:center}
@media(max-width:860px){.foot-usp-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:520px){.foot-usp-grid{grid-template-columns:1fr}}
.foot-usp-grid > div{display:flex;align-items:center;gap:14px}
.foot-usp-grid svg{color:var(--terra);flex-shrink:0;background:#fff;padding:10px;width:44px !important;height:44px !important;border-radius:50%;box-shadow:0 2px 8px rgba(14,14,14,.06);box-sizing:content-box}
.foot-usp-grid strong{display:block;font-family:'Fraunces',serif;font-size:1rem;color:var(--ink);font-weight:500}
.foot-usp-grid small{display:block;font-size:.78rem;color:var(--ink-2);margin-top:2px}
/* === V11: Service pages, video player, 404 === */
/* Service pages (trappen, vloerverwarming) */
.service-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:start}
@media(max-width:860px){.service-grid{grid-template-columns:1fr}}
.service-text h2{margin:14px 0 18px}
.service-text h2 em{color:var(--terra);font-style:italic}
.service-text > p{color:var(--ink-2);font-size:1.05rem;margin-bottom:22px;line-height:1.7}
.feat-list{list-style:none;padding:0;margin:20px 0}
.feat-list li{padding:12px 0 12px 32px;border-bottom:1px solid var(--line);position:relative;color:var(--ink-2);font-size:.95rem}
.feat-list li::before{content:"✓";position:absolute;left:0;top:12px;width:22px;height:22px;background:var(--terra);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.feat-list li strong{color:var(--ink)}
.vv-systems{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:640px){.vv-systems{grid-template-columns:1fr}}
.vv-sys{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;transition:all .25s}
.vv-sys:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.vv-sys h3{font-size:1.1rem;margin-bottom:8px}
.vv-sys p{font-size:.9rem;color:var(--ink-2);margin-bottom:12px;line-height:1.55}
.vv-sys strong{color:var(--terra);font-family:'Fraunces',serif;font-size:1.1rem}
.service-visual{position:sticky;top:100px}
.service-price-card{background:linear-gradient(135deg,var(--ink) 0%,#3d2817 100%);color:#f5ead8;border-radius:var(--radius);padding:36px 30px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.service-price-card::before{content:"";position:absolute;top:0;right:0;width:160px;height:160px;background:radial-gradient(circle,rgba(212,165,116,.2),transparent 70%)}
.service-price-card small{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:600;display:block}
.service-price-card strong{font-family:'Fraunces',serif;font-size:3.2rem;color:#fff;display:block;margin:6px 0;line-height:1}
.service-price-card > span{display:block;color:rgba(245,234,216,.7);font-size:.9rem;margin-bottom:22px}
.service-points{padding-top:20px;border-top:1px solid rgba(212,165,116,.25)}
.service-points div{padding:8px 0;font-size:.9rem;color:rgba(245,234,216,.85)}
/* Showroom video player */
.showroom-video-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#000;aspect-ratio:16/9;max-width:980px;margin:0 auto}
.showroom-video{width:100%;height:100%;object-fit:cover;display:block}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;transition:all .3s;z-index:3;padding:0}
.video-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.video-play svg{filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.video-caption{position:absolute;bottom:20px;left:20px;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);color:#fff;padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:500;z-index:2;letter-spacing:.02em}
/* 404 page */
.err-404{padding:80px 0 120px;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.err-visual{position:relative;max-width:500px;margin:0 auto 30px;aspect-ratio:2/1}
.err-svg{width:100%;height:100%;overflow:visible}
.err-num{animation:errFloat 4s ease-in-out infinite}
@keyframes errFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.err-plank{position:absolute;bottom:10px;height:12px;background:linear-gradient(90deg,var(--wood),var(--wood-dark));border-radius:3px;animation:errSlide 2.5s var(--d) ease-in-out infinite;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.err-plank:nth-child(2){width:80px;left:20%}
.err-plank:nth-child(3){width:120px;left:42%}
.err-plank:nth-child(4){width:70px;left:68%}
@keyframes errSlide{0%,100%{transform:rotate(-8deg) translateX(0)}50%{transform:rotate(5deg) translateX(8px)}}
.err-404 h1{margin-bottom:14px;font-size:2.2rem}
.err-404 p{color:var(--ink-2);max-width:500px;margin:0 auto 30px;font-size:1.05rem}
.err-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Page header shared refinement */
.page-header{text-align:center}
.page-header .breadcrumbs{text-align:left;max-width:1240px;margin:0 auto 10px}
/* Language switcher */
.lang-switch{display:flex;align-items:center;gap:6px;color:rgba(245,234,216,.6);font-size:.82rem;font-weight:600;letter-spacing:.06em;padding:0 6px;border-right:1px solid rgba(212,165,116,.2);padding-right:14px;margin-right:6px}
.lang-switch a{color:rgba(245,234,216,.6);padding:4px 6px;border-radius:4px;transition:all .2s}
.lang-switch a.on{color:var(--gold);background:rgba(212,165,116,.12)}
.lang-switch a:hover{color:#fff}
.lang-switch span{color:rgba(245,234,216,.3)}
@media(max-width:520px){.lang-switch{padding-right:8px;margin-right:4px;font-size:.75rem}}
/* === V12: Google Maps embed === */
.map-sec{padding:60px 0 !important;background:var(--bg)}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:21/9;border:1px solid var(--line)}
@media(max-width:720px){.map-wrap{aspect-ratio:4/3}}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
/* === V14: Cream header (so white logo text stays readable) === */
.header{background:#FFFFFF !important;border-bottom:1px solid rgba(229,217,198,.8) !important;box-shadow:0 1px 0 rgba(229,217,198,.8) !important}
.logo img{height:44px !important;border-radius:0 !important;box-shadow:none !important;filter:none !important}
/* Nav links on white */
.nav > a,.nav-dd > a{color:var(--ink) !important;font-weight:500}
.nav > a:hover,.nav-dd:hover > a{background:var(--cream) !important;color:var(--ink) !important}
.nav > a.active{background:var(--cream) !important;color:var(--terra) !important}
/* CTA button stays terra */
/* nav-cta oranje verwijderd (fase1) */
/* Dropdown panels remain white with shadow */
.nav-dd-menu{background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px rgba(14,14,14,.12)}
/* Icon button (now phone) */
.icon-btn{background:var(--cream) !important;color:var(--ink) !important;border:1px solid var(--line)}
.icon-btn:hover{background:var(--terra) !important;color:#fff !important}
.icon-btn svg{stroke:var(--ink)}
.icon-btn:hover svg{stroke:#fff}
/* Hamburger */
.hamburger span{background:var(--ink) !important}
/* Language switcher on white */
.lang-switch{color:var(--ink-2);border-right-color:var(--line)}
.lang-switch a{color:var(--ink-2)}
.lang-switch a.on{color:var(--terra);background:var(--cream)}
.lang-switch a:hover{color:var(--ink)}
.lang-switch span{color:var(--line)}
/* === V19: Comprehensive mobile fixes === */
/* Base: prevent horizontal scroll */
html,body{overflow-x:hidden;max-width:100vw}
@media(max-width:768px){
/* Container padding tighter */
.container{padding:0 16px}
/* Header mobile */
.header-inner{padding:10px 0 !important}
.logo img{height:36px !important}
/* Reorder header-actions on mobile: lang, phone, hamburger */
.header-actions{gap:8px}
.lang-switch{padding-right:8px;margin-right:2px;font-size:.72rem;border-right-width:0}
.lang-switch a{padding:3px 4px}
.lang-switch span{display:none}
.icon-btn{width:38px;height:38px}
.icon-btn svg{width:18px;height:18px}
/* Hero */
.hero{min-height:480px !important;padding:70px 0 !important}
.hero h1{font-size:2rem !important;line-height:1.15}
.hero p{font-size:1rem;margin-bottom:24px}
.hero-eyebrow{font-size:.72rem;padding:7px 14px;margin-bottom:18px}
.hero-cta{flex-direction:column;gap:10px;width:100%;margin-bottom:28px}
.hero-cta .btn,.hero-cta .btn-outline-light{width:100%;text-align:center}
.hero-stats{gap:20px;padding-top:20px}
.hero-stats div strong{font-size:1.3rem}
.hero-stats div span{font-size:.7rem}
/* Section spacing */
section{padding:48px 0 !important}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:1.6rem}
.sec-head p{font-size:.92rem}
.eyebrow{font-size:.7rem}
/* Category grid — stack to 1 col on phone, 2 col on small tablet */
.cat-grid{grid-template-columns:1fr !important;grid-template-rows:none !important;gap:12px}
.cat-card{aspect-ratio:16/9;min-height:180px}
.cat-card:nth-child(1){grid-row:auto !important;grid-column:auto !important}
.cat-card .label{padding:16px}
.cat-card .label h3{font-size:1.1rem}
/* USP grid 1 col */
.usp-grid{grid-template-columns:1fr !important;gap:12px}
.usp-item{padding:22px 18px}
.usp-item .ico{width:44px;height:44px;margin-bottom:12px}
.usp-item .ico svg{width:20px;height:20px}
.usp-item h4{font-size:1rem}
.usp-item p{font-size:.85rem}
/* Partners */
.brand-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
.brand-card{padding:18px 12px}
.brand-card .brand-name{font-size:1rem}
.brand-card small{font-size:.7rem}
/* Process steps */
.process-grid{grid-template-columns:1fr !important;gap:16px}
.process-grid::before{display:none}
.process-step{padding:16px;text-align:left;display:flex;gap:16px;align-items:flex-start}
.process-num{width:56px;height:56px;font-size:1.2rem;margin:0;flex-shrink:0}
.process-step h3{font-size:1.05rem;margin-bottom:6px}
.process-step p{font-size:.9rem}
/* Product grid */
.prod-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}
.prod-info{padding:14px}
.prod-info h3{font-size:.92rem}
.prod-price strong{font-size:1.1rem}
/* Reviews slider */
.reviews-slider{max-width:100%}
.review{padding:22px 18px}
.review p{font-size:.9rem}
.review::before{font-size:3.5rem;top:0;right:14px}
/* Showroom section */
.showroom-grid{grid-template-columns:1fr !important;gap:24px}
.showroom-img{aspect-ratio:4/3}
.showroom-text h2{font-size:1.5rem}
.hours-row{font-size:.88rem}
/* FAQ */
.faq-item summary{padding:16px 18px;font-size:.98rem;gap:14px}
.faq-icon{width:26px;height:26px;font-size:1.2rem}
.faq-item p{padding:0 18px 18px;font-size:.9rem}
/* Quiz */
.quiz-box{padding:24px 18px}
.quiz-step h3{font-size:1.15rem;margin-bottom:16px}
.quiz-opts{grid-template-columns:1fr !important;gap:8px}
.quiz-opts button{padding:14px}
.quiz-colors button{padding:22px 10px}
.quiz-result h3{font-size:1.4rem}
.quiz-cta{flex-direction:column}
.quiz-cta .btn{width:100%}
/* Footer */
.foot-grid{grid-template-columns:1fr !important;gap:24px}
.foot-col h5{font-size:.9rem;margin-bottom:10px}
.foot-col ul{font-size:.88rem}
.foot-col p{font-size:.9rem}
.foot-bottom{font-size:.78rem;padding:18px 0;text-align:center}
/* Footer USP bar */
.foot-usp-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px}
.foot-usp-grid > div{gap:10px}
.foot-usp-grid svg{width:36px !important;height:36px !important;padding:8px}
.foot-usp-grid strong{font-size:.9rem}
.foot-usp-grid small{font-size:.72rem}
/* Page headers */
.page-header{padding:40px 0 20px}
.page-header h1{font-size:1.8rem}
.breadcrumbs{font-size:.8rem}
/* Legal body */
.legal-body{font-size:.95rem}
.legal-body h2{font-size:1.2rem;margin-top:28px}
/* Contact */
.contact-grid{grid-template-columns:1fr !important;gap:24px}
.contact-info .item{padding:10px 0}
/* Service pages (trappen, vloerverwarming) */
.service-grid{grid-template-columns:1fr !important;gap:30px}
.service-visual{position:static !important}
.service-price-card{padding:26px 22px}
.service-price-card strong{font-size:2.4rem}
.vv-systems{grid-template-columns:1fr !important;gap:12px}
.feat-list li{font-size:.9rem}
/* Showroom video */
.showroom-video-wrap{aspect-ratio:16/9}
.video-play svg{width:56px;height:56px}
.video-caption{bottom:12px;left:12px;font-size:.75rem;padding:6px 12px}
/* Map */
.map-wrap{aspect-ratio:4/3}
/* WhatsApp button smaller + out of the way */
.wa-float{width:52px;height:52px;bottom:16px;right:16px}
.wa-float svg{width:28px;height:28px}
.wa-float::after{display:none}
/* Cookie banner mobile-friendly */
.cookie-banner{left:12px;right:12px;bottom:12px;padding:18px}
.cookie-banner h4{font-size:1rem}
.cookie-banner p{font-size:.82rem}
.cookie-actions{flex-direction:column;gap:8px}
.cookie-actions .btn{width:100%;padding:10px 18px;font-size:.82rem}
}
/* Smaller phones (<480px) */
@media(max-width:480px){
.hero h1{font-size:1.7rem !important}
.sec-head h2{font-size:1.4rem}
.cat-card{min-height:160px}
.prod-grid{grid-template-columns:1fr !important}
.brand-grid{grid-template-columns:1fr !important}
.nav-cta{padding:10px 16px !important;font-size:.85rem !important}
}
/* === Shop filters v2 === */
.hidden{display:none!important}
.filter-opt{justify-content:flex-start}
.filter-opt .count{margin-left:auto;font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.filter-reset{display:block;font-size:.82rem;color:var(--terra);margin-bottom:16px;cursor:pointer;text-decoration:underline}
.no-results{text-align:center;padding:80px 20px;color:var(--ink-2)}
.no-results a{color:var(--terra);text-decoration:underline;cursor:pointer}
/* === V20 Editorial restyle ============================================== */
/* Aesop / Kinfolk / COS inspired. Niet aan oudere V1-V19 raken — deze */
/* sectie overschrijft via specificity/!important waar nodig. */
/* Tokens uit :root blijven (bg/cream/terra/ink/gold). Voegt typografie, */
/* spacing en componenten toe. */
/* A. Tokens ---------------------------------------------------------------*/
:root{
--font-display:'Fraunces',Georgia,serif;
--font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
--font-label:'Plus Jakarta Sans',system-ui,sans-serif;
--space-xs:8px;
--space-sm:16px;
--space-md:24px;
--space-lg:48px;
--space-xl:80px;
--space-2xl:120px;
--type-eyebrow:clamp(.7rem,.65rem + .25vw,.78rem);
--type-body:clamp(.95rem,.9rem + .25vw,1.05rem);
--type-h3:clamp(1.1rem,1rem + .5vw,1.4rem);
--type-h2:clamp(1.8rem,1.5rem + 1.5vw,2.8rem);
--type-h1:clamp(2.5rem,2rem + 3vw,4.5rem);
--type-display:clamp(3rem,2.5rem + 4vw,6rem);
}
/* B. Base typography ------------------------------------------------------*/
body{font-family:var(--font-body);letter-spacing:-.005em;font-size:var(--type-body)}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.1}
h1{font-size:var(--type-h1)}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3)}
p{line-height:1.65}
.eyebrow,
.sec-head .eyebrow,
.foot-col h5,
.shop-bar .count,
.prod-info .brand,
.brand-tag,
.spec-list small,
.spec-table th{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.18em;
font-size:var(--type-eyebrow);
color:var(--ink-2);
font-weight:500;
}
/* C. Page-header ---------------------------------------------------------*/
.page-header{padding:100px 0 60px;background:var(--bg);text-align:left}
.page-header .container{max-width:1240px}
.page-header h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,2rem + 2vw,3.8rem);letter-spacing:-.025em;margin-bottom:8px}
.page-header .breadcrumbs{font-family:var(--font-label);font-size:var(--type-eyebrow);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);margin-bottom:24px}
.page-header .breadcrumbs a{color:var(--ink-2);text-decoration:none}
.page-header .breadcrumbs a:hover{color:var(--ink)}
.page-header p{color:var(--ink-2);font-size:1.02rem;max-width:560px}
/* D. Shop layout & filters -----------------------------------------------*/
.shop-layout{padding:60px 0 var(--space-2xl);gap:64px;display:grid;grid-template-columns:240px 1fr;align-items:start}
.filters{
background:transparent !important;
border:none !important;
border-right:1px solid var(--line) !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 32px 0 0;
position:sticky;top:80px;
}
.filters h4{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.18em;
font-size:var(--type-eyebrow);
color:var(--ink);
font-weight:500;
border-bottom:1px solid var(--line);
padding:0 0 8px 0;
margin:24px 0 12px 0;
background:transparent;
}
.filters h4:first-of-type{margin-top:0}
.filter-opt{
padding:6px 0;
color:var(--ink);
font-size:.92rem;
background:transparent;
border:none;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
transition:opacity .2s;
}
.filter-opt:hover{opacity:.7;background:transparent}
.filter-opt input{accent-color:var(--ink);margin:0}
.filter-opt .count{margin-left:auto;color:var(--ink-2);font-size:.78rem;font-weight:400;font-variant-numeric:tabular-nums}
.filter-reset{
display:inline-block;
font-family:var(--font-label);
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--ink-2);
text-decoration:none;
margin-bottom:16px;
cursor:pointer;
}
.filter-reset:hover{text-decoration:underline;color:var(--ink)}
.shop-bar{
border-bottom:1px solid var(--line);
padding:0 0 16px 0;
margin-bottom:48px;
display:flex;
justify-content:space-between;
align-items:center;
background:transparent;
}
.shop-bar .count{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.16em;
font-size:.82rem;
color:var(--ink);
font-weight:500;
}
.shop-bar select{
appearance:none;-webkit-appearance:none;
background:transparent;
border:1px solid var(--line);
border-radius:2px;
padding:10px 36px 10px 14px;
font-family:var(--font-body);
font-size:.88rem;
color:var(--ink);
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 14px center;
}
.shop-bar select:focus{outline:1px solid var(--ink);outline-offset:1px}
/* Product grid editorial */
.shop-layout .prod-grid{
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:48px 32px;
}
/* Asymmetric editorial: every 7th tile spans 2 cols on large grids */
@media (min-width:1100px){
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3){grid-column:span 2;aspect-ratio:auto}
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3) .prod-img{aspect-ratio:16/10}
}
/* E. Product card editorial ----------------------------------------------*/
.prod-card{
background:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
overflow:visible;
transition:opacity .3s ease;
}
.prod-card:hover{transform:none;box-shadow:none}
.prod-img{
aspect-ratio:4/5;
border-radius:0 !important;
background:var(--cream);
position:relative;
overflow:hidden;
}
.prod-img img{
width:100%;height:100%;
object-fit:cover;
transform:scale(1);
transition:transform .6s ease;
}
.prod-card:hover .prod-img img{transform:scale(1.03)}
.prod-badge{
background:transparent !important;
color:#fff !important;
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.7rem;
font-weight:500;
padding:0 !important;
top:14px;left:14px;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.prod-info{padding:16px 0 0 0 !important;background:transparent}
.prod-info .brand{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.16em;
font-size:var(--type-eyebrow);
color:var(--ink-2);
font-weight:500;
}
.prod-info h3{
font-family:var(--font-display) !important;
font-weight:400 !important;
font-size:var(--type-h3);
letter-spacing:-.015em;
margin:8px 0 !important;
color:var(--ink);
}
.prod-specs{
font-size:.78rem;
color:var(--ink-2);
display:flex;
gap:0;
margin-bottom:8px;
flex-wrap:wrap;
}
.prod-specs span{
background:transparent !important;
padding:0 !important;
border-radius:0 !important;
}
.prod-specs span:after{content:"·";margin:0 8px;color:var(--line)}
.prod-specs span:last-child:after{content:""}
.prod-price{margin-top:12px;display:flex;align-items:baseline;justify-content:flex-start;gap:8px}
.prod-price strong{
font-family:var(--font-display);
font-weight:400;
font-size:1.3rem;
color:var(--ink) !important;
letter-spacing:-.01em;
}
.prod-price small{color:var(--ink-2);font-size:.78rem}
/* F. Product detail editorial --------------------------------------------*/
.prod-detail{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:80px;
padding:60px 0 var(--space-2xl);
align-items:start;
}
.prod-gallery .main{
aspect-ratio:1;
max-width:none;
border-radius:0;
overflow:hidden;
background:var(--cream);
}
.prod-gallery .main img{width:100%;height:100%;object-fit:cover}
.prod-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.prod-thumbs div{
aspect-ratio:1;
border:1px solid transparent;
border-radius:0;
cursor:pointer;
overflow:hidden;
transition:border-color .2s ease;
padding:0;
}
.prod-thumbs div img{width:100%;height:100%;object-fit:cover}
.prod-thumbs div.active{border-color:var(--ink)}
.prod-thumbs div:hover{border-color:var(--ink-2)}
.prod-detail .brand-tag{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.18em;
font-size:var(--type-eyebrow);
color:var(--ink-2);
font-weight:500;
margin-bottom:12px;
background:transparent;
padding:0;
border:none;
}
.prod-detail h1{
font-family:var(--font-display);
font-weight:400;
font-size:var(--type-h1);
letter-spacing:-.025em;
line-height:1.05;
margin-bottom:8px;
}
.prod-price-big{
font-family:var(--font-display) !important;
font-size:2rem !important;
font-weight:400 !important;
color:var(--ink) !important;
margin:24px 0 !important;
letter-spacing:-.015em;
}
.prod-price-big small{font-family:var(--font-body);font-size:.85rem;color:var(--ink-2);font-weight:400;margin-left:8px}
.spec-list{
display:block !important;
grid-template-columns:none !important;
gap:0 !important;
margin:32px 0;
border-top:1px solid var(--line);
}
.spec-list > div{
display:flex !important;
justify-content:space-between;
align-items:baseline;
padding:14px 0 !important;
border-bottom:1px solid var(--line);
background:transparent !important;
border-radius:0 !important;
font-size:.95rem;
}
.spec-list > div small{
font-family:var(--font-label) !important;
text-transform:uppercase;
letter-spacing:.14em;
font-size:.74rem !important;
color:var(--ink-2);
font-weight:500;
margin:0 !important;
}
.prod-detail .calc{
background:var(--bg-2);
padding:32px;
border-radius:0;
margin-top:32px;
}
.prod-detail .calc h3{font-family:var(--font-display);font-weight:400}
.prod-detail .calc .btn-primary{
border-radius:2px !important;
background:var(--ink) !important;
color:#fff !important;
padding:18px 32px !important;
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.85rem;
font-weight:500;
transition:background .2s ease;
}
.prod-detail .calc .btn-primary:hover{
background:var(--terra) !important;
transform:none !important;
box-shadow:none !important;
}
/* G. Header upgrade ------------------------------------------------------*/
.nav a:not(.nav-cta){
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.12em;
font-size:.78rem;
font-weight:500;
}
.nav-cta{
border-radius:2px !important;
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.12em;
font-size:.78rem;
font-weight:500;
}
.logo{font-family:var(--font-display);letter-spacing:-.01em}
/* H. Hero & homepage -----------------------------------------------------*/
.hero{padding:140px 0 160px}
.hero h1{
font-family:var(--font-display) !important;
font-size:var(--type-display);
font-weight:400 !important;
letter-spacing:-.03em;
line-height:.95;
margin-bottom:24px;
}
.hero h1 em{font-family:var(--font-display);font-style:italic;color:var(--gold)}
.hero p{
max-width:540px;
color:rgba(255,255,255,.85);
font-size:1.1rem;
line-height:1.6;
}
.hero-eyebrow{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.18em;
font-size:.78rem;
font-weight:500;
}
.hero .btn-primary{
border-radius:2px !important;
background:var(--ink) !important;
color:#fff !important;
padding:18px 32px !important;
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.82rem;
font-weight:500;
border:1px solid var(--ink);
}
.hero .btn-primary:hover{background:var(--terra) !important;border-color:var(--terra) !important;transform:none !important;box-shadow:none !important}
.hero .btn-outline-light,
.hero-cta a:not(.btn-primary){
border-radius:2px !important;
background:transparent !important;
border:1px solid rgba(255,255,255,.6) !important;
color:#fff !important;
padding:18px 32px !important;
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.82rem;
font-weight:500;
}
.hero .btn-outline-light:hover{background:#fff !important;color:var(--ink) !important;transform:none !important}
.hero-stats div strong{font-family:var(--font-display);font-weight:400}
/* Categorieën-grid */
.cat-grid{gap:24px}
.cat-card{border-radius:0 !important;box-shadow:none !important}
.cat-card .label h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:-.02em}
.cat-card .label small{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.72rem;
font-weight:500;
}
/* Section heads */
.sec-head h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
.sec-head .eyebrow{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.18em;
font-size:.78rem;
color:var(--ink-2);
font-weight:500;
}
/* Generic buttons editorial */
.btn{border-radius:2px !important;font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:500}
.btn-primary{background:var(--ink) !important;color:#fff !important;border:1px solid var(--ink)}
.btn-primary:hover{background:var(--terra) !important;border-color:var(--terra) !important;transform:none !important;box-shadow:none !important}
.btn-outline{border-radius:2px !important;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff;transform:none}
/* I. Footer editorial -----------------------------------------------------*/
.foot-usp-bar{background:var(--bg-2) !important;padding:40px 0}
.foot-usp-grid{gap:32px}
.foot-usp-bar svg{width:18px;height:18px;color:var(--ink)}
.foot-usp-bar strong{
font-family:var(--font-label);
text-transform:uppercase;
letter-spacing:.14em;
font-size:.78rem;
font-weight:500;
color:var(--ink);
display:block;
}
.foot-usp-bar small{font-size:.78rem;color:var(--ink-2)}
footer{padding:64px 0 40px}
.foot-grid{gap:48px}
.foot-col h5{
font-family:'Fraunces',serif !important;
text-transform:none;
letter-spacing:-.01em;
font-size:1.15rem !important;
color:var(--ink) !important;
font-weight:500;
margin-bottom:16px;
}
.foot-col p,.foot-col ul li,.foot-col ul li a{font-size:.88rem;line-height:1.65;color:var(--ink-2)}
.foot-col ul li{margin-bottom:6px}
.foot-bottom{font-size:.78rem;color:var(--ink-2);padding-top:32px;margin-top:32px;border-top:1px solid var(--line)}
/* J. Reveal utility ------------------------------------------------------*/
/* Niet aan oude reveal in main.js raken — die zet inline opacity op cards. */
/* .reveal class moet handmatig gezet worden op elementen die we willen */
/* fade-in-en. IntersectionObserver in footer.php voegt .is-in toe. */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease;will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:translateY(0)}
/* L. Responsive -----------------------------------------------------------*/
@media (max-width:768px){
.shop-layout{
grid-template-columns:1fr;
gap:24px;
padding:32px 0 var(--space-xl);
}
.filters{
border-right:none !important;
border-bottom:1px solid var(--line) !important;
padding:0 0 24px 0;
position:static;
}
.shop-layout .prod-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3){grid-column:span 1}
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3) .prod-img{aspect-ratio:4/5}
.prod-detail{grid-template-columns:1fr;gap:40px;padding:32px 0 var(--space-xl)}
.prod-detail .calc{padding:24px}
.page-header{padding:60px 0 32px}
.hero{padding:80px 0 100px;min-height:520px}
.hero h1{font-size:clamp(2.4rem,2rem + 4vw,3.6rem)}
.cat-grid{grid-template-columns:1fr;grid-template-rows:auto}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
}
@media (max-width:480px){
.shop-layout .prod-grid{grid-template-columns:1fr;gap:32px}
.foot-grid{grid-template-columns:1fr}
}
/* V20 K. Shop reveal-conflict fix ----------------------------------------*/
/* main.js V4 reveal IIFE draait na shop.php inline JS en zet opacity:0 */
/* + translateY(24px) op ALLE .prod-card. Voor cards in initial viewport */
/* fadet IntersectionObserver met stagger (i*80ms) terug — wat bij active */
/* URL-filter (?brand[]=...) zorgt voor 1-2s onzichtbaarheid van de eerste */
/* paar cards. Voor cards net buiten viewport blijven ze zelfs onzichtbaar */
/* tot scroll. Op shop-page willen we geen reveal-animatie op cards: het */
/* filter-paradigma voorkomt dat al en stagger-fade misleidt de UX. */
/* Scope: alleen .shop-layout — homepage .prod-grid reveal blijft werken. */
.shop-layout .prod-card{opacity:1 !important;transform:none !important}
/* === /V20 ============================================================ */
/* === V21 Shop UX upgrade ============================================== */
/* Active filter chips, collapsible filter groups, prominent result count, */
/* mobile drawer. Editorial: Fraunces+Plus Jakarta Sans, ink CTA, geen */
/* border-radius (op 1-2px na). Tokens uit V20 (--font-display, --line, */
/* --type-eyebrow, --space-*). */
/* A. Active filter chips bar ---------------------------------------------*/
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
padding: 0;
align-items: center;
}
.active-filters:empty { display: none; }
.active-filters .label {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .72rem;
color: var(--ink-2);
font-weight: 500;
margin-right: 8px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 2px;
font-size: .82rem;
color: var(--ink);
cursor: pointer;
transition: background .2s;
font-family: var(--font-body);
}
.filter-chip:hover { background: var(--cream); }
.filter-chip .x {
font-size: 1rem;
line-height: 1;
color: var(--ink-2);
font-weight: 400;
}
.filter-chip:hover .x { color: var(--ink); }
.active-filters .clear-all {
margin-left: auto;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .72rem;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
border: none;
background: transparent;
padding: 6px 0;
}
.active-filters .clear-all:hover { color: var(--ink); text-decoration: underline; }
/* B. Collapsible filter groups -------------------------------------------*/
.filter-group {
border-bottom: 1px solid var(--line);
padding: 0;
}
.filter-group:last-of-type { border-bottom: none; }
.filter-group-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px 0;
cursor: pointer;
user-select: none;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .18em;
font-size: var(--type-eyebrow);
color: var(--ink);
font-weight: 500;
background: transparent;
border: none;
text-align: left;
}
.filter-group-header .chevron {
transition: transform .25s ease;
font-size: .75rem;
color: var(--ink-2);
}
.filter-group.collapsed .chevron { transform: rotate(-90deg); }
.filter-group-body {
padding: 0 0 16px 0;
max-height: 320px;
overflow-y: auto;
transition: max-height .3s ease, padding .3s ease, opacity .2s;
}
.filter-group.collapsed .filter-group-body {
max-height: 0;
padding: 0;
opacity: 0;
overflow: hidden;
}
/* C. Filter-paneel finetuning --------------------------------------------*/
.filters {
background: transparent !important;
box-shadow: none !important;
padding: 0 32px 0 0 !important;
border-right: 1px solid var(--line);
}
.filters .filter-reset { display: none; }
.filters > h4 { display: none; } /* V20-era headers; vervangen door .filter-group-header */
/* D. Result count + sort bar ---------------------------------------------*/
.shop-bar {
border-bottom: 1px solid var(--line);
padding: 0 0 20px 0 !important;
margin-bottom: 32px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.shop-bar .count {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
color: var(--ink) !important;
letter-spacing: -.01em;
text-transform: none !important;
}
.shop-bar .count small {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .16em;
font-size: .72rem;
font-weight: 500;
color: var(--ink-2);
display: inline-block;
margin-left: 8px;
vertical-align: middle;
}
.shop-bar .sort-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.shop-bar .sort-label {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .72rem;
color: var(--ink-2);
font-weight: 500;
}
/* E. Mobile drawer -------------------------------------------------------*/
@media (max-width: 768px) {
.filter-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--ink);
color: #fff;
border: none;
border-radius: 2px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 500;
cursor: pointer;
margin-bottom: 16px;
}
.filter-toggle .badge {
background: #fff;
color: var(--ink);
padding: 2px 6px;
border-radius: 1px;
font-size: .68rem;
margin-left: 4px;
}
.filters {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 100;
padding: 60px 24px 24px 24px !important;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .3s ease;
border-right: none;
}
.filters.is-open { transform: translateX(0); }
.filter-close {
position: absolute;
top: 20px;
right: 24px;
background: transparent;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: var(--ink);
}
.filter-apply-bar {
position: sticky;
bottom: 0;
background: var(--bg);
padding: 16px 0;
border-top: 1px solid var(--line);
margin-top: 16px;
display: flex;
gap: 12px;
}
.filter-apply-bar button {
flex: 1;
padding: 14px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
border: 1px solid var(--ink);
cursor: pointer;
}
.filter-apply-bar .reset { background: transparent; color: var(--ink); }
.filter-apply-bar .apply { background: var(--ink); color: #fff; }
}
@media (min-width: 769px) {
.filter-toggle, .filter-close, .filter-apply-bar { display: none; }
}
/* === /V21 ============================================================ */
/* === V22 Card sizing fix ============================================== */
/* V20 had 4:5 portrait + 280px min cols → te groot. Terug naar square + compactere grid. */
.shop-layout .prod-grid{
grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
gap:32px 20px !important;
}
.shop-layout .prod-img{
aspect-ratio:1/1 !important;
}
@media (min-width:1100px){
/* Asymmetrie behouden maar naar 1:1 */
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3){
grid-column:span 2;
}
.shop-layout .prod-grid > .prod-card:nth-of-type(7n+3) .prod-img{
aspect-ratio:16/10 !important;
}
}
@media (max-width:768px){
.shop-layout .prod-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:20px 12px !important;
}
}
@media (max-width:480px){
.shop-layout .prod-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:16px 8px !important;
}
}
/* === /V22 ============================================================ */
/* === V23 Shop UI: high-tech editorial =================================== */
/* C2.1 Hero filter section */
.shop-hero {
padding: 80px 0 40px;
border-bottom: 1px solid var(--line);
margin-bottom: 48px;
}
.shop-hero .count-display {
font-family: var(--font-display);
font-size: clamp(3rem, 5vw + 1rem, 5rem);
font-weight: 400;
letter-spacing: -.03em;
line-height: 1;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.shop-hero .count-number {
font-variant-numeric: tabular-nums;
transition: color .3s;
}
.shop-hero .count-label {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .18em;
font-size: .82rem;
color: var(--ink-2);
font-weight: 500;
}
.shop-hero .meta-line {
font-family: var(--font-body);
font-size: .92rem;
color: var(--ink-2);
margin-top: 16px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.shop-hero .meta-line span:not(:last-child)::after {
content: '·';
margin-left: 16px;
color: var(--line);
}
/* C2.2 Quick filter pills */
.quick-filters {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 0 0 24px 0;
margin-bottom: 32px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.quick-filters::-webkit-scrollbar { height: 4px; }
.quick-filters::-webkit-scrollbar-track { background: var(--line); }
.quick-filters::-webkit-scrollbar-thumb { background: var(--ink-2); }
.quick-filter {
flex-shrink: 0;
padding: 10px 20px;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .12em;
font-size: .76rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
white-space: nowrap;
transition: all .25s ease;
}
.quick-filter:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.quick-filter.active {
background: var(--terra);
color: #fff;
border-color: var(--terra);
}
/* C2.3 Color swatches */
.color-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 12px;
padding: 8px 0;
}
.color-swatch {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 4px;
border-radius: 4px;
transition: background .2s;
}
.color-swatch:hover { background: var(--bg-2); }
.color-swatch input { display: none; }
.color-swatch .dot {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--line);
position: relative;
transition: transform .2s, box-shadow .2s;
}
.color-swatch:hover .dot { transform: scale(1.1); }
.color-swatch input:checked + .dot {
box-shadow: 0 0 0 2px var(--ink);
transform: scale(1.05);
}
.color-swatch input:checked + .dot::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: .9rem;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.color-swatch .label {
font-size: .68rem;
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 500;
}
.color-swatch .count {
font-size: .62rem;
color: var(--ink-2);
opacity: .6;
}
.color-swatch[data-color="licht"] .dot { background: #f0e6d6; }
.color-swatch[data-color="donker"] .dot { background: #2b1f15; }
.color-swatch[data-color="grijs"] .dot { background: #8a8580; }
.color-swatch[data-color="beige"] .dot { background: #d4bd9c; }
.color-swatch[data-color="natuur"] .dot { background: #737373; }
.color-swatch[data-color="warm"] .dot { background: #404040; }
.color-swatch[data-color="rustiek"] .dot { background: #6b4423; }
/* C2.4 Brand filter with logos */
.brand-list {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.brand-opt {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
cursor: pointer;
transition: background .2s;
border-radius: 2px;
}
.brand-opt:hover { background: var(--bg-2); }
.brand-opt input { display: none; }
.brand-opt .brand-logo {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.brand-opt .brand-logo img,
.brand-opt .brand-logo svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.brand-opt .brand-name {
flex: 1;
font-family: var(--font-body);
font-size: .92rem;
color: var(--ink);
}
.brand-opt input:checked ~ .brand-name {
font-weight: 600;
color: var(--ink);
}
.brand-opt .count {
font-size: .76rem;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
/* C2.5 Price range slider */
.price-range {
padding: 16px 8px;
}
.price-range-inputs {
display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: .82rem;
color: var(--ink);
margin-bottom: 12px;
}
.price-range-inputs strong {
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.price-slider {
position: relative;
height: 4px;
background: var(--line);
border-radius: 2px;
margin: 16px 8px;
}
.price-slider .fill {
position: absolute;
height: 100%;
background: var(--ink);
border-radius: 2px;
}
.price-slider input[type="range"] {
position: absolute;
left: -8px;
right: -8px;
width: calc(100% + 16px);
background: transparent;
pointer-events: none;
appearance: none;
height: 4px;
margin: 0;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
appearance: none;
pointer-events: all;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--ink);
cursor: pointer;
margin-top: -7px;
}
.price-slider input[type="range"]::-moz-range-thumb {
pointer-events: all;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--ink);
cursor: pointer;
}
/* C2.6 Productkaart hover overlay */
.shop-layout .prod-card { position: relative; }
.shop-layout .prod-card .prod-img {
overflow: hidden;
position: relative;
}
.shop-layout .prod-card .prod-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(43,34,27,.85) 0%, transparent 60%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.shop-layout .prod-card:hover .prod-img::after { opacity: 1; }
.shop-layout .prod-card .prod-img-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
color: #fff;
z-index: 2;
transform: translateY(8px);
opacity: 0;
transition: transform .35s ease, opacity .35s ease;
font-family: var(--font-body);
font-size: .8rem;
display: flex;
gap: 12px;
flex-wrap: wrap;
pointer-events: none;
}
.shop-layout .prod-card:hover .prod-img-overlay {
transform: translateY(0);
opacity: 1;
}
.shop-layout .prod-card .prod-img-overlay span {
background: rgba(255,255,255,.15);
padding: 4px 10px;
border-radius: 999px;
backdrop-filter: blur(8px);
font-size: .74rem;
letter-spacing: .04em;
}
/* V23: hide .prod-specs (info nu in hover-overlay) */
.shop-layout .prod-card .prod-specs { display: none; }
/* C2.7 Skeleton loading */
.shop-layout .prod-card .prod-img.is-loading {
background: linear-gradient(90deg, var(--cream) 0%, var(--bg-2) 50%, var(--cream) 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
/* C2.8 Active filter chips with animations */
.active-filters .filter-chip {
animation: chip-in .25s ease backwards;
}
@keyframes chip-in {
from { opacity: 0; transform: scale(.8) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.active-filters .filter-chip[data-color] .chip-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--line);
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.active-filters .filter-chip[data-color="licht"] .chip-dot { background: #f0e6d6; }
.active-filters .filter-chip[data-color="donker"] .chip-dot { background: #2b1f15; }
.active-filters .filter-chip[data-color="grijs"] .chip-dot { background: #8a8580; }
.active-filters .filter-chip[data-color="beige"] .chip-dot { background: #d4bd9c; }
.active-filters .filter-chip[data-color="natuur"] .chip-dot { background: #737373; }
.active-filters .filter-chip[data-color="warm"] .chip-dot { background: #404040; }
.active-filters .filter-chip[data-color="rustiek"] .chip-dot { background: #6b4423; }
/* C2.9 Smart sort dropdown */
.sort-dropdown {
position: relative;
}
.sort-dropdown-trigger {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 36px 10px 16px;
background: transparent;
border: 1px solid var(--line);
border-radius: 2px;
font-family: var(--font-body);
font-size: .88rem;
color: var(--ink);
cursor: pointer;
position: relative;
min-width: 180px;
transition: border-color .2s;
}
.sort-dropdown-trigger:hover { border-color: var(--ink); }
.sort-dropdown-trigger::after {
content: '▾';
position: absolute;
right: 14px;
font-size: .8rem;
color: var(--ink-2);
transition: transform .2s;
}
.sort-dropdown.is-open .sort-dropdown-trigger::after {
transform: rotate(180deg);
}
.sort-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 220px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 2px;
box-shadow: 0 8px 24px rgba(43,34,27,.08);
display: none;
z-index: 10;
padding: 8px 0;
}
.sort-dropdown.is-open .sort-dropdown-menu { display: block; }
.sort-dropdown-menu button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 16px;
background: transparent;
border: none;
text-align: left;
font-family: var(--font-body);
font-size: .9rem;
color: var(--ink);
cursor: pointer;
transition: background .15s;
}
.sort-dropdown-menu button:hover { background: var(--bg-2); }
.sort-dropdown-menu button.is-selected { color: var(--terra); font-weight: 500; }
.sort-dropdown-menu .icon {
width: 14px;
text-align: center;
font-size: .82rem;
color: var(--ink-2);
}
/* C2.10 Header scroll behavior */
.header { transition: transform .3s ease; }
body.scrolled-down .header { transform: translateY(-100%); }
body.scrolled-up .header { transform: translateY(0); }
/* C2.11 Empty state */
.empty-state {
text-align: center;
padding: 80px 20px;
color: var(--ink-2);
}
.empty-state svg {
width: 80px;
height: 80px;
color: var(--line);
margin-bottom: 24px;
}
.empty-state h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.6rem;
color: var(--ink);
margin-bottom: 8px;
}
.empty-state p { margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto; }
.empty-state .suggestions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.empty-state .suggestions button {
padding: 8px 16px;
background: transparent;
border: 1px solid var(--ink);
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .1em;
font-size: .76rem;
color: var(--ink);
cursor: pointer;
border-radius: 2px;
}
/* C2.12 Mobile bottom sheet */
@media (max-width: 768px) {
.filters {
inset: auto 0 0 0 !important;
height: 85vh !important;
transform: translateY(100%) !important;
border-radius: 16px 16px 0 0 !important;
transition: transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.filters.is-open {
transform: translateY(0) !important;
}
.filters::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background: var(--line);
border-radius: 2px;
}
}
/* === /V23 ============================================================ */
/* === V25 Homepage refresh ============================ */
.action-banner {
background: var(--ink);
color: #fff;
padding: 10px 0;
font-size: .85rem;
position: relative;
z-index: 100;
}
body.banner-closed .action-banner,
html.banner-pre-hide .action-banner { display: none; }
.action-banner .container {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.action-banner .action-tag {
background: var(--terra);
color: #fff;
padding: 2px 10px;
border-radius: 2px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .68rem;
font-weight: 600;
}
.action-banner .action-text strong { color: var(--terra); }
.action-banner .action-cta {
color: #fff;
text-decoration: underline;
font-weight: 500;
}
.action-banner .action-close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: transparent;
color: #fff;
border: none;
font-size: 1.4rem;
cursor: pointer;
opacity: .6;
}
.action-banner .action-close:hover { opacity: 1; }
@media (max-width: 700px) {
.action-banner { padding: 12px 40px 12px 16px; font-size: .76rem; text-align: left; }
.action-banner .container { gap: 8px; }
}
.action-feature {
background: var(--ink);
color: #fff;
padding: 80px 0;
}
.action-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.action-feature-text .eyebrow {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .18em;
font-size: .76rem;
color: var(--terra);
font-weight: 500;
display: inline-block;
margin-bottom: 16px;
}
.action-feature-text h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
line-height: 1.1;
margin-bottom: 20px;
color: #fff;
font-weight: 400;
}
.action-feature-text h2 em {
font-style: italic;
color: var(--terra);
}
.action-feature-text p {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 28px;
color: rgba(255,255,255,.85);
}
.btn-ink {
display: inline-block;
background: var(--terra);
color: #fff;
padding: 14px 28px;
border-radius: 2px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 500;
text-decoration: none;
transition: background .2s;
}
.btn-ink:hover { background: #c25a3a; }
.action-feature-placeholder {
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--terra) 0%, #6b3920 100%);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.5);
font-style: italic;
}
@media (max-width: 768px) {
.action-feature { padding: 50px 0; }
.action-feature-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Donkere strook voor partners-sectie */
.section-partners.dark-band {
background: var(--ink);
color: #fff;
padding: 90px 0;
}
.section-partners.dark-band h2 { color: #fff; }
.section-partners.dark-band .sec-head .eyebrow { color: var(--terra); }
.section-partners.dark-band .sec-head p { color: rgba(255,255,255,.75); }
.section-partners.dark-band .partner-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: #fff;
transition: all .3s;
}
.section-partners.dark-band .partner-card:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.25);
transform: translateY(-2px);
}
.section-partners.dark-band .partner-card h3 { color: #fff; }
.section-partners.dark-band .partner-card p { color: rgba(255,255,255,.7); }
.section-partners.dark-band .partner-card .count { color: rgba(255,255,255,.5); }
/* Subtle cream-bg-2 gradient voor bestsellers */
.section-bestsellers.gradient-band {
background: linear-gradient(180deg, var(--cream) 0%, var(--bg-2) 50%, var(--cream) 100%);
padding: 90px 0;
}
/* Reviews als terra-strook */
.section-reviews.terra-band {
background: var(--terra);
color: #fff;
padding: 80px 0;
}
.section-reviews.terra-band h2 { color: #fff; }
.section-reviews.terra-band .sec-head .eyebrow { color: rgba(255,255,255,.75); }
.section-reviews.terra-band .review {
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.15);
border-radius: 2px;
}
.section-reviews.terra-band .review .stars { color: #fff; }
.section-reviews.terra-band .review p,
.section-reviews.terra-band .review .author { color: #fff; }
.section-reviews.terra-band .review .author small { color: rgba(255,255,255,.7); }
.partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.partner-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 2px;
padding: 32px 20px;
text-align: center;
text-decoration: none;
color: var(--ink);
transition: all .3s;
cursor: pointer;
}
.partner-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(43,34,27,.06);
border-color: var(--ink);
}
.partner-card h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
margin-bottom: 8px;
}
.partner-card p {
font-size: .82rem;
color: var(--ink-2);
line-height: 1.4;
}
.partner-card .count {
display: block;
margin-top: 14px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .68rem;
color: var(--ink-2);
opacity: .8;
}
@media (max-width: 900px) {
.partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.partners-grid { grid-template-columns: 1fr; }
}
/* === V25 actie.php =================================================== */
.actie-hero {
background: linear-gradient(180deg, var(--cream) 0%, var(--bg-2) 100%);
padding: 100px 0 80px;
text-align: center;
}
.actie-hero .eyebrow {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .2em;
font-size: .78rem;
color: var(--terra);
font-weight: 500;
display: inline-block;
margin-bottom: 20px;
}
.actie-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw + 1rem, 4.4rem);
line-height: 1.05;
margin-bottom: 24px;
font-weight: 400;
}
.actie-hero h1 em {
color: var(--terra);
font-style: italic;
}
.actie-hero .lead {
font-size: 1.15rem;
color: var(--ink-2);
max-width: 720px;
margin: 0 auto 36px;
line-height: 1.5;
}
.actie-cta-group {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-terra {
display: inline-block;
background: var(--terra);
color: #fff;
padding: 14px 32px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 500;
text-decoration: none;
border-radius: 2px;
transition: background .2s;
}
.btn-terra:hover { background: #c25a3a; }
.btn-text {
display: inline-block;
padding: 14px 0;
color: var(--ink);
font-size: .92rem;
text-decoration: underline;
}
.btn-text-light {
display: inline-block;
padding: 14px 0;
color: rgba(255,255,255,.85);
font-size: .92rem;
text-decoration: underline;
}
.actie-includes { padding: 90px 0; }
.actie-includes h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
text-align: center;
margin-bottom: 60px;
font-weight: 400;
}
.actie-includes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.actie-include {
text-align: center;
padding: 0 12px;
}
.actie-icon {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--terra);
margin-bottom: 16px;
font-weight: 400;
}
.actie-include h3 {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
}
.actie-include p {
font-size: .92rem;
color: var(--ink-2);
line-height: 1.5;
}
@media (max-width: 768px) {
.actie-includes-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
.actie-eligible {
background: var(--ink);
color: #fff;
padding: 80px 0;
text-align: center;
}
.actie-eligible h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
margin-bottom: 20px;
color: #fff;
font-weight: 400;
}
.actie-eligible p {
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto 36px;
color: rgba(255,255,255,.8);
}
.actie-process { padding: 90px 0; background: var(--bg); }
.actie-process h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
text-align: center;
margin-bottom: 60px;
font-weight: 400;
}
.actie-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.actie-step .step-num {
font-family: var(--font-display);
font-size: 3rem;
color: var(--terra);
display: block;
margin-bottom: 12px;
line-height: 1;
}
.actie-step h3 {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
}
.actie-step p {
font-size: .92rem;
color: var(--ink-2);
line-height: 1.5;
}
@media (max-width: 768px) {
.actie-steps { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
.actie-location { padding: 90px 0; background: var(--bg-2); }
.actie-location-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.actie-location-info h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.6rem);
margin-bottom: 16px;
font-weight: 400;
}
.actie-location-info .lead {
font-size: 1.05rem;
color: var(--ink-2);
margin-bottom: 28px;
line-height: 1.5;
}
.actie-location-detail {
margin-bottom: 20px;
}
.actie-location-detail strong {
display: block;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .72rem;
color: var(--ink-2);
margin-bottom: 4px;
font-weight: 500;
}
.actie-location-detail p {
font-size: .96rem;
line-height: 1.5;
}
.actie-location-detail a { color: var(--ink); text-decoration: underline; }
.actie-location-map iframe {
border-radius: 2px;
filter: grayscale(0.3);
}
@media (max-width: 900px) {
.actie-location-grid { grid-template-columns: 1fr; }
}
.actie-faq { padding: 90px 0; }
.actie-faq h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw + 1rem, 2.6rem);
text-align: center;
margin-bottom: 50px;
font-weight: 400;
}
.actie-faq details {
border-bottom: 1px solid var(--line);
padding: 20px 0;
max-width: 760px;
margin: 0 auto;
}
.actie-faq summary {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 500;
cursor: pointer;
list-style: none;
position: relative;
padding-right: 30px;
}
.actie-faq summary::-webkit-details-marker { display: none; }
.actie-faq summary::after {
content: '+';
position: absolute;
right: 0;
top: 0;
font-size: 1.4rem;
color: var(--ink-2);
font-weight: 300;
transition: transform .2s;
}
.actie-faq details[open] summary::after { transform: rotate(45deg); }
.actie-faq details p {
margin-top: 14px;
color: var(--ink-2);
line-height: 1.55;
}
/* === /V25 ============================================================ */
/* === V26 Homepage polish ============================================= */
/* C1: Header positioning — verwijderd in V26.1, zie V26.1 Header polish */
/* C2: Hero CTA prominent */
.btn-primary-hero {
display: inline-block;
background: var(--terra);
color: #fff;
padding: 18px 36px;
border-radius: 2px;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
font-weight: 600;
text-decoration: none;
transition: all .25s ease;
box-shadow: 0 4px 12px rgba(208, 87, 48, 0.25);
}
.btn-primary-hero:hover {
background: #c25a3a;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(208, 87, 48, 0.35);
}
.btn-secondary-hero {
display: inline-block;
padding: 18px 28px;
color: #fff;
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.4);
text-underline-offset: 6px;
margin-left: 12px;
}
.btn-secondary-hero:hover { text-decoration-color: #fff; }
/* V26.2: action-feature vlakke kleur (geen gradient, geen ::before fade) */
.action-feature {
background: #2e2418;
color: #fff;
padding: 90px 0;
}
/* B1: action-feature image (replaces placeholder) */
.action-feature-visual img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 2px;
display: block;
}
/* D2: Partners checkerboard — overrides V25 dark-band styling */
.section-partners {
background: var(--cream);
padding: 90px 0;
}
.section-partners h2 { color: var(--ink); }
.section-partners .sec-head .eyebrow { color: var(--terra); }
.section-partners .sec-head p { color: var(--ink-2); }
.section-partners .partner-card {
padding: 40px 24px;
text-decoration: none;
text-align: center;
border-radius: 2px;
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .25s, opacity .6s ease, background .25s;
position: relative;
overflow: hidden;
}
.section-partners .partner-card[data-style="cream"] {
background: var(--bg-2);
color: var(--ink);
border: 1px solid var(--line);
}
.section-partners .partner-card[data-style="cream"] h3 { color: var(--ink); }
.section-partners .partner-card[data-style="cream"] p { color: var(--ink-2); }
.section-partners .partner-card[data-style="cream"] .count { color: var(--ink-2); opacity: .8; }
.section-partners .partner-card[data-style="cream"]:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(43,34,27,.08);
background: #fff;
}
.section-partners .partner-card[data-style="terra"] {
background: var(--terra);
color: #fff;
border: 1px solid var(--terra);
}
.section-partners .partner-card[data-style="terra"] h3 { color: #fff; }
.section-partners .partner-card[data-style="terra"] p { color: rgba(255,255,255,.85); }
.section-partners .partner-card[data-style="terra"] .count { color: rgba(255,255,255,.7); }
.section-partners .partner-card[data-style="terra"]:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(208,87,48,.25);
background: #c25a3a;
}
/* Stagger reveal voor partners */
.section-partners .partner-card {
opacity: 0;
transform: translateY(20px);
}
.section-partners.is-visible .partner-card { opacity: 1; transform: translateY(0); }
.section-partners.is-visible .partner-card:nth-child(1) { transition-delay: .05s; }
.section-partners.is-visible .partner-card:nth-child(2) { transition-delay: .1s; }
.section-partners.is-visible .partner-card:nth-child(3) { transition-delay: .15s; }
.section-partners.is-visible .partner-card:nth-child(4) { transition-delay: .2s; }
.section-partners.is-visible .partner-card:nth-child(5) { transition-delay: .25s; }
.section-partners.is-visible .partner-card:nth-child(6) { transition-delay: .3s; }
.section-partners.is-visible .partner-card:nth-child(7) { transition-delay: .35s; }
.section-partners.is-visible .partner-card:nth-child(8) { transition-delay: .4s; }
/* E1: Footer dark */
footer.footer-dark, .site-footer {
background: var(--ink);
color: rgba(255,255,255,.75);
padding: 80px 0 40px;
}
footer.footer-dark .container, .site-footer .container {
display: block;
}
footer.footer-dark .foot-grid, .site-footer .foot-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 60px;
}
footer.footer-dark h3, footer.footer-dark h4, footer.footer-dark h5,
.site-footer h3, .site-footer h4, .site-footer h5 {
color: #fff;
font-family: var(--font-display);
font-weight: 500;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
}
footer.footer-dark a, .site-footer a {
color: rgba(255,255,255,.7);
text-decoration: none;
display: inline-block;
padding: 4px 0;
transition: color .2s;
}
footer.footer-dark a:hover, .site-footer a:hover {
color: var(--terra);
}
footer.footer-dark p, .site-footer p {
color: rgba(255,255,255,.65);
line-height: 1.6;
}
footer.footer-dark ul, .site-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
footer.footer-dark li, .site-footer li { padding: 4px 0; color: rgba(255,255,255,.7); }
footer.footer-dark .foot-bottom, .site-footer .foot-bottom {
border-top: 1px solid rgba(255,255,255,.12);
padding-top: 28px;
text-align: center;
font-size: .82rem;
color: rgba(255,255,255,.5);
}
footer.footer-dark .foot-bottom a, .site-footer .foot-bottom a {
color: var(--terra);
}
@media (max-width: 768px) {
footer.footer-dark .foot-grid, .site-footer .foot-grid { grid-template-columns: 1fr; gap: 36px; }
}
/* F2: WhatsApp button */
.whatsapp-float {
position: fixed;
bottom: 24px;
left: 24px;
width: 56px;
height: 56px;
background: var(--terra);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(208,87,48,.4);
z-index: 90;
transition: all .25s ease;
text-decoration: none;
}
.whatsapp-float:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 10px 24px rgba(208,87,48,.5);
background: #c25a3a;
}
.whatsapp-float::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid var(--terra);
opacity: 0;
animation: wapp-pulse 2.5s infinite;
pointer-events: none;
}
@keyframes wapp-pulse {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 600px) {
.whatsapp-float { bottom: 16px; left: 16px; width: 50px; height: 50px; }
}
/* G2: Section reveal animations */
.section-partners,
.section-bestsellers,
.action-feature,
.actie-includes,
.actie-process {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.section-partners.is-visible,
.section-bestsellers.is-visible,
.action-feature.is-visible,
.actie-includes.is-visible,
.actie-process.is-visible {
opacity: 1;
transform: translateY(0);
}
/* G3: Showroom photo zoom on hover */
.showroom-img-wrap {
overflow: hidden;
border-radius: 2px;
}
.showroom-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.showroom-img-wrap:hover img {
transform: scale(1.05);
}
/* G4: NIEUW-tag pulse */
.action-banner .action-tag {
position: relative;
z-index: 1;
}
.action-banner .action-tag::before {
content: '';
position: absolute;
inset: 0;
background: var(--terra);
border-radius: 2px;
opacity: 0;
animation: tag-pulse 3s infinite;
z-index: -1;
pointer-events: none;
}
@keyframes tag-pulse {
0%, 100% { transform: scale(1); opacity: 0; }
50% { transform: scale(1.5); opacity: .3; }
}
/* Hide V25 placeholder block (geen markup meer nodig, harmless als ergens nog gebruikt) */
.action-feature-placeholder { display: none; }
/* === /V26 ============================================================ */
/* === V26.1 Header polish ============================================ */
.header {
background: linear-gradient(180deg, var(--bg) 0%, var(--cream) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(43,34,27,.08);
position: sticky;
top: 0;
z-index: 50;
transition: box-shadow .3s, background .3s;
}
body.scrolled .header,
body.scrolled-up .header {
background: rgba(245,241,236,.92);
box-shadow: 0 2px 12px rgba(43,34,27,.06);
}
.header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--terra) 50%, transparent 100%);
opacity: .5;
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 14px;
padding-bottom: 14px;
max-width: 1320px;
margin: 0 auto;
}
.header .logo {
flex-shrink: 0;
}
.header .logo img {
height: 40px;
width: auto;
transition: transform .25s;
}
.header .logo:hover img {
transform: scale(1.04);
}
.header .nav-wrapper {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
flex: 1;
justify-content: flex-end;
}
.header .main-nav {
display: flex;
gap: 8px;
align-items: center;
}
.header .main-nav > a,
.header .main-nav .nav-item,
.header .main-nav .nav-dd > a {
color: var(--ink);
text-decoration: none;
padding: 8px 14px;
font-size: .92rem;
font-weight: 500;
border-radius: 2px;
transition: background .2s, color .2s;
position: relative;
}
.header .main-nav > a:hover,
.header .main-nav .nav-item:hover,
.header .main-nav .nav-dd > a:hover {
background: rgba(208,87,48,.08);
color: var(--terra);
}
/* === V26.2 Header CTA simplified ============================== */
.header .nav-cta {
display: flex;
align-items: center;
gap: 16px;
margin-left: 8px;
}
.lang-switch-mini {
display: flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-family: var(--font-label);
letter-spacing: .08em;
}
.lang-switch-mini a {
color: var(--ink-2);
text-decoration: none;
padding: 4px 4px;
transition: color .2s;
}
.lang-switch-mini a:hover { color: var(--ink); }
.lang-switch-mini a.active { color: var(--ink); font-weight: 600; }
.lang-switch-mini span { color: var(--line); }
.phone-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
transition: all .2s;
}
.phone-link:hover {
background: var(--terra);
color: #fff;
border-color: var(--terra);
transform: translateY(-1px);
}
@media (max-width: 980px) {
.header .main-nav { display: flex; }
.header .nav-cta { gap: 4px; }
.header .container { gap: 12px; padding: 10px 16px; }
.header .logo img { height: 32px; }
}
/* === V26.2 Cream texture (verzwakt — V26.1 tralies verwijderd) ===== */
body {
background: var(--cream);
background-image:
radial-gradient(at 90% 10%, rgba(208,87,48,.025) 0%, transparent 50%),
radial-gradient(at 10% 90%, rgba(139,94,52,.02) 0%, transparent 50%);
background-attachment: fixed;
}
/* === V26.2 hero::after fade verwijderd — hero stopt op zijn eigen bodem === */
/* === V26.1 Mobile menu ============================================= */
.mobile-nav-toggle {
display: none;
background: transparent;
border: none;
width: 36px;
height: 36px;
flex-direction: column;
justify-content: center;
gap: 5px;
cursor: pointer;
padding: 0;
margin-left: auto;
z-index: 100;
position: relative;
}
.mobile-nav-toggle span {
display: block;
height: 2px;
background: var(--ink);
border-radius: 1px;
transition: all .3s ease;
}
.mobile-nav-toggle span:nth-child(1) { width: 24px; }
.mobile-nav-toggle span:nth-child(2) { width: 18px; }
.mobile-nav-toggle span:nth-child(3) { width: 24px; }
body.menu-open .mobile-nav-toggle span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
width: 24px;
}
body.menu-open .mobile-nav-toggle span:nth-child(2) {
opacity: 0;
}
body.menu-open .mobile-nav-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
width: 24px;
}
/* === /V26.1 ========================================================= */
/* ════════════════════════════════════════════════════════
POLISH v5 — Dynamic depth, motion, premium retail
Append below style.css
════════════════════════════════════════════════════════ */
/* ─────────── ANIMATIONS ─────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes drawLine{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms cubic-bezier(.2,.8,.2,1),transform 700ms cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:translateY(0)}
.reveal-d1.is-in{transition-delay:80ms}
.reveal-d2.is-in{transition-delay:160ms}
.reveal-d3.is-in{transition-delay:240ms}
.reveal-d4.is-in{transition-delay:320ms}
/* ─────────── HERO STATS — number counter fix display ─────────── */
.hero-stats > div strong{
font-variant-numeric:tabular-nums;
display:inline-block;
min-width:60px;
}
/* ─────────── ACTION-FEATURE — donker met depth ─────────── */
.action-feature{
background:#0E0E0E !important;
color:#fff !important;
position:relative;
overflow:hidden;
padding:96px 0 !important;
}
.action-feature::before{
content:"";
position:absolute;
top:-200px;left:-200px;
width:600px;height:600px;
background:radial-gradient(circle,rgba(249,83,0,.18) 0%,transparent 65%);
z-index:0;
pointer-events:none;
}
.action-feature::after{
content:"";
position:absolute;
bottom:-300px;right:-100px;
width:500px;height:500px;
background:radial-gradient(circle,rgba(249,83,0,.12) 0%,transparent 70%);
z-index:0;
pointer-events:none;
}
.action-feature > *{position:relative;z-index:1}
.action-feature .eyebrow{
color:#F95300 !important;
font-weight:700 !important;
}
.action-feature h2{color:#fff !important}
.action-feature h2 em{color:#F95300 !important;font-style:italic}
.action-feature p,
.action-feature .lead{
color:rgba(255,255,255,.78) !important;
font-size:1.0625rem !important;
}
.action-feature .action-feature-visual{
border-radius:18px !important;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05) inset;
position:relative;
}
.action-feature .action-feature-visual::after{
content:"";
position:absolute;
inset:0;
border-radius:18px;
background:linear-gradient(135deg,rgba(249,83,0,.15),transparent 50%);
pointer-events:none;
}
/* ─────────── CATEGORIE GRID — depth + hover scale ─────────── */
.cat-grid{gap:16px !important}
.cat-card{
border-radius:16px !important;
overflow:hidden;
position:relative;
transition:transform 500ms cubic-bezier(.2,.8,.2,1),box-shadow 500ms;
box-shadow:0 4px 16px rgba(14,14,14,.06);
}
.cat-card:hover{
transform:translateY(-4px);
box-shadow:0 20px 50px rgba(14,14,14,.18);
}
.cat-card img{transition:transform 900ms cubic-bezier(.2,.8,.2,1)}
.cat-card:hover img{transform:scale(1.08)}
.cat-card::after{
background:linear-gradient(180deg,rgba(14,10,6,0) 30%,rgba(14,10,6,.85) 100%) !important;
}
.cat-card .label small{
color:#F95300 !important;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.14em;
font-size:11px !important;
}
.cat-card .label h3{
font-family:'Fraunces',serif !important;
font-weight:500;
letter-spacing:-0.015em;
}
/* ─────────── PARTNERS — premium kaarten met levendigheid ─────────── */
.section-partners{
background:#FFFFFF !important;
position:relative;
overflow:hidden;
padding:96px 0 !important;
}
.section-partners::before{
content:"";
position:absolute;
top:50%;left:50%;
width:800px;height:800px;
transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(249,83,0,.05) 0%,transparent 60%);
pointer-events:none;
}
.section-partners > *{position:relative;z-index:1}
.partners-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:20px !important;
max-width:1240px !important;
margin:0 auto !important;
}
.partner-card{
background:#fff !important;
border:1px solid #EFEFEF !important;
border-radius:18px !important;
padding:36px 28px !important;
text-align:left !important;
position:relative;
overflow:hidden;
transition:transform 400ms cubic-bezier(.2,.8,.2,1),box-shadow 400ms,border-color 400ms !important;
text-decoration:none;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:space-between !important;
min-height:200px;
cursor:pointer;
}
.partner-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#F95300,#FFA470);
transform:scaleX(0);
transform-origin:left;
transition:transform 400ms cubic-bezier(.2,.8,.2,1);
}
.partner-card::after{
content:"";
position:absolute;
bottom:-50px;right:-50px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(249,83,0,.08) 0%,transparent 70%);
opacity:0;
transition:opacity 400ms;
pointer-events:none;
}
.partner-card:hover{
border-color:#FFD9C5 !important;
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(14,14,14,.10) !important;
}
.partner-card:hover::before{transform:scaleX(1)}
.partner-card:hover::after{opacity:1}
.partner-card > *{position:relative;z-index:1}
.partner-card .brand-name,
.partner-card h3{
font-family:'Fraunces',serif !important;
font-size:1.5rem !important;
font-weight:500 !important;
color:#0E0E0E !important;
background:none !important;
margin:0 0 6px 0 !important;
letter-spacing:-0.015em;
line-height:1.1;
}
.partner-card .brand-list,
.partner-card p{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
font-weight:500 !important;
color:#737373 !important;
background:none !important;
margin:0 0 24px 0 !important;
letter-spacing:0.005em;
}
.partner-card .brand-logo,
.partner-card .count-display,
.partner-card .stat-number{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:0.16em !important;
color:#F95300 !important;
background:none !important;
margin-top:auto;
padding:8px 12px !important;
border:1px solid #FFD9C5 !important;
border-radius:999px !important;
display:inline-flex;
align-items:center;
gap:6px;
background:#FFF1EA !important;
}
.partner-card .brand-logo::before,
.partner-card .count-display::before{
content:"→";
display:inline-block;
transition:transform 300ms;
}
.partner-card:hover .brand-logo::before,
.partner-card:hover .count-display::before{transform:translateX(4px)}
/* ─────────── USP STRIP (dark, 4 items) — premium met motion ─────────── */
.usp-strip{
background:linear-gradient(180deg,#0E0E0E 0%,#1A1A1A 100%) !important;
color:#fff !important;
padding:96px 0 !important;
position:relative;
overflow:hidden;
}
.usp-strip::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,#F95300 50%,transparent);
}
.usp-strip::after{
content:"";
position:absolute;
bottom:-200px;left:50%;
transform:translateX(-50%);
width:1000px;height:400px;
background:radial-gradient(ellipse,rgba(249,83,0,.10),transparent 70%);
pointer-events:none;
}
.usp-strip > *{position:relative;z-index:1}
.usp-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:48px !important;
}
.usp-item{
text-align:center;
padding:32px 24px;
border-radius:14px;
transition:background 300ms;
}
.usp-item:hover{background:rgba(255,255,255,.03)}
.usp-item .ico{
width:64px;height:64px;
margin:0 auto 20px;
background:linear-gradient(135deg,#F95300 0%,#D94600 100%) !important;
border-radius:50%;
display:grid;place-items:center;
font-size:28px;
box-shadow:0 8px 24px rgba(249,83,0,.35),0 0 0 8px rgba(249,83,0,.08);
position:relative;
}
.usp-item .ico::after{
content:"";
position:absolute;
inset:-12px;
border-radius:50%;
border:1px solid rgba(249,83,0,.2);
}
.usp-item h4{
color:#fff !important;
font-family:'Fraunces',serif !important;
font-size:1.25rem !important;
font-weight:500;
margin-bottom:8px;
}
.usp-item p{
font-size:14px !important;
color:rgba(255,255,255,.65) !important;
line-height:1.6;
}
/* ─────────── PROCESS — timeline-achtig met connector lijn ─────────── */
.process-sec{
background:#fff !important;
padding:96px 0 !important;
position:relative;
}
.process-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:24px !important;
position:relative;
max-width:1240px;
margin:0 auto;
}
.process-grid::before{
content:"";
position:absolute;
top:32px;left:60px;right:60px;
height:2px;
background:linear-gradient(90deg,#F95300 0%,#FFD9C5 50%,#EFEFEF 100%);
z-index:0;
}
.process-step{
position:relative;
background:#fff;
padding:0 !important;
text-align:center;
z-index:1;
}
.process-step .process-num,
.process-step .step-num{
width:64px;height:64px;
margin:0 auto 24px !important;
background:#fff !important;
border:2px solid #F95300 !important;
color:#F95300 !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
font-family:'Fraunces',serif !important;
font-size:1.5rem !important;
font-weight:600 !important;
position:relative;
transition:all 300ms;
}
.process-step:hover .process-num,
.process-step:hover .step-num{
background:#F95300 !important;
color:#fff !important;
transform:scale(1.05);
box-shadow:0 8px 20px rgba(249,83,0,.3);
}
.process-step h3,
.process-step .step-title{
font-family:'Fraunces',serif !important;
font-size:1.125rem !important;
font-weight:500 !important;
color:#0E0E0E !important;
margin-bottom:8px !important;
letter-spacing:-0.01em;
}
.process-step p{
font-size:14px !important;
color:#737373 !important;
line-height:1.6;
max-width:230px;
margin:0 auto;
}
/* ─────────── BESTSELLERS — depth + glow on hover ─────────── */
.section-bestsellers{
background:#fff !important;
padding:96px 0 !important;
}
.section-bestsellers .prod-card,
.prod-card{
background:#fff !important;
border:1px solid #EFEFEF !important;
border-radius:18px !important;
overflow:hidden;
transition:transform 400ms cubic-bezier(.2,.8,.2,1),box-shadow 400ms,border-color 400ms !important;
position:relative;
}
.prod-card::after{
content:"";
position:absolute;
inset:-1px;
border-radius:18px;
background:linear-gradient(135deg,rgba(249,83,0,.4),transparent 60%);
opacity:0;
z-index:-1;
transition:opacity 400ms;
filter:blur(20px);
}
.prod-card:hover{
transform:translateY(-6px);
border-color:#FFD9C5 !important;
box-shadow:0 24px 50px rgba(14,14,14,.10) !important;
}
.prod-card:hover::after{opacity:.5}
/* Fix prijs-bug definitief */
.prod-price{display:flex !important;flex-direction:column !important;gap:4px !important}
.prod-price .current-row{display:flex !important;align-items:baseline !important;gap:8px !important;flex-wrap:nowrap !important}
.prod-price .current-row strong{white-space:nowrap !important}
.prod-price .savings{align-self:flex-start !important;white-space:nowrap !important}
/* ─────────── SHOWROOM — premium ─────────── */
.showroom-sec{
background:linear-gradient(180deg,#FFFFFF 0%,#F4F2EE 100%) !important;
padding:120px 0 !important;
position:relative;
overflow:hidden;
}
.showroom-sec::before{
content:"";
position:absolute;
top:0;right:-200px;
width:600px;height:600px;
background:radial-gradient(circle,rgba(249,83,0,.06) 0%,transparent 65%);
pointer-events:none;
}
.showroom-img,
.showroom-img-wrap{
border-radius:24px !important;
overflow:hidden;
box-shadow:0 30px 60px rgba(14,14,14,.18),0 0 0 1px rgba(255,255,255,.5) inset !important;
position:relative;
}
.showroom-img::after,
.showroom-img-wrap::after{
content:"";
position:absolute;inset:0;
border-radius:24px;
background:linear-gradient(135deg,transparent 60%,rgba(249,83,0,.1));
pointer-events:none;
}
.showroom-hours{
background:#fff !important;
border:1px solid #EFEFEF !important;
border-radius:14px !important;
padding:28px !important;
box-shadow:0 8px 24px rgba(14,14,14,.04) !important;
}
.hours-row{
font-family:'Plus Jakarta Sans',sans-serif !important;
padding:10px 0 !important;
font-size:14px !important;
border-bottom:1px dashed #EFEFEF !important;
}
.hours-row:last-child{border:none !important}
.hours-row.closed{color:#A3A3A3 !important;font-style:italic}
/* ─────────── REVIEWS — wit met diepte, één highlight ─────────── */
.section-reviews,
.reviews-section{
background:#FFFFFF !important;
color:#0E0E0E !important;
padding:96px 0 !important;
position:relative;
overflow:hidden;
}
.section-reviews::before,
.reviews-section::before{
content:"";
position:absolute;
top:-100px;left:50%;
transform:translateX(-50%);
width:600px;height:300px;
background:radial-gradient(ellipse,rgba(249,83,0,.06),transparent 70%);
pointer-events:none;
}
.section-reviews .eyebrow,
.reviews-section .eyebrow{color:#F95300 !important;font-weight:700 !important}
.section-reviews h2,
.reviews-section h2{color:#0E0E0E !important}
.reviews-slider,
.reviews-track{position:relative;z-index:1}
.review{
background:#fff !important;
border:1px solid #EFEFEF !important;
color:#0E0E0E !important;
border-radius:20px !important;
padding:48px !important;
position:relative;
box-shadow:0 4px 24px rgba(14,14,14,.04) !important;
transition:transform 400ms,box-shadow 400ms;
}
.review::before{
content:"\"";
position:absolute;
top:24px;right:32px;
font-family:'Fraunces',serif;
font-size:80px;
color:rgba(249,83,0,.15);
line-height:1;
font-weight:600;
}
.review:hover{
transform:translateY(-2px);
box-shadow:0 16px 40px rgba(14,14,14,.08) !important;
}
.review .stars{
color:#F95300 !important;
font-size:18px !important;
margin-bottom:20px !important;
letter-spacing:2px;
}
.review p{
color:#0E0E0E !important;
font-family:'Fraunces',serif !important;
font-size:1.0625rem !important;
font-style:italic !important;
line-height:1.6 !important;
margin-bottom:24px !important;
}
.review .author{
color:#0E0E0E !important;
font-weight:600;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:14px;
padding-top:16px;
border-top:1px solid #EFEFEF;
}
.review .author small{
color:#737373 !important;
font-weight:400;
display:block;
margin-top:2px;
}
.reviews-dots .dot{background:#D4D4D4 !important;transition:all 300ms}
.reviews-dots .dot.active{background:#F95300 !important;transform:scale(1.4)}
/* ─────────── QUIZ — premium card ─────────── */
.quiz-sec{
background:#fff !important;
padding:96px 0 !important;
}
.quiz-box{
background:linear-gradient(135deg,#FFF1EA 0%,#FFFFFF 100%) !important;
border:1px solid #FFD9C5 !important;
border-radius:24px !important;
padding:48px !important;
box-shadow:0 20px 60px rgba(249,83,0,.08) !important;
max-width:760px;
margin:0 auto;
}
.quiz-step h3{
font-family:'Fraunces',serif !important;
font-size:1.5rem !important;
color:#0E0E0E !important;
}
.quiz-opts button,
.quiz-opts .quiz-opt{
background:#fff !important;
border:1.5px solid #EFEFEF !important;
border-radius:12px !important;
padding:16px 20px !important;
transition:all 300ms !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-weight:500 !important;
color:#0E0E0E !important;
}
.quiz-opts button:hover,
.quiz-opts .quiz-opt:hover{
border-color:#F95300 !important;
background:#fff !important;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(249,83,0,.15) !important;
}
/* ─────────── FAQ — strakker ─────────── */
.faq-sec{
background:#fff !important;
padding:96px 0 !important;
}
.faq-item{
border:1px solid #EFEFEF !important;
border-radius:14px !important;
margin-bottom:12px !important;
padding:0 !important;
background:#fff;
transition:all 250ms;
overflow:hidden;
}
.faq-item:hover{border-color:#FFD9C5 !important}
.faq-item summary,
.faq-item .faq-q{
padding:20px 24px !important;
cursor:pointer;
font-family:'Fraunces',serif !important;
font-size:1.0625rem !important;
font-weight:500 !important;
color:#0E0E0E !important;
display:flex;
justify-content:space-between;
align-items:center;
list-style:none;
}
.faq-icon{
color:#F95300 !important;
font-size:24px !important;
transition:transform 300ms;
}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
/* ─────────── FOOT-USP-BAR — premium dividers + iconen ─────────── */
.foot-usp-bar{
background:#fff !important;
border-top:1px solid #EFEFEF !important;
border-bottom:1px solid #EFEFEF !important;
padding:32px 0 !important;
}
.foot-usp-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:0 !important;
max-width:1240px !important;
margin:0 auto !important;
padding:0 24px;
}
.foot-usp-grid > *{
padding:16px 32px !important;
border-right:1px solid #EFEFEF !important;
display:flex !important;
align-items:center !important;
gap:18px !important;
transition:all 300ms;
}
.foot-usp-grid > *:last-child{border-right:none !important}
.foot-usp-grid > *:hover{
background:#FFFFFF;
}
.foot-usp-grid svg,
.foot-usp-grid .icon{
width:48px !important;
height:48px !important;
flex-shrink:0;
background:linear-gradient(135deg,#FFF1EA 0%,#FFE0CC 100%) !important;
color:#F95300 !important;
border-radius:14px !important;
padding:12px;
fill:#F95300 !important;
stroke:#F95300 !important;
transition:transform 300ms;
}
.foot-usp-grid > *:hover svg,
.foot-usp-grid > *:hover .icon{
transform:scale(1.08) rotate(-3deg);
}
.foot-usp-grid strong,
.foot-usp-grid .label{
display:block !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
font-weight:700 !important;
color:#0E0E0E !important;
text-transform:uppercase !important;
letter-spacing:0.1em !important;
margin-bottom:2px !important;
}
.foot-usp-grid small,
.foot-usp-grid .sub{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
color:#737373 !important;
}
/* ─────────── HERO POLISH ─────────── */
.hero-stats{padding-top:24px !important;border-top:1px solid rgba(255,255,255,.18) !important}
.hero-stats > div{position:relative}
.hero-stats > div::after{
content:"";
position:absolute;top:0;bottom:0;right:-24px;width:1px;
background:rgba(255,255,255,.15);
}
.hero-stats > div:last-child::after{display:none}
/* Disclaimer rustiger */
.disclaimer-lk{
position:relative;
background:#FFFFFF !important;
border-radius:0 !important;
border:none !important;
border-top:1px solid #EFEFEF !important;
padding:24px 24px !important;
max-width:100% !important;
margin:0 !important;
font-size:11px !important;
color:#A3A3A3 !important;
text-align:center;
letter-spacing:0.02em;
}
.disclaimer-lk strong{color:#737373 !important}
/* ─────────── MOBILE ─────────── */
@media (max-width:900px){
.partners-grid,.usp-grid,.process-grid,.foot-usp-grid{
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
.process-grid::before{display:none}
.partner-card{padding:24px 20px !important;min-height:160px}
.partner-card .brand-name,.partner-card h3{font-size:1.2rem !important}
.usp-strip,.section-partners,.process-sec,.faq-sec,
.section-reviews,.reviews-section,.quiz-sec,.section-bestsellers{
padding:64px 0 !important;
}
.showroom-sec{padding:64px 0 !important}
.review{padding:32px 24px !important}
.review::before{font-size:60px;top:16px;right:20px}
.quiz-box{padding:28px !important}
.foot-usp-grid > *{padding:14px 18px !important;gap:12px !important}
.foot-usp-grid > *:nth-child(2n){border-right:none !important}
.foot-usp-grid > *:nth-child(-n+2){border-bottom:1px solid #EFEFEF !important}
.foot-usp-grid svg,.foot-usp-grid .icon{width:40px !important;height:40px !important}
}
/* ════════════════════════════════════════════════════════
POLISH v6 — Fix: USP wit-op-wit, partners polish, hero->action, CTAs, header
Append onderaan style.css
════════════════════════════════════════════════════════ */
/* ─── 1. USP-STRIP: cards waren wit op zwart met witte text → onleesbaar ─── */
.usp-strip{
background:linear-gradient(180deg,#0E0E0E 0%,#1A1A1A 100%) !important;
color:#fff !important;
padding:96px 0 !important;
position:relative;
overflow:hidden;
}
.usp-strip .container{position:relative;z-index:1}
.usp-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:24px !important;
}
/* Maak van die witte vlakken juist NIETS — gewoon transparante items */
.usp-item{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:8px 12px !important;
text-align:center;
position:relative;
}
.usp-item:not(:last-child)::after{
content:"";
position:absolute;
top:25%;bottom:25%;right:-12px;
width:1px;
background:rgba(255,255,255,.12);
}
.usp-item .ico{
width:64px;height:64px;
margin:0 auto 20px;
background:linear-gradient(135deg,#F95300 0%,#D94600 100%) !important;
border-radius:50%;
display:grid;place-items:center;
font-size:26px;
color:#fff !important;
box-shadow:0 10px 28px rgba(249,83,0,.45),0 0 0 10px rgba(249,83,0,.08);
position:relative;
}
.usp-item h4{
color:#fff !important;
font-family:'Fraunces',serif !important;
font-size:1.2rem !important;
font-weight:500 !important;
margin-bottom:8px !important;
}
.usp-item p{
font-size:14px !important;
color:rgba(255,255,255,.7) !important;
line-height:1.6 !important;
max-width:220px;
margin:0 auto;
}
/* ─── 2. PARTNERS-GRID: count + ondertitel donkerder, layout strakker ─── */
.partner-card{
background:#fff !important;
border:1px solid #E5E5E5 !important;
border-radius:18px !important;
padding:28px !important;
text-align:left !important;
position:relative;
overflow:hidden;
transition:all 350ms cubic-bezier(.2,.8,.2,1) !important;
text-decoration:none;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
min-height:auto;
cursor:pointer;
gap:0 !important;
}
.partner-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#F95300,#FFA470);
transform:scaleX(0);
transform-origin:left;
transition:transform 400ms cubic-bezier(.2,.8,.2,1);
}
.partner-card::after{
content:"";
position:absolute;
bottom:-60px;right:-60px;
width:180px;height:180px;
background:radial-gradient(circle,rgba(249,83,0,.10) 0%,transparent 70%);
opacity:0;
transition:opacity 400ms;
pointer-events:none;
}
.partner-card:hover{
border-color:#F95300 !important;
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(14,14,14,.10) !important;
}
.partner-card:hover::before{transform:scaleX(1)}
.partner-card:hover::after{opacity:1}
.partner-card > *{position:relative;z-index:1}
.partner-card .brand-name,
.partner-card h3{
font-family:'Fraunces',serif !important;
font-size:1.5rem !important;
font-weight:500 !important;
color:#0E0E0E !important;
background:none !important;
margin:0 0 8px 0 !important;
letter-spacing:-0.015em !important;
line-height:1.1 !important;
}
.partner-card .brand-list,
.partner-card p{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
color:#404040 !important;
background:none !important;
margin:0 0 20px 0 !important;
letter-spacing:0.005em !important;
line-height:1.4 !important;
}
.partner-card .brand-logo,
.partner-card .count-display,
.partner-card .stat-number{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:12px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:0.12em !important;
color:#D94600 !important;
background:#FFF1EA !important;
border:1px solid #FFD9C5 !important;
margin-top:0 !important;
padding:6px 12px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
width:auto !important;
align-self:flex-start;
}
.partner-card .brand-logo::after,
.partner-card .count-display::after{
content:"→";
display:inline-block;
transition:transform 300ms;
font-weight:700;
}
.partner-card:hover .brand-logo::after,
.partner-card:hover .count-display::after{transform:translateX(4px)}
/* ─── 3. HERO → ACTION-FEATURE overgang gladder ─── */
.hero{margin-bottom:0 !important}
.action-feature{
margin-top:0 !important;
border-top:none !important;
}
/* Donkere band tussen hero en action-feature verbergen */
.dark-band,.gradient-band,.terra-band{display:none !important}
/* ─── 4. HERO BUTTONS — professioneler ─── */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.hero .btn-primary,
.hero .btn-primary-hero{
background:#F95300 !important;
color:#fff !important;
border:none !important;
padding:15px 32px !important;
font-weight:600 !important;
border-radius:10px !important;
box-shadow:0 8px 24px rgba(249,83,0,.35) !important;
transition:all 250ms !important;
}
.hero .btn-primary:hover,
.hero .btn-primary-hero:hover{
background:#D94600 !important;
transform:translateY(-2px) !important;
box-shadow:0 12px 32px rgba(249,83,0,.5) !important;
}
.hero .btn-outline,
.hero .btn-secondary-hero,
.hero .btn-ink{
background:rgba(255,255,255,.08) !important;
backdrop-filter:blur(12px) !important;
color:#fff !important;
border:1.5px solid rgba(255,255,255,.4) !important;
padding:15px 32px !important;
font-weight:600 !important;
border-radius:10px !important;
transition:all 250ms !important;
}
.hero .btn-outline:hover,
.hero .btn-secondary-hero:hover,
.hero .btn-ink:hover{
background:#fff !important;
color:#0E0E0E !important;
border-color:#fff !important;
transform:translateY(-2px) !important;
}
/* ─── 5. HEADER — minder ingezoomd, slimmer compacter ─── */
.header{
background:#fff !important;
border-bottom:1px solid #E5E5E5 !important;
box-shadow:none !important;
}
.header-inner{
padding:14px 0 !important;
min-height:auto !important;
gap:32px !important;
}
.logo img{
height:38px !important;
width:auto !important;
}
.logo span{
font-size:1.1rem !important;
font-weight:600 !important;
}
.nav{
display:flex !important;
gap:32px !important;
align-items:center !important;
}
.nav > a,
.nav-wrapper > a{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
color:#0E0E0E !important;
padding:8px 0 !important;
position:relative;
transition:color 200ms;
}
.nav-dd{position:relative}
.nav-dd > a{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
color:#0E0E0E !important;
display:flex !important;
align-items:center !important;
gap:4px;
}
.nav-dd-menu{
background:#fff !important;
border:1px solid #E5E5E5 !important;
border-radius:14px !important;
padding:8px !important;
box-shadow:0 12px 40px rgba(14,14,14,.10) !important;
min-width:280px !important;
}
.nav-dd-menu a{
padding:12px 14px !important;
border-radius:8px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
transition:background 200ms !important;
}
.nav-dd-menu a:hover{background:#FFF1EA !important;color:#D94600 !important}
.nav-dd-menu a strong{
display:block;
font-weight:600 !important;
font-size:14px !important;
color:#0E0E0E !important;
margin-bottom:2px !important;
}
.nav-dd-menu a small{
display:block;
font-size:12px !important;
color:#737373 !important;
font-weight:400 !important;
}
/* Header-actions: telefoon + lang switch + cart */
.header-actions{
display:flex !important;
align-items:center !important;
gap:14px !important;
}
.lang-switch-mini{
display:flex !important;
gap:4px !important;
font-size:12px !important;
align-items:center;
color:#737373;
}
.lang-switch-mini a{
padding:4px 8px !important;
border-radius:6px !important;
font-weight:600 !important;
font-size:12px !important;
color:#737373 !important;
transition:all 200ms;
}
.lang-switch-mini a.active{
color:#F95300 !important;
background:#FFF1EA !important;
}
.phone-link{
display:flex !important;
align-items:center !important;
gap:6px !important;
padding:8px 14px !important;
background:#FFF1EA !important;
border-radius:999px !important;
color:#D94600 !important;
font-weight:600 !important;
font-size:13px !important;
text-decoration:none !important;
transition:all 200ms;
}
.phone-link:hover{background:#F95300 !important;color:#fff !important}
/* ─── 6. SECTIE-OVERGANGEN strakker ─── */
section{margin:0 !important}
/* Volgende sectie na hero direct wit zonder donkere band */
.hero + section,
.hero + *{background:#fff;border-top:none}
/* ─── 7. ACTION-FEATURE polish ─── */
.action-feature{
background:linear-gradient(135deg,#0E0E0E 0%,#1A1410 100%) !important;
position:relative;
overflow:hidden;
}
.action-feature::before{
content:"";
position:absolute;
top:-200px;left:-200px;
width:600px;height:600px;
background:radial-gradient(circle,rgba(249,83,0,.20) 0%,transparent 65%);
z-index:0;
pointer-events:none;
}
/* ─── 8. HERO STATS responsive number-fix ─── */
.hero-stats > div strong{
font-variant-numeric:tabular-nums !important;
font-feature-settings:"tnum" !important;
}
/* ─── 9. ADD-IN-FLOW OFFERTE CTAs ─── */
.cta-banner-inline{
background:linear-gradient(135deg,#FFF1EA 0%,#FFFFFF 100%);
border:1px solid #FFD9C5;
border-radius:18px;
padding:32px 40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin:32px auto;
max-width:1240px;
}
.cta-banner-inline .cta-text strong{
display:block;
font-family:'Fraunces',serif;
font-size:1.5rem;
font-weight:500;
color:#0E0E0E;
letter-spacing:-0.01em;
margin-bottom:4px;
}
.cta-banner-inline .cta-text p{
color:#404040;
font-size:14px;
margin:0;
}
/* ─── 10. MOBILE ─── */
@media (max-width:900px){
.usp-grid{grid-template-columns:1fr 1fr !important;gap:32px !important}
.usp-item:not(:last-child)::after{display:none}
.partners-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
.partner-card{padding:20px !important;min-height:auto}
.partner-card .brand-name,.partner-card h3{font-size:1.15rem !important}
.partner-card .brand-list,.partner-card p{font-size:13px !important;margin-bottom:14px !important}
.partner-card .brand-logo,.partner-card .count-display{font-size:10px !important;padding:5px 10px !important}
.header-inner{padding:10px 0 !important;gap:14px !important}
.logo img{height:32px !important}
.nav:not(.main-nav){display:none !important}
.phone-link{padding:6px 10px !important;font-size:12px !important}
.lang-switch-mini{display:none !important}
.cta-banner-inline{padding:20px;flex-direction:column;align-items:flex-start;text-align:left}
}
/* ════════════════════════════════════════════════════════
POLISH v7 — partners always-visible, hero smaller, process visible
════════════════════════════════════════════════════════ */
/* HERO kleiner */
.hero{min-height:64vh !important;padding:80px 0 !important}
.hero h1{font-size:clamp(2rem,4.5vw,3.5rem) !important}
.hero p,.hero .lede{font-size:1rem !important;margin-bottom:32px !important;max-width:520px}
.hero-eyebrow{padding:8px 16px !important;font-size:11px !important;margin-bottom:20px !important}
.hero-cta{margin-bottom:36px !important}
.hero-stats{padding-top:20px !important;gap:32px !important}
.hero-stats > div strong{font-size:1.5rem !important}
.hero-stats > div span{font-size:11px !important}
/* PARTNER CARDS — geen hover nodig, altijd levendig */
.partner-card{
background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%) !important;
border:1px solid #E5E5E5 !important;
position:relative !important;
}
.partner-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;left:0 !important;right:0 !important;
height:3px !important;
background:linear-gradient(90deg,#F95300 0%,#FFA470 100%) !important;
transform:scaleX(1) !important;
border-radius:18px 18px 0 0 !important;
transform-origin:left !important;
}
.partner-card::after{
content:"" !important;
position:absolute !important;
bottom:-40px !important;right:-40px !important;
width:140px;height:140px !important;
background:radial-gradient(circle,rgba(249,83,0,.10) 0%,transparent 70%) !important;
opacity:1 !important;
pointer-events:none !important;
}
.partner-card:hover{
transform:translateY(-6px) !important;
border-color:#F95300 !important;
box-shadow:0 24px 50px rgba(14,14,14,.12) !important;
}
.partner-card:hover::after{
width:200px;height:200px !important;
background:radial-gradient(circle,rgba(249,83,0,.18) 0%,transparent 65%) !important;
}
/* PROCESS-SEC — zichtbare titel/eyebrow ipv lichte tekst */
.process-sec .eyebrow{
color:#F95300 !important;
font-weight:700 !important;
font-size:11px !important;
letter-spacing:0.18em !important;
}
.process-sec h2{color:#0E0E0E !important}
.process-sec h2 em{color:#F95300 !important;font-style:italic}
.process-sec .lede,
.process-sec > .container > p{
color:#404040 !important;
font-size:1.0625rem !important;
}
/* DISCLAIMER — nu boven footer, strakker */
.disclaimer-lk{
background:#FFFFFF !important;
border:none !important;
border-top:1px solid #EFEFEF !important;
padding:20px 0 !important;
margin:0 !important;
font-size:11px !important;
color:#737373 !important;
text-align:center !important;
max-width:100% !important;
line-height:1.6;
}
.disclaimer-lk strong{color:#404040 !important}
/* FOOTER — kop-styling beter zichtbaar, structuur strakker */
footer .foot-col h5{
color:#fff !important;
font-family:'Fraunces',serif !important;
font-size:14px !important;
font-weight:600 !important;
text-transform:uppercase !important;
letter-spacing:0.14em !important;
margin-bottom:20px !important;
padding-bottom:12px !important;
border-bottom:1px solid rgba(255,255,255,.1) !important;
}
footer .foot-col li,
footer .foot-col a,
footer .foot-col p{
color:rgba(255,255,255,.7) !important;
font-size:14px !important;
}
footer .foot-col a:hover{color:#F95300 !important}
footer .foot-col li{margin-bottom:10px !important}
@media(max-width:900px){
.hero{min-height:55vh !important;padding:60px 0 !important}
.hero h1{font-size:1.85rem !important}
.partner-card{padding:20px !important}
}
/* ════════════════════════════════════════════════════════
POLISH v8 — Premium retail full polish
Append onderaan style.css
════════════════════════════════════════════════════════ */
/* ─── HERO juiste maat + zachte fade naar bg-2 ─── */
.hero{min-height:72vh !important;padding:90px 0 !important;margin-bottom:0 !important}
.hero h1{font-size:clamp(2.25rem,5vw,3.75rem) !important;line-height:1.05 !important}
.hero p,.hero .lede{font-size:1.0625rem !important;margin-bottom:32px !important;max-width:540px}
.hero-stats{padding-top:24px !important;gap:48px !important;border-top:1px solid rgba(255,255,255,.22) !important}
.hero-stats > div strong{font-size:1.875rem !important;line-height:1}
.hero-stats > div span{font-size:11px !important;letter-spacing:0.04em;color:rgba(255,255,255,.75)}
/* ─── TRUST-STRIP onder hero (live status + sterren + badges) ─── */
.trust-strip{
background:#fff;
border-bottom:1px solid #EFEFEF;
padding:14px 0;
}
.trust-strip .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
}
.trust-item{
display:flex;
align-items:center;
gap:10px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:500;
color:#404040;
}
.trust-item .dot-live{
width:8px;height:8px;
background:#2E7D32;
border-radius:50%;
display:inline-block;
animation:pulse-live 2s ease-in-out infinite;
box-shadow:0 0 0 4px rgba(46,125,50,.15);
}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.5}}
.trust-item .stars{color:#F95300;font-size:14px;letter-spacing:1px}
.trust-item strong{color:#0E0E0E;font-weight:700}
.trust-item .ico-svg{width:18px;height:18px;color:#F95300;flex-shrink:0}
/* ─── FILTER-CHIPS bar onder trust ─── */
.filter-chips-bar{
background:#FFFFFF;
border-bottom:1px solid #EFEFEF;
padding:18px 0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.filter-chips-bar .container{
display:flex;
gap:10px;
flex-wrap:nowrap;
align-items:center;
}
.filter-chips-bar .chips-label{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.14em;
color:#737373;
flex-shrink:0;
margin-right:8px;
}
.fchip{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 16px;
background:#fff;
border:1px solid #E5E5E5;
border-radius:999px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:500;
color:#0E0E0E;
white-space:nowrap;
transition:all 200ms;
text-decoration:none;
}
.fchip:hover{
border-color:#F95300;
background:#FFF1EA;
color:#D94600;
transform:translateY(-1px);
}
.fchip .chip-icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.fchip.featured{
background:#0E0E0E;
color:#fff;
border-color:#0E0E0E;
}
.fchip.featured:hover{background:#F95300;border-color:#F95300}
/* ─── PROCESS-SEC tekst FIX — donker leesbaar ─── */
.process-sec{
background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%) !important;
padding:96px 0 !important;
}
.process-sec .eyebrow{color:#F95300 !important;font-weight:700 !important}
.process-sec h2{color:#0E0E0E !important}
.process-sec h2 em{color:#F95300 !important;font-style:italic}
.process-sec > .container > p,
.process-sec .lede{
color:#404040 !important;
font-size:1.0625rem !important;
}
.process-sec .sec-head p{color:#404040 !important}
/* ─── PARTNER CARDS v3 — variatie + levendigheid ─── */
.partners-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:18px !important;
}
.partner-card{
background:#fff !important;
border:1px solid #E5E5E5 !important;
border-radius:18px !important;
padding:28px 24px !important;
position:relative !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
min-height:200px !important;
transition:all 350ms cubic-bezier(.2,.8,.2,1) !important;
text-decoration:none;
}
.partner-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#F95300 0%,#FFA470 100%);
z-index:1;
}
.partner-card::after{
content:"";
position:absolute;
bottom:-50px;right:-50px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(249,83,0,.10) 0%,transparent 70%);
pointer-events:none;
transition:all 350ms;
}
.partner-card:hover{
border-color:#F95300 !important;
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(14,14,14,.12) !important;
}
.partner-card:hover::after{
width:240px;height:240px;
background:radial-gradient(circle,rgba(249,83,0,.16) 0%,transparent 65%);
}
.partner-card > *{position:relative;z-index:2}
.partner-card .brand-name,
.partner-card h3{
font-family:'Fraunces',serif !important;
font-size:1.4rem !important;
font-weight:500 !important;
color:#0E0E0E !important;
letter-spacing:-0.015em !important;
margin:0 0 8px 0 !important;
line-height:1.1 !important;
background:none !important;
}
.partner-card .brand-list,
.partner-card p{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
font-weight:500 !important;
color:#404040 !important;
margin:0 0 20px 0 !important;
line-height:1.5 !important;
background:none !important;
}
/* Count = grote getallen ipv pill */
.partner-card .brand-logo,
.partner-card .count-display,
.partner-card .stat-number{
display:flex !important;
align-items:baseline !important;
gap:6px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
background:none !important;
border:none !important;
padding:0 !important;
margin:0 !important;
border-radius:0 !important;
align-self:flex-start !important;
}
.partner-card .brand-logo::before,
.partner-card .count-display::before{
content:attr(data-count);
font-family:'Fraunces',serif !important;
font-size:2rem !important;
font-weight:500 !important;
color:#F95300 !important;
letter-spacing:-0.02em !important;
line-height:1 !important;
}
.partner-card .brand-logo::after,
.partner-card .count-display::after{
content:"vloeren →";
font-size:11px !important;
font-weight:700 !important;
color:#737373 !important;
text-transform:uppercase !important;
letter-spacing:0.14em !important;
transition:transform 300ms,color 300ms;
}
.partner-card:hover .brand-logo::after,
.partner-card:hover .count-display::after{
color:#F95300 !important;
transform:translateX(4px);
}
/* ─── SHOWROOM SECTION mix ─── */
.showroom-sec{
background:linear-gradient(180deg,#FFFFFF 0%,#F4F2EE 100%) !important;
padding:120px 0 !important;
position:relative;
overflow:hidden;
}
.showroom-grid{
display:grid !important;
grid-template-columns:1.1fr 1fr !important;
gap:80px !important;
align-items:center !important;
}
.showroom-img-stack{
position:relative;
height:560px;
}
.showroom-img-main{
position:absolute;
top:0;left:0;
width:78%;
height:78%;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 60px rgba(14,14,14,.18);
z-index:2;
}
.showroom-img-main img,
.showroom-img-main video{
width:100%;height:100%;
object-fit:cover;
}
.showroom-img-detail{
position:absolute;
bottom:0;right:0;
width:60%;
height:50%;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 50px rgba(14,14,14,.15);
border:6px solid #fff;
z-index:3;
}
.showroom-img-detail img{width:100%;height:100%;object-fit:cover}
.showroom-stat-badge{
position:absolute;
top:24px;right:0;
background:#fff;
padding:16px 20px;
border-radius:14px;
box-shadow:0 12px 30px rgba(14,14,14,.10);
z-index:4;
display:flex;
align-items:center;
gap:12px;
}
.showroom-stat-badge strong{
font-family:'Fraunces',serif;
font-size:1.5rem;
color:#F95300;
font-weight:500;
display:block;
line-height:1;
}
.showroom-stat-badge small{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
color:#737373;
text-transform:uppercase;
letter-spacing:0.12em;
font-weight:600;
}
/* ─── CALCULATOR WIDGET ─── */
.calc-sec{
background:#0E0E0E !important;
color:#fff !important;
padding:80px 0 !important;
position:relative;
overflow:hidden;
}
.calc-sec::before{
content:"";
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:800px;height:400px;
background:radial-gradient(ellipse,rgba(249,83,0,.18) 0%,transparent 65%);
pointer-events:none;
}
.calc-sec > *{position:relative;z-index:1}
.calc-widget{
max-width:760px;
margin:0 auto;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
border-radius:24px;
padding:48px;
text-align:center;
}
.calc-widget .eyebrow{
color:#F95300 !important;
font-weight:700 !important;
}
.calc-widget h2{
color:#fff !important;
font-size:clamp(1.5rem,2.5vw,2rem) !important;
margin-bottom:8px !important;
}
.calc-widget h2 em{color:#F95300 !important;font-style:italic}
.calc-widget .calc-lede{
color:rgba(255,255,255,.7);
font-size:15px;
margin-bottom:32px;
}
.calc-input-group{
display:flex;
gap:12px;
margin:24px 0;
justify-content:center;
}
.calc-input-group input,
.calc-input-group select{
flex:1;
max-width:200px;
padding:14px 18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
border-radius:10px;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
font-weight:500;
text-align:center;
}
.calc-input-group input::placeholder{color:rgba(255,255,255,.4)}
.calc-input-group input:focus,
.calc-input-group select:focus{
outline:none;
border-color:#F95300;
background:rgba(249,83,0,.10);
}
.calc-input-group select option{background:#0E0E0E;color:#fff}
.calc-result-display{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:24px;
padding-top:24px;
border-top:1px solid rgba(255,255,255,.15);
}
.calc-result-item{text-align:left}
.calc-result-item .lbl{
display:block;
font-size:10px;
text-transform:uppercase;
letter-spacing:0.14em;
color:rgba(255,255,255,.6);
font-weight:700;
margin-bottom:4px;
}
.calc-result-item .val{
font-family:'Fraunces',serif;
font-size:2rem;
color:#F95300;
font-weight:500;
letter-spacing:-0.02em;
line-height:1;
}
.calc-result-item .sub{
display:block;
font-size:12px;
color:rgba(255,255,255,.6);
margin-top:4px;
}
.calc-disclaimer{
font-size:11px;
color:rgba(255,255,255,.45);
margin-top:18px;
line-height:1.5;
}
/* ─── FOOTER strakker, social, badges ─── */
footer{
background:#0A0A0A !important;
color:#C9C2B8 !important;
padding:80px 0 0 !important;
}
.foot-grid{
display:grid !important;
grid-template-columns:1.5fr 1fr 1fr 1.2fr !important;
gap:60px !important;
padding-bottom:60px !important;
border-bottom:1px solid rgba(255,255,255,.08);
}
.foot-col h5{
color:#fff !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:0.18em !important;
margin-bottom:24px !important;
padding-bottom:14px !important;
border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:12px !important;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px}
.foot-col a{
color:rgba(255,255,255,.65) !important;
transition:color 200ms,padding-left 200ms;
display:inline-block;
}
.foot-col a:hover{
color:#F95300 !important;
padding-left:4px;
}
.foot-col p{
color:rgba(255,255,255,.65) !important;
font-size:14px !important;
line-height:1.7;
}
.foot-social{
display:flex;
gap:10px;
margin-top:20px;
}
.foot-social a{
width:38px;height:38px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
border-radius:50%;
display:grid;place-items:center;
color:rgba(255,255,255,.7) !important;
transition:all 200ms;
padding:0 !important;
}
.foot-social a:hover{
background:#F95300;
border-color:#F95300;
color:#fff !important;
padding-left:0;
transform:translateY(-2px);
}
.foot-social svg{width:16px;height:16px}
.foot-badges{
display:flex;
gap:14px;
flex-wrap:wrap;
align-items:stretch;
justify-content:center;
padding:36px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.foot-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
color:rgba(255,255,255,.75);
font-weight:500;
}
.foot-badge svg{width:14px;height:14px;color:#F95300}
.foot-badge strong{color:#fff;font-weight:600}
.foot-bottom{
padding:24px 0 !important;
text-align:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
color:rgba(255,255,255,.45);
}
.foot-bottom a{color:#F95300}
/* ─── DISCLAIMER nu boven footer ─── */
.disclaimer-lk{
background:#FFFFFF !important;
border:none !important;
border-top:1px solid #EFEFEF !important;
padding:18px 0 !important;
margin:0 !important;
font-size:11px !important;
color:#737373 !important;
text-align:center !important;
max-width:100% !important;
line-height:1.6;
}
.disclaimer-lk strong{color:#404040 !important}
/* ─── MOBILE ─── */
@media(max-width:900px){
.hero{min-height:60vh !important;padding:60px 0 !important}
.hero h1{font-size:1.85rem !important}
.trust-strip .container{flex-direction:column;align-items:flex-start;gap:12px}
.trust-item{font-size:12px}
.filter-chips-bar .container{padding-right:24px}
.partners-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
.partner-card{padding:20px !important;min-height:160px !important}
.partner-card .brand-name{font-size:1.15rem !important}
.partner-card .brand-logo::before,.partner-card .count-display::before{font-size:1.5rem !important}
.showroom-grid{grid-template-columns:1fr !important;gap:40px !important}
.showroom-img-stack{height:380px}
.calc-widget{padding:28px !important}
.calc-input-group{flex-direction:column;align-items:center}
.calc-input-group input,.calc-input-group select{max-width:100%;width:100%}
.calc-result-display{grid-template-columns:1fr;gap:12px}
.foot-grid{grid-template-columns:1fr 1fr !important;gap:30px !important}
.foot-badges{gap:8px}
.foot-badge{font-size:10px;padding:6px 10px}
}
@media(max-width:480px){
.foot-grid{grid-template-columns:1fr !important}
}
/* ════════════════════════════════════════════════════════
POLISH v9 — Header polish, trust-strip premium, calc fix
════════════════════════════════════════════════════════ */
/* ─── HEADER: NL/EN + telefoon op één lijn, strakker ─── */
.header-actions{
display:flex !important;
align-items:center !important;
gap:8px !important;
}
/* Lang-switch: 2 kleine tekst-links, niet die oranje doos */
.lang-switch-mini{
display:flex !important;
align-items:center !important;
gap:2px !important;
padding:4px 8px !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:12px !important;
color:#A3A3A3 !important;
}
.lang-switch-mini a{
padding:4px 6px !important;
font-size:12px !important;
font-weight:600 !important;
color:#A3A3A3 !important;
background:transparent !important;
border-radius:4px !important;
letter-spacing:0.04em !important;
text-transform:uppercase !important;
transition:color 200ms !important;
text-decoration:none !important;
}
.lang-switch-mini a:hover{color:#0E0E0E !important;background:transparent !important}
.lang-switch-mini a.active{
color:#0E0E0E !important;
background:transparent !important;
border-bottom:2px solid #F95300;
border-radius:0 !important;
padding-bottom:2px !important;
}
.lang-switch-mini span,
.lang-switch-mini::before{display:none !important}
/* Phone-link: nu CTA-style ipv ronde knop */
.phone-link{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:10px 16px !important;
background:#0E0E0E !important;
border-radius:10px !important;
color:#fff !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-weight:600 !important;
font-size:13px !important;
text-decoration:none !important;
transition:all 200ms !important;
border:1.5px solid #0E0E0E !important;
}
.phone-link::before{
content:"";
width:16px;height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
display:inline-block;
flex-shrink:0;
}
.phone-link:hover{
background:#F95300 !important;
border-color:#F95300 !important;
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(249,83,0,.3);
}
/* ─── TRUST-STRIP polish ─── */
.trust-strip{
background:#FFFFFF !important;
border-bottom:1px solid #EFEFEF !important;
padding:18px 0 !important;
}
.trust-strip .container{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:32px !important;
flex-wrap:wrap !important;
}
.trust-item{
display:flex !important;
align-items:center !important;
gap:12px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
font-weight:500 !important;
color:#404040 !important;
position:relative;
}
.trust-item:not(:last-child)::after{
content:"";
position:absolute;
right:-16px;top:50%;
transform:translateY(-50%);
width:1px;height:24px;
background:#E5E5E5;
}
.trust-item strong{color:#0E0E0E !important;font-weight:700 !important}
.trust-item .stars{color:#F95300 !important;font-size:15px !important;letter-spacing:1px !important}
.trust-item .ico-svg{
width:20px;height:20px;
color:#F95300 !important;
flex-shrink:0;
}
.trust-item .dot-live{
width:8px;height:8px;
background:#2E7D32;
border-radius:50%;
display:inline-block;
animation:pulse-live 2s ease-in-out infinite;
box-shadow:0 0 0 4px rgba(46,125,50,.18);
}
/* ─── CALCULATOR — m² input ZICHTBAAR ─── */
.calc-widget{padding:48px !important}
.calc-input-group{
display:grid !important;
grid-template-columns:200px 1fr !important;
gap:14px !important;
margin:28px auto !important;
max-width:520px !important;
}
/* Wrap voor m² input met suffix label */
.calc-m2-wrap{
position:relative;
}
.calc-m2-wrap::before{
content:"Oppervlakte";
position:absolute;
top:-22px;left:0;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.14em;
color:rgba(255,255,255,.55);
}
.calc-m2-wrap::after{
content:"m²";
position:absolute;
right:18px;top:50%;
transform:translateY(-50%);
font-family:'Fraunces',serif;
font-size:1.25rem;
font-weight:500;
color:#F95300;
pointer-events:none;
letter-spacing:-0.01em;
}
.calc-m2-wrap input{
width:100% !important;
max-width:none !important;
padding:16px 50px 16px 18px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:1.25rem !important;
font-weight:600 !important;
text-align:left !important;
background:rgba(255,255,255,.08) !important;
border:1.5px solid rgba(255,255,255,.22) !important;
border-radius:10px !important;
color:#fff !important;
}
.calc-type-wrap{position:relative}
.calc-type-wrap::before{
content:"Type vloer";
position:absolute;
top:-22px;left:0;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.14em;
color:rgba(255,255,255,.55);
}
.calc-type-wrap select{
width:100% !important;
max-width:none !important;
padding:16px 18px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
}
/* ─── HEADER container goed inline op één rij ─── */
.header-inner{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
padding:14px 0 !important;
}
@media(max-width:900px){
.trust-item:not(:last-child)::after{display:none}
.trust-strip .container{gap:12px}
.calc-input-group{grid-template-columns:1fr !important;max-width:100% !important}
.calc-m2-wrap::before,.calc-type-wrap::before{position:static;display:block;margin-bottom:6px}
.calc-widget{padding:24px !important}
.phone-link{padding:8px 12px !important;font-size:12px !important}
.lang-switch-mini{display:none !important}
}
/* ════════════════════════════════════════════════════════
PATTERN STRIP — horizontaal doorlopend, bold colors
════════════════════════════════════════════════════════ */
.pattern-subnav{
background:#0E0E0E;
padding:0;
margin:0;
border:none;
overflow:hidden;
position:relative;
}
.pattern-subnav .container{
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:0 !important;
max-width:100% !important;
padding:0 !important;
margin:0 !important;
}
.pattern-tile{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:180px;
padding:24px 20px;
text-decoration:none;
color:#fff;
border-right:1px solid rgba(255,255,255,.08);
overflow:hidden;
transition:all 300ms cubic-bezier(.2,.8,.2,1);
isolation:isolate;
}
.pattern-tile:last-child{border-right:none}
/* Bold ingekleurde achtergronden per tile */
.pattern-tile::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
transition:transform 600ms cubic-bezier(.2,.8,.2,1), opacity 400ms;
}
/* Tile 1 — Visgraat (warm oak) */
.pattern-tile[data-pattern="visgraat"]::before{
background:
repeating-linear-gradient(45deg, #8A5A2B 0 22px, #A07849 22px 44px, #6E4520 44px 66px),
#8A5A2B;
}
/* Tile 2 — Plank (donker eiken) */
.pattern-tile[data-pattern="plank"]::before{
background:
linear-gradient(180deg, transparent 0%, transparent 33%, rgba(0,0,0,.35) 33.5%, rgba(0,0,0,.35) 34%, transparent 34.5%, transparent 66%, rgba(0,0,0,.35) 66.5%, rgba(0,0,0,.35) 67%, transparent 67.5%),
linear-gradient(90deg, #6E4520, #4A2D17);
}
/* Tile 3 — PVC Klik (grijs eiken) */
.pattern-tile[data-pattern="click"]::before{
background:
repeating-linear-gradient(90deg, #707070 0 60px, #5A5A5A 60px 120px),
linear-gradient(0deg, transparent 49.5%, rgba(0,0,0,.4) 49.5%, rgba(0,0,0,.4) 50.5%, transparent 50.5%),
#707070;
}
/* Tile 4 — PVC Plak (warm beige) */
.pattern-tile[data-pattern="dryback"]::before{
background:
repeating-linear-gradient(90deg, transparent 0 50px, rgba(0,0,0,.18) 50px 51px, transparent 51px 100px),
linear-gradient(135deg, #C19A6B, #A07849);
}
/* Tile 5 — Laminaat (whitewashed oak) */
.pattern-tile[data-pattern="laminaat"]::before{
background:
repeating-linear-gradient(90deg, #C7A98B 0 50px, #B8987A 50px 100px),
linear-gradient(135deg, #D4B896, #B8987A);
}
/* Tile 6 — Trap (rich walnut) */
.pattern-tile[data-pattern="trap"]::before{
background:
linear-gradient(180deg, #4A2D17 0%, #4A2D17 14%, #5C3F28 14.5%, #5C3F28 28%, #4A2D17 28.5%, #4A2D17 42%, #5C3F28 42.5%, #5C3F28 56%, #4A2D17 56.5%, #4A2D17 70%, #5C3F28 70.5%, #5C3F28 84%, #4A2D17 84.5%, #4A2D17 100%),
#4A2D17;
}
/* Dark overlay om tekst leesbaar te maken */
.pattern-tile::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.7) 100%);
z-index:-1;
transition:opacity 300ms;
}
.pattern-tile:hover{transform:translateY(-2px)}
.pattern-tile:hover::before{transform:scale(1.05)}
.pattern-tile:hover::after{
background:linear-gradient(180deg, rgba(249,83,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.8) 100%);
}
.pattern-tile.active::after{
background:linear-gradient(180deg, rgba(249,83,0,.25) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.85) 100%);
}
.pattern-tile.active{border-right-color:#F95300}
.pattern-tile-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.pattern-tile-number{
font-family:'Fraunces',serif;
font-size:11px;
font-weight:500;
letter-spacing:0.16em;
color:rgba(255,255,255,.5);
text-transform:uppercase;
}
.pattern-tile-arrow{
width:32px;height:32px;
border-radius:50%;
background:rgba(255,255,255,.12);
display:grid;
place-items:center;
transition:all 250ms;
backdrop-filter:blur(4px);
}
.pattern-tile-arrow svg{
width:14px;height:14px;
color:#fff;
transition:transform 250ms;
}
.pattern-tile:hover .pattern-tile-arrow{
background:#F95300;
}
.pattern-tile:hover .pattern-tile-arrow svg{transform:translate(2px,-2px)}
.pattern-tile-bottom{
position:relative;
}
.pattern-tile-label{
display:block;
font-family:'Fraunces',serif;
font-size:28px;
font-weight:500;
letter-spacing:-0.02em;
color:#fff;
line-height:1;
margin-bottom:6px;
text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.pattern-tile-count{
display:inline-flex;
align-items:center;
gap:6px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:500;
letter-spacing:0.1em;
text-transform:uppercase;
color:rgba(255,255,255,.75);
}
.pattern-tile-count::before{
content:"";
width:18px;height:1px;
background:#F95300;
display:inline-block;
}
@media(max-width:1100px){
.pattern-subnav .container{
grid-template-columns:repeat(3,1fr) !important;
}
.pattern-tile{min-height:160px;padding:18px 16px}
.pattern-tile-label{font-size:22px}
.pattern-tile:nth-child(3){border-right:none}
}
@media(max-width:600px){
.pattern-subnav .container{
grid-template-columns:repeat(2,1fr) !important;
}
.pattern-tile{min-height:140px;padding:16px 14px}
.pattern-tile-label{font-size:18px}
.pattern-tile-arrow{width:26px;height:26px}
.pattern-tile-number{font-size:10px}
.pattern-tile-count{font-size:10px}
.pattern-tile:nth-child(2){border-right:none}
.pattern-tile:nth-child(4){border-right:none}
}
/* ════════════════════════════════════════════════════════
SHOP — overige polish behouden van v12, nu net iets warmer
════════════════════════════════════════════════════════ */
/* Shop hero direct na pattern-strip — extra ruimte */
.pattern-subnav + .container .shop-hero,
.pattern-subnav + section.shop-hero,
.page-header + .pattern-subnav + .container > .shop-hero{
padding-top:48px !important;
}
/* Verberg de subcategorie filter-group in sidebar omdat patroon-strip dit nu doet */
.filter-group[data-group="subcat"]{
display:none !important;
}
/* Page-header background match */
.page-header{
background:#FFFFFF !important;
border-bottom:none !important;
padding:24px 0 16px !important;
}
.breadcrumbs{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:12px !important;
color:#737373 !important;
letter-spacing:0.04em !important;
text-transform:uppercase !important;
}
.breadcrumbs a{color:#737373 !important;text-decoration:none;transition:color 200ms}
.breadcrumbs a:hover{color:#F95300 !important}
/* ════════════════════════════════════════════════════════
PATTERN STRIP — REBUILD: clean, geen rare overlays
════════════════════════════════════════════════════════ */
.pattern-subnav{
background:#FFFFFF;
padding:0;
margin:0;
border-top:1px solid #EFEFEF;
border-bottom:1px solid #EFEFEF;
overflow:hidden;
}
.pattern-subnav .container{
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:0 !important;
max-width:100% !important;
padding:0 !important;
margin:0 !important;
}
.pattern-tile{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
min-height:200px;
padding:24px 22px;
text-decoration:none;
color:#fff;
border-right:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:flex 400ms cubic-bezier(.2,.8,.2,1);
isolation:isolate;
}
.pattern-tile:last-child{border-right:none}
/* Achtergrond: HELDERE foto-achtige wood pattern, GEEN dark overlay default */
.pattern-tile::before{
content:"";
position:absolute;
inset:0;
z-index:-2;
transition:transform 700ms cubic-bezier(.2,.8,.2,1);
}
/* Bottom gradient ONLY for text readability */
.pattern-tile::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
transition:opacity 300ms;
}
/* Wood patterns per tile — RIJK gekleurd, geen gradient-rommel */
.pattern-tile[data-pattern="visgraat"]::before{
background-color:#8A5A2B;
background-image:
repeating-linear-gradient(45deg,
rgba(0,0,0,.18) 0 1px, transparent 1px 26px,
rgba(255,255,255,.04) 26px 27px, transparent 27px 52px),
repeating-linear-gradient(-45deg,
rgba(0,0,0,.18) 0 1px, transparent 1px 26px,
rgba(255,255,255,.04) 26px 27px, transparent 27px 52px),
linear-gradient(135deg, #8A5A2B 0%, #6E4520 100%);
}
.pattern-tile[data-pattern="plank"]::before{
background-color:#4A2D17;
background-image:
repeating-linear-gradient(180deg,
rgba(255,255,255,.02) 0 50px,
transparent 50px 51px,
rgba(0,0,0,.4) 51px 53px,
rgba(255,255,255,.02) 53px 100px),
linear-gradient(135deg, #5C3F28 0%, #3A2418 100%);
}
.pattern-tile[data-pattern="click"]::before{
background-color:#7A6B5C;
background-image:
repeating-linear-gradient(180deg,
rgba(0,0,0,.25) 0 1px,
transparent 1px 60px),
repeating-linear-gradient(90deg,
rgba(0,0,0,.18) 0 1px,
transparent 1px 90px,
transparent 90px 180px,
rgba(0,0,0,.18) 180px 181px),
linear-gradient(135deg, #8C7D6C 0%, #5E5246 100%);
}
.pattern-tile[data-pattern="dryback"]::before{
background-color:#A07849;
background-image:
repeating-linear-gradient(180deg,
rgba(0,0,0,.22) 0 1px,
transparent 1px 90px),
linear-gradient(135deg, #B58A5C 0%, #8A6438 100%);
}
.pattern-tile[data-pattern="laminaat"]::before{
background-color:#C19A6B;
background-image:
repeating-linear-gradient(180deg,
rgba(0,0,0,.18) 0 1px,
transparent 1px 60px),
repeating-linear-gradient(90deg,
transparent 0 70px,
rgba(0,0,0,.18) 70px 71px,
transparent 71px 140px),
linear-gradient(135deg, #D4B896 0%, #A07849 100%);
}
.pattern-tile[data-pattern="trap"]::before{
background-color:#3A2418;
background-image:
linear-gradient(180deg,
#4A2D17 0%, #4A2D17 16%,
#5C3F28 16%, #5C3F28 33%,
#3A2418 33%, #3A2418 50%,
#5C3F28 50%, #5C3F28 67%,
#3A2418 67%, #3A2418 84%,
#5C3F28 84%, #5C3F28 100%);
}
/* Hover: lichte zoom + iets actiever overlay, GEEN raar oranje */
.pattern-tile:hover::before{transform:scale(1.06)}
.pattern-tile:hover::after{
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,.45) 65%, rgba(0,0,0,.8) 100%);
}
/* Active tile: dunne oranje top-rail in plaats van overlay */
.pattern-tile.active{
border-right-color:rgba(249,83,0,.3);
}
.pattern-tile.active::after{
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.85) 100%);
}
.pattern-tile.active::before{
box-shadow:inset 0 4px 0 0 #F95300;
}
.pattern-tile-top{
position:absolute;
top:22px;
left:22px;
right:22px;
display:flex;
align-items:center;
justify-content:space-between;
z-index:1;
}
.pattern-tile-number{
font-family:'Fraunces',serif;
font-size:11px;
font-weight:500;
letter-spacing:0.2em;
color:rgba(255,255,255,.7);
text-transform:uppercase;
}
.pattern-tile-arrow{
width:32px;height:32px;
border-radius:50%;
background:rgba(255,255,255,.16);
display:grid;
place-items:center;
transition:all 300ms cubic-bezier(.2,.8,.2,1);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.18);
}
.pattern-tile-arrow svg{
width:13px;height:13px;
color:#fff;
transition:transform 300ms;
}
.pattern-tile:hover .pattern-tile-arrow{
background:#F95300;
border-color:#F95300;
}
.pattern-tile:hover .pattern-tile-arrow svg{transform:translate(2px,-2px)}
.pattern-tile-bottom{
position:relative;
z-index:1;
}
.pattern-tile-label{
display:block;
font-family:'Fraunces',serif;
font-size:30px;
font-weight:500;
letter-spacing:-0.025em;
color:#fff;
line-height:0.95;
margin-bottom:8px;
text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.pattern-tile-count{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:500;
letter-spacing:0.1em;
text-transform:uppercase;
color:rgba(255,255,255,.85);
}
.pattern-tile-count::before{
content:"";
width:20px;height:1px;
background:#F95300;
}
@media(max-width:1100px){
.pattern-subnav .container{grid-template-columns:repeat(3,1fr) !important}
.pattern-tile{min-height:160px;padding:18px}
.pattern-tile-top{top:18px;left:18px;right:18px}
.pattern-tile-label{font-size:22px}
.pattern-tile:nth-child(3){border-right:none}
}
@media(max-width:600px){
.pattern-subnav .container{grid-template-columns:repeat(2,1fr) !important}
.pattern-tile{min-height:140px}
.pattern-tile-label{font-size:18px}
.pattern-tile-arrow{width:26px;height:26px}
.pattern-tile:nth-child(2){border-right:none}
.pattern-tile:nth-child(4){border-right:none}
}
/* ════════════════════════════════════════════════════════
SHOP CONTENT — overzicht/titel/filters professioneler
════════════════════════════════════════════════════════ */
/* Page-header (breadcrumbs) compacter */
.page-header{
background:#fff !important;
border-bottom:none !important;
padding:20px 0 12px !important;
}
.breadcrumbs{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
color:#A3A3A3 !important;
letter-spacing:0.14em !important;
text-transform:uppercase !important;
font-weight:500 !important;
}
.breadcrumbs a{color:#A3A3A3 !important;text-decoration:none;transition:color 200ms}
.breadcrumbs a:hover{color:#0E0E0E !important}
/* Shop hero: editoriale magazine masthead, compacter */
.shop-hero{
background:#fff !important;
padding:56px 0 40px !important;
border-bottom:1px solid #EFEFEF !important;
margin-bottom:0 !important;
}
.shop-hero .count-display,
.shop-hero h1.count-display{
font-family:'Fraunces',serif !important;
display:flex !important;
align-items:baseline !important;
gap:18px !important;
margin:0 0 16px 0 !important;
flex-wrap:wrap;
line-height:1 !important;
}
.count-number{
font-size:clamp(3.5rem,7vw,6rem) !important;
font-weight:500 !important;
color:#0E0E0E !important;
letter-spacing:-0.04em !important;
line-height:0.9 !important;
font-variant-numeric:tabular-nums;
}
.count-label{
font-family:'Fraunces',serif !important;
font-size:clamp(1.4rem,2.2vw,2rem) !important;
font-weight:400 !important;
font-style:italic !important;
color:#737373 !important;
letter-spacing:-0.01em !important;
}
.meta-line{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
color:#737373 !important;
display:flex !important;
align-items:center !important;
gap:20px !important;
flex-wrap:wrap;
margin:0 !important;
padding:16px 0 0 0 !important;
border-top:1px solid #EFEFEF;
}
.meta-line::before{display:none !important}
.meta-line strong{color:#0E0E0E !important;font-weight:700 !important}
.meta-line span{
display:inline-flex;
align-items:center;
gap:6px;
}
/* Quick filters: rustiger, niet visueel boos */
.quick-filters{
display:flex !important;
gap:8px !important;
flex-wrap:wrap !important;
padding:24px 0 !important;
margin:0 !important;
border:none !important;
border-bottom:1px solid #EFEFEF !important;
align-items:center;
background:#fff;
}
.quick-filters::before{
content:"Snel filteren" !important;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.18em;
color:#A3A3A3;
margin-right:10px;
}
.quick-filter{
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:12px !important;
font-weight:500 !important;
padding:7px 14px !important;
background:#FFFFFF !important;
border:1px solid transparent !important;
border-radius:999px !important;
color:#404040 !important;
cursor:pointer !important;
transition:all 200ms !important;
white-space:nowrap !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.quick-filter:hover{
background:#fff !important;
border-color:#0E0E0E !important;
color:#0E0E0E !important;
}
.quick-filter.is-selected{
background:#0E0E0E !important;
border-color:#0E0E0E !important;
color:#fff !important;
}
/* Shop-layout */
.shop-layout{
display:grid !important;
grid-template-columns:240px 1fr !important;
gap:48px !important;
padding:32px 0 96px !important;
}
/* Filters sidebar */
.filters{
background:transparent !important;
border:none !important;
padding:0 !important;
position:sticky;
top:80px;
height:fit-content;
align-self:start;
}
/* WIS ALLE FILTERS knop — subtieler */
.filter-reset{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
padding:7px 14px !important;
background:transparent !important;
border:1px solid #E5E5E5 !important;
border-radius:999px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
font-weight:600 !important;
color:#737373 !important;
text-decoration:none !important;
margin:0 0 20px 0 !important;
text-transform:uppercase !important;
letter-spacing:0.1em !important;
transition:all 200ms;
}
.filter-reset::before{
content:"×";
font-size:14px;
line-height:1;
}
.filter-reset:hover{
background:#0E0E0E !important;
border-color:#0E0E0E !important;
color:#fff !important;
}
.filter-reset.hidden{display:none !important}
/* Filter groepen */
.filter-group{
border-bottom:1px solid #EFEFEF !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
}
.filter-group-header{
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:16px 0 !important;
background:transparent !important;
border:none !important;
cursor:pointer !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:0.16em !important;
color:#0E0E0E !important;
text-align:left !important;
}
.filter-group-header:hover{color:#F95300 !important}
.filter-group-header .chevron{
font-size:10px !important;
color:#A3A3A3 !important;
transition:transform 250ms !important;
}
.filter-group.collapsed .chevron{transform:rotate(-90deg)}
.filter-group.collapsed .filter-group-body{display:none !important}
.filter-group-body{
padding:0 0 16px 0 !important;
display:flex;
flex-direction:column;
gap:0;
}
.filter-opt{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:7px 8px !important;
margin:0 -8px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
color:#404040 !important;
cursor:pointer !important;
border-radius:6px !important;
transition:all 150ms !important;
background:transparent !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.filter-opt:hover{background:#FFFFFF !important;color:#0E0E0E !important}
.filter-opt input[type="checkbox"],
.filter-opt input[type="radio"]{
accent-color:#F95300 !important;
width:14px !important;
height:14px !important;
flex-shrink:0;
}
.filter-opt .count{
margin-left:auto !important;
font-size:11px !important;
color:#A3A3A3 !important;
font-variant-numeric:tabular-nums;
}
/* Brand-list */
.brand-list{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
}
.brand-opt{
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:7px 8px !important;
margin:0 -8px !important;
border:none !important;
background:transparent !important;
border-radius:6px !important;
cursor:pointer !important;
transition:all 150ms !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:13px !important;
font-weight:500 !important;
color:#404040 !important;
position:relative;
}
.brand-opt:hover{background:#FFFFFF !important;color:#0E0E0E !important}
.brand-opt input[type="checkbox"]{
appearance:none !important;
-webkit-appearance:none !important;
width:14px !important;
height:14px !important;
border:1.5px solid #C7C7C7 !important;
border-radius:3px !important;
background:#fff !important;
cursor:pointer !important;
flex-shrink:0;
transition:all 150ms;
position:relative;
}
.brand-opt input[type="checkbox"]:checked{
background:#F95300 !important;
border-color:#F95300 !important;
}
.brand-opt input[type="checkbox"]:checked::after{
content:"";
position:absolute;
left:3px;top:0px;
width:4px;height:8px;
border:solid #fff;
border-width:0 1.5px 1.5px 0;
transform:rotate(45deg);
}
.brand-logo{
width:24px;height:18px;
flex-shrink:0;
display:grid;
place-items:center;
}
.brand-logo img{
max-width:100%;max-height:100%;
object-fit:contain;
filter:grayscale(.4);
opacity:.8;
transition:all 200ms;
}
.brand-opt:hover .brand-logo img,
.brand-opt:has(input:checked) .brand-logo img{filter:none;opacity:1}
.brand-name{flex:1;text-align:left;line-height:1.3}
.brand-opt .count{
font-size:11px !important;
color:#A3A3A3 !important;
margin-left:auto !important;
}
/* Color filter wordt mooie cirkel-grid */
.filter-group[data-group="color"] .filter-group-body{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:10px !important;
}
.filter-group[data-group="color"] .filter-opt{
flex-direction:column !important;
align-items:center !important;
padding:6px 0 !important;
margin:0 !important;
gap:6px !important;
font-size:10px !important;
text-transform:uppercase !important;
letter-spacing:0.06em !important;
color:#737373 !important;
background:transparent !important;
}
.filter-group[data-group="color"] .filter-opt:hover{background:transparent !important}
.filter-group[data-group="color"] .filter-opt input[type="checkbox"],
.filter-group[data-group="color"] .filter-opt input[type="radio"]{
position:absolute !important;
opacity:0 !important;
pointer-events:none !important;
width:0 !important;
height:0 !important;
}
.filter-group[data-group="color"] .filter-opt::before{
content:"";
display:block;
width:34px;height:34px;
border-radius:50%;
border:2px solid transparent;
box-shadow:0 0 0 1px rgba(14,14,14,.1), 0 2px 6px rgba(14,14,14,.06);
transition:all 200ms;
}
.filter-group[data-group="color"] .filter-opt:hover::before{transform:scale(1.1)}
.filter-group[data-group="color"] .filter-opt:has(input:checked)::before{
border-color:#F95300 !important;
box-shadow:0 0 0 2px #F95300, 0 4px 12px rgba(249,83,0,.3);
}
.filter-group[data-group="color"] .filter-opt:nth-child(1)::before{background:linear-gradient(135deg,#F5EBDB,#E8D5B7)}
.filter-group[data-group="color"] .filter-opt:nth-child(2)::before{background:linear-gradient(135deg,#3A2A1E,#5C3F28)}
.filter-group[data-group="color"] .filter-opt:nth-child(3)::before{background:linear-gradient(135deg,#A8A8A8,#7A7A7A)}
.filter-group[data-group="color"] .filter-opt:nth-child(4)::before{background:linear-gradient(135deg,#E8D5B7,#C7A98B)}
.filter-group[data-group="color"] .filter-opt:nth-child(5)::before{background:linear-gradient(135deg,#C19A6B,#A07849)}
.filter-group[data-group="color"] .filter-opt:nth-child(6)::before{background:linear-gradient(135deg,#B07550,#8A4F30)}
.filter-group[data-group="color"] .filter-opt:nth-child(7)::before{background:linear-gradient(135deg,#7A5A37,#523D24)}
.filter-group[data-group="color"] .filter-opt .count{display:none !important}
/* Verberg subcategorie filter — pattern strip doet dit nu */
.filter-group[data-group="subcat"]{display:none !important}
/* ════════════════════════════════════════════════════════
FASE 1 — HEADER DEFINITIEF PLAT (v15)
nav-cta class killed, geen oranje hover meer
════════════════════════════════════════════════════════ */
/* Neutraliseer ALLE oude nav-cta oranje regels (285,550,672) */
.header-actions,
.header-actions.nav-cta,
.nav-cta{
background:none !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
padding:0 !important;
color:inherit !important;
transform:none !important;
}
.header-actions:hover,
.header-actions.nav-cta:hover,
.nav-cta:hover{
background:none !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
transform:none !important;
}
.nav-cta svg{color:inherit !important}
/* Header-actions als platte balk */
.header-actions{
display:flex !important;
align-items:center !important;
gap:22px !important;
border:none !important;
}
/* NL/EN — vaste platte toggle, geen oranje hover op het blok */
.lang-switch-mini{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
padding:0 !important;
margin:0 6px 0 0 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
.lang-switch-mini a{
display:inline-flex !important;
align-items:center !important;
padding:5px 7px !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:11px !important;
font-weight:600 !important;
letter-spacing:0.13em !important;
text-transform:uppercase !important;
color:#A3A3A3 !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
text-decoration:none !important;
transition:color 180ms ease !important;
position:relative !important;
line-height:1 !important;
}
.lang-switch-mini a:hover{
color:#0E0E0E !important;
background:transparent !important;
}
.lang-switch-mini a.active{
color:#0E0E0E !important;
background:transparent !important;
font-weight:700 !important;
}
.lang-switch-mini a.active::after{
content:"" !important;
position:absolute !important;
left:7px !important;right:7px !important;
bottom:-2px !important;
height:2px !important;
background:#0E0E0E !important;
border-radius:2px !important;
}
.lang-switch-mini span{display:none !important}
/* Search-icon — vast, plat, geen achtergrond ooit */
.header-search-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:6px !important;
margin:0 !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
cursor:pointer !important;
color:#0E0E0E !important;
transition:color 180ms ease !important;
}
.header-search-btn:hover{
color:#0E0E0E !important;
background:transparent !important;
}
.header-search-btn svg{width:19px;height:19px;display:block}
/* Vraag offerte — VASTE menu-knop. Subtiel, donker, plat. */
.header-offerte{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:10px 18px !important;
background:#0E0E0E !important;
color:#fff !important;
font-family:'Plus Jakarta Sans',sans-serif !important;
font-size:12px !important;
font-weight:600 !important;
letter-spacing:0.04em !important;
text-decoration:none !important;
text-transform:none !important;
border:none !important;
border-radius:8px !important;
box-shadow:none !important;
transition:background 180ms ease !important;
white-space:nowrap !important;
}
.header-offerte::after{display:none !important}
.header-offerte::before{
content:"" !important;
width:14px;height:14px !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cline x1='9' y1='15' x2='15' y2='15'/%3E%3C/svg%3E") !important;
background-size:14px !important;
background-repeat:no-repeat !important;
background-position:center !important;
flex-shrink:0 !important;
}
.header-offerte:hover{
background:#F95300 !important;
color:#fff !important;
transform:none !important;
box-shadow:none !important;
}
/* Main-nav links — geen oranje achtergrond hover, alleen tekstkleur */
.nav.main-nav a:not(.header-offerte){
transition:color 180ms ease !important;
}
.nav.main-nav > a:hover,
.nav.main-nav .nav-dd > a:hover{
color:#F95300 !important;
background:transparent !important;
}
.nav.main-nav > a.active{
color:#0E0E0E !important;
}
@media(max-width:900px){
.header-actions{gap:12px !important}
.lang-switch-mini{display:none !important}
.header-offerte{padding:9px 14px !important;font-size:11px !important}
}
/* ════════════════════════════════════════════════════════
FASE 2 — ACTIE-PAGINA (v15) — deals PVC + Laminaat
════════════════════════════════════════════════════════ */
/* Section eyebrow — consistent over alle actie-secties */
.actie-section-eyebrow{
display:inline-block;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:#F95300;
margin-bottom:14px;
}
.actie-section-intro{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
line-height:1.65;
color:#737373;
max-width:620px;
margin:0 0 40px;
}
/* ─── HERO ─── */
.actie-hero{
background:#FFFFFF;
padding:80px 0 72px;
border-bottom:1px solid #EFEFEF;
}
.actie-hero .eyebrow{
display:inline-block;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:#F95300;
margin-bottom:18px;
}
.actie-hero h1{
font-family:'Fraunces',serif;
font-size:clamp(2.4rem,5vw,4rem);
font-weight:500;
line-height:1.05;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 20px;
max-width:880px;
}
.actie-hero h1 em{
font-style:italic;
color:#F95300;
}
.actie-hero .lead{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:16px;
line-height:1.7;
color:#404040;
max-width:620px;
margin:0 0 32px;
}
.actie-cta-group{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.btn-terra{
display:inline-flex;
align-items:center;
gap:8px;
padding:14px 28px;
background:#0E0E0E;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
text-decoration:none;
border-radius:10px;
transition:background 200ms ease;
}
.btn-terra:hover{background:#F95300}
.btn-text{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
color:#0E0E0E;
text-decoration:none;
position:relative;
}
.btn-text::after{
content:"";
position:absolute;
left:0;right:0;bottom:-3px;
height:1px;
background:#F95300;
transform:scaleX(0);
transform-origin:right;
transition:transform 250ms cubic-bezier(.2,.8,.2,1);
}
.btn-text:hover{color:#F95300}
.btn-text:hover::after{transform:scaleX(1);transform-origin:left}
/* ─── INCLUDES (4 blokken) ─── */
.actie-includes{
padding:72px 0;
background:#fff;
}
.actie-includes h2{
font-family:'Fraunces',serif;
font-size:clamp(1.8rem,3.2vw,2.6rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 12px;
}
.actie-includes-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
.actie-include{
padding:0;
}
.actie-icon{
font-family:'Fraunces',serif;
font-size:14px;
font-weight:500;
letter-spacing:0.1em;
color:#F95300;
padding-bottom:14px;
margin-bottom:16px;
border-bottom:1px solid #EFEFEF;
}
.actie-include h3{
font-family:'Fraunces',serif;
font-size:1.2rem;
font-weight:500;
color:#0E0E0E;
margin:0 0 8px;
}
.actie-include p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.65;
color:#737373;
margin:0;
}
/* ─── DEALS ─── */
.actie-deals{
padding:80px 0;
background:#FFFFFF;
border-top:1px solid #EFEFEF;
border-bottom:1px solid #EFEFEF;
}
.actie-deals h2{
font-family:'Fraunces',serif;
font-size:clamp(1.8rem,3.4vw,2.8rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 12px;
}
/* Tabs */
.deal-tabs{
display:inline-flex;
gap:4px;
padding:5px;
background:#fff;
border:1px solid #E5E5E5;
border-radius:999px;
margin-bottom:40px;
}
.deal-tab{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:600;
padding:10px 22px;
background:transparent;
border:none;
border-radius:999px;
color:#737373;
cursor:pointer;
transition:all 200ms ease;
white-space:nowrap;
}
.deal-tab:hover{color:#0E0E0E}
.deal-tab.is-active{
background:#0E0E0E;
color:#fff;
}
/* Deal grid */
.deal-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:40px;
}
.deal-grid.is-hidden{display:none}
/* Deal card */
.deal-card{
position:relative;
display:flex;
flex-direction:column;
background:#fff;
border:1px solid #EFEFEF;
border-radius:16px;
padding:28px 24px;
transition:transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, border-color 200ms ease;
}
.deal-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 44px rgba(14,14,14,.09);
border-color:#E0E0E0;
}
.deal-card.is-featured{
background:#0E0E0E;
border-color:#0E0E0E;
}
.deal-badge{
position:absolute;
top:-11px;
left:50%;
transform:translateX(-50%);
background:#F95300;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
padding:5px 14px;
border-radius:999px;
white-space:nowrap;
}
.deal-card-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}
.deal-rank{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:#737373;
}
.deal-card.is-featured .deal-rank{color:rgba(255,255,255,.6)}
.deal-stars{
font-size:12px;
color:#F95300;
letter-spacing:1px;
}
.deal-price{
display:flex;
flex-direction:column;
gap:2px;
padding-bottom:20px;
margin-bottom:20px;
border-bottom:1px solid #EFEFEF;
}
.deal-card.is-featured .deal-price{border-bottom-color:rgba(255,255,255,.12)}
.deal-price-amount{
font-family:'Fraunces',serif;
font-size:2.1rem;
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
line-height:1;
}
.deal-card.is-featured .deal-price-amount{color:#fff}
.deal-price-unit{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
color:#A3A3A3;
font-weight:500;
}
.deal-card.is-featured .deal-price-unit{color:rgba(255,255,255,.5)}
.deal-list{
list-style:none;
margin:0 0 24px;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
.deal-list li{
position:relative;
padding-left:24px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
line-height:1.5;
color:#404040;
}
.deal-card.is-featured .deal-list li{color:rgba(255,255,255,.85)}
.deal-list li::before{
content:"";
position:absolute;
left:0;
top:2px;
width:15px;height:15px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F95300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size:contain;
background-repeat:no-repeat;
}
.deal-list li strong{font-weight:700;color:#0E0E0E}
.deal-card.is-featured .deal-list li strong{color:#fff}
.deal-cta{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:13px 18px;
background:#FFFFFF;
color:#0E0E0E;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:600;
text-decoration:none;
border-radius:10px;
transition:all 200ms ease;
}
.deal-cta:hover{background:#F95300;color:#fff}
.deal-card.is-featured .deal-cta{
background:#F95300;
color:#fff;
}
.deal-card.is-featured .deal-cta:hover{background:#fff;color:#0E0E0E}
/* Conditions */
.deal-conditions{
background:#fff;
border:1px solid #EFEFEF;
border-radius:16px;
padding:28px 32px;
}
.deal-conditions h3{
font-family:'Fraunces',serif;
font-size:1.15rem;
font-weight:500;
color:#0E0E0E;
margin:0 0 14px;
}
.deal-conditions ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:9px;
}
.deal-conditions li{
position:relative;
padding-left:20px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
line-height:1.6;
color:#737373;
}
.deal-conditions li::before{
content:"";
position:absolute;
left:0;top:8px;
width:6px;height:6px;
border-radius:50%;
background:#F95300;
}
.deal-conditions li strong{color:#0E0E0E;font-weight:700}
/* ─── PROCESS ─── */
.actie-process{
padding:72px 0;
background:#fff;
}
.actie-process h2{
font-family:'Fraunces',serif;
font-size:clamp(1.8rem,3.2vw,2.6rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 40px;
}
.actie-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
.actie-step{position:relative}
.step-num{
display:inline-grid;
place-items:center;
width:36px;height:36px;
background:#0E0E0E;
color:#fff;
font-family:'Fraunces',serif;
font-size:1rem;
font-weight:500;
border-radius:50%;
margin-bottom:16px;
}
.actie-step h3{
font-family:'Fraunces',serif;
font-size:1.15rem;
font-weight:500;
color:#0E0E0E;
margin:0 0 8px;
}
.actie-step p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.65;
color:#737373;
margin:0;
}
/* ─── LOCATION ─── */
.actie-location{
padding:72px 0;
background:#FFFFFF;
border-top:1px solid #EFEFEF;
}
.actie-location-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:56px;
align-items:center;
}
.actie-location-info h2{
font-family:'Fraunces',serif;
font-size:clamp(1.8rem,3.2vw,2.4rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 12px;
}
.actie-location-info .lead{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
line-height:1.65;
color:#737373;
margin:0 0 28px;
}
.actie-location-detail{
margin-bottom:20px;
}
.actie-location-detail strong{
display:block;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:#A3A3A3;
margin-bottom:5px;
}
.actie-location-detail p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.6;
color:#404040;
margin:0;
}
.actie-location-detail a{color:#0E0E0E;text-decoration:none;border-bottom:1px solid #E5E5E5}
.actie-location-detail a:hover{color:#F95300;border-color:#F95300}
.actie-location-info .btn-terra{margin-top:8px}
.actie-location-map{
border-radius:16px;
overflow:hidden;
box-shadow:0 14px 40px rgba(14,14,14,.10);
}
.actie-location-map iframe{display:block}
/* ─── FAQ ─── */
.actie-faq{
padding:72px 0;
background:#fff;
}
.actie-faq h2{
font-family:'Fraunces',serif;
font-size:clamp(1.8rem,3.2vw,2.6rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 32px;
}
.actie-faq details{
border-bottom:1px solid #EFEFEF;
padding:18px 0;
}
.actie-faq summary{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
font-weight:600;
color:#0E0E0E;
cursor:pointer;
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.actie-faq summary::-webkit-details-marker{display:none}
.actie-faq summary::after{
content:"+";
font-size:20px;
color:#F95300;
font-weight:400;
transition:transform 250ms ease;
}
.actie-faq details[open] summary::after{transform:rotate(45deg)}
.actie-faq details p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.7;
color:#737373;
margin:12px 0 0;
max-width:680px;
}
/* Dark-band override (oude eligible sectie niet meer gebruikt maar safe) */
.actie-eligible.dark-band{
background:#0E0E0E;
padding:64px 0;
}
/* ─── RESPONSIVE ─── */
@media(max-width:1000px){
.actie-includes-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.actie-steps{grid-template-columns:repeat(2,1fr);gap:32px}
.deal-grid{grid-template-columns:repeat(2,1fr)}
.actie-location-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
.actie-hero{padding:56px 0 48px}
.actie-includes,.actie-process,.actie-faq,.actie-location{padding:48px 0}
.actie-deals{padding:56px 0}
.actie-includes-grid{grid-template-columns:1fr}
.actie-steps{grid-template-columns:1fr}
.deal-grid{grid-template-columns:1fr}
.deal-tabs{width:100%;justify-content:stretch}
.deal-tab{flex:1;text-align:center;padding:11px 12px}
.actie-cta-group{gap:14px}
.deal-conditions{padding:22px 20px}
}
/* ════════════════════════════════════════════════════════
SHOP v16 — wit, gestructureerd, professionele webshop
════════════════════════════════════════════════════════ */
.shop-page{
background:#FFFFFF;
min-height:60vh;
}
/* ─── TOPBAR: breadcrumbs + titel ─── */
.shop-topbar{
background:#FFFFFF;
border-bottom:1px solid #ECECEC;
padding:28px 0 24px;
}
.shop-crumbs{
display:flex;
align-items:center;
gap:8px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
color:#9A9A9A;
margin-bottom:14px;
}
.shop-crumbs a{color:#9A9A9A;text-decoration:none;transition:color .15s}
.shop-crumbs a:hover{color:#0E0E0E}
.shop-crumbs span{color:#CFCFCF}
.shop-title-row{
display:flex;
align-items:baseline;
gap:18px;
flex-wrap:wrap;
}
.shop-title-row h1{
font-family:'Fraunces',serif;
font-size:clamp(1.9rem,3.4vw,2.7rem);
font-weight:500;
letter-spacing:-0.025em;
color:#0E0E0E;
margin:0;
line-height:1;
}
.shop-title-sub{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
color:#9A9A9A;
margin:0;
}
.shop-title-sub span{color:#0E0E0E;font-weight:600}
/* ─── SUBNAV: type-chips ─── */
.shop-subnav{
background:#FFFFFF;
border-bottom:1px solid #ECECEC;
padding:14px 0;
position:sticky;
top:0;
z-index:40;
}
.shop-subnav .container{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.subnav-chip{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:500;
padding:8px 16px;
background:#FFFFFF;
border:1px solid #E2E2E2;
border-radius:999px;
color:#444;
cursor:pointer;
transition:all .15s ease;
text-decoration:none;
white-space:nowrap;
}
.subnav-chip:hover{
border-color:#0E0E0E;
color:#0E0E0E;
}
.subnav-chip.is-active{
background:#0E0E0E;
border-color:#0E0E0E;
color:#FFFFFF;
}
.subnav-divider{
width:1px;
height:20px;
background:#E2E2E2;
margin:0 6px;
}
.subnav-chip.subnav-link{
color:#F95300;
border-color:#FBD9C8;
}
.subnav-chip.subnav-link:hover{
background:#F95300;
border-color:#F95300;
color:#FFFFFF;
}
/* ─── GRID LAYOUT ─── */
.shop-grid-layout{
display:grid;
grid-template-columns:248px 1fr;
gap:40px;
padding:32px 0 90px;
align-items:start;
}
/* ─── SIDEBAR ─── */
.shop-sidebar{
position:sticky;
top:80px;
}
.sidebar-head{
display:none;
}
.sidebar-reset{
display:inline-flex;
align-items:center;
gap:6px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:600;
color:#F95300;
text-decoration:none;
margin-bottom:8px;
}
.sidebar-reset::before{content:"×";font-size:15px;line-height:1}
.sidebar-reset:hover{text-decoration:underline}
.sidebar-reset.is-hidden{display:none}
.filter-block{
border-bottom:1px solid #ECECEC;
padding:20px 0;
}
.filter-block:first-of-type{padding-top:8px}
.filter-block-title{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.13em;
text-transform:uppercase;
color:#0E0E0E;
margin-bottom:12px;
}
/* Filter rows */
.filter-row{
display:flex;
align-items:center;
gap:10px;
padding:7px 8px;
margin:0 -8px;
border-radius:7px;
cursor:pointer;
transition:background .12s;
}
.filter-row:hover{background:#F7F7F5}
.filter-row input{
position:absolute;
opacity:0;
width:0;height:0;
pointer-events:none;
}
.filter-row-label{
flex:1;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;
color:#3A3A3A;
}
.filter-row-count{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
color:#B0B0B0;
font-variant-numeric:tabular-nums;
}
/* Radio (categorie) */
.filter-block[data-group="cat"] .filter-row::before{
content:"";
width:15px;height:15px;
border:1.5px solid #C9C9C9;
border-radius:50%;
flex-shrink:0;
transition:all .15s;
}
.filter-block[data-group="cat"] .filter-row:has(input:checked)::before{
border-color:#F95300;
border-width:5px;
}
.filter-block[data-group="cat"] .filter-row:has(input:checked) .filter-row-label{
color:#0E0E0E;
font-weight:600;
}
/* Checkbox (subcat, brand) */
.filter-row-check{
width:15px;height:15px;
border:1.5px solid #C9C9C9;
border-radius:4px;
flex-shrink:0;
position:relative;
transition:all .15s;
}
.filter-row:has(input:checked) .filter-row-check{
background:#F95300;
border-color:#F95300;
}
.filter-row:has(input:checked) .filter-row-check::after{
content:"";
position:absolute;
left:4px;top:1px;
width:4px;height:8px;
border:solid #FFFFFF;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.filter-row:has(input:checked) .filter-row-label{
color:#0E0E0E;
font-weight:600;
}
/* Brand rows */
.brand-rows{
max-height:280px;
overflow-y:auto;
margin:0 -8px;
padding:0 8px;
}
.brand-rows::-webkit-scrollbar{width:5px}
.brand-rows::-webkit-scrollbar-thumb{background:#DADADA;border-radius:3px}
.brand-row{gap:9px}
.brand-logo{
width:26px;height:18px;
display:grid;place-items:center;
flex-shrink:0;
}
.brand-logo img{
max-width:100%;max-height:100%;
object-fit:contain;
filter:grayscale(1);
opacity:.55;
transition:all .15s;
}
.brand-row:hover .brand-logo img,
.brand-row:has(input:checked) .brand-logo img{
filter:none;opacity:1;
}
/* Color grid */
.color-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px 8px;
}
.color-chip{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
cursor:pointer;
}
.color-chip input{
position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.color-dot{
width:32px;height:32px;
border-radius:50%;
border:2px solid transparent;
box-shadow:0 0 0 1px rgba(14,14,14,.1), inset 0 2px 4px rgba(0,0,0,.12);
transition:all .15s;
}
.color-chip:hover .color-dot{transform:scale(1.08)}
.color-chip:has(input:checked) .color-dot{
border-color:#F95300;
box-shadow:0 0 0 2px #F95300;
}
.color-name{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10.5px;
color:#888;
}
.color-chip:has(input:checked) .color-name{color:#0E0E0E;font-weight:600}
.color-chip[data-color="licht"] .color-dot{background:linear-gradient(135deg,#F3E8D6,#E5D2B2)}
.color-chip[data-color="donker"] .color-dot{background:linear-gradient(135deg,#4A3526,#2E2017)}
.color-chip[data-color="grijs"] .color-dot{background:linear-gradient(135deg,#B0B0B0,#7C7C7C)}
.color-chip[data-color="beige"] .color-dot{background:linear-gradient(135deg,#E6D4B8,#C9AA85)}
.color-chip[data-color="natuur"] .color-dot{background:linear-gradient(135deg,#C9A06C,#A37C4C)}
.color-chip[data-color="warm"] .color-dot{background:linear-gradient(135deg,#BB7B52,#8E5230)}
.color-chip[data-color="rustiek"].color-dot{background:linear-gradient(135deg,#806042,#534027)}
/* Price slider */
.price-box{padding-top:4px}
.price-labels{
display:flex;
justify-content:space-between;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12.5px;
color:#3A3A3A;
margin-bottom:12px;
}
.price-labels strong{color:#0E0E0E;font-weight:700}
.price-track{
position:relative;
height:4px;
background:#E8E8E8;
border-radius:999px;
}
.price-track-fill{
position:absolute;
height:100%;
background:#F95300;
border-radius:999px;
}
.price-track input[type="range"]{
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
margin:0;
background:transparent;
-webkit-appearance:none;
appearance:none;
pointer-events:none;
height:18px;
}
.price-track input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:16px;height:16px;
border-radius:50%;
background:#FFFFFF;
border:2px solid #F95300;
box-shadow:0 1px 4px rgba(0,0,0,.2);
cursor:pointer;
pointer-events:auto;
}
.price-track input[type="range"]::-moz-range-thumb{
width:16px;height:16px;
border-radius:50%;
background:#FFFFFF;
border:2px solid #F95300;
box-shadow:0 1px 4px rgba(0,0,0,.2);
cursor:pointer;
pointer-events:auto;
}
.sidebar-apply{display:none}
/* ─── MAIN ─── */
.shop-main{min-width:0}
.shop-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px;
min-height:38px;
}
.active-chips{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
flex:1;
}
.active-chip{
display:inline-flex;
align-items:center;
gap:7px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:500;
padding:6px 10px 6px 12px;
background:#F4F2EE;
border:1px solid #E6E2DA;
border-radius:999px;
color:#0E0E0E;
cursor:pointer;
transition:all .15s;
}
.active-chip:hover{border-color:#F95300;background:#FFF0E8}
.active-chip-x{
font-size:14px;
color:#9A9A9A;
line-height:1;
}
.active-chip:hover .active-chip-x{color:#F95300}
.active-chip-clear{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:600;
color:#9A9A9A;
background:none;
border:none;
cursor:pointer;
padding:6px 4px;
}
.active-chip-clear:hover{color:#0E0E0E;text-decoration:underline}
/* Sort */
.sort-control{position:relative;flex-shrink:0}
.sort-trigger{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
padding:9px 14px;
background:#FFFFFF;
border:1px solid #E2E2E2;
border-radius:9px;
color:#0E0E0E;
cursor:pointer;
transition:border-color .15s;
}
.sort-trigger:hover{border-color:#0E0E0E}
.sort-label{color:#9A9A9A}
.sort-value{font-weight:600}
.sort-trigger svg{width:13px;height:13px;color:#9A9A9A;transition:transform .2s}
.sort-control.is-open .sort-trigger svg{transform:rotate(180deg)}
.sort-menu{
position:absolute;
top:calc(100% + 6px);
right:0;
background:#FFFFFF;
border:1px solid #E6E6E6;
border-radius:11px;
box-shadow:0 14px 36px rgba(14,14,14,.12);
padding:6px;
min-width:200px;
display:none;
z-index:50;
}
.sort-control.is-open .sort-menu{display:block}
.sort-menu button{
display:block;
width:100%;
text-align:left;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
padding:9px 12px;
background:none;
border:none;
border-radius:7px;
color:#3A3A3A;
cursor:pointer;
transition:background .12s;
}
.sort-menu button:hover{background:#F7F7F5;color:#0E0E0E}
.sort-menu button.is-selected{background:#FFF0E8;color:#F95300;font-weight:600}
/* ─── PRODUCT GRID ─── */
.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
gap:20px;
}
.product-card{
display:flex;
flex-direction:column;
background:#FFFFFF;
border:1px solid #ECECEC;
border-radius:12px;
overflow:hidden;
text-decoration:none;
color:inherit;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-card.is-hidden{display:none}
.product-card:hover{
border-color:#DCDCDC;
box-shadow:0 10px 30px rgba(14,14,14,.09);
transform:translateY(-3px);
}
.product-thumb{
position:relative;
aspect-ratio:4/3;
background:#F4F2EE;
overflow:hidden;
}
.product-thumb img{
width:100%;height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.product-card:hover .product-thumb img{transform:scale(1.04)}
.product-badge{
position:absolute;
top:10px;left:10px;
z-index:2;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
padding:4px 9px;
background:#0E0E0E;
color:#FFFFFF;
border-radius:5px;
}
.product-body{
display:flex;
flex-direction:column;
padding:14px 15px 16px;
flex:1;
}
.product-brand{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:#9A9A9A;
margin-bottom:5px;
}
.product-name{
font-family:'Fraunces',serif;
font-size:15px;
font-weight:500;
line-height:1.3;
letter-spacing:-0.01em;
color:#0E0E0E;
margin-bottom:8px;
}
.product-meta{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:12px;
}
.product-meta span{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10.5px;
color:#7A7A7A;
background:#F4F2EE;
padding:3px 8px;
border-radius:4px;
}
.product-price{
display:flex;
align-items:baseline;
gap:6px;
flex-wrap:wrap;
margin-top:auto;
}
.price-was{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
color:#B0B0B0;
text-decoration:line-through;
}
.price-now{
font-family:'Fraunces',serif;
font-size:1.15rem;
font-weight:600;
color:#0E0E0E;
}
.price-unit{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
color:#9A9A9A;
}
/* ─── EMPTY STATE ─── */
.shop-empty{
text-align:center;
padding:80px 20px;
}
.shop-empty-icon{
width:56px;height:56px;
margin:0 auto 18px;
color:#CFCFCF;
}
.shop-empty-icon svg{width:100%;height:100%}
.shop-empty h3{
font-family:'Fraunces',serif;
font-size:1.4rem;
font-weight:500;
color:#0E0E0E;
margin:0 0 6px;
}
.shop-empty p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
color:#9A9A9A;
margin:0 0 20px;
}
.shop-empty button{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:600;
padding:11px 22px;
background:#0E0E0E;
color:#FFFFFF;
border:none;
border-radius:9px;
cursor:pointer;
transition:background .15s;
}
.shop-empty button:hover{background:#F95300}
/* ─── MOBILE ─── */
.filter-drawer-toggle{display:none}
@media(max-width:900px){
.shop-grid-layout{
grid-template-columns:1fr;
gap:0;
padding:20px 0 70px;
}
.filter-drawer-toggle{
display:inline-flex;
align-items:center;
gap:9px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
padding:12px 18px;
background:#0E0E0E;
color:#FFFFFF;
border:none;
border-radius:10px;
cursor:pointer;
margin-bottom:18px;
width:100%;
justify-content:center;
}
.filter-drawer-toggle svg{width:16px;height:16px}
.filter-badge{
background:#F95300;
color:#FFFFFF;
font-size:11px;
padding:2px 8px;
border-radius:999px;
}
.shop-sidebar{
position:fixed;
top:0;right:0;bottom:0;
width:88%;
max-width:360px;
background:#FFFFFF;
z-index:200;
transform:translateX(100%);
transition:transform .28s cubic-bezier(.2,.8,.2,1);
overflow-y:auto;
padding:0 20px 20px;
box-shadow:-10px 0 40px rgba(0,0,0,.18);
}
.shop-sidebar.is-open{transform:translateX(0)}
.sidebar-head{
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
background:#FFFFFF;
padding:18px 0 14px;
border-bottom:1px solid #ECECEC;
margin-bottom:8px;
font-family:'Fraunces',serif;
font-size:1.2rem;
color:#0E0E0E;
}
.sidebar-close{
background:none;border:none;
font-size:26px;line-height:1;
color:#9A9A9A;cursor:pointer;
}
.sidebar-apply{
display:block;
position:sticky;
bottom:0;
background:#FFFFFF;
padding:14px 0;
border-top:1px solid #ECECEC;
margin-top:8px;
}
.sidebar-apply button{
width:100%;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
padding:13px;
background:#0E0E0E;
color:#FFFFFF;
border:none;
border-radius:10px;
cursor:pointer;
}
.product-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.product-name{font-size:13.5px}
.shop-toolbar{flex-wrap:wrap}
}
@media(max-width:420px){
.product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.product-body{padding:11px 11px 13px}
.shop-title-row h1{font-size:1.7rem}
}
/* ════════════════════════════════════════════════════════
BATCH 3 — Contact offerte-velden (v16)
════════════════════════════════════════════════════════ */
.checkout-form .field-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.field-opt{
color:#A3A3A3;
font-weight:400;
font-size:.85em;
}
.field-hint{
display:block;
margin-top:6px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:.76rem;
color:#9A9A9A;
}
/* Choice pills (radio) */
.choice-row{
display:flex;
gap:8px;
}
.choice-row-wrap{flex-wrap:wrap}
.choice-pill{
position:relative;
cursor:pointer;
}
.choice-pill input{
position:absolute;
opacity:0;
width:0;height:0;
pointer-events:none;
}
.choice-pill span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 16px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:500;
color:#444;
background:#FFFFFF;
border:1px solid #E2E2E2;
border-radius:999px;
transition:all .15s ease;
white-space:nowrap;
}
.choice-pill:hover span{border-color:#0E0E0E;color:#0E0E0E}
.choice-pill input:checked + span{
background:#0E0E0E;
border-color:#0E0E0E;
color:#FFFFFF;
}
/* Choice checkboxes */
.choice-check{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
padding:8px 0;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;
color:#3A3A3A;
}
.choice-check input{
position:absolute;
opacity:0;
width:0;height:0;
pointer-events:none;
}
.choice-check-box{
width:18px;height:18px;
border:1.5px solid #C9C9C9;
border-radius:5px;
flex-shrink:0;
position:relative;
transition:all .15s;
}
.choice-check input:checked + .choice-check-box{
background:#F95300;
border-color:#F95300;
}
.choice-check input:checked + .choice-check-box::after{
content:"";
position:absolute;
left:5px;top:1px;
width:5px;height:10px;
border:solid #FFFFFF;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.choice-check input:checked ~ span{color:#0E0E0E;font-weight:600}
@media(max-width:560px){
.checkout-form .field-row{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════════════════
FIX v17 — Crème sitebreed weg + moderne trust-balk
════════════════════════════════════════════════════════ */
/* ─── 1. Crème tokens → wit / ultra-licht ─── */
:root{
--cream:#FFFFFF;
--bg-2:#FFFFFF;
}
/* Plekken die contrast nodig hebben krijgen een haarfijne tint i.p.v. grijs vlak */
.prod-img,.product-thumb,.prod-gallery .main,.prod-thumbs div{
background:#F6F6F4 !important;
}
/* ─── 2. Trust-balk — modern, statisch, professioneel ─── */
/* Alle oude trust-strip definities overrulen met één schone */
.trust-strip{
background:#FFFFFF !important;
border-top:1px solid #ECECEC !important;
border-bottom:1px solid #ECECEC !important;
padding:0 !important;
position:relative !important;
}
.trust-strip .container{
display:grid !important;
grid-template-columns:repeat(5,1fr) !important;
gap:0 !important;
align-items:stretch !important;
flex-wrap:nowrap !important;
}
/* Oude marquee verbergen, vervangen door .trust-row items */
.trust-marquee{display:none !important}
.trust-cell{
display:flex;
align-items:center;
gap:13px;
padding:22px 24px;
border-right:1px solid #ECECEC;
}
.trust-cell:last-child{border-right:none}
.trust-cell-icon{
width:38px;height:38px;
flex-shrink:0;
display:grid;
place-items:center;
background:#F6F6F4;
border-radius:9px;
color:#0E0E0E;
}
.trust-cell-icon svg{width:18px;height:18px}
.trust-cell-text{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}
.trust-cell-title{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
font-weight:700;
color:#0E0E0E;
letter-spacing:-0.01em;
line-height:1.25;
}
.trust-cell-sub{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11.5px;
font-weight:500;
color:#9A9A9A;
line-height:1.25;
}
.trust-cell-rating{
display:flex;
align-items:center;
gap:5px;
}
.trust-cell-stars{
color:#F95300;
font-size:11px;
letter-spacing:0.5px;
}
@media(max-width:1000px){
.trust-strip .container{grid-template-columns:repeat(3,1fr) !important}
.trust-cell:nth-child(3){border-right:none}
.trust-cell:nth-child(4),.trust-cell:nth-child(5){border-top:1px solid #ECECEC}
.trust-cell{padding:18px 20px}
}
@media(max-width:620px){
.trust-strip .container{grid-template-columns:repeat(2,1fr) !important}
.trust-cell:nth-child(2){border-right:none}
.trust-cell:nth-child(3){border-right:1px solid #ECECEC}
.trust-cell:nth-child(odd):last-child{grid-column:1 / -1;border-right:none}
.trust-cell{padding:15px 16px;gap:10px}
.trust-cell-icon{width:32px;height:32px}
.trust-cell-icon svg{width:15px;height:15px}
.trust-cell-title{font-size:12px}
.trust-cell-sub{font-size:10.5px}
}
/* ─── 3. Page-header — wit, geen grijs vlak ─── */
.page-header{
background:#FFFFFF !important;
border-bottom:1px solid #ECECEC !important;
}
/* ─── 4. Actie-pagina — strak wit, leven via borders & accent ─── */
.actie-hero{
background:#FFFFFF !important;
border-bottom:1px solid #ECECEC !important;
position:relative;
}
.actie-hero::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg,#F95300 0%,#FF8A4C 50%,#F95300 100%);
}
.actie-includes{background:#FFFFFF !important}
.actie-deals{
background:#FFFFFF !important;
border-top:1px solid #ECECEC !important;
border-bottom:1px solid #ECECEC !important;
}
.actie-process{background:#FFFFFF !important}
.actie-location{
background:#FFFFFF !important;
border-top:1px solid #ECECEC !important;
}
.actie-faq{background:#FFFFFF !important}
/* Includes-blokken krijgen kaart-vorm met border ipv kaal */
.actie-includes-grid{gap:0 !important}
.actie-include{
padding:28px 26px !important;
border:1px solid #ECECEC;
border-right-width:0;
}
.actie-include:last-child{border-right-width:1px}
.actie-include:first-child{border-radius:14px 0 0 14px}
.actie-include:last-child{border-radius:0 14px 14px 0}
.actie-icon{
border-bottom:none !important;
font-size:12px !important;
color:#F95300 !important;
padding-bottom:0 !important;
margin-bottom:14px !important;
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;height:34px;
background:#FFF0E8;
border-radius:8px;
}
@media(max-width:1000px){
.actie-include{
border-right-width:1px;
border-bottom-width:0;
}
.actie-include:nth-child(odd){border-radius:14px 0 0 14px}
.actie-include:nth-child(even){border-radius:0 14px 14px 0}
.actie-include:nth-child(3),.actie-include:nth-child(4){border-top-width:0}
}
@media(max-width:640px){
.actie-include{border-radius:14px !important;border-width:1px !important;margin-bottom:-1px}
}
/* Process-steps krijgen subtiele kaart */
.actie-steps{gap:20px !important}
.actie-step{
padding:24px 22px;
border:1px solid #ECECEC;
border-radius:14px;
transition:border-color .18s, box-shadow .18s;
}
.actie-step:hover{
border-color:#DCDCDC;
box-shadow:0 8px 24px rgba(14,14,14,.06);
}
/* FAQ strakker */
.actie-faq details{
border:1px solid #ECECEC !important;
border-radius:12px;
margin-bottom:10px;
padding:0 !important;
}
.actie-faq summary{
padding:18px 20px !important;
}
.actie-faq details[open]{
border-color:#DCDCDC;
box-shadow:0 8px 24px rgba(14,14,14,.05);
}
.actie-faq details p{
padding:0 20px 18px !important;
margin-top:0 !important;
}
/* Location-map strak */
.actie-location-map{
box-shadow:none !important;
border:1px solid #ECECEC;
}
/* ─── 5. Contact — strak wit, leven via structuur ─── */
.contact-grid{
padding:48px 0 90px;
}
.contact-info{
background:#FFFFFF;
}
.contact-info .item{
border-bottom:1px solid #ECECEC;
padding:16px 0;
}
.contact-info .item:last-child{border-bottom:none}
.checkout-form{
background:#FFFFFF;
border:1px solid #ECECEC;
border-radius:16px;
padding:32px;
}
.checkout-form.is-offerte{
border-top:3px solid #F95300;
}
.checkout-form .field input,
.checkout-form .field textarea{
background:#FFFFFF;
border:1px solid #E2E2E2;
}
.checkout-form .field input:focus,
.checkout-form .field textarea:focus{
border-color:#F95300;
outline:none;
}
/* ─── 6. Shop subnav-chip 'actie' variant zoals screenshot ─── */
.subnav-chip[data-subnav-cat],
.subnav-chip.subnav-link{white-space:nowrap}
/* ════════════════════════════════════════════════════════
CONTACT v18 hero-foto, zwevende kaart, geen streepjes
════════════════════════════════════════════════════════ */
/* ─── HERO met vloer-foto ─── */
.ct-hero{
position:relative;
min-height:320px;
display:flex;align-items:center;
overflow:hidden;
background:#2A2018 url('/images/products/vivafloors/vivafloors-eiken-3510-lijmvariant-1.jpg') center/cover no-repeat;
}
.ct-hero-overlay{
position:absolute;inset:0;
background:linear-gradient(90deg,
rgba(14,14,14,.86) 0%,
rgba(14,14,14,.62) 48%,
rgba(14,14,14,.32) 100%);
}
.ct-hero-inner{
position:relative;z-index:2;
padding:48px 0 96px;
}
.ct-hero-eyebrow{
display:inline-block;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:#FF8A4C;
margin-bottom:22px;
}
.ct-hero h1{
font-family:'Fraunces',serif;
font-weight:400;
font-size:clamp(2.2rem,4.4vw,3.4rem);
line-height:1.05;
letter-spacing:-.03em;
color:#FFFFFF;
max-width:14ch;
margin:0;
}
.ct-hero h1 em{font-style:italic;color:#FF8A4C}
.ct-hero p{
margin-top:22px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:16px;line-height:1.65;
color:rgba(255,255,255,.78);
max-width:450px;
}
.ct-hero-meta{
display:flex;gap:0;margin-top:26px;
}
.ct-hero-meta-item{
padding:0 26px;
border-left:1px solid rgba(255,255,255,.18);
}
.ct-hero-meta-item:first-child{border-left:none;padding-left:0}
.ct-hero-meta-item b{
display:block;
font-family:'Fraunces',serif;
font-size:1.3rem;font-weight:500;
color:#FFFFFF;letter-spacing:-.02em;
}
.ct-hero-meta-item span{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;color:rgba(255,255,255,.6);
font-weight:500;margin-top:3px;display:block;
}
/* FORMULIER zwevende kaart over hero */
.ct-form-zone{
position:relative;
margin-top:-72px;
padding-bottom:84px;
z-index:3;
}
.ct-form-card{
max-width:720px;
margin:0 auto;
background:#FFFFFF;
border-radius:20px;
box-shadow:0 30px 70px -20px rgba(14,14,14,.30), 0 8px 24px rgba(14,14,14,.08);
padding:0 48px 44px;
}
.ct-form-card-head{
text-align:center;
padding:36px 0 8px;
}
.ct-form-card-head .eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:#F95300;
margin-bottom:10px;
}
.ct-form-card-head h2{
font-family:'Fraunces',serif;font-weight:500;
font-size:1.7rem;letter-spacing:-.02em;
color:#0E0E0E;margin:0;
}
/* meldingen */
.ct-msg{
margin:18px 0 0;
padding:15px 18px;
border-radius:11px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;line-height:1.5;
}
.ct-msg-ok{
background:#F0FBF4;
border:1px solid #BBE9CC;
color:#1A7340;
}
.ct-msg-ok strong{display:block;color:#0E5C2E;margin-bottom:2px}
.ct-msg-err{
background:#FEF2F0;
border:1px solid #F6CFC6;
color:#C33617;
}
/* steps */
.ct-step{
padding:30px 0;
border-top:1px solid #E6E6E6;
}
.ct-form .ct-step:first-child{border-top:none;padding-top:24px}
.ct-step-head{
display:flex;align-items:center;gap:12px;
margin-bottom:22px;
}
.ct-step-num{
width:28px;height:28px;border-radius:50%;
background:#0E0E0E;color:#FFFFFF;
font-family:'Fraunces',serif;font-size:13px;font-weight:600;
display:grid;place-items:center;flex-shrink:0;
}
.ct-step-title{
font-family:'Fraunces',serif;font-weight:500;
font-size:1.25rem;letter-spacing:-.02em;color:#0E0E0E;
}
/* velden */
.ct-field{margin-bottom:18px}
.ct-field:last-child{margin-bottom:0}
.ct-field-2{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
margin-bottom:18px;
}
.ct-field-2:last-child{margin-bottom:0}
.ct-field-2 .ct-field{margin-bottom:0}
.ct-lbl{
display:block;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;font-weight:600;
color:#5C5C5C;margin-bottom:8px;
}
.ct-lbl-opt{color:#A3A3A3;font-weight:400}
.ct-input{
width:100%;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14.5px;
padding:13px 15px;
border:1.5px solid #E6E6E6;
border-radius:10px;
background:#FFFFFF;
color:#0E0E0E;
transition:border-color .18s;
}
.ct-input::placeholder{color:#C2C2C2}
.ct-input:focus{outline:none;border-color:#F95300}
.ct-textarea{resize:vertical;min-height:96px}
.ct-hint{
margin-top:8px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;color:#9C9C9C;
}
/* pills (radio) */
.ct-pill-row{display:flex;gap:9px;flex-wrap:wrap}
.ct-pill{position:relative;cursor:pointer}
.ct-pill input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ct-pill span{
display:inline-flex;align-items:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;font-weight:500;
padding:10px 18px;
border:1.5px solid #E6E6E6;
border-radius:999px;
background:#FFFFFF;color:#5C5C5C;
transition:all .15s;
}
.ct-pill:hover span{border-color:#0E0E0E;color:#0E0E0E}
.ct-pill input:checked + span{
background:#0E0E0E;color:#FFFFFF;border-color:#0E0E0E;
}
/* checks */
.ct-checks{margin-top:4px}
.ct-check{
display:flex;align-items:center;gap:11px;
cursor:pointer;padding:9px 0;
}
.ct-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ct-check-box{
width:20px;height:20px;border-radius:6px;
border:1.5px solid #C6C6C6;flex-shrink:0;
position:relative;transition:all .15s;
}
.ct-check input:checked + .ct-check-box{
background:#F95300;border-color:#F95300;
}
.ct-check input:checked + .ct-check-box::after{
content:"";position:absolute;left:6px;top:2.5px;
width:5px;height:10px;border:solid #FFFFFF;
border-width:0 2px 2px 0;transform:rotate(45deg);
}
.ct-check-txt{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;color:#5C5C5C;
}
.ct-check input:checked ~ .ct-check-txt{color:#0E0E0E;font-weight:600}
/* submit */
.ct-submit-zone{padding-top:30px}
.ct-submit{
display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;font-weight:600;
padding:16px;
background:#F95300;color:#FFFFFF;
border:none;border-radius:12px;cursor:pointer;
transition:transform .15s, background .15s;
}
.ct-submit:hover{transform:translateY(-2px);background:#E04A00}
.ct-submit-note{
margin-top:15px;text-align:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;color:#9C9C9C;line-height:1.55;
}
/* ─── DIRECT CONTACT ─── */
.ct-direct{
border-top:1px solid #E6E6E6;
padding:64px 0;
text-align:center;
background:#FFFFFF;
}
.ct-direct-eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:#9C9C9C;
margin-bottom:12px;
}
.ct-direct h2{
font-family:'Fraunces',serif;font-weight:500;
font-size:2rem;letter-spacing:-.025em;
color:#0E0E0E;margin:0 0 42px;
}
.ct-direct-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
max-width:900px;margin:0 auto;
}
.ct-direct-item{
padding:0 24px;
border-left:1px solid #E6E6E6;
display:flex;flex-direction:column;align-items:center;gap:9px;
text-decoration:none;
}
.ct-direct-item:first-child{border-left:none}
.ct-direct-ico{
width:46px;height:46px;
display:grid;place-items:center;
border:1.5px solid #E6E6E6;
border-radius:50%;
color:#0E0E0E;
transition:all .18s;
}
.ct-direct-ico svg{width:18px;height:18px}
a.ct-direct-item:hover .ct-direct-ico{
background:#0E0E0E;border-color:#0E0E0E;color:#FFFFFF;
}
.ct-direct-item small{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:#9C9C9C;
}
.ct-direct-item b{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;font-weight:600;color:#0E0E0E;line-height:1.4;
}
.ct-direct-sub{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12.5px;color:#5C5C5C;line-height:1.5;
}
/* openingstijden */
.ct-hours{
display:flex;flex-wrap:wrap;justify-content:center;
gap:8px 26px;
margin-top:46px;padding-top:30px;
border-top:1px solid #E6E6E6;
max-width:760px;margin-left:auto;margin-right:auto;
}
.ct-hours span{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;color:#5C5C5C;
}
.ct-hours b{color:#0E0E0E;font-weight:700}
/* ─── MOBIEL ─── */
@media(max-width:760px){
.ct-hero{min-height:280px}
.ct-hero-inner{padding:34px 0 84px}
.ct-hero-meta-item{padding:0 16px}
.ct-form-zone{margin-top:-82px}
.ct-form-card{padding:0 22px 36px;border-radius:16px}
.ct-field-2{grid-template-columns:1fr}
.ct-direct-row{grid-template-columns:1fr 1fr;gap:34px 0}
.ct-direct-item:nth-child(3){border-left:none}
}
@media(max-width:430px){
.ct-hero h1{font-size:2.4rem}
.ct-direct-row{grid-template-columns:1fr}
.ct-direct-item{border-left:none;padding:18px 0;border-top:1px solid #E6E6E6}
.ct-direct-item:first-child{border-top:none}
}
/* ═══════════════════════════════════════════════════════════
TRAPPEN v1 - Traprenovatie pagina, v5-design
Foto-hero, zwevende kaarten, genummerde stappen, puur wit
═══════════════════════════════════════════════════════════ */
/* ─── HERO ─── */
.tr-hero{
position:relative;
min-height:380px;
display:flex;
align-items:center;
background-image:url("/images/trap-hero.jpg");
background-size:cover;
background-position:center;
overflow:hidden;
}
.tr-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(14,14,14,.62) 0%, rgba(14,14,14,.74) 100%);
}
.tr-hero-inner{
position:relative;
z-index:1;
text-align:center;
padding:64px 0;
}
.tr-hero-eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:#FFD9C5;
margin-bottom:18px;
}
.tr-hero h1{
font-family:'Fraunces',serif;
font-size:clamp(2.2rem,4.6vw,3.4rem);
font-weight:500;
letter-spacing:-0.03em;
line-height:1.05;
color:#fff;
margin:0 auto 18px;
max-width:780px;
}
.tr-hero h1 em{font-style:italic;color:#FFB088}
.tr-hero p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:16px;
line-height:1.6;
color:rgba(255,255,255,.88);
max-width:600px;
margin:0 auto 32px;
}
.tr-hero-meta{
display:flex;
justify-content:center;
gap:48px;
flex-wrap:wrap;
}
.tr-hero-meta-item{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
}
.tr-hero-meta-item b{
font-family:'Fraunces',serif;
font-size:22px;
font-weight:500;
color:#fff;
}
.tr-hero-meta-item span{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
color:rgba(255,255,255,.7);
letter-spacing:0.02em;
}
/* ─── TYPES ZONE - zwevende kaarten ─── */
.tr-types-zone{
background:#FFFFFF;
padding:0 24px 88px;
margin-top:-56px;
position:relative;
z-index:2;
}
.tr-types-head{
text-align:center;
max-width:620px;
margin:0 auto 40px;
padding-top:72px;
}
.tr-types-head .eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:#F95300;
margin-bottom:12px;
}
.tr-types-head h2{
font-family:'Fraunces',serif;
font-size:clamp(1.7rem,3vw,2.3rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 12px;
}
.tr-types-head p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
line-height:1.6;
color:#5C5C5C;
margin:0;
}
.tr-types-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
max-width:880px;
margin:0 auto;
}
.tr-type-card{
position:relative;
background:#FFFFFF;
border:1px solid #EDEDED;
border-radius:18px;
padding:36px 32px;
box-shadow:0 18px 48px rgba(14,14,14,.07);
display:flex;
flex-direction:column;
transition:transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms;
}
.tr-type-card:hover{
transform:translateY(-4px);
box-shadow:0 26px 64px rgba(14,14,14,.11);
}
.tr-type-card-featured{
border-color:#F95300;
box-shadow:0 24px 60px rgba(249,83,0,.16);
}
.tr-type-tag{
position:absolute;
top:-13px;
left:32px;
background:#F95300;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
padding:6px 14px;
border-radius:999px;
}
.tr-type-head h3{
font-family:'Fraunces',serif;
font-size:1.4rem;
font-weight:500;
letter-spacing:-0.01em;
color:#0E0E0E;
margin:0 0 10px;
}
.tr-type-head p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.6;
color:#5C5C5C;
margin:0 0 24px;
}
.tr-type-price{
display:flex;
flex-direction:column;
gap:2px;
padding-bottom:22px;
margin-bottom:22px;
border-bottom:1px solid #EDEDED;
}
.tr-type-price-amount{
font-family:'Fraunces',serif;
font-size:2rem;
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
}
.tr-type-price-unit{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
color:#8A8A8A;
}
.tr-type-list{
list-style:none;
margin:0 0 28px;
padding:0;
display:flex;
flex-direction:column;
gap:11px;
flex:1;
}
.tr-type-list li{
position:relative;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
line-height:1.45;
color:#3A3A3A;
padding-left:26px;
}
.tr-type-list li::before{
content:"";
position:absolute;
left:0;
top:2px;
width:16px;
height:16px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F95300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:contain;
}
.tr-type-cta{
display:block;
text-align:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
text-decoration:none;
padding:14px 20px;
border-radius:12px;
background:#F95300;
color:#fff;
transition:background 200ms, transform 200ms;
}
.tr-type-cta:hover{background:#D94600;transform:translateY(-1px)}
.tr-type-cta-ghost{
background:#fff;
color:#0E0E0E;
border:1.5px solid #0E0E0E;
}
.tr-type-cta-ghost:hover{background:#0E0E0E;color:#fff}
.tr-types-note{
max-width:680px;
margin:36px auto 0;
text-align:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
line-height:1.6;
color:#8A8A8A;
}
/* ─── STEPS ─── */
.tr-steps{
background:#FFFFFF;
padding:80px 0;
border-top:1px solid #EDEDED;
}
.tr-steps-head{
text-align:center;
margin-bottom:48px;
}
.tr-steps-head .eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:#F95300;
margin-bottom:12px;
}
.tr-steps-head h2{
font-family:'Fraunces',serif;
font-size:clamp(1.7rem,3vw,2.3rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0;
}
.tr-steps-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
max-width:980px;
margin:0 auto;
}
.tr-step{
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
.tr-step-num{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:50%;
background:#FFF1EA;
color:#F95300;
font-family:'Fraunces',serif;
font-size:20px;
font-weight:500;
margin-bottom:18px;
}
.tr-step h3{
font-family:'Fraunces',serif;
font-size:1.1rem;
font-weight:500;
color:#0E0E0E;
margin:0 0 8px;
}
.tr-step p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;
line-height:1.55;
color:#5C5C5C;
margin:0;
}
/* ─── CTA ZONE - zwevende donkere kaart ─── */
.tr-cta-zone{
background:#FFFFFF;
padding:0 24px 88px;
}
.tr-cta-card{
max-width:880px;
margin:0 auto;
background:#0E0E0E;
border-radius:22px;
padding:64px 48px;
text-align:center;
box-shadow:0 24px 64px rgba(14,14,14,.18);
}
.tr-cta-eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:#FFB088;
margin-bottom:14px;
}
.tr-cta-card h2{
font-family:'Fraunces',serif;
font-size:clamp(1.7rem,3vw,2.4rem);
font-weight:500;
letter-spacing:-0.02em;
color:#fff;
margin:0 auto 14px;
max-width:520px;
}
.tr-cta-card p{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
line-height:1.6;
color:rgba(255,255,255,.8);
max-width:480px;
margin:0 auto 32px;
}
.tr-cta-buttons{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}
.tr-cta-btn{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
text-decoration:none;
padding:15px 28px;
border-radius:12px;
background:#F95300;
color:#fff;
transition:background 200ms, transform 200ms;
}
.tr-cta-btn:hover{background:#D94600;transform:translateY(-1px)}
.tr-cta-btn-ghost{
background:transparent;
color:#fff;
border:1.5px solid rgba(255,255,255,.35);
}
.tr-cta-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* ─── DIRECT CONTACT ─── */
.tr-direct{
background:#FFFFFF;
padding:80px 0;
border-top:1px solid #EDEDED;
text-align:center;
}
.tr-direct-eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:#F95300;
margin-bottom:12px;
}
.tr-direct h2{
font-family:'Fraunces',serif;
font-size:clamp(1.6rem,2.8vw,2.1rem);
font-weight:500;
letter-spacing:-0.02em;
color:#0E0E0E;
margin:0 0 40px;
}
.tr-direct-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
max-width:920px;
margin:0 auto 36px;
}
.tr-direct-item{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:28px 18px;
background:#FFFFFF;
border:1px solid #EDEDED;
border-radius:16px;
text-decoration:none;
transition:transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, border-color 220ms;
}
.tr-direct-item:hover{
transform:translateY(-3px);
box-shadow:0 16px 36px rgba(14,14,14,.08);
border-color:#FFD9C5;
}
.tr-direct-ico{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:50%;
background:#FFF1EA;
color:#F95300;
margin-bottom:8px;
}
.tr-direct-ico svg{width:20px;height:20px}
.tr-direct-item small{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:600;
letter-spacing:0.1em;
text-transform:uppercase;
color:#8A8A8A;
}
.tr-direct-item b{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
color:#0E0E0E;
}
.tr-direct-sub{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;
color:#8A8A8A;
}
.tr-direct-item-static{cursor:default}
.tr-direct-item-static:hover{
transform:none;
box-shadow:none;
border-color:#EDEDED;
}
.tr-hours{
display:flex;
flex-direction:column;
gap:4px;
align-items:center;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;
color:#5C5C5C;
}
.tr-hours b{
font-size:12px;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
color:#0E0E0E;
}
/* ─── RESPONSIVE ─── */
@media(max-width:880px){
.tr-types-grid{grid-template-columns:1fr;max-width:440px}
.tr-steps-grid{grid-template-columns:repeat(2,1fr);max-width:500px}
.tr-direct-row{grid-template-columns:repeat(2,1fr);max-width:480px}
}
@media(max-width:560px){
.tr-hero{min-height:340px}
.tr-hero-inner{padding:48px 0}
.tr-hero-meta{gap:28px}
.tr-types-zone{padding-bottom:64px}
.tr-types-head{padding-top:56px}
.tr-type-card{padding:30px 24px}
.tr-steps{padding:60px 0}
.tr-steps-grid{grid-template-columns:1fr;max-width:320px;gap:32px}
.tr-cta-card{padding:48px 28px}
.tr-cta-buttons{flex-direction:column}
.tr-cta-btn{width:100%;box-sizing:border-box}
.tr-direct{padding:60px 0}
.tr-direct-row{grid-template-columns:1fr;max-width:320px}
}
/* ════════════════════════════════════════════════════════
FOOT-BADGES v9 - gecentreerd, met kleur en diepte
════════════════════════════════════════════════════════ */
.foot-badges{
justify-content:center !important;
align-items:stretch !important;
gap:14px !important;
padding:38px 0 !important;
}
.foot-badge{
flex-direction:column;
align-items:center;
text-align:center;
gap:10px !important;
padding:20px 22px !important;
min-width:140px;
background:rgba(255,255,255,.05) !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
font-size:12px !important;
color:rgba(255,255,255,.78) !important;
transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, background .22s;
}
.foot-badge:hover{
transform:translateY(-3px);
border-color:rgba(249,83,0,.45) !important;
background:rgba(249,83,0,.06) !important;
}
.foot-badge svg{
width:34px !important;
height:34px !important;
color:#F95300 !important;
background:rgba(249,83,0,.12);
border-radius:50%;
padding:8px;
box-sizing:border-box;
}
.foot-badge strong{color:#fff !important;font-weight:600;font-size:13px}
@media(max-width:560px){
.foot-badge{min-width:120px;padding:16px 14px !important}
.foot-badge svg{width:30px !important;height:30px !important}
}
/* ════════════════════════════════════════════════════════
ACTIE-V5 - koppen gecentreerd + kortingsbadge
════════════════════════════════════════════════════════ */
/* sectiekoppen consistent met homepage .sec-head */
.actie-includes .container,
.actie-deals .container,
.actie-process .container{
text-align:center;
}
.actie-section-eyebrow{
display:block !important;
text-align:center;
}
.actie-section-intro{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
.actie-includes h2,
.actie-deals h2,
.actie-process h2{
text-align:center;
}
/* hero ook gecentreerd */
.actie-hero .container{text-align:center}
.actie-hero .eyebrow{display:block !important}
.actie-hero h1{margin-left:auto;margin-right:auto}
.actie-hero .lead{margin-left:auto;margin-right:auto}
.actie-cta-group{justify-content:center}
/* inhoud binnen kaarten/blokken blijft links waar dat hoort */
.actie-includes-grid,
.deal-grid,
.actie-steps{text-align:left}
.actie-include,
.actie-step{text-align:left}
/* kortingsbadge - rechtsboven in de kaart */
.deal-korting-badge{
position:absolute;
top:14px;
right:14px;
background:#FFF1EA;
color:#F95300;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.04em;
padding:5px 11px;
border-radius:999px;
z-index:2;
}
.deal-card.is-featured .deal-korting-badge{
background:rgba(249,83,0,.18);
color:#FF8A4C;
}
/* ════════════════════════════════════════════════════════
ACTIEBALK v1 - slide-in balk homepage (optie C)
════════════════════════════════════════════════════════ */
/* banner verbergen op de homepage - daar doet de slide-in balk het werk */
.is-home .action-banner{display:none !important}
.actiebalk{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:900;
background:#0E0E0E;
border-top:2px solid #F95300;
transform:translateY(110%);
transition:transform .6s cubic-bezier(.16,.84,.44,1);
box-shadow:0 -10px 40px rgba(0,0,0,.28);
}
.actiebalk.is-in{transform:translateY(0)}
.actiebalk-inner{
max-width:1180px;
margin:0 auto;
display:flex;
align-items:center;
gap:20px;
padding:16px 24px;
}
.actiebalk-tag{
flex-shrink:0;
background:#F95300;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
padding:6px 13px;
border-radius:999px;
}
.actiebalk-text{
flex:1;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:15px;
color:#fff;
line-height:1.4;
}
.actiebalk-text strong{color:#FF8A4C;font-weight:700}
.actiebalk-cta{
flex-shrink:0;
background:#F95300;
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;
font-weight:600;
text-decoration:none;
padding:12px 22px;
border-radius:10px;
transition:background .2s, transform .2s;
}
.actiebalk-cta:hover{background:#D94600;transform:translateY(-1px)}
.actiebalk-close{
flex-shrink:0;
background:none;
border:none;
color:rgba(255,255,255,.55);
font-size:24px;
line-height:1;
cursor:pointer;
padding:4px 8px;
transition:color .2s;
}
.actiebalk-close:hover{color:#fff}
@media(max-width:680px){
.actiebalk-inner{
flex-wrap:wrap;
gap:10px 14px;
padding:14px 16px 16px;
}
.actiebalk-text{flex:1 1 100%;font-size:14px;order:2}
.actiebalk-tag{order:1}
.actiebalk-close{order:1;margin-left:auto}
.actiebalk-cta{order:3;flex:1 1 100%;text-align:center}
}
/* ════════════════════════════════════════════════════════
SHOPDETAIL-V5 - product.php afwerking, puur wit + diepte
════════════════════════════════════════════════════════ */
.breadcrumbs{padding:20px 0;font-size:.85rem;color:var(--ink-2)}
.prod-gallery .main{
background:#FFFFFF;
border:1px solid #EFEFEF;
box-shadow:0 14px 38px rgba(14,14,14,.07);
}
.prod-thumbs div{background:#FFFFFF;border:1px solid #EFEFEF}
.prod-thumbs div.active{border-color:#F95300;border-width:2px}
.prod-rating{
color:#F95300;
font-size:1.05rem;
margin-top:8px;
}
.prod-rating span{color:var(--ink-2);font-size:.85rem}
.prod-intro{
color:var(--ink-2);
margin-bottom:22px;
line-height:1.7;
}
.spec-list{
background:#FFFFFF;
border:1px solid #EFEFEF;
border-radius:14px;
box-shadow:0 10px 28px rgba(14,14,14,.05);
}
.calc{
background:#FFFFFF;
border:1px solid #EFEFEF;
border-radius:16px;
box-shadow:0 16px 40px rgba(14,14,14,.08);
}
.calc h3{
font-family:'Fraunces',serif;
color:#0E0E0E;
}
.calc-unit{padding:14px 0;color:var(--ink-2)}
.calc-result{background:#FFFFFF;border:1px solid #EFEFEF}
.addon{background:#FFFFFF;border:1px solid #EFEFEF}
.addon:hover{border-color:#E0E0E0}
.prod-offerte-btn{
width:100%;
text-align:center;
display:block;
box-sizing:border-box;
}
/* ════════════════════════════════════════════════════════
ACTIEHERO-V2 - tweekoloms hero met vloerfoto (optie C)
════════════════════════════════════════════════════════ */
/* decoratief 3px-streepje boven de hero weg */
.actie-hero::before{display:none !important;content:none !important}
.actie-hero{
background:#FFFFFF !important;
border-bottom:1px solid #EFEFEF !important;
padding:72px 0 !important;
}
/* batch8 centreerde de hero - voor tweekoloms terug naar links */
.actie-hero .container{text-align:left !important}
.actie-hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:56px;
align-items:center;
}
.actie-hero-text .eyebrow{
display:inline-block !important;
margin-bottom:16px;
}
.actie-hero-text h1{
margin:0 0 18px !important;
max-width:none !important;
}
.actie-hero-text .lead{
margin:0 0 28px !important;
max-width:520px !important;
}
.actie-hero-text .actie-cta-group{justify-content:flex-start !important}
/* rechterkolom: foto + zwevende prijskaart */
.actie-hero-visual{
position:relative;
}
.actie-hero-photo{
border-radius:20px;
overflow:hidden;
aspect-ratio:4/3;
box-shadow:0 24px 56px rgba(14,14,14,.16);
}
.actie-hero-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.actie-hero-prijskaart{
position:absolute;
left:-28px;
bottom:-28px;
background:#0E0E0E;
color:#fff;
border-radius:16px;
padding:22px 28px;
display:flex;
flex-direction:column;
gap:2px;
box-shadow:0 18px 44px rgba(14,14,14,.28);
}
.ahp-label{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:#FF8A4C;
}
.ahp-bedrag{
font-family:'Fraunces',serif;
font-size:2.6rem;
font-weight:500;
line-height:1;
color:#fff;
}
.ahp-unit{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12.5px;
color:rgba(255,255,255,.7);
}
@media(max-width:860px){
.actie-hero{padding:48px 0 !important}
.actie-hero-grid{
grid-template-columns:1fr;
gap:44px;
}
.actie-hero-text .lead{max-width:none !important}
.actie-hero-photo{aspect-ratio:16/10}
.actie-hero-prijskaart{
left:16px;
bottom:-24px;
padding:18px 22px;
}
.ahp-bedrag{font-size:2.2rem}
}
@media(max-width:480px){
.actie-hero-prijskaart{
left:50%;
transform:translateX(-50%);
text-align:center;
align-items:center;
}
.actie-cta-group{flex-direction:column;align-items:stretch}
.actie-cta-group .btn-terra{text-align:center}
}
/* HERO HEIGHT TWEAK */
.hero{min-height:62vh;max-height:680px}
@media(max-width:900px){.hero{min-height:auto;max-height:none}}
/* TOEBEHOREN PAGE v1 */
.toeb-hero{padding:80px 0 40px;background:var(--cream,#f5efe6)}
.toeb-hero .eyebrow{display:inline-block;font-family:var(--font-label,inherit);text-transform:uppercase;font-size:.78rem;letter-spacing:.2em;color:#d96718;margin-bottom:12px}
.toeb-hero h1{font-family:var(--font-display,inherit);font-weight:500;font-size:3rem;line-height:1.1;margin:0 0 16px;color:#1a130d}
.toeb-hero h1 em{font-style:italic;font-weight:400;color:#d96718}
.toeb-hero .lead{font-size:1.1rem;line-height:1.6;color:rgba(26,19,13,0.78);max-width:680px;margin:0}
.toeb-ondervloer{padding:60px 0;background:#fff}
.toeb-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center}
.toeb-intro .eyebrow{display:inline-block;font-family:var(--font-label,inherit);text-transform:uppercase;font-size:.78rem;letter-spacing:.2em;color:#d96718;margin-bottom:10px}
.toeb-intro h2{font-family:var(--font-display,inherit);font-weight:500;font-size:2.2rem;line-height:1.15;margin:0 0 14px;color:#1a130d}
.toeb-intro p{font-size:1rem;line-height:1.6;color:rgba(26,19,13,0.75);margin:0 0 20px}
.toeb-intro-wide{max-width:760px;margin-bottom:40px}
.toeb-intro-wide .lead{font-size:1.05rem}
.toeb-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.toeb-checks li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(26,19,13,0.85)}
.toeb-checks .check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#ee7422;color:#fff;font-weight:600;font-size:.8rem;flex-shrink:0}
.toeb-price-card{background:#1a130d;color:#fff;padding:36px 32px;border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;box-shadow:0 10px 30px rgba(26,19,13,0.15)}
.toeb-price-card .price-label{font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:#ee7422}
.toeb-price-card .price-amount{font-family:var(--font-display,inherit);font-weight:500;font-size:3rem;line-height:1;color:#fff}
.toeb-price-card .price-unit{font-size:.95rem;color:rgba(255,255,255,0.7);margin-bottom:18px}
.toeb-price-card .btn-add{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;background:#ee7422;color:#fff;border-radius:50px;font-weight:600;font-size:.92rem;text-decoration:none;transition:transform .2s ease,background .2s ease}
.toeb-price-card .btn-add:hover{background:#d96718;transform:translateX(3px)}
.toeb-plinten{padding:80px 0;background:var(--cream,#f5efe6)}
.toeb-subhead{font-family:var(--font-display,inherit);font-weight:500;font-size:1.3rem;color:#1a130d;margin:32px 0 18px}
.prijs-table-wrap{overflow-x:auto;margin-bottom:8px}
.prijs-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(60,40,20,0.06)}
.prijs-table th,.prijs-table td{padding:18px 22px;text-align:left;font-size:1rem;border-bottom:1px solid rgba(60,40,20,0.08)}
.prijs-table thead th{background:#1a130d;color:#fff;font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:500}
.prijs-table tbody th{font-weight:600;color:#1a130d;background:rgba(238,116,34,0.04)}
.prijs-table tbody td{color:#1a130d;font-weight:500}
.prijs-table tbody tr:last-child th,.prijs-table tbody tr:last-child td{border-bottom:none}
.prijs-table tbody tr:hover{background:rgba(238,116,34,0.05)}
.kleur-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.kleur-card{background:#fff;padding:22px 18px;border-radius:14px;border:1px solid rgba(60,40,20,0.06);display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .2s ease,box-shadow .2s ease}
.kleur-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(60,40,20,0.08)}
.kleur-swatch{display:block;width:48px;height:48px;border-radius:10px}
.kleur-card strong{font-family:var(--font-label,inherit);font-size:.85rem;letter-spacing:.06em;color:#1a130d;font-weight:600}
.kleur-meta{font-size:.85rem;color:rgba(26,19,13,0.65)}
.kleur-meta em{font-style:normal;font-weight:600;color:#d96718;margin-left:4px}
.toeb-footnote{font-size:.88rem;color:rgba(26,19,13,0.6);line-height:1.55;margin-top:18px;max-width:760px}
.toeb-cta{padding:72px 0;background:#1a130d;color:#fff;text-align:center}
.toeb-cta h2{font-family:var(--font-display,inherit);font-weight:500;font-size:2rem;margin:0 0 12px;color:#fff}
.toeb-cta p{font-size:1rem;color:rgba(255,255,255,0.78);margin:0 auto 24px;max-width:560px;line-height:1.6}
.toeb-cta .cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.toeb-cta .btn-primary{display:inline-flex;align-items:center;gap:6px;padding:14px 28px;background:#ee7422;color:#fff;border-radius:50px;font-weight:600;text-decoration:none;transition:background .2s ease,transform .2s ease}
.toeb-cta .btn-primary:hover{background:#d96718;transform:translateY(-2px)}
.toeb-cta .btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:14px 28px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:50px;font-weight:600;text-decoration:none;transition:background .2s ease,border-color .2s ease}
.toeb-cta .btn-secondary:hover{background:rgba(255,255,255,0.08);border-color:#fff}
@media(max-width:900px){
.toeb-hero h1{font-size:2.2rem}
.toeb-grid{grid-template-columns:1fr;gap:28px}
.toeb-price-card{align-items:center;text-align:center}
.kleur-grid{grid-template-columns:repeat(2,1fr)}
.toeb-intro h2{font-size:1.7rem}
.prijs-table th,.prijs-table td{padding:14px 16px;font-size:.92rem}
}
@media(max-width:480px){
.kleur-grid{grid-template-columns:1fr}
}
/* LEGAL PAGES v1 */
.legal-hero{padding:72px 0 32px;background:var(--cream,#f5efe6);border-bottom:1px solid rgba(60,40,20,0.06)}
.legal-hero .eyebrow{display:inline-block;font-family:var(--font-label,inherit);text-transform:uppercase;font-size:.78rem;letter-spacing:.2em;color:#d96718;margin-bottom:12px}
.legal-hero h1{font-family:var(--font-display,inherit);font-weight:500;font-size:2.6rem;line-height:1.12;margin:0 0 14px;color:#1a130d}
.legal-hero h1 em{font-style:italic;font-weight:400;color:#d96718}
.legal-hero .legal-meta{font-size:.94rem;color:rgba(26,19,13,0.62);margin:0}
.legal-body{padding:60px 0 80px;background:#fff}
.container-narrow{max-width:820px;margin:0 auto}
.legal-body p,.legal-body li{font-size:1rem;line-height:1.72;color:#2a1f17}
.legal-body h2{font-family:var(--font-display,inherit);font-weight:500;font-size:1.4rem;color:#1a130d;margin:42px 0 14px;padding-bottom:8px;border-bottom:2px solid rgba(238,116,34,0.18)}
.legal-body h2:first-of-type{margin-top:8px}
.legal-body ul,.legal-body ol{padding-left:22px;margin:14px 0}
.legal-body li{margin:6px 0}
.legal-body a{color:#d96718;text-decoration:underline}
.legal-body a:hover{color:#1a130d}
.legal-business-card{background:var(--cream,#f5efe6);border-left:4px solid #ee7422;padding:22px 26px;border-radius:8px;margin:24px 0 28px}
.legal-business-card strong{display:block;font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:#d96718;margin-bottom:8px}
.legal-business-card p{margin:0;font-size:.96rem;line-height:1.65}
@media(max-width:720px){.legal-hero h1{font-size:2rem}.legal-body{padding:44px 0 60px}.legal-body h2{font-size:1.2rem;margin:32px 0 12px}}
/* LEGAL CENTER OVERRIDE v1 */
.legal-hero,.legal-body,.legal-body p,.legal-body h2,.legal-body ul,.legal-body ol,.legal-body li,.legal-business-card,.legal-business-card p{text-align:center}
.legal-body ul,.legal-body ol{list-style-position:inside;padding-left:0}
.legal-body .legal-business-card{border-left:none;border-top:4px solid #ee7422}
/* LEGAL CENTER OVERRIDE v2 */
.legal-body .container-narrow,
.legal-body .container-narrow p,
.legal-body .container-narrow h2,
.legal-body .container-narrow ul,
.legal-body .container-narrow ol,
.legal-body .container-narrow li,
.legal-body .container-narrow .legal-business-card,
.legal-body .container-narrow .legal-business-card p{text-align:center !important}
.legal-body .container-narrow ul,
.legal-body .container-narrow ol{list-style:none !important;padding-left:0 !important}
.legal-body .container-narrow h2{border-bottom:none !important;padding-bottom:0 !important}
.legal-body .container-narrow h2::after{content:"";display:block;width:60px;height:2px;background:rgba(238,116,34,0.4);margin:10px auto 0}
/* PRODUCT ADDON CONFIG v1 */
.addon-config{align-items:flex-start}
.addon-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.addon-select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid rgba(60,40,20,0.16);border-radius:8px;padding:8px 28px 8px 12px;font-size:.88rem;color:#1a130d;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center}
.addon-select:focus{outline:none;border-color:#ee7422;box-shadow:0 0 0 3px rgba(238,116,34,0.15)}
.addon-config .addon-price small{display:block;font-size:.72rem;color:rgba(26,19,13,0.55);margin-top:2px}
@media(max-width:560px){
.addon-options{flex-direction:column}
.addon-select{width:100%}
}
/* HEADER POLISH v1 */
.header{padding:14px 0;background:#fff;border-bottom:1px solid rgba(60,40,20,0.06);transition:box-shadow .25s ease,padding .25s ease}
.header-inner{display:flex;align-items:center;gap:32px}
.header .logo img{height:38px;width:auto;display:block}
@media(min-width:981px){.main-nav{display:flex;align-items:center;gap:30px;flex:1;justify-content:center}}
.main-nav > a,.main-nav .nav-dd > a{font-size:.9rem;font-weight:500;letter-spacing:.04em;color:#1a130d;text-decoration:none;padding:8px 2px;position:relative;display:inline-flex;align-items:center;gap:6px;transition:color .2s ease}
.main-nav > a:hover,.main-nav .nav-dd > a:hover{color:#d96718}
.main-nav > a.active::after,.main-nav .nav-dd > a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#ee7422;border-radius:2px}
.main-nav .nav-dd > a svg{opacity:.55;transition:opacity .2s ease,transform .2s ease}
.main-nav .nav-dd:hover > a svg{opacity:1;transform:translateY(1px)}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.header-search-btn{background:transparent;border:1px solid rgba(60,40,20,0.14);width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#1a130d;transition:border-color .2s ease,background .2s ease}
.header-search-btn:hover{border-color:#ee7422;background:rgba(238,116,34,0.06)}
.header-search-btn svg{width:16px;height:16px}
.header-offerte{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#1a130d;color:#fff;border-radius:50px;font-size:.88rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:background .2s ease,transform .2s ease;line-height:1}
.header-offerte:hover{background:#ee7422;transform:translateY(-1px)}
.header-offerte svg{flex-shrink:0}
/* Scroll state */
.header.is-scrolled{padding:10px 0;box-shadow:0 4px 16px rgba(26,19,13,0.06)}
.header.is-scrolled .logo img{height:34px}
/* Dropdown menu refresh */
.nav-dd{position:relative}
.nav-dd-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid rgba(60,40,20,0.08);border-radius:14px;padding:10px;min-width:280px;box-shadow:0 18px 40px rgba(26,19,13,0.12);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px;color:#1a130d;text-decoration:none;transition:background .15s ease}
.nav-dd-menu a:hover{background:rgba(238,116,34,0.06)}
.nav-dd-menu a strong{font-size:.92rem;font-weight:600}
.nav-dd-menu a small{font-size:.78rem;color:rgba(26,19,13,0.6);line-height:1.4}
@media(max-width:1100px){
.header-inner{gap:20px}
.main-nav{gap:22px}
.main-nav > a,.main-nav .nav-dd > a{font-size:.86rem}
}
/* ACTIE DUO v3 — clean + subtle depth */
.actie-duo{padding:84px 0;background:var(--cream,#f5efe6);position:relative}
.actie-duo .container{max-width:1280px}
.actie-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.actie-duo-card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid rgba(60,40,20,0.06);transition:transform .25s ease,box-shadow .25s ease;position:relative}
.actie-duo-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(60,40,20,0.16)}
.actie-duo-card-primary{background:linear-gradient(135deg,#f48b3c 0%,#e0691c 100%);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(224,105,28,0.18)}
.actie-duo-card-laminaat{background:linear-gradient(140deg,#332215 0%,#1f140c 100%);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(20,12,6,0.2)}
.actie-duo-card-body{padding:52px 44px;display:flex;flex-direction:column;gap:18px;height:100%}
.actie-duo-eyebrow{font-family:var(--font-label,inherit);text-transform:uppercase;font-size:.78rem;letter-spacing:.2em;font-weight:500}
.actie-duo-card-primary .actie-duo-eyebrow{color:rgba(255,255,255,0.95)}
.actie-duo-card-laminaat .actie-duo-eyebrow{color:#f29554}
.actie-duo-title{font-family:var(--font-display,inherit);font-weight:500;font-size:2.4rem;line-height:1.1;margin:2px 0 0;color:#fff}
.actie-duo-title em{font-style:italic;font-weight:400;display:block;margin-top:4px}
.actie-duo-card-laminaat .actie-duo-title em{color:#f29554}
.actie-duo-sub{font-size:1rem;line-height:1.6;margin:0}
.actie-duo-card-primary .actie-duo-sub{color:rgba(255,255,255,0.95)}
.actie-duo-card-laminaat .actie-duo-sub{color:rgba(255,255,255,0.85)}
.actie-duo-checks{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:11px}
.actie-duo-checks li{display:flex;align-items:flex-start;gap:12px;font-size:.96rem;line-height:1.4;color:#fff}
.actie-duo-card-laminaat .actie-duo-checks li{color:rgba(255,255,255,0.92)}
.actie-duo-checks .check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:600;font-size:.85rem;flex-shrink:0;margin-top:1px}
.actie-duo-card-primary .actie-duo-checks .check{background:rgba(255,255,255,0.24);color:#fff}
.actie-duo-card-laminaat .actie-duo-checks .check{background:#ee7422;color:#fff}
.actie-duo-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none;align-self:flex-start;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.actie-duo-card-primary .actie-duo-cta{background:#fff;color:#bf5612;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.actie-duo-card-primary .actie-duo-cta:hover{background:#1a130d;color:#fff;transform:translateX(4px)}
.actie-duo-card-laminaat .actie-duo-cta{background:#ee7422;color:#fff;box-shadow:0 6px 18px rgba(238,116,34,0.32)}
.actie-duo-card-laminaat .actie-duo-cta:hover{background:#fff;color:#1a130d;transform:translateX(4px)}
@media(max-width:900px){
.actie-duo{padding:60px 0}
.actie-duo-grid{grid-template-columns:1fr;gap:18px}
.actie-duo-card-body{padding:38px 28px;gap:16px}
.actie-duo-title{font-size:1.8rem}
}
/* CONTAINER NARROW HARD OVERRIDE */
.container.container-narrow{max-width:820px !important}
/* LAMINAAT ACTIE PAGE v1 */
.lam-actie-hero{padding:84px 0 60px;background:linear-gradient(135deg,#1f140c 0%,#332215 100%);color:#fff;position:relative;overflow:hidden}
.lam-actie-hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.lam-actie-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#ee7422;border-radius:50px;font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:600;margin-bottom:18px}
.lam-actie-hero h1{font-family:var(--font-display,inherit);font-weight:500;font-size:3.1rem;line-height:1.08;color:#fff;margin:0 0 18px}
.lam-actie-hero h1 em{font-style:italic;font-weight:400;color:#f29554;display:block}
.lam-actie-lead{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,0.82);margin:0 0 28px;max-width:520px}
.lam-actie-pricebox{margin:0 0 30px}
.lam-actie-pricerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lam-actie-prefix{font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:rgba(255,255,255,0.7);width:100%;margin-bottom:4px}
.lam-actie-price{font-family:var(--font-display,inherit);font-weight:500;font-size:3.8rem;line-height:1;color:#ee7422}
.lam-actie-unit{font-size:1.4rem;color:rgba(255,255,255,0.85);font-weight:500}
.lam-actie-was{margin-top:6px;font-size:.95rem;color:rgba(255,255,255,0.6)}
.lam-actie-was span{text-decoration:line-through}
.lam-actie-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.lam-actie-cta-row.centered{justify-content:center}
.lam-actie-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none;line-height:1;transition:transform .2s ease,background .2s ease,color .2s ease}
.lam-actie-cta-primary{background:#ee7422;color:#fff;box-shadow:0 6px 18px rgba(238,116,34,0.4)}
.lam-actie-cta-primary:hover{background:#d96718;transform:translateY(-2px)}
.lam-actie-cta-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.25)}
.lam-actie-cta-secondary:hover{background:rgba(255,255,255,0.18);border-color:#fff;transform:translateY(-2px)}
.lam-actie-hero-visual{position:relative}
.lam-actie-visual-card{background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:32px;box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.lam-actie-visual-tag{display:inline-block;font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:#f29554;margin-bottom:18px}
.lam-actie-visual-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.lam-actie-visual-card li{padding-left:28px;position:relative;font-size:1rem;line-height:1.4;color:#fff}
.lam-actie-visual-card li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:#ee7422;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center}
.lam-actie-body{padding:84px 0;background:#fff;text-align:center}
.lam-actie-body h2{font-family:var(--font-display,inherit);font-weight:500;font-size:2.2rem;color:#1a130d;margin:0 0 14px;text-align:center}
.lam-actie-body h2:not(:first-child){margin-top:64px}
.lam-actie-body > .container > p,.lam-actie-body .container-narrow > p{font-size:1.05rem;line-height:1.65;color:rgba(26,19,13,0.72);max-width:620px;margin:0 auto 32px;text-align:center}
.lam-actie-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:36px 0;text-align:left}
.lam-actie-feature{background:var(--cream,#f5efe6);border-radius:14px;padding:28px 26px;border:1px solid rgba(60,40,20,0.05)}
.lam-actie-feature-icon{width:42px;height:42px;border-radius:10px;background:#ee7422;color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.lam-actie-feature-icon svg{width:22px;height:22px}
.lam-actie-feature h3{font-family:var(--font-display,inherit);font-weight:500;font-size:1.2rem;margin:0 0 8px;color:#1a130d}
.lam-actie-feature p{font-size:.92rem;line-height:1.55;color:rgba(26,19,13,0.72);margin:0}
.lam-actie-steps{list-style:none;counter-reset:step;padding:0;margin:24px auto 0;max-width:620px;text-align:left}
.lam-actie-steps li{counter-increment:step;padding:18px 0 18px 56px;position:relative;border-bottom:1px solid rgba(60,40,20,0.08);font-size:1rem;line-height:1.55;color:#2a1f17}
.lam-actie-steps li:last-child{border-bottom:none}
.lam-actie-steps li::before{content:counter(step);position:absolute;left:0;top:18px;width:36px;height:36px;border-radius:50%;background:#ee7422;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.95rem;font-family:var(--font-label,inherit)}
.lam-actie-steps strong{color:#1a130d}
.lam-actie-fineprint{margin-top:48px;padding:20px 24px;background:rgba(238,116,34,0.06);border-left:3px solid #ee7422;border-radius:8px;text-align:left}
.lam-actie-fineprint p{font-size:.88rem;line-height:1.6;color:rgba(26,19,13,0.7);margin:0}
.lam-actie-cta-band{padding:64px 0;background:linear-gradient(135deg,#1f140c 0%,#332215 100%);color:#fff;text-align:center}
.lam-actie-cta-band h2{font-family:var(--font-display,inherit);font-weight:500;font-size:2rem;color:#fff;margin:0 0 10px}
.lam-actie-cta-band p{font-size:1rem;color:rgba(255,255,255,0.78);margin:0 0 26px}
@media(max-width:900px){
.lam-actie-hero{padding:60px 0 50px}
.lam-actie-hero-grid{grid-template-columns:1fr;gap:36px}
.lam-actie-hero h1{font-size:2.2rem}
.lam-actie-price{font-size:3rem}
.lam-actie-features{grid-template-columns:1fr}
.lam-actie-body h2{font-size:1.7rem}
}
/* Logo niet tegen linker rand */
.header .container,
.header-inner{padding-left:18px;padding-right:18px}
@media(max-width:980px){
.header .container,
.header-inner{padding-left:16px;padding-right:14px}
/* Process-sec: 4 stappen niet meer afgesneden */
@media(max-width:980px){
.process-sec .process-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:560px){
.process-sec .process-grid{grid-template-columns:1fr}
}
/* Trust-strip: USP cellen wrappen netjes */
@media(max-width:980px){
.trust-strip .container{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
overflow:visible
}
.trust-cell{flex:none}
}
@media(max-width:560px){
.trust-strip .container{grid-template-columns:1fr;gap:10px}
}
/* Foot-usp-bar onderaan: niet horizontaal scrollen, mooi wrappen */
@media(max-width:980px){
.foot-usp-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:14px !important
}
}
@media(max-width:560px){
.foot-usp-grid{grid-template-columns:1fr !important}
}
/* Contact hero: padding zodat tekst niet tegen rand */
.contact-hero,
.page-header{padding-left:18px;padding-right:18px}
@media(max-width:560px){
.contact-hero h1,
.page-header h1{font-size:1.6rem}
}
/* Actie.php deal-cards: 4 knoppen niet meer afgesneden */
@media(max-width:980px){
.deal-grid,
.actie-deals{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
}
@media(max-width:640px){
.deal-grid,
.actie-deals{grid-template-columns:1fr !important}
.deal-card,.actie-deal{padding:24px !important}
}
/* Algemene safety: voorkomen horizontaal scrollen */
html,body{overflow-x:hidden}
.container,.container-narrow{padding-left:18px;padding-right:18px;box-sizing:border-box}
/* MOBILE NAV POLISH v1 — alleen mobiel */
@media(max-width:960px){
.nav{width:88% !important;max-width:380px !important;padding:88px 28px 28px !important;gap:2px !important}
.nav > a,.nav-dd > a{padding:16px 4px !important;font-size:1.05rem !important;border-bottom:1px solid rgba(0,0,0,0.06) !important;color:#1a130d !important}
.nav > a.active{color:#ee7422 !important;font-weight:600 !important}
.nav-dd > a{justify-content:space-between !important}
.nav-dd-menu{display:block !important;padding:4px 0 8px 16px !important;background:rgba(238,116,34,0.04) !important;margin:0 0 4px !important;border-radius:8px !important}
.nav-dd-menu a{padding:10px 12px !important;font-size:.9rem !important;color:#1a130d !important;display:flex !important;flex-direction:column !important;border:none !important}
.nav-dd-menu a strong{font-size:.92rem;font-weight:600}
.nav-dd-menu a small{font-size:.78rem;color:rgba(26,19,13,0.6);margin-top:2px}
.nav{z-index:65 !important}
.header-actions{display:none}
}
/* MOBILE NAV TOGGLE BUTTON v1 */
.mobile-nav-toggle{
display:none;background:transparent;border:none;width:42px;height:42px;
flex-direction:column;justify-content:center;align-items:center;gap:5px;
cursor:pointer;padding:0;margin-left:auto;position:relative;z-index:200;
}
.mobile-nav-toggle span{
display:block;width:24px;height:2px;background:#1a130d;
border-radius:2px;transition:all .3s ease;
}
body.menu-open .mobile-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .mobile-nav-toggle span:nth-child(2){opacity:0}
body.menu-open .mobile-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){
.mobile-nav-toggle{display:flex}
}
/* MOBILE NAV POLISH v2 */
@media(max-width:960px){
.nav{text-align:left !important}
.nav > a,.nav-dd > a{justify-content:flex-start !important;text-align:left !important}
.nav-dd-menu{display:block !important}
.nav-dd-menu a{padding:12px 14px !important;border-radius:8px !important}
}
/* MOBILE NAV ORDERED v1 — alles netjes onder elkaar */
@media(max-width:960px){
.nav{text-align:left !important;align-items:stretch !important}
.nav > a,.nav-dd > a{
justify-content:flex-start !important;
text-align:left !important;
padding:18px 4px !important;
width:100% !important;
display:flex !important;
align-items:center !important;
color:#1a130d !important;
border-bottom:1px solid rgba(0,0,0,0.08) !important;
font-size:1.1rem !important;
font-weight:500 !important;
background:transparent !important;
}
.nav .nav-dd{display:block !important;width:100% !important;position:static !important}
.nav .nav-dd-menu{
position:static !important;
display:block !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
background:rgba(238,116,34,0.04) !important;
box-shadow:none !important;
border:none !important;
border-radius:0 !important;
padding:4px 0 8px 16px !important;
margin:0 !important;
width:100% !important;
min-width:0 !important;
}
.nav .nav-dd-menu a{
display:flex !important;
flex-direction:column !important;
padding:10px 12px !important;
border:none !important;
background:transparent !important;
font-size:.92rem !important;
color:#1a130d !important;
}
.nav .nav-dd-menu a strong{font-size:.92rem;font-weight:600}
.nav .nav-dd-menu a small{font-size:.78rem;color:rgba(26,19,13,0.6);margin-top:2px}
.nav-dd-menu::before{display:none !important}
}
/* MOBILE GRIDS v2 */
@media(max-width:960px){
.process-sec .process-grid{grid-template-columns:repeat(2,1fr) !important;gap:18px !important}
.trust-strip .container{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
.trust-cell{flex:none !important}
.foot-usp-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
.deal-grid,.actie-deals{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
}
@media(max-width:560px){
.process-sec .process-grid{grid-template-columns:1fr !important}
.trust-strip .container{grid-template-columns:1fr !important;gap:10px !important}
.foot-usp-grid{grid-template-columns:1fr !important}
.deal-grid,.actie-deals{grid-template-columns:1fr !important}
}
html,body{overflow-x:hidden}
/* HIDE HEADER ACTIONS ON MOBILE — knoppen zitten in burger menu */
@media(max-width:960px){
.header-actions{display:none !important}
}
/* MOBILE HEADER PADDING — logo + burger niet meer tegen randen */
@media(max-width:960px){
.header .container,
.header-inner{padding-left:18px !important;padding-right:18px !important}
}
}
/* LAMINAAT ACTIE POPUP v1 */
.lk-popup{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px}
.lk-popup.is-open{display:flex}
.lk-popup-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:lkFadeIn .25s ease}
.lk-popup-card{position:relative;background:linear-gradient(135deg,#1f140c 0%,#332215 100%);color:#fff;border-radius:20px;padding:44px 36px 36px;max-width:440px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,0.5);animation:lkPopIn .35s cubic-bezier(.16,1,.3,1);max-height:90vh;overflow-y:auto}
.lk-popup-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,0.1);border:none;width:36px;height:36px;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;z-index:2}
.lk-popup-close:hover{background:rgba(255,255,255,0.2)}
.lk-popup-badge{display:inline-flex;align-items:center;padding:5px 12px;background:#ee7422;border-radius:50px;font-family:var(--font-label,inherit);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:600;margin-bottom:14px}
.lk-popup-title{font-family:var(--font-display,inherit);font-weight:500;font-size:1.85rem;line-height:1.12;color:#fff;margin:0 0 8px}
.lk-popup-title em{font-style:italic;font-weight:400;color:#f29554;display:block;margin-top:2px}
.lk-popup-was{font-size:.9rem;color:rgba(255,255,255,0.62);margin:0 0 16px}
.lk-popup-was span{text-decoration:line-through}
.lk-popup-lead{font-size:.96rem;line-height:1.55;color:rgba(255,255,255,0.85);margin:0 0 18px}
.lk-popup-checks{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
.lk-popup-checks li{display:flex;align-items:center;gap:10px;font-size:.94rem;color:rgba(255,255,255,0.92)}
.lk-popup-checks li span{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#ee7422;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem}
.lk-popup-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;background:#ee7422;color:#fff;border-radius:50px;font-weight:600;font-size:1rem;text-decoration:none;box-shadow:0 6px 18px rgba(238,116,34,0.4);transition:transform .2s ease,background .2s ease;width:100%;box-sizing:border-box}
.lk-popup-cta:hover{background:#d96718;transform:translateY(-2px)}
.lk-popup-fineprint{font-size:.78rem;color:rgba(255,255,255,0.52);margin:14px 0 0;text-align:center}
body.lk-popup-lock{overflow:hidden}
@keyframes lkFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lkPopIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){
.lk-popup{padding:16px;align-items:flex-end}
.lk-popup-card{padding:36px 24px 24px;border-radius:18px 18px 14px 14px;max-height:88vh}
.lk-popup-title{font-size:1.5rem}
.lk-popup-checks li{font-size:.9rem}
.lk-popup-cta{padding:14px 20px;font-size:.95rem}
}