/* theme/astra-child/assets/css/product.css
 *
 * Alle 50 producten zijn simpel: er is geen variantkiezer om te stylen.
 */

.woocommerce div.product .woocommerce-product-gallery {
  background: var(--dg-wit);
  border-radius: var(--dg-radius);
  padding: 1rem;
}

.woocommerce div.product .product_title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  color: var(--dg-zwart);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--dg-zwart);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.woocommerce div.product form.cart .button {
  width: 100%;
  padding-block: 1rem;
}

/* De padding hierboven komt niet aan op de koopknop zelf. Astra zet in
 * woocommerce-grid.min.css `padding: 10px 20px` via
 * `.woocommerce-js div.product form.cart .button.single_add_to_cart_button`,
 * goed voor (0,5,2); de regel hierboven weegt (0,4,2) en verliest dus -- gemeten
 * op 2026-07-30: de knop hield 10px in plaats van de bedoelde 16px.
 *
 * `width: 100%` kwam bij de huidige laadvolgorde wel aan, maar even fragiel:
 * verplaats je product.css in de DOM naar voor Astra's grid-CSS, dan zakt de
 * knop van 601px naar 152px -- zijn natuurlijke tekstbreedte. Daarom staat ook
 * de breedte hieronder nog eens in de zware selector.
 *
 * Deze selector wint op eigen gewicht, niet op laadvolgorde -- dezelfde route
 * die shop.css bij de sale-badge koos. Het telwerk:
 *
 *   Astra : .woocommerce-js div.product form.cart .button.single_add_to_cart_button
 *           klassen .woocommerce-js .product .cart .button
 *                   .single_add_to_cart_button          = 5
 *           elementen div, form                         = 2   -> (0,5,2)
 *
 *   hier  : .woocommerce div.product form.cart button.button.single_add_to_cart_button
 *           klassen .woocommerce .product .cart .button
 *                   .single_add_to_cart_button          = 5
 *           elementen div, form, button                 = 3   -> (0,5,3)
 *
 * Gelijk aantal klassen, een element meer, dus (0,5,3) > (0,5,2) en de uitkomst
 * hangt niet meer af van welke stylesheet toevallig later staat. Zou een
 * Astra-update de volgorde omdraaien, dan blijft de knop vol en 16px hoog.
 * Geen !important nodig.
 *
 * De algemene regel hierboven blijft staan: die dekt een eventuele tweede knop
 * in het cart-formulier, bijvoorbeeld van een plugin.
 *
 * Het `button`-element is structureel veilig: WooCommerce rendert de koopknop in
 * form.cart altijd als <button type="submit" class="single_add_to_cart_button
 * button alt">. Gemeten op de live pagina: tagName BUTTON.
 *
 * Links en rechts blijven Astra's 20px, alleen de blokas gaat naar 1rem: een
 * koopknop mag ruimer aan te tikken zijn dan een gewone knop. */
.woocommerce div.product form.cart button.button.single_add_to_cart_button {
  width: 100%;
  padding-block: 1rem;
}

.woocommerce-tabs .panel h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
}

.woocommerce .related.products > h2 {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  text-align: center;
  margin-block-end: 2rem;
}

.dg-gpsr {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--dg-zwart) 15%, transparent);
  font-size: 0.85rem;
}

.dg-gpsr dt {
  font-weight: 600;
  color: var(--dg-brons);
}

.dg-gpsr dd { margin: 0 0 0.5rem; }