/* Heerdink — stijl die alleen op template graszoden.php voorkomt. Laadt na global.css. */
.bestelkaart{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);
  padding:clamp(20px,2.4vw,32px);display:grid;gap:18px;box-shadow:0 10px 30px rgba(20,77,41,.07)}
.bestelkaart__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--color-line)}
.bestelkaart__kop h3{margin:0;color:var(--color-primary)}
.bestelkaart__prijs{margin:0;font-size:1.52rem;color:var(--color-muted);text-align:right;white-space:nowrap}
.bestelkaart__prijs b{display:block;font-family:var(--font-heading);font-size:clamp(2.4rem,2.4vw,3.2rem);color:var(--color-primary);line-height:1}
.bestelkaart .field{margin:0}
.bestelkaart__keuze{border:0;padding:0;margin:0;display:grid;gap:10px}
.bestelkaart__keuze legend{font-weight:600;padding:0;margin-bottom:4px}
.bestelkaart .keuze{display:flex;align-items:center;gap:12px;border:1px solid var(--color-line);border-radius:var(--radius-sm);
  padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.bestelkaart .keuze:hover{border-color:var(--color-primary-soft);background:var(--color-primary-tint)}
.bestelkaart .keuze:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-tint)}
.bestelkaart .keuze input{accent-color:var(--color-primary);width:18px;height:18px}
.bestelkaart .keuze b{font-weight:700;color:var(--color-primary)}
.bestelkaart__totaal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--color-line);padding-top:16px;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.04em}
.bestelkaart__totaal b{font-size:clamp(2.56rem,2.6vw,3.36rem);color:var(--color-primary);line-height:1}
.bestelkaart__regel{margin:-8px 0 0;font-size:1.44rem;color:var(--color-muted)}
.bestelkaart .btn{justify-self:start}
@media (max-width:539px){
  .bestelkaart .btn{justify-self:stretch;width:100%}
}

/* ---------- Bestelkaart met Webweek Product Addons ([ww_addon_form]) ----------
   De plugin levert de velden; hier krijgen ze de opmaak van het design. */
.spa-page .bestelkaart .ww-addon-form,
.spa-page .bestelkaart .ww-addon-form form.cart{margin:0;padding:0;display:grid;gap:18px}
.spa-page .bestelkaart .ww-addon-form form.cart::before,
.spa-page .bestelkaart .ww-addon-form form.cart::after{display:none}
.spa-page .bestelkaart .ww-addons-wrapper{margin:0;padding:0;display:grid;gap:18px}
.spa-page .bestelkaart .ww-addon-field{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0}
.spa-page .bestelkaart .ww-addon-field--hidden{display:none}
.spa-page .bestelkaart .ww-addon-label{display:block;margin:0;font-family:inherit;font-weight:600;font-size:1.44rem;color:var(--color-text)}
.spa-page .bestelkaart .ww-required{display:none}
.spa-page .bestelkaart .ww-addon-desc{margin:0;max-width:none;font-size:1.344rem;line-height:1.5;color:var(--color-muted)}
/* m²-veld = .field input */
.spa-page .bestelkaart .ww-addon-input{width:100%;max-width:none;min-height:48px;padding:10px 14px;font:inherit;color:var(--color-text);
  background:#fff;border:1px solid #A9BBA6;border-radius:var(--radius-sm);box-shadow:none}
.spa-page .bestelkaart .ww-addon-input:focus{outline:3px solid var(--color-accent);outline-offset:0;border-color:var(--color-primary);box-shadow:none}
.spa-page .bestelkaart .ww-addon-input:invalid:not(:placeholder-shown){border-color:#B3261E;background:#FFF6F5}
/* afhalen / bezorgen = .keuze */
.spa-page .bestelkaart .ww-addon-options{display:grid;grid-template-columns:1fr;gap:10px}
.spa-page .bestelkaart .ww-option-item{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;background:#fff;
  border:1px solid var(--color-line);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s}
.spa-page .bestelkaart .ww-option-item:hover{border-color:var(--color-primary-soft);background:var(--color-primary-tint)}
.spa-page .bestelkaart .ww-option-item:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-tint)}
.spa-page .bestelkaart .ww-option-check-icon{display:none!important}
.spa-page .bestelkaart .ww-option-item input[type="radio"]{width:18px;height:18px;margin:0;accent-color:var(--color-primary)}
.spa-page .bestelkaart .ww-option-text{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.spa-page .bestelkaart .ww-option-name{font-size:inherit;font-weight:400;color:var(--color-text)}
.spa-page .bestelkaart .ww-option-price{font-size:inherit;font-weight:700;color:var(--color-primary)}
/* samenvatting van de plugin niet nodig: totaal + rekenregel staan eronder */
.spa-page .bestelkaart .ww-addons-summary{display:none!important}
/* aantal is altijd 1 (zet "Individueel verkopen" aan bij het product) */
.spa-page .bestelkaart .ww-addon-form .quantity{display:none}
.spa-page .bestelkaart .ww-addon-form .stock{display:none}
/* knop = .btn.btn--primary */
.spa-page .bestelkaart .single_add_to_cart_button{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;margin:0;padding:12px 22px;border:2px solid transparent;border-radius:var(--radius-sm);
  background:var(--color-accent);color:var(--color-text);font-family:var(--font-heading);font-weight:700;font-size:1.52rem;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.2;cursor:pointer;transition:background .15s}
.spa-page .bestelkaart .single_add_to_cart_button:hover{background:#FFF36B;color:var(--color-text)}
.spa-page .bestelkaart .single_add_to_cart_button.disabled,
.spa-page .bestelkaart .single_add_to_cart_button:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:539px){
  .spa-page .bestelkaart .single_add_to_cart_button{justify-self:stretch;width:100%}
}
/* melding na "in winkelmand" (WooCommerce) */
.spa-page .bestelkaart .ww-addon-form-notices:empty{display:none}
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-message,
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-error,
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-info{margin:0;padding:14px 16px;list-style:none;border:0;border-radius:var(--radius-sm);
  background:var(--color-primary-tint);color:var(--color-primary);font-weight:600;font-size:1.52rem}
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-error{background:#FFF6F5;color:#B3261E}
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-message::before,
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-error::before,
.spa-page .bestelkaart .ww-addon-form-notices .woocommerce-info::before{display:none}
.spa-page .bestelkaart .ww-addon-form-notices .button{float:right;margin-left:12px;background:none;padding:0;border:0;
  color:var(--color-primary);text-decoration:underline;font-weight:700}
.spa-page .bestelkaart .ww-addon-form-notices:not(:has(.woocommerce-message,.woocommerce-error,.woocommerce-info)){display:none}
.spa-page .bestelkaart .ww-option-item{min-height:76px;font-size:1.52rem}
.spa-page .bestelkaart .ww-option-name{font-weight:600}