/* DutchteQ v12 — wide layout, search, responsive header, consistent PDP */
:root{--dq-max:1440px}
.container{max-width:var(--dq-max)!important;width:100%;margin-inline:auto;padding-inline:32px}
.site-header .container{max-width:var(--dq-max)!important}
.site-header .header-cta{margin-left:auto!important;flex:0 0 auto}
.site-header .nav{margin-right:0}
.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:72px}
.hero-panel{aspect-ratio:1.45/1!important;background:#fff!important}
.dq-fixed-hero-product{padding:34px 48px!important}
.dq-fixed-hero-product img,.hero-product-image{width:100%!important;height:600px!important;max-width:100%!important;object-fit:contain!important}
.pdp-info .pdp-sub{margin-bottom:8px!important}
.pdp-info .meta-row{margin-top:0!important;margin-bottom:18px!important;padding:0!important;border:0!important}
.tech-spec-columns{gap:28px!important}
.tech-spec-columns .spec-table tr:nth-child(odd){background:#eef0f2!important}
.tech-spec-columns .spec-table tr:nth-child(even){background:#fff!important}
.tech-spec-columns .spec-table th,.tech-spec-columns .spec-table td{border:0!important}
.dq-search-btn{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--navy);flex:0 0 auto}
.dq-search-btn:hover{border-color:var(--orange);color:var(--orange)}
.dq-search{position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
.dq-search.open{opacity:1;visibility:visible}
.dq-search-inner{width:min(1080px,calc(100% - 40px));margin:0 auto;padding-top:clamp(72px,12vh,150px)}
.dq-search-top{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:12px}
.dq-search-input{border:0;outline:0;background:transparent;font:700 clamp(1.55rem,4vw,3rem)/1.15 inherit;color:var(--navy);width:100%}
.dq-search-close{width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:24px;cursor:pointer}
.dq-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-height:58vh;overflow:auto}
.dq-result{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.18s}
.dq-result:hover{border-color:var(--orange);transform:translateY(-2px)}
.dq-result b{display:block;color:var(--navy);font-size:1.05rem}.dq-result span{display:block;color:var(--muted);font-size:1rem;margin-top:4px}
.dq-search-empty{grid-column:1/-1;padding:30px 0;color:var(--muted)}
/* true drill-down menu */
.oc-view{position:absolute;inset:76px 26px 120px;transition:transform .32s cubic-bezier(.2,.8,.25,1),opacity .25s;overflow:auto}
.oc-view.is-left{transform:translateX(-112%);opacity:0;pointer-events:none}.oc-view.is-right{transform:translateX(112%);opacity:0;pointer-events:none}
.oc-drill{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:15px 4px;font:600 1.05rem inherit;color:var(--ink);display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}
.oc-back{border:0;background:transparent;color:var(--orange);font-weight:700;padding:8px 0 14px;cursor:pointer}
.oc-panel{overflow:hidden}
.dq-linkedin{display:inline-flex!important;align-items:center;gap:8px}.dq-linkedin svg{width:18px;height:18px;fill:currentColor}
@media(max-width:1160px){
.container{padding-inline:26px}.nav{gap:20px!important}.site-header .container{gap:22px!important}
.hero-grid{grid-template-columns:1fr 1fr;gap:38px}.hero-panel{aspect-ratio:1.25/1!important}
.nav{display:none!important}.menu-btn{display:flex!important}.dq-search-btn{margin-left:auto}.header-cta{margin-left:0!important}
}
@media(max-width:900px){
.hero-grid,.split,.pdp-top{grid-template-columns:1fr!important}.hero-grid{gap:28px}.hero-panel{aspect-ratio:16/10!important}
.dq-fixed-hero-product{padding:26px!important}.dq-search-results{grid-template-columns:1fr}
}
@media(max-width:760px){
.container{padding-inline:20px}.header-cta{display:none!important}.site-header .container{height:66px!important}
.logo img{height:31px!important}.dq-search-btn{width:40px;height:40px}
.tech-spec-columns{grid-template-columns:1fr!important;gap:0!important}
.tech-spec-columns .spec-table:nth-child(2) tr:nth-child(odd){background:#eef0f2!important}
.tech-spec-columns .spec-table:nth-child(2) tr:nth-child(even){background:#fff!important}
}
@media(max-width:480px){.container{padding-inline:16px}.hero{padding-top:32px!important}.dq-search-inner{width:calc(100% - 28px)}}
/* V13 hover cleanup: no orange wash/spot/overlay on cards; underline motion only */
.product-card,.category-card,.product-item,.product-card a{background-color:#fff!important}
.product-card::before,.product-card::after,.category-card::before,.category-card::after,
.product-item::before,.product-item::after{background:transparent!important;box-shadow:none!important}
.product-card:hover,.category-card:hover,.product-item:hover{background:#fff!important}
.product-card:hover .product-image,.category-card:hover .product-image,.product-item:hover .product-image{background:#fff!important}
.product-card .card-link,.category-card .card-link,.product-item .card-link,
.product-card .product-link,.category-card .product-link,.product-item .product-link{
position:relative;background:transparent!important
}
.product-card .card-link::after,.category-card .card-link::after,.product-item .card-link::after,
.product-card .product-link::after,.category-card .product-link::after,.product-item .product-link::after{
content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--orange,#f5661d);
transform:scaleX(0);transform-origin:left;transition:transform .24s ease
}
.product-card:hover .card-link::after,.category-card:hover .card-link::after,.product-item:hover .card-link::after,
.product-card:hover .product-link::after,.category-card:hover .product-link::after,.product-item:hover .product-link::after{transform:scaleX(1)}
/* V16 acceptance fixes */
.site-header .container{position:relative!important;display:grid!important;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)!important;gap:24px!important}
.site-header .logo{justify-self:start!important}
.site-header .nav{justify-self:center!important;margin:0!important}
.site-header .header-cta{justify-self:end!important;margin:0!important}
.site-header .dq-search-btn{position:absolute!important;left:calc(50% + 235px);top:50%;transform:translateY(-50%);z-index:2}
.dq-fixed-hero-product{padding:46px 70px!important}
.dq-fixed-hero-product img,.hero-product-image{width:100%!important;height:600px!important;max-width:100%!important;object-fit:contain!important;object-position:center center!important;transform:none!important}
/* remove orange spotlight/wash from every content card */
.card::before,.card::after,.card:hover::before,.card:hover::after,
.product-card::before,.product-card::after,.category-card::before,.category-card::after,
.card .img-panel::before,.card .img-panel::after{display:none!important;content:none!important;background:none!important;opacity:0!important}
.card:hover,.product-card:hover,.category-card:hover{background:#fff!important;background-image:none!important}
.card:hover .img-panel,.card:hover .img-panel img{background:#fff!important;transform:none!important}
@media(max-width:1160px){
.site-header .container{display:flex!important}.site-header .dq-search-btn{position:static!important;transform:none!important;margin-left:auto!important}
.dq-fixed-hero-product{padding:30px!important}.dq-fixed-hero-product img,.hero-product-image{height:480px!important}
}
@media(max-width:760px){.dq-fixed-hero-product img,.hero-product-image{height:330px!important}}
.dq-fixed-hero-product img,.hero-product-image{width:100%!important;height:600px!important;max-width:100%!important;object-fit:contain!important}
\n/* Nexora V50.2 — consolidated frontend/mobile fixes */
.dq-fixed-hero-product img,.hero-product-image{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:600px!important;object-fit:contain!important;object-position:center!important;transform:none!important}
.dq-fixed-hero-product,.dq-fixed-hero-product .img-panel{display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;overflow:hidden!important}
.dq-fixed-hero-product .img-panel{height:min(600px,52vw)!important;max-height:600px!important;width:100%!important}
.product-card::before,.product-card::after,.category-card::before,.category-card::after,.product-item::before,.product-item::after{content:none!important;background:none!important;opacity:0!important;box-shadow:none!important}
.product-card:hover,.category-card:hover,.product-item:hover{background:#fff!important;background-image:none!important}
.offcanvas .oc-panel{width:min(380px,88vw)!important;height:100vh!important;height:100dvh!important;max-height:100vh!important;max-height:100dvh!important;padding:20px 24px max(22px,env(safe-area-inset-bottom))!important;overflow:hidden!important}
.offcanvas .oc-head{min-height:52px!important;margin:0 0 12px!important;padding:0!important}.offcanvas .oc-head img{height:30px!important;max-width:150px!important;object-fit:contain!important}.offcanvas .oc-close{width:44px!important;height:44px!important;flex:0 0 44px!important}
.offcanvas .oc-nav{position:relative!important;display:block!important;flex:1 1 auto!important;min-height:0!important;margin:0!important}.offcanvas .oc-view{inset:0!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:#c7d0d8 transparent!important}
.offcanvas .oc-view>a,.offcanvas .oc-drill,.offcanvas .oc-back{width:100%!important;min-height:52px!important;padding:14px 4px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important;color:var(--ink)!important;text-align:left!important;font:600 1rem/1.3 inherit!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.offcanvas .oc-cta{position:relative!important;z-index:5!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:48px!important;margin:18px 0 0!important}
.offcanvas .oc-contact{position:relative!important;z-index:5!important;margin-top:auto!important;padding:20px 0 0!important;gap:8px!important}.offcanvas .oc-contact a:not(.lang-switch){min-height:24px!important;display:flex!important;align-items:center!important}
body.locked .fab-theme,body.locked .dq-ai-fab,body.locked [class*="ask-dutchteq"],body.locked [class*="chat-fab"]{opacity:0!important;pointer-events:none!important}
@media(max-width:760px){html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}body{margin:0!important;padding-left:0!important;padding-right:0!important}.container{width:100%!important;max-width:100%!important;padding-left:20px!important;padding-right:20px!important}.site-header{width:100%!important;margin:0!important}.site-header .container{min-height:68px!important;padding-left:20px!important;padding-right:20px!important;display:flex!important;align-items:center!important;gap:10px!important}.site-header .logo{margin-right:auto!important}.site-header .logo img{max-width:145px!important;height:auto!important}.site-header .dq-search-btn,.site-header .menu-btn{width:44px!important;height:44px!important;flex:0 0 44px!important}.dq-fixed-hero-product{padding:20px!important}.dq-fixed-hero-product .img-panel{height:auto!important;min-height:280px!important;max-height:420px!important}.dq-fixed-hero-product img,.hero-product-image{height:auto!important;max-height:420px!important}.site-footer{width:100%!important;margin:0!important}.site-footer .container{padding-left:20px!important;padding-right:20px!important}.footer-top{grid-template-columns:1fr!important;gap:28px!important}.fab-theme{left:20px!important;bottom:max(20px,env(safe-area-inset-bottom))!important}.offcanvas .oc-panel{width:min(88vw,380px)!important}}
@media(max-width:390px){.container,.site-header .container,.site-footer .container{padding-left:16px!important;padding-right:16px!important}.offcanvas .oc-panel{width:92vw!important;padding-left:20px!important;padding-right:20px!important}}
/* ===== DQ_DESIGN_2026 ===== */
/* Maatvoering niet meer over de productafbeelding. De markup blijft staan,
dus dit is terug te draaien door deze regel te verwijderen. */
.dim,.dim-v,.dim-h{display:none!important}
/* Voorraadmelding uit. */
.stock{display:none!important}
/* zonder de voorraadmelding mag de metaregel niet met een gat beginnen */
.meta-row{gap:14px}
.meta-row:empty{display:none}
/* De header-container kreeg in een eerdere overridelaag display:grid met drie
kolommen (logo | menu | knop). De pagina heeft echter VIER kinderen, want er
is ook een taalwissel. Het vierde kind viel daardoor naar een tweede rij en
de offerteknop kwam onder het menu te hangen. Terug naar een flexrij die
elk aantal kinderen aankan. */
.site-header .container{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:20px!important;
grid-template-columns:none!important;
grid-template-areas:none!important;
}
.site-header .logo{flex:0 0 auto;margin:0!important}
.site-header .nav{margin-left:auto!important;margin-right:auto!important;flex:0 1 auto;min-width:0}
.site-header .lang-switch{flex:0 0 auto;order:8;margin:0!important}
.site-header .header-cta{flex:0 0 auto;order:9;margin:0!important;justify-self:auto!important}
@media(max-width:1024px){
.site-header .nav{display:none}
.site-header .header-cta{margin-left:auto!important}
}
/* Tikdoelen op smalle schermen. Gemeten: kruimelpadlinks 16px, tekstlinks 18px,
contactlinks in het menu 24px hoog. Richtlijn is 40px; onder ~36px wordt
mistikken de regel in plaats van de uitzondering. */
@media(max-width:820px){
.breadcrumb a,.breadcrumb span{min-height:36px;display:inline-flex;align-items:center}
.textlink,.textlink-orange{min-height:38px;display:inline-flex;align-items:center}
.info-list .info-item a{min-height:38px;display:inline-flex;align-items:center}
/* specificiteit moet minstens gelijk zijn aan .offcanvas .oc-contact a hierboven */
.offcanvas .oc-contact a:not(.lang-switch),#offcanvas .oc-contact a:not(.lang-switch){min-height:40px!important;display:flex!important;align-items:center}
.site-footer a,.footer-bottom nav a{min-height:38px!important;display:inline-flex!important;align-items:center}
}
@media(max-width:820px){
.stage-tools button,.dim-toggle{min-height:40px!important}
}
/* ===== DQ_DESIGN_2026_B - ontwerpwijzigingen op verzoek ===== */
/* Productpagina: regel "Doorgaans leverbaar uit voorraad." weg */
.pdp-note{display:none!important}
/* Productpagina: het USP-blok naast de specificaties weg */
.highlight-card{display:none!important}
/* Technische gegevens over twee kolommen. De tabel wordt daarvoor als blok
met kolomopmaak getoond; elke rij blijft als geheel bij elkaar. */
.spec-grid{grid-template-columns:1fr!important;gap:0!important}
.spec-table{display:block!important;column-count:2;column-gap:56px}
.spec-table tbody{display:block}
.spec-table tr{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
break-inside:avoid;page-break-inside:avoid;border-bottom:1px solid var(--line,#E4E8EE)}
.spec-table th,.spec-table td{border-bottom:0!important;padding:13px 0!important}
.spec-table th{width:auto!important;flex:1 1 auto;text-align:left}
.spec-table td{flex:0 0 auto;text-align:right}
@media(max-width:760px){.spec-table{column-count:1}}
/* Afbeeldingen: geen hoeklijnen en een witte achtergrond in plaats van grijs */
.img-panel{background:#fff!important}
.img-panel::before,.img-panel::after{content:none!important;display:none!important}
/* Homepage: het hele 3D-assortimentblok weg */
section:has(#carousel3d){display:none!important}
/* Footer: aanmelding voor de nieuwsbrief weg */
.footer-news{display:none!important}
/* Offerteformulier: het aantal-veld weg */
.field:has(#p-aantal),.field:has(.stepper){display:none!important}
/* Hero-afbeelding op de homepage: nooit hoger dan 600px, zonder vervorming */
.hero-panel{aspect-ratio:auto!important;background:#fff!important;padding:0!important}
.hero-panel .hero-render{width:100%!important;height:auto!important;max-height:600px!important;
object-fit:contain!important;object-position:center!important;display:block;margin:0 auto}
@media(max-width:760px){.hero-panel .hero-render{max-height:420px!important}}
/* Productkaarten op de categoriepagina's: specificaties onder elkaar in
afwisselend witte en grijze regels, in plaats van losse badges. */
.spec-mini{display:block!important;flex-wrap:initial!important;gap:0!important;margin-top:12px!important;
border:1px solid var(--line,#E4E8EE);border-radius:10px;overflow:hidden}
.spec-mini span{display:block!important;background:#fff!important;border:0!important;border-radius:0!important;
padding:11px 14px!important;font-size:1rem!important;color:var(--text,#46586F);
border-bottom:1px solid var(--line,#E4E8EE)!important}
.spec-mini span:nth-child(odd){background:#F6F7F9!important}
.spec-mini span:last-child{border-bottom:0!important}
/* Taalwissel pas tonen zodra de Engelse site live gaat. De Engelse pagina's
bestaan wel maar staan op concept (noindex + 404 via .htaccess), dus een
zichtbare EN-knop zou naar een foutpagina leiden.
Weer aanzetten: deze regel verwijderen. */
.lang-switch,.site-header .lang-switch,.oc-panel .lang-switch{display:none!important}
/* Download-datasheet knop uit: de ene wees naar "#", de andere naar een PDF
op de oude WordPress-site. Weer aanzetten: deze regel verwijderen en de
aria-hidden/tabindex uit de knoppen halen. */
.dq-datasheet{display:none!important}
/* Miniaturenstrook alleen tonen als er echt meerdere afbeeldingen zijn.
Zowel via :has() als via het data-count attribuut, zodat het ook klopt
wanneer de Studio de pagina opnieuw opbouwt. */
.thumbs:not(:has(> *:nth-child(2))){display:none!important}
.thumbs[data-dq-thumbs="0"],.thumbs[data-dq-thumbs="1"]{display:none!important}
/* LinkedIn en andere sociale links: icoon naast de tekst */
.social-link{display:inline-flex;align-items:center;gap:8px}
.social-link .ico-li{flex:0 0 auto;color:#0A66C2}
.social-link:hover .ico-li{color:#F26F1F}
.site-footer .social-link .ico-li{color:#DBE5ED}
.site-footer .social-link:hover .ico-li{color:#F26F1F}
/* Bedankpagina */
.dq-bedankt-kaart{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;margin-bottom:28px;
background:#F4FBF7;border:1px solid #CFE8DA;border-radius:14px}
.dq-bedankt-vink{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#1D7A46;color:#fff;
display:grid;place-items:center}
.dq-bedankt-kaart p{margin:0;font-size:1.02rem;line-height:1.6;color:#1b4b32}
.dq-bedankt-details{display:grid;gap:6px;margin:14px 0 0}
.dq-bedankt-details>div{display:flex;gap:10px;font-size:1rem}
.dq-bedankt-details dt{font-weight:700;color:#1b4b32;min-width:92px;margin:0}
.dq-bedankt-details dd{margin:0;color:#3d6b52;font-family:ui-monospace,Menlo,Consolas,monospace}
.dq-bedankt-acties{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
@media(max-width:560px){
.dq-bedankt-kaart{flex-direction:column;gap:12px;padding:18px}
.dq-bedankt-acties .btn{flex:1 1 100%;justify-content:center}
}
/* Melding onder een formulier wanneer verzenden niet lukt */
.dq-form-melding{margin:14px 0 0;padding:11px 14px;border-radius:10px;font-size:1rem;line-height:1.5}
.dq-form-melding.fout{background:#FFF6F6;border:1px solid #F3CDCD;color:#B4342C}
/* Visie en missie op Over ons */
.dq-vm-kaart{padding:28px 30px}
.dq-vm-kaart h2{font-size:1.25rem;margin:0 0 10px}
.dq-vm-kaart p{margin:0}
@media (max-width:760px){.dq-vm{grid-template-columns:1fr}}
/* ---- Productafbeelding vergroot bekijken ---- */
.dq-zoombaar{cursor:zoom-in}
.dq-zoombaar:focus-visible{outline:2px solid #F26F1F;outline-offset:3px}
/* subtiele hint dat je kunt klikken */
.dq-zoombaar::after{content:"";position:absolute;right:14px;bottom:14px;width:34px;height:34px;
border-radius:50%;background:rgba(21,44,71,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152C47' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
opacity:0;transition:opacity .2s;pointer-events:none}
.dq-zoombaar:hover::after,.dq-zoombaar:focus-visible::after{opacity:1}
html.dq-viewer-actief{overflow:hidden}
.dq-viewer{position:fixed;inset:0;z-index:2147483000;display:none;
align-items:center;justify-content:center;gap:12px;padding:24px;
background:rgba(14,33,56,.92);backdrop-filter:blur(4px)}
.dq-viewer.open{display:flex}
.dq-viewer-fig{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;
flex-direction:column;align-items:center;gap:12px}
.dq-viewer-fig img{max-width:100%;max-height:78vh;object-fit:contain;
background:#fff;border-radius:12px;padding:16px}
.dq-viewer-tel{color:#DBE5ED;font-size:1rem;font-variant-numeric:tabular-nums}
.dq-viewer button{flex:0 0 auto;border:0;background:rgba(255,255,255,.12);color:#fff;
width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:background .15s}
.dq-viewer button:hover{background:rgba(255,255,255,.24)}
.dq-viewer button:focus-visible{outline:2px solid #F26F1F;outline-offset:2px}
.dq-viewer-sluit{position:absolute;top:18px;right:18px;font-size:30px}
@media(max-width:620px){
.dq-viewer{padding:12px;gap:6px}
.dq-viewer button{width:40px;height:40px;font-size:22px}
.dq-viewer-fig img{max-height:66vh;padding:10px}
}
@media(prefers-reduced-motion:reduce){.dq-zoombaar::after{transition:none}}
/* Hero-afbeelding: de pagina bestaat in twee varianten.
*
* 1. het HTML-bestand -> ![]()
los in het paneel
* 2. het CMS/de studio -> ![]()
*
* Variant 2 zet die link op position:absolute;inset:0. Zolang .hero-panel nog
* een aspect-ratio had gaf dat geen probleem, maar hierboven is die op "auto"
* gezet. Het paneel had toen geen enkel kind meer in de normale flow en kreeg
* dus hoogte 0; in combinatie met overflow:hidden verdween de hero-afbeelding
* volledig. Daarom halen we de link uit de absolute positionering, zodat hij
* het paneel weer hoogte geeft. Beide varianten zien er nu hetzelfde uit.
*/
.hero-panel .dq-fixed-hero-product{position:static!important;inset:auto!important;
display:flex!important;align-items:center;justify-content:center;
width:100%;padding:0!important}
.hero-panel .dq-fixed-hero-product img{width:100%!important;height:auto!important;
max-height:600px!important;object-fit:contain!important;object-position:center!important;
display:block;margin:0 auto;transform:none!important}
@media(max-width:760px){.hero-panel .dq-fixed-hero-product img{max-height:420px!important}}
/* Galerijen uit de Studio () gebruiken dezelfde vergroting
* als de productpagina's. De zoom-hint van .dq-zoombaar staat absoluut, dus
* de link moet zelf een positioneringscontext zijn. */
a[data-lightbox]{position:relative;display:block;text-decoration:none;color:inherit}
a[data-lightbox] figure{margin:0}
/* .dq-viewer button staat op display:grid; zonder deze regel negeert dat het
* hidden-attribuut waarmee we de bladerknoppen bij één afbeelding wegnemen. */
.dq-viewer button[hidden]{display:none!important}
/* Nexora recovery 2026-09-29: consistent product/card media alignment */
.card > .img-panel{height:360px!important;aspect-ratio:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:#fff!important}
.card > .img-panel picture{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.card > .img-panel img{width:auto!important;height:auto!important;max-width:92%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;margin:auto!important;display:block!important}
@media(max-width:760px){.card > .img-panel{height:280px!important;padding:12px!important}}
/* ===== Nexora V50.5 — Studio/frontend parity + product image alignment ===== */
/* Raw Studio blocks wrap existing page HTML. When spacing is explicitly set in
Studio, the wrapper owns that spacing; legacy .section padding must not add a
second 96/64/56px layer inside it. */
.dq-blokstijl > .section{padding:0!important;margin:0!important}
.dq-blokstijl > .section > .container{max-width:100%;}
/* Existing V50.4 recovery rules already provide the fixed card media stage.
Keep picture elements centered as well, so responsive sources behave identically. */
.card .img-panel picture,
.product-card .img-panel picture,
.category-card .img-panel picture{
width:100%!important;height:100%!important;display:flex!important;
align-items:center!important;justify-content:center!important;
}
/* EWF source renders carry materially different internal whitespace. Keep both
variants on the same optical scale in overview cards without touching PDPs. */
.card .img-panel img[src*="EWF.png"],
.card .img-panel img[src*="EWF-400"],
.card .img-panel img[src*="EWF-800"],
.card .img-panel img[src*="EWF-1200"],
.card .img-panel img[src*="EWF-1600"]{transform:scale(.90)!important}
.card .img-panel img[src*="EWF-HD"]{transform:scale(.94)!important}
/* V65.1 — één producttemplate, herohoogte bepaald door contentkolom */
body[data-product-template="product-default-v65"] .pdp-top{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:var(--dq-hero-gap,48px);align-items:stretch;padding-top:var(--dq-hero-pt,40px);padding-bottom:var(--dq-hero-pb,40px);background:var(--dq-hero-bg,#fff);color:var(--dq-hero-text,#0E2A47)}
body[data-product-template="product-default-v65"] .pdp-top>div:first-child{position:relative;min-width:0;align-self:stretch}
/* Het beeld mag de rijhoogte niet bepalen. De tekstkolom bepaalt de herohoogte;
het beeld vult die hoogte automatisch en staat met de onderkant op CTA-niveau. */
body[data-product-template="product-default-v65"] .pdp-main.img-panel{height:100%;min-height:340px;aspect-ratio:auto!important;border-radius:0!important;background:#fff;position:relative;display:block;overflow:hidden}
body[data-product-template="product-default-v65"] .pdp-main.img-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:center bottom!important;display:block;transform:scale(var(--dq-hero-img-scale,1));transform-origin:center bottom}
body[data-product-template="product-default-v65"] .pdp-info{align-self:stretch;display:flex;flex-direction:column;min-width:0}
body[data-product-template="product-default-v65"] .pdp-info .pdp-actions{margin-top:auto;margin-bottom:0}
body[data-product-template="product-default-v65"] .thumbs{position:absolute;left:0;top:calc(100% + 20px);width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
body[data-product-template="product-default-v65"] .thumbs .img-panel{height:132px;aspect-ratio:auto!important;padding:20px!important;background:#fff!important;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
body[data-product-template="product-default-v65"] .thumbs .img-panel img{width:100%;height:100%;object-fit:contain;object-position:center}
body[data-product-template="product-default-v65"] .pdp-top:has(.thumbs[data-dq-thumbs]:not([data-dq-thumbs="0"]):not([data-dq-thumbs="1"])){margin-bottom:164px}
body[data-product-template="product-default-v65"] .meta-row .meta:empty{display:none}
body[data-product-template="product-default-v65"] .checks .dq-list-icon{width:18px;height:18px;border-radius:50%;background:rgba(242,111,31,.12);background:color-mix(in srgb,currentColor 12%,transparent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex:0 0 18px}
body[data-product-template="product-default-v65"] .section-alt{background:var(--bg)!important}
body[data-product-template="product-default-v65"] #offerte{background:#fff!important}
@media(max-width:900px){body[data-product-template="product-default-v65"] .pdp-top{grid-template-columns:1fr;gap:32px;padding-top:32px}body[data-product-template="product-default-v65"] .pdp-top>div:first-child{align-self:auto}body[data-product-template="product-default-v65"] .pdp-main.img-panel{height:min(72vw,520px);min-height:320px}body[data-product-template="product-default-v65"] .pdp-main.img-panel>img{position:absolute}body[data-product-template="product-default-v65"] .thumbs{position:static;margin-top:20px}body[data-product-template="product-default-v65"] .pdp-top:has(.thumbs[data-dq-thumbs]:not([data-dq-thumbs="0"]):not([data-dq-thumbs="1"])){margin-bottom:0}body[data-product-template="product-default-v65"] .pdp-info .pdp-actions{margin-top:24px}}
/* V65.2 – instelbare, gebalanceerde grids (1 t/m 5 kolommen) */
/* V76 - GEEN column-gap op dit raster. Zestig sporen met 24px ertussen
eisen 59x24 = 1416px, ongeacht de container; op /producten/ vielen
daardoor 2 a 3 kaarten buiten beeld, onzichtbaar afgeknipt door
body{overflow-x:hidden}. Gemeten op live, 15 okt.
De ruimte zit nu TUSSEN DE KAARTEN (binnenmarge op de kinderen) met
een negatieve marge op het raster, zodat de buitenranden uitlijnen. */
.dq-balanced-grid{--dq-grid-cols:2;--dq-grid-gap:24px;display:grid;grid-template-columns:repeat(60,minmax(0,1fr));column-gap:0;row-gap:var(--dq-grid-gap);align-items:stretch;margin-inline:calc(var(--dq-grid-gap) / -2)}
.dq-balanced-grid>*{grid-column:span calc(60 / var(--dq-grid-cols));min-width:0;margin-inline:calc(var(--dq-grid-gap) / 2)}
.dq-balanced-grid[data-grid-columns="1"]{--dq-grid-cols:1}
.dq-balanced-grid[data-grid-columns="2"]{--dq-grid-cols:2}
.dq-balanced-grid[data-grid-columns="3"]{--dq-grid-cols:3}
.dq-balanced-grid[data-grid-columns="4"]{--dq-grid-cols:4}
.dq-balanced-grid[data-grid-columns="5"]{--dq-grid-cols:5}
/* JS zet de restregel automatisch op volle breedte; zonder JS blijft de grid bruikbaar. */
.dq-category-overview .card{position:relative;overflow:hidden}
.dq-category-overview .card-body{position:relative;padding-right:78px}
.dq-category-chevron{position:absolute;right:22px;top:18px;width:42px;height:42px;border-radius:50%;background:#F26F1F;color:#fff;display:grid;place-items:center;font-size:34px;font-weight:500;line-height:1;box-shadow:0 7px 18px rgba(242,111,31,.22);transition:transform .2s ease,box-shadow .2s ease}
.dq-category-overview .card:hover .dq-category-chevron{transform:translateX(3px);box-shadow:0 10px 24px rgba(242,111,31,.30)}
.dq-category-symbol-panel{display:grid!important;place-items:center;background:#fff!important}
.dq-transportbok-symbol{width:min(58%,250px);height:auto;fill:none;stroke:#17324d;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.dq-transportbok-symbol circle{fill:#fff;stroke:#17324d;stroke-width:6}
@media(max-width:1000px){.dq-balanced-grid{--dq-grid-cols:2!important}.dq-balanced-grid>*{grid-column:span 30!important}}
@media(max-width:680px){.dq-balanced-grid{display:grid;grid-template-columns:1fr!important}.dq-balanced-grid>*{grid-column:auto!important}.dq-category-overview .card-body{padding-right:22px}.dq-category-chevron{width:38px;height:38px;right:16px;top:14px;font-size:30px}}
/* V65.4 — regressiefixes */
body[data-product-template="product-default-v65"][data-ral-enabled="0"] [data-product-slot="ral"]{display:none!important}
body[data-product-template="product-default-v65"] .meta-row:has([data-product-slot="ral"]:empty) [data-product-slot="ral"]{display:none!important}
/* Homepage hero: bronbeeld heeft veel transparante marge; de gecropte asset mag de hero compacter vullen. */
body:not([data-product-template]) .hero{padding-top:40px!important;padding-bottom:48px!important}
body:not([data-product-template]) .hero-panel{min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
body:not([data-product-template]) .hero-panel .hero-render{max-height:500px!important;width:auto!important;max-width:100%!important;object-fit:contain!important}
/* Studio categoriekaart editor */
.studio-category-card-editor-v654>summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* V65.5 */
.product-card .mini-specs,.product-card .spec-mini{display:none!important}.hero{min-height:0!important}
/* V65.5 regressiefixes */
@media(min-width:961px){
main>.hero{padding:34px 0 38px!important;min-height:0!important}
main>.hero .hero-grid{align-items:center!important;min-height:0!important}
main>.hero .hero-panel{height:420px!important;min-height:0!important;max-height:420px!important;aspect-ratio:auto!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
main>.hero .hero-panel picture{display:block!important;width:100%!important;height:100%!important}
main>.hero .hero-panel .hero-render{display:block!important;width:100%!important;height:100%!important;max-height:420px!important;object-fit:contain!important;object-position:center!important;margin:0!important}
}
/* Centrale Studio editors zijn de enige inspector zodra ze actief zijn. */
.properties-sidebar:has(.studio-product-panel-v651)>.prop-tabs,
.properties-sidebar:has(.studio-product-panel-v651)>.prop-body,
.properties-sidebar:has(.studio-category-panel-v653)>.prop-tabs,
.properties-sidebar:has(.studio-category-panel-v653)>.prop-body{display:none!important}
/* V65.6 — harde RAL-weergave en producten-overzicht */
body[data-ral-enabled="0"] [data-product-slot="ral"]{display:none!important}
.dq-category-overview[data-grid-columns="3"]>*{grid-column:span 20}
/* V65.8 controlled product-template overrides */
body[data-product-template="product-default-v65"] .btn-primary{background:var(--dq-hero-accent,#F26F1F)!important;border-color:var(--dq-hero-accent,#F26F1F)!important}
body[data-product-template="product-default-v65"] .dq-list-icon{color:var(--dq-hero-accent,#F26F1F)!important}
@media(min-width:961px){main>.hero{padding:20px 0 24px!important}main>.hero .hero-panel{height:360px!important;max-height:360px!important}main>.hero .hero-panel .hero-render{max-height:360px!important}}
/* DutchteQ V66.0 — consistent category product cards */
.card .img-panel{display:grid!important;place-items:end center!important;padding:18px!important;box-sizing:border-box!important}
.card .img-panel picture{width:100%!important;height:100%!important;display:grid!important;place-items:end center!important}
.card .img-panel img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom!important}
.card .card-body{position:relative!important;padding-right:78px!important}
.card .card-link{position:absolute!important;right:22px!important;bottom:22px!important;width:48px!important;height:48px!important;border-radius:999px!important;background:#f36b21!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:0!important;margin:0!important;box-shadow:0 8px 22px rgba(243,107,33,.2)!important}
.card .card-link::after{content:'›'!important;width:auto!important;height:auto!important;background:none!important;font-size:30px!important;line-height:1!important;transform:none!important;color:#fff!important;mask:none!important;-webkit-mask:none!important}
.card:hover .card-link::after{transform:translateX(2px)!important}
@media(max-width:640px){.card .card-body{padding-right:64px!important}.card .card-link{right:14px!important;bottom:18px!important;width:42px!important;height:42px!important}}
/* DutchteQ V66.1 — category card optical alignment + CTA fix */
/* Cards keep one stable media stage. The actual product never stretches to the
edges; tight-cropped DAM sources are aligned on a common visual baseline. */
.card{display:flex!important;flex-direction:column!important;min-height:100%!important}
.card>.img-panel{
height:340px!important;
min-height:340px!important;
padding:24px!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
overflow:hidden!important;
background:#fff!important;
}
.card>.img-panel picture{
width:100%!important;height:100%!important;
display:flex!important;align-items:flex-end!important;justify-content:center!important;
}
.card>.img-panel img{
width:auto!important;height:auto!important;
max-width:88%!important;max-height:88%!important;
object-fit:contain!important;object-position:center bottom!important;
transform:none!important;margin:0 auto!important;
}
/* Remove legacy per-product optical scaling: the DAM crop + common stage is the source of truth. */
.card .img-panel img[src*="EWF"],.card .img-panel img[src*="EWF-HD"]{transform:none!important}
.card>.card-body{flex:1!important;min-height:150px!important;padding:18px 74px 24px 22px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.card>.card-body p{margin-bottom:0!important}
/* Always render an actual visible chevron inside the orange circle. */
.card .card-link{position:absolute!important;right:20px!important;bottom:20px!important;width:46px!important;height:46px!important;border-radius:50%!important;background:#F26F1F!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:0!important;overflow:visible!important;text-decoration:none!important}
.card .card-link::before{content:'›'!important;display:block!important;color:#fff!important;font:700 32px/1 Arial,sans-serif!important;transform:translateY(-1px)!important}
.card .card-link::after{content:none!important;display:none!important;mask:none!important;-webkit-mask:none!important;background:none!important}
.card:hover .card-link::before{transform:translate(2px,-1px)!important}
/* A single legacy product card should not become a billboard-width card. */
.grid-2>.card:only-child,.grid-3>.card:only-child{max-width:560px!important;width:100%!important}
@media(max-width:760px){
.card>.img-panel{height:280px!important;min-height:280px!important;padding:18px!important}
.card>.img-panel img{max-width:90%!important;max-height:90%!important}
.card>.card-body{min-height:138px!important;padding:16px 64px 22px 18px!important}
.grid-2>.card:only-child,.grid-3>.card:only-child{max-width:none!important}
}
/* Footer product links always remain separate rows. */
.site-footer .footer-top ul{display:grid!important;grid-auto-flow:row!important;align-items:start!important}
.site-footer .footer-top li{display:block!important;width:100%!important}
.site-footer .footer-top li+li{margin-top:0!important}
/* V66.2 — homepage hero: compacte, optisch gecentreerde beeldkolom */
.hero-grid{align-items:center!important}
.hero-grid>.hero-panel{height:clamp(390px,36vw,520px)!important;min-height:390px!important;max-height:520px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding:0!important}
.hero-grid>.hero-panel picture,.hero-grid>.hero-panel .dq-fixed-hero-product{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.hero-grid>.hero-panel .hero-render,.hero-grid>.hero-panel img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;transform:scale(1.12)!important;transform-origin:center center!important;margin:0!important}
@media(max-width:900px){.hero-grid>.hero-panel{height:min(70vw,480px)!important;min-height:320px!important}.hero-grid>.hero-panel .hero-render,.hero-grid>.hero-panel img{transform:scale(1.06)!important}}
@media(max-width:560px){.hero-grid>.hero-panel{height:320px!important;min-height:280px!important}.hero-grid>.hero-panel .hero-render,.hero-grid>.hero-panel img{transform:none!important}}
/* DutchteQ V66.3 — one CTA per card + exact chevron alignment */
/* The category overview still contains the legacy category-chevron in addition
to the canonical card-link. Keep one interaction only. */
.dq-category-overview .dq-category-chevron{display:none!important}
/* Align every product/category card CTA to the optical centre of its text area,
independent of title/description length. */
.card>.card-body{position:relative!important;overflow:visible!important;padding-right:82px!important}
.card .card-link{
top:50%!important;
bottom:auto!important;
right:20px!important;
transform:translateY(-50%)!important;
margin:0!important;
}
.card:hover .card-link{transform:translate(2px,-50%)!important}
.card .card-link::before{transform:translateY(-1px)!important}
.card:hover .card-link::before{transform:translateY(-1px)!important}
/* Category overview cards use the same canonical CTA and spacing as product cards. */
.dq-category-overview .card-body{padding-right:82px!important}
@media(max-width:640px){
.card>.card-body,.dq-category-overview .card-body{padding-right:68px!important}
.card .card-link{right:14px!important}
}
/* DutchteQ V66.4 — category card information hierarchy
Product title + CTA share one row. Description sits below. The two compact
specifications are restored as full-width table-like rows below the text. */
.card>.card-body{
display:grid!important;
grid-template-columns:minmax(0,1fr) 46px!important;
grid-template-rows:auto auto auto!important;
column-gap:16px!important;
row-gap:8px!important;
align-content:start!important;
min-height:0!important;
padding:18px 20px 20px 22px!important;
}
.card>.card-body>h3,
.card>.card-body>h2,
.card>.card-body>div:first-child{
grid-column:1!important;
grid-row:1!important;
align-self:center!important;
min-width:0!important;
margin:0!important;
}
.card>.card-body>div:first-child h3,
.card>.card-body>div:first-child h2{margin:0!important}
.card>.card-body>p{
grid-column:1 / -1!important;
grid-row:2!important;
margin:0!important;
padding-right:0!important;
}
.card>.card-body>.spec-mini,
.card>.card-body>.mini-specs{
grid-column:1 / -1!important;
grid-row:3!important;
display:block!important;
width:100%!important;
margin:4px 0 0!important;
border:1px solid var(--line,#E4E8EE)!important;
border-radius:8px!important;
overflow:hidden!important;
background:#fff!important;
}
.card>.card-body>.spec-mini span,
.card>.card-body>.mini-specs span{
display:block!important;
width:100%!important;
padding:10px 12px!important;
margin:0!important;
border:0!important;
border-bottom:1px solid var(--line,#E4E8EE)!important;
border-radius:0!important;
background:#fff!important;
color:var(--text,#46586F)!important;
font-size:1rem!important;
line-height:1.35!important;
}
.card>.card-body>.spec-mini span:nth-child(even),
.card>.card-body>.mini-specs span:nth-child(even){background:#F6F7F9!important}
.card>.card-body>.spec-mini span:last-child,
.card>.card-body>.mini-specs span:last-child{border-bottom:0!important}
/* One CTA, aligned with the title row rather than floating against the card bottom. */
.card .card-link{
position:static!important;
grid-column:2!important;
grid-row:1!important;
align-self:center!important;
justify-self:end!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
transform:none!important;
margin:0!important;
}
.card:hover .card-link{transform:translateX(2px)!important}
.card .card-link::before{transform:translateY(-1px)!important}
.card:hover .card-link::before{transform:translate(1px,-1px)!important}
/* Product overview/category cards without specs keep exactly the same title/CTA row. */
.dq-category-overview .card-body{padding-right:20px!important}
@media(max-width:640px){
.card>.card-body{grid-template-columns:minmax(0,1fr) 42px!important;padding:16px 16px 18px!important;column-gap:12px!important}
.card .card-link{width:42px!important;height:42px!important;min-width:42px!important}
}
/* DutchteQ V67.6 — pixel-stable CTA chevron centering.
Draw the chevron geometrically instead of relying on a font glyph baseline. */
.card .card-link::before,
.dq-category-chevron::before{
content:''!important;
width:10px!important;
height:10px!important;
border-top:2.5px solid currentColor!important;
border-right:2.5px solid currentColor!important;
transform:rotate(45deg)!important;
transform-origin:center!important;
display:block!important;
margin-left:-3px!important;
font-size:0!important;
line-height:0!important;
}
.card:hover .card-link::before,
.dq-category-overview .card:hover .dq-category-chevron::before{
transform:translateX(1px) rotate(45deg)!important;
}
.card .card-link,.dq-category-chevron{place-items:center!important;line-height:0!important}
/* ===== DutchteQ V68.6 — CTA-chevron echt gecentreerd =====
V67.6 verving de letterglyph al door een geometrische vorm, maar de chevron bleef scheef
staan. Oorzaak: .card-link is display:grid en bevat naast de ::before ook de tekstnode
"Bekijk producten". Die vormt een tweede gridrij (gemeten: 24.5px + 12.5px), waardoor
place-items:center de chevron SAMEN met die onzichtbare rij centreert in plaats van alleen.
Gemeten resultaat: de chevron stond 10px te hoog in een knop van 44px.
De chevron wordt nu absoluut gecentreerd, los van de rij-indeling. De horizontale
nudge compenseert het zwaartepunt van de hoekvorm; beide waarden zijn gemeten met
tools/v68/chevron-render.js + chevron-measure.py, niet geschat. */
/* position:relative maakt de knop een referentiepunt voor de gecentreerde ::before.
Daarmee werden wel de right/bottom-offsets uit oudere regels (regel 466 e.v.)
opnieuw actief, die onder position:static genegeerd werden; de knop schoof
daardoor 20px naar links en overlapte de omschrijving. Offsets expliciet uit. */
.card .card-link,.dq-category-chevron{position:relative!important;inset:auto!important}
.card .card-link::before,
.dq-category-chevron::before{
position:absolute!important;
/* inset:0 met margin:auto centreert een box met vaste afmeting exact binnen de
padding-box, zonder procentberekening. top:50% gaf hier 21.5px in plaats van 22
en dus een halve pixel scheefstand. */
inset:0!important;
margin:auto!important;
transform:translateX(-3.2px) rotate(45deg)!important;
}
.card:hover .card-link::before,
.dq-category-overview .card:hover .dq-category-chevron::before{
transform:translateX(-2.2px) rotate(45deg)!important;
}
/* ===== DutchteQ V68.11 — kaarttekst botst niet meer met de CTA-knop =====
.card-body is een grid van twee kolommen waarbij .card-link expliciet in kolom 2,
rij 1 staat. De titel en de omschrijving hadden geen kolomtoewijzing en vielen dus
terug op automatische plaatsing: de omschrijving liep door tot in kolom 2 en
verdween daar onder de oranje cirkel. Gemeten op producten.html: de tekst eindigde
op x=694 terwijl de knop op x=630 begint. Woorden als "gezaagde" en "instelbare"
waren daardoor onleesbaar. Titel en omschrijving blijven nu in kolom 1. */
.card>.card-body>h3,
.card>.card-body>p{grid-column:1!important;min-width:0!important}
/* ===== DutchteQ V68.16 — overgang tussen pagina's =====
Zonder dit schildert de browser wit tussen twee documenten. Met cross-document
view transitions vervaagt de oude pagina in de nieuwe, ook bij een gewone
paginawissel zonder JavaScript-router. Browsers die het niet kennen navigeren
precies zoals nu.
De header en de footer staan op elke pagina en houden hun eigen naam, zodat ze
blijven staan in plaats van mee te vervagen; dat leest rustiger. */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation-duration:.18s; animation-timing-function:ease-out }
::view-transition-new(root){ animation-duration:.22s; animation-timing-function:ease-out }
.site-header{ view-transition-name: dq-header }
.site-footer{ view-transition-name: dq-footer }
/* Wie bewegingsarm werkt krijgt geen overgang; de navigatie blijft instant. */
@media (prefers-reduced-motion: reduce){
@view-transition { navigation: none; }
}
/* ===== DutchteQ V68.22 — geen zijwaarts scrollen, op élk schermformaat =====
De bestaande regel hiervoor stond in @media(max-width:760px) en gold dus alleen op
telefoons. Gemeten op producten.html: op 768px was de pagina 674px breder dan het
scherm, op 1280px nog 168px. Oorzaak is het off-canvas menu, waarvan de subpanelen
met translateX(112%) naast het scherm geparkeerd staan.
overflow-x:clip in plaats van hidden: clip maakt geen scrollcontainer en laat
position:sticky op .site-header dus gewoon werken. hidden staat ervoor als terugval
voor oudere browsers die clip niet kennen. */
html{overflow-x:hidden}
@supports (overflow-x:clip){ html{overflow-x:clip} }
/* ===== DutchteQ V68.24 — Archivo zelf hosten =====
De stylesheet van fonts.googleapis.com stond render-blokkerend in de van elke
pagina: gemeten 53ms lokaal, met DNS en TLS naar een vreemd domein aanzienlijk meer
over internet. Daarbij ging het IP-adres van elke bezoeker naar Google vóórdat de
cookiebanner om toestemming had gevraagd.
Google serveert voor alle gewichten 400 t/m 700 hetzelfde variabele bestand; twee
subsets volstaan dus. De unicode-ranges zijn letterlijk overgenomen, zodat de browser
latin-ext alleen ophaalt als een pagina die tekens echt gebruikt. */
@font-face{
font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
src:url(fonts/archivo-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
src:url(fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* V68.44 — "verbergen op" deed op de live site niets.
blockClass() in admin/app.js zet netjes hide-desktop / hide-tablet /
hide-mobile op een blok, maar die klassen waren alleen gedefinieerd in
assets/site.css - en dat bestand wordt door GEEN ENKELE van de 64 pagina's
ingeladen. Een redacteur zette de schakelaar om, zag het in de Studio
verdwijnen, en op de site bleef het blok gewoon staan. Zonder melding.
Blokken uit de widgetregistry werkten wel: die schrijven hun eigen