/**
 * FlexMart Wishlist — Front-end styles.
 * Self-contained: doesn't depend on the Homepage plugin's or Shop
 * snippet's CSS being loaded, but uses the same design tokens (blue
 * accent, radius, shadow language) already established across FlexMart.
 */

:root{
	--fmw-primary:#2563EB;
	--fmw-danger:#DC2626;
	--fmw-text:#111827;
	--fmw-text-secondary:#6B7280;
	--fmw-border:#E5E7EB;
	--fmw-bg-light:#F8FAFC;
	--fmw-radius-card:18px;
	--fmw-radius-pill:999px;
	--fmw-shadow-sm:0 1px 3px rgba(15,23,42,0.07);
	--fmw-shadow-md:0 12px 26px rgba(15,23,42,0.13);
	--fmw-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------------
   Heart button — used both standalone (single product page) and
   injected into cards (see frontend.js)
   --------------------------------------------------------------------- */
.fmw-heart{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,0.92);
	box-shadow:var(--fmw-shadow-sm);
	color:var(--fmw-text-secondary);
	cursor:pointer;
	padding:0;
	transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease, background 0.2s ease;
}

.fmw-heart svg{
	width:19px;
	height:19px;
	transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}

.fmw-heart:hover{
	color:var(--fmw-danger);
}

.fmw-heart:active svg,
.fmw-heart.fmw-tapped svg{
	transform:scale(1.25);
}

.fmw-heart.is-active{
	color:var(--fmw-danger);
}

.fmw-heart.is-active svg{
	fill:currentColor;
}

/* Card-injected placement — top-right corner of the card's media area */
.fmw-heart--card{
	position:absolute;
	top:10px;
	right:10px;
	z-index:3;
}

/* Single product page placement — inline, small gap from the title */
.fmw-heart--single-product{
	width:40px;
	height:40px;
	margin:8px 0 4px;
}

@media (pointer:coarse){
	.fmw-heart{ width:38px; height:38px; }
	.fmw-heart--card{ top:8px; right:8px; }
}

/* ---------------------------------------------------------------------
   Wishlist page
   --------------------------------------------------------------------- */
.fmw-page{
	max-width:1280px;
	margin:0 auto;
	padding:0 20px 40px;
	font-family:var(--fmw-font);
}

.fmw-page__title{
	font-size:clamp(1.4rem,2.6vw,1.9rem);
	font-weight:800;
	color:var(--fmw-text);
	letter-spacing:-0.01em;
	margin:24px 0 20px;
}

.fmw-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px;
}

@media (min-width:640px){
	.fmw-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
}

@media (min-width:900px){
	.fmw-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ---------------------------------------------------------------------
   Wishlist card
   --------------------------------------------------------------------- */
.fmw-card{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid var(--fmw-border);
	border-radius:var(--fmw-radius-card);
	overflow:hidden;
	box-shadow:var(--fmw-shadow-sm);
	font-family:var(--fmw-font);
	transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease, opacity 0.25s ease, max-height 0.3s ease;
}

.fmw-card:hover{
	transform:translateY(-5px);
	box-shadow:var(--fmw-shadow-md);
	border-color:rgba(37,99,235,0.25);
}

.fmw-card.fmw-removing{
	opacity:0;
	transform:scale(0.92);
}

.fmw-card__remove{
	position:absolute;
	top:10px;
	right:10px;
	z-index:3;
	width:32px;
	height:32px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,0.92);
	box-shadow:var(--fmw-shadow-sm);
	color:var(--fmw-text-secondary);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.fmw-card__remove:hover{
	background:var(--fmw-danger);
	color:#fff;
}

.fmw-card__remove svg{ width:15px; height:15px; }

.fmw-card__link{
	display:block;
	text-decoration:none !important;
	color:inherit !important;
}

.fmw-card__media{
	position:relative;
	aspect-ratio:1/1;
	background:var(--fmw-bg-light);
	overflow:hidden;
}

.fmw-card__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
}

@media (hover:hover) and (pointer:fine){
	.fmw-card:hover .fmw-card__media img{ transform:scale(1.06); }
}

.fmw-card__body{ padding:12px 14px 14px; }

.fmw-card__title{
	font-size:0.9rem;
	font-weight:600;
	color:var(--fmw-text);
	margin:0 0 8px;
	line-height:1.35;
	min-height:calc(1.35em * 2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.fmw-card__price{
	font-size:1.05rem;
	font-weight:800;
	color:var(--fmw-primary);
	margin-bottom:8px;
}

.fmw-card__price del{
	color:var(--fmw-text-secondary);
	font-weight:400;
	font-size:0.7em;
	text-decoration:line-through;
	margin-right:4px;
}

.fmw-card__price ins{ text-decoration:none; }

.fmw-card__stock{
	display:inline-flex;
	align-items:center;
	font-size:0.68rem;
	font-weight:600;
	padding:3px 9px;
	border-radius:var(--fmw-radius-pill);
	background:var(--fmw-bg-light);
}

.fmw-card__stock--in-stock{ color:#166534; }
.fmw-card__stock--on-order{ color:#92400E; }
.fmw-card__stock--out-of-stock{ color:#991B1B; }

.fmw-card__cta{
	padding:0 14px 14px;
	margin-top:auto;
}

.fmw-card__cta a{
	display:block;
	width:100%;
	text-align:center;
	font-weight:700;
	font-size:0.82rem;
	color:#fff !important;
	background:linear-gradient(135deg,var(--fmw-primary),#1D4ED8);
	border-radius:var(--fmw-radius-pill);
	padding:10px 14px;
	text-decoration:none !important;
	box-shadow:0 8px 18px rgba(37,99,235,0.24);
}

/* ---------------------------------------------------------------------
   Buttons (Continue Shopping, etc.)
   --------------------------------------------------------------------- */
.fmw-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:46px;
	padding:0 28px;
	border-radius:var(--fmw-radius-pill);
	font-weight:700;
	font-size:0.92rem;
	text-decoration:none !important;
	border:none;
	cursor:pointer;
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.fmw-btn--primary{
	background:linear-gradient(135deg,var(--fmw-primary),#1D4ED8);
	color:#fff !important;
	box-shadow:0 8px 18px rgba(37,99,235,0.28);
}

@media (hover:hover) and (pointer:fine){
	.fmw-btn:hover{ transform:translateY(-2px); }
}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.fmw-empty-state{
	max-width:420px;
	margin:60px auto;
	text-align:center;
	padding:20px;
	font-family:var(--fmw-font);
}

.fmw-empty-state__illustration{
	width:160px;
	height:auto;
	margin:0 auto 20px;
	display:block;
}

.fmw-empty-state__title{
	font-size:1.25rem;
	font-weight:800;
	color:var(--fmw-text);
	margin:0 0 8px;
}

.fmw-empty-state__text{
	font-size:0.88rem;
	color:var(--fmw-text-secondary);
	margin:0 0 24px;
	line-height:1.6;
}

/* ---------------------------------------------------------------------
   Guest loading state
   --------------------------------------------------------------------- */
.fmw-loading-state{
	max-width:420px;
	margin:80px auto;
	text-align:center;
	font-family:var(--fmw-font);
	color:var(--fmw-text-secondary);
	font-size:0.88rem;
}

.fmw-spinner{
	width:32px;
	height:32px;
	border-radius:50%;
	border:3px solid var(--fmw-border);
	border-top-color:var(--fmw-primary);
	margin:0 auto 14px;
	animation:fmw-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce){
	.fmw-spinner{ animation-duration:2s; }
	.fmw-card, .fmw-heart, .fmw-heart svg, .fmw-card__media img{ transition:none !important; }
}