/* Scuba Academie – varianten als pills + −/+ aantalkiezer (product-page.js). */

/* ---------- Pills ------------------------------------------------------ */
.sad-has-pills select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.sad-has-pills span::after { display: none !important; }          /* Divi-pijltje van de verborgen dropdown */
.sad-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.sad-pill {
  min-width: 48px; padding: 9px 18px; border: 1px solid var(--sad-field); border-radius: var(--sad-pill);
  background: var(--sad-white); color: var(--sad-heading); font: 500 14px/1.2 var(--sad-font); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.sad-pill:hover:not(:disabled) { border-color: var(--sad-heading); }
.sad-pill:focus-visible { outline: 2px solid var(--sad-primary); outline-offset: 2px; }
.sad-pill[aria-checked="true"] { background: var(--sad-primary); border-color: var(--sad-primary); color: var(--sad-white); }
.sad-pill:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
table.variations td.sad-has-pills { padding-bottom: 10px !important; }
table.variations td.sad-has-pills .reset_variations { display: inline-block; margin-top: 4px; font-size: 13px; }

/* ---------- −/+ aantal ------------------------------------------------- */
.sad-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--sad-field); border-radius: var(--sad-pill);
  overflow: hidden; background: var(--sad-white); vertical-align: middle;
}
.sad-qty .qty {
  width: 48px !important; min-width: 0 !important; height: 44px; border: 0 !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; text-align: center; font: 600 15px var(--sad-font) !important; color: var(--sad-heading) !important;
  -moz-appearance: textfield; appearance: textfield;
}
.sad-qty .qty::-webkit-outer-spin-button, .sad-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sad-qty__btn {
  width: 42px; height: 44px; border: 0; background: transparent; color: var(--sad-heading);
  font: 500 20px/1 var(--sad-font); cursor: pointer;
}
.sad-qty__btn:hover { background: var(--sad-soft); }
.sad-qty__btn:focus-visible { outline: 2px solid var(--sad-primary); outline-offset: -2px; }

/* Winkelwagen (Divi-module): Divi zet .quantity vast op 100px (!important) en de tekst links, waardoor de
   stepper over het subtotaal heen liep. Vak zo breed als de stepper, en een compactere stepper. */
.woocommerce-cart td.product-quantity .quantity { width: auto !important; }
.woocommerce-cart td.product-quantity .sad-qty .qty { width: 34px !important; text-align: center !important; }
.woocommerce-cart td.product-quantity .sad-qty__btn { width: 34px; }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { white-space: nowrap; }   /* "€" niet los boven het bedrag */

/* ---------- Aantal + "Toevoegen aan winkelwagen" ----------------------- */
/* WooCommerce laat aantal en knop floaten; past het niet naast elkaar (mobiel), dan valt de knop
   zonder tussenruimte onder een smal aantalveld. Flex: gelijke hoogte en 12px tussenruimte. */
body.single-product form.cart:not(.variations_form):not(.grouped_form),
body.single-product form.cart .woocommerce-variation-add-to-cart {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
}
body.single-product form.cart:not(.variations_form):not(.grouped_form)::before,
body.single-product form.cart:not(.variations_form):not(.grouped_form)::after,
body.single-product form.cart .woocommerce-variation-add-to-cart::before,
body.single-product form.cart .woocommerce-variation-add-to-cart::after { display: none; }   /* clearfix wordt anders een flex-item */
body.single-product form.cart:not(.variations_form):not(.grouped_form) > :not(.quantity):not(.single_add_to_cart_button) { flex: 1 1 100%; }
body.single-product form.cart .quantity { flex: 0 0 auto; display: flex; float: none; margin: 0 !important; }
body.single-product form.cart .quantity:has(> input.qty[type="hidden"]) { display: none; }   /* "los verkocht": geen aantal */
body.single-product form.cart .quantity input.qty { min-height: 48px; }
body.single-product form.cart .sad-qty { align-items: stretch; min-height: 48px; }
body.single-product form.cart .sad-qty .qty,
body.single-product form.cart .sad-qty__btn { height: auto; min-height: 0; }
body.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 0 !important; float: none; text-align: center;
}

@media (max-width: 600px) {
  /* Onder elkaar: een compact aantal links (grote −/+ voor de duim), de knop over de volle breedte. */
  body.single-product form.cart .quantity { flex: 0 0 100%; }
  body.single-product form.cart .single_add_to_cart_button { flex-basis: 100%; }
  body.single-product form.cart .sad-qty { display: inline-flex; }
  body.single-product form.cart .sad-qty .qty { width: 56px !important; }
  body.single-product form.cart .sad-qty__btn { flex: 0 0 52px; }
}