/* ==========================================================================
   TAW site-header (Ontwerp 2) — vanilla, semantische classes + theme-tokens.
   Mobile-first. Breakpoints: 640 (sm), 768 (md), 1024 (lg).
   ========================================================================== */
:root{
  --taw-brand:#FF6610; --taw-brand-dark:#e55a0e; --taw-star:#F6BB06;
  --taw-ink:#1f2937; --taw-ink-strong:#111827; --taw-muted:#6b7280;
  --taw-line:#e5e7eb; --taw-line-soft:#f3f4f6; --taw-surface:#f9fafb;
}

.taw-hd{ position:relative; z-index:40; background:#fff; }
.taw-hd *{ box-sizing:border-box; }
.taw-hd a{ text-decoration:none; color:inherit; }
/* Content-breedte gelijk aan Shoptimizer's .col-full (1301px) zodat de header
   uitlijnt met de pagina-content eronder. +2rem compenseert de 1rem padding. */
.taw-hd__wrap{ max-width:calc(1301px + 2rem); margin:0 auto; padding-left:1rem; padding-right:1rem; }
.taw-hd svg{ display:block; }

/* ---- Top USP-balk ---- */
/* Achtergrond = footer-kleur (#000) zodat top-bar en footer als donkere
   bookends de pagina omkaderen. */
.taw-hd__usp{ background:#000; color:#fff; font-size:.8125rem; padding:.9rem 0; }
.taw-hd__usp .taw-hd__wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; }
.taw-hd__usp-lead{ display:none; }
.taw-hd__usp-item{ display:none; align-items:center; gap:.4rem; }
.taw-hd__usp-item .taw-ico{ width:1rem; height:1rem; color:#fff; flex:none; }
.taw-hd__usp a:hover{ color:var(--taw-brand); }
.taw-hd__reviews{ display:inline-flex; align-items:center; gap:.4rem; }
.taw-hd__reviews:hover{ color:var(--taw-brand); }
.taw-hd__stars{ display:inline-flex; gap:1px; color:var(--taw-star); }
.taw-hd__stars svg{ width:.85rem; height:.85rem; fill:currentColor; stroke:currentColor; }
.taw-hd__reviews b{ font-weight:700; }

/* ---- Hoofdbalk (logo / zoek / acties) ---- */
.taw-hd__bar{ border-bottom:1px solid var(--taw-line); }
.taw-hd__bar .taw-hd__wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.7rem; padding-bottom:.7rem; }
.taw-hd__burger{ display:inline-flex; flex:1; background:none; border:0; padding:.4rem; margin-left:-.4rem; color:var(--taw-ink-strong); cursor:pointer; }
.taw-hd__burger:hover{ color:var(--taw-brand); }
.taw-hd__burger svg{ width:1.75rem; height:1.75rem; }
.taw-hd__logo{ flex:2; display:flex; justify-content:center; }
.taw-hd__logo img{ height:2.25rem; width:auto; max-width:100%; object-fit:contain; }
.taw-hd__search{ display:none; flex:1; max-width:36rem; margin:0 2rem; }
.taw-hd__search-wrap{ position:relative; width:100%; }
.taw-hd__search input{ width:100%; border:1px solid #d1d5db; border-radius:999px; padding:.65rem 3rem .65rem 1.25rem; font-size:.875rem; color:var(--taw-ink); }
.taw-hd__search input:focus{ outline:none; border-color:var(--taw-brand); }
.taw-hd__search button{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:0; color:#9ca3af; cursor:pointer; }
.taw-hd__search button:hover{ color:var(--taw-brand); }
.taw-hd__search svg{ width:1.4rem; height:1.4rem; }

.taw-hd__actions{ display:flex; flex:1; align-items:center; justify-content:flex-end; gap:1.5rem; color:var(--taw-ink); }
.taw-hd__links{ display:none; align-items:center; gap:1.25rem; font-size:.875rem; font-weight:600; }
.taw-hd__links a:hover{ color:var(--taw-brand); }
/* Account-icoon: alleen mobiel (desktop heeft de tekstlink 'Mijn account'). */
.taw-hd__account{ display:inline-flex; align-items:center; color:var(--taw-ink); }
.taw-hd__account:hover{ color:var(--taw-brand); }
.taw-hd__account svg{ width:1.6rem; height:1.6rem; }
.taw-hd__cart{ display:flex; align-items:center; gap:.5rem; position:relative; }
.taw-hd__cart:hover{ color:var(--taw-brand); }
.taw-hd__cart-ico{ position:relative; display:inline-flex; }
.taw-hd__cart-ico svg{ width:1.6rem; height:1.6rem; }
/* Ronde badge: vaste min-breedte = hoogte + gecentreerde inhoud → cirkel bij
   1 cijfer, groeit naar pill bij 2+ cijfers. Symmetrische padding voorkomt ovaal. */
.taw-hd__cart-count{ position:absolute; top:-.4rem; right:-.5rem; display:inline-flex; align-items:center; justify-content:center; min-width:1.1rem; height:1.1rem; padding:0 .2rem; background:var(--taw-brand); color:#fff; font-size:.625rem; font-weight:700; line-height:1; border-radius:999px; border:2px solid #fff; box-sizing:border-box; }

/* ---- Mobiele zoekbalk ---- */
.taw-hd__msearch{ display:block; padding:0 1rem .9rem; }
.taw-hd__msearch .taw-hd__search-wrap{ }
.taw-hd__msearch input{ width:100%; border:1px solid #d1d5db; border-radius:.6rem; padding:.65rem 2.6rem .65rem 1rem; font-size:.875rem; color:var(--taw-ink); }
.taw-hd__msearch input:focus{ outline:none; border-color:var(--taw-brand); }
.taw-hd__msearch svg{ width:1.25rem; height:1.25rem; position:absolute; right:.75rem; top:50%; transform:translateY(-50%); color:#9ca3af; }

/* ---- Nav-rij ---- */
.taw-hd__nav{ display:none; border-top:1px solid var(--taw-line); background:#fff; }
.taw-hd__nav .taw-hd__wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:.85rem; padding-bottom:.85rem; }
.taw-hd__nav-links{ display:flex; gap:2rem; font-size:.9375rem; font-weight:600; color:var(--taw-ink); }
.taw-hd__nav-links a:hover{ color:var(--taw-brand); }
/* 'Aanbiedingen' (.is-sale) = gewone ink-link; de keuzehulp-knop is het enige
   oranje accent in de nav. Oranje-op-hover geldt al via de regel hierboven. */
.taw-hd__cta{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:700; color:#fff; background:var(--taw-brand); border:1px solid var(--taw-brand); border-radius:999px; padding:.4rem 1rem; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s; }
.taw-hd__cta:hover{ background:var(--taw-brand-dark); border-color:var(--taw-brand-dark); color:#fff; }
.taw-hd__cta svg{ width:1rem; height:1rem; }

/* ---- Mobiel menu-drawer ---- */
.taw-hd__overlay{ position:fixed; inset:0; background:rgba(17,24,39,.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; }
.taw-hd__overlay.is-open{ opacity:1; pointer-events:auto; }
.taw-hd__drawer{ position:fixed; top:0; left:0; bottom:0; width:100%; background:#fff; transform:translateX(-100%); transition:transform .22s ease; z-index:51; display:flex; flex-direction:column; overflow-y:auto; }
.taw-hd__drawer.is-open{ transform:translateX(0); }
.taw-hd__drawer a{ text-decoration:none; color:inherit; }
.taw-hd__drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--taw-line); }
.taw-hd__drawer-title{ font-size:1.15rem; font-weight:700; color:var(--taw-ink-strong); }
.taw-hd__drawer-close{ background:none; border:0; padding:.3rem; color:var(--taw-ink-strong); cursor:pointer; }
.taw-hd__drawer-close svg{ width:1.5rem; height:1.5rem; }
.taw-hd__drawer nav{ display:flex; flex-direction:column; padding:.5rem 0; }
.taw-hd__drawer nav a{ padding:.85rem 1.25rem; font-size:1rem; font-weight:600; color:var(--taw-ink); border-bottom:1px solid var(--taw-line-soft); }
.taw-hd__drawer nav a:hover{ color:var(--taw-brand); background:var(--taw-surface); }
.taw-hd__drawer__cta{ margin:1rem 1.25rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; color:#fff; background:var(--taw-brand); border:0; border-radius:999px; padding:.75rem 1rem; cursor:pointer; }
.taw-hd__drawer__cta svg{ width:1.1rem; height:1.1rem; }
.taw-hd__drawer__sub{ margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--taw-line); display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; color:var(--taw-muted); }
.taw-hd__drawer__sub a{ color:var(--taw-ink); font-weight:600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Desktop vanaf 1024px; daaronder = mobiele weergave (hamburger + drawer). */
@media (min-width:1024px){
  .taw-hd__usp .taw-hd__wrap{ flex-direction:row; justify-content:space-between; text-align:left; gap:0; }
  .taw-hd__usp-lead{ display:flex; align-items:center; gap:2rem; }
  .taw-hd__usp-item{ display:inline-flex; }
  .taw-hd__bar .taw-hd__wrap{ padding-top:1.05rem; padding-bottom:1.05rem; }
  .taw-hd__burger{ display:none; }
  .taw-hd__logo{ flex:none; }
  .taw-hd__logo img{ height:2.75rem; }
  .taw-hd__search{ display:flex; }
  .taw-hd__msearch{ display:none; }
  .taw-hd__nav{ display:block; }
  .taw-hd__links{ display:flex; }
  .taw-hd__account{ display:none; }
}

/* Mobiel (<1024px): logo LINKS naast de burger (patroon weltechniek.nl) i.p.v.
   gecentreerd. burger → gap → logo → [ruimte] → account + winkelwagen rechts.
   Iconen uniform ~26px. */
@media (max-width:1023px){
  .taw-hd__burger{ flex:none; }
  .taw-hd__burger svg{ width:1.6rem; height:1.6rem; }
  .taw-hd__logo{ flex:none; justify-content:flex-start; margin-right:auto; }
  .taw-hd__logo img{ height:2rem; }
  .taw-hd__actions{ flex:none; gap:1rem; }
}

/* ==========================================================================
   WordPress-integratie: verberg de (nu lege) Shoptimizer-header-wrappers
   tijdens de preview. Scoped op body.taw-header-preview.
   ========================================================================== */
.taw-header-preview #masthead,
.taw-header-preview .col-full-nav{ display:none !important; }
/* ---- FiboSearch: ronde witte box met vaste hoogte, magnifier ABSOLUUT
   verticaal gecentreerd rechts. Vecht niet met FiboSearch's flex/positie
   (dat gaf een te hoge magnifier + rommelige box). Extra FiboSearch-
   elementjes (voice-search, preloader) verbergen. ---- */
.taw-hd .dgwt-wcas-search-wrapp{ width:100%; max-width:none; background:transparent !important; box-shadow:none !important; }
.taw-hd .dgwt-wcas-sf-wrapp{
  position:relative !important; display:block !important;
  background:#fff !important; border:1px solid #d1d5db !important; box-shadow:none !important; padding:0 !important;
}
.taw-hd__search .dgwt-wcas-sf-wrapp{ border-radius:999px !important; }
.taw-hd__msearch .dgwt-wcas-sf-wrapp{ border-radius:.6rem !important; }
.taw-hd .dgwt-wcas-sf-wrapp:focus-within{ border-color:var(--taw-brand) !important; }
.taw-hd .dgwt-wcas-search-input,
.taw-hd .dgwt-wcas-search-input:hover,
.taw-hd .dgwt-wcas-search-input:focus{
  width:100% !important; box-sizing:border-box !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; outline:none !important;
  height:2.6rem !important; line-height:2.6rem !important; color:var(--taw-ink) !important;
  margin:0 !important; padding:0 3rem 0 1.25rem !important; font-size:.9rem !important;
}
.taw-hd .dgwt-wcas-search-form .dgwt-wcas-search-submit{
  position:absolute !important; top:50% !important; bottom:auto !important;
  transform:translateY(-50%) !important; right:.6rem !important; left:auto !important;
  height:auto !important; width:auto !important; margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.taw-hd .dgwt-wcas-ico-magnifier{ width:18px !important; height:18px !important; fill:#9ca3af; }
.taw-hd .dgwt-wcas-search-submit:hover .dgwt-wcas-ico-magnifier{ fill:var(--taw-brand); }
.taw-hd .dgwt-wcas-preloader,
.taw-hd .dgwt-wcas-voice-search{ display:none !important; }