/* Wishlist Display for WPC Smart Wishlist
   Uses WooCommerce's standard product template (your real product images),
   styled as clean warm cards that match the #3d3424 buttons. */

.wwd {
	--wwd-button: #3d3424;
	--wwd-on-button: #fff;
	--wwd-text: #2b261c;
	--wwd-muted: #857b6a;
	--wwd-border: #ebe5da;
	--wwd-line: color-mix(in srgb, currentColor 14%, transparent);
	--wwd-soft: #f7f4ee;
	--wwd-card: #fff;
	--wwd-radius: 16px;
	--wwd-cols: 4;
	margin: 0 0 2.5em;
	direction: rtl;
	color: var(--wwd-text);
	font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.wwd h2,
.wwd h3,
.wwd p,
.wwd .price,
.wwd .button,
.wwd button {
	font-family: inherit;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.wwd .wwd__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25em 1em;
	margin: 0 0 1.5em;
	padding-bottom: .9em;
	border-bottom: 1px solid var(--wwd-line);
	text-align: right;
}
.wwd .wwd__head[hidden] { display: none; }
.wwd .wwd__title { margin: 0; font-size: 1.6em; line-height: 1.2; }
.wwd .wwd__count { margin: 0; color: var(--wwd-muted); font-size: .95em; }

/* ------------------------------------------------------------------
   Grid (overrides the theme's float columns so spacing is even)
   ------------------------------------------------------------------ */
.wwd ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--wwd-cols), minmax(0, 1fr));
	gap: 28px 22px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.wwd ul.products::before,
.wwd ul.products::after { content: none !important; display: none !important; }

@media (max-width: 1024px) {
	.wwd ul.products { grid-template-columns: repeat(min(var(--wwd-cols), 3), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.wwd ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}

/* ------------------------------------------------------------------
   Card
   ------------------------------------------------------------------ */
.wwd ul.products li.product.wwd__item {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 16px !important;
	overflow: hidden;
	border: 1px solid var(--wwd-border);
	border-radius: var(--wwd-radius);
	background: var(--wwd-card);
	text-align: right;
	transition: opacity 220ms ease, transform 220ms ease; /* only for the remove fade-out */
}
.wwd ul.products li.product.wwd__item.is-removing {
	opacity: 0;
	transform: scale(.96);
	pointer-events: none;
}

/* The product link wraps image + title + price in the WooCommerce template */
.wwd li.wwd__item > a.woocommerce-LoopProduct-link,
.wwd li.wwd__item > a.woocommerce-loop-product__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* Image: your real photo, full width, natural proportions */
.wwd li.wwd__item img {
	display: block;
	width: 100% !important;
	height: auto;
	margin: 0 0 14px !important;
	border-radius: 0;
	box-shadow: none;
}

/* Title */
.wwd li.wwd__item .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 6px !important;
	padding: 0 16px !important;
	color: var(--wwd-text);
	font-size: 1.05em !important;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Price */
.wwd li.wwd__item .price {
	display: block;
	margin: 0 0 14px !important;
	padding: 0 16px;
	color: var(--wwd-text) !important;
	font-size: 1.05em !important;
	font-weight: 700;
}
.wwd li.wwd__item .price del {
	margin-inline-start: .35em;
	color: var(--wwd-muted);
	font-size: .85em;
	font-weight: 400;
	opacity: 1;
}
.wwd li.wwd__item .price ins { text-decoration: none; }

/* Rating (if your theme shows it) */
.wwd li.wwd__item .star-rating { margin: 0 16px 8px !important; font-size: .8em; }

/* Sale badge */
.wwd li.wwd__item .onsale {
	position: absolute;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0 !important;
	padding: .3em .8em;
	border-radius: 999px;
	background: var(--wwd-button);
	color: var(--wwd-on-button);
	font-size: .78em;
	font-weight: 700;
	line-height: 1.4;
}

/* Button: full width, bottom of the card */
.wwd li.wwd__item a.button,
.wwd li.wwd__item button.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 44px;
	margin: auto 16px 0 !important;
	padding: .55em 1em !important;
	border: 1px solid var(--wwd-button) !important;
	border-radius: 10px !important;
	background: var(--wwd-button) !important;
	color: var(--wwd-on-button) !important;
	font-size: .95em !important;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.wwd li.wwd__item a.button:hover,
.wwd li.wwd__item button.button:hover {
	border-color: color-mix(in srgb, var(--wwd-button) 82%, #fff) !important;
	background: color-mix(in srgb, var(--wwd-button) 82%, #fff) !important;
}
.wwd li.wwd__item a.button.loading { opacity: .65; }
.wwd li.wwd__item a.button.added::after { margin-inline-start: .4em; }
.wwd li.wwd__item .added_to_cart {
	display: block;
	margin: 8px 16px 0;
	color: var(--wwd-button);
	font-size: .88em;
	font-weight: 600;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WPC's own heart is not needed here: the × removes. */
.wwd .woosw-btn,
.wwd .woosw-btn-wrap { display: none !important; }

/* ------------------------------------------------------------------
   × remove: top-left corner of the product image.
   The script lines it up with the photo itself (whatever wraps it in
   your theme); these values are the starting position.
   ------------------------------------------------------------------ */
.wwd .wwd__remove {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--wwd-button);
	box-shadow: 0 2px 8px rgba(43, 38, 28, .16);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
.wwd .wwd__remove svg { width: 15px; height: 15px; }
.wwd .wwd__remove path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wwd .wwd__remove:hover { background: var(--wwd-button); color: var(--wwd-on-button); }
.wwd .wwd__remove:focus-visible,
.wwd .wwd__btn:focus-visible,
.wwd li.wwd__item a:focus-visible {
	outline: 2px solid var(--wwd-button);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   "Are you sure?" panel over the card
   ------------------------------------------------------------------ */
.wwd .wwd__confirm {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 12%;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	text-align: center;
	animation: wwd-fade 160ms ease;
}
.wwd .wwd__confirm-text {
	margin: 0;
	color: var(--wwd-text);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.wwd .wwd__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em;
	width: 100%;
}
.wwd .wwd__confirm-yes,
.wwd .wwd__confirm-no {
	flex: 1 1 7em;
	min-height: 40px;
	margin: 0;
	padding: .45em .9em;
	border: 1px solid var(--wwd-button);
	border-radius: 10px;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms ease;
}
.wwd .wwd__confirm-yes { background: var(--wwd-button); color: var(--wwd-on-button); }
.wwd .wwd__confirm-yes:hover { background: color-mix(in srgb, var(--wwd-button) 82%, #fff); }
.wwd .wwd__confirm-no { background: transparent; color: var(--wwd-button); }
.wwd .wwd__confirm-no:hover { background: var(--wwd-soft); }
.wwd .wwd__confirm-yes:focus-visible,
.wwd .wwd__confirm-no:focus-visible { outline: 2px solid var(--wwd-button); outline-offset: 2px; }
.wwd li.wwd__item.is-confirming .wwd__remove { visibility: hidden; }

@keyframes wwd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------ */
.wwd .wwd__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 3.5em 1.5em;
	border-radius: var(--wwd-radius);
	background: var(--wwd-soft);
	text-align: center;
}
.wwd .wwd__empty[hidden] { display: none; }
.wwd .wwd__empty-title {
	width: 100%;
	margin: 0 0 .35em;
	color: var(--wwd-text);
	font-size: 1.45em;
	font-weight: 700;
	text-align: center;
}
.wwd .wwd__empty-text {
	width: 100%;
	max-width: 26em;
	margin: 0 0 1.6em;
	color: var(--wwd-muted);
	font-size: 1.02em;
	line-height: 1.55;
	text-align: center;
}
.wwd .wwd__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12em;
	min-height: 46px;
	padding: .55em 1.6em;
	border: 1px solid var(--wwd-button);
	border-radius: 10px;
	background: var(--wwd-button);
	color: var(--wwd-on-button);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease;
}
.wwd .wwd__btn:hover {
	background: color-mix(in srgb, var(--wwd-button) 82%, #fff);
	color: var(--wwd-on-button);
}

.wwd .wwd__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.wwd ul.products li.product.wwd__item,
	.wwd .wwd__remove { transition: none; }
	.wwd .wwd__confirm { animation: none; }
}