/* Rodelle Suggested Products widget */

.rodelle-suggested-products {
	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

.rodelle-sp__title {
	font-family: "DM Serif Display", serif;
	color: #fff;
	font-size: 1.875rem;
	font-weight: 700;
	margin: 0 0 2.5rem;
	text-align: center;
	line-height: 1.2;
}

/* Grid */

.rodelle-sp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.rodelle-sp__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rodelle-sp__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Phones: inset the card grid 12px inside the page gutters (the theme's
   main wrapper pads 24px each side) so the gray cards sit narrower than
   the headings, per client request. Scoped to the grid so surrounding
   headings keep the normal gutter. */
@media (max-width: 767.98px) {
	.rodelle-sp__grid {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* Card */

.rodelle-sp__card {
	margin: 0;
	padding: 0;
	position: relative;
	background: #edf2f7;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rodelle-sp__card:hover,
.rodelle-sp__card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.rodelle-sp__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	padding: 1.25rem 1rem;
}

.rodelle-sp__badge {
	position: absolute;
	top: 10px;
	left: 0;
	background: #ff6e41;
	color: #fff;
	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.4rem 1.5rem;
	z-index: 1;
}

.rodelle-sp__image-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 220px;
	margin-top: 1.5rem;
}

/* The img fills the wrap with explicit dimensions rather than max-width/
   max-height percentages: Safari doesn't treat the wrap's aspect-ratio-derived
   height as definite, so a percentage max-height resolves to nothing and tall
   portrait images overflow the card. */
.rodelle-sp__image-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.rodelle-sp__image-wrap--empty {
	background: #e5e5e5;
}

.rodelle-sp__name {
	font-family: "DM Serif Display", serif;
	color: #21464f;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0.5rem 0 0;
	text-align: center;
}

/* Bazaarvoice inline stars. min-height ≈ the rendered BV widget height so
   the card doesn't jump when bv.js paints; the div only exists for
   products that have a BV ID, so unrated cards reserve nothing. */
.rodelle-sp__rating {
	min-height: 24px;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rodelle-sp__tagline {
	color: #606060;
	font-size: 1rem;
	line-height: 1.4;
	margin: 0.5rem 0 0;
	text-align: center;
}

.rodelle-sp__cta {
	display: inline-block;
	margin-top: 1.5rem;
	background: #21464f;
	color: #fff;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.625rem 1.25rem;
	border-radius: 0.375rem;
	transition: background 0.2s ease;
}

.rodelle-sp__link:hover .rodelle-sp__cta,
.rodelle-sp__link:focus .rodelle-sp__cta {
	background: #ff703c;
	color: #000;
}