/* ==========================================================================
   Hippe Zeeuw · laag 3 — componenten
   Verbatim uit het concept (css/styles.css). Nieuw t.o.v. het concept:
   de zoek-overlay (het concept heeft alleen een dode zoekknop).
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.hero{ position:relative; background:var(--paper); }
.hero__strip{
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  height:clamp(560px,80vh,860px);
}
.hero__img{ margin:0; overflow:hidden; position:relative; }
.hero__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  transform:scale(1.06);
  animation:heroIn 1.8s var(--ease) forwards;
}
.hero__img:nth-child(2) img{ animation-delay:.08s; }
.hero__img:nth-child(3) img{ animation-delay:.16s; }
@keyframes heroIn{ to{ transform:scale(1); } }

.hero__plate{
  position:absolute;
  left:50%;
  bottom:clamp(38px,6vh,74px);
  transform:translateX(-50%);
  width:min(680px, calc(100% - 2*var(--gutter)));
  background:var(--paper);
  padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px);
  text-align:center;
  box-shadow:0 40px 90px -50px rgba(34,31,27,.4);
}
.hero__plate h1{ margin:16px 0 18px; }
.hero__plate .lead{ margin-inline:auto; max-width:44ch; }
.hero__cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}
.hero__cta--left{ justify-content:flex-start; }
.hero__scroll{
  position:absolute;
  left:var(--gutter);
  bottom:34px;
  writing-mode:vertical-rl;
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  gap:12px;
}
.hero__scroll::after{
  content:"";
  width:1px; height:46px;
  background:rgba(255,255,255,.7);
  animation:scrollLine 2.4s var(--ease-io) infinite;
  transform-origin:top;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

/* ------------------------------------------------------------- usp strip */
.usp{ border-block:1px solid var(--line); background:var(--paper); }
.usp__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.usp__item{
  padding:30px 26px;
  display:flex;
  align-items:center;
  gap:16px;
  border-left:1px solid var(--line);
}
.usp__item:first-child{ border-left:0; }
.usp__item svg{ width:22px; height:22px; stroke:var(--stone-dk); stroke-width:1.3; fill:none; flex:none; }
.usp__item span{ font-size:.8125rem; line-height:1.45; color:var(--ink-2); }
.usp__item b{ display:block; color:var(--ink); font-weight:600; font-size:.875rem; }

/* ------------------------------------------------------------ categories */
.cats__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,26px);
}
.cat{ display:block; }
.cat__media{
  position:relative;
  aspect-ratio:3/4.1;
  overflow:hidden;
  border-radius:999px 999px 4px 4px;
  background:var(--paper-2);
}
.cat__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 18%;
  transition:transform 1s var(--ease);
}
.cat:hover .cat__media img{ transform:scale(1.06); }
.cat__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(34,31,27,.34), rgba(34,31,27,0) 46%);
}
.cat__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.cat:hover .cat__foot{ border-color:var(--ink); }
.cat__foot h3{ font-size:1.25rem; }
.cat__foot span{ font-size:.75rem; color:var(--ink-3); letter-spacing:.06em; }

/* -------------------------------------------------------- product cards */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,34px) clamp(14px,1.6vw,26px);
}

/* AfterBuild 1 — winkel/archief: kolommen volgen loop_shop_columns (standaard 3).
   De media queries hieronder blijven leidend op kleinere schermen. */
.prod-grid--loop{ grid-template-columns:repeat(var(--hz-cols,3),1fr); }
.card{ position:relative; }
/* AfterBuild 7 — de productfoto's zijn staand 2:3 (1709x2560). De kaart
   hanteert nu diezelfde verhouding, zodat object-fit:cover niets meer hoeft
   weg te snijden: hoofd en schoenen blijven in beeld. */
.card__media{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--paper-2);
  display:block;
}
.card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .7s var(--ease), transform 1.1s var(--ease);
}
.card__media img.alt{ opacity:0; }
.card:hover .card__media img.main{ opacity:0; }
.card:hover .card__media img.alt{ opacity:1; }
.card:hover .card__media img{ transform:scale(1.045); }

.card__tag{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  background:var(--paper);
  color:var(--ink);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:999px;
}
.card__tag--sale{ background:var(--brick); color:#fff; }
.card__tag--label{ background:var(--stone); color:#fff; }
.card__tag--out{ background:var(--ink); color:var(--paper); }

.card__fav{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(252,251,248,.9);
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease);
}
.card:hover .card__fav,
.card__fav.is-on{ opacity:1; transform:translateY(0); }
.card__fav svg{ width:16px; height:16px; stroke:var(--ink); stroke-width:1.5; fill:none; }
.card__fav.is-on svg{ fill:var(--brick); stroke:var(--brick); }
.card__fav:hover{ background:#fff; }
.card__fav.is-busy{ opacity:.55; pointer-events:none; }

.card__body{ padding-top:15px; }
.card__cat{
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.card__name{
  font-family:var(--ff-display);
  font-size:1.28rem;
  line-height:1.2;
  margin:5px 0 7px;
  letter-spacing:-.01em;
}
.card__price{ display:flex; align-items:baseline; gap:9px; font-size:.9375rem; }
.card__price b{ font-weight:600; }
.card__price s{ color:var(--ink-3); font-size:.8125rem; text-decoration-thickness:1px; }
.card__price .now{ color:var(--brick); font-weight:600; }
/* Variabele producten in de sale: WooCommerce levert daar zijn eigen
   <del>/<ins> aan (get_price_html), niet onze .now + <s>. Zonder deze regels
   krijg je de browserstandaard: de nieuwe prijs onderstreept en de oude prijs
   even groot en even zwart als de nieuwe. Zelfde uiterlijk geven dus, en met
   :has() de nieuwe prijs vooraan zetten -- net als bij een simpel product.
   Browsers zonder :has() houden gewoon de volgorde van WooCommerce; de kleuren
   kloppen daar ook. LET OP: de flex-regel mag NOOIT op .card__price b in het
   algemeen, want bij een prijsbereik ("19,95 - 32,95") staat daar geen del in
   en zou het streepje een eigen flex-item worden. */
.card__price del{ color:var(--ink-3); font-size:.8125rem; text-decoration-thickness:1px; }
.card__price ins{ text-decoration:none; color:var(--brick); font-weight:600; }
.card__price b:has(del){ display:inline-flex; align-items:baseline; gap:9px; }
.card__price b:has(del) del{ order:2; }
.card__price b:has(del) ins{ order:1; }
.card__swatches{ display:flex; gap:5px; margin-top:9px; }
.card__swatches i{
  width:11px; height:11px;
  border-radius:50%;
  border:1px solid var(--line);
  display:block;
}

/* ------------------------------------------------------------- rail */
.rail-wrap{ position:relative; }
.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(230px, calc((var(--container) - 2*var(--gutter) - 3*26px)/4));
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }

.rail-nav{ display:flex; gap:8px; }
.rail-btn{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.rail-btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.rail-btn svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.4; fill:none; }
.rail-btn[disabled]{ opacity:.3; pointer-events:none; }

/* --------------------------------------------------------- eigen label */
.label-sec{ background:var(--paper-2); }
.label__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(34px,5vw,86px);
}
.label__media{
  position:relative;
  aspect-ratio:4/5;
  border-radius:999px 999px 6px 6px;
  overflow:hidden;
}
.label__media img{ width:100%; height:100%; object-fit:cover; object-position:center 26%; }
.label__badge{
  position:absolute;
  right:clamp(-10px,-1vw,0px);
  bottom:34px;
  background:var(--stone);
  color:#fff;
  padding:20px 26px;
  text-align:center;
  max-width:190px;
}
.label__badge b{
  display:block;
  font-family:var(--ff-display);
  font-size:1.75rem;
  line-height:1;
  margin-bottom:5px;
}
.label__badge span{
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.85;
}
.label__body h2{ margin:16px 0 20px; }
.label__specs{
  margin:28px 0;
  border-top:1px solid var(--line);
}
.label__specs li{
  display:flex;
  gap:18px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem;
}
.label__specs dt, .label__specs .k{
  flex:0 0 130px;
  color:var(--ink-3);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-top:3px;
}
.label__specs .v{ color:var(--ink-2); }
.label__thumbs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:30px;
}
.label__thumbs a{ aspect-ratio:3/4; overflow:hidden; display:block; }
.label__thumbs img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.label__thumbs a:hover img{ transform:scale(1.07); }

/* ---------------------------------------------------------------- melia */
.melia{ background:var(--paper); }
.melia__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(34px,5vw,86px);
  align-items:center;
}
.melia__media{
  aspect-ratio:4/5;
  border-radius:999px 999px 6px 6px;
  overflow:hidden;
  position:relative;
}
.melia__media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.melia__quote{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,2.5vw,2.1rem);
  line-height:1.28;
  font-style:italic;
  color:var(--ink);
  margin:20px 0 26px;
}
.melia__body p{ color:var(--ink-2); font-size:.9688rem; }
.melia__sign{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:.8125rem;
  color:var(--ink-3);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.melia__sign b{
  font-family:var(--ff-display);
  font-size:1.6rem;
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  font-weight:400;
}
.melia__facts{
  display:grid;
  grid-template-columns:repeat(var(--facts-cols,3),1fr);
  gap:0;
  margin-top:36px;
  border-top:1px solid var(--line);
}
.melia__facts div{ padding:22px 20px 0 0; }
.melia__facts b{
  display:block;
  font-family:var(--ff-display);
  font-size:2.2rem;
  line-height:1;
  color:var(--stone-dk);
}
.melia__facts span{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* -------------------------------------------------------------- reviews */
.reviews{ background:var(--stone); color:#fff; }
.reviews .kicker{ color:rgba(255,255,255,.75); }
.reviews h2{ color:#fff; }
.rev__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.34);
  margin-bottom:44px;
}
.rev__top h2{ margin-top:14px; }
.rev__score{ display:flex; align-items:center; gap:20px; }
.rev__score b{
  font-family:var(--ff-display);
  font-size:clamp(3rem,5vw,4.4rem);
  line-height:.9;
}
.rev__score small{ display:block; font-size:.8125rem; opacity:.78; letter-spacing:.06em; }
.rev__stars{ display:flex; gap:3px; margin-bottom:6px; }
.rev__stars svg{ width:15px; height:15px; fill:#fff; }
.rev__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); }
.rev__card blockquote{
  margin:0 0 18px;
  font-family:var(--ff-display);
  font-size:1.18rem;
  line-height:1.42;
  font-style:italic;
}
.rev__card cite{
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}
.rev__card .rev__stars svg{ width:12px; height:12px; opacity:.9; }

/* ------------------------------------------------------------ instagram */
.insta__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,14px);
}
.insta__grid a{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  display:block;
  background:var(--paper-2);
}
.insta__grid img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; transition:transform 1s var(--ease); }
.insta__grid a::after{
  content:"";
  position:absolute; inset:0;
  background:var(--stone-dk);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.insta__grid a:hover img{ transform:scale(1.07); }
.insta__grid a:hover::after{ opacity:.3; }

/* Smash Balloon-feed ([instagram-feed]) — wens klant 18-09-2026.
   De handmatige afbeeldingen zijn vervangen door de echte feed. De plugin
   brengt zijn eigen kop (avatar + gebruikersnaam) en een "Volg op Instagram"-
   knop mee; die dubbelen met onze eigen sectiekop en knop, dus die zetten we
   uit. Alles scoped op .insta__feed, zodat een feed die ergens anders wordt
   geplaatst zijn eigen kop gewoon houdt. */
.insta__feed .sb_instagram_header,
.insta__feed #sbi_load{ display:none; }

/* ---------------------------------------------------------- nieuwsbrief
   AfterBuild-klant 5 — de cadeaubon-sectie (.cadeau / .cadeau__grid /
   .giftcard) is van de homepage gehaald en vervangen door een accessoires-
   slider. Wat overbleef is de nieuwsbrief; die staat nu als eigen, volle
   donkere band onderaan en is daarom gecentreerd i.p.v. een halve kolom. */
.nl-band{ background:var(--ink); color:#fff; }
.nl-band .kicker{ color:rgba(255,255,255,.55); }
.nl-band h2{ color:#fff; margin:16px 0 18px; }
.nl-band p{ color:rgba(255,255,255,.72); }
.nl-band__inner{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
}
.nl-form{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.nl-form input{
  flex:1 1 240px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding:14px 2px;
  color:#fff;
  font:inherit;
  font-size:.9375rem;
  outline:none;
  text-align:center;
  transition:border-color .3s var(--ease);
}
.nl-form input::placeholder{ color:rgba(255,255,255,.42); }
.nl-form input:focus{ border-bottom-color:#fff; }
.nl-note{ font-size:.75rem; color:rgba(255,255,255,.45); margin-top:14px; }

/* Kop met zowel een tekstlink als de rail-knoppen (accessoires-slider). */
.sec-head__aside{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  flex-wrap:wrap;
}

/* ==========================================================================
   Zoek-overlay — NIEUW t.o.v. het concept.
   [hidden] MOET onklikbaar zijn: de base display:flex overschrijft anders de
   UA-regel en de onzichtbare overlay vangt alle clicks.
   De top-offset wordt in JS gezet op de live header-hoogte
   (getBoundingClientRect().bottom), nooit hardcoded.
   ========================================================================== */
.search-overlay{
  position:fixed;
  left:0; right:0;
  top:var(--hz-search-top, var(--hdr-h));
  bottom:0;
  z-index:var(--z-search);
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.search-overlay[hidden]{ display:none; }

.search-overlay__scrim{
  position:absolute;
  inset:0;
  background:rgba(34,31,27,.42);
  backdrop-filter:blur(2px);
  border:0;
  width:100%;
  cursor:default;
}
.search-overlay__panel{
  position:relative;
  z-index:1;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(34,31,27,.4);
  padding-block:clamp(26px,3.4vw,44px);
  max-height:100%;
  overflow-y:auto;
}
.search-form{
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid var(--ink);
  padding-bottom:12px;
}
.search-form svg{ width:20px; height:20px; stroke:var(--ink-3); stroke-width:1.4; fill:none; flex:none; }
.search-form input[type="search"]{
  flex:1 1 auto;
  border:0;
  background:transparent;
  outline:none;
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,3vw,2.4rem);
  line-height:1.2;
  color:var(--ink);
  padding:4px 0;
  min-width:0;
}
.search-form input[type="search"]::placeholder{ color:var(--ink-3); }
.search-form input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }
.search-form__close{
  flex:none;
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:background .25s var(--ease);
}
.search-form__close:hover{ background:var(--paper-2); }
.search-form__close svg{ stroke:var(--ink); width:18px; height:18px; }

.search-hint{
  margin-top:18px;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.search-sugg{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.search-sugg a{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 16px;
  font-size:.8125rem;
  color:var(--ink-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.search-sugg a:hover{ border-color:var(--ink); color:var(--ink); }

.search-results{ margin-top:30px; }
.search-results__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,26px);
}
.search-results__empty{ color:var(--ink-3); font-size:.9375rem; }
.search-results.is-busy{ opacity:.5; }

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .cats__grid{ grid-template-columns:repeat(3,1fr); }
  .rev__grid{ grid-template-columns:repeat(2,1fr); }
  .insta__grid{ grid-template-columns:repeat(4,1fr); }
  .search-results__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px){
  .hero__strip{ grid-template-columns:1fr; height:56vh; min-height:400px; }
  .hero__img:not(:nth-child(2)){ display:none; }
  .hero__plate{
    position:static;
    transform:none;
    width:100%;
    max-width:none;
    box-shadow:none;
    padding:clamp(30px,7vw,44px) var(--gutter);
    text-align:left;
  }
  .hero__plate .lead{ margin-inline:0; }
  .hero__cta{ justify-content:flex-start; }
  .hero__scroll{ display:none; }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .label__grid,.melia__grid{ grid-template-columns:1fr; }
  .melia__media,.label__media{ max-width:460px; }
}

@media (max-width:820px){
  .usp__grid{ grid-template-columns:repeat(2,1fr); }
  .usp__item{ border-left:0; border-top:1px solid var(--line); }
  .usp__item:nth-child(-n+2){ border-top:0; }
  .usp__item:nth-child(even){ border-left:1px solid var(--line); }
  .cats__grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .rail{ grid-auto-columns:minmax(200px,64vw); }
  .search-results__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px){
  .rev__grid{ grid-template-columns:1fr; }
  .insta__grid{ grid-template-columns:repeat(3,1fr); }
  .melia__facts{ grid-template-columns:repeat(var(--facts-cols-mob,2),1fr); }
  .card__fav{ opacity:1; transform:none; }
}