/**
 * Tutulya Wishlist — heart button, nav icon, wishlist page.
 */

/* =============================================================================
   Heart button on product cards
   ============================================================================= */

/* card-image needs position:relative for the button to anchor to */
.card-image {
	position: relative;
}

.tutulya-wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease,
		opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
}

.tutulya-wishlist-btn:hover {
	transform: scale(1.12);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	background: #fff;
}

/* Round card button: keep white background on focus (prevents browser grey flash). */
.tutulya-wishlist-btn:not(.tutulya-wishlist-btn--single):focus {
	background: rgba(255, 255, 255, 0.92);
	outline: none;
}
.tutulya-wishlist-btn:not(.tutulya-wishlist-btn--single):focus-visible {
	outline: 2px solid var(--hestia-primary-color, #e91e63);
	outline-offset: 3px;
	background: rgba(255, 255, 255, 0.92);
}

/* Single-product button: never override the transparent/themed background on focus.
   Only suppress the browser outline; keyboard users get a styled outline via
   :focus-visible instead. */
.tutulya-wishlist-btn--single:focus {
	outline: none;
}
.tutulya-wishlist-btn--single:focus-visible {
	outline: 2px solid var(--hestia-primary-color, #e91e63);
	outline-offset: 2px;
}

/* Suppress iOS/Android grey tap flash */
.tutulya-wishlist-btn {
	-webkit-tap-highlight-color: transparent;
}

.tutulya-wishlist-btn.is-loading {
	pointer-events: none;
}

/* --- Spinner (CSS ring, shown during AJAX request) --- */

.tutulya-wishlist-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(107, 117, 133, 0.25);
	border-top-color: #6b7585;
	border-radius: 50%;
	animation: tutulya-spin 0.65s linear infinite;
	flex-shrink: 0;
}

@keyframes tutulya-spin {
	to { transform: rotate(360deg); }
}

.tutulya-wishlist-btn.is-loading .tutulya-wishlist-spinner {
	display: block;
}

.tutulya-wishlist-btn.is-loading .tutulya-heart-icon {
	display: none;
}

/* --- Heart SVG inside button --- */

.tutulya-heart-icon {
	width: 18px;
	height: 18px;
	display: block;
	flex-shrink: 0;
	overflow: visible;
}

.tutulya-wishlist-btn .heart-path {
	fill: none;
	stroke: #8a94a0;
	stroke-width: 1.5px;
	transition:
		fill 0.22s ease,
		stroke 0.22s ease;
}

.tutulya-wishlist-btn:hover .heart-path {
	stroke: var(--hestia-primary-color, #e91e63);
	fill: rgba(233, 30, 99, 0.1);
}

.tutulya-wishlist-btn.is-wishlisted .heart-path {
	fill: var(--hestia-primary-color, #e91e63);
	stroke: var(--hestia-primary-color, #e91e63);
}

/* Pop animation when added */
@keyframes tutulya-heart-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.4); }
	70%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.tutulya-wishlist-btn.is-wishlisted .tutulya-heart-icon {
	animation: tutulya-heart-pop 0.35s ease-out;
}

/* =============================================================================
   Single product page — cart form flex layout + wishlist button
   Makes Add to Cart and Save to Wishlist sit side-by-side on the same row.
   Matches WooCommerce/Hestia button height: padding 12px 30px, same border-radius.
   ============================================================================= */

/* =============================================================================
   Single product page — inline wishlist button (no form.cart changes)
   Sits beside Add to Cart using inline-flex + margin-left.
   Padding matches Hestia's WC button (12px 30px) for identical height.
   ============================================================================= */

.tutulya-wishlist-btn--single {
	position: static;
	width: auto;
	height: auto;
	border-radius: 3px;
	background: transparent;
	border: 1.5px solid #dde2e8;
	padding: 12px 30px;
	gap: 8px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	box-shadow: none;
	color: #6b7585;
	font-size: 14px;
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 0 10px;
	line-height: 1;
	transition:
		border-color 0.2s ease,
		color 0.2s ease,
		background 0.2s ease;
}

.tutulya-wishlist-btn--single .tutulya-heart-icon {
	width: 16px;
	height: 16px;
}

.tutulya-wishlist-btn--single .heart-path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5px;
	transition: fill 0.2s ease, stroke 0.2s ease;
}

.tutulya-wishlist-btn--single .tutulya-wishlist-spinner {
	width: 16px;
	height: 16px;
	border-color: rgba(107, 117, 133, 0.25);
	border-top-color: currentColor;
}

.tutulya-wishlist-btn--single:hover {
	border-color: var(--hestia-primary-color, #e91e63);
	color: var(--hestia-primary-color, #e91e63);
	background: rgba(233, 30, 99, 0.04);
	transform: none;
	box-shadow: none;
}

.tutulya-wishlist-btn--single.is-wishlisted {
	border-color: var(--hestia-primary-color, #e91e63);
	color: var(--hestia-primary-color, #e91e63);
	background: rgba(233, 30, 99, 0.06);
}

.tutulya-wishlist-btn--single.is-wishlisted .heart-path {
	fill: currentColor;
}

.tutulya-wishlist-btn--single .tutulya-wishlist-btn-label {
	pointer-events: none;
	/* Ensure the label is never invisible — Hestia's WooCommerce stylesheet sets
	   color:#fff on .button elements in form.cart; our button has no .button class
	   but this explicit inheritance guard prevents any accidental override. */
	color: inherit;
}

/* =============================================================================
   Nav wishlist icon
   ============================================================================= */

.tutulya-nav-wishlist {
	display: inline-flex;
	align-items: center;
	list-style: none;
}

.tutulya-nav-wishlist-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--tutulya-nav-link, #6b7585);
	text-decoration: none !important;
	transition: color 0.2s ease;
	line-height: 1;
}

.tutulya-nav-wishlist-link .tutulya-heart-icon {
	width: 20px;
	height: 20px;
}

.tutulya-nav-wishlist-link .heart-path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5px;
	transition: fill 0.2s ease;
}

.tutulya-nav-wishlist-link:hover,
.tutulya-nav-wishlist-link.has-items {
	color: var(--hestia-primary-color, #e91e63);
}

.tutulya-nav-wishlist-link.has-items .heart-path {
	fill: currentColor;
}

/* Count badge */
.tutulya-wishlist-count {
	position: absolute;
	top: 1px;
	right: 1px;
	background: var(--hestia-primary-color, #e91e63);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	pointer-events: none;
	border: 1.5px solid #fff;
}

/* On solid / frosted nav bar, keep count visible */
body.tutulya-modern-nav .navbar.navbar-not-transparent .tutulya-wishlist-count {
	border-color: var(--tutulya-nav-surface, rgba(255,255,255,0.94));
}

/* =============================================================================
   Wishlist page — empty state
   ============================================================================= */

.tutulya-wishlist-empty {
	text-align: center;
	padding: 80px 20px 60px;
	max-width: 420px;
	margin: 0 auto;
}

.tutulya-wishlist-empty .tutulya-heart-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	display: block;
}

.tutulya-wishlist-empty .heart-path {
	fill: none;
	stroke: #d0d5dd;
	stroke-width: 1px;
}

.tutulya-wishlist-empty h3 {
	font-size: 1.5rem;
	margin: 0 0 10px;
	color: #222;
}

.tutulya-wishlist-empty p {
	color: #6b7585;
	margin-bottom: 28px;
	line-height: 1.6;
}

/* =============================================================================
   Wishlist page — product grid
   The shortcode renders via wc_get_template_part('content','product') so all
   .woocommerce ul.products li.product rules from shop-cards.css apply automatically.
   ============================================================================= */

/*
 * Hestia's font-sizes.css sets h4 to 27px globally. Inside .page-content-wrap
 * (the regular page content area) that same global rule inflates card titles.
 * This scoped override restores them to the same visual size as on shop archives,
 * where the product loop is NOT inside .page-content-wrap.
 */
.page-content-wrap .tutulya-wishlist-page .card-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 5px;
}

/* Fade-out when removing a card from the wishlist page */
.tutulya-card-removing {
	opacity: 0.35;
	transition: opacity 0.15s ease;
}

/* =============================================================================
   Safety net: hide the WooCommerce Product Categories sidebar widget on the
   wishlist page. The PHP hestia_sidebar_layout filter (returning 'full-width')
   is the primary suppression; this CSS rule is a belt-and-suspenders fallback
   in case any caching layer serves a page where the sidebar still appears.
   ============================================================================= */
.tutulya-wishlist-page-body .widget_product_categories {
	display: none !important;
}