/* ============ CSS icons ============
   Lucide-style SVGs as CSS masks for markup we don't control (WooCommerce, WP pagination),
   so their emoji/text glyphs match the theme's lucide icons and inherit currentColor. */
:root {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-chevron-down-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* Zoom trigger on the product gallery */
.woocommerce-product-gallery__trigger::before {
  content: '';
  width: 18px;
  height: 18px;
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
  background: currentColor;
}

/* Cart row remove button */
.woocommerce-cart-form .product-remove a.remove {
  font-size: 0;
}
.woocommerce-cart-form .product-remove a.remove::before {
  content: '';
  width: 14px;
  height: 14px;
  -webkit-mask: var(--icon-x) center / contain no-repeat;
  mask: var(--icon-x) center / contain no-repeat;
  background: currentColor;
}

/* Add-to-cart buttons: cart icon, and a check once added */
.woocommerce a.add_to_cart_button::before,
.woocommerce button.single_add_to_cart_button::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  -webkit-mask: var(--icon-cart) center / contain no-repeat;
  mask: var(--icon-cart) center / contain no-repeat;
  background: currentColor;
}
.woocommerce a.add_to_cart_button.added::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  background: currentColor;
}

/* Pagination prev/next arrows (WooCommerce + blog) */
.page-numbers.prev,
.page-numbers.next {
  font-size: 0;
}
.page-numbers.prev::before,
.page-numbers.next::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
}
.page-numbers.prev::before {
  -webkit-mask: var(--icon-chevron-left) center / contain no-repeat;
  mask: var(--icon-chevron-left) center / contain no-repeat;
}
.page-numbers.next::before {
  -webkit-mask: var(--icon-chevron-right) center / contain no-repeat;
  mask: var(--icon-chevron-right) center / contain no-repeat;
}

/* Sorting + variation selects: custom chevron instead of the OS arrow */
.woocommerce-ordering select,
.woocommerce div.product form.variations_form .variations select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface) var(--icon-chevron-down-url) right 14px center / 16px no-repeat;
}