/* ==========================================================================
   Calm Wolf — Wishlist card grid
   Scoped under .cwwd-wishlist so it doesn't affect anything else on the
   page (this plugin only overrides the wishlist shortcode's own templates).
   ========================================================================== */

/* "My wishlist" heading — emptied via the yith_wcwl_wishlist_title filter,
   this just makes sure its (now empty) wrapper takes up no visible space. */
#yith-wcwl-form .wishlist-title-container {
	display: none;
}

.cwwd-wishlist {
	--cwwd-ink: #201d1a;
	--cwwd-border: #e6e6e0;
	--cwwd-muted: #6f6a5f;

	max-width: 1200px;
	margin: 0;
}

.cwwd-wishlist *,
.cwwd-wishlist *::before,
.cwwd-wishlist *::after {
	box-sizing: border-box;
}

.cwwd-wishlist__grid {
	display: grid;
	/* Fixed max (280px), not 1fr: a "1fr" column stretches to fill any
	   leftover row space, which looked fine with several items but blew a
	   single card up to the full container width. Capping the column size
	   keeps every card a consistent, sane size regardless of item count —
	   extra row space just stays empty instead of feeding into the card —
	   and centering the row keeps things looking intentional whether there's
	   one card or a dozen. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
	justify-content: start;
	gap: 24px;
}

.cwwd-wishlist__empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--cwwd-muted);
	font-size: 16px;
}

/* -- Card ------------------------------------------------------------------ */

.cwwd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cwwd-border);
	overflow: hidden;
}

/* Product images come in wildly different shapes — the wishlist currently
   holds ratios from 2.38 (a wide, flat box shot) through 0.53 (a tall
   bottle), though most are square. With height:auto each card was as tall as
   its own image, so titles, prices and buttons landed at different heights
   down the row and short images left ragged white gaps beneath them.
   Pinning the frame to 1:1 — the ratio most of the catalogue already uses,
   so those fill it edge to edge — gives every card an identical image box. */
.cwwd-card__image {
	display: block;
	background: #f6f4ee;
	line-height: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* Scoped under .cwwd-wishlist purely to win on specificity: WooCommerce's
   own ".woocommerce img" rule sets height:auto at the same (0,1,1) weight as
   a bare ".cwwd-card__image img", and woocommerce-layout.css is enqueued
   after this file — so the tie broke its way and the image kept its natural
   height, leaving overflow:hidden to crop the tall shots from the top
   instead of letterboxing them. The extra class settles it without
   !important. */
.cwwd-wishlist .cwwd-card__image img {
	width: 100%;
	height: 100%;
	display: block;
	/* contain, not cover: these are packshots, and filling the frame would
	   crop roughly half off the tall and wide ones — cutting through the
	   product and the logo. Letterboxing leaves the odd shapes whole and
	   pads them against the frame's own tint, which reads as deliberate
	   rather than as the accidental white space this replaces. */
	object-fit: contain;
}

.cwwd-card__body {
	padding: 16px 18px 18px;
	flex: 1 1 auto;
}

.cwwd-card__title {
	display: block;
	font-family: inherit !important;
	font-weight: 700;
	font-size: 19px;
	color: var(--cwwd-ink);
	text-decoration: none;
	margin-bottom: 8px;
}

.cwwd-card__title:hover {
	text-decoration: underline;
}

.cwwd-card__price {
	font-family: inherit !important;
	font-size: 17px;
	font-weight: 700;
	color: var(--cwwd-ink);
}

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

.cwwd-card__price del {
	color: var(--cwwd-muted);
	font-weight: 400;
	margin-right: 6px;
}

.cwwd-card__variation {
	margin-top: 6px;
	font-size: 12px;
	color: var(--cwwd-muted);
}

.cwwd-card__stock {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #b13b3b;
}

/* -- Action bar -------------------------------------------------------------- */

.cwwd-card__actions {
	display: flex;
	align-items: stretch;
	background: var(--cwwd-ink);
}

.cwwd-card__actions a,
.cwwd-card__actions a:link,
.cwwd-card__actions a:visited {
	color: #fff !important;
}

/* WooCommerce core styles any a.remove as a red circular "delete" icon
   (a.remove{border-radius:100%;color:var(--wc-red)!important} plus a red
   a.remove:hover background) — our remove link keeps the "remove" class for
   AJAX compatibility, so its selector (element+class) is more specific than
   a single .cwwd-card__remove class and was winning despite our !important.
   Repeating the class here (a.remove.cwwd-card__remove) matches that
   specificity and wins outright. */
a.remove.cwwd-card__remove {
	flex: 0 0 52px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	font-size: inherit !important;
	line-height: normal !important;
	font-weight: 400 !important;
	border-radius: 0 !important;
	color: #fff !important;
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

a.remove.cwwd-card__remove:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.12) !important;
}

.cwwd-card__remove svg {
	width: 18px;
	height: 18px;
	fill: #fff !important;
	stroke: #fff !important;
	color: #fff !important;
}

.cwwd-card__cart {
	flex: 1 1 auto;
	display: flex;
}

.cwwd-card__cart .button,
.cwwd-card__cart a.button,
.cwwd-card__cart a.add_to_cart_button {
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: transparent !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 14px 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cwwd-card__cart .button:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

.cwwd-card__cart .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* -- Add All to Cart --------------------------------------------------------- */

.cwwd-wishlist__footer {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

.cwwd-add-all-btn {
	appearance: none !important;
	border: none !important;
	border-radius: 0 !important;
	background: #1a1a1a !important;
	color: #fff !important;
	padding: 16px 48px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cwwd-add-all-btn:hover {
	background: #000 !important;
}

.cwwd-add-all-btn.is-loading {
	opacity: 0.6;
	cursor: default;
}

/* -- Pagination --------------------------------------------------------------- */

.cwwd-wishlist__pagination {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* -- Responsive --------------------------------------------------------------- */

@media (max-width: 600px) {
	.cwwd-wishlist__grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
		justify-content: start;
		gap: 14px;
	}

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

	.cwwd-card__title,
	.cwwd-card__price {
		font-size: 13px;
	}
}