/* =============================================================
   Shop filters — accordion styling
   Matches ATELIA design screenshots. Brand green pulled directly
   from the site's Elementor Kit "accent" color (#5A6D57), so it
   always stays in sync with the rest of the site.
   ============================================================= */

:root {
  --shop-filter-green: #5A6D57;
  --shop-filter-green-hover: #4c5c49;
  --shop-filter-text: #ffffff;
  --shop-filter-radius: 2px;
  --shop-filter-gap: 3px;
}

/* ---- Layout: filters left, products right --------------------- */
.shop-filters-column,
.elementor-element-9a2ef93 {
  display: flex;
  flex-direction: column;
}

/* ---- Clear all / reset row -------------------------------------- */
.yith-wcan-reset-navigation {
  margin-bottom: 14px;
}

.yith-wcan-reset-filters.reset-filters {
  background: transparent;
  border: none;
  color: #666;
  font-size: 13px;
  text-decoration: underline;
  padding: 0 0 14px;
  cursor: pointer;
  display: block;
}

.yith-wcan-reset-filters.reset-filters:hover {
  color: var(--shop-filter-green);
}

/* ---- Active filters summary --------------------------------------- */
.shop-active-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.shop-active-filter-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background-color: #dde3d8;
  border: none;
  color: #3f4d3c;
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.shop-active-filter-tag:hover {
  background-color: #cbd4c4;
  color: #3f4d3c;
}

.shop-active-filter-remove {
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
}

/* ---- Accordion bar (title row) --------------------------------- */
.yith-wcan-filters {
  margin-bottom: var(--shop-filter-gap) !important;
}

.yith-wcan-filter.shop-custom-filter,
.yith-wcan-filters .yith-wcan-filter {
  margin-bottom: var(--shop-filter-gap);
}

.yith-wcan-filter .filter-title,
.shop-custom-filter .filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--shop-filter-green);
  color: var(--shop-filter-text) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 14px;
  padding: 13px 16px;
  margin: 0;
  cursor: pointer;
  border-radius: var(--shop-filter-radius);
  transition: background-color 0.2s ease;
  user-select: none;
}

.yith-wcan-filter .filter-title:hover,
.shop-custom-filter .filter-title:hover {
  background-color: var(--shop-filter-green-hover);
}

/* plus / minus icon, right-aligned, plain text glyph like the design.
   Native YITH blocks get the icon via ::after on .filter-title itself.
   Custom blocks (Sort By / Voorraad) use their own <i class="shop-filter-icon">
   element instead — the :not() below prevents both rules firing on the
   same element and showing a doubled icon.
   IMPORTANT: YITH's own CSS (shortcodes.css) also sets a background-image
   arrow on this same ::after pseudo-element. We must explicitly clear it
   here, otherwise its arrow icon renders behind/next to our +/− text. */
.yith-wcan-filter:not(.shop-custom-filter) .filter-title::after {
  content: "+" !important;
  background-image: none !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--shop-filter-text);
}

.yith-wcan-filter:not(.shop-custom-filter) .filter-title.opened::after {
  content: "\2212" !important; /* minus sign */
  background-image: none !important;
}

.shop-custom-filter .filter-title .shop-filter-icon::after {
  content: "+";
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--shop-filter-text);
}

.shop-custom-filter .filter-title.opened .shop-filter-icon::after {
  content: "\2212";
}

.shop-custom-filter .filter-title .shop-filter-icon {
  display: inline-block;
}

.shop-custom-filter .filter-title .shop-filter-icon::before {
  content: none;
}

/* ---- Accordion content ------------------------------------------ */
.yith-wcan-filter .filter-content,
.shop-custom-filter .filter-content {
  background-color: #ffffff;
  padding: 14px 16px 16px;
}

.shop-custom-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-custom-filter-list li label,
.yith-wcan-filter .filter-content li label,
.yith-wcan-filter .filter-content .item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

.yith-wcan-filter .filter-items li,
.yith-wcan-filter .filter-item,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item {
  margin-bottom: 14px !important;
}

.yith-wcan-filter .filter-items li:last-child,
.yith-wcan-filter .filter-item:last-child {
  margin-bottom: 0 !important;
}

/* ---- Checkboxes / radios: fully custom square, so the checkmark
   always renders correctly regardless of theme/browser defaults
   (relying only on `accent-color` broke silently on this site). ---- */
.shop-custom-filter-list input[type="checkbox"],
.shop-custom-filter-list input[type="radio"],
.yith-wcan-filter input[type="checkbox"],
.yith-wcan-filter input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #a8a8a8;
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.shop-custom-filter-list input[type="checkbox"]:checked,
.shop-custom-filter-list input[type="radio"]:checked,
.yith-wcan-filter input[type="checkbox"]:checked,
.yith-wcan-filter input[type="radio"]:checked {
  background-color: var(--shop-filter-green);
  border-color: var(--shop-filter-green);
}

.shop-custom-filter-list input[type="checkbox"]:checked::after,
.shop-custom-filter-list input[type="radio"]:checked::after,
.yith-wcan-filter input[type="checkbox"]:checked::after,
.yith-wcan-filter input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Color filter: YITH renders a real .color-swatch span with the term's
   own hex color (populated from the WooCommerce color attribute so it
   stays in sync with Variation Swatches for WooCommerce). We just give
   it the same square shape as the rest of the design. */
.yith-wcan-filter .term-color {
  display: inline-flex;
}

.yith-wcan-filter .color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1.5px solid #a8a8a8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: inline-block;
}

.yith-wcan-filter .filter-item.color a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

/* ---- Selected / active filter state ------------------------------
   Give the currently chosen option a clear visual highlight, like in
   the original design (checked box fills green, selected color gets
   a ring around its swatch, selected text label turns green/bold). */
.yith-wcan-filter .filter-item.active .color-swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--shop-filter-green);
}

.yith-wcan-filter .filter-item.active .term-label,
.yith-wcan-filter .filter-item.checkbox.active label .term-label {
  color: var(--shop-filter-green) !important;
  font-weight: 600;
}

.shop-custom-filter-list input:checked + span,
.yith-wcan-filter input:checked ~ .term-label {
  color: var(--shop-filter-green) !important;
  font-weight: 600;
}

/* ---- Visual order -----------------------------------------------
   Size, Color and Fabric live in ONE merged YITH preset (required so
   YITH's AJAX keeps all three selections in sync with each other).
   Their natural DOM order already matches the requested order, and
   "Collection" now sits right after them — no flexbox order/`display:
   contents` tricks needed, which is more robust and avoids any risk
   of one block's layout interfering with another's clickable area. */

/* ---- Out of stock: show "Out of Stock" label instead of the price ----
   WooCommerce already adds the "outofstock" class to each product card
   wrapper in the shop grid, so we can target it directly with CSS — no
   need to touch the Elementor product-card template. */
.outofstock .elementor-widget-woocommerce-product-price {
  display: none;
}

.outofstock .elementor-element-8e6d761::after {
  content: "Out of Stock";
  font-size: 13px;
  font-weight: 700;
  color: #a6433a;
  white-space: nowrap;
}

/* ---- Responsive: stack filters above products on mobile --------- */
@media (max-width: 767px) {
  .shop-filters-column,
  .elementor-element-9a2ef93,
  .elementor-element-c715aad {
    width: 100% !important;
  }

  .elementor-element-76f0a57 {
    flex-wrap: wrap;
  }

  .yith-wcan-filter .filter-title,
  .shop-custom-filter .filter-title {
    padding: 12px 14px;
    font-size: 13px;
  }

  .yith-wcan-filter .filter-content,
  .shop-custom-filter .filter-content {
    padding: 12px 14px;
  }
}