.elementor-1971 .elementor-element.elementor-element-aaa4301{--display:flex;}.elementor-1971 .elementor-element.elementor-element-e701111{--display:flex;}/* Start custom CSS for wp-widget-woocommerce_product_categories, class: .elementor-element-3b1414f *//* optioneel: widget verbergen maar wel parsebaar houden */
.woocommerce.widget_product_categories{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b210c9e *//* =========================================================
   Mystic Luna – Shop + Filters + Grid + Cards (CLEAN)
   Scope: .ml-archive-v2
   Let op: Pagination staat in de Customizer → hier NIET
   ========================================================= */


/* =========================================================
   FILTERBAR
   ========================================================= */

.ml-archive-v2 .ml-shop-filterbar{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 18px 0 !important;
}

@media (max-width: 768px){
  .ml-archive-v2 .ml-shop-filterbar{
    grid-template-columns: 1fr !important;
  }
}

.ml-archive-v2 .ml-shop-filterbar select{
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;

  background: rgba(221,196,127,0.14) !important;
  border: 1px solid rgba(221,196,127,0.55) !important;
  border-radius: 14px !important;

  color: #DDC47F !important;
  font-weight: 600 !important;

  outline: none !important;
  box-shadow: none !important;
}

.ml-archive-v2 .ml-shop-filterbar select:focus{
  border-color: #F1DC9B !important;
  box-shadow: 0 0 12px rgba(221,196,127,0.35) !important;
}

.ml-archive-v2 .ml-shop-filterbar select:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Filterbar + result count full width */
.ml-archive-v2 .ml-shop-filterbar,
.ml-archive-v2 .woocommerce-result-count,
.ml-archive-v2 .woocommerce-ordering{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Result count */
.ml-archive-v2 .woocommerce-result-count{
  color: #DDC47F !important;
  font-weight: 600 !important;
  margin: 12px 0 18px 0 !important;
  padding-left: 6px !important;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

/* Kill Woo/theme pseudo elements */
.ml-archive-v2 ul.products::before,
.ml-archive-v2 ul.products::after{
  content: none !important;
  display: none !important;
}

/* Grid layout */
.ml-archive-v2 ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  box-sizing: border-box !important;
  justify-content: start !important;
}

@media (max-width: 1024px){
  .ml-archive-v2 ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px){
  .ml-archive-v2 ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Disable Woo floats */
.ml-archive-v2 ul.products > li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;

  grid-column: auto !important;
  grid-row: auto !important;
  box-sizing: border-box !important;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.ml-archive-v2 ul.products > li.product{
  background: transparent !important;
  border: 2px solid #DDC47F !important;
  border-radius: 20px !important;
  padding: 20px !important;

  position: relative !important;
  overflow: visible !important;

  transition: transform .25s ease,
              box-shadow .25s ease,
              border-color .25s ease !important;
}

.ml-archive-v2 ul.products > li.product:hover{
  transform: translateY(-4px) !important;
  border-color: #F1DC9B !important;
  box-shadow: 0 0 18px rgba(221,196,127,0.25) !important;
}

/* Image */
.ml-archive-v2 ul.products > li.product a.woocommerce-LoopProduct-link{
  display: block !important;
}

.ml-archive-v2 ul.products > li.product img{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;

  border-radius: 18px !important;
  outline: 2px solid #DDC47F !important;
  outline-offset: 8px !important;
}

/* Title */
.ml-archive-v2 .woocommerce-loop-product__title{
  text-align: center !important;
  line-height: 1.35 !important;
  margin: 18px 0 12px 0 !important;
  color: #DDC47F !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  min-height: calc(1.35em * 2 + 4px) !important;
}

/* =========================================================
   PRICE PILL (enige prijs styling die we houden)
   ========================================================= */

/* container: GEEN rand, alleen centreren */
.ml-archive-v2 ul.products > li.product .price{
  display: flex !important;
  justify-content: center !important;

  width: 100% !important;
  margin: 0 auto 14px auto !important;
  padding: 0 !important;

  border: none !important;
  background: transparent !important;
}

.ml-archive-v2 ul.products > li.product .price del{ opacity: .65 !important; }
.ml-archive-v2 ul.products > li.product .price ins{ background: transparent !important; }

/* de echte prijs-pill */
.ml-archive-v2 ul.products > li.product .price > *{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  padding: 8px 14px !important;

  border-radius: 14px !important;
  background: rgba(221,196,127,0.14) !important; /* zelfde als button */
  border: 1px solid rgba(221,196,127,0.35) !important;

  color: #F1DC9B !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.ml-archive-v2 a.button{
  display: block !important;
  width: 100% !important;

  margin: 18px auto -8px auto !important;
  padding: 12px 0 !important;

  background: rgba(221,196,127,0.14) !important;
  border: 1px solid #DDC47F !important;
  border-radius: 14px !important;

  color: #DDC47F !important;
  -webkit-text-fill-color: #DDC47F !important;

  font-weight: 600 !important;
  text-align: center !important;

  transition: all .25s ease !important;
}

.ml-archive-v2 a.button:hover{
  background: rgba(221,196,127,0.25) !important;
  border-color: #F1DC9B !important;

  color: #FFF6D7 !important;
  -webkit-text-fill-color: #FFF6D7 !important;

  box-shadow: 0 0 14px rgba(221,196,127,0.45) !important;
  transform: translateY(-2px) !important;
}/* End custom CSS */