/*
 * Home page product card treatment (client request, 2026-06-30).
 *
 * Brings the same matted "little box" product cards used on the shop /
 * category archives (css/shop-cards.css) to the home page's three product
 * bands — Featured, Birthday and Funeral Flowers (Sympathy). Cream card,
 * soft shadow "ring", rounded corners, gold mat line on hover, image radius.
 * Typography is left untouched, matching the shop-cards decision (client is
 * not making font changes at this time): only colour, background, border,
 * shadow, radius, spacing and layout are carried over.
 *
 * Loaded after production/style.css on the front page only, via
 * functions-homepage-styling.php. Scoped to the three home product bands so
 * nothing else on the page is affected.
 *
 * Why the grid swap: like the shop grid, each band builds its column gutters
 * from li.product's side-padding (with a matching negative margin on the ul).
 * A card skin on the li would swallow those gutters, so we switch the band's
 * ul.products to CSS grid and let `gap` own the gutters. The column counts
 * mirror the theme's existing responsive float layout exactly (1 / 2 / 3 / 4
 * across at base / 544 / 768 / 1024px). The theme's nth-last-child show-N
 * rules (reveal just enough products to fill the current row) keep working —
 * hidden li.product items stay display:none and drop out of the grid.
 */

/* --- Tokens (identical to shop-cards.css; self-contained for the home page) */
:root {
	--kf-paper: #faf7f1;
	--kf-ink: #262c33;
	--kf-ink-soft: #4d5560;
	--kf-muted: #79828c;
	--kf-navy: #234e76;
	--kf-blue: #3a73a8;
	--kf-gold: #b6924f;
	--kf-radius-sm: 10px;
	--kf-ring: 0 0 0 1px rgba(38, 44, 51, .07);
	--kf-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Product grid: float -> CSS grid so the matted cards keep their gutters */
.section-featured ul.products,
.section-birthday ul.products,
.section-sympathy ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 28px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* WooCommerce's clearfix ::before/::after become stray grid items — drop them */
.section-featured ul.products::before,
.section-featured ul.products::after,
.section-birthday ul.products::before,
.section-birthday ul.products::after,
.section-sympathy ul.products::before,
.section-sympathy ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 544px) {
	.section-featured ul.products,
	.section-birthday ul.products,
	.section-sympathy ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.section-featured ul.products,
	.section-birthday ul.products,
	.section-sympathy ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.section-featured ul.products,
	.section-birthday ul.products,
	.section-sympathy ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* Unfloat the cells and let grid own sizing/gutters (theme floats + width %) */
.section-featured ul.products li.product,
.section-birthday ul.products li.product,
.section-sympathy ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 14px 12px 0 !important; /* breathing room inside the mini-stage */
}

/* mini-stage: matted-presentation card (same language as the shop cards) */
.section-featured ul.products li.product,
.section-birthday ul.products li.product,
.section-sympathy ul.products li.product {
	background: radial-gradient(120% 115% at 50% 42%, #ffffff 0%, #ffffff 55%, rgba(247, 240, 226, .85) 100%);
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--kf-ring), 0 18px 38px -28px rgba(35, 78, 118, .32);
	position: relative;
	transition: box-shadow .25s var(--kf-ease);
}
.section-featured ul.products li.product:hover,
.section-birthday ul.products li.product:hover,
.section-sympathy ul.products li.product:hover {
	box-shadow: var(--kf-ring), 0 26px 48px -28px rgba(35, 78, 118, .42);
}
/* gold mat line wakes on hover */
.section-featured ul.products li.product:after,
.section-birthday ul.products li.product:after,
.section-sympathy ul.products li.product:after {
	content: '';
	position: absolute;
	inset: 9px;
	border: 1px solid rgba(182, 146, 79, 0);
	border-radius: 8px;
	pointer-events: none;
	transition: border-color .25s var(--kf-ease);
}
.section-featured ul.products li.product:hover:after,
.section-birthday ul.products li.product:hover:after,
.section-sympathy ul.products li.product:hover:after {
	border-color: rgba(182, 146, 79, .45);
}

/* Equal-height interiors: image top, title/price block fills the rest */
.section-featured ul.products li.product a.woocommerce-LoopProduct-link,
.section-birthday ul.products li.product a.woocommerce-LoopProduct-link,
.section-sympathy ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.section-featured ul.products li.product a img,
.section-birthday ul.products li.product a img,
.section-sympathy ul.products li.product a img {
	background: #fff;
	border-radius: 10px;
	margin: 0;
	width: 100%;
	max-width: 100%;
	transition: transform .4s var(--kf-ease), box-shadow .4s var(--kf-ease);
}
.section-featured ul.products li.product:hover a img,
.section-birthday ul.products li.product:hover a img,
.section-sympathy ul.products li.product:hover a img {
	transform: scale(1.025);
	box-shadow: 0 22px 44px -26px rgba(35, 78, 118, .4);
}

.section-featured ul.products li.product .woocommerce-LoopProduct-link-wrap,
.section-birthday ul.products li.product .woocommerce-LoopProduct-link-wrap,
.section-sympathy ul.products li.product .woocommerce-LoopProduct-link-wrap {
	flex: 1;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin-top: 0 !important;
	padding: 12px 14px 16px !important;
	text-align: center;
}

/* Title — current font kept; preview colour + hover only */
.section-featured ul.products li.product h3,
.section-featured ul.products li.product h2,
.section-birthday ul.products li.product h3,
.section-birthday ul.products li.product h2,
.section-sympathy ul.products li.product h3,
.section-sympathy ul.products li.product h2 {
	color: var(--kf-ink);
	margin-bottom: 2px;
	transition: color .18s var(--kf-ease);
}
.section-featured ul.products li.product:hover h3,
.section-featured ul.products li.product:hover h2,
.section-birthday ul.products li.product:hover h3,
.section-birthday ul.products li.product:hover h2,
.section-sympathy ul.products li.product:hover h3,
.section-sympathy ul.products li.product:hover h2 { color: var(--kf-blue); }

/* Price — current font kept; preview colour only */
.section-featured ul.products li.product .price,
.section-birthday ul.products li.product .price,
.section-sympathy ul.products li.product .price { color: var(--kf-gold); }
.section-featured ul.products li.product .price del,
.section-birthday ul.products li.product .price del,
.section-sympathy ul.products li.product .price del { color: var(--kf-muted); }
.section-featured ul.products li.product .price ins,
.section-birthday ul.products li.product .price ins,
.section-sympathy ul.products li.product .price ins { text-decoration: none; }