/* ============================================================================
   SELFIEY — HEADER + CART        (WPCode -> Add Snippet -> CSS Snippet)
   Location: Site Wide Header
   ========================================================================== */

:root{
  --sf-b1:#c026d3; --sf-b2:#a21caf;
  --sf-grad:linear-gradient(135deg,#c026d3 0%,#a21caf 100%);
  --sf-ink:#0b0f19; --sf-body:#4b5563; --sf-muted:#98a0ac; --sf-line:#e8eaee;
  --sf-surf2:#f6f7f9;
  --sf-h:72px; --sf-w:1280px; --sf-drawer:420px; --sf-logo:38px;
  --sf-ease:cubic-bezier(.4,0,.2,1);
  --sf-t:.25s cubic-bezier(.4,0,.2,1);
}

/* De Elementor-header vervangen we door deze. */
header.elementor-location-header{display:none !important}

/* ---------------------------------------------------------------------------
   HARDE RESET
   Het theme zet een gradient op ELKE button. Zonder deze reset worden de
   verwijder-, plus/min- en clear-knoppen oranje/roze bollen en verdwijnt het
   winkelwagen-icoon achter zijn eigen badge. Eerst alles kaalslaan, daarna
   hieronder opnieuw opbouwen.
--------------------------------------------------------------------------- */
.sf-header button,.sf-cart button,
.sf-header a,.sf-cart a{
  -webkit-appearance:none !important; appearance:none !important;
  background:none !important; background-image:none !important;
  background-color:transparent !important;
  border:0 !important; box-shadow:none !important; text-shadow:none !important;
  text-transform:none !important; letter-spacing:normal !important;
  text-decoration:none !important; font-family:inherit !important;
  line-height:normal !important;
  min-width:0 !important; min-height:0 !important;
  margin:0 !important; padding:0 !important; border-radius:0 !important;
  transition:none; transform:none; filter:none;
}
.sf-header svg,.sf-cart svg{
  display:block !important; fill:none !important; stroke:currentColor !important;
  max-width:none;
}
.sf-header *,.sf-cart *{box-sizing:border-box}
.sf-header p,.sf-cart p{margin:0}

/* ------------------------------- HEADER ---------------------------------- */
.sf-header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--sf-line);
  transition:box-shadow var(--sf-t),border-color var(--sf-t);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.sf-header.is-scrolled{
  box-shadow:0 1px 0 rgba(11,15,25,.05),0 8px 24px -14px rgba(11,15,25,.22);
  border-color:transparent;
}
.sf-bar{
  max-width:var(--sf-w); margin:0 auto; height:var(--sf-h); padding:0 24px;
  display:flex; align-items:center; gap:20px;
}
/* --------------------------------- LOGO ----------------------------------
   Het echte beeldmerk. De hoogte (--sf-logo) stuurt alles; de breedte volgt
   uit de vaste verhouding 300:114, zodat er geen sprong in de layout zit
   terwijl het plaatje nog laadt. De link is zo hoog als de balk: groter
   klikvlak, zonder dat je er iets van ziet.
   De lettereigenschappen hieronder zijn puur vangnet — die worden alleen
   zichtbaar als het plaatje ooit niet laadt en de alt-tekst verschijnt. */
.sf-header .sf-logo{
  flex:0 0 auto; display:flex !important; align-items:center;
  height:var(--sf-h); line-height:1 !important;
  font-size:22px !important; font-weight:800 !important; letter-spacing:-.03em;
  color:var(--sf-b2) !important;
  transition:opacity var(--sf-t) !important;
}
.sf-header .sf-logo img{
  display:block !important;
  height:var(--sf-logo) !important; width:auto !important;
  max-width:none !important; max-height:none !important;
  min-width:0 !important; min-height:0 !important;
  aspect-ratio:300 / 114; object-fit:contain;
  margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; filter:none !important;
  -webkit-user-drag:none; user-select:none;
}
.sf-header .sf-logo:hover{opacity:.82}
.sf-header .sf-logo:active{opacity:.68}

/* --------------------------------- NAV ----------------------------------- */
/* Acht items naast elkaar is veel. Op 14px met 12px lucht ernaast is de rij
   1123px breed en past het geheel pas vanaf een scherm van 1354px — op een
   1280-laptop schoof de winkelwagenknop daardoor buiten beeld. 13px met 10px
   lucht brengt de rij terug naar wat er wél in past, zonder dat het krap
   oogt. De burger-drempel hieronder hoort bij deze maat. */
.sf-nav{flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:2px}
.sf-header .sf-nav a{
  position:relative; padding:9px 10px !important; border-radius:9px !important;
  font-size:13px !important; font-weight:500 !important;
  color:var(--sf-body) !important; white-space:nowrap;
  transition:color var(--sf-t),background-color var(--sf-t) !important;
}
.sf-header .sf-nav a:hover{color:var(--sf-ink) !important; background:var(--sf-surf2) !important}
.sf-header .sf-nav a.is-active{color:var(--sf-ink) !important; font-weight:600 !important}
.sf-header .sf-nav a.is-active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px;
  border-radius:2px; background:var(--sf-grad);
}

/* ------------------------------- ACTIES ---------------------------------- */
.sf-actions{flex:0 0 auto; display:flex; align-items:center; gap:6px}
.sf-header .sf-icon-btn{
  position:relative; width:42px !important; height:42px !important;
  border-radius:11px !important; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--sf-ink) !important;
  transition:background-color var(--sf-t),transform var(--sf-t) !important;
}
.sf-header .sf-icon-btn:hover{background:var(--sf-surf2) !important}
.sf-header .sf-icon-btn:active{transform:scale(.94)}

/* Klein telbolletje in de hoek — pointer-events uit, anders vangt hij de klik. */
.sf-header .sf-badge{
  position:absolute; top:3px; right:2px;
  min-width:17px !important; height:17px !important; padding:0 4px !important;
  border-radius:999px !important; background:var(--sf-grad) !important;
  color:#fff !important; font-size:10.5px !important; font-weight:700 !important;
  line-height:17px !important; text-align:center; letter-spacing:0 !important;
  border:2px solid #fff !important; pointer-events:none;
}
.sf-header .sf-badge[hidden]{display:none !important}
.sf-header .sf-badge.is-bump{animation:sfBump .38s var(--sf-ease)}
@keyframes sfBump{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ----------------------------- HAMBURGER --------------------------------- */
.sf-header .sf-burger{
  display:none; width:42px !important; height:42px !important;
  border-radius:11px !important; cursor:pointer;
  align-items:center; justify-content:center;
  transition:background-color var(--sf-t) !important;
}
.sf-header .sf-burger:hover{background:var(--sf-surf2) !important}
.sf-header .sf-burger span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--sf-ink);
  position:relative; transition:background-color var(--sf-t);
}
.sf-header .sf-burger span::before,
.sf-header .sf-burger span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; border-radius:2px;
  background:var(--sf-ink); transition:transform var(--sf-t),top var(--sf-t);
}
.sf-header .sf-burger span::before{top:-6px}
.sf-header .sf-burger span::after{top:6px}
.sf-header .sf-burger.is-open span{background:transparent}
.sf-header .sf-burger.is-open span::before{top:0; transform:rotate(45deg)}
.sf-header .sf-burger.is-open span::after{top:0; transform:rotate(-45deg)}

/* --------------------------- MOBIEL MENU --------------------------------- */
.sf-mobile-nav{
  position:fixed; left:0; right:0; top:var(--sf-h); z-index:880;
  background:#fff; border-bottom:1px solid var(--sf-line);
  box-shadow:0 14px 30px -18px rgba(11,15,25,.3);
  padding:10px 16px 18px; display:none;
  max-height:calc(100vh - var(--sf-h)); overflow-y:auto;
  transform:translateY(-8px); opacity:0;
  transition:transform var(--sf-t),opacity var(--sf-t);
}
.sf-mobile-nav.is-open{display:block; transform:translateY(0); opacity:1}
.sf-mobile-nav a{
  display:block; padding:13px 14px !important; border-radius:11px !important;
  font-size:15px !important; font-weight:500 !important; color:var(--sf-body) !important;
  transition:background-color var(--sf-t),color var(--sf-t) !important;
}
.sf-mobile-nav a:hover{background:var(--sf-surf2) !important; color:var(--sf-ink) !important}
.sf-mobile-nav a.is-active{
  color:var(--sf-ink) !important; font-weight:600 !important; background:var(--sf-surf2) !important;
}

/* ------------------------------ OVERLAY ---------------------------------- */
.sf-overlay{
  position:fixed; inset:0; z-index:940;
  background:rgba(9,12,20,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity var(--sf-t),visibility var(--sf-t);
}
.sf-overlay.is-open{opacity:1; visibility:visible}

/* ------------------------------- DRAWER ---------------------------------- */
.sf-cart{
  position:fixed; top:0; right:0; bottom:0; z-index:950;
  width:min(var(--sf-drawer),100vw);
  background:#fff; border-left:1px solid var(--sf-line);
  box-shadow:-32px 0 80px -24px rgba(9,12,20,.4);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform var(--sf-t);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--sf-body);
}
.sf-cart.is-open{transform:translateX(0)}
.sf-cart.is-busy{pointer-events:none}
.sf-cart.is-busy .sf-cart-body{opacity:.5; transition:opacity var(--sf-t)}

.sf-cart-head{
  flex:0 0 auto; display:flex; align-items:center; gap:11px;
  padding:21px 22px; border-bottom:1px solid var(--sf-line);
}
.sf-cart-head h2{
  margin:0 !important; font-size:16px !important; font-weight:700 !important;
  color:var(--sf-ink) !important; letter-spacing:-.01em; line-height:1.2 !important;
}
.sf-cart-count{
  font-size:11.5px; font-weight:600; color:var(--sf-muted);
  background:var(--sf-surf2); padding:4px 9px; border-radius:999px;
}
.sf-cart .sf-cart-close{
  margin-left:auto; width:32px !important; height:32px !important;
  border-radius:9px !important; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--sf-muted) !important;
  transition:background-color var(--sf-t),color var(--sf-t) !important;
}
.sf-cart .sf-cart-close:hover{background:var(--sf-surf2) !important; color:var(--sf-ink) !important}

/* ------------------------------- REGELS ---------------------------------- */
.sf-cart-body{flex:1 1 auto; overflow-y:auto; padding:4px 22px}
.sf-item{
  display:grid; grid-template-columns:60px 1fr; gap:14px; padding:18px 0;
  border-bottom:1px solid var(--sf-line);
  animation:sfIn .3s var(--sf-ease) both;
}
.sf-item:last-child{border-bottom:0}
@keyframes sfIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.sf-item.is-leaving{animation:sfOut .25s var(--sf-ease) forwards; pointer-events:none}
@keyframes sfOut{
  to{opacity:0; transform:translateX(16px); max-height:0; padding:0; margin:0; border-color:transparent}
}

.sf-thumb{
  width:60px; height:60px; border-radius:11px; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff; letter-spacing:-.02em;
  background:var(--sf-grad); border:1px solid rgba(11,15,25,.06);
}
.sf-thumb--img{background:var(--sf-surf2)}
.sf-thumb img{
  width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; display:block; border-radius:10px;
}

.sf-item-main{min-width:0; display:flex; flex-direction:column; gap:10px}
.sf-item-top{display:flex; align-items:flex-start; gap:10px}
.sf-item-txt{flex:1 1 auto; min-width:0}
.sf-item-name{
  margin:0 !important; font-size:13.5px !important; font-weight:600 !important;
  color:var(--sf-ink) !important; line-height:1.35 !important; overflow-wrap:anywhere;
}
.sf-item-meta{
  margin:3px 0 0 !important; font-size:11.5px !important;
  color:var(--sf-muted) !important; line-height:1.3 !important;
}

/* Subtiel grijs kruisje — géén gekleurde bol. */
.sf-cart .sf-item-remove{
  flex:0 0 auto; width:26px !important; height:26px !important;
  border-radius:8px !important; cursor:pointer; color:var(--sf-muted) !important;
  display:flex; align-items:center; justify-content:center;
  transition:background-color var(--sf-t),color var(--sf-t) !important;
}
.sf-cart .sf-item-remove:hover{background:#fdf2f4 !important; color:#e11d48 !important}

.sf-item-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* Strak omlijnde stepper i.p.v. twee losse gekleurde knoppen. */
.sf-qty{
  display:inline-flex; align-items:center; overflow:hidden;
  border:1px solid var(--sf-line) !important; border-radius:9px; background:#fff;
}
.sf-cart .sf-qty button{
  width:28px !important; height:28px !important; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--sf-body) !important; font-size:15px !important;
  line-height:1 !important; font-weight:500 !important;
  transition:background-color var(--sf-t),color var(--sf-t) !important;
}
.sf-cart .sf-qty button:hover:not(:disabled){background:var(--sf-surf2) !important; color:var(--sf-ink) !important}
.sf-cart .sf-qty button:disabled{color:#d2d6dd !important; cursor:not-allowed}
.sf-qty span{
  min-width:32px; text-align:center; font-size:12.5px; font-weight:600; color:var(--sf-ink);
  border-left:1px solid var(--sf-line); border-right:1px solid var(--sf-line); line-height:28px;
}
.sf-item-price{font-size:13.5px; font-weight:700; color:var(--sf-ink); white-space:nowrap}
.sf-item-price del{font-weight:500; color:var(--sf-muted); margin-right:5px}
.sf-item-price bdi{font-weight:inherit}

/* ----------------------------- LEGE STAAT -------------------------------- */
.sf-empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:44px 24px; gap:5px;
}
.sf-empty-ic{
  width:62px; height:62px; border-radius:16px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sf-surf2); color:#c5c9d2;
}
.sf-empty h3{margin:0 !important; font-size:15px !important; font-weight:700 !important; color:var(--sf-ink) !important}
.sf-empty p{margin:0 !important; font-size:13px !important; color:var(--sf-muted) !important; max-width:250px}
.sf-cart .sf-empty-cta{
  margin-top:16px !important; padding:11px 20px !important; border-radius:11px !important;
  background:var(--sf-grad) !important; color:#fff !important;
  font-size:13px !important; font-weight:600 !important;
  box-shadow:0 8px 20px -8px rgba(162,28,175,.55) !important;
  transition:transform var(--sf-t),filter var(--sf-t) !important;
}
.sf-cart .sf-empty-cta:hover{transform:translateY(-1px); filter:brightness(1.06)}

/* -------------------------------- VOET ----------------------------------- */
.sf-cart-foot{flex:0 0 auto; padding:18px 22px 22px; background:#fff}
.sf-cart-foot:empty{display:none}
.sf-cart-foot:not(:empty){border-top:1px solid var(--sf-line)}
.sf-row{display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:9px}
.sf-row span:first-child{color:var(--sf-muted)}
.sf-row span:last-child{color:var(--sf-ink); font-weight:600}
.sf-row.sf-total{margin:13px 0 17px; padding-top:15px; border-top:1px solid var(--sf-line); font-size:16px}
.sf-row.sf-total span:first-child{color:var(--sf-ink); font-weight:700}
.sf-row.sf-total span:last-child{font-weight:800; letter-spacing:-.02em}

.sf-cart .sf-checkout{
  display:block; width:100% !important; padding:15px !important; text-align:center;
  border-radius:12px !important; background:var(--sf-grad) !important; color:#fff !important;
  font-size:13.5px !important; font-weight:700 !important; letter-spacing:.02em !important;
  box-shadow:0 10px 26px -10px rgba(162,28,175,.6) !important;
  transition:transform var(--sf-t),filter var(--sf-t) !important;
}
.sf-cart .sf-checkout:hover{transform:translateY(-2px); filter:brightness(1.05)}

/* Rustige tekstknop — niet nóg een gradient-balk onder de checkout. */
.sf-cart .sf-clear{
  display:block; width:100% !important; margin-top:8px !important; padding:11px !important;
  border-radius:11px !important; text-align:center; cursor:pointer;
  font-size:12.5px !important; font-weight:600 !important; color:var(--sf-muted) !important;
  transition:background-color var(--sf-t),color var(--sf-t) !important;
}
.sf-cart .sf-clear:hover{background:var(--sf-surf2) !important; color:var(--sf-ink) !important}

/* ----------------------------- RESPONSIVE -------------------------------- */
/* Volledige rij past vanaf 1256px; 1280 geeft daar 24px lucht bovenop.
   Daaronder de burger — liever een net menu dan een balk die overloopt. */
@media (max-width:1279px){
  .sf-nav{display:none}
  .sf-header .sf-burger{display:flex}
  .sf-bar{justify-content:space-between}
  .sf-actions{margin-left:auto}
}
@media (max-width:520px){
  :root{--sf-h:64px; --sf-logo:32px}
  .sf-bar{padding:0 16px; gap:10px}
  .sf-cart-body{padding:4px 16px}
  .sf-cart-head,.sf-cart-foot{padding-left:16px; padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .sf-header *,.sf-cart *,.sf-overlay{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}