/* =====================================================================
   ARTBEAT JEWELS — PRODUCT
   Enkel op productpagina's: opties, hartslag, charms, galerij, gerelateerde producten, cadeaubon.
   Geladen via functions.php (blok "Eigen CSS per paginatype").
   Dit bestand wordt NA abj-algemeen.css geladen.
   ===================================================================== */

.wt_gc_gift_card_product_page_title {
  display: none;
}

.product_title.entry-title {
  display: block !important;
}

#custom_agreement_field label,
#hartslag_agreement_field label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  #custom_agreement_field label,
  #hartslag_agreement_field label,
  .woocommerce-checkout .woocommerce-form__label-for-checkbox {
    font-size: 14px !important;
  }

}

/* Adjust horizontal (column) and vertical (row) gap between products */
.woocommerce ul.products {
  gap: 10px !important;
}

/* Reduce or increase vertical gap between rows */
.woocommerce ul.products li.product {
  margin-bottom:0px !important; /* Change 30px to your desired gap */
}

.single-product .product_meta,
.single-product .inactive {
  display: none !important;
}

/* Padding for the WooCommerce product summary (right side) */
.woocommerce div.product div.summary {
  padding: 20px;
  padding-top: 0px !important;
}

.wcgs-visible {
  padding: 20px;
  padding-top: 0px !important;
}

#my-custom-html-container {
  margin-top: 25px;
}

.artbeat-mobile-subtitle {
  margin-bottom: 25px !important;
}

.my-custom-html.desktop-only {
  font-size: 18px;
  margin-bottom:-25px;
}

.custom-text-below-order-button {
  padding-top: 10px !important;
}

@media screen and (min-width: 769px) {
  .single-product .product .summary .variations,
  .single-product .product .summary .size-chart-button,
  .single-product .product .summary .wcpay-express-checkout-wrapper,
  .single-product .product .summary .single_add_to_cart_button,
  .single-product .product .summary .custom-text-below-order-button,
  .single-product .product .summary .ppcp-disabled,
  .single-product .product .summary .woocommerce-variation-price,
  .single-product .product .summary .ppc-button-wrapper {
    display: block;
  }

  .single-product .product .summary .quantity {
    display: flex;
  }

}

/*@media screen and (min-width: 769px) {
.single-product .product_cat-artbeats .summary .variations,
.single-product .product_cat-artbeats .summary .quantity,
.single-product .product_cat-artbeats .summary .wcpay-express-checkout-wrapper,
.single-product .product_cat-artbeats .summary .single_add_to_cart_button,
.single-product .product_cat-artbeats .summary .ppcp-disabled,
.single-product .product_cat-artbeats .summary .woocommerce-variation-price,
.single-product .product_cat-artbeats .summary .ppc-button-wrapper,
.single-product .product_cat-artbeats .summary .custom-text-below-order-button,
.single-product .product_cat-artbeats .summary .size-chart-button{
    display: none !important;
  }
}*/
#block-17 img {
  padding-right:150px !important;
}

.wc-tabs,
.description-under {
  display: none !important;
}

/* But show them in the main product summary only */
body.single-product .product > .summary .sp-smart-swatches-container[data-swatches-attr="attribute_pa_charm"] {
  display: flex !important;
}

/* Mobile (default) */
.wbte-gc-product-addtocart-button {
  font-size: 16px !important;
}

@media (min-width: 1024px) {
  /* Desktop */
  .wbte-gc-product-addtocart-button {
    font-size: 18px !important;
  }

}

@media screen and (max-width: 768px) {
  /* Product titles */
  body.post-type-archive-product .woocommerce-loop-product__title,
  .single-product .related.products .woocommerce-loop-product__title {
    font-size: 20px !important;
  }

}

/* Hide price range shown before a variation is selected */
.single-product .summary > .price,
.reset_variations {
  display: none !important;
}

@media (max-width: 768px) {
  .single-product .product_cat-artbeats
  .woocommerce-product-details__short-description {
    display: none;
  }

}

/* Change font size of attribute names (Material, Charm) on single product page */
body.single-product .variations .label label {
  font-size: 16px !important;
  font-family: "Lato", sans-serif;
  font-weight: 400 !important;
  color: #1e1e1e;
}

body.single-product .product.type-product > .summary .sp-smart-swatches-container {
  margin-bottom: 20px !important;
}

body.single-product .product.type-product > .summary .sp-smart-swatches-container:not(:last-child) {
  margin-bottom: 0px !important;
}

/* Target price on single product page only */
body.single-product .product .summary .price {
  font-size: 25px !important;
  font-weight: 600;
}

.artbeat-mobile-subtitle {
  display: none;
}

.astra-shop-summary-wrap {
  margin-bottom: auto !important;
}

@media (max-width: 768px) {
  /*realted products*/
  .related.products {
    padding: 20px;
  }

  .related.products h2 {
    font-size: 30px !important;
    padding-left: 5px;
  }

}

.related.products h2 {
  font-size: 30px;
  color: #1e1e1e !important;
}

.abj-material-selected {
  font-size: 16px !important;
}

/* Optional: prevent overflow from scaling */
.woocommerce ul.products li.product,
.woocommerce-page .related.products li.product {
  overflow: hidden;
}

/*hide thumbnails on product page*/
.gallery-navigation-carousel-wrapper.horizontal {
  display: none !important;
}

.spswiper-pagination {
  scale: 0.75 !important;
}

.wcgs-slider-image img {
  border-radius: 5px;
}

@media (min-width: 1024px) {
  /*show image on hover in shop*/
  /* Desktop only styles */
  /* apply ONLY to products that are NOT in the 'charms' or 'giftcard' category */
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard)
  .spswp_variations_form {
    margin-top: 0px !important;
  }

  /* Wrapper positioning & overflow */
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) :is(.astra-shop-thumbnail-wrap, .astra-shop-thumbnail-wrap > a) {
    position: relative;
    display: block;
  }

}

@media (min-width: 1024px) { @supports selector(a:has(> img:hover)) {
  /* Hide the base image only when the image itself is hovered */
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard)
  .astra-shop-thumbnail-wrap > a:has(> img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail:hover)
  > img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    opacity: 0 !important;
  }

  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .astra-shop-thumbnail-wrap:hover > a > img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    opacity: 1 !important;
  }

}}

/*adjust the layout of the dimensions table*/
/* Styles only apply within the #hartslagDimensions container */
#hartslagDimensions table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Lato";
  font-size: 16px;
  border-radius: 5px; /* keep rounded corners */
  overflow: hidden;
  border: none;
  box-shadow: 0 0 0 1px; /* remove outer border */
}

/* Remove all borders by default */
#hartslagDimensions th,
#hartslagDimensions td {
  border: none !important;
  padding: 8px;
  text-align: center;
}

/* Header cells: only show bottom border */
#hartslagDimensions thead th,
#size-chart-container table th {
  background-color: #f3f3f3;
  border-bottom: 1px solid #1e1e1e !important;
}

/* Second row (the “Width” row): show bottom border */
#hartslagDimensions tbody tr:first-child th,
#hartslagDimensions tbody tr:first-child td {
  border-bottom: 1px solid #1e1e1e !important;
}

.wt_gc_gift_card_product_page_form_item label {
  font-size: 16px !important;
  color: #E03131 !important;
  margin-bottom: 25px !important;
}

.wt_gc_credit_denominations .woocommerce-Price-amount.amount {
  padding: 10px;
}

.wt_gc_credit_denominations .wt_gc_credit_denomination {
  margin-bottom: 10px;
}

.wt_gc_credit_denominations {
  margin-bottom: 25px;
}

.related.products li.ast-article-single {
  background-color: #fef2f2 !important;
}

.related.products h2 {
  color: #E03131;
}

.wt_gc_email_wrapper img {
  border-radius: 5px !important;
}

.wt_gc_email_wrapper tr {
  display: none !important;
}

.wt_gc_gift_card_product_page_form label {
  color: #E03131 !important;
}

/* Giftcard page intro text */
.abj-giftcard-intro {
  text-align: center;
}

.abj-giftcard-title {
  font-size: 35px;
  color: #E03131;
  font-weight: 400;
  margin-bottom: 10px;
}

.abj-giftcard-text {
  color: #1e1e1e;
}

/* Hide the variation price in its original (bottom) location */
.single-product .summary .single_variation .woocommerce-variation-price {
  display: none !important;
}

.hartslag-desktop-flex {
  display: flex !important;
  align-items: center !important;   /* vertically center QR against text */
  justify-content: space-between;   /* text left, QR right */
  gap: 25px;
  width: 100%;
}

.hartslag-desktop-text {
  flex: 1;
  margin-top: -10px;
}

.hartslag-desktop-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;   /* center the img within its own cell too */
}

.hartslag-desktop-qr img {
  width: 110px !important;
  display: block;
}

/* Ensure all inner text inherits color */
#my-custom-html-container *,
#my-custom-html-container p,
#my-custom-html-container h2 {
  color: #1e1e1e;
  font-size: 16px;
}

.hartslag-step4-label {
  font-family: "Lato", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  color: #1e1e1e;
  margin-bottom: 10px;
}

.hartslag-or-label {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #1e1e1e;
  text-align: center;
  margin: 15px 0;
}

/* Smaller QR */
.hartslag-desktop-qr img {
  width: 110px !important;   /* was 150px — lower this further if needed */
  display: block;
  padding-bottom: 25px !important;
}

/* ===== Prijs naast de producttitel =====
   De prijs zit nu IN de <h1>, niet in een aparte flex-rij ernaast.
   Dit is de enige plek waar het prijs-slot gestyled wordt. */
.product_title .abj-variation-price-slot {
  display: inline-block;
  margin-left: 20px;        /* afstand tot de titel */
  vertical-align: middle;   /* vervangt de oude top:-8px */
  line-height: 1;
  white-space: nowrap;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1e1e1e !important;
}

.product_title .abj-variation-price-slot * {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1e1e1e !important;
}

/* Geen lege ruimte zolang er nog geen prijs is (bv. simple producten) */
.product_title .abj-variation-price-slot:empty {
  display: none;
}

.single-product-category {
  display: none !important;
}

/* ===== Make related products match slider tiles ===== */
/* Card background + rounded corners, room for pinned button */
.related.products li.product {
  position: relative;
  padding-bottom: 80px !important;
  border-radius: 5px !important;
  overflow: hidden;
}

.related.products li.ast-article-single {
  background-color: transparent !important;
  border-radius: 5px !important;
}

/* Title styling to match slider */
.related.products .woocommerce-loop-product__title {
  font-family: "Lato" !important;
  font-size: 14px !important;
  color: #1e1e1e !important;
  font-weight: 400 !important;
}

/* Price styling to match slider */
.related.products .price {
  font-family: "Lato" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1e1e1e !important;
}

/* Pin Add to Cart / Create Yours to the bottom of related product cards */
.related.products li.product .add_to_cart_button,
.related.products li.product .create-yours-link,
.related.products li.product .button.product_type_variable.add_to_cart_button {
  position: absolute !important;
  left: 25px;
  right: 25px;
  bottom: 15px;
  margin: 0 !important;
  width: auto !important;
}

/* Upload result row: image + remove button side by side */
#hartslag-upload-result {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 0px;
  margin-bottom: 35px;
}

#hartslag-upload-clear:hover {
  background-color: #F9D5D3;
}

/* Disabled state for the upload button after one image is uploaded */
.hartslag-upload-btn-disabled {
  opacity: 0.5;
  pointer-events: none;   /* blocks the label click — this enforces "only 1 image" */
  cursor: not-allowed;
}

/* Preview wrapper so the × can sit over the image corner */
.hartslag-upload-preview-wrap {
  position: relative;
  display: inline-block;
  margin-top: 0px;
}

.hartslag-upload-remove-x:hover {
  background-color: white;
  color: #1e1e1e;
}

#hartslag-upload-clear:hover {
  background-color: #FFF8F8;
  color: #1e1e1e;
}

.abj-below-title {
  list-style: none;
  margin-top: 20px;
  margin-bottom:20px;
  padding: 0;
  margin-left: 0px;
}

.abj-below-title li {
  position: relative;      /* required for the checkmark's absolute positioning */
  padding-left: 24px;      /* makes room for the checkmark */
  margin-bottom: 6px;
  font-size: 15px;
  color: #1e1e1e;
}

.abj-below-title li::before {
  content: "✓";
  font-family: "Lato";
  position: absolute;
  left: 0;
  color: #1e1e1e;
  font-weight: 400;
}

/* Full-width accordion styling for the product dropdowns */
.custom-text-below-order-button details {
  border-bottom: 1px solid #e5e5e5;
  margin-top: 0 !important;
  padding: 16px 0;
}

/* Summary row: text left, +/- pushed to the right */
.custom-text-below-order-button summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;              /* remove default triangle */
  cursor: pointer;
  font-weight: 400;
  color: #1e1e1e !important;
}

/* Remove the default disclosure triangle (Safari/Chrome) */
.custom-text-below-order-button summary::-webkit-details-marker {
  display: none;
}

.custom-text-below-order-button summary::marker {
  content: "";
}

/* The +/- indicator on the right */
.custom-text-below-order-button summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #1e1e1e;
  margin-left: 15px;
}

/* Switch to - when the details is open */
.custom-text-below-order-button details[open] summary::after {
  content: "−";   /* this is a minus sign (U+2212), not a hyphen */
}

@media (min-width: 1024px) {
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .sp-smart-swatches-container {
    margin-top: 35px;   /* push the swatches down to match */
  }

}

/* Title styling to match related/slider */
.woocommerce.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
.woocommerce.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
  font-family: "Lato" !important;
  font-size: 18px !important;
  color: #1e1e1e !important;
  font-weight: 400 !important;
}

/* Price styling to match related/slider */
.woocommerce.post-type-archive-product ul.products li.product .price,
.woocommerce.tax-product_cat ul.products li.product .price {
  font-family: "Lato" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1e1e1e !important;
}

/* Pin Add to Cart / Create Yours to the bottom of shop cards */
.woocommerce.post-type-archive-product ul.products li.product .add_to_cart_button,
.woocommerce.post-type-archive-product ul.products li.product .create-yours-link,
.woocommerce.post-type-archive-product ul.products li.product .button.product_type_variable.add_to_cart_button,
.woocommerce.tax-product_cat ul.products li.product .add_to_cart_button,
.woocommerce.tax-product_cat ul.products li.product .create-yours-link,
.woocommerce.tax-product_cat ul.products li.product .button.product_type_variable.add_to_cart_button {
  position: absolute !important;
  left: 25px;
  right: 25px;
  bottom: 15px;
  margin: 0 !important;
  width: auto !important;
}

/* Hide Add to Cart and Create Yours buttons on shop, category, and related tiles */
.woocommerce.post-type-archive-product ul.products li.product .add_to_cart_button,
.woocommerce.post-type-archive-product ul.products li.product .create-yours-link,
.woocommerce.post-type-archive-product ul.products li.product .button.product_type_variable,
.woocommerce.tax-product_cat ul.products li.product .add_to_cart_button,
.woocommerce.tax-product_cat ul.products li.product .create-yours-link,
.woocommerce.tax-product_cat ul.products li.product .button.product_type_variable,
.related.products li.product .add_to_cart_button,
.related.products li.product .create-yours-link,
.related.products li.product .button.product_type_variable {
  display: none !important;
}

/* Remove the reserved button space now that buttons are hidden */
.woocommerce.post-type-archive-product ul.products li.product,
.woocommerce.tax-product_cat ul.products li.product,
.related.products li.product {
  padding-bottom: 0px !important;   /* was 80px on related; adjust to taste */
}

/* Product grid: full width on its own line below */
.ast-woocommerce-container ul.products {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
}

@media (min-width: 1024px) {
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .astra-shop-thumbnail-wrap,
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .astra-shop-thumbnail-wrap > a {
    margin: 0 !important;
    padding: 0 !important;
  }

  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .astra-shop-summary-wrap,
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .spswp_variations_form,
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .sp-smart-swatches-container,
  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) .ast-woo-shop-product-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .woocommerce ul.products li.product:not(.product_cat-charms):not(.product_cat-giftcard) {
    padding-bottom: 0 !important;
  }

}

.related-products-subtitle {
  margin-top: -8px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #747474;
}

@media screen and (min-width: 769px) {
  /* Zet het aantal-veld links van de "Toevoegen aan winkelmandje"-knop */
  .single-product .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .single-product .woocommerce-variation-add-to-cart .quantity {
    order: 1;
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
  }

}

/* Achtergrondkleur van de producttegels */
.woocommerce ul.products li.product {
  background-color: #FFF8F8 !important;
}

/* Afgeronde hoeken op de productfoto */
.woocommerce ul.products li.product img {
  border-radius: 5px !important;
}

table.shop_table.woocommerce-checkout-review-order-table td.product-name dl.variation dd.variation-Jouwgeuploadehartslag {
  display: block !important;
  float: none !important;
  clear: left !important;
  width: 100% !important;
  margin: 4px 0 0 0 !important;
}

table.shop_table.woocommerce-checkout-review-order-table td.product-name dl.variation dd.variation-Jouwgeuploadehartslag img {
  display: inline-block !important;
  margin-top: 8px !important;
}

.abj-hartslag-detect .hartslag-desktop-flex {
  align-items: center;
}

.abj-hartslag-detect .abj-field-label {
  margin-bottom: 8px;
}

.abj-hartslag-detect .hartslag-desktop-qr img {
  border-radius: 5px;
}

.related.products h2,
.related.products .related-products-subtitle {
  padding-left: 25px;
}

.abj-product-details-toggle {
  font-size: 30px;
  color: #1e1e1e !important;
}

.woocommerce-tabs.wc-tabs-wrapper {
  padding: 0px !important;
}

.abj-options-accordion__header {
  color: #1e1e1e !important;
  background-color: #FEF2F2;
  font-weight: 600;
  font-size: 13px;
}

.abj-options-accordion__body, .abj-hartslag-panel-box {
  background-color: #FFF8F8;
}

.abj-field-intro {
  font-size: 15px;
  color: #1e1e1e;
}

.abj-extra-notes-label {
  font-size: 13px;
  color: #1e1e1e;
  margin-bottom: 15px;
  font-family: "Lato" !important;
}

.abj-extra-notes-field {
  background-color: #FEF2F2;
}

#abj_extra_notes {
  background-color: #FFF8F8;
}

/* Match "Kies je contour" styling aan de Hartslag upload panel */
[data-section-id="kies_je_contour"] .abj-upload-field,
[data-section-id="kies_je_contour"] .abj-drawing-field {
  background-color: #FFF8F8 !important;
}

.abj-options-wrapper .abj-repair-block.abj-upload-field {
  padding-left: 18px !important;
  padding-right: 18px !important;
  margin-bottom: 12px;
}

/* ===== Swatches rechts naast de titel in de producttegels ===== */
/* 1. De link rond de afbeelding wordt het referentiepunt */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a.woocommerce-LoopProduct-link {
  position: relative !important;
  display: block;
}

/* 2. Swatch-formulier uit de flow halen: ter hoogte van de titel, rechts uitgelijnd */
.woocommerce ul.products li.product .spswp_variations_form {
  position: absolute !important;
  top: calc(100% + 14px) !important;   /* ← dit getal aanpassen om te verlagen/verhogen */
  right: 2px;
  left: auto;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
}

/* 3. Tabel en container niet laten uitrekken over de hele breedte */
.woocommerce ul.products li.product .spswp_variations_form table.spswp-shop-variations,
.woocommerce ul.products li.product .spswp_variations_form td.value {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.woocommerce ul.products li.product .spswp_variations_form .sp-smart-swatches-container {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Ruimte rechts van de titel, zodat lange titels niet onder de swatches lopen */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding-right: 75px !important;
}

/* Grotere afstand tussen de kolommen in de productgrid */
.woocommerce ul.products {
  column-gap: 20px !important;   /* ← horizontale afstand tussen de tegels */
  row-gap: 20px !important;      /* verticaal, tussen de rijen */
}

/* =====================================================================
   GERELATEERDE PRODUCTEN — alles op één plek
   ===================================================================== */
.single-product .related.products {
  --abj-related-gap: 30px;   /* ← ruimte tussen de kolommen */
  --abj-related-gap: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Raster: vaste kolommen met een kleine tussenruimte */
.single-product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: var(--abj-related-gap) !important;
  row-gap: 40px !important;
  margin: 0 !important;
}

.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after {
  display: none !important;
}

/* Tegels: geen eigen breedte, marge of binnenruimte */
.single-product .related.products ul.products li.product,
.single-product .related.products ul.products li.product.ast-article-single {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Titel en subtitel gelijk laten lopen met de foto's */
.related.products h2,
.related.products .related-products-subtitle {
  padding-left: 0 !important;
}

/* Productfoto's staand: 2 breed, 3 hoog (swatches blijven ongemoeid) */
.single-product .related.products ul.products li.product .astra-shop-thumbnail-wrap > a > img,
.single-product .related.products ul.products li.product .sp-smart-swatches-original-thumbnail img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 921px) {
  /* Tablet: 3 kolommen, mobiel: 2 */
  .single-product .related.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 544px) {
  .single-product .related.products {
    --abj-related-gap: 24px !important;
  }

  .single-product .related.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

/* Productfoto's in alle productgrids (shop, categorieën, gerelateerd): 4/5 */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a > img,
.woocommerce ul.products li.product .sp-smart-swatches-original-thumbnail img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ---- Productpagina: foto blijft staan terwijl de opties scrollen (enkel desktop) ---- */
.abj-product-top {
  display: flow-root;
}

@media (min-width: 922px) {
  /* houdt foto + opties netjes samen op mobiel */
  .abj-product-top {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
  }

  .abj-product-top > #wpgs-gallery,
  .abj-product-top > .wcgs-woocommerce-product-gallery,
  .abj-product-top > .woocommerce-product-gallery,
  .abj-product-top > .summary {
    float: none !important;
    flex: 0 0 auto;
  }

  .abj-product-top > #wpgs-gallery,
  .abj-product-top > .wcgs-woocommerce-product-gallery,
  .abj-product-top > .woocommerce-product-gallery {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--abj-sticky-top, 30px);
    align-self: flex-start;
  }

}

/* ===== Charms: kruisje rechtsboven op de gekozen soort (bv. Geboortestenen) =====
   Klik op het kruisje = de soort nog eens aanklikken = het keuzemenu sluit
   (dat doet de bestaande code al). Opmaak zoals het prijsvakje van de tegels. */
.abj-charm-picker .abj-charm-cat {
  position: relative;
}

.abj-charm-picker .abj-charm-cat.is-selected::after {
  content: "×" !important;        /* × */
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFE4E3;                /* zelfde roze als het prijsvakje */
  border-radius: 0 11px 0 11px;       /* afgeronde hoek, zoals het prijsvakje */
  font-family: "Lato", sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #1e1e1e;
  cursor: pointer;
  pointer-events: auto;
}

.abj-charm-picker .abj-charm-cat.is-selected:hover::after {
  filter: brightness(.95);
}

/* Productpagina: "Beschikbaarheid: … op voorraad" verbergen.
   Enkel als het product op voorraad is: "Niet op voorraad" blijft zichtbaar,
   zodat een klant weet waarom hij een kleur niet kan bestellen. */
.single-product .ast-stock-detail:has(.in-stock),
.single-product .summary .stock.in-stock{
  display: none !important;
}

/* Gsm: titels op de productpagina kleiner */
@media (max-width: 767px){
  body.single-product .product_title.entry-title{   /* producttitel */
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  body.single-product .abj-product-details-toggle{  /* "Beschrijving & specificaties" */
    font-size: 22px !important;
  }
  body.single-product .related.products h2{          /* "Onze suggesties" */
    font-size: 22px !important;
  }
}

/* Gsm: minder ruimte tussen "Toevoegen" en "Beschrijving & specificaties",
   kleinere titels erin en minder ruimte rond de titels en de tekst */
@media (max-width: 767px){
  /* ← afstand "Toevoegen" → dropdown bijsturen: meer negatief = dichter */
  body.single-product{
    --abj-details-boven: -10px;
    --abj-titel-boven: 12px;    /* ← ruimte boven "Beschrijving" en "Specificaties" */
    --abj-details-onder: 32px;  /* ← ruimte onder het hele blok, tot "Onze suggesties" */
  }

  body.single-product div.product .summary.entry-summary{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body.single-product div.product .summary .product_meta{ margin: 0 !important; padding: 0 !important; }
  body.single-product div.product .summary .ppcp-messages:empty{ display: none !important; }
  body.single-product .abj-product-top{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body.single-product .woocommerce-tabs.wc-tabs-wrapper{ margin: 0 !important; padding: 0 !important; }
  body.single-product .abj-product-details-section{
    margin-top: var(--abj-details-boven) !important;
    margin-bottom: 0 !important;
  }
  body.single-product .abj-product-details-section > summary{
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }

  /* ruimte onder de titel "Beschrijving & specificaties" (de 30px van de toggle) */
  body.single-product .abj-product-details-section > summary.abj-product-details-toggle{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* grid: ruimte bovenaan en tussen Beschrijving en Specificaties */
  body.single-product .abj-product-details-section > .abj-product-details-grid{
    padding-top: 10px !important;
    gap: 12px !important;
  }

  /* "Beschrijving" en "Specificaties": kleiner, met wat ruimte erboven en weinig eronder */
  body.single-product .abj-product-details-section > h2,
  body.single-product .abj-product-details-section :not(summary) > h2,
  body.single-product .abj-product-details-section > h3,
  body.single-product .abj-product-details-section :not(summary) > h3{
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: var(--abj-titel-boven) 0 6px !important;
    padding: 0 !important;
  }
  body.single-product .abj-product-details-section h2 + p,
  body.single-product .abj-product-details-section h2 + table,
  body.single-product .abj-product-details-section h3 + p{ margin-top: 0 !important; }

  /* geen marge onder de laatste alinea van de beschrijving */
  body.single-product .abj-product-details-grid p:last-child{ margin-bottom: 0 !important; }

  /* ruimte onder het hele blok: tussen Specificaties en "Onze suggesties" */
  body.single-product .related.products{
    margin-top: var(--abj-details-onder) !important;
    padding-top: 0 !important;
  }
}

/* Gsm: keuze van de kettingdraad als veegbare rij (slider) met grotere foto's */
@media (max-width: 767px){
  .abj-options-wrapper [data-section-id="kies_je_kettingdraad"] .abj-option-grid--image{
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px !important;     /* ruimte voor de rand van de gekozen kaart */
  }
  .abj-options-wrapper [data-section-id="kies_je_kettingdraad"] .abj-option-grid--image::-webkit-scrollbar{ display: none; }
  .abj-options-wrapper [data-section-id="kies_je_kettingdraad"] .abj-option-grid--image > .abj-option-card{
    flex: 0 0 44% !important;            /* breedte van een kaart: ± 2 kaarten + een stukje van de volgende */
    max-width: 44% !important;
    box-sizing: border-box !important;
    scroll-snap-align: start;
  }
}

/* Productpagina: prijsvakjes en sluitkruisjes op de optietegels volgen de
   vorm van de tegel (zoals het kruisje bij een gekozen charmsoort):
   rechtsboven dezelfde ronding als de tegel (12px - 1px rand = 11px),
   linksonder afgerond, de andere hoeken recht. */
.abj-options-wrapper .abj-option-grid--image .abj-option-card .abj-option-price,
.abj-options-wrapper .abj-product-sectie .abj-option-card .abj-option-price,
.abj-options-wrapper .abj-charm-picker .abj-option-price{
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 11px 0 11px !important;   /* ← volgt de ronding van de tegel */
}