/* ==========================================================================
   WooCommerce in de Sportworms-stijl

   WooCommerce brengt zijn eigen knoppen, formulieren en meldingen mee.
   Dit bestand trekt die naar dezelfde tokens en vormen als de rest van de
   site (zie shop.css), zodat er geen tweede vormtaal op de pagina staat.
   Alleen presentatie: geen enkele wijziging aan gedrag of prijzen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

/* WooCommerce's knopregels zitten achter
   `.woocommerce:where(body:not(...)) button.button.alt.disabled`, wat op
   (0,4,1) uitkomt. `:where()` telt zelf niet mee, maar die extra
   `.disabled` wel. Beide body-classes meenemen tilt deze regels daar
   net overheen, zodat het zonder !important lukt. */
body.woocommerce-page.woocommerce a.button,
body.woocommerce-page.woocommerce button.button,
body.woocommerce-page.woocommerce input.button,
body.woocommerce-page.woocommerce #respond input#submit,
body.woocommerce-page.woocommerce a.button.alt,
body.woocommerce-page.woocommerce button.button.alt,
body.woocommerce-page.woocommerce input.button.alt,
body.woocommerce-page.woocommerce button.single_add_to_cart_button,
body.woocommerce-page.woocommerce .woocommerce-message a.button,
body .wc-block-components-button,
/* De lege-winkelwagen en cross-sell blokken gebruiken de blok-editor
   knopklasse in plaats van .button, en vielen daardoor terug op een
   donkere pil die nergens anders op de site voorkomt. */
body .wp-block-button__link,
body a.wp-block-button__link.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--accent);
  border-radius: var(--r);
  background-color: var(--accent);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

body.woocommerce-page.woocommerce a.button:hover,
body.woocommerce-page.woocommerce button.button:hover,
body.woocommerce-page.woocommerce input.button:hover,
body.woocommerce-page.woocommerce #respond input#submit:hover,
body.woocommerce-page.woocommerce a.button.alt:hover,
body.woocommerce-page.woocommerce button.button.alt:hover,
body.woocommerce-page.woocommerce input.button.alt:hover,
body .wc-block-components-button:hover,
body .wp-block-button__link:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: var(--sh-2);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.wc-block-components-button:active {
  transform: translateY(1px);
  box-shadow: var(--sh-1);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
}

/* Uitgeschakeld (bijvoorbeeld zolang er nog geen variant gekozen is):
   duidelijk dood in plaats van een half doorzichtige merkkleur. */
body.woocommerce-page.woocommerce button.button.alt.disabled,
body.woocommerce-page.woocommerce button.button.disabled,
body.woocommerce-page.woocommerce button.button:disabled,
body.woocommerce-page.woocommerce button.button:disabled[disabled],
body.woocommerce-page.woocommerce a.button.disabled,
body.woocommerce-page.woocommerce button.single_add_to_cart_button.disabled {
  background-color: var(--page-2);
  border-color: var(--line-strong);
  color: var(--ink-2);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* WooCommerce heeft voor een uitgeschakelde knop ook een hover-regel
   (`.alt:disabled[disabled]:hover`, specificiteit 0,6,1). Die won zodra de
   knop tijdens het toevoegen even uit staat, terwijl de muis er nog op
   rust: de knop sprong naar WooCommerce-paars. */
body.woocommerce-page.woocommerce button.button.alt.disabled:hover,
body.woocommerce-page.woocommerce button.button.disabled:hover,
body.woocommerce-page.woocommerce button.button:disabled:hover,
body.woocommerce-page.woocommerce button.button.alt:disabled[disabled]:hover,
body.woocommerce-page.woocommerce a.button.disabled:hover,
body.woocommerce-page.woocommerce button.single_add_to_cart_button.disabled:hover {
  background-color: var(--page-2);
  border-color: var(--line-strong);
  color: var(--ink-2);
  box-shadow: none;
}

/* Bezig met toevoegen: de knop blijft de ingedrukte oranje, geen dode
   grijze knop tijdens de halve seconde dat de winkelwagen bijwerkt. */
body.woocommerce-page.woocommerce button.button.alt.is-loading,
body.woocommerce-page.woocommerce button.button.alt.is-loading:disabled,
body.woocommerce-page.woocommerce button.button.alt.is-loading:disabled[disabled],
body.woocommerce-page.woocommerce button.button.alt.is-loading:disabled[disabled]:hover,
body.woocommerce-page.woocommerce button.button.alt.is-loading:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: var(--sh-1);
  cursor: progress;
  opacity: 1;
}

/* Secundaire knoppen (bijv. "winkelwagen bijwerken", "verder winkelen") */
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce-cart .wc-backward,
.woocommerce a.button.wc-backward {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: none;
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce-cart .wc-backward:hover,
.woocommerce a.button.wc-backward:hover {
  background-color: var(--surface);
  border-color: var(--brand-900);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Formuliervelden: selects, inputs, aantal
   -------------------------------------------------------------------------- */

.woocommerce .variations select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.sw-kg__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.woocommerce .variations select:focus,
.woocommerce select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.sw-kg__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.woocommerce .quantity input.qty {
  width: 5.5rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Variatiekeuze op de productpagina
   -------------------------------------------------------------------------- */

.woocommerce .variations {
  width: 100%;
  margin: 0 0 var(--s-3);
  border-collapse: collapse;
}

.woocommerce .variations tbody,
.woocommerce .variations tr {
  display: block;
  width: 100%;
}

.woocommerce .variations th,
.woocommerce .variations td {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
  border: 0;
}

.woocommerce .variations th.label {
  margin-bottom: 0.3rem;
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.woocommerce .variations td.value {
  margin: 0;
}

/* WooCommerce zet hier standaard een ruime marge onder; die stapelt op
   met de flex-gap van form.cart en gaf een gat van ruim 2rem. */
.woocommerce .variations tr + tr {
  margin-top: var(--s-3);
}

.woocommerce a.reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce a.reset_variations:hover {
  color: var(--accent-dark);
}

/* WooCommerce verbergt de wis-link met visibility: hidden, zodat hij zijn
   hoogte houdt: een lege strook van zo'n 40px onder de keuzelijst. Zolang
   hij verborgen is, neemt hij geen plek in. Het script zet bij tonen
   "visibility: visible" en fadet in, dan matcht deze regel niet meer. */
.woocommerce .variations a.reset_variations[style*="hidden"] {
  display: none !important;
}

/* "Kies eerst een volume om te kunnen bestellen." hangt aan dezelfde hook
   als de knop en belandde daardoor als smal flex-item naast het aantalveld.
   Eigen volle regel boven de aantal/knop-rij, als rustige hint. */
.woocommerce .woocommerce-variation-add-to-cart .sw-choose-hint {
  flex: 1 0 100%;
  order: -1;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}

.woocommerce .woocommerce-variation-add-to-cart .sw-choose-hint[hidden] {
  display: none;
}

.woocommerce .single_variation_wrap .woocommerce-variation-price {
  margin-bottom: var(--s-3);
}

.woocommerce .woocommerce-variation-availability p {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Hoeveelheid en knop op één regel: de knop draagt de actie, het
   aantal is een klein hulpveld en hoort niet even zwaar te wegen. */
.woocommerce form.cart,
.woocommerce .variations_form .single_variation_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}

.woocommerce .woocommerce-variation-add-to-cart,
.woocommerce form.cart:not(.variations_form) {
  display: flex;
  /* Expliciet row: de regel hierboven zet form.cart op column, waardoor
     het aantal-veld en de knop op een simpel product onder elkaar
     belandden in plaats van naast elkaar. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-3) var(--s-2);
}

/* Het kg-veld hangt aan dezelfde hook als de knop en zou anders in de
   aantal/knop-rij belanden. Eigen volle regel, onder die rij: zoals in de
   meeste webshops staat de bestelknop direct onder prijs en variantkeuze,
   zodat hij bij het openen van de pagina in beeld is. */
.woocommerce .woocommerce-variation-add-to-cart .sw-kg,
.woocommerce form.cart .sw-kg {
  flex: 1 0 100%;
  order: 3;
}

.woocommerce form.cart .quantity,
.woocommerce .single_variation_wrap .quantity {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}

/* De sitebrede .qty-regel is bedoeld voor het eigen aantal-blok en zet daar
   marge boven en onder. WooCommerce geeft het invoerveld zelf ook class qty,
   waardoor die marge het veld 16px uit zijn eigen kader duwde en het niet
   meer op één lijn stond met de knop. */
.woocommerce .quantity input.qty {
  height: 100%;
  margin: 0;
}

.woocommerce button.single_add_to_cart_button {
  flex: 1 1 auto;
  margin: 0;
}

/* Op een smal scherm paste het knoplabel niet meer naast het aantalveld en
   viel de knop naar een eigen regel. Met basis 0 telt de tekstbreedte niet
   mee voor het afbreken van de rij, zodat het aantal en de knop naast
   elkaar blijven staan. Het label mocht hier eerst afbreken toen het nog
   "Toevoegen aan winkelwagen" heette; dat is niet meer nodig en hield het
   afbreken juist in stand, ook bij een grotere systeemletter. */
@media (max-width: 640px) {
  .woocommerce form.cart button.single_add_to_cart_button {
    flex-basis: 0;
    /* Krappere zijkanten: met nowrap kan de knop niet smaller worden dan zijn
       label, en bij een vergrote systeemletter viel hij daardoor onder het
       aantalveld. Dit scheelt genoeg om naast elkaar te blijven staan. */
    padding-inline: 0.75rem;
    letter-spacing: 0.02em;
  }
}

/* De losse prijsregel boven de knop mag dichter op de keuze zitten. */
.woocommerce .single_variation_wrap .woocommerce-variation {
  margin: 0;
}

.woocommerce .woocommerce-variation-price .price {
  display: block;
  font-family: var(--font-cond);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Het optionele kg-veld
   -------------------------------------------------------------------------- */

.sw-kg {
  margin: 0;
  padding: var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background-color: var(--page);
}

.sw-kg__label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sw-kg__opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.sw-kg__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sw-kg__input {
  max-width: 8rem;
}

.sw-kg__unit {
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
}

.sw-kg__help {
  margin: 0.4rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

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

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  /* Volgt .outnote uit shop.css: egale rand rondom, de achtergrond draagt
     de status. Bewust geen gekleurde zijrand, dat patroon komt in deze
     huisstijl nergens voor. */
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--page);
  color: var(--ink-2);
  font-size: 0.95rem;
  list-style: none;
}

.woocommerce-message,
.woocommerce .woocommerce-message {
  border-color: var(--ok);
  background-color: var(--ok-soft);
  color: var(--ink);
}

.woocommerce-info,
.woocommerce .woocommerce-info {
  border-color: var(--accent);
  background-color: var(--accent-soft);
  color: var(--ink);
}

.woocommerce-error,
.woocommerce .woocommerce-error {
  border-color: var(--sale);
  background-color: var(--sale-soft);
  color: var(--ink);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

/* Het aantalveld was het enige veld in het koopspoor zonder focusring. */
.woocommerce .quantity input.qty:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.qty__eenheid {
  align-self: center;
  margin-left: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.buybox__eenheid {
  margin: -0.35rem 0 var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Eén rustige contactregel onder de bestelrij (vervangt .buybox__meer en
   .buybox__ask). Ruimte erboven zodat hij niet aan de knop vastplakt en
   niet als tweede bestelactie leest. */
.buybox__contact {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.buybox__contact a {
  /* Inline-block met wat lucht erboven en eronder: als kale tekstlink was
     het tikvlak op een telefoon te laag. Houdt het telefoonnummer ook bij
     elkaar op één regel. */
  display: inline-block;
  padding-block: 0.3em;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.buybox__contact a:hover {
  color: var(--accent-dark);
}

/* WooCommerce zet de focus op de melding zodat schermlezers hem voorlezen;
   de algemene focusring hoort bij bedienbare elementen, niet bij een tekstvak. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
  outline: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Winkelwagen en afrekenen
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
  width: 100%;
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-collapse: collapse;
  overflow: hidden;
  background-color: var(--surface);
}

.woocommerce table.shop_table th {
  padding: var(--s-3) var(--s-4);
  background-color: var(--page);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
}

.woocommerce table.shop_table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: 0;
}

.woocommerce table.shop_table img {
  width: 64px;
  height: auto;
  border-radius: var(--r);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout main h3 {
  font-family: var(--font-cond);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Verzendkeuze: leesbare lijst in plaats van kale radio's */
.woocommerce ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--surface);
  line-height: 1.45;
}

.woocommerce ul#shipping_method li:last-child {
  margin-bottom: 0;
}

.woocommerce ul#shipping_method label {
  font-size: 0.95rem;
  color: var(--ink);
}

.woocommerce .woocommerce-shipping-destination {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* Prijzen consequent in de merkkleur */
.woocommerce .woocommerce-Price-amount {
  font-family: var(--font-cond);
  font-weight: 600;
  color: var(--ink);
}

.woocommerce del .woocommerce-Price-amount {
  color: var(--ink-3);
  font-weight: 400;
}

.woocommerce ins {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Paginering op de winkel
   -------------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 0.35rem;
  border: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-cond);
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Woo-blokken (winkelwagen- en afrekenpagina op blokken)
   -------------------------------------------------------------------------- */

.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-components-title {
  font-family: var(--font-cond);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Tikdoelen van minstens 44px: de oogknop bij het wachtwoord was 22px,
   het vakje "Onthouden" 13px en de rij van het adresvakje bij afrekenen
   20px hoog. */
.woocommerce form .show-password-input {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}

.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.wc-block-components-checkbox label {
  min-height: 44px;
  align-items: center;
}

/* Kop "Verder winkelen" op de lege winkelwagen: links en met de streep,
   zoals elke andere sectiekop. Het was de enige gecentreerde h2 van de site. */
.sw-empty-head {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
  text-align: left;
}

/* De boodschap zelf op kopmaat; als regel van 16px was hij het kleinste
   element op de pagina. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
  font-family: var(--font-cond);
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

.sw-empty-acts {
  display: flex;
  justify-content: center;
  margin-block: var(--s-4) var(--s-7);
}

/* Bevestiging na toevoegen, direct onder het bestelformulier. */
.sw-cart-msg {
  display: none;
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--ok);
  border-radius: var(--r);
  background-color: var(--ok-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
}

.sw-cart-msg.is-visible {
  display: block;
}

.sw-cart-msg--error {
  border-color: var(--sale);
  background-color: #fff3f1;
}

.sw-cart-msg p {
  margin: 0;
  color: var(--ink);
}

.sw-cart-msg__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.sw-cart-msg__acts .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
  border-radius: var(--r);
  border-color: var(--line-strong);
}

.wc-block-components-radio-control__option {
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   Bezorgen of ophalen, op de productpagina zelf
   -------------------------------------------------------------------------- */

.sw-deliv {
  flex: 1 0 100%;
  /* Onder de bestelknop, zie .sw-kg. */
  order: 2;
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.sw-deliv__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sw-deliv__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sw-deliv__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.sw-deliv__opt:last-child {
  border-bottom: 0;
}

.sw-deliv__name {
  font-size: 0.95rem;
  color: var(--ink);
}

.sw-deliv__cost {
  flex: 0 0 auto;
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.sw-deliv__cost--free {
  color: var(--ok);
}

.sw-deliv__note {
  margin: 0.5rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

.sw-deliv__pre {
  margin-right: 0.25rem;
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Lege winkelwagen
   -------------------------------------------------------------------------- */

/* WooCommerce zet hier een huilend smiley-gezicht boven. Daarvoor in de
   plaats een worm die uit een gat omhoog kruipt.

   Eerdere poging was een rechtopstaand afgerond staafje met twee oogjes.
   Die vorm las verkeerd: symmetrisch, glad, vleeskleurig en met een gezicht,
   en hij stond vóór het gat in plaats van erin. Nu een gebogen, gesegmenteerd
   lijf zonder ogen, waarvan de onderkant achter de rand van het gat verdwijnt. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
  position: relative;
  padding-top: 204px;
  background-image: none;
  text-align: center;
}

/* Het lijf. De vorm komt uit een masker, de kleur uit de achtergrond
   eronder: banden dwars op de lengte maken de segmenten. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 50%;
  margin-left: -58px;
  width: 116px;
  height: 152px;
  background-image:
    repeating-linear-gradient(
      166deg,
      rgba(0, 0, 0, 0.22) 0 3px,
      rgba(255, 255, 255, 0.1) 3px 12px
    ),
    linear-gradient(150deg, #b9614f 0%, #a8564a 45%, #7d3b31 100%);
  -webkit-mask-image: var(--sw-worm);
  mask-image: var(--sw-worm);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  transform-origin: 50% 96%;
  animation: sw-gluren 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Een gebogen lijf dat onderaan breed in het gat staat en naar boven toe
   dunner wordt. */
:root {
  --sw-worm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 88'%3E%3Cpath d='M30 86 C 30 70, 20 62, 22 48 C 24 34, 40 32, 41 20' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Een hoopje aarde in plaats van een zwart gat: die platte ellips las als
   een vlek. Een border-radius-heuvel werd echter een broodje: te glad, te
   symmetrisch en te licht. De vorm komt daarom uit een masker met een
   brokkelige bovenrand, en de kleur uit de donkere tinten van wormenhumus
   met veel kleine korrels. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 112px;
  left: 50%;
  margin-left: -115px;
  width: 230px;
  height: 82px;
  border-radius: 0;
  background-color: #33291f;
  background-image:
    radial-gradient(circle at 14% 52%, rgba(0, 0, 0, 0.45) 0 1.5px, transparent 2px),
    radial-gradient(circle at 26% 68%, rgba(255, 255, 255, 0.09) 0 1.5px, transparent 2px),
    radial-gradient(circle at 33% 44%, rgba(0, 0, 0, 0.4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 76%, rgba(0, 0, 0, 0.35) 0 2px, transparent 2.6px),
    radial-gradient(circle at 49% 56%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 2px),
    radial-gradient(circle at 57% 82%, rgba(0, 0, 0, 0.4) 0 1.5px, transparent 2px),
    radial-gradient(circle at 63% 48%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 71% 70%, rgba(0, 0, 0, 0.42) 0 2px, transparent 2.6px),
    radial-gradient(circle at 79% 54%, rgba(0, 0, 0, 0.32) 0 1.5px, transparent 2px),
    radial-gradient(circle at 87% 74%, rgba(255, 255, 255, 0.06) 0 1.5px, transparent 2px),
    radial-gradient(ellipse 70% 60% at 50% 100%, #1c150f 0%, transparent 72%),
    linear-gradient(170deg, #4a3c2c 0%, #3a2e22 46%, #241b13 100%);
  -webkit-mask-image: var(--sw-hoop);
  mask-image: var(--sw-hoop);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Brokkelige heuvel: geen vloeiende koepel maar een rand met bulten, zodat
   het losse aarde is en geen gebakken deeg. */
:root {
  --sw-hoop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 82' preserveAspectRatio='none'%3E%3Cpath d='M0 82 C 3 71 9 66 15 64 C 22 62 25 57 31 52 C 38 47 45 50 50 46 C 56 41 58 33 66 30 C 74 27 80 32 86 28 C 93 23 96 15 105 13 C 114 11 119 17 126 16 C 134 15 139 21 145 25 C 151 29 157 26 163 31 C 169 36 172 42 179 44 C 186 46 191 43 197 49 C 203 55 206 62 213 65 C 220 68 225 73 230 82 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Soepel wiegen vanuit het hoopje. Meer tussenstappen dan alleen heen en
   weer, en een klein verschil tussen de kanten, zodat het niet als een
   metronoom tikt maar als iets dat zoekt. */
@keyframes sw-gluren {
  0%   { transform: rotate(-6deg) translateX(-1px); }
  18%  { transform: rotate(-2deg) translateX(0); }
  38%  { transform: rotate(5deg) translateX(1px); }
  52%  { transform: rotate(7deg) translateX(1px); }
  70%  { transform: rotate(2deg) translateX(0); }
  86%  { transform: rotate(-4deg) translateX(-1px); }
  100% { transform: rotate(-6deg) translateX(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Aanraakdoelen op mobiel
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Telefoonnummers en e-mailadressen in lopende tekst waren 19px hoog en
     daarmee lastig te raken. Ze houden hun plek in de regel, maar krijgen
     wel tikruimte. */
  .prose a[href^="tel:"],
  .prose a[href^="mailto:"],
  .contact-details a,
  .section a[href^="tel:"],
  .section a[href^="mailto:"] {
    display: inline-block;
    padding-block: 0.45em;
  }

  /* Kruimelpad: de links zelf blijven klein, de tikzone niet. */
  .crumbs a,
  .crumbs span,
  .breadcrumb a,
  .breadcrumb span {
    padding-block: 0.5em;
  }

  /* Telefoon en e-mail in de topbalk (20px hoog) en in de footer (17px)
     stonden op elke pagina onder de 40px-tikmaat, samen met de footer-links
     Privacy en Voorwaarden. Dit zijn de contactlinks die een bezoeker op
     mobiel het vaakst probeert te raken. */
  .util a,
  .foot address a,
  .foot__bottom nav a {
    display: inline-block;
    padding-block: 0.4em;
  }
}

/* --------------------------------------------------------------------------
   Productkaarten in het overzicht
   -------------------------------------------------------------------------- */

.grid--shop {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: stretch;
}

/* Even hoge kaarten met prijs en voorraad op een lijn per rij. */
.grid--shop > .card,
.sw-grid > .card,
.grid > .card {
  height: 100%;
}

/* Geen height: 100% op de body: in de flex-kolom van de kaart eiste die
   de hele kaarthoogte op en werd het beeldvlak van 173px tot 115px
   geknepen, met 250px wit tussen titel en prijs als gevolg. flex: 1 uit
   shop.css vult de rest van de kaart al. */
.grid--shop > .card .card__body,
.sw-grid > .card .card__body,
.grid > .card .card__body {
  display: flex;
  flex-direction: column;
}

.grid--shop > .card .card__media,
.sw-grid > .card .card__media,
.grid > .card .card__media {
  flex-shrink: 0;
}

.grid--shop > .card .card__foot,
.sw-grid > .card .card__foot,
.grid > .card .card__foot {
  margin-top: auto;
}

/* Een van de productnamen is een hele zin lang; op een smalle kaart duwt
   die alle andere kaarten uit verhouding. */
.grid--shop > .card .card__title,
.sw-grid > .card .card__title,
.grid > .card .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vangnet voor knoplabels die breder zijn dan de kaart: liever over twee
   regels dan met afgekapte letters. */
body.woocommerce-page.woocommerce .card a.button,
body.woocommerce-page.woocommerce .card button.button,
body.woocommerce-page.woocommerce .card .btn,
body .card a.wp-block-button__link {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* De hele kaart is een link naar het product; de telefoonlink bij een
   uitverkocht artikel moet daar wel doorheen klikbaar blijven. */
.card__phone a {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Prijskaartje bij een actie
   -------------------------------------------------------------------------- */

/* Een aanbieding viel in het overzicht weg tussen de gewone prijzen. De
   actieprijs staat nu in een gekleurd label met de besparing ernaast. */
.pricetag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
}

.pricetag__now {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: var(--r-sm, 4px);
  background-color: var(--sale);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.pricetag__now .woocommerce-Price-amount {
  color: inherit;
}

.pricetag__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-size: var(--fs-sm);
  line-height: 1.2;
}

.pricetag__was {
  color: var(--ink-3);
  text-decoration: line-through;
}

.pricetag__off {
  color: var(--sale);
  font-weight: 600;
}

/* Welke variant deze kaart is: een zak van 30 liter en een big bag zijn
   twee verschillende dingen en staan als losse kaarten in het overzicht.
   Als grijs pilletje was niet te zien dat drie kaarten met dezelfde naam
   verschillende formaten zijn. */
.card__variant {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--s-2);
  padding: 0.3em 0.7em;
  border: 0;
  border-radius: var(--r-sm, 4px);
  background-color: var(--brand-900);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Categorietegels
   -------------------------------------------------------------------------- */

/* De tegels zetten witte tekst op een foto. De verloopdekking begon pas op
   42 procent hoogte, waardoor de kop op het lichte deel van de foto viel. */
.tile::after {
  background: linear-gradient(
    180deg,
    rgba(15, 31, 25, 0.15) 0%,
    rgba(15, 31, 25, 0.5) 40%,
    rgba(15, 31, 25, 0.88) 78%,
    rgba(15, 31, 25, 0.96) 100%
  );
}

.tile__body h3,
.tile__body > span:not(.tile__go) {
  text-shadow: 0 1px 3px rgba(15, 31, 25, 0.55);
}

/* --------------------------------------------------------------------------
   Header: winkelwagen, hamburger, logo
   -------------------------------------------------------------------------- */

/* Header en categoriebalk plakken samen bovenaan, zodat het menu en de
   winkelwagen tijdens het scrollen bereikbaar blijven. */
.headwrap {
  position: sticky;
  top: 0;
  z-index: 80;
}

.headwrap .head {
  position: static;
}

/* Een zware rand om beide knoppen trok in de lichte header meer aandacht
   dan de knop zelf. */
.iconbtn,
.burger {
  border-color: transparent;
  background-color: var(--brand-50, #e3ede8);
}

.iconbtn:hover,
.iconbtn[aria-expanded="true"],
.burger:hover,
.burger[aria-expanded="true"] {
  border-color: transparent;
  background-color: var(--brand-100, #d3e2da);
  color: var(--brand-900);
}

/* Accountknop naast de winkelwagen. In het uitschuifmenu staat "Mijn
   account" al als laatste regel, dus daar hoeft de knop niet ook nog in. */
/* Knop en link in de kop even hoog: als <button> kreeg de accountknop
   een andere regelhoogte dan de winkelwagenlink ernaast. */
.head__acts .iconbtn {
  min-height: 46px;
  line-height: 1;
  font-size: 1rem;
}

.iconbtn--account .iconbtn__label {
  font-size: 1rem;
}

@media (max-width: 640px) {
  .iconbtn--account .iconbtn__label {
    display: none;
  }

  .iconbtn--account {
    padding-inline: 0.7rem;
  }
}

@media (min-width: 901px) {
  .catnav__list .catnav__account {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mijn account: bestellingen, adressen, gegevens
   -------------------------------------------------------------------------- */

/* Paginakop van winkelwagen, afrekenen en account: lucht tussen de kop en
   wat eronder komt, zoals de introregel dat in de winkel al doet. */
.page-title {
  margin-bottom: var(--s-5);
}

body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: var(--s-5);
}

/* Inloggen en account aanmaken naast elkaar, als twee gelijke kaarten met
   elk een eigen kop. WooCommerce zet ze met floats van 48 procent en zijn
   eigen grijze kader van 20px. */
body.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  width: auto;
}

body.woocommerce-account .u-columns::before,
body.woocommerce-account .u-columns::after {
  content: none;
  display: none;
}

body.woocommerce-account .u-columns > .u-column1,
body.woocommerce-account .u-columns > .u-column2 {
  float: none;
  width: auto;
  max-width: none;
}

/* Alleen de koppen van inloggen en registreren; de adreskaarten op de
   accountpagina dragen dezelfde u-columns-klasse en hebben hun eigen kop. */
body.woocommerce-account .u-columns:not(.woocommerce-Addresses) h2 {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
  font-size: var(--fs-lg);
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce form.woocommerce-EditAccountForm,
.woocommerce form.woocommerce-address-fields {
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: var(--sh-1);
}

/* Formulieren binnen de inhoudskaart hebben die kaart al. */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.woocommerce-address-fields {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woocommerce form .form-row {
  margin: 0 0 var(--s-4);
  padding: 0;
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce form .form-row .required {
  color: var(--sale);
  text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.woocommerce form .password-input {
  display: block;
}

/* De regel met knop en "Onthouden", en de tekstregels van het
   registratieformulier. */
.woocommerce form.login .form-row:has(button[type="submit"]),
.woocommerce form.register .form-row:has(button[type="submit"]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-2);
  margin-bottom: 0;
}

.woocommerce form.register > p:not(.form-row),
.woocommerce form.login > p:not(.form-row),
.woocommerce form .woocommerce-privacy-policy-text p {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.woocommerce form.login .woocommerce-LostPassword {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-sm);
}

/* De adressen op de accountpagina: twee kaarten naast elkaar, zonder de
   floats van WooCommerce. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  width: auto;
}

.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after {
  content: none;
  display: none;
}

.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2 {
  float: none;
  width: auto;
  max-width: none;
}

.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content > .woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: var(--s-4);
}

@media (max-width: 760px) {
  body.woocommerce-account .u-columns,
  .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* WooCommerce zet het menu en de inhoud met floats op 30/68 procent; hier
   een grid met een vaste menukolom, en op een telefoon onder elkaar. */
body.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* WooCommerce zet een clearfix (::before/::after met content) op deze
   wrapper; in een grid worden dat twee lege cellen, waardoor het menu in
   kolom 2 belandde en de inhoud in de smalle kolom 1 eronder. */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
  content: none;
  display: none;
}

body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce > .woocommerce-message,
body.woocommerce-account .woocommerce > .woocommerce-error,
body.woocommerce-account .woocommerce > .woocommerce-info,
body.woocommerce-account .woocommerce > .woocommerce-form-login,
body.woocommerce-account .woocommerce > .woocommerce-form-register,
body.woocommerce-account .woocommerce > .u-columns,
body.woocommerce-account .woocommerce > .woocommerce-ResetPassword {
  grid-column: 1 / -1;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li:last-child a {
  border-bottom: 0;
}

.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--brand-50);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--brand-900);
  color: #fff;
}

.woocommerce-MyAccount-content {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.woocommerce-MyAccount-content > p:first-child {
  margin-bottom: var(--s-4);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
  display: block;
  width: 100%;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
}

/* WooCommerce zet bij "Bewerken" een verborgen toelichting voor
   schermlezers; die klasse komt uit het thema en ontbrak hier, waardoor
   "Bewerken Factuuradres" gewoon in beeld stond. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.woocommerce-MyAccount-content p + p {
  margin-top: var(--s-3);
}

/* Bestellingen: nette tabel op desktop, kaartjes op een telefoon (de
   kolomtitels staan dan als data-title voor elke cel). */
table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

table.woocommerce-orders-table th,
table.woocommerce-orders-table td {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

table.woocommerce-orders-table th {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--brand-900);
}

table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
}

.woocommerce-MyAccount-content .woocommerce-Address {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--page);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 0;
  font-size: var(--fs-base);
}

.woocommerce-MyAccount-content address {
  font-style: normal;
  line-height: 1.6;
}

.woocommerce-MyAccount-content .form-row label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
}

/* Geen apart veld "Weergavenaam": de naam volgt uit voor- en achternaam
   (sportworms-account.php zet hem bij het opslaan). WooCommerce eist het
   veld in het formulier, dus het blijft onzichtbaar meegestuurd. */
.woocommerce-EditAccountForm .woocommerce-form-row:has(#account_display_name) {
  display: none;
}

.woocommerce-MyAccount-content fieldset {
  margin-top: var(--s-5);
  padding: 0;
  border: 0;
}

@media (max-width: 900px) {
  /* minmax(0, 1fr): met kale 1fr rekte de bestellingentabel de kolom tot
     buiten het scherm en viel de rechterhelft van de kaart weg. */
  body.woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
  }

  /* Kop en bewerk-link van een adres onder elkaar; naast elkaar brak
     "Factuuradres" per letter af. */
  .woocommerce-MyAccount-content .woocommerce-Address-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Menu als rij van knoppen, horizontaal te schuiven. */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: none;
    gap: var(--s-2);
    padding-bottom: var(--s-1);
  }

  .woocommerce-MyAccount-navigation li a,
  .woocommerce-MyAccount-navigation li:last-child a {
    white-space: nowrap;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    padding: 0.6rem 0.9rem;
  }

  .woocommerce-MyAccount-content {
    padding: var(--s-4);
  }

  /* WooCommerce's eigen smallscreen.css zet de rijen al onder elkaar met
     het kolomlabel ervoor; hier alleen de kaartvorm eromheen. */
  .woocommerce table.woocommerce-orders-table thead {
    display: none;
  }

  .woocommerce table.woocommerce-orders-table tr {
    display: block;
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--page);
  }

  .woocommerce table.woocommerce-orders-table tr td {
    display: block;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }

  .woocommerce table.woocommerce-orders-table tr td::before {
    float: left;
    font-family: var(--font-cond);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .woocommerce table.woocommerce-orders-table tr td:last-child {
    border-bottom: 0;
    text-align: left;
  }

  .woocommerce table.woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-actions::before {
    content: none;
  }
}

/* Het logo staat inline in header.php: een animatie binnen een via img
   geladen SVG speelt Chromium niet af. */
.logo__mark {
  display: block;
  width: 152px;
  height: 46px;
}

/* De worm draait bij het laden eenmaal rond in zijn tegel; de groene tegel
   eromheen blijft staan. */
#Worm {
  transform-origin: 30.5px 30.5px;
  animation: sw-worm-draai 1.4s cubic-bezier(0.34, 0.9, 0.3, 1) 0.15s 1 both;
}

@keyframes sw-worm-draai {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* --------------------------------------------------------------------------
   Zoekbalk en suggesties
   -------------------------------------------------------------------------- */

/* Met flex schoof de zoekbalk mee met de breedte van het logo en de knoppen
   ernaast en stond hij dus nooit echt in het midden. */
@media (min-width: 901px) {
  .head__in {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px) 1fr;
    align-items: center;
  }

  .head__in > .head__acts {
    justify-self: end;
  }
}

form.search {
  position: relative;
  max-width: 560px;
}

form.search input {
  border-radius: 14px 0 0 14px;
  padding-inline: 1.1rem;
}

form.search button {
  border-radius: 0 14px 14px 0;
}

.search__drop {
  position: absolute;
  z-index: 90;
  inset: calc(100% + 6px) 0 auto 0;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: var(--surface);
  box-shadow: var(--sh-2);
}

/* Een class met display wint het van het hidden-attribuut, dus dat hier
   expliciet dichtzetten. */
.search__drop[hidden] {
  display: none;
}

.search__hit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-sm, 4px);
  color: var(--ink);
  text-decoration: none;
}

.search__hit:hover,
.search__hit.is-actief {
  background-color: var(--brand-50, #e3ede8);
}

.search__hit img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm, 4px);
  object-fit: cover;
}

.search__hit-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.search__hit-naam {
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search__hit-prijs {
  font-family: var(--font-cond);
  font-weight: 600;
  color: var(--ink-2);
}

.search__leeg {
  margin: 0;
  padding: var(--s-3) var(--s-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* .search button in shop.css kleurt elke knop in dit formulier oranje;
   deze regel moet daar met hogere specificiteit overheen. */
form.search .search__drop .search__alles {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  padding: var(--s-2);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent-dark, var(--accent));
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

form.search .search__drop .search__alles:hover {
  background: none;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Prijs op de productpagina
   -------------------------------------------------------------------------- */

/* De prijs stond in dezelfde maat als de lopende tekst en was daardoor niet
   het eerste wat je zag in het bestelblok. */
body.woocommerce .buybox > .price,
body.woocommerce .buybox .woocommerce-variation-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-family: var(--font-cond);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

body.woocommerce .buybox > .price del,
body.woocommerce .buybox .woocommerce-variation-price .price del {
  order: 2;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: line-through;
  opacity: 1;
}

body.woocommerce .buybox > .price ins,
body.woocommerce .buybox .woocommerce-variation-price .price ins {
  order: 1;
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm, 4px);
  background-color: var(--sale);
  color: #fff;
  text-decoration: none;
}

/* Het bedrag in het rode vlak erfde de donkere tekstkleur van de
   algemene prijsregel (2,9:1 op rood); wit haalt ruim de eis. */
body.woocommerce .buybox .price ins .woocommerce-Price-amount {
  color: #fff;
}

/* Zodra WooCommerce de prijs van de gekozen variant invult, zegt het bereik
   erboven niets meer en stonden er twee bedragen onder elkaar. Zonder keuze
   blijft het bereik staan, want dan is het de enige prijsinformatie. */
body.woocommerce .buybox:has(.woocommerce-variation-price .price) > .price {
  display: none;
}

.buybox__save {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sale);
}

/* --------------------------------------------------------------------------
   Mobiel
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Op een klein scherm nam een vaste header te veel van het beeld in. */
  .headwrap {
    position: static;
  }
}

@media (max-width: 640px) {
  /* Twee productkaarten naast elkaar. .grid--2 en .grid--3 dragen ook de
     class .grid maar zijn tekstlayouts, zoals de contactpagina; die hoorden
     hier nooit bij en werden zo tot 226px geknepen. */
  .grid--shop,
  .grid:not(.grid--2):not(.grid--3),
  .sw-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }

  .grid--2,
  .grid--3,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* Naast elkaar scrollt korter en past bij de productkaarten. */
  .tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }

  .tile {
    aspect-ratio: 4 / 3;
  }

  .tile__body {
    padding: var(--s-3);
  }

  .tile__body h3 {
    font-size: 1.15rem;
    line-height: 1.15;
  }

  .tile__body > span:not(.tile__go) {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .tile__go {
    margin-top: var(--s-2);
    font-size: 0.85rem;
  }

  .pricetag {
    gap: var(--s-1, 0.35rem);
  }

  .pricetag__now {
    font-size: 1.1rem;
  }

  body.woocommerce-page.woocommerce .card a.button,
  body.woocommerce-page.woocommerce .card button.button,
  body.woocommerce-page.woocommerce .card .btn,
  body .card a.wp-block-button__link {
    font-size: var(--fs-sm);
    padding-inline: var(--s-2);
    hyphens: auto;
  }

  body.woocommerce .buybox > .price,
  body.woocommerce .buybox .woocommerce-variation-price .price {
    font-size: 1.85rem;
  }

  .logo__mark {
    width: 124px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #Worm {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   USP-balk op mobiel
   -------------------------------------------------------------------------- */

/* Onder elkaar erfden de items nog de kolomregels van de brede weergave:
   het eerste item had padding-left 0 en de rest 24px, waardoor de regels
   niet onder elkaar uitlijnden. */
@media (max-width: 640px) {
  .usp__list {
    grid-template-columns: 1fr;
  }

  .usp__list li,
  .usp__list li:first-child,
  .usp__list li:last-child {
    padding-inline: 0;
    padding-block: var(--s-3);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .usp__list li:last-child {
    border-bottom: 0;
  }
}

/* Twee links die op mobiel nog onder de tikmaat bleven: de verwijzing naar
   de voorwaarden in het akkoordvakje, en de menu-items in het uitschuifmenu. */
@media (max-width: 640px) {
  .wpcf7-acceptance a,
  .wpcf7-list-item-label a {
    display: inline-block;
    padding-block: 0.4em;
  }

  .catnav__list a {
    padding-block: 0.75em;
  }
}

@media (max-width: 640px) {
  /* De actielink naast een sectiekop ("Bekijk alle producten") was 27px
     hoog. */
  .sect__head a {
    display: inline-block;
    padding-block: 0.4em;
  }
}

/* --------------------------------------------------------------------------
   Uitschuifmenu op mobiel
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* De lade stond buiten beeld met translateX, maar bleef zichtbaar voor de
     browser: met de tabtoets liep de focus door zeven links die niemand kan
     zien. visibility haalt ze uit de tabvolgorde en uit de voorleesboom, en
     schakelt pas na de schuifanimatie. */
  .catnav {
    visibility: hidden;
    transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
  }

  .catnav.is-open {
    visibility: visible;
    transition: transform 0.32s var(--ease), visibility 0s linear 0s;
  }
}

/* --------------------------------------------------------------------------
   Kortingsbadge in winkelwagen en afrekenen
   -------------------------------------------------------------------------- */

/* De blokken-winkelwagen zet "Bespaar € 26,39" in een ongestylede grijze
   badge, terwijl een actie op de rest van de site rood is (zie
   .pricetag__now in het winkeloverzicht). Zo leest de korting op de
   afrekenpagina niet als uitgegrijsde bijzaak. */
.wc-block-components-sale-badge,
.wc-block-components-product-badge.wc-block-components-sale-badge {
  padding: 0.15em 0.5em;
  border: 0;
  border-radius: var(--r-sm, 4px);
  background-color: var(--sale);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
}

/* Het bedrag zit in een eigen span met een eigen kleur. */
/* Op een telefoon kreeg de totaalkolom van een regel in de winkelwagen
   47px: "€ 72,60" en het kortingslabel liepen buiten beeld. De kolom
   krijgt wat hij nodig heeft, de omschrijving de rest. */
@media (max-width: 640px) {
  .wp-block-woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 80px minmax(0, 1fr) auto;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    grid-column: 3;
    white-space: nowrap;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-sale-badge {
    display: inline-block;
    white-space: nowrap;
  }
}

.wc-block-components-sale-badge .wc-block-formatted-money-amount,
.wc-block-components-sale-badge .wc-block-components-formatted-money-amount {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Categorietegels op tablet
   -------------------------------------------------------------------------- */

/* shop.css zet de tegels onder 900px op één kolom en woo.css onder 640px op
   twee. Daartussen bleef één kolom over: op een tablet werd elke tegel dan
   768px breed en een half scherm hoog. Twee naast elkaar leest daar prettiger
   dan drie, want de ondertitel moet nog passen. */
@media (min-width: 641px) and (max-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Winkelwagen-icoon op de bestelknop
   -------------------------------------------------------------------------- */

/* Hetzelfde kartje als in de header, als masker zodat het de kleur van de
   knoptekst volgt: wit op oranje, en grijs zodra de knop uit staat omdat er
   nog geen variant gekozen is. */
body.woocommerce .single_add_to_cart_button::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask-image: var(--sw-kar);
  mask-image: var(--sw-kar);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

:root {
  --sw-kar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.4a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.5L20.5 8H6'/%3E%3Ccircle cx='10' cy='19.5' r='1.4'/%3E%3Ccircle cx='17' cy='19.5' r='1.4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Aantalveld vierkant, knoplabel op één regel
   -------------------------------------------------------------------------- */

/* Het aantalveld was 88px breed naast een knop die daardoor te weinig ruimte
   overhield: bij een grotere systeemletter brak "In winkelwagen" over twee
   regels. Het veld bevat hooguit twee cijfers, dus een vierkant volstaat.
   De hoogte komt van de flexrij, aspect-ratio maakt de breedte gelijk. */
body.woocommerce .quantity {
  flex: 0 0 auto;
  align-self: stretch;
}

/* Geen aspect-ratio met height 100%: dat gaf een lus waarin het veld de rij
   ophoogde en zichzelf daarmee steeds breder maakte (171x171). De rij is
   even hoog als de knop, dus een vaste breedte in em maakt het vierkant. */
body.woocommerce .quantity input.qty {
  /* Vierkant, maar niet met aspect-ratio: als flex-item bepaalt het veld dan
     zijn eigen hoogte uit zijn breedte, rekt daarmee de rij op en groeit
     zichzelf tot 171px. De knop ernaast is 1.2 x 1.05rem tekst plus 0.8rem
     padding boven en onder plus 2px rand; diezelfde maat in rem als breedte
     houdt het veld vierkant, ook als de bezoeker een grotere letter kiest. */
  align-self: stretch;
  height: auto;
  width: calc(2.86rem + 4px);
  min-width: 0;
  padding-inline: 0.25rem;
  text-align: center;
}

/* Met de ruimte die vrijkomt past het label op één regel; nowrap houdt het
   daar ook als de bezoeker een grotere systeemletter heeft ingesteld. */
body.woocommerce-page.woocommerce form.cart button.single_add_to_cart_button,
body.woocommerce form.cart button.single_add_to_cart_button {
  white-space: nowrap;
}

/* Melding over de verzenddag van levende wormen, boven de winkelwagen en
   het afrekenen. Zelfde vorm als de uitverkocht-melding. */
.sw-verzenddag {
  margin: 0 0 var(--s-5);
  background-color: var(--accent-soft);
  border-color: #f3d3b8;
  color: var(--ink);
  font-size: var(--fs-base);
}

.sw-verzenddag p {
  margin: 0;
  max-width: 75ch;
}

/* --------------------------------------------------------------------------
   Beoordelingen op de productpagina
   -------------------------------------------------------------------------- */

.pdp__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
}

.pdp__rating:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce .star-rating {
  float: none;
  margin: 0;
  color: var(--accent);
}

.woocommerce .star-rating::before {
  color: var(--line-strong);
}

.panel--reviews .woocommerce-Reviews-title {
  margin-bottom: var(--s-4);
}

.panel--reviews .woocommerce-noreviews,
.panel--reviews .woocommerce-verification-required {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
}

.panel--reviews .woocommerce-verification-required {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
}

.woocommerce #reviews #comments ol.commentlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
  margin: 0;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}

.woocommerce #reviews #comments ol.commentlist li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Geen profielfoto's: die komen van gravatar.com en staan uit. */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  margin: var(--s-2) 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta strong {
  color: var(--ink);
}

.woocommerce-review__verified {
  font-style: normal;
  color: var(--ok);
}

.woocommerce #reviews #comments ol.commentlist li .description p {
  max-width: 68ch;
  margin: 0;
  color: var(--ink-2);
}

.woocommerce #review_form_wrapper {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 2px solid var(--brand-900);
}

.woocommerce #review_form #respond {
  max-width: 40rem;
}

.woocommerce #review_form #respond .comment-reply-title {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.woocommerce #review_form #respond p {
  margin: 0 0 var(--s-4);
  max-width: none;
}

.woocommerce #review_form #respond label {
  display: block;
  margin-bottom: var(--s-1);
  font-weight: 600;
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
}

.woocommerce #review_form #respond textarea {
  min-height: 8rem;
}

.woocommerce #review_form #respond textarea:focus-visible,
.woocommerce #review_form #respond input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.woocommerce p.stars a {
  color: var(--accent);
  min-width: 1.6em;
  min-height: 1.6em;
}

.woocommerce #review_form #respond .form-submit input#submit {
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--accent);
  border-radius: var(--r);
  background-color: var(--accent);
  color: #fff;
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  cursor: pointer;
}

.woocommerce #review_form #respond .form-submit input#submit:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}