/* FA Product Recommendations frontend grid.
   The cards reuse the FA OF Model class names so they inherit the site's card
   look, but every layout rule below is scoped to this plugin's own wrapper
   (.fapr-wrapper.offmodels-grid-layout, which is always present on our output)
   at a specificity that deterministically beats the OF Model grid rules. That
   avoids two real clashes from reusing the OF Model grid class: its fixed
   335px button width and its 3rem !important card margins. It also means the
   grid renders correctly whether or not the OF Model plugin is active.
   1 column mobile, 2 tablet, 3 desktop. Brand red: #C11007. */

.fapr-wrapper { font-family: inherit; }

/* Grid container: 3 desktop / 2 tablet / 1 mobile. */
.fapr-wrapper.offmodels-grid-layout .ofmodels-results-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

@media only screen and (max-width: 1024px) {
	.fapr-wrapper.offmodels-grid-layout .ofmodels-results-container { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 768px) {
	.fapr-wrapper.offmodels-grid-layout .ofmodels-results-container { grid-template-columns: 1fr; }
}

/* Card: stacked, self-contained. margin:0 !important defeats the OF Model
   3rem !important margins; gap on the container handles spacing instead. */
.fapr-wrapper.offmodels-grid-layout .ofmodels-results-container-item {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* Photo. */
.fapr-wrapper.offmodels-grid-layout .ofmodels-Photo {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 12px;
	flex: 0 0 auto;
}
.fapr-wrapper.offmodels-grid-layout .ofmodels-Photo img {
	width: 100%;
	height: 475px;
	object-fit: cover;
	border-radius: 15px;
	display: block;
}
@media only screen and (max-width: 768px) {
	.fapr-wrapper.offmodels-grid-layout .ofmodels-Photo img { height: 420px; }
}

.fapr-wrapper.offmodels-grid-layout .ofmodels-details {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Brand-red CTA buttons (top and bottom). The extra .fapr-cta-btn class lifts
   specificity above the OF Model fixed 335px width rule so these stay full width. */
.fapr-wrapper.offmodels-grid-layout .ofmodels-cta-btn.fapr-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background-color: #C11007;
	color: #fff;
	padding: 12px 16px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: capitalize;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.2s ease;
}
.fapr-wrapper.offmodels-grid-layout .ofmodels-cta-btn.fapr-cta-btn:hover,
.fapr-wrapper.offmodels-grid-layout .ofmodels-cta-btn.fapr-cta-btn:focus {
	background-color: #a50d05;
	color: #fff;
}

.fapr-wrapper.offmodels-grid-layout .ofmodels-Title {
	text-align: center;
	font-size: 20px;
	line-height: 1.3;
	margin: 4px 0 8px;
}
.fapr-wrapper.offmodels-grid-layout .ofmodels-Title a { text-decoration: none; color: inherit; }
.fapr-wrapper.offmodels-grid-layout .ofmodels-Title a:hover { text-decoration: underline; }

/* Three-currency price row. Prices use the OF Model badge style; a scoped
   fallback copy of that badge is included below so they render even when the
   OF Model plugin is not active. */
.fapr-wrapper .fapr-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 10px;
}
.fapr-wrapper .ofmodels-badge-black {
	background-color: #000000;
	color: #ffffff;
	padding: 4px 10px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 4px;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}
.fapr-wrapper .ofmodels-badge-green {
	background-color: #388E3C;
	color: #ffffff;
	padding: 4px 10px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 4px;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}
/* Prices keep the badge look but at a clearer 16px. Scoped to the price row so
   only the prices scale up, at a specificity that beats the OF Model badge. */
.fapr-wrapper .fapr-price .ofmodels-badge-black {
	font-size: 16px;
	padding: 6px 12px;
	line-height: 1.2;
}

.fapr-wrapper .fapr-supplier {
	text-align: center;
	font-size: 13px;
	color: #777;
	margin-bottom: 8px;
}

/* Notes block. */
.fapr-wrapper .ofmodels-editors-notes {
	text-align: center;
	margin: 4px 0 12px;
	font-size: 14px;
	line-height: 1.5;
}
.fapr-wrapper .ofmodels-editors-notes-header { font-weight: 700; color: #333; margin-bottom: 4px; }
.fapr-wrapper .ofmodels-editors-notes-value { color: #555; }

/* Bottom CTA sticks to the base of the card so buttons align across a row. */
.fapr-wrapper.offmodels-grid-layout .ofmodels-secondary-cta-wrapper {
	margin-top: auto;
	padding-top: 10px;
	width: 100%;
}