/* =====================================================================
 * Styletodo Wishlist — look
 * Gold = saved. Change colours in the variables just below.
 * ===================================================================== */

:root {
	--st-wl-gold: #C9A227;
	--st-wl-gold-hi: #E2BC48;
	--st-wl-ink: #120F06;
	--st-wl-bone: #ECE5D5;
	--st-wl-muted: #988F7E;
	--st-wl-line: #2B2721;
	--st-wl-surface: #14120F;
	--st-wl-bg: #0C0B09;
}

.st-wl-ico { width: 18px; height: 18px; flex: none; fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s ease, transform .2s ease; }
.is-saved .st-wl-ico { fill: currentColor; }

/* Theme reset: "html body" beats the Elementor kit button style (.elementor-kit-8 button), which loads later. */
html body .st-wl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: var(--st-wl-bone);
	font-family: Manrope, sans-serif;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}
html body .st-wl-btn.is-saved { color: var(--st-wl-gold); }
html body .st-wl-btn.is-pop .st-wl-ico { animation: st-wl-pop .45s ease; }

/* ---------- On product cards: a round heart on the photo's corner ---------- */

ul.products li.product.st-wl-ready { position: relative; }
html body .st-wl-btn--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(12, 11, 9, .72);
	border: 1px solid rgba(236, 229, 213, .14);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
html body .st-wl-btn--card:hover,
html body .st-wl-btn--card:focus-visible { background: rgba(12, 11, 9, .9); color: var(--st-wl-gold); border-color: var(--st-wl-gold); }
html body .st-wl-btn--card.is-saved { border-color: rgba(201, 162, 39, .5); }
/* Out of the way while the Quick add panel covers the photo. */
li.product:has(.st-qa-panel.is-open) .st-wl-btn--card { opacity: 0; pointer-events: none; }

/* ---------- Product page ----------
 * Desktop/tablet: a full-width outlined button on its own line under quantity + Add to cart.
 * The Elementor Add to cart widget styles every button in the form (gold, padding, left margin)
 * with a stronger rule, hence the !important here.
 * Phones: that button hides and a round heart sits on the photo's top-right corner (wishlist.js). */

html body .st-wl-btn.st-wl-btn--wide {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 50px !important;
	margin: 10px 0 0 !important;
	padding: 0 16px !important;
	border: 1px solid var(--st-wl-line) !important;
	background: transparent !important;
	color: var(--st-wl-bone) !important;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}
html body .st-wl-btn.st-wl-btn--wide:hover,
html body .st-wl-btn.st-wl-btn--wide:focus-visible { border-color: var(--st-wl-gold) !important; color: var(--st-wl-gold) !important; background: transparent !important; }
html body .st-wl-btn.st-wl-btn--wide.is-saved { border-color: rgba(201, 162, 39, .5) !important; color: var(--st-wl-gold) !important; }

html body .st-wl-btn--gallery { display: none; top: 14px; right: 14px; z-index: 10; }

@media (max-width: 767px) {
	html body .st-wl-btn.st-wl-btn--wide { display: none !important; }
	html body .st-wl-btn--gallery { display: inline-flex; width: 38px; height: 38px; }
	/* The zoom button moves left of the heart. */
	.st-wl-has-heart .woocommerce-product-gallery__trigger { right: 60px !important; }
}

/* ---------- Header count (on the Elementor heart icon) ---------- */

.elementor-icon:has(.st-wl-count) { position: relative; }
.st-wl-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--st-wl-gold);
	color: var(--st-wl-ink);
	font-family: Manrope, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}
.st-wl-count[hidden] { display: none; }

/* ---------- "Saved to your wishlist" note ---------- */

.st-wl-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid var(--st-wl-line);
	border-left: 3px solid var(--st-wl-gold);
	background: var(--st-wl-surface);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
	color: var(--st-wl-bone);
	font-family: Manrope, sans-serif;
	font-size: 13.5px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}
.st-wl-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .25s ease; }
.st-wl-toast .st-wl-ico { color: var(--st-wl-gold); fill: currentColor; }
.st-wl-toast a { margin-left: 6px; color: var(--st-wl-gold) !important; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none !important; }

/* ---------- The Wishlist page ---------- */

.st-wl-page { font-family: Manrope, sans-serif; color: var(--st-wl-muted); }
.st-wl-page__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--st-wl-line); font-size: 13px; }
.st-wl-page__bar [data-st-wl-total] { color: var(--st-wl-bone); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.st-wl-page__note a { color: var(--st-wl-gold); }
/* Same grid as the Shop page (4 across, 20px gaps, 36px between rows). !important beats the theme's float widths. */
.st-wl-page .st-wl-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 20px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.st-wl-page .st-wl-grid ul.products::before,
.st-wl-page .st-wl-grid ul.products::after { display: none !important; }
.st-wl-page .st-wl-grid ul.products li.product { width: auto !important; max-width: none; margin: 0 !important; float: none !important; clear: none !important; }
@media (max-width: 1024px) { .st-wl-page .st-wl-grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .st-wl-page .st-wl-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } }

.st-wl-page li.product { transition: opacity .35s ease, transform .35s ease; }
.st-wl-page li.product.is-leaving { opacity: 0; transform: scale(.96); }

.st-wl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; text-align: center; border: 1px solid var(--st-wl-line); background: var(--st-wl-surface); }
.st-wl-empty[hidden] { display: none; }
.st-wl-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(201, 162, 39, .12); color: var(--st-wl-gold); }
.st-wl-empty__icon .st-wl-ico { width: 28px; height: 28px; }
.st-wl-page .st-wl-empty h3 { margin: 6px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.1; color: var(--st-wl-bone); }
.st-wl-page .st-wl-empty h3 em { font-style: italic; color: var(--st-wl-gold); }
.st-wl-empty p { max-width: 400px; margin: 0 0 8px; font-size: 14px; line-height: 1.65; }
.st-wl-empty__btn { display: inline-flex; padding: 15px 26px; background: var(--st-wl-gold); color: var(--st-wl-ink) !important; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important; transition: background .25s ease; }
.st-wl-empty__btn:hover { background: var(--st-wl-gold-hi); }

@keyframes st-wl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

@media (max-width: 640px) {
	body .st-wl-btn--card { width: 34px; height: 34px; }
	.st-wl-ico { width: 16px; height: 16px; }
	.st-wl-toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(12px); }
	.st-wl-toast.is-on { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	body .st-wl-btn.is-pop .st-wl-ico { animation: none; }
	.st-wl-toast, .st-wl-page li.product { transition: none; }
}