/**
 * Featured Products
 *
 * Design ref: design-preferences/css-exports/Home Page/featured-products.css
 */

.featured-products {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-heading-to-grid);
	/* Match Shop by Category: 1376 content, 32px gutters outside (not inside) */
	width: min(var(--shop-by-category-max), calc(100% - (2 * var(--section-inline-pad))));
	max-width: var(--shop-by-category-max);
	margin: 0 auto;
	padding: var(--home-section-gap) 0 0;
	box-sizing: border-box;
}

/* Figma: centered title+divider; View All absolute top-right (node 937:232) */
.featured-products__header {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.featured-products__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-heading-to-divider);
}

.featured-products__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--section-title-size);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--section-title-tracking);
	color: var(--color-heading);
	text-align: center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.featured-products__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 148px;
	height: 12px;
	line-height: 0;
}

.featured-products__divider svg {
	display: block;
	width: 148px;
	height: 12px;
}

.featured-products__view-all,
.featured-products__view-all:link,
.featured-products__view-all:visited {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: var(--view-all-line-height);
	letter-spacing: var(--view-all-tracking);
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.featured-products__view-all:hover,
.featured-products__view-all:focus,
.featured-products__view-all:active {
	color: var(--color-accent-hover);
	outline: none;
}

.featured-products__view-all svg {
	display: block;
	flex-shrink: 0;
}

.featured-products__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--featured-grid-gap);
	width: 100%;
}

.featured-products__card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--radius-product-card);
	overflow: hidden;
	transition: 0.25s ease;
	margin: 0;
}

.featured-products__card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.featured-products__image {
	position: relative;
	height: 280px;
	background: var(--color-bg-product-image);
	overflow: hidden;
}

.featured-products__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.featured-products__image-link img,
.featured-products__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.featured-products__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-accent);
}

.featured-products__wishlist,
.featured-products__image .yith-wcwl-add-to-wishlist {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3; /* above .featured-products__image-link */
	margin: 0;
	line-height: 0;
	pointer-events: auto;
}

.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-add-button,
.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse,
.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddresponse {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.featured-products__image .yith-wcwl-add-to-wishlist a,
.featured-products__image .yith-wcwl-add-to-wishlist a:link,
.featured-products__image .yith-wcwl-add-to-wishlist a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-icon-muted); /* Figma #918268 */
	text-decoration: none !important;
	line-height: 0;
	transition: color 0.2s ease;
}

.featured-products__image .yith-wcwl-add-to-wishlist a:hover,
.featured-products__image .yith-wcwl-add-to-wishlist a:focus,
.featured-products__image .yith-wcwl-add-to-wishlist a:active {
	color: var(--color-accent); /* Figma #B17915 */
	background: transparent;
	outline: none;
}

/* Icon-only: hide YITH text labels */
.featured-products__image .yith-wcwl-add-to-wishlist a span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Wishlist icon (YITH custom PNG Vector-2.png — same asset Home + PLP).
 * Must beat YITH style.css:
 *   .yith-wcwl-add-to-wishlist a.add_to_wishlist > img { max-width: 32px }
 *   .yith-wcwl-add-to-wishlist .add_to_wishlist img { width: 25px; height: auto }
 */
.featured-products__image .yith-wcwl-add-to-wishlist a.add_to_wishlist > img,
.featured-products__image .yith-wcwl-add-to-wishlist a.delete_item > img,
.featured-products__image .yith-wcwl-add-to-wishlist a.move_to_another_wishlist > img,
.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-icon,
.featured-products__image .yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg,
.featured-products__image .yith-wcwl-add-to-wishlist svg,
.featured-products__image .yith-wcwl-add-to-wishlist img {
	display: block;
	width: 24px;
	height: 24px;
	max-width: 24px;
	object-fit: contain;
	object-position: center;
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
}

.featured-products__image .yith-wcwl-add-to-wishlist.exists a,
.featured-products__image .yith-wcwl-add-to-wishlist a.delete_item {
	color: var(--color-accent);
}

.featured-products__card--sample .featured-products__image-link {
	min-height: 100%;
}

.featured-products__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 14px;
}

.featured-products__name,
.featured-products__name:link,
.featured-products__name:visited {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-heading);
	text-decoration: none;
	line-height: 26px;
}

.featured-products__name:hover,
.featured-products__name:focus,
.featured-products__name:active {
	color: var(--color-accent);
	outline: none;
}

.featured-products__price {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
	line-height: 26px;
}

.featured-products__price del {
	opacity: 0.55;
	font-weight: 500;
	margin-right: 6px;
}

.featured-products__price ins {
	text-decoration: none;
}

.featured-products__rating {
	display: flex;
	align-items: center;
	gap: 4px;
}

.featured-products__stars {
	display: flex;
	gap: 2px;
	color: var(--color-star);
}

.featured-products__star {
	display: block;
	opacity: 0.25;
}

.featured-products__star.is-filled {
	opacity: 1;
}

.featured-products__reviews {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 30px;
	color: var(--color-heading);
}

/* The section renders a fixed 6 cards, so column counts that divide 6 avoid a
   stranded last row — 4 columns leaves 2 orphans. */
/*
 * Home-grid card metrics (Figma node 18:527: a 92.667px content block).
 * Scoped to .featured-products__grid because product-card.php is shared with
 * the PLP (.shop-results) and related products, whose card heights are tuned
 * for untrimmed line boxes — see the --shop-card-info-height note in tokens.css.
 */
.featured-products__grid .featured-products__name,
.featured-products__grid .featured-products__name:link,
.featured-products__grid .featured-products__name:visited {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	/* The trimmed box ends on the baseline, so the `overflow: hidden` the
	   ellipsis needs would clip descenders — "Hijab" rendering as "Hiiab".
	   Pad the clip box past the baseline, then pull it back out of layout. */
	padding-bottom: 5px;
	margin-bottom: -5px;
}

.featured-products__grid .featured-products__price {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.featured-products__grid .featured-products__reviews {
	letter-spacing: 0.36px;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 18:531: 13.333px glyphs on a 2px gap = a 74.667px star row. */
.featured-products__grid .featured-products__star {
	width: 13.333px;
	height: 12.667px;
}

@media (max-width: 1200px) {
	.featured-products__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.featured-products__image {
		height: 320px;
	}
}

@media (max-width: 991px) {
	.featured-products {
		width: min(var(--shop-by-category-max), calc(100% - 48px));
		padding-left: 0;
		padding-right: 0;
	}

	.featured-products__header {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	/* Repeat the :link/:visited pair — the base rule (lines above) declares
	   position: absolute on that same compound selector, which outranks a
	   plain `.featured-products__view-all` override on specificity alone. */
	.featured-products__view-all,
	.featured-products__view-all:link,
	.featured-products__view-all:visited {
		position: static;
		padding: 0;
	}

	.featured-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.featured-products__image {
		height: 240px;
	}
}

@media (max-width: 575px) {
	.featured-products {
		width: min(var(--shop-by-category-max), calc(100% - 32px));
		padding: 32px 0 0;
	}

	.featured-products__title {
		font-size: 28px;
	}

	/* Two-up on phones: a single column pushed the page past 7000px and left
	   each card mostly empty. 230px keeps the desktop 209:280 image ratio at
	   the narrower card width. */
	.featured-products__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.featured-products__image {
		height: 230px;
	}
}