/**
 * MF Product Grid — Component Styles
 * Loaded into Shadow DOM via styleResourceCodes
 */

/* ============================================================
   Slide host element
   ============================================================ */
mf-product-card {
	display: block;
}

.mf-product-card {
	display: block;
	text-align: center;
}

/* ============================================================
   Image link wrapper
   ============================================================ */
.mf-product-card__image-link {
	display: block;
	text-decoration: none;
}

/* ============================================================
   Image container
   Fixed 480:500 aspect ratio, gray background, no overflow
   Matches legacy /resize/exact/480x500/ crop behavior
   ============================================================ */
.mf-product-card__image-container {
	position: relative;
	background-color: #f5f5f5;
	width: 100%;
	aspect-ratio: 480 / 500;
	overflow: hidden;
}

/* ============================================================
   Product images — fill container exactly, no padding
   Use cover to match the legacy "exact" crop behavior
   ============================================================ */
.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;
}

/* ============================================================
   Hover image — fades in on mouseenter
   ============================================================ */
.mf-product-card__image--hover {
	opacity: 0;
}

.mf-product-card__image-container:hover .mf-product-card__image--main {
	opacity: 0;
}

.mf-product-card__image-container:hover .mf-product-card__image--hover {
	opacity: 1;
}

/* ============================================================
   Product name — Adobe Garamond, centered
   ============================================================ */
.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;
}

/* ============================================================
   Product flags — CSS triangle matching legacy .product-item-flag
   ============================================================ */
.mf-product-flag {
	font-family: futura-pt, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 11pt;
	letter-spacing: 1px;
	color: #fff;
	margin-top: 10px;
	margin-left: 10px;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 66px 26px 0;
	border-color: transparent #a83338 #a83338 transparent;
	line-height: 0;
	text-transform: uppercase;
	pointer-events: none;
}

.mf-product-flag span {
	position: relative;
	left: 18px;
	top: 13px;
	display: inline-block;
	width: 100%;
}

.mf-product-flag--new {
	color: #000;
	border-color: transparent #99d9e9 #99d9e9 transparent;
}

.mf-product-flag--sale {
	border-color: transparent #a83338 #a83338 transparent;
}

/* ============================================================
   Section button container
   ============================================================ */
.mf-product-grid__section-button {
	display: flex;
	justify-content: center;
	margin-top: 2.5em;
}