/**
 * Falcon Recommend — front-end.
 *
 * Structural only. Colours and sizes come from custom properties set on
 * .fr-reco by the renderer (from the Styling tab), each with an inline
 * fallback here so a value always resolves even if the inline block is cached
 * away. Default layout is a carousel on every screen: the number of visible
 * cards is --fr-columns, and the rest scroll. A grid variant is available via
 * .fr-reco--grid.
 */

.fr-reco {
	margin: 28px 0;
}

/* Block heading. Higher specificity + !important so the configured size wins
   over the theme's global h2 typography (which otherwise out-specifies a
   single class and is why the size looked stuck). */
.fr-reco h2.fr-reco__heading {
	font-size: var(--fr-heading-size, 20px) !important;
	margin: 0 0 var(--fr-heading-gap, 14px);
	line-height: 1.2;
}

.fr-reco__viewport {
	position: relative;
}

/* --- Carousel (default) --------------------------------------------------- */

.fr-reco__track {
	display: flex;
	gap: var(--fr-gap, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.fr-reco__track::-webkit-scrollbar {
	display: none;
}

/* Each card takes an equal share of the viewport width for the configured
   number of visible columns, accounting for the gaps between them. Change the
   column count and the card width follows. */
.fr-reco__track > .fr-reco-card {
	flex: 0 0 calc((100% - (var(--fr-columns, 4) - 1) * var(--fr-gap, 16px)) / var(--fr-columns, 4));
	scroll-snap-align: start;
	min-width: 0;
}

/* --- Grid variant --------------------------------------------------------- */

.fr-reco--grid .fr-reco__track {
	display: grid;
	grid-template-columns: repeat(var(--fr-columns, 4), minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
}

.fr-reco--grid .fr-reco__track > .fr-reco-card {
	flex: initial;
}

/* --- Card ----------------------------------------------------------------- */

.fr-reco-card {
	min-width: 0;
}

.fr-reco-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--fr-card-bg, #ffffff);
	border: 1px solid var(--fr-card-border, #e2e2e2);
	border-radius: var(--fr-radius, 10px);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fr-reco-card__link:hover,
.fr-reco-card__link:focus-visible {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.fr-reco-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f4f4f4;
}

/* Absolutely filled inside the square box. In normal flow a portrait source
   image with height:100% can out-argue aspect-ratio and stretch the card
   taller than its neighbours; taking the image out of flow makes the 1:1 box
   authoritative and object-fit crops to it, every time. */
.fr-reco-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fr-reco-card__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 999px;
	background: var(--fr-badge-bg, #8a1114);
	color: var(--fr-badge-color, #ffffff);
}

/* Design name. Specificity + !important so the configured size is authoritative
   over the theme. */
.fr-reco .fr-reco-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 10px 12px 2px;
	font-size: var(--fr-title-size, 14px) !important;
	font-weight: var(--fr-title-weight, 700) !important;
	line-height: 1.35;
	color: var(--fr-title-color, inherit);
}

/* Price + sale. The container size is authoritative; the struck-out old price
   inherits the size and is just dimmed. */
.fr-reco .fr-reco-card__price {
	display: block;
	padding: 4px 12px 12px;
	margin-top: auto;
	font-weight: 700;
	font-size: var(--fr-price-size, 15px) !important;
}

.fr-reco .fr-reco-card__price del {
	opacity: 0.6;
	font-weight: 400;
	margin-right: 4px;
}

.fr-reco .fr-reco-card__price ins {
	text-decoration: none;
}

/* --- Nav buttons ---------------------------------------------------------- */

.fr-reco__nav {
	display: none; /* JS shows these when the track overflows. */
	position: absolute;
	top: calc(50% - 20px);
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 1px solid var(--fr-card-border, #e2e2e2);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	z-index: 3;
	padding: 0;
}

.fr-reco__nav::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
}

.fr-reco__nav--prev {
	left: -8px;
}

.fr-reco__nav--prev::before {
	transform: rotate(-135deg);
	margin-left: 17px;
}

.fr-reco__nav--next {
	right: -8px;
}

.fr-reco__nav--next::before {
	transform: rotate(45deg);
	margin-left: 13px;
}

/* The grid variant never scrolls, so it never shows arrows. */
.fr-reco--grid .fr-reco__nav {
	display: none !important;
}