/**
 * Products Feed block — front + editor styles.
 * Mirrors the Events Feed block, bound to the filnation-sites theme tokens
 * (theme.json palette / fonts / spacing) with safe fallbacks.
 */

.fnkit-products {
	--fnkit-gap: var(--wp--preset--spacing--40, 1.25rem);
}

.fnkit-products__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	margin: 0 0 var(--wp--preset--spacing--40, 1.25rem);
	font-weight: var(--fnkit-heading-weight);
	text-transform: var(--fnkit-heading-case);
	letter-spacing: var(--fnkit-heading-tracking);
	font-size: var(--fnkit-heading-size);
}

.fnkit-products__grid {
	display: grid;
	gap: var(--fnkit-gap);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.fnkit-products--cols-2 .fnkit-products__grid,
	.fnkit-products--cols-3 .fnkit-products__grid,
	.fnkit-products--cols-4 .fnkit-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.fnkit-products--cols-3 .fnkit-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.fnkit-products--cols-4 .fnkit-products__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fnkit-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40, 1.25rem);
	border: 1px solid var(--wp--preset--color--border, #d9dadb);
	border-radius: 6px;
	background: var(--wp--preset--color--bg, transparent);
	overflow: hidden;
}

/* Featured image: full-bleed across the top of the card, cropped to a
 * consistent shape per [[image-standardization-rule]]. */
.fnkit-product__media {
	position: relative;
	margin: calc(-1 * var(--wp--preset--spacing--40, 1.25rem));
	margin-bottom: var(--wp--preset--spacing--40, 1.25rem);
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f3f3f4);
}
.fnkit-product__img,
.fnkit-product__ph {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.fnkit-product__img { transition: transform 0.3s ease; }
.fnkit-product--has-media:hover .fnkit-product__img { transform: scale(1.03); }
/* Branded placeholder for products without a photo — keeps the grid even. */
.fnkit-product__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient( 135deg,
			color-mix( in srgb, var(--wp--preset--color--accent, #c8102e) 16%, var(--wp--preset--color--surface, #f3f3f4) ),
			var(--wp--preset--color--surface, #f3f3f4) 72% );
	color: color-mix( in srgb, var(--wp--preset--color--accent, #c8102e) 55%, var(--wp--preset--color--text, #14181f) );
}
.fnkit-product__ph svg { width: 34px; height: 34px; opacity: 0.7; }

/* Sold-out badge + dimmed media. */
.fnkit-product__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.15rem 0.5rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: color-mix( in srgb, var(--wp--preset--color--text, #14181f) 78%, transparent );
	border-radius: 3px;
}
.fnkit-product--oos .fnkit-product__img { opacity: 0.6; }

.fnkit-product__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fnkit-product__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
}
.fnkit-product__price-was {
	margin-left: 0.4rem;
	font-weight: 400;
	opacity: 0.6;
	color: var(--wp--preset--color--muted, #696b70);
}

.fnkit-product__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.15;
}

.fnkit-product__title a {
	color: var(--wp--preset--color--text, inherit);
	text-decoration: none;
}

.fnkit-product__title a:hover,
.fnkit-product__title a:focus {
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
	text-decoration: underline;
}

.fnkit-product__meta {
	margin: 0;
	color: var(--wp--preset--color--muted, #696b70);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.fnkit-products__empty {
	color: var(--wp--preset--color--muted, #696b70);
	font-style: italic;
}

/* Multi-select term groups (editor inspector only). */
.fnkit-termgroup { margin-bottom: 0.9rem; }
.fnkit-termgroup__label { font-weight: 600; margin: 0 0 0.3rem; }

/* Hand-picked picker (editor inspector only) — shares the events picker CSS. */
.fnkit-pick__label { font-weight: 600; margin: 0 0 0.4rem; }
.fnkit-pick__empty { opacity: 0.7; font-style: italic; margin: 0 0 0.6rem; }
.fnkit-pick__list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.fnkit-pick__row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.4rem; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; margin-bottom: 0.3rem; }
.fnkit-pick__title { font-size: 0.82rem; line-height: 1.2; }
.fnkit-pick__actions { display: inline-flex; flex: none; }
.fnkit-pick__results { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; max-height: 220px; overflow: auto; }
.fnkit-pick__add { justify-content: flex-start; text-align: left; height: auto; white-space: normal; }

/* "See more" CTA below the grid (button styled by blocks/appearance.css). */
.fnkit-products__cta {
	margin-top: var(--wp--preset--spacing--50, 2rem);
	text-align: center;
}

/* Layout: list — one column, wider rows; image as a fixed thumbnail on the left. */
.fnkit-products--list .fnkit-products__grid { grid-template-columns: 1fr !important; }
.fnkit-products--list .fnkit-product { flex-direction: row; gap: 1.25rem; align-items: stretch; }
.fnkit-products--list .fnkit-product__media { margin: 0; flex: none; width: min(200px, 38%); border-radius: 6px; }
.fnkit-products--list .fnkit-product__img,
.fnkit-products--list .fnkit-product__ph { aspect-ratio: 1 / 1; height: 100%; }
.fnkit-products--list .fnkit-product__body { justify-content: center; }

/* Layout: spotlight — a single, large featured product; image beside the details. */
.fnkit-products--spotlight .fnkit-products__grid { grid-template-columns: 1fr !important; }
.fnkit-products--spotlight .fnkit-product {
	padding: var(--wp--preset--spacing--50, 2rem);
	border-width: 2px;
	border-color: var(--wp--preset--color--accent, #c8102e);
}
.fnkit-products--spotlight .fnkit-product__title { font-size: var(--wp--preset--font-size--x-large, 2rem); }
.fnkit-products--spotlight .fnkit-product__img,
.fnkit-products--spotlight .fnkit-product__ph { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
	.fnkit-products--spotlight .fnkit-product--has-media { flex-direction: row; align-items: stretch; gap: var(--wp--preset--spacing--50, 2rem); }
	.fnkit-products--spotlight .fnkit-product__media { margin: 0; flex: 1 1 50%; border-radius: 6px; }
	.fnkit-products--spotlight .fnkit-product__img,
	.fnkit-products--spotlight .fnkit-product__ph { height: 100%; aspect-ratio: 1 / 1; }
	.fnkit-products--spotlight .fnkit-product__body { flex: 1 1 50%; justify-content: center; }
}