/* =========================================================
   SurgiMedex Star — Wishlist
   Heart controls (shop loop + single product) and the
   wishlist account-page grid. Self-contained colours (this
   loads on shop pages where the theme tokens aren't scoped).
   ========================================================= */

/* --- heart button (shared) --- */
.smx-wl-btn {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
.smx-wl-btn .smx-wl-ic {
	width: 20px; height: 20px; display: block;
	fill: none; stroke: #6b7280; stroke-width: 1.8;
	transition: fill .15s ease, stroke .15s ease;
}
.smx-wl-btn.is-active .smx-wl-ic { fill: #5D8B2E; stroke: #5D8B2E; }
.smx-wl-pulse { animation: smx-wl-pop .32s ease; }
@keyframes smx-wl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* --- loop heart: floats over the product thumbnail --- */
.woocommerce ul.products li.product { position: relative; }
.smx-wl-btn--loop {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	width: 38px; height: 38px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(20,30,20,.10); border-radius: 50%;
	background: rgba(255,255,255,.92);
	cursor: pointer; box-shadow: 0 2px 8px rgba(20,30,20,.14);
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.smx-wl-btn--loop:hover { transform: scale(1.08); background: #fff; }
.smx-wl-btn--loop.is-active { border-color: rgba(93,139,46,.4); background: #fff; }

/* --- single-product pill --- */
.smx-wl-single { margin: 14px 0 4px; }
.smx-wl-btn--single {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 18px; border-radius: 10px;
	border: 1.5px solid #cfd6cb; background: #fff !important; color: #17201a !important;
	font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
/* Backgrounds pinned on every state so the theme's `button:hover{background:green}`
   can't bleed through. Hover stays visually calm (no colour flip); the SAVED state
   is the only real change — an on-brand green fill. */
.smx-wl-btn--single:hover { background: #f4f6f2 !important; border-color: #b4bdcb; color: #17201a !important; }
.smx-wl-btn--single.is-active,
.smx-wl-btn--single.is-active:hover { background: #eef4e7 !important; border-color: #5D8B2E; color: #5D8B2E !important; }
.smx-wl-btn--single .smx-wl-ic { width: 18px; height: 18px; stroke: currentColor; }
.smx-wl-btn--single.is-active .smx-wl-ic { fill: #5D8B2E; stroke: #5D8B2E; }

/* --- wishlist account page --- */
.smx-wl-page { width: 100%; }
.smx-wl-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
.smx-wl-card {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid #e3e8dd; border-radius: 14px; background: #fff; overflow: hidden;
}
.smx-wl-remove {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.94); color: #5b6a5a !important;
	font-size: 19px; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 5px rgba(0,0,0,.16);
	transition: background .15s ease, color .15s ease;
}
.smx-wl-remove:hover { background: #DB4A3D; color: #fff !important; }
.smx-wl-thumb { display: block; aspect-ratio: 1 / 1; background: #f6f8f4; }
.smx-wl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smx-wl-info { padding: 12px 13px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 auto; text-align: center; }
.smx-wl-name {
	font-size: 14px; font-weight: 600; color: #17201a !important; text-decoration: none; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.smx-wl-name:hover { color: #5D8B2E !important; }
.smx-wl-price { font-size: 15px; font-weight: 700; color: #17201a; }
.smx-wl-price del, .smx-wl-price del .woocommerce-Price-amount { color: #8a9686; font-weight: 400; }
.smx-wl-oos { font-size: 12px; color: #b93a2b; font-weight: 600; }
/* Brand-green CTA + centred member pill so the wishlist card reads the same as a
   shop card (member pill above a full-width green action). */
.smx-wl-info .button {
	margin-top: auto; width: 100%; text-align: center;
	background: #5D8B2E !important; color: #fff !important; border: 0 !important;
	border-radius: 10px !important; padding: 11px 16px !important;
	font-weight: 700 !important; box-shadow: none !important;
}
.smx-wl-info .button:hover { background: #4d7524 !important; color: #fff !important; }
.smx-wl-card .smx-star-member-price { margin: 4px 0 0; }

/* --- empty state --- */
.smx-wl-empty { text-align: center; padding: 44px 20px; }
.smx-wl-empty-ic svg { width: 52px; height: 52px; fill: none; stroke: #cfd6cb; stroke-width: 1.6; }
.smx-wl-empty h3 { margin: 14px 0 6px; font-size: 18px; color: #17201a; }
.smx-wl-empty p { margin: 0 0 18px; color: #5b6a5a; font-size: 14px; }
.smx-wl-empty-cta {
	display: inline-block; padding: 11px 22px; background: #5D8B2E; color: #fff !important;
	border-radius: 10px; text-decoration: none; font-weight: 600;
}
.smx-wl-empty-cta:hover { background: #4d7524; color: #fff !important; }

@media (max-width: 480px) {
	.smx-wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.smx-wl-btn--loop { width: 34px; height: 34px; top: 8px; right: 8px; }
}