/**
 * Renov Dynamic Selection
 * --------------------------------------------------------------
 * Tabs: Meilleures ventes / Nouveautés / Promotions
 * Desktop: 4 colonnes
 * Tablet: 2 colonnes
 * Mobile: carrousel horizontal
 */

.renov-el-dynamic-selection {
	--renov-selection-accent: #ff7246;
	--renov-selection-accent-hover: #f15f35;
	--renov-selection-dark: #1a1d3e;
	--renov-selection-text: #555b70;
	--renov-selection-muted: #8a90a1;
	--renov-selection-line: #ececf2;
	--renov-selection-bg-soft: #fff7f3;
	--renov-selection-card: #ffffff;

	position: relative;
	width: 100%;

	padding: 70px 24px;

	background: #ffffff;
	color: var(--renov-selection-dark);
}

.renov-el-dynamic-selection,
.renov-el-dynamic-selection * {
	box-sizing: border-box;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.renov-el-dynamic-selection__inner {
	width: 100%;
	max-width: 1480px;

	margin-inline: auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.renov-el-dynamic-selection__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 32px;

	margin-bottom: 32px;
}

.renov-el-dynamic-selection__heading {
	max-width: 720px;
}

.renov-el-dynamic-selection__kicker {
	margin: 0 0 8px;

	color: var(--renov-selection-accent);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.renov-el-dynamic-selection__title {
	margin: 0;

	color: var(--renov-selection-dark);

	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
}

.renov-el-dynamic-selection__description {
	max-width: 650px;

	margin: 12px 0 0;

	color: var(--renov-selection-text);

	font-size: 15px;
	line-height: 1.65;
}

/* =========================================================
   TABS
   ========================================================= */

.renov-el-dynamic-selection__tabs {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	padding: 5px;

	border: 1px solid var(--renov-selection-line);
	border-radius: 999px;

	background: #f8f8fa;
}

.renov-el-dynamic-selection__tab {
	position: relative;

	min-height: 44px;
	padding: 0 20px;

	border: 0;
	border-radius: 999px;

	background: transparent;
	color: var(--renov-selection-text);

	font: inherit;
	font-size: 14px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

.renov-el-dynamic-selection__tab:hover {
	color: var(--renov-selection-dark);
}

.renov-el-dynamic-selection__tab.is-active {
	background: var(--renov-selection-dark);
	color: #ffffff;

	box-shadow: 0 6px 16px rgba(26, 29, 62, 0.15);
}

.renov-el-dynamic-selection__tab:focus-visible {
	outline: 3px solid rgba(255, 114, 70, 0.28);
	outline-offset: 2px;
}

/* =========================================================
   PANELS
   ========================================================= */

.renov-el-dynamic-selection__panel[hidden] {
	display: none;
}

.renov-el-dynamic-selection__panel {
	width: 100%;
}

/* =========================================================
   GRID
   ========================================================= */

.renov-el-dynamic-selection__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 18px;

	align-items: stretch;
}

/* =========================================================
   CARD
   ========================================================= */

.renov-el-dynamic-selection__card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;

	overflow: hidden;

	border: 1px solid var(--renov-selection-line);
	border-radius: 16px;

	background: var(--renov-selection-card);

	box-shadow:
		0 8px 24px rgba(26, 29, 62, 0.045),
		0 2px 7px rgba(26, 29, 62, 0.025);

	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
}

.renov-el-dynamic-selection__card:hover {
	transform: translateY(-5px);

	border-color: rgba(255, 114, 70, 0.32);

	box-shadow:
		0 18px 38px rgba(26, 29, 62, 0.09),
		0 4px 12px rgba(26, 29, 62, 0.035);
}

/* =========================================================
   IMAGE
   ========================================================= */

.renov-el-dynamic-selection__image-link {
	display: block;

	color: inherit;
	text-decoration: none;
}

.renov-el-dynamic-selection__image {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 4 / 3;

	padding: 18px;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 50% 42%,
			#ffffff 0%,
			#fbfbfb 70%,
			#f6f6f8 100%
		);
}

.renov-el-dynamic-selection__product-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;

	mix-blend-mode: multiply;

	transition: transform 320ms ease;
}

.renov-el-dynamic-selection__card:hover
.renov-el-dynamic-selection__product-image {
	transform: scale(1.04);
}

/* =========================================================
   BADGE
   ========================================================= */

.renov-el-dynamic-selection__badge {
	position: absolute;
	z-index: 2;

	top: 12px;
	left: 12px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;
	padding: 0 10px;

	border-radius: 999px;

	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.renov-el-dynamic-selection__badge--sale {
	background: var(--renov-selection-accent);
	color: #ffffff;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.renov-el-dynamic-selection__card-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	padding: 16px;
}

/* SKU */

.renov-el-dynamic-selection__sku {
	display: block;

	margin-bottom: 6px;

	color: var(--renov-selection-muted);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* TITLE */

.renov-el-dynamic-selection__product-title {
	display: -webkit-box;

	min-height: calc(2 * 1.4em);

	margin: 0;

	overflow: hidden;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	font-size: 15px;
	font-weight: 750;
	line-height: 1.4;
}

.renov-el-dynamic-selection__product-title a {
	color: var(--renov-selection-dark);
	text-decoration: none;

	transition: color 180ms ease;
}

.renov-el-dynamic-selection__product-title a:hover {
	color: var(--renov-selection-accent-hover);
}

/* =========================================================
   PRICE
   ========================================================= */

.renov-el-dynamic-selection__price {
	margin-top: 13px;

	color: var(--renov-selection-dark);

	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
}

.renov-el-dynamic-selection__price .woocommerce-Price-amount,
.renov-el-dynamic-selection__price bdi {
	color: inherit;
	font-weight: inherit;
}

.renov-el-dynamic-selection__price del {
	margin-right: 6px;

	color: var(--renov-selection-muted);

	font-size: 13px;
	font-weight: 500;
}

.renov-el-dynamic-selection__price del .woocommerce-Price-amount,
.renov-el-dynamic-selection__price del bdi {
	color: inherit;
	font-weight: inherit;
}

.renov-el-dynamic-selection__price ins {
	color: var(--renov-selection-accent);

	text-decoration: none;
}

.renov-el-dynamic-selection__price ins .woocommerce-Price-amount,
.renov-el-dynamic-selection__price ins bdi {
	color: inherit;
	font-weight: 800;
}

/* =========================================================
   STOCK
   ========================================================= */

.renov-el-dynamic-selection__stock {
	margin-top: 8px;

	font-size: 12px;
	font-weight: 650;
}

.renov-el-dynamic-selection__stock .is-in-stock {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	color: #388c5a;
}

.renov-el-dynamic-selection__stock .is-in-stock > span {
	display: block;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: currentColor;
}

.renov-el-dynamic-selection__stock .is-out-of-stock {
	color: #a34b4b;
}

/* =========================================================
   ACTION
   ========================================================= */

.renov-el-dynamic-selection__card-action {
	margin-top: auto;
	padding-top: 16px;
}

.renov-el-dynamic-selection__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;
	min-height: 46px;

	padding: 0 16px;

	border: 1px solid var(--renov-selection-dark);
	border-radius: 8px;

	background: var(--renov-selection-dark);
	color: #ffffff;

	font-size: 13px;
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.renov-el-dynamic-selection__add:hover,
.renov-el-dynamic-selection__add:focus-visible {
	background: var(--renov-selection-accent);
	border-color: var(--renov-selection-accent);
	color: #ffffff;

	transform: translateY(-1px);
}

.renov-el-dynamic-selection__add svg {
	display: block;

	width: 18px;
	height: 18px;

	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 180ms ease;
}

.renov-el-dynamic-selection__add:hover svg {
	transform: translateX(3px);
}

.renov-el-dynamic-selection__add.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Woo added state */

.renov-el-dynamic-selection__add.added {
	background: #388c5a;
	border-color: #388c5a;
}

/* =========================================================
   FOOTER / VIEW ALL
   ========================================================= */

.renov-el-dynamic-selection__footer {
	display: flex;
	justify-content: center;

	margin-top: 30px;
}

.renov-el-dynamic-selection__view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 13px;

	min-height: 48px;
	padding: 0 20px;

	border: 1px solid var(--renov-selection-line);
	border-radius: 8px;

	background: #ffffff;
	color: var(--renov-selection-dark);

	font-size: 13px;
	font-weight: 750;
	text-decoration: none;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.renov-el-dynamic-selection__view-all svg {
	width: 19px;
	height: 19px;

	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 180ms ease;
}

.renov-el-dynamic-selection__view-all:hover {
	transform: translateY(-2px);

	border-color: var(--renov-selection-accent);

	background: var(--renov-selection-bg-soft);
	color: var(--renov-selection-accent);
}

.renov-el-dynamic-selection__view-all:hover svg {
	transform: translateX(4px);
}

/* =========================================================
   FOCUS
   ========================================================= */

.renov-el-dynamic-selection__product-title a:focus-visible,
.renov-el-dynamic-selection__image-link:focus-visible,
.renov-el-dynamic-selection__add:focus-visible,
.renov-el-dynamic-selection__view-all:focus-visible {
	outline: 3px solid rgba(255, 114, 70, 0.28);
	outline-offset: 3px;
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

	.renov-el-dynamic-selection__header {
		align-items: flex-start;
		flex-direction: column;

		gap: 22px;
	}

	.renov-el-dynamic-selection__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));

		gap: 14px;
	}

	.renov-el-dynamic-selection__card-content {
		padding: 14px;
	}

	.renov-el-dynamic-selection__product-title {
		font-size: 14px;
	}

	.renov-el-dynamic-selection__price {
		font-size: 17px;
	}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

	.renov-el-dynamic-selection {
		padding: 55px 20px;
	}

	.renov-el-dynamic-selection__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 16px;
	}

	.renov-el-dynamic-selection__tabs {
		max-width: 100%;

		overflow-x: auto;

		scrollbar-width: none;
	}

	.renov-el-dynamic-selection__tabs::-webkit-scrollbar {
		display: none;
	}

	.renov-el-dynamic-selection__tab {
		flex: 0 0 auto;

		white-space: nowrap;
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 639px) {

	.renov-el-dynamic-selection {
		padding: 42px 16px;
	}

	.renov-el-dynamic-selection__header {
		gap: 18px;

		margin-bottom: 24px;
	}

	.renov-el-dynamic-selection__title {
		font-size: clamp(1.85rem, 8vw, 2.4rem);
	}

	.renov-el-dynamic-selection__description {
		font-size: 14px;
	}

	/* tabs */

	.renov-el-dynamic-selection__tabs {
		display: flex;

		width: 100%;

		padding: 4px;

		border-radius: 12px;
	}

	.renov-el-dynamic-selection__tab {
		min-height: 42px;
		padding-inline: 15px;

		border-radius: 9px;

		font-size: 13px;
	}

	/* slider */

	.renov-el-dynamic-selection__grid {
		display: flex;

		width: calc(100% + 16px);

		margin-right: -16px;

		padding: 2px 16px 18px 1px;

		gap: 12px;

		overflow-x: auto;
		overflow-y: hidden;

		scroll-snap-type: x mandatory;
		scroll-padding-left: 1px;

		overscroll-behavior-x: contain;

		-webkit-overflow-scrolling: touch;

		scrollbar-width: none;
	}

	.renov-el-dynamic-selection__grid::-webkit-scrollbar {
		display: none;
	}

	.renov-el-dynamic-selection__card {
		flex: 0 0 min(78vw, 300px);

		height: auto;

		scroll-snap-align: start;

		border-radius: 14px;
	}

	.renov-el-dynamic-selection__image {
		aspect-ratio: 1 / 0.88;

		padding: 14px;
	}

	.renov-el-dynamic-selection__card-content {
		padding: 14px;
	}

	.renov-el-dynamic-selection__product-title {
		font-size: 14px;
	}

	.renov-el-dynamic-selection__price {
		font-size: 17px;
	}

	.renov-el-dynamic-selection__footer {
		justify-content: stretch;

		margin-top: 20px;
	}

	.renov-el-dynamic-selection__view-all {
		width: 100%;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

	.renov-el-dynamic-selection {
		padding-inline: 14px;
	}

	.renov-el-dynamic-selection__grid {
		width: calc(100% + 14px);

		margin-right: -14px;

		padding-right: 14px;
	}

	.renov-el-dynamic-selection__card {
		flex-basis: 84vw;
	}

	.renov-el-dynamic-selection__tab {
		padding-inline: 13px;

		font-size: 12px;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.renov-el-dynamic-selection__card,
	.renov-el-dynamic-selection__product-image,
	.renov-el-dynamic-selection__tab,
	.renov-el-dynamic-selection__add,
	.renov-el-dynamic-selection__add svg,
	.renov-el-dynamic-selection__view-all,
	.renov-el-dynamic-selection__view-all svg {
		transition: none !important;
	}

	.renov-el-dynamic-selection__card:hover,
	.renov-el-dynamic-selection__add:hover,
	.renov-el-dynamic-selection__view-all:hover {
		transform: none;
	}

	.renov-el-dynamic-selection__card:hover
	.renov-el-dynamic-selection__product-image {
		transform: none;
	}
}
/* Compact products with tabs wrapping naturally on mobile. */
@media (max-width: 767px) {
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection { padding: 28px 16px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__inner,
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__panel { min-width: 0; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__header { gap: 14px; margin-bottom: 18px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__title { font-size: 1.625rem; line-height: 1.2; letter-spacing: 0; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__description { font-size: .875rem; line-height: 1.5; margin-top: 8px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__tabs { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100%; overflow: visible; gap: 7px; padding: 4px; scroll-snap-type: none; overscroll-behavior-x: auto; scrollbar-width: auto; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__tab { flex: 0 1 auto; width: auto; min-height: 40px; padding-inline: 11px; font-size: 12px; white-space: normal; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; width: 100%; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__card { height: 100%; border-radius: 12px; min-width: 0; scroll-snap-align: none; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__image { aspect-ratio: 1; padding: 10px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__card-content { padding: 10px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__badge { top: 7px; left: 7px; max-width: calc(100% - 14px); padding: 4px 7px; font-size: .625rem; line-height: 1.3; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__product-title { font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; min-height: 2.8em; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__price { margin-top: 10px; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__price del { font-size: .75rem; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__price .woocommerce-Price-amount { white-space: normal; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__stock { font-size: .6875rem; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__card-action { padding-top: 12px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__add { min-height: 44px; padding: 9px 7px; gap: 5px; font-size: 14px; line-height: 1.4; white-space: normal; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__add svg { flex: 0 0 14px; width: 14px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__footer { justify-content: center; margin-top: 18px; }
    :is(.elementor .elementor-element.elementor-widget[data-widget_type], body) .renov-el-dynamic-selection .renov-el-dynamic-selection__view-all { width: auto; max-width: 100%; min-height: 44px; padding: 10px 14px; }
}