/* ==========================================================================
   Partners' promotions (partials/rd/promotions.php, inc/promotions.php), on top of redesign.css.
   Inspirations cadeaux pages, home page promos section ([maliste_promos]) and [maliste_promotions].
   ========================================================================== */

#wrapper .rd-offers {
	margin: 40px auto 48px;
}

#wrapper .rd-offers.is-home {
	margin: 0;
}

#wrapper #rd-main .rd-offers-title {
	margin: 0 0 6px;
}

#wrapper .rd-offers-intro {
	margin: 0 0 4px;
}

#wrapper .rd-offers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
	justify-content: center;
	gap: 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

/* Page of all the offers: beside the filters (search.css), the cards fill the column */
#wrapper .rd-offers-browse .rd-offers.is-browse {
	margin: 0;
}

/* "En ce moment : 266 promos en cours chez 68 marchands" */
#wrapper .rd-offers-running {
	display: inline-block;
	margin: 12px 0 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--rd-pink);
	color: var(--rd-plum);
	font-weight: 600;
}

#wrapper .rd-offers-browse > .rd-sr-layout {
	margin-top: 28px;
}

/* While the next results load (assets/js/promotions.js) */
#wrapper .rd-offers-browse.is-loading .rd-sr-main {
	opacity: .5;
	transition: opacity .15s ease;
	pointer-events: none;
}

#wrapper .rd-offers-browse .rd-offers-grid {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	justify-content: stretch;
}

#wrapper .rd-offers-browse .vrd_bl_pagination {
	margin-top: 32px;
}

/* Home page: the few cards stay card-sized, centred */
#wrapper .rd-offers.is-home .rd-offers-grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
}

#wrapper .rd-offer {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	background: #FFF;
	transition: box-shadow .2s ease;
}

#wrapper .rd-offer:hover {
	box-shadow: var(--rd-shadow);
}

/* Merchant logo or offer photo, whole on white */
#wrapper .rd-offer-media {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	flex: none;
	aspect-ratio: 16 / 9;
	overflow: hidden; /* else a tall logo stretches the box past its ratio */
	padding: 16px 22px;
	border-bottom: 1px solid var(--rd-border);
	background: #FFF;
}

#wrapper .rd-offer-media img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
}

#wrapper .rd-offer-initial {
	color: var(--rd-berry);
	font-family: var(--rd-title-font);
	font-size: 56px;
	font-weight: 700;
}

#wrapper .rd-offer-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--rd-berry);
	color: #FFF;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

#wrapper .rd-offer-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 12px 14px 14px;
}

#wrapper .rd-offer-brand {
	margin: 0 0 3px;
	overflow: hidden;
	color: var(--rd-berry);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#wrapper #rd-main .rd-offer-title {
	display: -webkit-box;
	margin: 0 0 8px;
	overflow: hidden;
	font-family: var(--rd-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

#wrapper .rd-offer-title a {
	color: var(--rd-plum);
	text-decoration: none;
}

#wrapper .rd-offer-title a:hover {
	color: var(--rd-berry);
}

#wrapper .rd-offer-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0 0 6px;
}

#wrapper .rd-offer-prices del {
	color: var(--rd-muted);
	font-size: 15px;
}

#wrapper .rd-offer-prices strong {
	color: var(--rd-berry);
	font-size: 18px;
}

#wrapper .rd-offer-code,
#wrapper .rd-offer-until {
	margin: 0 0 6px;
	color: var(--rd-muted);
	font-size: 14px;
}

#wrapper .rd-offer-code code {
	padding: 2px 6px;
	border: 1px dashed var(--rd-berry);
	border-radius: 4px;
	background: var(--rd-pink);
	color: var(--rd-plum);
	font-size: 14px;
	font-weight: 700;
	word-break: break-all;
}

#wrapper .rd-offer-copy {
	margin-left: 4px;
	padding: 2px 8px;
	border: 1px solid var(--rd-berry);
	border-radius: 4px;
	background: #fff;
	color: var(--rd-plum);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

#wrapper .rd-offer-copy:hover,
#wrapper .rd-offer-copy:focus-visible {
	background: var(--rd-pink);
}

#wrapper .rd-offers-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 4px solid var(--rd-berry);
	border-radius: 4px;
	background: var(--rd-pink);
	color: var(--rd-plum);
}

#wrapper .rd-offer .rd-btn {
	margin-top: auto;
	min-height: 40px;
	font-size: 15px;
}

#wrapper .rd-offers-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
}

#wrapper .rd-offers-disclaimer {
	margin: 14px 0 0;
	color: var(--rd-muted);
	font-size: 13px;
	text-align: center;
}

/* An offer in the "coups de cœur" carousel: the merchant's logo whole, on white */
#wrapper .rd-pick.is-offer .rd-pick-media {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 40px 22px 22px;
	border-bottom: 1px solid var(--rd-border);
}

#wrapper .rd-pick.is-offer .rd-pick-media img {
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

#wrapper .rd-pick.is-offer:hover .rd-pick-media img {
	transform: none;
}

#wrapper .rd-pick.is-offer .rd-offer-code,
#wrapper .rd-pick.is-offer .rd-offer-until {
	margin: 6px 0 0;
}

#wrapper .rd-pick.is-offer .rd-btn {
	margin-top: auto;
}

#wrapper .rd-pick.is-offer .rd-offer-until {
	margin-bottom: 12px;
}

@media (max-width: 600px) {
	#wrapper .rd-offers-grid,
	#wrapper .rd-offers-browse .rd-offers-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	#wrapper .rd-offer-media {
		padding: 38px 14px 14px;
	}

	#wrapper .rd-offer-badge {
		top: 8px;
		left: 8px;
		font-size: 13px;
	}

	#wrapper .rd-offer-body {
		padding: 10px;
	}
}