/* Saasveld · layout/header — topbar, header, nav, mobiele nav-drawer */

/* ============ TOPBAR ============ */
.sv-topbar{background:var(--wp--preset--color--ink);color:#e9e4df;font-size:.82rem}
.sv-topbar__inner{max-width:var(--sv-maxw);margin-inline:auto;display:flex;align-items:center;gap:1.2rem;padding:.45rem clamp(1rem,3vw,2rem)}
.sv-topbar__item{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.sv-topbar__item a{color:#fff;text-decoration:none}
.sv-topbar__spacer{flex:1}
.sv-topbar__usp{color:#ffd9c2}
@media (max-width:860px){ .sv-topbar__hours,.sv-topbar__item:first-child{display:none} }

/* ============ HEADER ============ */
.sv-header{position:sticky;top:0;z-index:40;background:var(--wp--preset--color--surface);border-bottom:1px solid var(--wp--preset--color--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.sv-header__inner{max-width:var(--sv-maxw);margin-inline:auto;display:flex;align-items:center;gap:1.25rem;padding:.8rem clamp(1rem,3vw,2rem)}
.sv-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--wp--preset--color--ink);flex:0 0 auto}
.sv-logo__mark{display:inline-flex}
.sv-logo__mark svg{display:block}
.sv-logo__text{display:flex;flex-direction:column;line-height:1}
.sv-logo__text strong{font-family:var(--wp--preset--font-family--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem}
.sv-logo__text em{font-family:var(--wp--preset--font-family--script);font-style:normal;color:var(--wp--preset--color--primary);font-size:1.35rem;margin-top:-2px}

.sv-search{flex:1;max-width:560px;display:flex;align-items:center;background:var(--wp--preset--color--surface-muted);border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--pill);overflow:hidden}
.sv-search input{flex:1;border:0;background:none;padding:.7rem 1rem;font-size:.95rem;color:var(--wp--preset--color--ink)}
.sv-search input:focus{outline:none}
.sv-search button{border:0;background:var(--wp--preset--color--primary);color:#fff;padding:.6rem .85rem;margin:.2rem;border-radius:var(--wp--custom--radius--pill);cursor:pointer;display:grid;place-items:center}
.sv-search button:hover{background:var(--wp--preset--color--primary-hover)}

.sv-actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;margin-left:auto}
.sv-action{display:inline-flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--wp--preset--color--ink);padding:.3rem .5rem;border-radius:10px}
.sv-action:hover{background:var(--wp--preset--color--surface-muted)}
.sv-action__label{font-size:.68rem;font-weight:600}
/* Cart = compacte horizontale pill (rekt de header niet uit) */
.sv-action--cart{flex-direction:row;align-items:center;gap:.55rem;background:var(--wp--preset--color--surface-muted);border:1px solid var(--wp--preset--color--line);padding:.45rem .75rem;border-radius:var(--wp--custom--radius--pill)}
.sv-action--cart:hover{background:#fff;border-color:var(--wp--preset--color--primary)}
.sv-cart-icowrap{position:relative;display:inline-flex;color:var(--wp--preset--color--primary);line-height:0}
.sv-cart-badge{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;display:grid;place-items:center;background:var(--wp--preset--color--primary);color:#fff;border-radius:999px;font-size:.66rem;font-weight:700;padding:0 4px;line-height:1}
.sv-cart-badge .saasveld-cart-count{color:#fff}
.sv-cart-meta{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.sv-cart-meta__label{font-size:.66rem;color:var(--wp--preset--color--muted);font-weight:600}
.sv-cart-total,.sv-cart-total .saasveld-cart-total{font-weight:700;color:var(--wp--preset--color--ink);font-size:.9rem}
@media (max-width:900px){ .sv-cart-meta__label{display:none} .sv-action .sv-action__label{display:none} }

.sv-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.4rem}
.sv-burger span{width:24px;height:2px;background:var(--wp--preset--color--ink);border-radius:2px;transition:.2s}

/* ============ NAV ============ */
.sv-nav{border-top:1px solid var(--wp--preset--color--line)}
/* Drawer-kop (titel + sluitknop) alleen in de mobiele drawer. */
.sv-nav__head{display:none}
.sv-nav__list{max-width:var(--sv-maxw);margin-inline:auto;list-style:none;display:flex;gap:.35rem;padding:0 clamp(1rem,3vw,2rem)}
.sv-nav__list>li{position:relative}
.sv-nav__list>li>a{display:inline-flex;align-items:center;gap:.35rem;padding:.85rem .9rem;text-decoration:none;color:var(--wp--preset--color--ink);font-weight:600;font-size:.95rem;border-bottom:3px solid transparent}
.sv-nav__list>li>a:hover{color:var(--wp--preset--color--primary);border-bottom-color:var(--wp--preset--color--primary)}
.sv-caret{transition:transform .2s}
/* Account zit op desktop in de header-acties; het nav-item is enkel voor mobiel bedoeld. */
.sv-nav__account{display:none}

/* Mega menu */
.sv-mega{position:absolute;top:calc(100% + 1px);left:0;transform:translateY(8px);z-index:50;background:#fff;border:1px solid var(--wp--preset--color--line);border-radius:16px;box-shadow:0 24px 60px rgba(20,17,16,.18);padding:1.25rem 1.5rem 1.5rem;width:min(820px,92vw);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease}
.sv-nav__has-mega:hover .sv-mega,.sv-nav__has-mega:focus-within .sv-mega{opacity:1;visibility:visible;transform:translateY(0)}
.sv-nav__has-mega:hover .sv-caret{transform:rotate(180deg)}
.sv-mega__head{display:flex;align-items:baseline;justify-content:space-between;padding:0 .25rem .85rem;margin-bottom:.5rem;border-bottom:1px solid var(--wp--preset--color--line)}
.sv-mega__eyebrow{font-family:var(--wp--preset--font-family--script);color:var(--wp--preset--color--primary);font-size:1.35rem;line-height:1}
.sv-mega__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.sv-mega__grid li a{display:flex;align-items:center;gap:.85rem;padding:.6rem;border-radius:12px;text-decoration:none;color:var(--wp--preset--color--ink);transition:background .15s ease}
.sv-mega__grid li a:hover{background:var(--wp--preset--color--surface-muted)}
.sv-mega__grid li a:hover .sv-mega__name{color:var(--wp--preset--color--primary)}
.sv-mega__media{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:var(--wp--preset--color--surface-muted);display:grid;place-items:center;border:1px solid var(--wp--preset--color--line)}
.sv-mega__media img{width:100%;height:100%;object-fit:cover}
.sv-mega__ph{font-family:var(--wp--preset--font-family--display);font-weight:700;color:var(--wp--preset--color--primary);font-size:1.4rem;text-transform:uppercase}
.sv-mega__name{display:block;font-weight:600;font-size:.95rem;transition:color .15s ease}
.sv-mega__count{display:block;font-size:.78rem;color:var(--wp--preset--color--muted)}
.sv-mega__all{font-weight:700;color:var(--wp--preset--color--primary);text-decoration:none;font-size:.9rem}
.sv-mega__all:hover{text-decoration:underline}

/* ============ MOBILE NAV + HEADER ============ */
@media (max-width:900px){
	/* Header als grid: rij 1 = [burger] [logo gecentreerd] [winkelmand], rij 2 = zoekbalk.
	   Grid geeft nette, vaste uitlijning (geen wrap-verrassingen). */
	.sv-header__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"burger logo cart" "search search search";align-items:center;column-gap:.6rem;row-gap:.7rem;padding:.65rem clamp(.9rem,4vw,1.25rem)}
	.sv-burger{display:flex;grid-area:burger;justify-self:start}
	.sv-logo{grid-area:logo;justify-self:center;min-width:0;gap:.45rem}
	.sv-logo__mark svg{width:38px;height:38px}
	.sv-logo__text strong{font-size:1rem;letter-spacing:.02em}
	.sv-logo__text em{font-size:1.1rem}
	.sv-actions{grid-area:cart;justify-self:end;margin-left:0;gap:.4rem}
	/* Account-icoon zit in het nav-menu; in de mobiele header alleen de winkelmand tonen */
	.sv-actions .sv-action:not(.sv-action--cart){display:none}
	.sv-action--cart{padding:.4rem .65rem;gap:.4rem}
	.sv-search{grid-area:search;max-width:100%;margin:0}

	/* Nav-drawer (rechts), volledige hoogte, boven de sticky CTA. Smooth easing. */
	.sv-nav{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:#fff;transform:translateX(100%);transition:transform .34s cubic-bezier(.34,.9,.3,1);z-index:90;overflow-y:auto;overscroll-behavior:contain;border-top:0;box-shadow:var(--wp--custom--shadow--drawer);border-radius:20px 0 0 20px;display:flex;flex-direction:column;padding:0 0 1.5rem}
	body.sv-nav-open .sv-nav{transform:translateX(0)}

	/* Drawer-kop: merk-titel + ronde sluitknop */
	.sv-nav__head{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.35rem;position:sticky;top:0;background:#fff;border-bottom:1px solid var(--wp--preset--color--line);z-index:2}
	.sv-nav__headtitle{font-family:var(--wp--preset--font-family--script);font-size:1.6rem;line-height:1;color:var(--wp--preset--color--primary)}
	.sv-nav__close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--wp--preset--color--line);border-radius:50%;background:var(--wp--preset--color--surface-muted);color:var(--wp--preset--color--ink);cursor:pointer;transition:background .15s ease,color .15s ease}
	.sv-nav__close:hover{background:var(--wp--preset--color--primary);color:#fff;border-color:var(--wp--preset--color--primary)}

	/* Nav-lijst: gelijkmatige rijen, links uitgelijnd, subtiele scheiding.
	   margin-inline:0 nodig: de desktop-regel zet margin-inline:auto, en auto-marges op een
	   flex-item verhinderen stretch → de lijst kromp naar inhoudsbreedte en centreerde. */
	.sv-nav__list{flex-direction:column;gap:0;padding:.5rem 0 0;max-width:none;margin:0;width:100%}
	.sv-nav__list>li{position:relative}
	.sv-nav__list>li>a{display:flex;align-items:center;padding:.95rem 1.35rem;border:0;width:100%;font-size:1.05rem;font-weight:600;color:var(--wp--preset--color--ink);border-bottom:1px solid rgba(20,17,16,.06);transition:background .15s ease,color .15s ease,padding-left .15s ease}
	.sv-nav__list>li>a:hover,.sv-nav__list>li>a:active{background:var(--wp--preset--color--surface-muted);color:var(--wp--preset--color--primary);border-bottom-color:transparent;padding-left:1.6rem}
	/* Account: geaccentueerde rij onderaan */
	.sv-nav__account{display:block;margin-top:.35rem}
	.sv-nav__account>a{display:flex;align-items:center;gap:.6rem;color:var(--wp--preset--color--primary);font-weight:700}
	.sv-nav__account svg{width:20px;height:20px;flex:0 0 auto}

	/* 'Shop': chevron rechts, roteert bij openklappen */
	.sv-nav__has-mega>a .sv-caret{margin-left:auto;transition:transform .25s ease}
	.sv-nav__has-mega.is-open>a{color:var(--wp--preset--color--primary);background:var(--wp--preset--color--surface-muted);border-bottom-color:transparent}
	.sv-nav__has-mega.is-open>a .sv-caret{transform:rotate(180deg)}

	/* Mega als accordion: sub-paneel met eigen tint, netjes ingesprongen en uitgelijnd */
	.sv-mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;width:auto;display:none;background:var(--wp--preset--color--surface-muted);padding:0}
	.sv-nav__has-mega.is-open>.sv-mega{display:block}
	.sv-mega__inner{padding:.85rem 1.35rem 1.1rem}
	.sv-mega__head{padding:0 0 .7rem;margin-bottom:.6rem;border-bottom:1px solid var(--wp--preset--color--line)}
	.sv-mega__eyebrow{font-size:1.15rem}
	.sv-mega__grid{grid-template-columns:1fr;gap:.15rem}
	.sv-mega__grid li a{padding:.55rem .5rem;border-radius:12px;gap:.8rem}
	.sv-mega__grid li a:hover{background:#fff}
	.sv-mega__media{width:44px;height:44px;border-radius:10px}
	.sv-mega__name{white-space:normal;font-size:.95rem}
	.sv-mega__count{font-size:.75rem}

	/* Backdrop (in de header geplaatst → zelfde stacking-context als de nav; z<nav) */
	.sv-nav-backdrop{position:fixed;inset:0;background:rgba(20,17,16,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:89}
	body.sv-nav-open .sv-nav-backdrop{opacity:1;visibility:visible}
	body.sv-nav-open,body.saasveld-cart-open{overflow:hidden}
	/* Sticky CTA verbergen zodra een drawer (nav of mini-cart) open is */
	body.sv-nav-open [data-sticky-cta],body.saasveld-cart-open [data-sticky-cta]{display:none !important}
}