/* ==========================================================================
   Overig: losse fixes die niet bij een vaste sectie hoorden in het
   oorspronkelijke style.css (winkelmand-aantal, filters, zoekbalk, etc.)
   ========================================================================== */

/* Winkelmand aantal */
.product .quantity input.qty::-webkit-outer-spin-button,
.product .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.product .quantity input[type="number"] {
  -moz-appearance: textfield !important;
  background: #42b26f !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  width: 2rem !important;
  text-align: center;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.product .quantity .button-minus,
.product .quantity .button-plus {
  background: #42b26f !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 26px;
  border: none !important;
}
.product .cart .add_to_cart_button {
  flex: 1;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.product .post_image {
  background: transparent;
  border-radius: var(--border-radius);
}

.aws-container .aws-search-form .aws-wrapper {
  overflow: unset !important;
}

.variations label {
  padding-top: 0 !important;
}

/* Productfoto in het overzicht: achtergrond gelijk aan de site (wit) en de foto iets groter */
/* Wit (= sitekleur) en niet transparant: anders schijnt de hoofdfoto door de hover-foto heen */
.product-grid img {
  background-color: var(--color-content-bg) !important;
}
.product-grid .post_image {
  overflow: hidden;
}
/* Alleen de hoofdfoto vergroten; "scale" (los van transform) zodat de hover-zoom en de hover-foto niet verstoord worden */
.product-grid .post_image img:first-of-type {
  scale: 1.15;
}

.dynamic-subcategories {
  list-style: none;
  margin: 0;
}
.dynamic-subcategories > li {
  margin: 0;
}

.form-row-wide.validate-eu-vat-number {
  display: none !important;
}

.w-filter-opener {
  background: transparent;
  font-size: 18px;
  border: solid 2px var(--color-main);
  padding: 0.8em 1.8em;
  width: 100%;
}
.w-filter-opener > span::before {
  content: "\f88b";
  font-family: "fontawesome";
  font-weight: 700;
  margin-right: 10px;
}

.shop_table .product-quantity > .quantity {
  justify-content: center;
}

.page-winkelwagen .woocommerce-shipping-totals.shipping {
  display: none;
}

.custom-text-underline,
.custom-text-underline .w-btn-label {
  text-decoration: underline;
}

.afbeelding-donker {
  filter: brightness(0.6);
}

.owl-nav {
  bottom: 40px !important;
  right: 40px !important;
}

.owl-prev:after {
  content: "" !important;
  display: block;
  width: 35px;
  height: 35px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.owl-next:after {
  content: "" !important;
  display: block;
  width: 35px;
  height: 35px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

#sb_instagram #sbi_images {
  padding: 0 !important;
}

#sb_instagram {
  padding-bottom: 0 !important;
}

.custom-icon .w-iconbox-title {
  color: var(--color-alt-content-primary) !important;
}

/* Het inputveld stond op wit-op-wit tekst (de footer zet standaard
   witte tekstkleur voor al zijn content, en dat erfde door in het
   invoerveld) waardoor getypte tekst onzichtbaar was. */
#page-footer .word-member-formulier_wrapper input[type="text"],
#page-footer .word-member-formulier_wrapper input[type="email"] {
  color: #333333;
}

/* .gform_fields gebruikt een 12-koloms CSS-grid (zie Gravity Forms'
   eigen .gform_wrapper.gravity-theme .gform_fields-regel); elk veld
   krijgt zijn breedte via grid-column: span N, aangestuurd door een
   gfield--width-X-twelfths-klasse. Standaard staat het inputveld op
   5/12 en de knop op 7/12 (de knop krijgt dus MEER ruimte dan het
   veld) - hier omgedraaid naar 7/12 voor het veld en 5/12 voor de
   knop. */
.word-member-formulier_wrapper .gfield--width-five-twelfths {
  grid-column: span 7 !important;
}
.word-member-formulier_wrapper .gfield--width-seven-twelfths {
  grid-column: span 5 !important;
}

/* Zonder de standaard column-gap (2%) tussen veld en knop gaat de
   volle 100% van de rij naar de velden zelf, i.p.v. dat er ruimte
   tussenuit verdwijnt. */
.word-member-formulier_wrapper .gform_fields {
  column-gap: 0 !important;
}

.gform_wrapper.gravity-theme .gform_fields {
  align-items: center !important;
}

#gform_submit_button_5 {
  min-width: max-content;
  text-wrap: nowrap;
}

/* Minder padding op de knop, zodat hij compacter oogt naast het
   grotere invoerveld, plus de opgegeven donkere knopkleur. nowrap
   voorkomt dat "WORD MEMBER" naar twee regels omslaat, en min-width:
   max-content voorkomt dat de tekst bij een smallere kolom (bv.
   mobiel) buiten de knop komt te vallen: de knop kan dan niet smaller
   worden dan de tekst nodig heeft, de grid-kolom groeit zo nodig mee
   en het invoerveld krimpt in plaats daarvan. Live getest door de
   kolom kunstmatig tot 200px te versmallen. */
#page-footer .word-member-formulier_wrapper .gform-button {
  padding: 12.8px 16px;
  white-space: nowrap;
  min-width: max-content;
  background-color: #2f1c0c;
}
#page-footer .word-member-formulier_wrapper .gform-button:hover,
#page-footer .word-member-formulier_wrapper .gform-button:focus {
  background-color: #4d3018;
}

/* Op mobiel (<=640px) past de knop niet meer netjes naast het
   e-mailveld: .gform-button heeft min-width:max-content (zie
   hierboven) zodat "WORD MEMBER" niet afbreekt, maar de knop-kolom
   (5/12 van de rij) wordt op smalle schermen te smal om die
   min-content-breedte (~150px) te bevatten. De knop groeit dan over
   zijn eigen grid-kolom heen en steekt rechts uit de kaart/het vakje.
   Live gemeten: dit gebeurt zodra de rij-breedte onder ~360px komt,
   d.w.z. bij een viewport kleiner dan ~456px (kaart = viewport -
   2x48px marge) - dus alle telefoons, geen tablets (bij 768px en ook
   al bij 640px past het nog gewoon naast elkaar). Oplossing: op
   mobiel veld en knop onder elkaar zetten i.p.v. naast elkaar, dan is
   er nooit een breedteprobleem. Geldt voor alle plekken waar dit
   formulier voorkomt (ook de hero-sectie boven aan de homepage, niet
   alleen de footer), vandaar geen #page-footer scope hier. */
@media (max-width: 640px) {
  .word-member-formulier_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  .word-member-formulier_wrapper .gfield--width-five-twelfths,
  .word-member-formulier_wrapper .gfield--width-seven-twelfths {
    grid-column: 1 / -1 !important;
    width: 100%;
  }
  .word-member-formulier_wrapper .gform-button {
    width: 100%;
  }
}

#page-footer .l-section.height_medium {
  padding: 0 !important;
}

/* De herbruikbare Zappaz Club-sectie is in de bestaande footer-kolom
   geplakt. Drie dingen moesten daardoor gecorrigeerd: de oude kop +
   scheidingslijn die al in die kolom stonden staan nu dubbel op (de
   geplakte sectie brengt zijn eigen kop mee), de sectie's eigen
   kopkleur (goud) valt weg tegen de identiek gekleurde footer-
   achtergrond, en de rij viel terug naar een eigen regel onder de
   andere footer-kolommen i.p.v. ernaast. Alles hieronder is gescoped
   op #page-footer zodat de homepage-versie van dit blok ongewijzigd
   blijft. Let op: .vc_col-md-3 (niet het algemenere .wpb_column) is
   bewust gebruikt om alleen de buitenste footer-kolom te raken en niet
   de eigen binnenste kolom die de geplakte sectie meebrengt. */

/* Dubbele "Zappaz Club"-kop + scheidingslijn verbergen; de
   scheidingslijn vóór "Openingstijden" blijft gewoon staan. */
#page-footer h6.w-text:has(+ .w-separator + section.l-section.height_medium),
#page-footer .w-separator:has(+ section.l-section.height_medium) {
  display: none;
}

/* Gecentreerde uitlijning (bedoeld voor de volle-breedte homepage-rij)
   omzetten naar links uitgelijnd, met behoud van volle breedte. */
#page-footer
  .vc_col-md-3:has(.word-member-formulier_wrapper)
  .w-vwrapper.align_center {
  align-items: stretch;
  text-align: left;
}

#gform_wrapper_5 {
  width: 100%;
}

/* De sectie's eigen kopkleur is goud (#AB9780) en valt weg tegen de
   identiek gekleurde footer-achtergrond; de WPBakery Design-Options
   kleur staat op !important, dus deze override moet dat ook zijn. Zelf
   in de pagina-builder verder verfijnd: volle breedte, kleiner
   lettertype voor de smalle kolom, en de tekst-spans boven uitgelijnd
   i.p.v. verticaal gecentreerd. */
#page-footer .vc_col-md-3:has(.word-member-formulier_wrapper) h3.w-text {
  width: 100%;
  color: #ffffff !important;
  font-size: 1.4rem;
}
#page-footer
  .vc_col-md-3:has(.word-member-formulier_wrapper)
  h3.w-text
  .w-text-h,
#page-footer
  .vc_col-md-3:has(.word-member-formulier_wrapper)
  h3.w-text
  .w-text-value {
  align-items: start;
}

/* Kolom naast de andere 3 footer-kolommen houden i.p.v. laten
   terugvallen naar een nieuwe regel: de rij staat op flex-wrap en een
   kolom zonder eigen breedte-override viel daardoor naar beneden. Dit
   MOET beperkt blijven tot de brede (laptop/desktop) rij-variant:
   Impreza rendert deze 4 kolommen op mobiel/tablet (<=1024px) als een
   HELE ANDERE rij-variant die standaard netjes stapelt. Zonder deze
   media query dwong flex-wrap:nowrap ook die mobiele rij tot 1 regel,
   waardoor alles onleesbaar smal werd. 1025px is exact Impreza's eigen
   "laptop en groter"-omslagpunt (zie hide_on_tablets/hide_on_mobiles
   op de brede rij-variant, live opgezocht in de site-CSS). */
@media (min-width: 1025px) {
  #page-footer .g-cols.vc_row:has(> .vc_col-md-3) {
    flex-wrap: nowrap;
  }
  #page-footer .vc_col-md-3:has(.word-member-formulier_wrapper) {
    flex: 0 1 34%;
    width: 34%;
  }

  /* De overige 3 kolommen (Logo, Contact, Klantenservice) gebruiken
     WPBakery's eigen "1/5"-breedteklasse (20% - restant van een oorspronkelijk
     5-koloms opzet), wat samen met de 34% van de Zappaz Club-kolom niet aan
     100% van de rij optelt (3x20% + 34% = 94%). Dat overige stuk bleef leeg
     aan de rechterkant. Hier op 22% gezet zodat 3x22% + 34% = 100%: geen
     restruimte meer, en de kolombreedtes kloppen weer met wat er feitelijk
     naast elkaar moet passen. */
  #page-footer .g-cols.vc_row:has(> .vc_col-md-3) > .vc_col-md-1\/5 {
    width: 22%;
    flex: 0 1 22%;
  }

  /* Dezelfde ontbrekende linker-gutter als eerder al gefixt voor mobiel/
     tablet (zie hierboven): .vc_column-inner van de Zappaz Club-kolom heeft
     van origine alleen rechts 24px padding. In de brede 4-koloms rij zorgde
     dat ervoor dat de "ZAPPAZ CLUB"-kop losstond van links, direct tegen de
     "KLANTENSERVICE"-kolom aan (geen 24+24px gutter zoals tussen de andere
     kolommen), waardoor de koppen bijna aan elkaar plakten. */
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner {
    padding-left: 24px;
    box-sizing: border-box;
  }
}

/* Mobiele/tablet-weergave (<=1024px) van de Zappaz Club-kolom wijkt af van
   het design: de 4 footer-kolommen stonden altijd in dezelfde DOM-volgorde
   als desktop (Logo, Contact, Klantenservice, Openingstijden+Zappaz Club),
   maar het design wil op mobiel: Logo, Contact, Openingstijden, Zappaz Club
   (als kaart), Klantenservice. Dit is puur met flex-order opgelost (geen
   HTML-verplaatsing nodig) zodat de #page-footer scope en de reeds
   bestaande selectors intact blijven. */
@media (max-width: 1024px) {
  /* Kolommen laten stapelen i.p.v. naast elkaar proberen te passen (dat is
     alleen voor >=1025px bedoeld, zie het blok hierboven). */
  #page-footer .g-cols.vc_row:has(> .vc_col-md-3) {
    flex-wrap: wrap;
  }
  #page-footer .vc_col-md-3:has(.word-member-formulier_wrapper) {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Zappaz Club-kolom direct na Contact zetten, Klantenservice-kolom
     (herkend aan zijn stabiele klantenservice-menu-klasse, niet aan
     positie) erna. Logo en Contact houden hun standaard order:0, dus die
     blijven vooraan in hun bestaande DOM-volgorde. */
  #page-footer .vc_col-md-3:has(.word-member-formulier_wrapper) {
    order: 1;
  }
  #page-footer .vc_col-md-1\/5:has(.klantenservice-menu) {
    order: 2;
  }

  /* Binnen de Zappaz Club-kolom: Openingstijden-kop + tekst vóór de Zappaz
     Club-sectie tonen i.p.v. erna (zo staat het in het design). */
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper {
    display: flex;
    flex-direction: column;
  }
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper
    > h6.w-text {
    order: 0;
  }
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper
    > .w-separator:nth-of-type(2) {
    order: 1;
  }
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper
    > .wpb_text_column {
    order: 2;
  }
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper
    > .l-section.height_medium {
    order: 3;
    width: 100%;
  }
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner
    > .wpb_wrapper
    > .w-separator:nth-of-type(1) {
    order: 4;
  }

  /* Kaart-uiterlijk voor de Zappaz Club-sectie zelf, zoals het design:
     lichte kaart i.p.v. dezelfde beige tint als de footer-achtergrond.
     Kleuren (#f7f5f2 kaart, #ab9780 kop) komen 1-op-1 uit de eigen
     WPBakery Design Options van deze sectie op de homepage-versie - daar
     heeft de sectie namelijk al precies deze kaart, alleen viel 'm in de
     footer weg tegen de identiek gekleurde achtergrond (vandaar eerder de
     geforceerde witte tekst hierboven, die hier voor mobiel weer wordt
     teruggedraaid nu de kaart een eigen lichte achtergrond heeft). */
  #page-footer .l-section.height_medium {
    background-color: #f7f5f2;
    border-radius: 16px;
    padding: 24px !important;
    margin-top: 16px;
  }
  #page-footer .vc_col-md-3:has(.word-member-formulier_wrapper) h3.w-text {
    color: #ab9780 !important;
  }
  #page-footer .l-section.height_medium .wpb_text_column {
    color: #333333 !important;
  }
  /* De Zappaz Club-kolom (.vc_col-md-3) had zelf geen linker-gutter (haar
     .vc_column-inner heeft van origine alleen rechts 24px padding - op
     desktop compenseerde de rest van de rij dat, maar op mobiel/tablet
     staat deze kolom nu alleen op een eigen regel), waardoor de kaart en
     de Openingstijden-kop/tekst links tegen de rand aan plakten terwijl
     Contact/Klantenservice wel 24px inspringen. */
  #page-footer
    .vc_col-md-3:has(.word-member-formulier_wrapper)
    > .vc_column-inner {
    padding-left: 24px !important;
    box-sizing: border-box;
  }

  /* KVK/BTW helemaal onderaan (na Klantenservice) i.p.v. direct onder
     Contact. Ze zitten oorspronkelijk samen met adres/e-mail/telefoon in
     dezelfde w-vwrapper binnen de Contact-kolom, dus om ze op de eigen
     positie in de flex-volgorde van de rij te krijgen (order werkt alleen
     tussen flex-items van dezelfde ouder) wordt de hele keten
     kolom > vc_column-inner > wpb_wrapper > w-vwrapper "doorzichtig"
     gemaakt met display:contents; de losgekomen elementen krijgen zelf
     weer de 24px gutter terug die ze via die kolom verloren. */
  #page-footer .vc_col-md-1\/5:has(.post_custom_field.option\|adres) {
    display: contents;
  }
  #page-footer
    .vc_col-md-1\/5:has(.post_custom_field.option\|adres)
    > .vc_column-inner {
    display: contents;
  }
  #page-footer
    .vc_col-md-1\/5:has(.post_custom_field.option\|adres)
    > .vc_column-inner
    > .wpb_wrapper {
    display: contents;
  }
  #page-footer
    .vc_col-md-1\/5:has(.post_custom_field.option\|adres)
    .w-vwrapper.align_none {
    display: contents;
  }
  #page-footer
    .vc_col-md-1\/5:has(.post_custom_field.option\|adres)
    > .vc_column-inner
    > .wpb_wrapper
    > *,
  #page-footer
    .vc_col-md-1\/5:has(.post_custom_field.option\|adres)
    .w-vwrapper.align_none
    > * {
    width: 100%;
    flex: 0 0 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  #page-footer .w-vwrapper.align_none > .w-separator,
  #page-footer .post_custom_field.option\|kvk_nummer,
  #page-footer .post_custom_field.option\|btw_nummer {
    order: 3;
  }
}

/* ====================================================================
   Header: dubbele ruimte onder de header op tablet (alle pagina's)
   ====================================================================
*/
.header_hor .l-header.pos_static.bg_solid ~ .l-main {
  --header-height: 0px;
}

/* Vrijwel onzichtbare halftransparante achtergrond in de productfoto's wegfilteren (filter staat inline in de footer) */
.product-grid img,
.us_product_list .post_image img { filter: url(#zz-alpha-clean); }

/* Homepage: alleen het fotovlak beige (zelfde beige voor elke foto), tekst blijft op wit */
.us_product_list .post_image,
.us_product_carousel .post_image { background: var(--color-content-bg-alt) !important; }

/* Homepage-kaarten: bij hover iets omhoog, zodat duidelijk is dat de kaart klikbaar is */
.us_product_list .w-grid-item-h,
.us_product_carousel .w-grid-item-h { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
	.us_product_list .w-grid-item:hover .w-grid-item-h,
	.us_product_carousel .w-grid-item:hover .w-grid-item-h { transform: translateY(-4px); }
}

/* Mobiel: homepage-kaarten, kleinere tekst en compactere spacing (smalle kaarten) */
@media (max-width: 600px) {
	.us_product_carousel .w-grid-item-h { padding-bottom: 0; }
	.us_product_carousel .w-grid-item-h .w-vwrapper.w-vwrapper { padding: 0.8rem 1rem 0.9rem !important; }
	.us_product_carousel .w-html a > span:first-child { font-size: 1rem !important; line-height: 1.2 !important; }
	.us_product_carousel .w-html a > span:last-child { font-size: 0.8rem !important; line-height: 1.25 !important; margin-top: 0.1em !important; }
	.us_product_carousel .w-vwrapper .w-html.w-html { margin-bottom: 0.25rem !important; min-height: 0 !important; }
	.us_product_carousel .price { font-size: 0.85rem !important; }
}

/* Filteronderdeel zonder beschikbare waarden (bv. Maat bij Tassen: alleen "-" en "stuks", die zijn uitgesloten) helemaal verbergen */
.w-filter-item.disabled { display: none; }

/* Bestelling intrekken (publieke pagina) */
.zz-bestelling-intrekken{max-width:44rem;margin:3rem auto 4rem;padding:0 1rem}
.zz-bestelling-intrekken .zz-intrekken-title{margin:0 0 1rem;text-align:center}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__intro{font-size:1.1rem;text-align:center;margin-bottom:.5rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__note{text-align:center;opacity:.75;font-size:.9rem;margin-bottom:1.5rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__steps{list-style:none;display:flex;justify-content:center;gap:.5rem;margin:0 0 1.5rem;padding:0}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__step{margin:0;padding:.35rem .9rem;border-radius:2rem;background:var(--color-content-bg-alt);font-size:.85rem;opacity:.6}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__step--current{opacity:1;background:var(--color-content-primary);color:#fff}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm{background:var(--color-content-bg);box-shadow:0 .15rem 1.2rem rgba(0,0,0,.1);border-radius:.3rem;padding:2rem}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm .form-row{width:100%;float:none;margin:0 0 1.2rem}
.zz-bestelling-intrekken .woocommerce-form-row--first,.zz-bestelling-intrekken .woocommerce-form-row--last{display:none}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm input[type=text],.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm input[type=email],.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm textarea{width:100%}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm button,.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm .button{width:100%;margin-top:.5rem}
@media (max-width:600px){.zz-bestelling-intrekken{margin:1.5rem auto 3rem}.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm{padding:1.2rem}}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm button,.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm .button{background:#2f1c0c!important;color:#fff!important;border:0;border-radius:0;text-transform:uppercase;font-weight:600;padding:.9rem 1.2rem;cursor:pointer;transition:background .2s}
.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm button:hover,.zz-bestelling-intrekken .woocommerce-OrderWithdrawalForm .button:hover{background:#4a2f17!important}

/* Mijn account: subpagina's (staging) */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,.woocommerce-MyAccount-content .woocommerce-address-fields,.woocommerce-MyAccount-content .woocommerce-Address,.woocommerce-MyAccount-content .woocommerce-orders-table,.woocommerce-MyAccount-content .woocommerce-order-details,.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column{background:var(--color-content-bg);box-shadow:0 .15rem 1.2rem rgba(0,0,0,.08);border-radius:.3rem;padding:1.5rem}
.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address{width:auto;float:none;margin:0}
.woocommerce-MyAccount-content .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--color-content-border)}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,.woocommerce-MyAccount-content .woocommerce-Address-title h3{font-size:1.2rem;margin:0}
.woocommerce-MyAccount-content .woocommerce-Address-title a.edit{float:none;font-size:.85rem;font-weight:600;text-transform:uppercase}
.woocommerce-MyAccount-content address{font-style:normal;line-height:1.7}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset{border:0;padding:1rem 0 0;margin:1rem 0 0;border-top:1px solid var(--color-content-border)}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm legend{font-weight:600;padding:0 .5rem 0 0}
.woocommerce-MyAccount-content .woocommerce-orders-table{width:100%;border:0;border-collapse:collapse}
.woocommerce-MyAccount-content .woocommerce-orders-table th{text-transform:uppercase;font-size:.8rem;letter-spacing:.04em}
.woocommerce-MyAccount-content .woocommerce-orders-table td,.woocommerce-MyAccount-content .woocommerce-orders-table th{border-left:0;border-right:0;padding:.8rem .6rem}
.woocommerce-MyAccount-content button[type=submit],.woocommerce-MyAccount-content .woocommerce-Button,.woocommerce-MyAccount-content .woocommerce-button{background:#2f1c0c!important;color:#fff!important;border:0;border-radius:0;text-transform:uppercase;font-weight:600;padding:.8rem 1.4rem;cursor:pointer;transition:background .2s}
.woocommerce-MyAccount-content button[type=submit]:hover,.woocommerce-MyAccount-content .woocommerce-Button:hover,.woocommerce-MyAccount-content .woocommerce-button:hover{background:#4a2f17!important}

/* Mijn account: bestellingenlijst fine-tuning */
.woocommerce-MyAccount-content .woocommerce-info,.woocommerce-MyAccount-content .woocommerce-message{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--color-content-bg-alt);border:0;border-radius:.3rem;padding:1rem 1.2rem;margin:0 0 1.2rem}
.woocommerce-MyAccount-content .woocommerce-info .button,.woocommerce-MyAccount-content .woocommerce-message .button{order:2;margin:0 0 0 auto;background:#2f1c0c!important;color:#fff!important;border-radius:0;padding:.6rem 1rem;text-transform:uppercase;font-weight:600;font-size:.8rem}
.woocommerce-MyAccount-content .woocommerce-orders-table{border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-MyAccount-content .woocommerce-orders-table th,.woocommerce-MyAccount-content .woocommerce-orders-table td{padding:.9rem 1.2rem;border-bottom:1px solid var(--color-content-border);vertical-align:middle}
.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td{border-bottom:0}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button{display:inline-block;margin:.15rem 0 .15rem .4rem;padding:.55rem .9rem;font-size:.8rem}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-button.cancel{background:transparent!important;color:#2f1c0c!important;box-shadow:inset 0 0 0 1px #2f1c0c}

/* Mijn account: responsive */
@media (max-width:1024px){
.woocommerce-MyAccount-content{margin-top:0!important}
.woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.woocommerce-MyAccount-content .woocommerce-orders-table{display:block;overflow-x:auto}
}
@media (max-width:600px){
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,.woocommerce-MyAccount-content .woocommerce-address-fields,.woocommerce-MyAccount-content .woocommerce-Address{padding:1.1rem}
.woocommerce-MyAccount-content .woocommerce-orders-table{overflow:visible;background:none;box-shadow:none;padding:0}
.woocommerce-MyAccount-content .woocommerce-orders-table thead{display:none}
.woocommerce-MyAccount-content .woocommerce-orders-table tbody,.woocommerce-MyAccount-content .woocommerce-orders-table tr{display:block}
.woocommerce-MyAccount-content .woocommerce-orders-table tr{background:var(--color-content-bg);box-shadow:0 .15rem 1.2rem rgba(0,0,0,.08);border-radius:.3rem;padding:.6rem 0;margin-bottom:1rem}
.woocommerce-MyAccount-content .woocommerce-orders-table td{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:right;border:0;padding:.4rem 1.1rem}
.woocommerce-MyAccount-content .woocommerce-orders-table td::before{content:attr(data-title);font-weight:600;text-align:left}
.woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{flex-wrap:wrap;justify-content:flex-end;white-space:normal}
.woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{display:none}
.woocommerce-MyAccount-content .woocommerce-info,.woocommerce-MyAccount-content .woocommerce-message{padding:.9rem 1rem}
.woocommerce-MyAccount-content .woocommerce-info .button,.woocommerce-MyAccount-content .woocommerce-message .button{margin:0;width:100%;text-align:center}
}
@media (max-width:1024px){
.woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr}
.woocommerce-MyAccount-content .woocommerce-Address-title{flex-wrap:wrap}
}

/* Mijn account: mobiel, tegels en bestelkaarten */
@media (max-width:600px){
.woocommerce-MyAccount-content .custom-dash-container .custom-dash-blok a,.woocommerce-MyAccount-content a:has(.custom-dash-blok){padding:1.4rem .5rem!important}
.woocommerce-MyAccount-content .custom-dash-blok span{font-size:.95rem!important;line-height:1.25;overflow-wrap:anywhere;hyphens:auto;display:block}
.woocommerce-MyAccount-content .woocommerce-orders-table tr.woocommerce-orders-table__row{padding:.8rem 0!important}
.woocommerce-MyAccount-content .woocommerce-orders-table tr.woocommerce-orders-table__row td{padding:.4rem 1.2rem!important}
.woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{padding:.6rem 1.2rem .2rem!important}
.woocommerce-MyAccount-content .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .woocommerce-button{flex:1 1 auto;margin:.2rem!important;text-align:center}
}

/* Bestelling intrekken: bevestigingsstap (geen formulier) */
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:not(:has(form)){background:var(--color-content-bg);box-shadow:0 .15rem 1.2rem rgba(0,0,0,.1);border-radius:.3rem;padding:2rem;text-align:center}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:not(:has(form)) p{margin:0 0 1rem;line-height:1.6}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:not(:has(form)) p:first-child strong{font-size:1.25rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:not(:has(form)) p:last-child{margin-bottom:0}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:not(:has(form)) p:last-child a{display:inline-block;background:#2f1c0c;color:#fff;padding:.8rem 1.4rem;text-transform:uppercase;font-weight:600;font-size:.85rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__intro,.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__note{line-height:1.6}

/* Afrekenen: verzending rechts uitlijnen + sterretje bij voorwaarden */
.woocommerce-checkout-review-order-table tr.shipping td{vertical-align:middle;text-align:right}
.woocommerce-checkout-review-order-table tr.shipping td ul,.woocommerce-checkout-review-order-table tr.shipping td li{margin:0;padding:0;justify-content:flex-end;text-align:right}
.woocommerce-checkout-review-order-table tr.shipping td label{margin:0;padding:0;line-height:inherit}
.woocommerce-checkout .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;justify-content:flex-start;gap:.6rem}
.woocommerce-checkout .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text{flex:0 1 auto}
.woocommerce-checkout .woocommerce-form__label-for-checkbox abbr.required{text-decoration:none;border:0;margin-left:-.4rem;flex:none}
.woocommerce-checkout .woocommerce-form__label-for-checkbox abbr.required{display:none}
.woocommerce-checkout .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text::after{content:" *";text-decoration:none}


/* Intrekken: controle-scherm */
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review{background:#fff;border-radius:.4rem;box-shadow:0 .15rem 1.2rem rgba(0,0,0,.1);padding:.5rem 2rem;margin:1.5rem 0}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review-row:last-child{border-bottom:0}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review dt{margin:0;font-weight:400;color:rgba(0,0,0,.55);flex:0 0 auto}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content form{display:block;margin:0 0 .8rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content form:has(button[name*="edit"]),.zz-bestelling-intrekken .woocommerce-order-withdrawal-content form:has([value*="edit"]){margin-bottom:0}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:has(.woocommerce-order-withdrawal-content__review) .woocommerce-OrderWithdrawalForm{background:transparent;box-shadow:none;padding:0}
@media (max-width:600px){
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review{padding:.3rem 1.2rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review-row{flex-direction:column;gap:.2rem}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content__review dd{text-align:left}
}

.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:has(.woocommerce-order-withdrawal-content__review) form:last-of-type .button,.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:has(.woocommerce-order-withdrawal-content__review) form:last-of-type button{background:transparent!important;color:#2f1c0c!important;border:2px solid #2f1c0c!important}
.zz-bestelling-intrekken .woocommerce-order-withdrawal-content:has(.woocommerce-order-withdrawal-content__review) form:last-of-type button:hover{background:#2f1c0c!important;color:#fff!important}

/* Order bekijken */
.woocommerce-MyAccount-content .woocommerce-order-details__title{text-align:left;margin:0 0 1rem;font-size:1.4rem}
.woocommerce-MyAccount-content table.woocommerce-table--order-details{width:100%!important;max-width:none!important;margin:0 0 1.2rem}
.woocommerce-MyAccount-content .woocommerce-order-details .mollie-instructions{box-shadow:none!important;border-radius:.3rem;margin:0 0 1rem!important;padding:.9rem 1.2rem!important}
.woocommerce-MyAccount-content .zz-intrekken-aangevraagd{background:#f6f4f0;border-left:4px solid #2f1c0c;border-radius:.3rem;padding:.9rem 1.2rem;margin:0}

/* BTW-tekst onder het totaal */
.woocommerce-checkout-review-order-table .order-total td,.cart_totals .order-total td{text-align:right}
.woocommerce-checkout-review-order-table .order-total .includes_tax,.cart_totals .order-total .includes_tax{display:block;margin-top:.2rem;font-size:.85rem;font-weight:400;color:rgba(0,0,0,.55);white-space:normal}

/* Privacyzin Zappaz Club-formulier */
.word-member-formulier .gform-footer{padding:0!important;margin:0!important}
.word-member-formulier .zz-club-privacy{margin:.6rem 0 0;font-size:.8rem;line-height:1.4;color:inherit;opacity:.75;text-align:inherit}
.word-member-formulier .zz-club-privacy a{color:inherit;text-decoration:underline}


/* Afrekenen/winkelwagen: hoofdknoppen donkerbruin */
#place_order, .wc-proceed-to-checkout .checkout-button, .woocommerce-checkout #place_order.w-btn {
  background: #2f1c0c !important;
  color: #fff !important;
}
#place_order:hover, .wc-proceed-to-checkout .checkout-button:hover {
  background: #4a3320 !important;
}


/* Winkelwagen en mini-cart: knoppen in de stijl van de site (was groen) */
.woocommerce-cart .woocommerce button.button:not(.checkout-button),
.woocommerce-cart .woocommerce a.button:not(.checkout-button),
.woocommerce-mini-cart__buttons a.button,
.widget_shopping_cart_content .buttons a.button,
.woocommerce a.button.wc-backward {
  background: #AB9780 !important;
  color: #fff !important;
  border-color: #AB9780 !important;
}
.woocommerce-cart .woocommerce button.button:not(.checkout-button):hover,
.woocommerce-cart .woocommerce a.button:not(.checkout-button):hover,
.woocommerce-mini-cart__buttons a.button:hover,
.widget_shopping_cart_content .buttons a.button:hover,
.woocommerce a.button.wc-backward:hover {
  background: #2f1c0c !important;
  border-color: #2f1c0c !important;
}
/* Afrekenen in mini-cart = hoofdactie, donkerbruin zoals bij afrekenen */
.woocommerce-mini-cart__buttons a.button.checkout,
.widget_shopping_cart_content .buttons a.button.checkout {
  background: #2f1c0c !important;
  border-color: #2f1c0c !important;
}
.woocommerce-mini-cart__buttons a.button.checkout:hover,
.widget_shopping_cart_content .buttons a.button.checkout:hover {
  background: #4a3320 !important;
}


/* Mijn account: knoppen (o.a. Intrekken) in huisstijl */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .woocommerce-button,
.zz-intrekken-actie a.button,
.zz-intrekken-actie .button {
  background: #AB9780 !important;
  color: #fff !important;
  border-color: #AB9780 !important;
}
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce .woocommerce-button:hover,
.zz-intrekken-actie a.button:hover,
.zz-intrekken-actie .button:hover {
  background: #2f1c0c !important;
  border-color: #2f1c0c !important;
}