/* =========================================================
   TLH Wishlist
   Base wishlist button styling
   ========================================================= */

.tlh-wishlist-button,
button.tlh-wishlist-button,
a.tlh-wishlist-button {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	outline: none !important;
	overflow: hidden !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.34) !important;
	color: #1f1f1f !important;
	cursor: pointer !important;
	line-height: 1 !important;
	text-decoration: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-webkit-backdrop-filter: blur(8px) !important;
	backdrop-filter: blur(8px) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58) !important;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
	z-index: 500 !important;
}

/* =========================================================
   Wishlist button interaction states
   ========================================================= */

.tlh-wishlist-button:hover,
button.tlh-wishlist-button:hover,
a.tlh-wishlist-button:hover,
.tlh-wishlist-button:focus,
button.tlh-wishlist-button:focus,
a.tlh-wishlist-button:focus,
.tlh-wishlist-button:active,
button.tlh-wishlist-button:active,
a.tlh-wishlist-button:active {
	background: rgba(255, 255, 255, 0.42) !important;
	color: #FE5000 !important;
	transform: scale(1.04) !important;
	outline: none !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

.tlh-wishlist-button:focus-visible {
	outline: 2px solid #1f1f1f !important;
	outline-offset: 2px !important;
}

.tlh-wishlist-button.is-active,
button.tlh-wishlist-button.is-active,
a.tlh-wishlist-button.is-active {
	background: rgba(255, 255, 255, 0.42) !important;
	color: #FE5000 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Fill the heart when active */
.tlh-wishlist-button__icon svg path {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
}

.tlh-wishlist-button.is-active .tlh-wishlist-button__icon svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* =========================================================
   Wishlist icon sizing
   ========================================================= */

.tlh-wishlist-button__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	line-height: 1 !important;
	flex: 0 0 18px !important;
}

.tlh-wishlist-button__icon svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	overflow: visible !important;
}

/* =========================================================
   Relative positioning contexts
   These wrappers need position: relative so the heart
   can sit cleanly in the image corner
   ========================================================= */

li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product div.images,
.single-product div.product .woocommerce-product-gallery {
	position: relative !important;
}

/* =========================================================
   Standard WooCommerce product loops
   Desktop: show on hover
   Mobile: always visible
   ========================================================= */

.woocommerce ul.products li.product .tlh-wishlist-button--loop {
	opacity: 0 !important;
	pointer-events: none !important;
}

.woocommerce ul.products li.product:hover .tlh-wishlist-button--loop,
.woocommerce ul.products li.product:focus-within .tlh-wishlist-button--loop,
.woocommerce ul.products li.product .tlh-wishlist-button--loop.is-active {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* =========================================================
   Single product gallery overlay button
   Positioned on the main gallery image
   ========================================================= */

.tlh-wishlist-button--single-overlay {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	left: auto !important;
	margin: 0 !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 1000 !important;
}

/* =========================================================
   Elementor loop grid buttons
   Desktop: show on hover
   Mobile: always visible
   ========================================================= */

.tlh-wishlist-button--elementor-loop {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 100 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.e-loop-item:hover .tlh-wishlist-button--elementor-loop,
.e-loop-item:focus-within .tlh-wishlist-button--elementor-loop,
.e-loop-item .tlh-wishlist-button--elementor-loop.is-active {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* =========================================================
   Responsive behaviour
   On touch devices there is no hover, so make buttons visible
   ========================================================= */

@media (max-width: 1024px) {
	.woocommerce ul.products li.product .tlh-wishlist-button--loop,
	.tlh-wishlist-button--elementor-loop {
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}