/* Heart button on product loop / single product */
.ct-wishlist-btn {
	background: var(--ct-wl-bg-color, #fff) !important;
	border: 1px solid var(--ct-wl-border-color, #eee) !important;
	border-radius: 50%;
	width: var(--ct-wl-box-size, 36px);
	height: var(--ct-wl-box-size, 36px);
	padding: 0 !important;
	min-width: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
	color: var(--ct-wl-icon-color, #999) !important;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, opacity 0.25s ease;
	box-shadow: none !important;
	line-height: normal;
	box-sizing: border-box;
	flex-shrink: 0;
}
.ct-wishlist-btn svg {
	width: var(--ct-wl-icon-size, 20px);
	height: var(--ct-wl-icon-size, 20px);
}
.ct-wishlist-btn:hover {
	transform: scale(1.08);
}
.ct-wishlist-btn svg path {
	stroke: currentColor;
}
.ct-wishlist-btn.active {
	color: var(--ct-wl-active-color, #EC4C7D) !important;
	border-color: var(--ct-wl-active-color, #EC4C7D) !important;
}
.ct-wishlist-btn.active svg path {
	fill: var(--ct-wl-active-color, #EC4C7D);
}
.ct-wishlist-btn.ct-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Small "pop" animation when a product is added to the wishlist - nicer feedback than a flat color swap. */
@keyframes ctWlPop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}
.ct-wishlist-btn.ct-wl-pop {
	animation: ctWlPop 0.35s ease;
}

/* Normal-flow spacing for the automatic Shop Loop button (non-overlay position, stacks below Add to Cart) */
.ct-wl-auto-spacing {
	margin-top: 8px !important;
}

/* Single Product "same row" positions render literally inside the Add to Cart <form>, right next to
   the button - only a small horizontal gap is needed here (no new line). */
.ct-wl-inline-spacing {
	margin: 0 0 0 10px !important;
}

/* Overlay corner positions - used for both Shop Loop thumbnail overlay and Single Product image overlay.
   Shop Loop and Single Product each have their OWN spacing (set independently in CT Suite > Wishlist),
   via the --ct-wl-loop-margin-* / --ct-wl-single-margin-* CSS variables. */
.ct-wl-pos-top-right,
.ct-wl-pos-top-left,
.ct-wl-pos-bottom-right,
.ct-wl-pos-bottom-left {
	position: absolute !important;
	z-index: 5;
	margin: 0 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}
.ct-wl-loop-item-overlay.ct-wl-pos-top-right { top: var(--ct-wl-loop-margin-top, 10px); right: var(--ct-wl-loop-margin-right, 10px); }
.ct-wl-loop-item-overlay.ct-wl-pos-top-left { top: var(--ct-wl-loop-margin-top, 10px); left: var(--ct-wl-loop-margin-left, 10px); }
.ct-wl-loop-item-overlay.ct-wl-pos-bottom-right { bottom: var(--ct-wl-loop-margin-bottom, 10px); right: var(--ct-wl-loop-margin-right, 10px); }
.ct-wl-loop-item-overlay.ct-wl-pos-bottom-left { bottom: var(--ct-wl-loop-margin-bottom, 10px); left: var(--ct-wl-loop-margin-left, 10px); }

.ct-wl-single-overlay.ct-wl-pos-top-right { top: var(--ct-wl-single-margin-top, 10px); right: var(--ct-wl-single-margin-right, 10px); }
.ct-wl-single-overlay.ct-wl-pos-top-left { top: var(--ct-wl-single-margin-top, 10px); left: var(--ct-wl-single-margin-left, 10px); }
.ct-wl-single-overlay.ct-wl-pos-bottom-right { bottom: var(--ct-wl-single-margin-bottom, 10px); right: var(--ct-wl-single-margin-right, 10px); }
.ct-wl-single-overlay.ct-wl-pos-bottom-left { bottom: var(--ct-wl-single-margin-bottom, 10px); left: var(--ct-wl-single-margin-left, 10px); }

/* Hover-only visibility for overlay positions (matches the theme's own "hover to reveal Add to Cart"
   pattern). Shop Loop and Single Product each toggle independently via their own body class.
   Always-visible remains the default; wishlisted (active) items stay visible even without hover. */
body.ct-wl-loop-hover-mode .ct-wl-loop-item-overlay {
	opacity: 0;
	pointer-events: none;
}
body.ct-wl-loop-hover-mode li.product:hover .ct-wl-loop-item-overlay,
body.ct-wl-loop-hover-mode .ct-wl-loop-item-overlay.active {
	opacity: 1;
	pointer-events: auto;
}
body.ct-wl-single-hover-mode .ct-wl-single-overlay {
	opacity: 0;
	pointer-events: none;
}
body.ct-wl-single-hover-mode .woocommerce-product-gallery:hover .ct-wl-single-overlay,
body.ct-wl-single-hover-mode .ct-wl-single-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

/* Shop/Category loop: only make li.product a positioning context when overlay mode is active,
   so we don't change layout on sites that use the default (after Add to Cart) position. */
body.ct-wl-loop-overlay ul.products li.product,
body.ct-wl-loop-overlay .products li.product {
	position: relative;
}

/* Single Product: once wishlist.js moves the button into .woocommerce-product-gallery,
   it needs that container to be a positioning context (WooCommerce usually already sets this). */
.woocommerce-product-gallery {
	position: relative;
}

/* Shape variants used by the CT Wishlist Button widget (Loop Grid / Single Product) */
.ct-wishlist-btn--square {
	border-radius: 8px;
}
.ct-wishlist-btn--plain {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: auto;
	height: auto;
}

/* Elementor header widget */
.ct-wl-widget {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: inherit;
}
.ct-wl-widget--stacked {
	flex-direction: column;
	text-align: center;
}
.ct-wl-widget-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.ct-wl-widget-icon svg {
	stroke: #333 !important;
	fill: none;
}
.ct-wl-widget-badge {
	position: absolute;
	top: -8px;
	right: -10px;
	background: #EC4C7D !important;
	color: #fff !important;
	font-size: 11px;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}
.ct-wl-widget-label {
	font-size: 14px;
}

/* Wishlist page table */
.ct-wishlist-table {
	width: 100%;
	border-collapse: collapse;
}
.ct-wishlist-table th,
.ct-wishlist-table td {
	padding: 12px;
	border-bottom: 1px solid #eee;
	text-align: left;
	vertical-align: middle;
}
.ct-wl-product a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #333;
}
.ct-wl-product img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 6px;
}
.ct-wl-remove-item {
	background: none;
	border: none;
	font-size: 20px;
	color: #999;
	cursor: pointer;
}
.ct-wl-remove-item:hover {
	color: #EC4C7D;
}
.ct-wishlist-empty {
	padding: 24px;
	text-align: center;
	color: #777;
}