/*
 * Shop / category card + header treatment (client request, 2026-06-23).
 *
 * Replicates the design-preview branch's matted product cards and category
 * header box EXACTLY — cream card, soft shadow "ring", rounded corners, gold
 * accents, navy header heading, floral watermark — with ONE exception: the
 * typography is left untouched (client is not making font changes at this
 * time). Every font-family / font-size / font-weight / font-style /
 * letter-spacing / text-transform from the preview rules has been removed so
 * the current site fonts render; colour, background, border, shadow, radius,
 * spacing and layout are carried over as-is.
 *
 * Loaded after production/style.css on shop + product taxonomy pages via
 * functions-shop-styling.php. Scoped to .products-content-area (the main
 * archive grid) + .term-description (the category header) so related /
 * cross-sell strips are untouched.
 *
 * Why the grid swap: the float grid builds its gutters from each li.product's
 * side-padding, so a card skin on the li would swallow the gaps. CSS grid on
 * this one container lets `gap` own the gutters. Column counts mirror the
 * current float layout (2 / 3 / 4 across).
 */

/* --- Tokens (from design-preview; font tokens intentionally omitted) ------ */
: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 */
.products-content-area ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 28px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* WooCommerce's clearfix ::before/::after become stray grid items — drop them */
.products-content-area ul.products::before,
.products-content-area ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 769px) {
	.products-content-area ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.products-content-area ul.products { grid-template-columns: repeat(4, 1fr); }
}

.products-content-area ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 14px 12px 0 !important; /* breathing room inside the mini-stage */
}
/* gentle editorial rhythm: alternate columns drop 24px on desktop archives */
@media (min-width: 1024px) {
	.products-content-area ul.products li.product:nth-child(even) { padding-top: 24px !important; }
}

/* mini-stage: matted-presentation card (same language as the preview) */
.products-content-area 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);
}
.products-content-area 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 */
.products-content-area 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);
}
.products-content-area ul.products li.product:hover:after {
	border-color: rgba(182, 146, 79, .45);
}

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

.products-content-area 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);
}
.products-content-area ul.products li.product:hover a img {
	transform: scale(1.025);
	box-shadow: 0 22px 44px -26px rgba(35, 78, 118, .4);
}

.products-content-area ul.products li.product .woocommerce-LoopProduct-link-wrap {
	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 */
.products-content-area ul.products li.product h3,
.products-content-area ul.products li.product h2 {
	color: var(--kf-ink);
	margin-bottom: 2px;
	transition: color .18s var(--kf-ease);
}
.products-content-area ul.products li.product:hover h3,
.products-content-area ul.products li.product:hover h2 { color: var(--kf-blue); }

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

/* --- Header (category term description): preview cream box, tighter margins */
.term-description {
	background: var(--kf-paper);
	border: 0;
	border-radius: 16px;
	box-shadow: var(--kf-ring);
	color: var(--kf-ink-soft);
	margin: 14px 0 16px;     /* tightened a bit from preview's 26px 0 14px */
	padding: 18px 26px 16px; /* tightened a bit from preview's 26px 32px 20px */
	position: relative;
	overflow: hidden;
}
.term-description:after {
	content: '\eaee';
	font-family: 'icomoon'; /* decorative icon glyph, not text type */
	position: absolute;
	font-size: 200px;
	line-height: 1;
	right: -44px;
	bottom: -54px;
	color: rgba(182, 146, 79, .07);
	transform: rotate(12deg);
	pointer-events: none;
}
/* current font kept; preview navy colour only */
.term-description h2,
.term-description h2 span,
.term-description h2 strong {
	color: var(--kf-navy) !important;
}
.term-description img.alignleft {
	border-radius: var(--kf-radius-sm);
	margin: 4px 18px 8px 0;
}