/* =====================================================================
   ARTBEAT JEWELS — SHOP
   Enkel in de shop, op categorie- en collectiepagina's en bij zoekresultaten: filters, sortering, tegels, shopbanner.
   Geladen via functions.php (blok "Eigen CSS per paginatype").
   Dit bestand wordt NA abj-algemeen.css geladen.
   ===================================================================== */

/*shop page*/
/* Hide sorting dropdown */
.woocommerce-ordering {

}

/* Hide result count text (e.g., "Showing 1–9 of 20 results") */
.woocommerce-result-count {
  display: none !important;
}

.woocommerce .ast-archive-title {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0px !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 */
}

@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;
  }

}

/* Filter label font size (shop only) */
body.post-type-archive-product .wpc-filter-label-wrapper {
  font-size: 15px !important;
}

.ast-archive-description {
  display: none !important;
}

.ast-woocommerce-container {
  margin-top: -25px;
}

.post-type-archive-product .ast-woocommerce-container {
  margin-top: -50px !important;
}

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

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

@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;
  }

}}

@media (max-width: 768px) {
  /*make filter on shop page scrollable*/
  /* Mobile-only: make category filter chips horizontally scrollable */
  /* Don't clip the row inside the widget on mobile */
  .post-type-archive-product .wpc-filters-main-wrap .wpc-filters-widget-content,
  .post-type-archive-product .wpc-filters-scroll-container,
  .post-type-archive-product .wpc-filters-widget-wrapper {
    overflow: visible !important;
  }

  /* Specific list on your shop: turn into a horizontal scroller */
  .post-type-archive-product .wpc-filters-list-2330,
  /* Fallback: any product_cat list if the ID changes */
  .post-type-archive-product .wpc-filter-product_cat .wpc-filters-ul-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;            /* Firefox: hide bar */
  }

  .post-type-archive-product .wpc-filters-list-2330::-webkit-scrollbar,
  .post-type-archive-product .wpc-filter-product_cat .wpc-filters-ul-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari: hide bar */
  }

  /* Each item becomes a chip that stays on one line */
  .post-type-archive-product .wpc-filter-product_cat .wpc-filters-ul-list > li.wpc-label-item {
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    white-space: nowrap;
    display: inline-flex !important;  /* prevent plugin from forcing block stack */
    align-items: stretch;
  }

  /* Make the pill clickable and tidy */
  .post-type-archive-product .wpc-filter-product_cat .wpc-filters-ul-list label[for^="wpc-checkbox-taxonomy-product_cat"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    cursor: pointer;
  }

  /* Avoid the list being constrained by any widths */
  .post-type-archive-product .wpc-filters-section-2330,
  .post-type-archive-product .wpc-filter-product_cat {
    width: 100%;
  }

  /*filtered chips visible on mobile*/
  /* Mobile: show ONLY the scrollable chips row; hide the default stacked selected terms + reset */
  /* Keep the top chips container visible even when the widget is "closed" */
  .wpc-filters-main-wrap .wpc-filters-widget-content.wpc-closed .wpc-filters-widget-top-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
  }

  /* Ensure the closed wrapper doesn't clip the chips */
  .wpc-filters-main-wrap .wpc-filters-widget-content.wpc-closed {
    overflow: visible !important;
  }

  /* HIDE the plugin’s default stacked selected-terms block (the duplicate) */
  .wpc-filters-main-wrap .wpc-custom-selected-terms,
  .wpc-filters-main-wrap .wpc-selected-terms,
  .wpc-filters-main-wrap .wpc-selected-wrapper {
    display: none !important;
  }

  /* HIDE the default controls row (where the original "Reset all" lives) */
  .wpc-filters-main-wrap .wpc-filters-widget-controls-container {
    display: none !important;
  }

  /* Our scrollable top chips row stays visible & horizontal (from your earlier rules) */
  .wpc-filters-widget-top-container .wpc-filter-chips-list:not(.wpc-empty-chips-container) {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wpc-filters-widget-top-container .wpc-filter-chips-list::-webkit-scrollbar {
    display: none;
  }

  /* Make each chip stay on one line */
  .wpc-filters-widget-top-container .wpc-filter-chips-list > li {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

}

.wpc-filter-chips-list * {
  padding: 2px 2px;
  font-size: 15px !important;
}

.wpc-filter-product_cat {
  margin-top: -15px !important;
}

.woocommerce-shop .site-content {
  margin-top: 15px;
}

@media (max-width: 768px) {
  /* ===== Fix: top chips row not visible on mobile ===== */
  .wpc-filters-main-wrap .wpc-filters-widget-top-container {
    display: block !important;
  }

  .wpc-filters-main-wrap .wpc-filters-widget-top-container .wpc-filter-chips-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1px;
  }

}

.wpc-filters-widget-top-container {
  margin-bottom: 15px !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;
}

@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 */
}

.woocommerce-ordering .orderby {
  margin-bottom: 20px !important;
}

.post-type-archive-product .widget_wpc_filters_widget .wpc-filters-widget-wrapper,
.post-type-archive-product .widget_wpc_filters_widget .wpc-filters-widget-containers-wrapper,
.post-type-archive-product .widget_wpc_filters_widget .wpc-filters-scroll-container,
.tax-product_cat .widget_wpc_filters_widget .wpc-filters-widget-wrapper,
.tax-product_cat .widget_wpc_filters_widget .wpc-filters-widget-containers-wrapper,
.tax-product_cat .widget_wpc_filters_widget .wpc-filters-scroll-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-bottom: -5px;
}

/* Sorting: same row, pushed to the right */
.ast-woocommerce-container .woocommerce-ordering {
  order: 2;
  flex: 0 0 auto;
  margin: 0 !important;   /* was 0 0 0 auto — that auto pushed it apart */
  display: flex !important;
  align-items: center !important;
}

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

/* Hide result count and header so they don't break the row */
.ast-woocommerce-container .woocommerce-result-count,
.ast-woocommerce-container .woocommerce-products-header {
  display: none !important;
}

/* Align all three dropdowns to the same vertical center */
.ast-woocommerce-container .widget_wpc_filters_widget,
.ast-woocommerce-container .woocommerce-ordering {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Make the actual <select> elements match in height + box model */
.widget_wpc_filters_widget select,
.woocommerce-ordering select {
  height: 40px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Align all three selects to the same vertical center + height */
.widget_wpc_filters_widget select,
.woocommerce-ordering select {
  height: 30px !important;
  line-height: 30px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

.ast-woocommerce-container .woocommerce-ordering {
  margin-top: -15px !important;   /* nudge up until level — adjust the number */
}

/* When no products are found via filter, clean up the layout */
/* 1. Hide the filter chips (Reset all / Variable / Bracelets) */
.woocommerce-no-products-found ~ .wpc-custom-selected-terms,
.ast-woocommerce-container .wpc-custom-selected-terms {
  display: none !important;
}

/* 2. Hide the breadcrumb */
.ast-woocommerce-container .woocommerce-breadcrumb {
  display: block !important;
}

/* 3. Center the "No products were found" message */
.woocommerce-no-products-found {
  width: 100%;
  text-align: center;
  margin: 60px auto !important;
}

.woocommerce-no-products-found .woocommerce-info {
  display: inline-block;
  text-align: center;
}

@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;
  }

}

/* Pills */
.shop-pills__list {
  display: flex;
  list-style: none;
  overflow-x: auto;
  padding-bottom: 50px;
  padding-top: 10px;
}

.shop-pills__list a {
  display: inline-block;
  padding-right: 5px !important;
  white-space: nowrap;
  text-decoration: none;
  font-family: "Lato" !important;
  font-size: 16px;
}

.shop-pills__list .current-menu-item a,
.shop-pills__list .current_product_cat a {
  background: #000;
  color: #1e1e1e;
}

.shop-toolbar nav.shop-pills,
.shop-toolbar nav.shop-pills ul {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
}

/* Pills */
.shop-pills__list {
  display: flex;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  padding-bottom: 50px;
  padding-top: 25px;
}

.shop-pills__list a {
  display: inline-block;
  padding-right: 5px;
  white-space: nowrap;
  text-decoration: none;
}

.shop-pills__list .current-menu-item a,
.shop-pills__list .current_product_cat a {
  background: #000;
  color: #1e1e1e;
}

/* Toolbar rond de knop */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.filters-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  z-index: 99998; /* see point 2 */
}

.filters-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.filters-drawer.is-open {
  transform: translateX(0);
}

.filters-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* "Alles wissen" — idem, class aanpassen naar wat jij ziet */
.filters-drawer .flrt-reset-btn {
  display: block;
  text-align: center;
  text-decoration: underline;
  margin-top: 12px;
}

.filters-overlay {
  z-index: 99998;
}

.filters-drawer {
  z-index: 99999;
}

/* keep the whole-widget heading hidden (redundant with the drawer's own title) */
.widget_wpc_filters_widget .widget-title {
  display: none !important;
}

/* show each filter's own label above its dropdown */
.widget_wpc_filters_widget .wpc-filter-title {
  display: block !important;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e1e1e;
}

#filtersDrawer .filters-drawer__body {
  text-align: left;
}

#filtersDrawer select {
  width: 100%;
  text-align: left;
}

/* divider between each filter block */
#filtersDrawer .wpc-filters-widget-wrapper > div {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

#filtersDrawer .wpc-filters-widget-wrapper > div:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.shop-pills__list .current-menu-item,
.shop-pills__list .current-menu-item a,
.shop-pills__list .current_page_item,
.shop-pills__list .current_page_item a {
  background: none !important;
  background-color: transparent !important;
  color: inherit !important;
}

.shop-pills {
  display: flex;
  justify-content: flex-start;
}

.shop-pills__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 30px;
  padding-top: 30px;
}

.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filters-drawer__title,
.wpc-filter-header {
  display: block;
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 20px;
}

#filtersApplyBtn {
  display: block;
  width: 100%;
}

.wpc-filters-widget-wrapper {
  display: flex !important;
  flex-direction: column !important;
}

.wpc-filters-section {
  width: 100% !important;
}

.sort-radio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sort-radio-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.sort-radio-list input[type="radio"] {
  accent-color: #000;
  width: 16px;
  height: 16px;
}

.wpc-sticky-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  padding-top: 12px !important;
}

#filtersDrawer .select2.select2-container.select2-container--default,
.wpc-filters-widget-wrapper .select2.select2-container.select2-container--default {
  display: none;
}

#priceSlider {
  margin: 24px 4px 8px;
}

#priceSlider .noUi-connect {
  background: #000;
}

#priceSlider .noUi-handle:before,
#priceSlider .noUi-handle:after {
  display: none;
}

.price-slider-label {
  margin-top: 12px;
  font-size: 14px;
}

/* 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;
}

.category-banner__card h1 {
  color: #FFF8F8 !important;
}

.filters-trigger {
  background-color: #FFF8F8 !important;
  color: #1e1e1e;
  font-family: "Lato" !important;
  font-weight: 400;
}

.filters-drawer__header h2 {
  margin: 0;
  line-height: 1;
}

.filters-drawer__close {
  line-height: 1;
  display: flex;
  align-items: center;
}

.filters-drawer__header {
  margin-top: 12px;
}

.sort-radio-list label {
  font-size: 15px !important;
  font-family: "Lato" !important;
}

.sort-radio-list {
  margin-bottom: 15px;
}

/* ===== Filters-flyout: header-uitlijning + hoofdtitel ===== */
#filtersDrawer .filters-drawer__header h2 {
  margin: 0;
  line-height: 1;
  font-size: 25px !important;
  font-family: "Aesthet Nova", serif !important;
}

.filters-drawer__close {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ===== Filters-flyout: ALLE tekst standaard op 15px Lato ===== */
#filtersDrawer,
#filtersDrawer * {
  font-family: "Lato", sans-serif !important;
  font-size: 15px !important;
}

/* ===== Filters-flyout: filtertitels overschrijven naar 18px Aesthet Nova ===== */
#filtersDrawer .filters-drawer__title,
#filtersDrawer .wpc-filter-title,
#filtersDrawer .wpc-filter-title .wpc-wrap-icons {
  font-family: "Aesthet Nova", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-bottom: 15px;
}

/* ===== Ruimte onder elke box ===== */
#filtersDrawer .filters-drawer__section {
  margin-bottom: 20px !important;
}

#filtersDrawer .wpc-filters-section {
  margin-bottom: 0px !important;
}

.wpc-filter-content.wpc-filter-_price {
  margin-bottom: 15px !important;
}

#filtersDrawer .wpc-filters-section[data-filter-e-name="product_cat"] .wpc-filter-title {
  margin-top: 25px !important;
  margin-bottom: 30px !important;
}

#filtersDrawer .wpc-filters-widget-containers-wrapper,
#filtersDrawer .wpc-filters-widget-top-container,
#filtersDrawer .wpc-filters-scroll-container,
#filtersDrawer .wpc-filters-widget-wrapper {
  width: 100% !important;
  flex: 1 1 100% !important;
  flex-direction: column !important;
}

/* 1. Titel + pijltje verticaal centreren in elke dropdown */
#filtersDrawer .wpc-filter-title button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
}

#filtersDrawer .wpc-wrap-icons,
#filtersDrawer .wpc-open-icon {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* 2. Gelijke hoogte voor elke (gesloten) dropdown-box */
/* Forceert de inhoud volledig te verbergen zodra een box dicht staat —
   nu had "Prijs" nog restruimte over (door de prijsslider die we er
   eerder zelf hebben ingezet), waardoor die groter leek dan Categorie. */
#filtersDrawer .wpc-filters-section.wpc-closed .wpc-filter-content {
  display: none !important;
}

#filtersDrawer .wpc-filters-section {
  padding: 20px 0 !important;
}

#filtersDrawer .wpc-filter-selected-values {
  display: none !important;
}

#filtersDrawer .filters-drawer__title,
#filtersDrawer .wpc-filter-title {
  font-family: "Aesthet Nova", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-bottom: 15px;
}

#filtersDrawer .wpc-filter-title .wpc-wrap-icons {
  font-family: "Aesthet Nova", serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

#filtersDrawer .filters-drawer__close {
  font-size: 25px !important;
  width: 40px;
  height: 40px;
  justify-content: center;
}

#filtersDrawer .wpc-filters-section[data-filter-e-name="_price"] .wpc-filter-title {
  margin-bottom: 25px !important;
  margin-top: 5px;
}

/* Pin the Klaar / Alles wissen block to the bottom of the drawer while scrolling */
#filtersDrawer .wpc-filters-section.wpc-filter-layout-submit-button {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff;
  padding: 16px 32px 24px !important;
  margin: 0 !important;
  z-index: 20;
}

#filtersDrawer .filters-drawer__body {
  padding-bottom: 0 !important;
}

#filtersDrawer .wpc-filters-section[data-filter-e-name="abj_type_mirror"] .wpc-filter-title {
  margin-bottom: 20px !important;
}

#filtersDrawer .wpc-filters-section.wpc-filter-layout-submit-button {
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;   /* was zonder !important */
  padding: 16px 0px 24px !important;
  margin: 0 !important;
  z-index: 999 !important;       /* hoger dan de rest van de drawer */
}

/* verwijder de onderste padding van de scrollcontainer zelf,
   zodat er geen ruimte overblijft ná je sticky blok */
.filters-drawer {
  padding-bottom: 0 !important;
}

/* ===== 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 */
}

/* 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;
}

/* 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 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;
}

/* Filterflyout: checkbox altijd wit met lichtgrijze rand, ook aangevinkt,
   bij hover of na een klik. De browser tekent het vakje niet meer zelf
   (anders kleurt "accent-color: #1e1e1e" het aangevinkte vakje donker);
   het roze vlakje van Filter Everything blijft gewoon staan. */
#filtersDrawer input[type="checkbox"],
#filtersDrawer input[type="checkbox"]:hover,
#filtersDrawer input[type="checkbox"]:focus,
#filtersDrawer input[type="checkbox"]:focus-visible,
#filtersDrawer input[type="checkbox"]:active,
#filtersDrawer input[type="checkbox"]:checked,
#filtersDrawer input[type="checkbox"]:checked:hover,
#filtersDrawer input[type="checkbox"]:checked:focus,
#filtersDrawer input[type="checkbox"]:checked:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  accent-color: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #bbbbbb !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Filterflyout: termen zonder producten NIET grijs maken */
#filtersDrawer .wpc-term-count-0,
#filtersDrawer .wpc-term-count-0 .wpc-term-item-content-wrapper,
#filtersDrawer .wpc-term-count-0 label,
#filtersDrawer .wpc-term-count-0 a,
#filtersDrawer .wpc-term-count-0 .wpc-filter-link,
#filtersDrawer .wpc-term-count-0 input[type="checkbox"] {
  color: #1e1e1e !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ===== Shopbanner (shop, categorie en collectie) =====
   Hoogte via een vaste verhouding; de foto vult het vak (cover) en
   wordt in het midden bijgesneden. Bij veel tekst groeit het vak mee
   (zet hier daarom GEEN min-height of overflow:hidden bij). */
body .category-banner {
  --abj-banner-ratio: 5 / 1;            /* ← verhouding desktop (breedte / hoogte) */
  --abj-banner-ratio-mobiel: 3 / 1;    /* ← verhouding gsm (breedte / hoogte) */
  --abj-banner-links: 50px;             /* ← afstand van de tekst tot de linkerkant */
  --abj-banner-onder: 40px;             /* ← afstand van de tekst tot de onderkant */
  position: relative;
  display: flex;
  align-items: flex-end;                /* tekst onderaan */
  justify-content: flex-start;          /* tekst links */
  width: 100%;
  aspect-ratio: var(--abj-banner-ratio);
  padding: 40px var(--abj-banner-links) var(--abj-banner-onder);
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
}

body .category-banner__card {
  max-width: 520px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Geen extra marges van het thema onder de tekst: zo is de afstand tot
   de onderkant precies --abj-banner-onder */
body .category-banner__card h1 {
  margin: 0 !important;
  line-height: 1.1;
}

body .category-banner__card > :not(:first-child) {
  margin-top: 10px !important;          /* ruimte tussen titel en tekst eronder */
}

body .category-banner__card > :last-child,
body .category-banner__card > :last-child > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  body .category-banner {
    --abj-banner-links: 20px;           /* ← gsm: afstand links */
    --abj-banner-onder: 20px;           /* ← gsm: afstand onderaan */
    aspect-ratio: var(--abj-banner-ratio-mobiel);
    padding-top: 24px;
  }

}

/* Banner ZONDER foto: geen vaste verhouding, enkel zo hoog als de titel,
   en donkere tekst (witte tekst zou onzichtbaar zijn zonder foto). */
body .category-banner.category-banner--tekst {
  aspect-ratio: auto !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0;
}

body .category-banner.category-banner--tekst .category-banner__card,
body .category-banner.category-banner--tekst .category-banner__card * {
  color: #1e1e1e !important;
}

/* Submenu in de shop: eerste link gelijk met de eerste kolom producten.
   (De algemene regel a.menu-link geeft elke menulink 10px marge links;
   die halen we enkel bij de eerste link weg, zodat de afstand tussen
   de andere links hetzelfde blijft.) */
.shop-pills__list > li:first-child > a,
.shop-pills__list > li:first-child > a.menu-link {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ===== Gsm: submenu in de shop als veegbare rij (slider), gelijke afstanden ===== */
@media (max-width: 767px){
  body{ --abj-shop-ruimte-gsm: 20px; }   /* ← afstand banner/submenu, submenu/filterknop en filterknop/producten */

  body .category-banner{ margin-bottom: 0 !important; }
  .shop-toolbar{
    margin: var(--abj-shop-ruimte-gsm) 0 calc(var(--abj-shop-ruimte-gsm) + 10px) !important;   /* onderaan 10px extra: tot de producten */
    row-gap: var(--abj-shop-ruimte-gsm) !important;
  }
  .ast-woocommerce-container ul.products{ margin-top: 0 !important; }

  .shop-toolbar nav.shop-pills{
    flex: 1 1 100%;
    min-width: 0;                       /* mag smaller worden dan de inhoud: anders schuift de hele pagina */
    max-width: 100%;
    overflow: hidden;
  }
  .shop-pills__list{
    flex-wrap: nowrap !important;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .shop-pills__list::-webkit-scrollbar{ display: none; }
  .shop-pills__list > li{ flex: 0 0 auto; }

  /* Zachte vervaging aan de kant waar nog items zijn (het script zet kan-links / kan-rechts) */
  .shop-pills__list.kan-rechts{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
  }
  .shop-pills__list.kan-links{
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%);
  }
  .shop-pills__list.kan-links.kan-rechts{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  }

  /* Geen extra ruimte boven de inhoud (punt 6) */
  body.woocommerce-shop .site-content,
  body.post-type-archive-product .site-content,
  body.tax-product_cat .site-content{ margin-top: 0 !important; }
}

/* Gsm: "Filters & sorteren" rechts, en in de flyout elke dropdown even hoog,
   met alle lijsten (ook Categorie) onder elkaar in plaats van in een rij */
@media (max-width: 767px){
  /* "Filters & sorteren" over de volle breedte */
  .shop-toolbar > :not(nav){
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .shop-toolbar .filters-trigger{
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  .wpc-filters-section .wpc-filters-ul-list,
  .wpc-filters-section .wpc-filter-content > ul{
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .wpc-filters-section .wpc-filters-ul-list > li{
    display: block !important;
    width: auto !important;
    margin: 0 0 12px !important;
  }
}

/* Gsm: geen chips (Alles resetten, gekozen filters) bovenaan de filterflyout */
@media (max-width: 768px){
  #filtersDrawer .wpc-filters-widget-top-container .wpc-filter-chips-list,
  #filtersDrawer .wpc-filter-chips-list{ display: none !important; }
  #filtersDrawer .wpc-filters-widget-top-container{ margin-bottom: 0 !important; }
}

/* Gsm: in de filterflyout staan ALLE lijsten (ook Categorie) onder elkaar,
   in een eigen scrollvak. Overschrijft de oude regel "make filter on shop
   page scrollable", die de categorielijst een horizontale rij maakte. */
@media (max-width: 768px){
  /* Het vak rond een lijst groeit mee: zo duwt de lijst de dropdowns eronder naar beneden */
  #filtersDrawer .wpc-filters-section .wpc-filter-content{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* De lijst zelf: maximaal 240px hoog, daarbinnen scrollen */
  #filtersDrawer .wpc-filters-ul-list,
  #filtersDrawer .wpc-filters-list-2330{
    display: block !important;
    flex-wrap: wrap !important;
    max-height: 240px !important;           /* ← hoogte van het scrollvak */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;           /* de flyout zelf scrolt niet mee */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: none !important;
    gap: 0 !important;
    padding: 0 6px 0 0 !important;
    margin: 0 !important;
  }
  #filtersDrawer .wpc-filters-ul-list > li,
  #filtersDrawer .wpc-filters-ul-list > li.wpc-label-item{
    display: block !important;
    flex: none !important;
    width: auto !important;
    white-space: normal !important;
    margin: 0 0 12px !important;
  }
}

/* Gsm: filterflyout, minder ruimte boven "Prijs" */
@media (max-width: 768px){
  #filtersDrawer .wpc-filters-section[data-filter-e-name="_price"]{
    padding-top: 10px !important;         /* ← ruimte boven "Prijs" (de andere dropdowns: 20px) */
  }
  #filtersDrawer .wpc-filters-section[data-filter-e-name="_price"] .wpc-filter-title{
    margin-top: 0 !important;
  }
}

/* Gsm: filterflyout even hoog als het ZICHTBARE scherm, zodat "Klaar" en
   "Alles wissen" niet achter de balk van Safari verdwijnen.
   100vh = scherm zonder browserbalk (te hoog), 100dvh = wat je echt ziet.
   Oudere browsers die dvh niet kennen, slaan die regel over en houden 100vh. */
@media (max-width: 768px){
  .filters-drawer,
  #filtersDrawer{
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  /* Iets meer ruimte onder de knoppen (ook voor de onderrand van de iPhone) */
  #filtersDrawer .wpc-filters-section.wpc-filter-layout-submit-button{
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;   /* ← ruimte onder "Alles wissen" */
  }
}