/**
 * MF Listrak Recommendations — Component Styles
 * Reuses .mf-product-card classes for consistent product card appearance.
 * Grid layout driven by CSS custom properties set from PageBuilder settings.
 */

/* ============================================================
   Wrapper
   ============================================================ */
.mf-listrak-recs {
	display: block;
}

/* ============================================================
   Heading
   ============================================================ */
.mf-listrak-recs__heading {
	display: block;
	margin: 0 auto 2%;
}

/* ============================================================
   Product grid
   CSS custom properties --cols-desktop and --cols-mobile
   are set inline from instance data
   ============================================================ */
.mf-listrak-recs__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
	gap: 20px 16px;
}

@media screen and (min-width: 40em) {
	.mf-listrak-recs__grid {
		grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
	}
}

/* ============================================================
   Product card — same styles as mf-product-carousel
   Duplicated here so this component is self-contained
   ============================================================ */
.mf-product-card {
	display: block;
	text-align: center;
}

.mf-product-card__image-link {
	display: block;
	text-decoration: none;
}

.mf-product-card__image-container {
	position: relative;
	background-color: #f5f5f5;
	width: 100%;
	aspect-ratio: 480 / 500;
	overflow: hidden;
}

.mf-product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	transition: opacity 0.3s ease;
}

.mf-product-card__content {
	padding-top: 0.65em;
}

.mf-product-card__name {
	font-family: "adobe-garamond-pro", serif;
	font-size: 19px;
	line-height: 1.26em;
	font-weight: 400;
	text-align: center;
}

.mf-product-card__name a {
	color: #000;
	text-decoration: none;
}

.mf-product-card__name a:hover {
	text-decoration: underline;
}

/* ============================================================
   Section button
   ============================================================ */
.mf-listrak-recs__section-button {
	display: flex;
	margin-top: 2.5em;
}

.mf-listrak-recs__section-button--left   { justify-content: flex-start; }
.mf-listrak-recs__section-button--center { justify-content: center; }
.mf-listrak-recs__section-button--right  { justify-content: flex-end; }