/*
 * Components — Wietzadenshop
 * ----------------------------------------
 * Gedeelde componenten: container, knoppen, logo, header, announce-balk,
 * leeftijdscheck. Secties van de homepage staan in home.css.
 *
 * Bron: docs/design/wietzadenshop-home.html
 */

/* ----------------------------------------
 * LAYOUT
 * ---------------------------------------- */

.container {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* Zichtbare focus in de huisstijl (briefing §6, prototype regel 372). */
:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

.site-main {
  display: block;
}

/*
 * Announce-balk en header zijn fixed. Op de homepage loopt de hero er bewust
 * onderdoor; op alle andere pagina's (briefing §7: licht, met vaste donkere
 * header) moet de content eronder beginnen.
 */
.wzs-inner .site-main {
  padding-top: 96px;
}

.wzs-inner.has-announce .site-main {
  padding-top: 134px;
}

/* Buiten de homepage is de header altijd donker, ook bovenaan de pagina. */
.wzs-inner .header {
  background-color: var(--color-bg);
  border-bottom:    1px solid var(--color-line);
}

/* Skip link — visueel verborgen tot focus. */
.skip-link {
  position: absolute;
  left:     -9999px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.skip-link:focus {
  left:             var(--space-4);
  top:              var(--space-4);
  z-index:          500;
  width:            auto;
  height:           auto;
  padding:          var(--space-3) var(--space-5);
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  border-radius:    var(--radius-sm);
}

/* ----------------------------------------
 * SECTIE-VARIANT — lichte secties
 *
 * De site is donker; secties met .lite draaien het palet om (Alle zaden,
 * Keuzehulp, SEO/FAQ). Gebruik binnen .lite consequent de -lite tokens.
 * ---------------------------------------- */

.lite {
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/* ----------------------------------------
 * KNOPPEN
 *
 * Drie varianten (briefing §1): groen = primaire CTA, wit = op donkere
 * fotobanden, outline = secundair. Allemaal radius 4px, uppercase Archivo,
 * lichte lift bij hover.
 * ---------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--btn-gap);
  height:           54px;
  padding:          0 30px;
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        var(--text-sm);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
  text-decoration:  none;
  border:           none;
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  transition:       transform var(--transition-fast),
                    background-color var(--transition-fast),
                    color var(--transition-fast),
                    border-color var(--transition-fast);
}

.btn--green {
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
}

.btn--green:hover {
  background-color: var(--color-primary-hover);
  transform:        translateY(-2px);
}

.btn--white {
  background-color: var(--color-text);
  color:            var(--color-bg);
}

.btn--white:hover {
  transform: translateY(-2px);
}

.btn--outline {
  background-color: transparent;
  color:            var(--color-text);
  border:           1.5px solid var(--color-line-strong);
}

.btn--outline:hover {
  border-color: var(--color-text);
}

.lite .btn--outline {
  color:        var(--color-text-lite);
  border-color: var(--color-line-hover-lite);
}

.lite .btn--outline:hover {
  border-color: var(--color-text-lite);
}

/* Pijltje in een knop schuift mee bij hover. */
.btn__arrow {
  transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ----------------------------------------
 * LOGO
 *
 * Inline SVG met currentColor: het groen ligt vast, de donkere delen volgen
 * de tekstkleur van de context.
 * ---------------------------------------- */

.logo {
  display:     flex;
  align-items: center;
  color:       var(--color-text);
}

.logo__svg {
  display:    block;
  height:     52px;
  width:      auto;
  transition: height var(--transition-base);
}

.logo__svg--large {
  height: 56px;
}

/* ----------------------------------------
 * ANNOUNCE-BALK
 * ---------------------------------------- */

.announce {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          310;
  height:           38px;
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  overflow:         hidden;
  white-space:      nowrap;
  transition:       transform var(--transition-base);
}

.announce.is-up {
  transform: translateY(-100%);
}

.announce__track {
  display:     inline-flex;
  height:      38px;
  align-items: center;
  animation:   wzs-march 32s linear infinite;
}

.announce__set {
  display: inline-flex;
}

.announce__item,
.announce__sep {
  display:        inline-flex;
  padding:        0 24px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      12.5px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-style:     normal;
}

@keyframes wzs-march {
  to { transform: translateX(-50%); }
}

/* ----------------------------------------
 * HEADER
 * ---------------------------------------- */

.header {
  position:      fixed;
  top:           38px;
  left:          0;
  right:         0;
  z-index:       300;
  border-bottom: 1px solid transparent;
  transition:    background-color var(--transition-base),
                 border-color var(--transition-base),
                 top var(--transition-base);
}

.header.is-stuck {
  top: 0;
}

.header.is-solid {
  background-color: rgba(12, 14, 11, 0.86);
  backdrop-filter:  blur(16px);
  border-bottom:    1px solid var(--color-line);
}

.header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          96px;
  transition:      height var(--transition-base);
}

.header.is-stuck .header__inner {
  height: 70px;
}

.header.is-stuck .logo__svg {
  height: 34px;
}

.header__nav {
  display: flex;
}

.header__menu {
  display:    flex;
  gap:        30px;
  list-style: none;
  margin:     0;
  padding:    0;
}

.header__menu a {
  font-family:     var(--font-heading);
  font-weight:     var(--font-semibold);
  font-size:       var(--text-sm);
  text-transform:  uppercase;
  letter-spacing:  var(--tracking-wide);
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.header__menu a:hover,
.header__menu .current-menu-item > a {
  color: var(--color-text);
}

/* ----------------------------------------
 * Uitklapmenu in de header
 *
 * Alleen "Categorieën" heeft subitems. Het paneel hangt aan het menu-item en
 * opent bij hover én bij toetsenbordfocus; het pijltje draait mee zodat je
 * ziet dat er iets onder zit.
 * ---------------------------------------- */

.header__menu > li {
  position: relative;
}

.header__menu .menu-item-has-children > a::after {
  content:        '';
  display:        inline-block;
  width:          5px;
  height:         5px;
  margin-left:    7px;
  vertical-align: 2px;
  border-right:   1.5px solid currentColor;
  border-bottom:  1.5px solid currentColor;
  transform:      rotate(45deg);
  transition:     transform var(--transition-fast);
}

.header__menu .menu-item-has-children:hover > a::after,
.header__menu .menu-item-has-children:focus-within > a::after {
  transform: rotate(-135deg);
}

.header__menu .sub-menu {
  position:      absolute;
  top:           100%;
  left:          50%;
  z-index:       60;
  min-width:     210px;
  margin:        0;
  padding:       10px;
  list-style:    none;
  background:    var(--color-card);
  border:        1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow:    0 18px 40px rgb(0 0 0 / 45%);

  /* Niet met display:none: dan is er geen overgang en slaan schermlezers
     het paneel over voordat het opent. */
  opacity:       0;
  visibility:    hidden;
  transform:     translate(-50%, 6px);
  transition:    opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

/* Onzichtbare brug, zodat de muis van het menu-item naar het paneel kan
   zonder dat het tussendoor sluit. */
.header__menu .sub-menu::before {
  content:  '';
  position: absolute;
  top:      -14px;
  left:     0;
  right:    0;
  height:   14px;
}

.header__menu .menu-item-has-children:hover > .sub-menu,
.header__menu .menu-item-has-children:focus-within > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translate(-50%, 0);
}

.header__menu .sub-menu a {
  display:        block;
  padding:        9px 12px;
  border-radius:  8px;
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wide);
  white-space:    nowrap;
  transition:     background-color var(--transition-fast), color var(--transition-fast);
}

.header__menu .sub-menu a:hover,
.header__menu .sub-menu .current-menu-item > a {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

.header__tools {
  display:     flex;
  align-items: center;
  gap:         18px;
}

.header__tool {
  display:    flex;
  padding:    2px;
  background: none;
  border:     none;
  color:      var(--color-text);
  cursor:     pointer;
}

.header__tool--cart {
  position: relative;
}

.header__cart-count {
  position:         absolute;
  top:              -6px;
  right:            -8px;
  min-width:        16px;
  height:           16px;
  padding:          0 4px;
  display:          grid;
  place-items:      center;
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  font-family:      var(--font-heading);
  font-weight:      var(--font-extrabold);
  font-size:        var(--text-2xs);
  border-radius:    var(--radius-full);
}

.header__burger {
  display: none;
}

/* ----------------------------------------
 * SECTIES
 * ---------------------------------------- */

.section {
  padding: var(--section-padding-y) 0;
}

.section__head {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  gap:             var(--space-6);
  margin-bottom:   var(--space-11);
  flex-wrap:       wrap;
}

.section__title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-section);
  line-height:    var(--leading-none);
  text-transform: uppercase;
}

.section__lead {
  margin-top: 10px;
  max-width:  46ch;
  font-size:  var(--text-base);
  color:      var(--color-text-muted);
}

.lite .section__lead {
  color: var(--color-text-muted-lite);
}

.section__side {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

/* ----------------------------------------
 * EYEBROW — groene bovenregel boven een kop
 *
 * Identiek gebruikt in de hero (§2.4) en de fotoband (§2.7).
 * ---------------------------------------- */

.eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  margin-bottom:  22px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--color-primary);
}

.lite .eyebrow {
  color: var(--color-primary-dark);
}

/* ----------------------------------------
 * REVEAL-ON-SCROLL (briefing §1)
 * ---------------------------------------- */

.is-reveal {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.is-reveal.is-in {
  opacity:   1;
  transform: none;
}

/* Zonder JS mag er niets onzichtbaar blijven staan. */
.no-js .is-reveal {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .is-reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}

/* ----------------------------------------
 * RAIL — horizontaal scrollende rij kaarten
 * ---------------------------------------- */

.rail {
  display:           flex;
  gap:               var(--grid-gap);
  overflow-x:        auto;
  scroll-snap-type:  x mandatory;
  scroll-behavior:   smooth;
  padding-bottom:    var(--space-2);
  scrollbar-width:   none;
}

.rail::-webkit-scrollbar {
  display: none;
}

/* Vier kaarten in beeld, minus drie keer de gap. */
.rail > .product-card {
  flex:              0 0 calc((100% - (var(--grid-gap) * 3)) / 4);
  scroll-snap-align: start;
}

/*
 * Het prototype houdt vier kaarten aan op élke breedte; op een telefoon levert
 * dat kaarten van 73px op. Hieronder schalen we mee: twee op tablet, en op
 * mobiel één kaart met een randje van de volgende in beeld — dat maakt
 * zichtbaar dat er geswipet kan worden.
 */
@media (max-width: 960px) {

  .rail > .product-card {
    flex: 0 0 calc((100% - var(--grid-gap)) / 2);
  }
}

@media (max-width: 560px) {

  .rail > .product-card {
    flex: 0 0 76%;
  }
}

.rail__arrows {
  display: flex;
  gap:     var(--space-2);
}

.rail__arrow {
  width:         46px;
  height:        46px;
  display:       grid;
  place-items:   center;
  background:    transparent;
  border:        1.5px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  color:         var(--color-text);
  cursor:        pointer;
  transition:    background-color var(--transition-fast),
                 color var(--transition-fast),
                 border-color var(--transition-fast);
}

.rail__arrow:hover {
  background-color: var(--color-text);
  border-color:     var(--color-text);
  color:            var(--color-bg);
}

.lite .rail__arrow {
  color:        var(--color-text-lite);
  border-color: var(--color-line-strong-lite);
}

.lite .rail__arrow:hover {
  background-color: var(--color-text-lite);
  border-color:     var(--color-text-lite);
  color:            var(--color-card-lite);
}

/* ----------------------------------------
 * FILTERBALK (briefing §4)
 * ---------------------------------------- */

.filterbar {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  margin-bottom:  36px;
}

.filterbar__group {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);
}

.filterbar__label {
  width:          96px;
  flex-shrink:    0;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-faint);
}

.lite .filterbar__label {
  color: var(--color-text-faint-lite);
}

.chip {
  display:         inline-flex;
  align-items:     center;
  height:          40px;
  padding:         0 18px;
  background:      transparent;
  border:          1.5px solid var(--color-line-strong);
  border-radius:   var(--radius-full);
  color:           var(--color-text);
  font-family:     var(--font-heading);
  font-weight:     var(--font-semibold);
  font-size:       13px;
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast);
}

.chip:hover {
  border-color: var(--color-text);
  color:        var(--color-text);
}

.chip.is-on {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--color-on-primary);
}

.lite .chip {
  border-color: var(--color-line-strong-lite);
  color:        var(--color-text-lite);
}

.lite .chip:hover {
  border-color: var(--color-text-lite);
  color:        var(--color-text-lite);
}

.lite .chip.is-on {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            var(--color-on-primary);
}

.filterbar__reset {
  align-self:      flex-start;
  margin-top:      6px;
  padding:         0;
  background:      none;
  border:          none;
  font-family:     var(--font-heading);
  font-weight:     var(--font-semibold);
  font-size:       var(--text-xs);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--color-text-faint);
  cursor:          pointer;
  transition:      color var(--transition-fast);
}

.filterbar__reset:hover {
  color: var(--color-text);
}

.lite .filterbar__reset {
  color: var(--color-text-subtle-lite);
}

.lite .filterbar__reset:hover {
  color: var(--color-text-lite);
}

/* ----------------------------------------
 * PRODUCTGRID
 * ---------------------------------------- */

.product-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--grid-gap);
}

/* Kolomvarianten: drie in de shop, vier op de merk- en productpagina. */
.product-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.product-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.product-grid:empty {
  display: none;
}

/* Teller links, doorklik naar de shop rechts. */
.product-grid__foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  flex-wrap:       wrap;
  margin-top:      26px;
}

.product-grid__count {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-faint);
}

@media (max-width: 640px) {
  .product-grid__foot {
    flex-direction: column;
    align-items:    stretch;
  }

  .product-grid__more {
    justify-content: center;
  }
}

.lite .product-grid__count {
  color: var(--color-text-faint-lite);
}

.product-grid__empty {
  padding:    48px var(--space-2);
  text-align: center;
  font-size:  15px;
  color:      var(--color-text-muted);
}

.lite .product-grid__empty {
  color: var(--color-text-subtle-lite);
}

/* Tijdens het ophalen blijven de oude resultaten staan, iets gedempt. */
#wzs-filter-results.is-laden {
  opacity:        0.45;
  transition:     opacity var(--transition-fast);
  pointer-events: none;
}

/* Prototype regel 350 en 364. */
@media (max-width: 960px) {

  .product-grid,
  .product-grid--3,
  .product-grid--4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {

  .product-grid,
  .product-grid--3,
  .product-grid--4 {
    grid-template-columns: 1fr;
  }

  .filterbar__label {
    width: 100%;
  }
}

/* ----------------------------------------
 * PAGINAKOP
 *
 * Grote titel boven een pagina: winkelwagen, afrekenen, account en contact.
 * ---------------------------------------- */

.page-head {
  padding: 20px 0 8px;
}

.page-head__title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(34px, 5vw, 58px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* ----------------------------------------
 * VERHAAL-SPLIT — foto naast tekst
 *
 * Gedeeld door de Green Nuggets-merkpagina en Over ons; in beide ontwerpen is
 * het hetzelfde blok.
 * ---------------------------------------- */

.verhaal {
  padding: 100px 0;
}

.verhaal__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   62px;
  align-items:           center;
}

/* Foto rechts in plaats van links. */
.verhaal__grid--omgekeerd .verhaal__media {
  order: 2;
}

.verhaal__media {
  aspect-ratio:     4 / 3;
  overflow:         hidden;
  border-radius:    var(--radius-band);
  background-color: var(--color-surface-lite);
}

.verhaal__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.verhaal__title {
  margin-bottom:  var(--space-5);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(30px, 4vw, 46px);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.verhaal__text p {
  max-width:     52ch;
  margin-bottom: var(--space-4);
  font-size:     16.5px;
  color:         var(--color-text-muted-lite);
}

.verhaal__sig {
  margin-top:  26px;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size:   15px;
  color:       var(--color-text-lite);
}

.verhaal__sig span {
  display:     block;
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size:   13px;
  color:       var(--color-text-faint-lite);
}

/* ----------------------------------------
 * ICOONKAARTEN — waar het merk voor staat
 *
 * Gedeeld door de merkpagina ("pijlers") en Over ons ("waar we in geloven").
 * ---------------------------------------- */

.pijlers {
  padding-bottom: 100px;
}

.pijlers__title {
  margin-bottom:  40px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(28px, 4vw, 44px);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-align:     center;
}

.pijlers__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
}

.pijler {
  padding:          28px 24px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.pijler__icon {
  display:          grid;
  place-items:      center;
  width:            46px;
  height:           46px;
  margin-bottom:    18px;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    11px;
}

.pijler__title {
  margin-bottom:  var(--space-2);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-base);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.pijler__text {
  font-size: var(--text-sm);
  color:     var(--color-text-muted-lite);
}

/* ----------------------------------------
 * SLOTBLOK — kop, tekst en één knop
 * ---------------------------------------- */

.slot-cta {
  padding: 100px 0;
}

.slot-cta__inner {
  text-align: center;
}

.slot-cta__title {
  margin-bottom:  14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(28px, 4vw, 46px);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.slot-cta__lead {
  max-width: 46ch;
  margin:    0 auto 28px;
  font-size: var(--text-base);
  color:     var(--color-text-muted-lite);
}

@media (max-width: 960px) {

  .verhaal__grid {
    grid-template-columns: 1fr;
    gap:                   34px;
  }

  /* Op één kolom staat de foto altijd boven de tekst. */
  .verhaal__grid--omgekeerd .verhaal__media {
    order: 0;
  }

  .pijlers__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {

  .pijlers__grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------
 * PRODUCTKAART (briefing §4)
 * ---------------------------------------- */

.product-card {
  display:          flex;
  flex-direction:   column;
  background-color: var(--color-card);
  border:           1px solid var(--color-line);
  border-radius:    var(--radius-card);
  overflow:         hidden;
  transition:       border-color var(--transition-base),
                    transform var(--transition-base);
}

.product-card:hover {
  border-color: var(--color-line-strong);
  transform:    translateY(-3px);
}

.product-card__media {
  position:      relative;
  display:       block;
  aspect-ratio:  1 / 1;
  overflow:      hidden;
}

.product-card__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__media img {
  transform: scale(1.08);
}

.product-card__badge {
  position:         absolute;
  top:              12px;
  left:             12px;
  z-index:          2;
  padding:          5px 9px;
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        var(--text-2xs);
  letter-spacing:   var(--tracking-badge);
  text-transform:   uppercase;
  border-radius:    var(--radius-badge);
}

.product-card__badge--dark {
  background-color: var(--color-text);
  color:            var(--color-bg);
}

.lite .product-card__badge--dark {
  background-color: var(--color-text-lite);
  color:            var(--color-card-lite);
}

.product-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        18px;
}

.product-card__title {
  margin-bottom:  5px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-lg);
  line-height:    1;
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}

.product-card__subtitle {
  margin-bottom: var(--space-4);
  font-size:     13px;
  color:         var(--color-text-muted);
}

.product-card__specs {
  display:        flex;
  align-items:    center;
  gap:            18px;
  margin-bottom:  var(--space-4);
  padding-top:    13px;
  border-top:     1px solid var(--color-line);
}

.product-card__spec {
  display:     flex;
  align-items: center;
  gap:         7px;
}

.product-card__spec svg {
  color: var(--color-text-muted);
}

.product-card__spec b {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size:   12.5px;
  color:       var(--color-text);
}

.product-card__spec-label {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-text-muted);
}

.product-card__meter {
  display: inline-flex;
  gap:     3px;
}

.product-card__meter i {
  width:            6px;
  height:           13px;
  background-color: var(--color-line-strong);
  border-radius:    var(--radius-xs);
}

.product-card__meter--1 i:nth-child(1),
.product-card__meter--2 i:nth-child(-n + 2),
.product-card__meter--3 i:nth-child(-n + 3) {
  background-color: var(--color-primary);
}

.product-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  margin-top:      auto;
}

.product-card__price {
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size:   var(--text-lg);
}

.product-card__price-label {
  display:       block;
  margin-bottom: -2px;
  font-family:   var(--font-body);
  font-weight:   var(--font-medium);
  font-size:     11px;
  color:         var(--color-text-faint);
}

.product-card__add {
  display:          inline-flex;
  align-items:      center;
  gap:              7px;
  height:           42px;
  padding:          0 15px;
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        11.5px;
  letter-spacing:   0.03em;
  text-transform:   uppercase;
  text-decoration:  none;
  border:           none;
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  transition:       background-color var(--transition-fast);
}

.product-card__add:hover {
  background-color: var(--color-primary-hover);
  color:            var(--color-on-primary);
}

/*
 * Op smalle kaarten (carousel op mobiel) past prijs + knop niet naast elkaar.
 * Liever de knop eronder over de volle breedte dan het label over twee regels.
 */
.product-card__add {
  white-space: nowrap;
}

@media (max-width: 560px) {

  .product-card__footer {
    flex-wrap: wrap;
    gap:       var(--space-4);
  }

  .product-card__add {
    flex:            1 1 100%;
    justify-content: center;
  }
}

/* ----------------------------------------
 * PRODUCTKAART — lichte secties
 *
 * Let op: ook het "vanaf"-label meenemen. In het prototype bleef dat op de
 * donkere faint-kleur staan, waardoor het wit-op-wit onzichtbaar werd.
 * ---------------------------------------- */

.lite .product-card {
  background-color: var(--color-card-lite);
  border-color:     var(--color-line-lite);
}

.lite .product-card:hover {
  border-color: var(--color-line-hover-lite);
}

.lite .product-card__title,
.lite .product-card__price,
.lite .product-card__spec b {
  color: var(--color-text-lite);
}

.lite .product-card__subtitle {
  color: var(--color-text-muted-lite);
}

.lite .product-card__specs {
  border-top-color: var(--color-line-lite);
}

.lite .product-card__spec-label,
.lite .product-card__spec svg {
  color: var(--color-text-subtle-lite);
}

.lite .product-card__price-label {
  color: var(--color-text-faint-lite);
}

.lite .product-card__meter i {
  background-color: var(--color-line-strong-lite);
}

/* De gevulde balkjes moeten hier herhaald worden: de regel hierboven heeft
   dezelfde specificiteit en staat later, dus zonder dit wordt alles grijs. */
.lite .product-card__meter--1 i:nth-child(1),
.lite .product-card__meter--2 i:nth-child(-n + 2),
.lite .product-card__meter--3 i:nth-child(-n + 3) {
  background-color: var(--color-primary);
}

/* ----------------------------------------
 * FOOTER (§2.16)
 * ---------------------------------------- */

.footer {
  padding:          76px 0 36px;
  background-color: var(--color-bg);
  border-top:       1px solid var(--color-line);
}

.footer__top {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:                   var(--space-10);
  margin-bottom:         56px;
}

.footer__brand .logo {
  margin-bottom: var(--space-4);
}

.footer__tagline {
  max-width:     30ch;
  margin-bottom: 22px;
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
}

.footer__address {
  font-style:  normal;
  font-size:   var(--text-sm);
  line-height: 1.85;
  color:       var(--color-text-muted);
}

.footer__address b {
  font-weight: var(--font-semibold);
  color:       var(--color-text);
}

.footer__col-title {
  margin-bottom:  18px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-primary);
}

.footer__menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

.footer__menu a {
  display:         block;
  margin-bottom:   11px;
  font-size:       14.5px;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer__menu a:hover,
.footer__menu .current-menu-item > a {
  color: var(--color-text);
}

.footer__bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-5);
  flex-wrap:       wrap;
  padding-top:     var(--space-6);
  border-top:      1px solid var(--color-line);
}

/* Rij juridische pagina's boven de kleine juridische tekst, zie footer.php. */
.footer__legal-menu {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
  padding:       0;
  list-style:    none;
}

.footer__legal-menu a {
  font-family:     var(--font-heading);
  font-weight:     var(--font-medium);
  font-size:       11px;
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer__legal-menu a:hover {
  color: var(--color-text);
}

.footer__legal p {
  max-width:      58ch;
  font-family:    var(--font-heading);
  font-weight:    var(--font-medium);
  font-size:      11px;
  letter-spacing: var(--tracking-wider);
  line-height:    1.7;
  text-transform: uppercase;
  color:          var(--color-text-faint);
}

/* Loopt mee in de tekst van de juridische regel, zie footer.php. */
.footer__cookies {
  margin-left:     var(--space-2);
  padding:         0;
  background:      none;
  border:          none;
  font-family:     var(--font-heading);
  font-weight:     var(--font-medium);
  font-size:       11px;
  letter-spacing:  var(--tracking-wider);
  text-transform:  uppercase;
  color:           var(--color-text-faint);
  text-decoration: underline;
  cursor:          pointer;
  transition:      color var(--transition-fast);
}

.footer__cookies:hover {
  color: var(--color-text);
}

.footer__pay-age {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

.footer__pay {
  display:   flex;
  gap:       var(--space-2);
  flex-wrap: wrap;
}

.footer__pay span {
  padding:        6px 10px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      11px;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  border:         1px solid var(--color-line);
  border-radius:  5px;
}

.footer__age {
  padding:        6px 10px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      11px;
  text-transform: uppercase;
  color:          var(--color-primary);
  border:         1.5px solid var(--color-primary);
  border-radius:  var(--radius-sm);
}

/* Prototype regel 359 en 367. */
@media (max-width: 960px) {

  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {

  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------
 * WORDPRESS-ADMINBALK
 *
 * Voor ingelogde gebruikers staat er een vaste balk bovenaan (32px, en 46px
 * onder 783px). Alles wat wij vastzetten moet daaronder beginnen, anders valt
 * de adminbalk over de announce-balk en de header heen.
 *
 * Onder 601px zet WordPress de adminbalk op position:absolute — die scrollt
 * dan gewoon mee, dus daar hoeven we niets te verschuiven.
 * ---------------------------------------- */

@media screen and (min-width: 601px) {

  .admin-bar .announce           { top: 46px; }
  .admin-bar .header             { top: 84px; }
  .admin-bar .header.is-stuck    { top: 46px; }
  .admin-bar .mobile-nav         { top: 46px; }
}

@media screen and (min-width: 783px) {

  .admin-bar .announce           { top: 32px; }
  .admin-bar .header             { top: 70px; }
  .admin-bar .header.is-stuck    { top: 32px; }
  .admin-bar .mobile-nav         { top: 32px; }
}

/* ----------------------------------------
 * MOBIEL MENU
 *
 * Niet in het prototype aanwezig — in overleg toegevoegd. Zelfde taal als de
 * rest: donker paneel, Archivo in hoofdletters, groen bij hover.
 * ---------------------------------------- */

.mobile-nav {
  position:         fixed;
  inset:            0;
  z-index:          320;
  display:          flex;
  flex-direction:   column;
  background-color: rgba(12, 14, 11, 0.98);
  backdrop-filter:  blur(16px);
  transform:        translateX(100%);
  transition:       transform var(--transition-base);
  overflow-y:       auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

/* .container heeft margin:0 auto, en een auto-marge overrulet align-items:
   stretch — zonder deze regel krimpen de panelen naar hun inhoud en gaan ze
   midden in het scherm hangen. */
.mobile-nav > .container {
  width: 100%;
}

.mobile-nav__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          96px;
  flex:            0 0 auto;
}

.mobile-nav__head .logo__svg {
  height: 40px;
}

.mobile-nav__close {
  display:    flex;
  padding:    var(--space-2);
  background: none;
  border:     none;
  color:      var(--color-text);
  cursor:     pointer;
}

.mobile-nav__body {
  flex:       1 1 auto;
  padding-top: var(--space-6);
}

.mobile-nav__menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

.mobile-nav__menu li {
  border-bottom: 1px solid var(--color-line);
}

.mobile-nav__menu a {
  display:         block;
  padding:         var(--space-5) 0;
  font-family:     var(--font-heading);
  font-weight:     var(--font-extrabold);
  font-size:       var(--text-2xl);
  line-height:     var(--leading-tight);
  letter-spacing:  var(--tracking-tight);
  text-transform:  uppercase;
  color:           var(--color-text);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.mobile-nav__menu a:hover,
.mobile-nav__menu .current-menu-item > a {
  color: var(--color-primary);
}

/* Subitems staan hier gewoon open, ingesprongen en kleiner. Uitklappen zou
   een extra tik kosten in een menu dat toch al helemaal past. */
.mobile-nav__menu .sub-menu {
  margin:     0 0 var(--space-4);
  padding:    0;
  list-style: none;
}

.mobile-nav__menu .menu-item-has-children > a {
  padding-bottom: var(--space-3);
}

.mobile-nav__menu .sub-menu li {
  border-bottom: 0;
}

.mobile-nav__menu .sub-menu a {
  padding:        7px 0 7px var(--space-4);
  font-weight:    var(--font-semibold);
  font-size:      var(--text-base);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-muted);
}

.mobile-nav__foot {
  flex:           0 0 auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding-top:    var(--space-6);
  padding-bottom: var(--space-8);
  border-top:     1px solid var(--color-line);
}

.mobile-nav__link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-3);
  font-family:     var(--font-heading);
  font-weight:     var(--font-semibold);
  font-size:       var(--text-sm);
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.mobile-nav__link:hover {
  color: var(--color-text);
}

.mobile-nav__count {
  min-width:        20px;
  height:           20px;
  padding:          0 6px;
  display:          grid;
  place-items:      center;
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  font-size:        var(--text-2xs);
  font-weight:      var(--font-extrabold);
  border-radius:    var(--radius-full);
}

/* ----------------------------------------
 * LEEFTIJDSCHECK (18+)
 * ---------------------------------------- */

.age-gate {
  position:        fixed;
  inset:           0;
  z-index:         400;
  display:         grid;
  place-items:     center;
  padding:         var(--space-6);
  background:      rgba(6, 8, 5, 0.92);
  backdrop-filter: blur(8px);
}

.age-gate.is-hidden {
  display: none;
}

.age-gate__inner {
  max-width:  460px;
  text-align: center;
}

.age-gate__eyebrow {
  margin-bottom:  22px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color:          var(--color-primary);
}

.age-gate__title {
  margin-bottom:  var(--space-4);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-display);
  line-height:    var(--leading-none);
  text-transform: uppercase;
}

.age-gate__text {
  margin-bottom: 30px;
  color:         var(--color-text-muted);
  font-size:     var(--text-base);
}

.age-gate__actions {
  display:         flex;
  gap:             var(--space-3);
  justify-content: center;
  flex-wrap:       wrap;
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .header__nav {
    display: none;
  }

  .header__burger {
    display: flex;
  }
}