/* Stable shared header and restrained page navigation for customer sites. */
html{scrollbar-gutter:stable}
/* Eén paginabreedte voor kop, inhoud en voeter. Het bestelmenu (.menu-inner) blijft bewust breder: 3 kaarten + mand passen niet in 1280px. */
:root{--site-w:1280px}
body .hero-content,body .hero-inner,body .hero-in,body .steps,body .trust-inner,body .reviews,body .info,body .picks,body .section,body .value-grid{max-width:var(--site-w)}
nav .nav-inner,nav .nav{width:100%;box-sizing:border-box;height:64px!important;min-height:64px;max-width:var(--site-w);margin-inline:auto;padding-inline:20px;display:grid!important;grid-template-columns:minmax(0,1fr) auto 90px;align-items:center;gap:12px}
nav .nav-left,nav .brand-shell{min-width:0;width:100%;display:flex;align-items:center;gap:10px;justify-self:start}
nav .nav-brand,nav .brand{min-width:0;max-width:100%;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
nav .nav-brand span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
nav .home-options,nav .app-nav-wrap,nav .shell-options{flex:0 0 auto}
nav .nav-links,nav .links{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap;margin:0;padding:0;display:flex;align-items:center;gap:20px}
nav .nav-right,nav .shell-right{grid-column:3;grid-row:1;justify-self:end;min-width:90px;display:flex;justify-content:flex-end;align-items:center}
nav .dp-site-lang{margin-left:0}
/* Eén maat voor Opties-knop, naam, menulinks en taalknop op home, bestellen en over-ons
   (elke pagina had eigen waarden: 12/13px, 500/700, 17–22px). Enkel desktop; mobiel blijft per pagina. */
@media(min-width:1001px){
 nav .home-options-toggle,nav .app-nav-toggle,nav .shell-options-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:9px;border:1px solid rgba(232,192,106,.55);background:rgba(201,149,42,.18);color:#fff;font:900 13px/1 var(--font-body,var(--body,'DM Sans',system-ui,sans-serif));cursor:pointer}
 nav .nav-left,nav .brand-shell{gap:12px}
 nav .app-nav-wrap{margin-left:0}
 nav .nav-brand,nav .brand{gap:10px;margin:0;font-family:var(--font-head,var(--head,'Playfair Display',Georgia,serif));font-size:22px;font-weight:900;letter-spacing:-.3px;line-height:1.2}
 nav .nav-brand .dot,nav .brand .dot{width:32px;height:32px;flex-shrink:0}
 nav .nav-links a:not(.brand),nav .links a:not(.brand){font-family:var(--font-body,var(--body,'DM Sans',system-ui,sans-serif));font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}
 nav .nav-links a:not(.brand):hover,nav .links a:not(.brand):hover,nav .nav-links a.active:not(.brand),nav .nav-links a[aria-current]:not(.brand),nav .links a.active:not(.brand){color:var(--gold2,#e8c06a)}
 nav .lang-toggle,nav .dp-site-lang-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font:800 12px/1 var(--font-body,var(--body,'DM Sans',system-ui,sans-serif));cursor:pointer}
}
nav{view-transition-name:site-header}
@view-transition{navigation:auto}
::view-transition-group(root){animation:none}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:site-content-appear 180ms ease-out both;mix-blend-mode:normal}
@keyframes site-content-appear{from{opacity:0}to{opacity:1}}
::view-transition-group(site-header){animation:none}
::view-transition-old(site-header){animation:none;opacity:0}
::view-transition-new(site-header){animation:none}
@media(max-width:1000px){
 nav .nav-inner,nav .nav{grid-template-columns:minmax(0,1fr) 48px;height:58px!important;min-height:58px;padding-inline:12px;gap:10px}
 nav .nav-links,nav .links{display:none!important}
 nav .nav-right,nav .shell-right{grid-column:2;min-width:48px}
 nav .nav-left,nav .brand-shell{gap:8px}
 nav .nav-brand,nav .brand{font-size:17px}
 nav .nav-brand span:not(.dot),nav .brand [data-site-brand-name]{white-space:normal;line-height:1.12;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 nav .dp-site-lang-toggle{padding:8px}
 nav .dp-site-lang-code,nav .lang-label{display:none}
}
@media(max-width:380px){nav .nav-brand span:not(.dot),nav .brand [data-site-brand-name]{font-size:14px;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .step-card{opacity:1!important;transform:none!important;transition:none!important}
}