/* ------------------------------------------------------------------
   Elektranu - structural styles.
   Mobile-first. Light mode only, by design.
   Visual design direction lands later; this file is scaffolding.
   ------------------------------------------------------------------ */

/* ---------- Header ---------- */

.enu-header {
  border-bottom: 1px solid var(--wp--preset--color--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.enu-header__bar {
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--header--height);
}

.enu-header__brand a {
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  letter-spacing: -0.01em;
}

.enu-header__actions {
  gap: var(--wp--preset--spacing--10);
}

/* Icon buttons - cart and account */
.enu-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--text);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1;
  transition: background-color var(--wp--custom--transition--base);
}
.enu-icon-link:hover {
  background-color: var(--wp--preset--color--surface);
}
.enu-icon-link svg {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}
.enu-icon-link__label {
  display: none;
}

/* Cart badge */
.enu-cart {
  position: relative;
}
.enu-cart__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Hamburger - mobile only */
.enu-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  cursor: pointer;
}
.enu-hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--wp--preset--color--text);
  border-radius: 2px;
  transition: transform var(--wp--custom--transition--base),
              opacity var(--wp--custom--transition--base);
}
.enu-hamburger[aria-expanded="true"] .enu-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.enu-hamburger[aria-expanded="true"] .enu-hamburger__bar:nth-child(2) {
  opacity: 0;
}
.enu-hamburger[aria-expanded="true"] .enu-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Search - prominent, full width on mobile */
.enu-header__search {
  margin-top: var(--wp--preset--spacing--20);
}
.enu-header__search .wp-block-search__inside-wrapper {
  border: 2px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: 2px;
  background: var(--wp--preset--color--base);
  transition: border-color var(--wp--custom--transition--base);
}
.enu-header__search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--primary);
}
.enu-header__search .wp-block-search__input {
  border: 0;
  padding: 0.6rem 0.75rem;
  font-size: 16px; /* 16px prevents iOS zoom-on-focus */
  background: transparent;
}
.enu-header__search .wp-block-search__input:focus {
  outline: none;
}
.enu-header__search .wp-block-search__button {
  margin: 0;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--primary);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
}
.enu-header__search .wp-block-search__button:hover {
  background: var(--wp--preset--color--primary-dark);
}

/* Nav is collapsed on mobile, toggled by the hamburger */
.enu-header__nav {
  display: none;
}
.enu-header__nav.is-open {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  padding-top: var(--wp--preset--spacing--20);
  border-top: 1px solid var(--wp--preset--color--border);
}
/* Primary nav list - generated by [enu_primary_nav] */
.enu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0;
  padding: 0;
}
.enu-nav__item a {
  display: block;
  padding: 0.25rem 0;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}
.enu-nav__item a:hover {
  color: var(--wp--preset--color--primary);
}

/* ---------- Category grid (homepage) ---------- */

.enu-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
  list-style: none;
  margin: 0;
  padding: 0;
}
.enu-cat-grid__item a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color var(--wp--custom--transition--base),
              box-shadow var(--wp--custom--transition--base);
}
.enu-cat-grid__item a:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: var(--wp--preset--shadow--md);
}
.enu-cat-grid__count {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--wp--preset--color--text-muted);
}

/* Het productraster stond hier met de presets van theme.json. Het is
   verplaatst naar onderaan dit bestand en rekent nu in dezelfde tokens
   als de kaart op de voorpagina. */

/* ---------- Single product ---------- */

.enu-product .woocommerce-product-gallery {
  margin-bottom: var(--wp--preset--spacing--40);
}
.enu-product .product_meta {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--border);
  margin-top: var(--wp--preset--spacing--30);
}

/* The attribute table is the spec sheet - it must read cleanly */
.enu-product .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}
.enu-product .woocommerce-product-attributes th,
.enu-product .woocommerce-product-attributes td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--wp--preset--color--border);
  text-align: left;
  vertical-align: top;
}
.enu-product .woocommerce-product-attributes th {
  background: var(--wp--preset--color--surface);
  font-weight: 600;
  width: 40%;
}

.woocommerce .stock.in-stock {
  color: var(--wp--preset--color--success);
  font-weight: 600;
}
.woocommerce .stock.out-of-stock {
  color: var(--wp--preset--color--danger);
  font-weight: 600;
}

/* ---------- Footer ---------- */

.enu-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.enu-footer__list li {
  padding: 0.3rem 0;
  color: var(--wp--preset--color--text-muted);
}
.enu-footer__cols {
  flex-wrap: wrap !important;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 600px) {
  .enu-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 782px) {
  .enu-hamburger { display: none; }
  .enu-header__bar { gap: var(--wp--preset--spacing--40); flex-wrap: nowrap; }
  .enu-header__search {
    margin-top: 0;
    max-width: 620px;
    margin-inline: auto;
  }
  .enu-icon-link__label { display: inline; }
  .enu-header__nav { display: block; }
  .enu-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--20);
  }
  .enu-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================================
   DE WINKELKANT IN HETZELFDE SYSTEEM (8 september)
   =========================================================================
   De categoriepagina had een eigen kaart: 541 pixels hoog, opgebouwd uit de
   presets van theme.json (--wp--preset--*) terwijl de voorpagina in onze
   eigen tokens rekent. Twee systemen naast elkaar op dezelfde site, en dat
   is precies waar de vorige ronde over ging.

   Hieronder rekent de winkelkaart in dezelfde tokens als de kaart op de
   voorpagina: --kaart-radius, --kaart-rand, --kaart-pad, --kaart-schaduw en
   de vijf tekstmaten. style.css van de ontwerpsite wordt op elke
   WordPress-pagina ingeladen door ENU_Chrome, dus die tokens zijn hier
   gewoon beschikbaar.
   ========================================================================= */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raster);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* Dezelfde kolomtrap als de rijen op de voorpagina. */
@media (min-width: 560px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Met een filterkolom ernaast is er minder breedte, dus daar een kolom
   minder. */
@media (min-width: 1024px) {
  .enu-cat--metfilter .woocommerce ul.products,
  .enu-cat--metfilter ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: var(--kaart-pad);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
  box-shadow: var(--kaart-schaduw);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--kaart-rand-hover);
  box-shadow: var(--kaart-schaduw-hover);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--kaart-naam) !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 2px;
  padding: 0 !important;
  /* Twee regels en dan afbreken, anders krijgt een rij kaarten gaten. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enu-kaart__merk {
  font-size: var(--kaart-merk);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
}
.enu-kaart__sku {
  font-size: var(--kaart-nummer);
  color: var(--muted);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--kaart-prijs);
  line-height: 1.1;
  margin: 4px 0 0;
}
.woocommerce ul.products li.product .price__alt {
  font-size: var(--kaart-nummer);
  margin-top: 1px;
}

.enu-kaart__voorraad {
  font-size: var(--kaart-meta);
  margin: 4px 0 8px;
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 8px 12px;
  font-size: var(--kaart-meta);
  border-radius: 6px;
}

/* Liggend vanaf 560, net als op de voorpagina: foto links, gegevens
   rechts. Daaronder staat de foto boven de tekst en passen er twee naast
   elkaar. */
/* WooCommerce zet de foto, de titel, de prijs en de voorraad samen in een
   link; alleen de knop staat daarbuiten. Het raster hoort dus op die link
   en niet op de li eromheen. */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: block;
  color: inherit;
}

@media (min-width: 560px) {
  .woocommerce ul.products li.product > a.woocommerce-loop-product__link {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 10px;
    align-content: start;
  }
  .woocommerce ul.products li.product > a.woocommerce-loop-product__link > * { grid-column: 2; }
  .woocommerce ul.products li.product > a.woocommerce-loop-product__link > img {
    grid-column: 1;
    grid-row: 1 / span 8;
    align-self: start;
    width: 88px;
    margin-bottom: 0;
  }
  .woocommerce ul.products li.product .button { margin-top: 8px; }
}

/* ---------- Subcategorieen als chips met een minifoto ----------

   Ze stonden als een lijst van eenentwintig brede rijen boven de producten:
   drie kolommen, zeven rijen, ruim vierhonderd pixels voordat het eerste
   artikel in beeld kwam. Als chip met de foto van de subcategorie erin
   passen dezelfde eenentwintig in een derde van die ruimte, en je herkent
   ze sneller aan het beeld dan aan de naam. */

.enu-soorten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--sectie);
  padding: 0;
  list-style: none;
}
.enu-soorten__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-size: var(--kaart-meta);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color var(--t), box-shadow var(--t);
}
.enu-soorten__chip:hover,
.enu-soorten__chip:focus-visible {
  border-color: var(--kaart-rand-hover);
  box-shadow: var(--kaart-schaduw);
  color: var(--ink);
}
.enu-soorten__beeld {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--soft);
}
.enu-soorten__aantal {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ---------- De filterkolom ---------- */

.enu-cat__lijf { display: block; }

@media (min-width: 1024px) {
  .enu-cat__lijf {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
  }
}

.enu-filters {
  margin: 0 0 var(--sectie);
  padding: var(--kaart-pad);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
}
.enu-filters h2 {
  font-size: var(--kaart-naam);
  margin: 0 0 8px;
}
.enu-filters__groep + .enu-filters__groep {
  margin-top: var(--kop-gat);
  padding-top: var(--kop-gat);
  border-top: 1px solid var(--line);
}
.enu-filters__kop {
  display: block;
  font-family: var(--font-head);
  font-size: var(--kaart-meta);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.enu-filters__lijst { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.enu-filters__lijst a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  font-size: var(--kaart-meta);
  color: var(--text);
}
.enu-filters__lijst a:hover { background: var(--soft); color: var(--ink); }
.enu-filters__lijst a[aria-current="true"] { background: var(--soft); color: var(--ink); font-weight: 600; }
.enu-filters__lijst span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* De voorraadschakelaar. Een schakelaar en geen vinkje: dit is een stand
   van de lijst en geen keuze die je nog moet bevestigen. */
.enu-voorraadknop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--kaart-meta);
  font-weight: 600;
  text-align: left;
  transition: border-color var(--t), background-color var(--t);
}
.enu-voorraadknop:hover { border-color: var(--kaart-rand-hover); }
.enu-voorraadknop__slee {
  flex: none;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--r-pill);
  background: #D7DEE8;
  transition: background-color var(--t);
}
.enu-voorraadknop__slee::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 34, 59, .3);
  transition: transform var(--t);
}
.enu-voorraadknop[aria-pressed="true"] .enu-voorraadknop__slee { background: var(--ok, #1E9E5A); }
.enu-voorraadknop[aria-pressed="true"] .enu-voorraadknop__slee::after { transform: translateX(14px); }

/* ---------- Merk en nummers boven aan een productpagina ----------

   Ze stonden onderaan in de meta-regel, onder de bestelknop. Op de render
   staan ze boven de prijs, en dat klopt met hoe iemand die van een tekening
   werkt de pagina leest: eerst controleren of het nummer klopt, dan pas
   kijken wat het kost. */

.enu-merkkop {
  font-size: var(--kaart-meta);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
  letter-spacing: .01em;
}
.enu-nummers {
  font-size: var(--kaart-nummer);
  color: var(--muted);
  margin: -.25rem 0 .75rem;
  font-variant-numeric: tabular-nums;
}
.enu-nummers span { padding: 0 .25rem; opacity: .6; }

/* Op een telefoon staat de filterkolom boven de lijst in plaats van ernaast.
   Twaalf merken plus de schakelaar was daar 350 pixels voordat het eerste
   artikel in beeld kwam. De schakelaar blijft heel, want dat is het filter
   waar deze winkel om draait; de merkenlijst krijgt een hoogte en scrolt
   daarbinnen. */
@media (max-width: 1023px) {
  .enu-filters { margin-bottom: var(--kop-gat); }
  .enu-filters__lijst {
    max-height: 9.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- Het begin van een categoriepagina op een telefoon ----------

   Op 15 september 2026 begon het eerste artikel van Groepenkasten op 870
   pixels, onder de rand van een scherm van 812. Wie op een categorie tikt
   zag eerst geen enkel product. Er gaat niets weg; er gaat lucht uit:
   48 pixels boven het kruimelpad, de levertijdband van 76 naar ruim 50, en
   de telling en de sorteerknop op een regel in plaats van twee. */
/* Met main.enu-shop ervoor: de inline-stijl van ENU_Herfst en ENU_Levertijd
   komt na dit bestand en zou bij gelijke specificiteit winnen. */
@media (max-width: 719px) {
  /* Ook de productpagina: daar stond de prijs op 785 pixels, net boven de
     rand, en de bestelknop op 1071. */
  main.enu-shop,
  main.enu-product { padding-top: .5rem !important; }
  main.enu-shop .woocommerce-products-header { margin-top: .75rem; }
  main.enu-shop .enu-band { padding: .5rem .75rem; margin-bottom: .75rem; font-size: .875rem; line-height: 1.45; }
  main.enu-shop .enu-filters { margin-bottom: .5rem; }
  main.enu-shop .woocommerce-result-count { float: left; margin: 0; line-height: 2.25rem; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main.enu-shop .woocommerce-ordering { float: right; margin: 0 0 .25rem; }
  main.enu-shop .woocommerce-ordering select { width: auto; max-width: 11.5rem; }
  main.enu-shop ul.products { clear: both; }
}

/* ---------- Zet op bestellijst ----------

   Naast de oranje bestelknop, omlijnd. De bevestiging staat eronder en niet
   als zwevende melding: die verdwijnt terwijl je nog leest, en dit is
   precies het moment waarop je wilt weten waar het artikel heen ging. */

.enu-lijstknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px;
  font-size: var(--kaart-naam);
}
.enu-lijstknop svg { width: 17px; height: 17px; flex: none; }

.enu-lijstmelding {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--kaart-meta);
  line-height: 1.45;
}
.enu-lijstmelding--goed {
  background: rgba(30, 158, 90, .10);
  border: 1px solid rgba(30, 158, 90, .28);
  color: var(--ink);
}
.enu-lijstmelding--mist {
  background: rgba(207, 23, 23, .08);
  border: 1px solid rgba(207, 23, 23, .28);
  color: var(--ink);
}
.enu-lijstmelding a { color: var(--ink); text-decoration: underline; }

/* Op een telefoon stond het aantal over de volle breedte, met daaronder een
   bestelknop van 218 bij 40 pixels, en dan de bestellijstknop van 343 bij 48.
   De tweede keus was zo groter dan de eerste, en 40 pixels is krap voor een
   duim (15 september 2026). Nu staan aantal en bestelknop naast elkaar, de
   bestelknop vult de rest van de regel, en beide zijn 48 pixels hoog. De
   bestellijstknop blijft eronder over de volle breedte. */
/* Bij een artikel met uitvoeringen staat de keuzetabel in hetzelfde
   formulier; daar krijgt alleen het blok met aantal en knop deze indeling. */
@media (max-width: 719px) {
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
  .woocommerce div.product form.cart .quantity { flex: 0 0 5rem; width: 5rem; margin: 0; }
  .woocommerce div.product form.cart .quantity .qty { width: 100%; height: 100%; min-height: 48px; text-align: center; }
  .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 0; min-width: 0; min-height: 48px; margin: 0; }
  .woocommerce div.product form.cart .enu-lijstknop { flex: 1 0 100%; margin-top: 0; }
  .woocommerce div.product form.cart .enu-lijstmelding { flex: 1 0 100%; margin-top: 0; }
}

/* Vanaf een breed scherm past hij naast de bestelknop in plaats van
   eronder. */
@media (min-width: 720px) {
  .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .woocommerce div.product form.cart .quantity { flex: none; }
  .woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 14rem; }
  .enu-lijstknop { flex: 1 1 12rem; width: auto; margin-top: 0; }
  .enu-lijstmelding { flex: 1 0 100%; margin-top: 0; }
}

/* WooCommerce drukt het artikelnummer af in de meta-regel onder de
   bestelknop. Sinds 8 september staat het boven de prijs, samen met de EAN
   en het typenummer van de fabrikant. Twee keer hetzelfde nummer op een
   pagina zet je aan het twijfelen of het wel hetzelfde is. Wat in die regel
   blijft staan zijn de categorieen. */
.woocommerce div.product .product_meta .sku_wrapper { display: none; }

/* =========================================================================
   ACCOUNT (8 september)
   =========================================================================
   Registreren stond uit, dus de kop zei "Inloggen" tegen mensen die nergens
   konden inloggen. Nu kan het, en het hele accountgebied rekent in dezelfde
   tokens als de rest: --kaart-radius, --kaart-rand, --kaart-pad en de vijf
   tekstmaten.
   ========================================================================= */

/* ---------- Inloggen en account aanmaken ---------- */

.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raster);
  margin: 0;
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Inloggen links, account aanmaken rechts. Zonder deze twee regels stond
   inloggen rechts: de floats van woocommerce-layout.css tellen in een
   raster niet mee, maar iets in die keten zet de kolommen alsnog om, en op
   een inlogpagina wil je niet dat de twee formulieren van plaats wisselen
   zodra er een stylesheet bijkomt. Expliciet is hier goedkoper dan
   uitzoeken. */
.woocommerce-account .u-columns .col-1 { order: 1; }
.woocommerce-account .u-columns .col-2 { order: 2; }

/* Het blokthema zet de inhoud van een pagina op 760 pixels. Voor een
   artikel klopt dat, voor het accountgebied niet: de rest van de winkel
   rekent in 1264 en twee formulieren naast elkaar passen daar wel in. */
.woocommerce-account .entry-content > .woocommerce,
.woocommerce-account .wp-block-post-content > .woocommerce {
  max-width: var(--wrap);
  width: 100%;
}

@media (min-width: 860px) {
  .woocommerce-account .woocommerce > .u-columns,
  .woocommerce-account .u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  margin: 0;
  padding: var(--s3);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
  box-shadow: var(--kaart-schaduw);
}

.woocommerce-account .u-columns h2 {
  font-size: var(--kop-2);
  line-height: 1.2;
  margin: 0 0 var(--kop-gat);
}

.woocommerce-account .woocommerce-form-row { margin-bottom: var(--s2); }
.woocommerce-account form label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--kaart-meta);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.woocommerce-account form .input-text,
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: var(--kaart-naam);
  transition: border-color var(--t), box-shadow var(--t);
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(19, 34, 59, .08);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: var(--kaart-meta);
  color: var(--muted);
  line-height: 1.5;
}
.woocommerce-account .woocommerce-form-login__rememberme { font-size: var(--kaart-meta); color: var(--muted); }
.woocommerce-account .lost_password { margin: var(--s1) 0 0; font-size: var(--kaart-meta); }
.woocommerce-account .lost_password a { color: var(--ink); text-decoration: underline; }

/* Op een telefoon staan de twee formulieren onder elkaar en is het niet
   meteen duidelijk dat het tweede er ook is. Een woord erboven scheelt
   zoeken. */
@media (max-width: 859px) {
  .woocommerce-account .u-columns .col-2 {
    margin-top: var(--sectie) !important;
    padding-top: var(--sectie) !important;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Het dashboard ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--sectie); }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--kaart-meta);
  font-weight: 600;
  transition: border-color var(--t), background-color var(--t);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { border-color: var(--kaart-rand-hover); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content p { font-size: var(--kaart-naam); }

@media (min-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
  }
}

/* ---------- Bestellingen ---------- */

.woocommerce table.woocommerce-orders-table,
.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--kaart-naam);
}
.woocommerce table.shop_table th {
  background: var(--soft);
  font-family: var(--font-head);
  font-size: var(--kaart-meta);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 10px 12px;
  border: 0;
}
.woocommerce table.shop_table td {
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; }

/* "Bestel opnieuw" is voor een installateur die elke maand dezelfde doos
   bestelt de belangrijkste knop van de winkel. Die mag opvallen; de andere
   acties bij een order zijn omlijnd. */
.woocommerce .woocommerce-button.enu-opnieuw,
.woocommerce a.button.enu-opnieuw {
  background: var(--orange);
  color: var(--ink);
  border: 0;
}
.woocommerce .woocommerce-button.enu-opnieuw:hover { background: var(--orange-600, #E07E0A); color: var(--ink); }
.woocommerce .woocommerce-orders-table__cell-order-actions .button {
  margin: 2px 0 2px 4px;
  padding: 6px 10px;
  font-size: var(--kaart-meta);
  border-radius: 6px;
}

/* ---------- Het tabblad Bestellijst ---------- */

.enu-lijsttab__regels { margin: 0 0 var(--sectie); padding: 0; list-style: none; }
.enu-lijsttab__regels li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 3rem;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--kaart-naam);
}
.enu-lijsttab__nr {
  font-size: var(--kaart-nummer);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.enu-lijsttab__aantal { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.enu-lijsttab__leeg { color: var(--muted); font-size: var(--kaart-naam); }

@media (max-width: 559px) {
  .enu-lijsttab__regels li { grid-template-columns: minmax(0, 1fr) 3rem; }
  .enu-lijsttab__nr { grid-column: 1 / -1; }
}

/* ---------- Het accountmenu in de kop ---------- */

.enu-accountmenu { position: relative; }
.enu-accountmenu__lade {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 80;
  min-width: 12rem;
  padding: 6px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.enu-accountmenu.is-open .enu-accountmenu__lade { opacity: 1; visibility: visible; transform: none; }
.enu-accountmenu__lade a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--kaart-meta);
  font-weight: 600;
}
.enu-accountmenu__lade a:hover { background: var(--soft); color: var(--ink); }
.enu-accountmenu__lade span {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ---------- Het paneel dat om een account vraagt ---------- */

.enu-lijstmelding--vraag {
  display: grid;
  gap: 6px;
  background: var(--soft);
  border: 1px solid var(--kaart-rand);
  color: var(--ink);
}
.enu-lijstmelding--vraag strong { font-family: var(--font-head); font-size: var(--kaart-naam); }
.enu-lijstmelding--vraag span { color: var(--muted); line-height: 1.45; }
.enu-lijstmelding__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.enu-lijstmelding__knoppen .btn {
  padding: 7px 12px;
  font-size: var(--kaart-meta);
  border-radius: 6px;
}

/* ---------- Het overzicht in mijn-account ---------- */

.enu-dash__hallo { font-size: var(--kaart-naam); color: var(--muted); margin: 0 0 var(--kop-gat); }

.enu-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raster);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px)  { .enu-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.enu-dash__kaart {
  display: block;
  height: 100%;
  padding: var(--kaart-pad);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
  box-shadow: var(--kaart-schaduw);
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.enu-dash__kaart:hover {
  border-color: var(--kaart-rand-hover);
  box-shadow: var(--kaart-schaduw-hover);
  transform: translateY(-2px);
  color: var(--ink);
}
.enu-dash__kop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: var(--kaart-naam);
  font-weight: 600;
  margin-bottom: 2px;
}
.enu-dash__teller {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--kaart-nummer);
  font-variant-numeric: tabular-nums;
}
.enu-dash__uitleg {
  display: block;
  font-size: var(--kaart-meta);
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- Tabellen stapelen op een telefoon ----------

   Een bestellingentabel met vijf kolommen past niet op 375 pixels. Opzij
   scrollen verbergt de knop "Bestel opnieuw", en dat is juist de kolom
   waarvoor iemand hier komt. Onder 720 wordt elke rij een kaart met het
   kolomlabel ervoor. */

@media (max-width: 719px) {
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td { display: block; width: 100%; }
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table { border: 0; }
  .woocommerce table.shop_table tr {
    margin-bottom: var(--raster);
    border: 1px solid var(--kaart-rand);
    border-radius: var(--kaart-radius);
    background: #fff;
    box-shadow: var(--kaart-schaduw);
    overflow: hidden;
  }
  .woocommerce table.shop_table td {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    text-align: right;
  }
  .woocommerce table.shop_table tr td:first-child { border-top: 0; }
  .woocommerce table.shop_table td::before {
    content: attr(data-title);
    flex: none;
    font-family: var(--font-head);
    font-size: var(--kaart-meta);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
  }
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions { display: block; text-align: left; }
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
  .woocommerce .woocommerce-orders-table__cell-order-actions .button {
    display: block;
    margin: 4px 0 0;
    text-align: center;
  }
}

/* ---------- Adressen en accountgegevens ---------- */

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raster);
}
@media (min-width: 720px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.woocommerce-account .woocommerce-Address {
  width: auto !important;
  float: none !important;
  padding: var(--kaart-pad);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
  box-shadow: var(--kaart-schaduw);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { font-size: var(--kaart-naam); margin: 0; }
.woocommerce-account .woocommerce-Address address { font-size: var(--kaart-meta); color: var(--muted); font-style: normal; line-height: 1.55; }

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
  max-width: 34rem;
}
.woocommerce-account fieldset {
  margin: var(--sectie) 0 0;
  padding: var(--kaart-pad) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.woocommerce-account fieldset legend {
  padding: 0;
  font-family: var(--font-head);
  font-size: var(--kaart-naam);
  font-weight: 600;
  color: var(--ink);
}
.woocommerce-account .woocommerce-form-row { margin-bottom: var(--s2); }
.woocommerce form .form-row { padding: 0; margin: 0 0 var(--s2); }
.woocommerce form .form-row label { margin-bottom: 4px; }
.woocommerce form .required { color: var(--muted); text-decoration: none; border: 0; }
.woocommerce form em,
.woocommerce-account .woocommerce-EditAccountForm em {
  display: block;
  margin-top: 4px;
  font-size: var(--kaart-nummer);
  font-style: normal;
  color: var(--muted);
}

/* De sterktemeter zegt in het Engels wat hij vindt. De eis staat nu bij het
   veld zelf, zodat je het weet voordat je typt in plaats van erna. */
.enu-wachtwoordhint {
  display: block;
  margin-top: 4px;
  font-size: var(--kaart-nummer);
  color: var(--muted);
}

/* ---------- Meldingen ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  margin: 0 0 var(--sectie);
  padding: 11px 14px;
  border-radius: var(--kaart-radius);
  border: 1px solid var(--kaart-rand);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--kaart-naam);
  list-style: none;
}
.woocommerce-message { background: rgba(30, 158, 90, .10); border-color: rgba(30, 158, 90, .28); }
.woocommerce-error { background: rgba(207, 23, 23, .08); border-color: rgba(207, 23, 23, .28); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-error li { margin: 0; }

/* ---------- Knoppen in WooCommerce-formulieren ----------

   De knop onder Accountgegevens en die onder een adresformulier vielen
   buiten elke regel en kwamen als grijze systeemknop uit de browser. Ze
   staan aan het eind van een formulier dat iemand net heeft ingevuld; daar
   moet je niet hoeven zoeken wat de knop is. */

.woocommerce button.button,
.woocommerce button.woocommerce-Button,
.woocommerce input[type="submit"].button,
.woocommerce a.button:not(.enu-opnieuw) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  /* Donkere tekst op oranje, zoals .btn--primary op de rest van de site. Wit
     op dit oranje haalt 2,3:1 en de norm voor tekst van deze maat is 4,5:1
     (Lighthouse, 17 september 2026). */
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--kaart-naam);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--t);
}
.woocommerce button.button:hover,
.woocommerce button.woocommerce-Button:hover,
.woocommerce input[type="submit"].button:hover,
.woocommerce a.button:not(.enu-opnieuw):hover { background: var(--orange-600, #E07E0A); color: var(--ink); }

/* De acties bij een order zijn er meerdere naast elkaar; daar is omlijnd
   rustiger, met alleen "Bestel opnieuw" gevuld. */
.woocommerce .woocommerce-orders-table__cell-order-actions a.button:not(.enu-opnieuw) {
  background: #fff;
  border: 1px solid var(--kaart-rand);
  color: var(--ink);
}
.woocommerce .woocommerce-orders-table__cell-order-actions a.button:not(.enu-opnieuw):hover {
  background: #fff;
  border-color: var(--kaart-rand-hover);
  color: var(--ink);
}

/* De adreskaart: de titel is bij WooCommerce een link met de tekst
   "Bewerken Factuuradres" erin. Dat blijft, maar de kop mag niet twee keer
   hetzelfde woord tonen in twee maten. */
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: 6px; }
.woocommerce-account .woocommerce-Address-title .edit {
  flex: none;
  font-size: var(--kaart-meta);
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- "vanaf" bij een variabel artikel ----------

   Het woord staat in de css en niet in de html, want de btw-schakelaar
   herschrijft de tekst binnen .price met textContent en zou een voorvoegsel
   daar wissen. Zie ENU_Winkel::vanaf_prijs. */

.woocommerce ul.products li.product.product-type-variable .price::before {
  content: "vanaf ";
  font-size: var(--kaart-meta);
  font-weight: 500;
  color: var(--muted);
}

/* De zoom van WooCommerce zet een tweede, vergrote kopie van de foto in de
   galerij. Die stak op een telefoon buiten het scherm en werd alleen
   tegengehouden door overflow-x: hidden op de body. Dat is een noodrem, en
   op iOS houdt die niet altijd. De galerij houdt hem nu zelf binnen. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image { overflow: hidden; }

/* =========================================================================
   DE RESTPAGINA'S IN HET SYSTEEM (8 september)
   ========================================================================= */

/* ---------- De winkelwagen ----------

   Er stonden twee keer dezelfde bedragen op een regel: links onder de naam
   de stuksprijs, rechts het regeltotaal. Bij een aantal van 1 zijn die
   gelijk, en dan lijkt het een fout in plaats van twee verschillende
   getallen. Ze blijven allebei staan, want zodra je er drie neemt zeggen ze
   iets anders, maar nu staat erbij wat ze zijn. */

.wc-block-cart-item__prices .wc-block-components-product-price::after {
  content: " per stuk";
  font-size: var(--kaart-nummer);
  font-weight: 400;
  color: var(--muted);
}
.wc-block-cart-item__total .wc-block-components-product-price::before {
  content: "totaal ";
  display: block;
  font-family: var(--font-head);
  font-size: var(--kaart-nummer);
  font-weight: 600;
  color: var(--muted);
}

.wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--font-head);
  font-size: var(--kaart-naam);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.wc-block-cart-items__row { border-color: var(--line); }
.wc-block-cart-item__image img { border-radius: 6px; background: #fff; }

.wc-block-components-totals-item__label { font-size: var(--kaart-naam); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-head);
  font-weight: 700;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 600;
}

/* ---------- De kassa ----------

   De formulieren en de betaalstroom blijven zoals ze zijn; alleen de
   opmaak rekent in dezelfde tokens als de rest. */

.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
  border-radius: var(--r-sm) !important;
  border-color: var(--kaart-rand) !important;
  font-size: var(--kaart-naam) !important;
}
.wc-block-components-text-input input:focus {
  box-shadow: 0 0 0 3px rgba(19, 34, 59, .08) !important;
  border-color: var(--ink) !important;
}
.wc-block-components-title,
.wc-block-components-checkout-step__title {
  font-family: var(--font-head) !important;
  font-size: var(--kop-2) !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
}
.wc-block-components-checkout-step__description { font-size: var(--kaart-meta); color: var(--muted); }
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary {
  border: 1px solid var(--kaart-rand);
  border-radius: var(--kaart-radius);
  background: #fff;
}

/* ---------- De bestellingenlijst ----------

   Het ordernummer is de titel van de rij en geen veld met een label ervoor.
   Op een telefoon staat hij daarom over de volle breedte bovenaan de kaart,
   zoals een kop. */

@media (max-width: 719px) {
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number {
    display: block;
    background: var(--soft);
    padding: 10px 12px;
    font-family: var(--font-head);
    font-size: var(--kaart-naam);
    font-weight: 700;
    color: var(--ink);
    text-align: left;
  }
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number::before { display: none; }
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-number a { color: var(--ink); }
}

.woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--ink); }

/* WooCommerce zet het ordernummer, de datum en de status in <mark>. De
   browser geeft dat een gele markeerstift-achtergrond, en dan lijkt een
   gewone zin op de orderpagina een waarschuwing. */
.woocommerce mark,
.woocommerce-page mark {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- De categoriepagina op een telefoon: eerst producten ----------

   David scrolde binnen een categorie langs een lange lijst voor hij een
   product zag. Gemeten op 375 bij Groepenkasten: het eerste product stond
   op 1886 pixels. Twee blokken deden dat.

   De subcategorieen stonden als chips die mogen omvallen. Op een breed
   scherm zijn eenentwintig chips drie regels; op een telefoon past er per
   regel maar een, en dan zijn het eenentwintig regels: 976 pixels. Ze
   staan nu in twee regels naast elkaar en je veegt ze opzij, net als de
   veelgezochte termen op de voorpagina. Het loopt tot de rand door, want
   een rij die precies binnen de marge stopt ziet eruit alsof hij af is.

   De merkfilter stond eronder als lijst van twaalf regels: 192 pixels.
   Ook dat is op een telefoon een rij chips, en de voorraadschakelaar
   blijft er los boven staan; dat is een stand van de lijst en geen filter
   waar je doorheen bladert. */

@media (max-width: 1023px) {
  .enu-soorten {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: auto auto;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--wrap-gutter, 1rem) * -1);
    padding-inline: var(--wrap-gutter, 1rem);
    padding-bottom: 2px;
  }
  .enu-soorten::-webkit-scrollbar { display: none; }
  .enu-soorten > li { scroll-snap-align: start; }
  .enu-soorten__chip { white-space: nowrap; }

  .enu-filters { padding: 10px; }
  .enu-filters__groep + .enu-filters__groep {
    margin-top: 10px;
    padding-top: 10px;
  }
  .enu-filters__lijst {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: -10px;
    padding-inline: 10px;
  }
  .enu-filters__lijst::-webkit-scrollbar { display: none; }
  .enu-filters__lijst > li { flex: none; }
  .enu-filters__lijst a {
    justify-content: flex-start;
    padding: 5px 10px;
    border: 1px solid var(--kaart-rand);
    border-radius: var(--r-pill);
    background: #fff;
    white-space: nowrap;
  }
  .enu-filters__lijst a[aria-current="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
  }
  .enu-filters__lijst a[aria-current="true"] span { color: rgba(255,255,255,.7); }
}

/* Het kruimelpad staat midden in de tekst en had dezelfde kleur als de rest:
   een link was alleen te herkennen door erop te gaan staan. */
.woocommerce .woocommerce-breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(19, 34, 59, .35);
  text-underline-offset: 2px;
}
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration-color: currentColor; }