/* ==========================================================================
   ACF Catalog Filters — Avada-aware styling
   Uses Avada CSS variables (--primary_color, --link_color, --form_*,
   --button_*, --sidebar_*, --content_bg_color) with sensible fallbacks
   so the plugin still looks decent outside Avada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix: thick black border on Fusion Post Cards cells.
   WordPress core (wp-block-library inline CSS) ships:
       html :where([style*="border-color"]) { border-style: solid; }
   Fusion Post Cards cells carry a custom property --awb-border-color inline,
   whose NAME contains the "border-color" substring, so that core selector
   matches the cell and forces border-style:solid. Nothing then sets the
   width/color at a winning specificity, so the cell falls back to the
   defaults — medium (3px) width + currentColor (near-black) — producing an
   ugly thick dark grid. The real card outline already comes from the inner
   .fusion-column-wrapper, so we simply drop the cell's spurious border.
   (Loads only on pages that render our shortcode, where Post Cards live.)
   -------------------------------------------------------------------------- */
.fusion-post-cards-grid-column {
	border: 0 !important;
}

.acfcf-app {
	--acfcf-accent: var(--primary_color, #2b8c69);
	--acfcf-accent-hover: var(--link_hover_color, #196b4b);
	--acfcf-text: var(--body_typography-color, #333);
	--acfcf-muted: var(--awb-color5, #757575);
	--acfcf-bg: var(--sidebar_widget_bg_color, #fff);
	--acfcf-border: var(--sidebar_divider_color, var(--form_border_color, #e0e0e0));
	--acfcf-radius: var(--form_border_radius, 4px);
	--acfcf-input-bg: var(--form_bg_color, #fff);
	--acfcf-input-border: var(--form_border_color, #d4d4d4);
	--acfcf-input-text: var(--form_text_color, #333);
	--acfcf-input-focus: var(--form_focus_border_color, var(--primary_color, #2b8c69));
	--acfcf-btn-bg: var(--button_gradient_top_color, var(--primary_color, #2b8c69));
	--acfcf-btn-bg-hover: var(--button_gradient_top_color_hover, var(--link_hover_color, #196b4b));
	--acfcf-btn-text: var(--button_accent_color, #fff);
	--acfcf-btn-text-hover: var(--button_accent_hover_color, #fff);
	--acfcf-heading: var(--sidebar_heading_color, var(--h3_typography-color, var(--awb-color8, #222)));
	--acfcf-card-bg: var(--content_bg_color, #fff);
	--acfcf-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	--acfcf-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

	display: grid;
	grid-template-columns: minmax(240px, 280px) 1fr;
	gap: var(--sidebar_gutter, 32px);
	margin: 0 auto;
	color: var(--acfcf-text);
	font-family: inherit;
}

@media (max-width: 800px) {
	.acfcf-app {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   Sidebar-only mode
   Lives inside any container (Fusion column, theme sidebar…). Desktop: a
   classic sticky vertical sidebar. Mobile: filters fold into a horizontal
   row of chip-style <details> dropdowns above the products.
   ========================================================================== */

.acfcf-app--sidebar { display: block; }

.acfcf-app--sidebar .acfcf-sidebar {
	position: static;
	max-height: none;
}

@media (min-width: 801px) {
	/* Avada/Fusion columns occasionally set overflow:hidden, which would clip
	   a filter list taller than the products column. Lift it so the sidebar
	   can extend past the products and show every filter. */
	.fusion-builder-column:has(> * .acfcf-app--sidebar),
	.fusion-column-wrapper:has(> * .acfcf-app--sidebar),
	.fusion-builder-column:has(.acfcf-app--sidebar),
	.fusion-column-wrapper:has(.acfcf-app--sidebar) {
		overflow: visible !important;
	}

	.acfcf-app--sidebar {
		/* Anchor the panel to the top of its column rather than stretching it. */
		align-self: flex-start;
	}

	/* No internal scroll, no height cap: the whole filter list renders in
	   normal flow. If it's taller than the products column the sidebar simply
	   continues below them — every option stays visible (client request). */
	.acfcf-app--sidebar .acfcf-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Toggle button is mobile-only; hide it on desktop since the panel is
	   always visible there. */
	.acfcf-app--sidebar .acfcf-mobile-toggle { display: none; }
}

/* ----- Mobile: collapsible sidebar behind a burger toggle ----------------- */
@media (max-width: 800px) {
	.acfcf-app--sidebar { margin-bottom: 16px; }

	/* The toggle is the only thing visible until the user opens the panel. */
	.acfcf-app--sidebar .acfcf-mobile-toggle { display: inline-flex; }

	/* Sidebar hidden by default; revealed when JS sets .is-open on the app.
	   We override the fixed-drawer styles inherited from the full-app mode
	   with !important to keep the layout flow predictable on mobile. */
	.acfcf-app--sidebar .acfcf-sidebar {
		display: none;
		position: static !important;
		inset: auto !important;
		z-index: auto !important;
		border-radius: var(--acfcf-radius);
		padding: 12px !important;
		box-shadow: var(--acfcf-shadow);
		max-height: none;
		overflow: visible;
		margin-top: 8px;
	}
	.acfcf-app--sidebar.is-open .acfcf-sidebar { display: block; }

	/* Header on mobile: drop the redundant "Filtres" title (the burger
	   already labels the panel) and surface the "Voir (N)" CTA so the
	   user can commit & close from the very first viewport line. */
	.acfcf-app--sidebar .acfcf-sidebar__header {
		gap: 8px;
		flex-wrap: wrap;
		position: sticky;
		top: 0;
		z-index: 10;
		background: var(--acfcf-bg);
		margin: -12px -12px 12px;
		padding: 10px 12px;
		border-bottom: 1px solid var(--acfcf-border);
	}
	.acfcf-app--sidebar .acfcf-sidebar__title { display: none; }
	.acfcf-app--sidebar .acfcf-show-results {
		display: inline-flex;
		flex: 1 1 auto;        /* take the room the title vacated */
		justify-content: center;
		order: 1;
	}
	.acfcf-app--sidebar .acfcf-reset { order: 2; }

	/* The footer count is redundant once the CTA shows the live total. */
	.acfcf-app--sidebar .acfcf-sidebar__footer { display: none; }

	/* Keep the toggle within reach as the user scrolls the products list. */
	.acfcf-app--sidebar {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--awb-color1, #fff);
		padding: 8px 0;
	}

	.acfcf-app--sidebar .acfcf-sidebar__header {
		margin: 0 0 10px;
		padding: 0 0 8px;
	}
	.acfcf-app--sidebar .acfcf-sidebar__title { font-size: 13px; }

	/* Chips wrap on multiple lines instead of horizontal scrolling — that
	   way an opened panel can grow full-width below its chip without being
	   clipped by an overflow context. */
	.acfcf-app--sidebar .acfcf-form {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		overflow: visible;
	}

	.acfcf-app--sidebar .acfcf-filter {
		flex: 0 0 auto;
		border: 1px solid var(--acfcf-border);
		border-radius: 999px;
		padding: 0;
		background: var(--acfcf-input-bg);
		transition: background-color .15s ease, border-color .15s ease;
	}

	.acfcf-app--sidebar .acfcf-filter__title {
		padding: 8px 14px;
		text-transform: none;
		letter-spacing: 0;
		font-size: 12px;
		white-space: nowrap;
		gap: 6px;
		min-height: 36px;          /* tap target */
	}

	.acfcf-app--sidebar .acfcf-filter[open] {
		flex: 1 0 100%;             /* take full row when opened */
		border-radius: var(--acfcf-radius);
		background: var(--acfcf-bg);
		border-color: var(--acfcf-accent);
	}

	.acfcf-app--sidebar .acfcf-filter[open] > .acfcf-filter__title {
		font-weight: 700;
		color: var(--acfcf-accent);
	}

	.acfcf-app--sidebar .acfcf-filter__body {
		padding: 4px 14px 14px;
		max-height: 50vh;
		overflow-y: auto;
	}
}

.acfcf-sidebar__footer {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--acfcf-border);
	font-size: 12px;
	color: var(--acfcf-muted);
	text-align: center;
}

/* "Voir (N)" CTA — mobile only. Lives inside the sidebar header so it's
   visible the moment the panel opens, no scrolling needed to find it.
   Closes the panel + smooth-scrolls to the products list. */
.acfcf-show-results {
	display: none;          /* mobile-only, see media query below */
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	background: var(--acfcf-btn-bg);
	color: var(--acfcf-btn-text);
	border: 0;
	border-radius: var(--acfcf-radius);
	font-size: 12px;
	font-weight: 700;
	text-transform: var(--button_text_transform, uppercase);
	letter-spacing: var(--button_letter_spacing, 0.05em);
	cursor: pointer;
	transition: background-color .15s ease;
}
.acfcf-show-results:hover,
.acfcf-show-results:focus-visible {
	background: var(--acfcf-btn-bg-hover);
	color: var(--acfcf-btn-text-hover);
	outline: 0;
}
.acfcf-show-results__count { opacity: .9; }

/* Hide cards filtered out in sidebar-only mode without affecting layout
   recompositions on toggle. */
.acfcf-hidden { display: none !important; }

/* Zero-results placeholder, injected client-side when AJAX returns no matches.
   Width: 100% so it spans the entire grid column area. */
.acfcf-no-match {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	padding: 32px 24px;
	margin: 12px 0;
	text-align: center;
	color: var(--acfcf-muted);
	background: var(--awb-color2, #f7f7f7);
	border: 1px dashed var(--acfcf-border);
	border-radius: var(--acfcf-radius);
	font-size: 14px;
}

/* Subtle loading hint while waiting on the IDs response. */
.acfcf-app.acfcf-loading .acfcf-sidebar { opacity: .8; }
.acfcf-app.acfcf-loading .acfcf-sidebar::after {
	content: '';
	display: block;
	margin: 12px auto 0;
	width: 16px; height: 16px;
	border: 2px solid var(--acfcf-border);
	border-top-color: var(--acfcf-accent);
	border-radius: 50%;
	animation: acfcf-spin .7s linear infinite;
}

/* -------------------------- Mobile toggle ------------------------------- */

.acfcf-mobile-toggle {
	display: none; /* shown only on mobile, see media query below */
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--acfcf-bg);
	color: var(--acfcf-heading);
	border: 1px solid var(--acfcf-border);
	padding: 12px 16px;
	border-radius: var(--acfcf-radius);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--acfcf-shadow);
	transition: border-color .15s ease, background-color .15s ease;
}

.acfcf-mobile-toggle:hover,
.acfcf-mobile-toggle:focus-visible {
	border-color: var(--acfcf-accent);
	outline: 0;
}

.acfcf-mobile-toggle__icon {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 18px;
	height: 12px;
	flex-shrink: 0;
}
.acfcf-mobile-toggle__icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

/* Burger → cross animation when the sidebar is open. */
.acfcf-app.is-open .acfcf-mobile-toggle__icon span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
.acfcf-app.is-open .acfcf-mobile-toggle__icon span:nth-child(2) {
	opacity: 0;
}
.acfcf-app.is-open .acfcf-mobile-toggle__icon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

.acfcf-mobile-toggle__label {
	flex: 1;
	text-align: left;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.acfcf-mobile-toggle__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--acfcf-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

.acfcf-mobile-toggle[hidden],
.acfcf-mobile-toggle__badge[hidden] { display: none; }

/* -------------------------- Sidebar ------------------------------------- */

.acfcf-sidebar {
	background: var(--acfcf-bg);
	border: 1px solid var(--acfcf-border);
	border-radius: var(--acfcf-radius);
	padding: var(--sidebar_padding, 20px);
	box-shadow: var(--acfcf-shadow);
	align-self: start;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

@media (max-width: 800px) {
	.acfcf-sidebar {
		display: none;
		position: fixed;
		inset: 0;
		max-height: none;
		border-radius: 0;
		z-index: 9999;
		overflow-y: auto;
		box-shadow: var(--acfcf-shadow-lg);
		padding-bottom: 96px;
	}
	.acfcf-app.is-open .acfcf-sidebar { display: block; }
}

.acfcf-sidebar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--acfcf-border);
}

.acfcf-sidebar__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: var(--acfcf-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* -------------------------- Sort control -------------------------------- */

.acfcf-sort {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--acfcf-border);
}

.acfcf-sort__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--acfcf-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.acfcf-sort__select {
	width: 100%;
	padding: 9px 32px 9px 12px;
	background: var(--acfcf-input-bg);
	border: 1px solid var(--acfcf-input-border);
	border-radius: var(--acfcf-radius);
	color: var(--acfcf-input-text);
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Chevron drawn with a CSS gradient so we don't ship an image asset. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--acfcf-muted) 50%),
		linear-gradient(135deg, var(--acfcf-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 16px) calc(50% - 2px),
		calc(100% - 11px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.acfcf-sort__select:focus {
	border-color: var(--acfcf-input-focus);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(43, 140, 105, 0.15);
}

.acfcf-reset {
	background: transparent;
	border: 0;
	color: var(--acfcf-accent);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 6px;
	text-decoration: underline;
}

.acfcf-reset:hover {
	color: var(--acfcf-accent-hover);
}

/* -------------------------- Filter accordion ---------------------------- */

.acfcf-filter {
	border-bottom: 1px solid var(--acfcf-border);
	padding: 12px 0;
}

.acfcf-filter:last-child { border-bottom: 0; }

.acfcf-filter__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--acfcf-heading);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.acfcf-filter__title::-webkit-details-marker { display: none; }

.acfcf-filter__title::after {
	content: '+';
	font-size: 18px;
	color: var(--acfcf-muted);
	transition: transform .2s ease;
}

.acfcf-filter[open] > .acfcf-filter__title::after { content: '−'; }

.acfcf-filter__body {
	padding-top: 10px;
}

/* -------------------------- Checklist ----------------------------------- */

.acfcf-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	/* No per-list scrollbar: the whole sidebar scrolls as one, and the
	   <details> can be collapsed if a list gets too long. The first 8
	   items show inline; beyond that the "voir plus" toggle expands. */
}

.acfcf-checklist--collapsible {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
}

.acfcf-checklist--collapsible > li:nth-child(n+9) {
	display: none;
}

.acfcf-checklist--collapsible.is-expanded > li {
	display: flex;
	align-items: center;
}

.acfcf-checklist__more {
	background: none;
	border: 0;
	padding: 6px 0 0;
	color: var(--acfcf-accent);
	font-size: 12px;
	cursor: pointer;
	text-align: left;
}

.acfcf-checklist__more:hover { color: var(--acfcf-accent-hover); }

.acfcf-checklist li { margin: 0; padding: 0; }

.acfcf-checklist label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	color: var(--acfcf-text);
	cursor: pointer;
	line-height: 1.3;
}

.acfcf-checklist label:hover { color: var(--acfcf-accent); }

.acfcf-checklist input[type="checkbox"] {
	accent-color: var(--acfcf-accent);
	cursor: pointer;
}

.acfcf-checklist__label {
	flex: 1;
}

.acfcf-checklist__count {
	color: var(--acfcf-muted);
	font-size: 11px;
	background: var(--awb-color2, #f4f4f4);
	border-radius: 999px;
	padding: 2px 8px;
	transition: background-color .15s ease, color .15s ease;
}

/* Options that wouldn't match anything with the current selection. Keep
   them visible (so the user knows they exist) but dimmed; the checkbox
   stays clickable so the user can still toggle the filter to "explore". */
.acfcf-option-zero {
	opacity: .45;
}
.acfcf-option-zero .acfcf-checklist__count {
	background: transparent;
}
.acfcf-option-zero label { cursor: not-allowed; }
.acfcf-option-zero input { pointer-events: none; }

/* When the "Options vides" setting is on, the app carries .acfcf-hide-zero
   and options whose CONTEXTUAL count is 0 are hidden outright (rather than
   dimmed). They stay in the DOM, so as soon as the active filters change and
   their count climbs back above 0, the JS drops .acfcf-option-zero and they
   reappear — this is what keeps the facets in sync with the active filters. */
.acfcf-hide-zero .acfcf-option-zero {
	display: none;
}

/* ----- Collapse selected group (admin option) ---------------------------
   When enabled, the app carries .acfcf-collapse-groups. Once any option in a
   checkbox group is checked, hide the *unchecked* options of THAT group.
   Pure CSS via :has(), so it holds on the server-rendered first paint (the
   URL's selection is reflected as `checked` in the HTML) and live as the user
   ticks/unticks — no JS needed. Each group is independent. */
.acfcf-collapse-groups .acfcf-checklist:has(input:checked) li:not(:has(input:checked)) {
	display: none;
}
/* Keep the checked option visible even if it sat in the "voir plus" overflow. */
.acfcf-collapse-groups .acfcf-checklist--collapsible:has(input:checked) > li:has(input:checked) {
	display: list-item;
}
/* The "voir plus" toggle is pointless once a group is reduced to its pick. */
.acfcf-collapse-groups .acfcf-checklist:has(input:checked) + .acfcf-checklist__more {
	display: none;
}

/* -------------------------- Range / inputs ------------------------------ */

.acfcf-range__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.acfcf-range__label {
	display: block;
	font-size: 11px;
	color: var(--acfcf-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 4px;
}

.acfcf-range input,
.acfcf-text,
.acfcf-date {
	width: 100%;
	padding: 8px 10px;
	background: var(--acfcf-input-bg);
	border: 1px solid var(--acfcf-input-border);
	border-radius: var(--acfcf-radius);
	color: var(--acfcf-input-text);
	font-size: 13px;
	box-sizing: border-box;
}

.acfcf-range input:focus,
.acfcf-text:focus,
.acfcf-date:focus {
	border-color: var(--acfcf-input-focus);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(43, 140, 105, 0.15);
}

.acfcf-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}

.acfcf-empty {
	color: var(--acfcf-muted);
	font-size: 12px;
	font-style: italic;
}

/* -------------------------- Results grid -------------------------------- */

.acfcf-results__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--acfcf-border);
}

.acfcf-count {
	font-size: 13px;
	color: var(--acfcf-muted);
	font-weight: 600;
}

.acfcf-results { position: relative; min-height: 200px; }

.acfcf-results.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--acfcf-radius);
	z-index: 10;
}

.acfcf-results.is-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px; height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid var(--acfcf-border);
	border-top-color: var(--acfcf-accent);
	border-radius: 50%;
	animation: acfcf-spin .8s linear infinite;
	z-index: 11;
}

@keyframes acfcf-spin { to { transform: rotate(360deg); } }

.acfcf-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

@media (max-width: 480px) {
	.acfcf-results__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

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

.acfcf-card {
	background: var(--acfcf-card-bg);
	border: 1px solid var(--acfcf-border);
	border-radius: var(--acfcf-radius);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}

.acfcf-card:hover {
	box-shadow: var(--acfcf-shadow-lg);
	transform: translateY(-2px);
}

.acfcf-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.acfcf-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--awb-color2, #f4f4f4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acfcf-card__img,
.acfcf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.acfcf-card:hover .acfcf-card__img { transform: scale(1.04); }

.acfcf-card__body {
	padding: 14px 16px 18px;
}

.acfcf-card__brand {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acfcf-muted);
	margin-bottom: 6px;
}

.acfcf-card__title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 10px;
	line-height: 1.3;
	color: var(--acfcf-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.acfcf-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.acfcf-card__price-new {
	font-size: 17px;
	font-weight: 700;
	color: var(--acfcf-accent);
}

.acfcf-card__price-old {
	font-size: 13px;
	text-decoration: line-through;
	color: var(--acfcf-muted);
}

.acfcf-card__availability {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--awb-color2, #f4f4f4);
	color: var(--acfcf-muted);
}

.acfcf-card__availability--en-stock {
	background: rgba(43, 140, 105, .15);
	color: #1f6d4f;
}

.acfcf-card__availability--en-rupture-de-stock {
	background: rgba(180, 30, 30, .12);
	color: #a01b1b;
}

/* -------------------------- Pagination ---------------------------------- */

.acfcf-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--acfcf-border);
}

.acfcf-page {
	min-width: 36px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--acfcf-border);
	border-radius: var(--acfcf-radius);
	color: var(--acfcf-text);
	cursor: pointer;
	font-size: 13px;
	transition: all .15s ease;
}

.acfcf-page:hover {
	border-color: var(--acfcf-accent);
	color: var(--acfcf-accent);
}

.acfcf-page.is-active {
	background: var(--acfcf-accent);
	border-color: var(--acfcf-accent);
	color: var(--acfcf-btn-text);
	cursor: default;
}

.acfcf-no-results {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	color: var(--acfcf-muted);
	background: var(--awb-color2, #f8f8f8);
	border-radius: var(--acfcf-radius);
}