/* ==========================================================================
   Hippe Zeeuw · laag 1 — global
   Tokens verbatim overgenomen uit het concept (css/styles.css :root).
   Niet hernoemen, niet "verbeteren".
   ========================================================================== */

:root{
  --paper:      #FCFBF8;
  --paper-2:    #F4F1EA;
  --paper-3:    #EAE5DA;
  --ink:        #221F1B;
  --ink-2:      #5F5A53;
  --ink-3:      #8E887F;
  --line:       rgba(34,31,27,.13);
  --line-2:     rgba(34,31,27,.07);

  --stone:      #a29a8f;
  --stone-dk:   #6E6659;
  --stone-lt:   #EFECE6;

  --brick:      #9E3B2A;
  --gold:       #B79155;

  --ff-display: "Instrument Serif", "Times New Roman", serif;
  --ff-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container:  1320px;
  --gutter:     clamp(20px, 4.2vw, 60px);
  --hdr-h:      86px;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-io:    cubic-bezier(.65,.05,.36,1);

  /* z-index stack — side cart bovenaan, boven header en mobile-nav */
  --z-hdr:      60;
  --z-search:   90;
  --z-scrim:    110;
  --z-drawer:   120;
  --z-cart:     140;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--stone); color:#fff; }

.screen-reader-text,
.hz-sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.screen-reader-text:focus{
  position:static;
  width:auto; height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
}

.hz-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
}
.hz-skip:focus{ left:0; }

/* --------------------------------------------------------------- layout */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(72px,9vw,132px); }
.section--tight{ padding-block:clamp(52px,6vw,88px); }
.bleed{ width:100%; }

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:15px 30px;
  border-radius:999px;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  will-change:transform;
}
.btn:active{ transform:translateY(1px); }

.btn--fill{ background:var(--stone); color:#fff; }
.btn--fill:hover{ background:var(--ink); color:var(--paper); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }

.btn--light{ background:var(--paper); color:var(--ink); }
.btn--light:hover{ background:var(--ink); color:var(--paper); }

.btn--outline-lt{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn--outline-lt:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* volle breedte — min-width i.p.v. width, robuust tegen flex-shrink */
.btn--block{ min-width:100%; }

/* underline text-link met de boutique hairline */
.tlink{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid var(--ink);
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.tlink:hover{ color:var(--stone-dk); border-color:var(--stone-dk); gap:.85em; }
.tlink svg{ width:14px; height:14px; }

/* ------------------------------------------------------- announce bar */
.announce{
  background:var(--stone);
  color:#fff;
  font-size:.75rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:500;
  overflow:hidden;
  position:relative;
  height:38px;
  display:flex;
  align-items:center;
}
.announce__track{
  display:flex;
  gap:0;
  white-space:nowrap;
  animation:slide 42s linear infinite;
}
.announce:hover .announce__track{ animation-play-state:paused; }
.announce__set{ display:flex; flex:none; }
.announce__set span{
  padding-inline:30px;
  display:inline-flex;
  align-items:center;
  gap:30px;
}
.announce__set span::after{
  content:"";
  width:4px; height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky;
  top:0;
  z-index:var(--z-hdr);
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 30px rgba(34,31,27,.05);
}
.hdr__inner{
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,34px);
}
.hdr__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
}
/* AfterBuild-klant 2 — logo's staan altijd op vaste hoogte met vrije breedte.
   max-width + object-fit:contain vangen af dat een toekomstig, breder logo de
   header of de drawer uit elkaar duwt. */
.hdr__logo img{ height:52px; width:auto; max-width:200px; object-fit:contain; }
.hdr__logo b{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:1.5rem;
  letter-spacing:-.01em;
  display:none;
}
.hdr__logo--text b{ display:block; }

.hdr__tools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.icon-btn{
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  position:relative;
  transition:background .25s var(--ease);
}
.icon-btn:hover{ background:var(--paper-2); }
.icon-btn svg{ width:19px; height:19px; stroke:var(--ink); stroke-width:1.4; fill:none; }
.icon-btn__count{
  position:absolute;
  top:5px; right:4px;
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:.625rem;
  font-weight:600;
  display:grid;
  place-items:center;
  letter-spacing:0;
}

/* AfterBuild 3 — verlanglijst leeg = geen badge. */
.hz-fav-count.is-empty{ display:none; }

/* nav — wens klant 18-09-2026: het menu stond links tegen het logo
   aangeplakt met een gat van ~250px tussen het laatste item en de iconen.
   margin-inline:auto verdeelt de vrije ruimte gelijk links en rechts van de
   navigatie, zodat die optisch in het midden van de balk staat. Let op: dit
   werkt alleen zolang .hdr__tools GEEN margin-left:auto heeft (twee auto-
   marges delen de ruimte en dan schuift het menu weer naar links). Onder
   1024px staat .nav op display:none en krijgt .hdr__tools die auto-marge
   terug -- zie de media query onderaan. */
.nav{ flex:0 1 auto; min-width:0; margin-inline:auto; }
.nav > ul{ display:flex; align-items:center; gap:clamp(14px,1.7vw,28px); }
.nav__a{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:10px 0;
  position:relative;
  white-space:nowrap;
}
.nav__a::after{
  content:"";
  position:absolute;
  left:0; bottom:4px;
  width:100%; height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav__a:hover::after,
.nav li.has-drop:hover > .nav__a::after{ transform:scaleX(1); transform-origin:left; }
.nav__a--sale{ color:var(--brick); }
.nav__a--sale::after{ background:var(--brick); }
.nav__a svg{ width:9px; height:9px; stroke:currentColor; stroke-width:2; fill:none; opacity:.5; }

.has-drop{ position:relative; }
.drop{
  position:absolute;
  top:100%; left:-22px;
  min-width:216px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:14px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow:0 24px 50px -24px rgba(34,31,27,.22);
}
.has-drop:hover .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop a{
  display:block;
  padding:8px 24px;
  font-size:.875rem;
  color:var(--ink-2);
  transition:color .2s var(--ease), padding-left .25s var(--ease);
}
.drop a:hover{ color:var(--stone-dk); padding-left:29px; }

.burger{ display:none; }

/* --------------------------------------------------------------- footer */
.ftr{ background:var(--paper); border-top:1px solid var(--line); }
.ftr__top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(26px,3.4vw,60px);
  padding-block:clamp(56px,6vw,84px);
}
.ftr__brand img{ height:76px; width:auto; max-width:240px; object-fit:contain; margin-bottom:20px; }
.ftr__brand p{ font-size:.875rem; color:var(--ink-2); max-width:34ch; }
.ftr h4{
  font-family:var(--ff-sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:18px;
}
.ftr li{ margin-bottom:10px; }
.ftr li a{ font-size:.875rem; color:var(--ink-2); transition:color .22s var(--ease); }
.ftr li a:hover{ color:var(--stone-dk); }
.ftr__social{ display:flex; gap:9px; margin-top:22px; }
.ftr__social a{
  width:38px; height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.ftr__social a:hover{ background:var(--ink); border-color:var(--ink); }
.ftr__social svg{ width:15px; height:15px; fill:var(--ink); transition:fill .25s var(--ease); }
.ftr__social a:hover svg{ fill:var(--paper); }
.ftr__bot{
  border-top:1px solid var(--line);
  padding-block:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:.75rem;
  color:var(--ink-3);
}
.ftr__pay{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ftr__pay span{
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px 9px;
  font-size:.625rem;
  letter-spacing:.06em;
  color:var(--ink-2);
}
.ftr__note{ font-size:.8125rem; color:var(--ink-2); margin-top:16px; }

/* --------------------------------------------------------------- drawer */
.drawer{
  position:fixed;
  inset:0 auto 0 0;
  width:min(88vw,380px);
  background:var(--paper);
  z-index:var(--z-drawer);
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.drawer.is-open{ transform:none; }
.drawer__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 24px;
  border-bottom:1px solid var(--line);
}
.drawer__logo{ display:flex; align-items:center; min-width:0; }
.drawer__head img{ height:44px; width:auto; max-width:170px; object-fit:contain; }
.drawer nav{ padding:14px 24px 40px; }
.drawer nav > ul > li{ border-bottom:1px solid var(--line-2); }
.drawer nav a{
  display:block;
  padding:15px 0;
  font-family:var(--ff-display);
  font-size:1.45rem;
  letter-spacing:-.01em;
}
.drawer nav .sub a{
  font-family:var(--ff-sans);
  font-size:.875rem;
  padding:7px 0 7px 16px;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.scrim{
  position:fixed;
  inset:0;
  background:rgba(34,31,27,.42);
  backdrop-filter:blur(2px);
  z-index:var(--z-scrim);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

/* -------------------------------------------------------------- reveal */
.rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; }
.rv-d2{ transition-delay:.16s; }
.rv-d3{ transition-delay:.24s; }
.rv-d4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  :root{ --hdr-h:72px; }
  .nav{ display:none; }
  /* geen zichtbare nav meer om de ruimte te verdelen: de iconen worden hier
     zelf naar rechts geduwd. */
  .hdr__tools{ margin-left:auto; }
  .burger{
    display:grid;
    justify-self:start;
    width:42px; height:42px;
    place-items:center;
    gap:5px;
    align-content:center;
  }
  .burger i{ width:20px; height:1.5px; background:var(--ink); display:block; transition:transform .3s var(--ease); }
  .hdr__logo img{ height:44px; max-width:150px; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  :root{ --gutter:18px; }
  .announce{ font-size:.6875rem; }
  .ftr__top{ grid-template-columns:1fr; }
}