/*
 * Afrizandu Wishlist Page (EN) — styles
 *
 * Colors and typography intentionally inherit from the active theme.
 * Woodmart exposes its palette and fonts as CSS custom properties;
 * every rule below reads those variables first and only falls back
 * to a neutral default when the variable is not defined.
 */

.afz-wishlist {
	width: 100%;
	max-width: 1222px;
	margin: 0 auto;
	padding: 10px 0 50px;
}

/* ------------------------------------------------------------------
 * Page header
 * ---------------------------------------------------------------- */

.afz-wishlist__head {
	text-align: center;
	padding: 30px 15px 0;
	margin-bottom: 40px;
}

.afz-wishlist__title {
	font-family: var(--wd-title-font, inherit);
	color: var(--wd-title-color, #2d2a2a);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.2;
	margin: 0 0 10px;
}

.afz-wishlist__subtitle {
	font-family: var(--wd-text-font, inherit);
	color: var(--wd-text-color, #767676);
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto;
}

.afz-wishlist__head::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 22px auto 0;
	border-radius: 2px;
	background-color: var(--wd-primary-color, #83b735);
}

/* ------------------------------------------------------------------
 * Wishlist content (wraps the Woodmart wishlist output)
 * ---------------------------------------------------------------- */

.afz-wishlist__content {
	padding: 0 15px;
}

/* Slightly stronger product titles inside the wishlist grid. */
.afz-wishlist .wd-entities-title,
.afz-wishlist .product-title {
	font-family: var(--wd-entities-title-font, var(--wd-title-font, inherit));
}

/* Remove-from-wishlist control: highlight with the theme accent. */
.afz-wishlist .wd-remove-btn:hover,
.afz-wishlist .woodmart-remove-btn:hover {
	color: var(--wd-primary-color, #83b735);
}

/* ------------------------------------------------------------------
 * Empty state (Woodmart empty-wishlist block) + fallback notice
 * ---------------------------------------------------------------- */

.afz-wishlist .wd-empty-page,
.afz-wishlist .wd-empty-wishlist,
.afz-wishlist .woodmart-empty-page,
.afz-wishlist__unavailable {
	text-align: center;
	padding: 50px 20px 60px;
	border: 1px solid rgba(129, 129, 129, 0.2);
	border-radius: var(--wd-brd-radius, 8px);
	background-color: rgba(129, 129, 129, 0.04);
}

.afz-wishlist .wd-empty-page p,
.afz-wishlist .wd-empty-wishlist p,
.afz-wishlist__unavailable p {
	font-family: var(--wd-text-font, inherit);
	color: var(--wd-text-color, #767676);
	font-size: 16px;
	margin-bottom: 25px;
}

/* Fallback button mirrors Woodmart's accented button look while
 * still reading its colors from the theme variables. */
.afz-wishlist__btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: var(--btn-accented-brd-radius, var(--wd-brd-radius, 0));
	background-color: var(--btn-accented-bgcolor, var(--wd-primary-color, #83b735));
	color: var(--btn-accented-color, #fff);
	font-family: var(--wd-text-font, inherit);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.afz-wishlist__btn:hover {
	color: var(--btn-accented-color-hover, #fff);
	background-color: var(--btn-accented-bgcolor-hover, var(--wd-primary-color-hover, var(--wd-primary-color, #6fa02b)));
	opacity: 0.92;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------
 * Responsive refinements
 * (the Woodmart product grid is already responsive; these rules
 *  tune spacing and typography on smaller screens)
 * ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.afz-wishlist {
		padding-bottom: 40px;
	}

	.afz-wishlist__head {
		margin-bottom: 32px;
	}
}

@media (max-width: 768px) {
	.afz-wishlist__head {
		padding-top: 20px;
		margin-bottom: 26px;
	}

	.afz-wishlist .wd-empty-page,
	.afz-wishlist .wd-empty-wishlist,
	.afz-wishlist__unavailable {
		padding: 40px 16px 46px;
	}
}

@media (max-width: 480px) {
	.afz-wishlist__head::after {
		margin-top: 16px;
	}

	.afz-wishlist__btn {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
}