/* =============================================================================
   Esprit Fourmis — Theme tokens & shared primitives
   Loaded on every page so buttons/links match site-wide.
   ========================================================================== */

:root {
	--ef-color-bg:        #FFFFFF;
	--ef-color-soft:      #F9F9F9;
	--ef-color-dark:      #2B2F38;
	--ef-color-text:      #2B2F38;
	--ef-color-muted:     #5D6167;
	--ef-color-line:      #E5E5E5;
	--ef-color-primary:   #75C32C;
	--ef-color-primary-d: #5FA122;
	--ef-color-accent:    #75C32C;
	--ef-color-accent-d:  #5FA122;
	--ef-radius-sm:  6px;
	--ef-radius:     10px;
	--ef-radius-lg:  16px;
	--ef-shadow:     0 4px 14px rgba(0,0,0,.06);
	--ef-shadow-lg:  0 10px 30px rgba(0,0,0,.10);
	--ef-font-display: "Inter", -apple-system, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
}

.ef-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ef-container--narrow { max-width: 760px; }

/* Buttons */
.ef-button {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.ef-button--primary { background: var(--ef-color-primary) !important; color: #fff !important; border-color: var(--ef-color-primary) !important; }
.ef-button--primary:hover { background: var(--ef-color-primary-d) !important; border-color: var(--ef-color-primary-d) !important; transform: translateY(-1px); }
.ef-button--ghost { background: transparent; color: var(--ef-color-text) !important; border-color: var(--ef-color-line); }
.ef-button--ghost:hover { border-color: var(--ef-color-accent); color: var(--ef-color-accent-d) !important; background: #fff; }
.ef-button--lg { padding: 16px 32px; font-size: 17px; }
.ef-button--block { width: 100%; }

.ef-link { color: var(--ef-color-primary); text-decoration: none; font-weight: 600; }
.ef-link:hover { text-decoration: underline; }
.ef-link--light { color: #fff; }
.ef-link--light:hover { color: #fff; }

/* =============================================================================
   Astra navbar — override the customizer's red `theme-color` (#fc5f5f) with
   our green primary, scoped to the header only so the rest of the site keeps
   its original Astra colors if you need them somewhere else later.
   ========================================================================== */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header {
	--ast-global-color-0: #75C32C;       /* theme-color used by Astra for accents */
	--ast-global-color-1: #5FA122;       /* link-hover color */
}
/* Catch any hardcoded reds Astra might apply in the navbar (menu hovers,
   active items, cart/account icons, etc.). */
.site-header a:hover,
.site-header .menu-item a:hover,
.main-header-menu a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a,
.main-header-menu .current-menu-ancestor > a,
.ast-header-account-wrap:hover .ast-header-account-link,
.ast-header-woo-cart .ast-cart-menu-wrap:hover,
.ast-header-woo-cart .ast-cart-menu-wrap:focus,
.ast-cart-menu-wrap:hover .ast-woo-header-cart-info-wrap,
.ast-site-header-cart .ast-site-header-cart-li:hover .ast-cart-menu-wrap {
	color: var(--ef-color-primary) !important;
}
/* Cart count badge — replace red bg if any */
.ast-cart-menu-wrap .count,
.ast-site-header-cart-data .ast-woo-header-cart-info-wrap {
	background-color: transparent;
}

/* Force the navbar to stay solid white + subtle separator on every page.
   Some pages (about, contact) were rendering the navbar transparent so it
   blended with the page background — this guarantees the navbar is always
   visually distinct from content. */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-primary-header-bar.main-header-bar,
.ast-above-header,
.ast-below-header {
	background-color: #FFFFFF !important;
}
.site-header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* =============================================================================
   WooCommerce mini-cart popup — widen + restyle the two action buttons.
   Astra defaults it to 280px which is too tight (long product names truncate).
   ========================================================================== */
.ast-site-header-cart .widget_shopping_cart,
.ast-header-woo-cart .widget_shopping_cart {
	width: 380px !important;
}
@media (max-width: 600px) {
	.ast-site-header-cart .widget_shopping_cart,
	.ast-header-woo-cart .widget_shopping_cart {
		width: 92vw !important;
		max-width: 380px !important;
	}
}
.woocommerce-mini-cart__buttons.buttons,
.widget_shopping_cart .woocommerce-mini-cart__buttons {
	display: flex !important;
	flex-direction: column;          /* stacked — popup is too narrow for inline */
	gap: 8px;                        /* same value as top + sides for visual balance */
	margin: 8px !important;
	padding: 0 !important;
}
.woocommerce-mini-cart__buttons .button {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	padding: 12px 18px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .2s, color .2s, border-color .2s !important;
	margin: 0 !important;
}
/* "Voir le panier" → ghost */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent !important;
	border: 1px solid var(--ef-color-line) !important;
	color: var(--ef-color-text) !important;
}
.woocommerce-mini-cart__buttons .button:not(.checkout):hover,
.woocommerce-mini-cart__buttons .button:not(.checkout):focus {
	border-color: var(--ef-color-accent) !important;
	color: var(--ef-color-accent-d) !important;
	background: #fff !important;
}
/* "Commander" → primary */
.woocommerce-mini-cart__buttons .button.checkout {
	background: var(--ef-color-primary) !important;
	border: 1px solid var(--ef-color-primary) !important;
	color: #fff !important;
}
.woocommerce-mini-cart__buttons .button.checkout:hover,
.woocommerce-mini-cart__buttons .button.checkout:focus {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
	color: #fff !important;
}

/* =============================================================================
   Custom Footer
   ========================================================================== */
.ef-footer {
	background: var(--ef-color-dark);
	color: #c9c2af;
	margin-top: 60px;
}
.ef-footer * { box-sizing: border-box; }
.ef-footer__main { padding: 56px 0 36px; }
.ef-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}
.ef-footer__brand .ef-footer__logo {
	display: inline-block;
	margin-bottom: 14px;
	text-decoration: none;
}
.ef-footer__brand .ef-footer__logo img {
	height: 56px; width: auto; display: block;
	filter: brightness(0) invert(1); /* if logo is dark, this whitens it; remove if logo already light */
}
.ef-footer__brand-name { color: #fff; font-family: var(--ef-font-display); font-size: 22px; font-weight: 800; }
.ef-footer__tagline { font-size: 14px; line-height: 1.55; color: #a39d8e; margin: 0 0 18px; max-width: 320px; }
.ef-footer__social { display: flex; gap: 10px; }
.ef-footer__social-link {
	display: inline-flex; width: 36px; height: 36px;
	align-items: center; justify-content: center;
	background: rgba(255,255,255,.06);
	color: #fff !important;
	border-radius: 50%;
	text-decoration: none !important;
	transition: background .2s, transform .2s;
}
.ef-footer__social-link:hover { background: var(--ef-color-primary); transform: translateY(-2px); }

.ef-footer__heading {
	font-family: var(--ef-font-display);
	font-size: 13px; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: #fff;
	margin: 0 0 16px;
}
.ef-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ef-footer__links a {
	color: #c9c2af !important;
	text-decoration: none !important;
	font-size: 14px;
	line-height: 1.4;
	transition: color .15s;
}
.ef-footer__links a:hover { color: #fff !important; }

.ef-footer__bottom {
	padding: 18px 0;
	background: rgba(0,0,0,.25);
	border-top: 1px solid rgba(255,255,255,.06);
	font-size: 12.5px;
	color: #8a8478;
}
.ef-footer__bottom-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
.ef-footer__copyright { font-size: 12.5px; }
.ef-footer__payments { display: flex; gap: 8px; align-items: center; }
.ef-footer__payments span {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	padding: 4px 9px;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 4px;
	color: #8a8478;
}

@media (max-width: 900px) {
	.ef-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
	.ef-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.ef-footer { margin-top: 40px; }
	.ef-footer__main { padding: 40px 0 28px; }
	.ef-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.ef-footer__bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
}

/* =============================================================================
   WooCommerce archive titles — Astra paints category/tag/brand page titles
   with the pink accent color. Force them to use our brand dark text.
   ========================================================================== */
.woocommerce-products-header__title,
.woocommerce-products-header .page-title,
body.tax-product_cat .page-title,
body.tax-product_tag .page-title,
body.tax-product_brand .page-title,
body.post-type-archive-product .page-title,
body.archive .ast-archive-title,
body.tax-product_cat .ast-archive-title,
body.tax-product_tag .ast-archive-title {
	color: var(--ef-color-dark) !important;
}

/* WooCommerce / archive pagination (page 1, 2, 3, →) — pink-to-green repaint,
   wrapper border kill (WC ships an ugly grey border around the whole UL plus
   borders on each LI). Standalone pill buttons, green-tinted theme. */
.woocommerce-pagination,
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul li,
.ast-pagination,
nav.pagination {
	border: none !important;
	margin: 0 !important;
}
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
	display: inline-flex !important;
	gap: 6px;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce-pagination ul.page-numbers li {
	display: inline-flex !important;
}
.woocommerce-pagination ul li a.page-numbers,
.woocommerce-pagination ul li span.page-numbers,
.ast-pagination .page-numbers,
.ast-pagination a,
.ast-pagination span,
nav.pagination .page-numbers,
nav.pagination a,
.page-numbers,
a.page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px !important;
	color: var(--ef-color-dark) !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: background .2s, color .2s, border-color .2s;
}
.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce-pagination ul li a.page-numbers:focus,
.ast-pagination a.page-numbers:hover,
.ast-pagination a.page-numbers:focus,
nav.pagination a.page-numbers:hover,
nav.pagination a.page-numbers:focus,
a.page-numbers:hover,
a.page-numbers:focus {
	color: #fff !important;
	background: var(--ef-color-primary) !important;
	border-color: var(--ef-color-primary) !important;
}
.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a.current,
.ast-pagination .page-numbers.current,
nav.pagination .page-numbers.current,
.page-numbers.current {
	color: #fff !important;
	background: var(--ef-color-primary) !important;
	border-color: var(--ef-color-primary) !important;
}
/* "..." dots aren't clickable — keep neutral, no border */
.woocommerce-pagination ul li span.page-numbers.dots,
.page-numbers.dots {
	border: none !important;
	background: transparent !important;
	color: var(--ef-color-muted) !important;
}

/* =============================================================================
   WooCommerce notices — site-wide pink-to-green override.
   Loaded everywhere (not just target pages) so the "added to cart" message
   shown on product/shop pages also gets our brand color, not Astra's pink.
   ========================================================================== */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top: 3px solid var(--ef-color-primary) !important;
	background: rgb(247, 246, 247) !important;
	color: var(--ef-color-text) !important;
	padding: 14px 20px !important;
	margin: 0 0 14px !important;
	border-radius: 0 !important;
	position: relative;
}
/* WC auto-focuses these notices for screen readers, which adds an ugly black
   browser outline. They're non-interactive containers so removing the outline
   is fine for sighted users; SR users still hear them via aria-live. */
.woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus-visible,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none !important;
	content: none !important;
}
/* Action link inside the message ("Voir le panier") */
.woocommerce-message a.wc-forward,
.woocommerce-message .button.wc-forward {
	color: var(--ef-color-primary-d) !important;
	background: transparent !important;
	border: 1px solid var(--ef-color-primary) !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.woocommerce-message a.wc-forward:hover,
.woocommerce-message .button.wc-forward:hover {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
}

/* =============================================================================
   EFC Search (custom live product search) — replaces FiboSearch.
   Pill input with magnifier button; AJAX dropdown shows product thumb +
   highlighted name + price stacked vertically; a "See all results" link
   anchors the bottom when total > visible.
   ========================================================================== */
.efc-search-slot {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	box-sizing: border-box;
}
.efc-search-slot--mobile {
	display: flex;
	width: 100%;
	padding: 14px 18px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--ef-color-line);
}
.efc-search-slot--mobile .efc-search { max-width: 100%; }
/* Defensive: ensure each slot only shows in its intended viewport, aligned to
   the same 1150px breakpoint we force on the Astra header below. */
@media (max-width: 1150px) {
	.efc-search-slot--desktop { display: none !important; }
}
@media (min-width: 1151px) {
	.efc-search-slot--mobile  { display: none !important; }
}

/* Force the mobile navbar to take over below 1150px (instead of Astra's
   default ~921px). Mobile-first: hide the desktop header / show the mobile
   header in the same media query. */
@media (max-width: 1150px) {
	#ast-desktop-header { display: none !important; }
	#ast-mobile-header  { display: block !important; }
}
@media (min-width: 1151px) {
	#ast-desktop-header { display: block !important; }
	#ast-mobile-header  { display: none !important; }
}
.efc-search {
	position: relative;
	width: 100%;
	max-width: 280px;
	box-sizing: border-box;
}
.efc-search__form {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.efc-search__input {
	width: 100%;
	height: 42px;
	padding: 0 48px 0 16px;
	border: 1px solid var(--ef-color-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ef-color-text);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}
.efc-search__input:focus {
	outline: none;
	border-color: var(--ef-color-accent);
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15);
}
.efc-search__input::-webkit-search-cancel-button { display: none; }
.efc-search__submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--ef-color-muted);
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	transition: color .2s, background .2s;
}
.efc-search__submit:hover,
.efc-search__submit:focus {
	color: var(--ef-color-primary-d);
	background: rgba(117, 195, 44, .08);
	outline: none;
}
/* Dropdown: anchored to the RIGHT edge of the input so it extends LEFT into the
   empty space of the navbar; wider than the input for comfortable reading. */
.efc-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: auto;
	right: 0;
	min-width: 100%;
	width: 420px;
	max-width: 90vw;
	z-index: 1000;
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: 14px;
	box-shadow: var(--ef-shadow-lg);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}
/* On mobile (full-width slot) the panel follows the input width. */
.efc-search-slot--mobile .efc-search__panel {
	width: 100%;
	left: 0;
	right: auto;
}
.efc-search__panel[hidden] { display: none; }
.efc-search__loading,
.efc-search__empty {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--ef-color-muted);
	text-align: center;
}
.efc-search__item {
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ef-color-line);
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}
.efc-search__item:last-of-type { border-bottom: none; }
.efc-search__item:hover,
.efc-search__item:focus {
	background: var(--ef-color-soft);
	text-decoration: none;
	color: inherit;
}
.efc-search__thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--ef-radius-sm);
	overflow: hidden;
	background: var(--ef-color-soft);
	flex-shrink: 0;
}
.efc-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.efc-search__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.efc-search__name {
	font-size: 14px;
	color: var(--ef-color-text);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.efc-search__name strong { font-weight: 700; color: var(--ef-color-text); }
.efc-search__price {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ef-color-accent-d);
	line-height: 1.2;
}
.efc-search__price del { color: var(--ef-color-muted); font-weight: 400; margin-right: 6px; opacity: .8; }
.efc-search__price ins { background: none; text-decoration: none; }
.efc-search__more {
	display: block;
	padding: 12px 16px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ef-color-primary-d);
	text-decoration: none;
	border-top: 1px solid var(--ef-color-line);
	background: var(--ef-color-soft);
	transition: background .15s, color .15s;
}
.efc-search__more:hover,
.efc-search__more:focus {
	background: var(--ef-color-primary);
	color: #fff;
	text-decoration: none;
}

/* =============================================================================
   Newsletter form (EFC custom) — replaces Xootix Waitlist. Same visual style.
   ========================================================================== */
.efn-form-wrap {
	margin: 16px 0 32px;          /* bottom margin so the form doesn't hug the next element on product pages */
	padding: 16px;
	background: var(--ef-color-soft);
	border-radius: var(--ef-radius);
	border: 1px solid var(--ef-color-line);
}
.efn-form-header { margin-bottom: 12px; }
.efn-form-heading {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ef-color-dark);
	line-height: 1.3;
}
.efn-form-subheading {
	display: block;
	font-size: 13px;
	color: var(--ef-color-muted);
	margin-top: 4px;
	line-height: 1.4;
}
.efn-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.efn-form-input {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ef-color-text);
	line-height: 1.2;
	height: auto;
}
.efn-form-input:focus {
	outline: none;
	border-color: var(--ef-color-accent);
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15);
}
.efn-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	background: var(--ef-color-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	text-transform: none;
	box-shadow: none;
	transition: background .2s, transform .15s;
	min-height: 42px;
	white-space: nowrap;
}
.efn-form-submit:hover,
.efn-form-submit:focus {
	background: var(--ef-color-primary-d);
	transform: translateY(-1px);
}
.efn-form-submit.is-loading { opacity: .65; cursor: progress; }
.efn-form-submit:disabled { opacity: .6; cursor: not-allowed; }
.efn-form-notices:empty { display: none; }
.efn-form-notice {
	padding: 10px 14px;
	border-radius: var(--ef-radius-sm);
	font-size: 13px;
	margin: 0 0 10px;
}
.efn-form-notice.is-success {
	background: rgba(117, 195, 44, .10);
	color: var(--ef-color-primary-d);
	border-left: 3px solid var(--ef-color-primary);
}
.efn-form-notice.is-error {
	background: rgba(220, 70, 70, .08);
	color: #B33A3A;
	border-left: 3px solid #B33A3A;
}

/* =============================================================================
   Pink-to-green coverage — Astra/WC selectors that resolve to the pink accent
   --ast-global-color-0 (#fc5f5f) by default outside .site-header. Forcing the
   brand green everywhere a customer-facing element renders.
   ========================================================================== */

/* Single product: add-to-cart button + variation add-to-cart */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-page div.product form.cart .single_add_to_cart_button {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	border-color: var(--ef-color-primary) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce-page div.product form.cart .single_add_to_cart_button:hover {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
}

/* Single product: WC tabs (Description / Avis / Informations).
   Astra renders the top accent of the active tab as a 3px ::before whose
   background-color is Astra's --ast-global-color-0 (pink by default). We
   repaint the ::before AND kill any leftover pink border on each tab. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
	border-color: var(--ef-color-line) !important;
}
/* The actual coloured top bar — repaint the pseudo-element's background */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::before {
	background-color: var(--ef-color-primary) !important;
	background: var(--ef-color-primary) !important;
	border-color: var(--ef-color-primary) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ef-color-dark) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ef-color-primary-d) !important;
}

/* Single product: WC "Ajouter un avis" review form — full restyle.
   Flat layout (no card) so it sits cleanly inside the Avis tab panel without
   creating a double-container look. */
.woocommerce #review_form_wrapper {
	margin-top: 24px;
	padding: 0;
	background: transparent;
	border: none;
}
.woocommerce #review_form #respond.comment-respond,
.woocommerce #reviews #respond.comment-respond {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce #reviews #respond .comment-reply-title,
.woocommerce #review_form #reply-title {
	display: block;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ef-color-dark) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
.woocommerce #review_form #respond .comment-form-rating {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.woocommerce #review_form #respond .comment-form-rating label {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ef-color-dark);
	margin: 0 !important;
}
.woocommerce #review_form #respond .comment-form-comment label,
.woocommerce #review_form #respond .comment-form-author label,
.woocommerce #review_form #respond .comment-form-email label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ef-color-dark);
	margin-bottom: 8px;
}
/* Star picker — bigger, green. Force line-height:1 on every nested element
   (p > span > a) so the absolutely-positioned star ::before doesn't drift
   below its anchor's baseline. Removed the 24px width override that fought
   WC's native 1em/1em sizing. */
.woocommerce p.stars {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 22px;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce p.stars span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1 !important;
}
.woocommerce p.stars a {
	color: #d0d0d0;
	transition: color .15s;
	line-height: 1 !important;
	vertical-align: middle;
}
/* Astra-js sets `position: relative; top: 8px` directly on the <a> (selector:
   .woocommerce-js #reviews .comment-form-rating .stars a), which pushes the
   entire star down. Reset top to 0 with matching specificity. */
.woocommerce-js #reviews .comment-form-rating .stars a,
.woocommerce #reviews .comment-form-rating .stars a,
.woocommerce-page #reviews .comment-form-rating .stars a {
	top: 0 !important;
}
.woocommerce p.stars a:hover,
.woocommerce p.stars a:hover ~ a {
	color: #d0d0d0 !important;
}
.woocommerce p.stars:hover a {
	color: var(--ef-color-primary) !important;
}
.woocommerce p.stars:hover a:hover ~ a {
	color: #d0d0d0 !important;
}
.woocommerce p.stars a.active,
.woocommerce p.stars.selected a:not(.active) ~ a {
	color: #d0d0d0 !important;
}
.woocommerce p.stars.selected a.active,
.woocommerce p.stars.selected a.active ~ a,
.woocommerce p.stars.selected a:not(.active) {
	color: var(--ef-color-primary) !important;
}
/* Textarea + inputs */
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius) !important;
	background: #fff !important;
	font: inherit !important;
	font-size: 14px !important;
	color: var(--ef-color-text) !important;
	line-height: 1.5 !important;
	transition: border-color .2s, box-shadow .2s;
}
.woocommerce #review_form #respond textarea {
	min-height: 140px;
	resize: vertical;
}
.woocommerce #review_form #respond textarea:focus,
.woocommerce #review_form #respond input:focus {
	outline: none;
	border-color: var(--ef-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15) !important;
}
/* Submit button */
.woocommerce #review_form #respond .form-submit input,
.woocommerce #review_form #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px !important;
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	min-height: 44px;
	transition: background .2s, transform .15s;
	box-shadow: none !important;
}
.woocommerce #review_form #respond .form-submit input:hover,
.woocommerce #review_form #respond input#submit:hover {
	background: var(--ef-color-primary-d) !important;
	transform: translateY(-1px);
}
.woocommerce #review_form #respond .comment-form-cookies-consent {
	margin: 14px 0;
	font-size: 13px;
	color: var(--ef-color-muted);
}
.woocommerce #review_form #respond .comment-form-cookies-consent input {
	margin-right: 8px;
}

/* Single product: quantity +/- spinner */
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
	border-color: var(--ef-color-line) !important;
}
.woocommerce .quantity .qty:focus,
.woocommerce-page .quantity .qty:focus {
	border-color: var(--ef-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15) !important;
	outline: none;
}

/* Star ratings (shop, single, reviews) */
.woocommerce .star-rating::before,
.woocommerce-page .star-rating::before,
.woocommerce p.stars a,
.woocommerce p.stars a:hover ~ a {
	color: #d0d0d0;
}
.woocommerce .star-rating span,
.woocommerce-page .star-rating span,
.woocommerce p.stars a:hover,
.woocommerce p.stars.selected a:not(.active) {
	color: var(--ef-color-primary) !important;
}

/* Sale "Promo" badge */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
}

/* Sale price highlighting site-wide */
.woocommerce .price ins,
.woocommerce-page .price ins,
.woocommerce-Price-amount.amount ins {
	background: transparent !important;
	color: var(--ef-color-primary-d) !important;
	font-weight: 700;
	text-decoration: none;
}
.woocommerce .price del,
.woocommerce-page .price del {
	color: var(--ef-color-muted) !important;
	opacity: .8;
}

/* My-account navigation (active tab) */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--ef-color-primary-d) !important;
}
.woocommerce-MyAccount-navigation li.is-active {
	border-color: var(--ef-color-primary) !important;
}

/* My-account: all WC buttons outside checkout (login, register, lost pwd, edit address) */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account button.woocommerce-button,
.woocommerce-account a.woocommerce-button {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	border-color: var(--ef-color-primary) !important;
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
}

/* Generic form focus rings — pull anything that wasn't covered explicitly */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--ef-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15) !important;
	outline: none;
}

/* Checkout terms/privacy links — Astra paints these pink via --ast-global-color-0 */
.woocommerce-terms-and-conditions-link,
.woocommerce-privacy-policy-text a,
.woocommerce-privacy-policy-link,
.woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--ef-color-primary-d) !important;
	text-decoration: underline;
}
.woocommerce-terms-and-conditions-link:hover,
.woocommerce-privacy-policy-text a:hover,
.woocommerce-privacy-policy-link:hover,
.woocommerce-terms-and-conditions-checkbox-text a:hover {
	color: var(--ef-color-primary) !important;
}

/* Prose / product description links */
.ef-prose a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a:not(.button) {
	color: var(--ef-color-primary-d);
	text-decoration: underline;
}
.ef-prose a:hover,
.woocommerce-product-details__short-description a:hover,
.woocommerce-Tabs-panel a:not(.button):hover {
	color: var(--ef-color-primary);
}

/* Breadcrumbs — Astra + WC */
.woocommerce .woocommerce-breadcrumb a,
.ast-breadcrumbs .trail-items a,
.ast-breadcrumbs-wrapper a {
	color: var(--ef-color-text);
}
.woocommerce .woocommerce-breadcrumb a:hover,
.ast-breadcrumbs .trail-items a:hover,
.ast-breadcrumbs-wrapper a:hover {
	color: var(--ef-color-primary-d);
}

/* Result count + ordering on shop/category */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { color: var(--ef-color-muted); }
.woocommerce .woocommerce-ordering select:focus { border-color: var(--ef-color-accent) !important; }

/* ---------- CLS reservations on single product pages ----------
 * Two layout-shift killers Lighthouse flagged on #content and .woocommerce-tabs.
 *
 * 1) Product gallery: pre-init, WC renders all images stacked vertically
 *    inside .woocommerce-product-gallery__wrapper (~3× the final height).
 *    FlexSlider then collapses them into a single visible slide, yanking
 *    the rest of the page up. We reserve the final aspect with
 *    `aspect-ratio: 1 / 1` — main image is 4:3 (W × 3/4), the square thumb
 *    strip below adds ~W/4, total ≈ square — and clip overflow during the
 *    pre-init frames.
 *
 * 2) Tabs: server-side WC outputs all panels visible. Stacking gives a
 *    wrapper height of ~2420px on this product (1101 description + 692 +
 *    628 reviews). WC's JS then hides all but the first → wrapper drops
 *    to ~1218px. The 1200px collapse is what Lighthouse measured.
 *    Hiding non-first panels via CSS from the start gives the same final
 *    state during the first paint. WC's JS picks up correctly from there.
 *    The ul.tabs min-height absorbs the small active-state styling jump
 *    (active tab gets bolder + underline ≈ a few px taller). */
.woocommerce div.product .woocommerce-product-gallery {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel ~ .woocommerce-Tabs-panel {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	min-height: 120px;
}
/* WC's tabs.js does $('.panel').hide() then re-shows the active panel during
 * init. Between those calls there is a brief frame where ALL panels are
 * display:none, so the wrapper shrinks from ~1220px (tabs + description) down
 * to ~117px (headers only), then expands again. That cycle is the dominant
 * CLS contributor on a cold-cache load (Lighthouse measured 0.166 on this
 * shift alone). Reserve the wrapper at its post-init size so the transient
 * shrink doesn't move anything. The dead space is only visible on cold loads
 * during a few frames; user-triggered tab switches don't count for CLS. */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
	min-height: 1250px;
}
/* Reserve aspect on product images so the browser locks layout BEFORE the
 * image bytes arrive — kills the "Image non redimensionnée" CLS attribution
 * Lighthouse flagged on .wp-post-image and the related-products thumbs. */
.woocommerce div.product img.wp-post-image,
.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.woocommerce img.attachment-woocommerce_thumbnail {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
}
/* The whole variations_form area grows during WC's JS init. Measured with
 * Puppeteer: form renders at 280px on first paint, settles at 310px after
 * variations.js populates dropdowns + adds the Clear link. min-height set
 * to 320 with a small buffer so any 0px shift even with longer attribute
 * labels in translation. */
.woocommerce div.product form.variations_form {
	min-height: 320px;
}
.woocommerce div.product .single_variation_wrap {
	min-height: 110px;
}

/* Astra header logo container (.site-branding) grows from h=59 → 105 when
 * the logo image finishes loading (image lacks explicit intrinsic dimensions
 * for the wrapper flex calc). The +46px wrapper growth cascades into a 35px
 * shift on every element below in #content. Lock just the logo slot — the
 * previous selector .ast-builder-layout-element.site-header-focus-item also
 * matched the menu and cart slots, which inflated the right header section
 * and re-introduced CLS. */
.site-branding.ast-site-identity {
	min-height: 105px;
}

/* Mobile: Astra's header row briefly wraps to multiple lines during load
 * (icon font swap widens items past the 412px viewport, items wrap to 2-3
 * rows, header grows from h=105 → h=246, then unwraps back as the layout
 * stabilises). Lab CLS attributed ~0.32 of the 0.35 total to this single
 * bloat→deflate cycle on Moto G Power Slow 4G. Capping the row's height
 * with overflow:hidden traps the transient wrap inside the header so it
 * stops cascading into #content. Final rendered height is 105px so the
 * cap doesn't clip anything in steady state. */
@media (max-width: 921px) {
	.ast-main-header-wrap .ast-builder-grid-row.ast-builder-grid-row-has-sides {
		max-height: 110px;
		overflow: hidden;
	}
}

/* Sticky add-to-cart bar (Astra Pro) */
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-button {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	border-color: var(--ef-color-primary) !important;
}
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-button:hover {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
}

/* Mobile drawer menu items hover state */
#ast-mobile-header .ast-mobile-popup-content a:hover,
.ast-mobile-popup-drawer .menu-item > a:hover,
#ast-mobile-header .ast-mobile-header-content a:hover {
	color: var(--ef-color-primary-d) !important;
}