/* ============================================================
   WooCommerce — La Poulette à Facettes
   On-brand overrides. Loaded only on shop / cart / checkout / account.
   Tokens mirror style.css (:root). Green button system, cream ground,
   Bricolage headings / DM Sans body, 14px cards, 8px buttons.
   ============================================================ */

/* Header — WooCommerce stylesheets load AFTER style.css on shop pages and were
   letting the logo/nav render unstyled (giant logo, wrapping nav). Reassert. */
/* Unscoped (not .site-header) because on the cart page the header renders WITHOUT
   the site-header class; woocommerce.css only loads on shop pages so this is safe. */
.header-bar{display:flex !important; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:1rem; max-width:1120px; margin:0 auto; padding:.55rem 24px;}
.logo img{height:66px !important; width:auto !important;}
.nav{display:flex !important; align-items:center; gap:1.4rem;}
.header-actions{display:flex !important; align-items:center; gap:.7rem;}
/* Mobile: style.css hides the core nav via `.site-header .nav`, which never
   matches here (WooCommerce strips .site-header) — and the rule above would
   force it visible anyway. Without this we render two hamburgers: the core
   Navigation block's and our own .lp-burger. */
@media (max-width:781px){
	.nav{display:none !important;}
}
/* Header background/sticky: the container rule in style.css is scoped to
   .site-header, which WooCommerce strips on cart/checkout — reassert it here. */
.wp-site-blocks > header,
header.wp-block-template-part{position:sticky; top:0; z-index:100; background:rgba(248,243,230,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.wp-site-blocks > header .facet,
header.wp-block-template-part .facet{margin-block:0;}

/* ============================================================
   FOOTER — WooCommerce strips the .site-footer class from the footer
   template part on cart/checkout/shop pages, so the dark aubergine panel
   rule (footer.site-footer{...}) in style.css never matches and the light
   footer text renders invisibly on the cream page. Reassert the layout
   unscoped (safe: woocommerce.css only loads on shop pages).
   ============================================================ */
/* The footer template part renders as <footer> on normal pages but as a plain
   <div class="wp-block-template-part"> on block templates (e.g. the order-
   confirmation page). Match both via :is()/:has(.foot-grid) so the dark panel
   applies everywhere. */
:is(.wp-site-blocks > footer, footer.wp-block-template-part, .wp-block-template-part:has(> .foot-grid)){margin-top:0; border-radius:0; overflow:hidden; background:var(--aubergine); color:rgba(248,243,230,.85);}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .facet{margin-block:0;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-grid{max-width:1120px; margin:0 auto; padding:clamp(2.2rem,4.5vw,3rem) 24px 1.3rem; display:grid; grid-template-columns:1.6fr 1fr; gap:2.5rem;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .brand-row{display:flex; align-items:center; flex-wrap:wrap; gap:.9rem .95rem;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .brand-row .brand-line{margin:0;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .brand-row .foot-social{margin:0; align-items:center;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .brand-line{font-family:var(--font-display); font-weight:700; color:var(--cream); font-size:1.3rem;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-desc{margin:.8rem 0 0; font-size:.92rem; max-width:42ch; color:rgba(248,243,230,.8);}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-address{color:rgba(248,243,230,.82);}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .owners{margin-top:.7rem; font-size:.9rem; color:rgba(248,243,230,.7);}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-bottom{max-width:1120px; margin:0 auto; padding:1.2rem 24px 2rem; border-top:1px solid rgba(248,243,230,.16); text-align:center;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .bio-logos{display:flex; align-items:flex-end; gap:14px;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-grid .bio-logos{margin:.5rem 0 .7rem; flex-wrap:wrap; justify-content:flex-end;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .bio-logos img{height:56px; width:auto; display:block;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-block{display:flex; align-items:center; justify-content:center; gap:1.52rem; max-width:none; margin:0 auto; text-align:left;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-logos{flex:0 0 auto; display:flex; align-items:center; gap:1.1rem;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-logos a{display:block; line-height:0;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-logo{width:auto; height:54px; display:block;}
:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-note{display:block; margin:0; max-width:none; font-size:.9rem; line-height:1.55; color:rgba(248,243,230,.72);}
@media(max-width:820px){
	:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-grid{grid-template-columns:1fr; gap:1.8rem;}
	:is(footer, .wp-block-template-part:has(> .foot-grid)) .foot-grid .bio-logos{justify-content:flex-start;}
}
@media(max-width:560px){
	:is(footer, .wp-block-template-part:has(> .foot-grid)) .funding-block{flex-direction:column; align-items:flex-start; gap:1rem;}
}

/* ---- Page ground: keep the theme cream everywhere ---- */
.woocommerce,
.woocommerce-page {
	color: var(--ink);
	font-family: var(--font-body);
}

/* ============================================================
   BUTTONS — green system, override WooCommerce greys/purples
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.wc-block-components-button,
.wp-block-button__link {
	background: var(--leaf);
	color: var(--cream);
	border: 1.5px solid var(--leaf);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .01em;
	padding: .72rem 1.4rem;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
	line-height: 1.2;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover {
	background: var(--leaf-deep);
	color: var(--cream);
	border-color: var(--leaf-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(18, 77, 38, .28);
}

/* "Voir le panier" in the added-to-cart notice — simple text link */
.woocommerce-message a.button.wc-forward,
.wc-block-components-notice-banner a.button.wc-forward {
	background: none;
	color: var(--leaf);
	border: none;
	border-radius: 0;
	padding: 0;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: none;
	transform: none;
	box-shadow: none;
	line-height: inherit;
}
.woocommerce-message a.button.wc-forward:hover,
.wc-block-components-notice-banner a.button.wc-forward:hover {
	background: none;
	color: var(--leaf-deep);
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--muted);
	border-color: var(--muted);
	color: var(--cream);
	opacity: .6;
	transform: none;
	box-shadow: none;
}

/* "Added" ghost/view-cart secondary button */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: .5rem;
	color: var(--leaf);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce a.added_to_cart:hover { color: var(--leaf-deep); }

/* ============================================================
   NOTICES — green/cream, not WooCommerce blue/purple
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-store-notice {
	background: #eef4ec;
	border-top: 3px solid var(--leaf);
	border-radius: 12px;
	color: var(--aubergine);
	font-family: var(--font-body);
	box-shadow: none;
}
.woocommerce-error {
	background: #faece9;
	border-top-color: var(--raspberry);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--leaf);
}
.woocommerce-error::before { color: var(--raspberry); }

/* ============================================================
   SHOP ARCHIVE — grid of product cards
   ============================================================ */
.woo-shop-band { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.4rem); }

/* Result count / ordering row */
.woo-shop .woocommerce-result-count {
	color: var(--muted);
	font-size: .92rem;
	margin: 1.4rem 0 .4rem;
}
.woo-shop .woocommerce-ordering { margin: .8rem 0 1.4rem; }
.woo-shop .woocommerce-ordering select,
.woocommerce-ordering select {
	font-family: var(--font-body);
	font-size: .92rem;
	color: var(--aubergine);
	background: var(--card);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-btn);
	padding: .5rem .8rem;
}

/* The grid itself */
.woo-shop ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.2rem, 2.5vw, 1.8rem);
	margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woo-shop ul.products li.product,
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Card shell (mirrors theme .product-card) */
.woocommerce ul.products li.product.product-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	text-align: left;
}
.woocommerce ul.products li.product.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(22, 29, 23, .12);
}

/* Illustration / placeholder */
.product-illus-link { display: block; position: relative; }
.lpaf-illus {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 1.2rem;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}
.lpaf-illus svg { width: 60%; height: auto; max-height: 130px; }
.lpaf-illus--photo { padding: 0; background: var(--paper); }
/* Hover image swap: crossfade to the product's first gallery image. */
.lpaf-illus--has-hover { position: relative; }
.lpaf-illus--has-hover img { transition: opacity .3s ease; }
.lpaf-illus--has-hover .lpaf-illus__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.product-card:hover .lpaf-illus--has-hover .lpaf-illus__hover { opacity: 1; }
/* Beat WooCommerce's `.woocommerce ul.products li.product a img` (0,3,4),
   which forces height:auto + margin:0 0 1em (a bottom gap under the photo). */
.woocommerce ul.products li.product .lpaf-illus--photo img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	display: block;
}

/* Body */
.woocommerce ul.products li.product .product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.2rem 1.3rem;
	border-top: 1px solid var(--border);
}
.product-body .product-cat {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--leaf);
	margin: 0 0 .35rem;
}
.woocommerce ul.products li.product .product-title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--aubergine);
	font-size: 1.12rem;
	line-height: 1.15;
	margin: 0;
	letter-spacing: -.01em;
}
.woocommerce ul.products li.product .product-title a {
	color: inherit;
	text-decoration: none;
}
.woocommerce ul.products li.product .product-title a:hover { color: var(--leaf); }
.product-body .product-desc {
	color: rgba(22, 29, 23, .72);
	font-size: .92rem;
	margin: .5rem 0 0;
	flex: 1;
}
.product-body .product-avail {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: .35rem;
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.1;
	margin: .7rem 0 0;
	padding: .3rem .6rem;
	border-radius: 999px;
	background: rgba(25, 102, 50, .10);
	color: var(--leaf-deep);
}
.product-body .product-avail svg {
	width: 13px; height: 13px;
	flex: 0 0 13px;
	stroke: currentColor;
	fill: none;
}
/* Pickup-only availability = warm amber tint */
.product-card[data-avail="uniquement-a-la-ferme"] .product-body .product-avail {
	background: rgba(234, 190, 74, .22);
	color: #8a6a10;
}
.product-body .product-tags {
	font-size: .82rem;
	color: var(--muted);
	margin: .35rem 0 0;
}
.product-body .product-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .6rem;
	margin: auto 0 0;
	padding-top: .9rem;
}
.product-body .product-price,
.woocommerce ul.products li.product .product-meta .price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--aubergine);
	font-size: 1.3rem;
	margin: 0;
}
.product-body .product-price .woocommerce-Price-amount { color: var(--aubergine); }
.product-body .product-unit { font-size: .85rem; color: var(--muted); }

/* Card add-to-cart: full width */
.woocommerce ul.products li.product .product-body .button,
.woocommerce ul.products li.product .product-body a.button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: .9rem;
}
.woocommerce ul.products li.product .product-body .added_to_cart {
	text-align: center;
	width: 100%;
}

/* Loading spinner colour on ajax add */
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after { color: var(--cream); }

/* ============================================================
   SHOP INTRO — compact trust strip (bio / made on the farm)
   ============================================================ */
.shop-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem 1.5rem;
	margin: 1rem 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--aubergine);
}
.shop-trust .trust-item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.shop-trust .ti-ico { width: 18px; height: 18px; flex: none; color: var(--leaf); fill: currentColor; }

/* ============================================================
   BOUTIQUE FILTER BAR — client-side: category chips + availability
   ============================================================ */
.shop-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.2rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: .7rem .85rem;
	margin: 0 0 1.8rem;
}
.shop-filter .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.shop-filter .filter-cats { flex: 1 1 auto; }
.shop-filter .filter-avail { flex: 0 0 auto; }

.filter-chip {
	font-family: var(--font-body);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	color: var(--aubergine);
	background: var(--paper);
	border: 1.5px solid var(--border);
	border-radius: 8px;
	padding: .5rem .8rem;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.filter-chip:hover { border-color: var(--leaf); color: var(--leaf); }
.filter-chip.is-active {
	background: var(--leaf);
	border-color: var(--leaf);
	color: #fff;
	box-shadow: 0 5px 12px rgba(18, 77, 38, .18);
}

.filter-avail-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	margin-right: .1rem;
}
.filter-seg {
	font-family: var(--font-body);
	font-size: .84rem;
	font-weight: 600;
	line-height: 1;
	color: var(--muted);
	background: transparent;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	padding: .44rem .7rem;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.filter-seg:hover { color: var(--aubergine); border-color: var(--muted); }
.filter-seg.is-active { background: var(--aubergine); border-color: var(--aubergine); color: #fff; }

.filter-noresults {
	flex-basis: 100%;
	margin: .3rem 0 0;
	color: var(--muted);
	font-style: italic;
}
.filter-noresults[hidden] { display: none; }

/* Image overlay badge (e.g. "Sans sucre ajouté" on cuirs de fruits) */
.img-badge {
	position: absolute;
	z-index: 2;
	top: .6rem;
	left: .6rem;
	background: var(--leaf);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .3rem .55rem;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.woo-single .wide { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.4rem); }
.woo-single .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	color: var(--muted);
	font-size: .88rem;
	margin-bottom: 1.4rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--leaf); }

/* "Tous les produits" back link (replaces the removed breadcrumb) */
.woo-single .lpaf-back-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: 1.3rem;
	color: var(--leaf);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}
.woo-single .lpaf-back-link svg { width: 16px; height: 16px; }
.woo-single .lpaf-back-link:hover { color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 3px; }

.woocommerce div.product { margin-top: .5rem; }
.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--aubergine);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	letter-spacing: -.02em;
	line-height: 1.05;
}
.woocommerce div.product .product_title { margin: 0 0 .2rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--aubergine);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	margin: .6rem 0 0;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: rgba(22, 29, 23, .78);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 1rem 0 0;
}

/* Enriched summary meta — unit under the price, availability + badges
   just above the add-to-cart form (mirrors the shop-card richness). */
.woocommerce div.product .summary .lpaf-single-unit {
	color: var(--muted);
	font-size: .95rem;
	font-weight: 500;
	margin: .25rem 0 0;
}
.woocommerce div.product .summary .product-avail {
	font-size: .95rem;
	color: var(--muted);
	margin: 1rem 0 0;
	line-height: 1.45;
	display: flex;
	align-items: flex-start;
	gap: .45rem;
}
.woocommerce div.product .summary .product-avail svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin-top: .12rem;
	stroke: var(--leaf);
	fill: none;
}
.woocommerce div.product .summary .lpaf-single-badges {
	font-size: .88rem;
	color: var(--muted);
	letter-spacing: .01em;
	margin: .45rem 0 0;
}

/* Single product image / placeholder */
.woocommerce div.product div.images img { border-radius: 14px; }
.woocommerce div.product div.images .lpaf-illus,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .lpaf-illus {
	aspect-ratio: 1 / 1;
	border-radius: 14px;
}
.woocommerce-product-gallery { position: relative; }

/* Gallery thumbnail strip — WooCommerce defaults it to floated 25%-wide
   columns (oversized with few images, hugs the left, no gaps). Make it a
   tidy flex row of fixed, rounded thumbs. Selectors match Woo's exactly;
   this file loads later so equal specificity wins. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .75rem;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 10px;
}

/* Quantity + add to cart — lay the field and button on one aligned row */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .7rem;
	margin: 1.4rem 0 0;
}
/* Neutralise WooCommerce's clearfix ::before/::after: as flex items they add a
   phantom leading column (one gap wide) that indented the quantity box. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; display: none; }
.woocommerce div.product form.cart .quantity {
	margin: 0;
	float: none;
}
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
	-moz-appearance: textfield;
	appearance: textfield;
	width: 4rem;
	height: 100%;
	min-height: 3rem;
	box-sizing: border-box;
	background: var(--card);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-btn);
	color: var(--aubergine);
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	padding: .5rem .4rem;
	margin: 0;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce .quantity .qty:focus,
.woocommerce div.product form.cart .quantity .qty:focus {
	border-color: var(--leaf);
	outline: none;
	box-shadow: 0 0 0 3px rgba(25, 102, 50, .12);
}
/* Keep the native number steppers visible as a +/- affordance */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
	opacity: 1;
	height: 1.6rem;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	min-height: 3rem;
	padding: .8rem 1.8rem;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Meta (SKU/category/tags) */
.woocommerce div.product .product_meta {
	font-size: .88rem;
	color: var(--muted);
	border-top: 1px solid var(--border);
	padding-top: 1rem;
	margin-top: 1.4rem;
}
.woocommerce div.product .product_meta a { color: var(--leaf); }

/* ---- Variable product: variation selectors + add-to-cart ---- */
/* The variations form must NOT use the simple-form flex row: it holds a
   table of selects, then the price + qty/button row underneath. */
.woocommerce div.product form.variations_form.cart {
	display: block;
	margin: 1.4rem 0 0;
}
.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
	background: transparent;
	border-collapse: collapse;
}
.woocommerce div.product form.cart table.variations tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	border: 0;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
	border: 0;
	padding: .35rem 0;
	background: transparent;
	vertical-align: middle;
}
.woocommerce div.product form.cart table.variations th.label {
	width: auto;
	flex: 0 0 auto;
}
.woocommerce div.product form.cart table.variations th.label label {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--aubergine);
	margin: 0;
}
.woocommerce div.product form.cart table.variations td.value {
	flex: 1 1 12rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
}

/* The variation SELECT dropdown, on-brand */
.woocommerce div.product form.cart .variations select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 12rem;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: .98rem;
	color: var(--aubergine);
	background-color: var(--card);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-btn);
	padding: .6rem 2.4rem .6rem .85rem;
	line-height: 1.3;
	box-shadow: none;
	cursor: pointer;
	/* caret */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234e594f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--leaf);
	outline: none;
	box-shadow: 0 0 0 3px rgba(25, 102, 50, .12);
}

/* Reset link — subtle */
.woocommerce div.product form.cart .reset_variations {
	font-size: .84rem;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--leaf); }

/* Selected-variation price + availability area */
.woocommerce div.product .single_variation_wrap { margin-top: .2rem; }
.woocommerce div.product .woocommerce-variation.single_variation {
	margin-bottom: .9rem;
}
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .single_variation .price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--aubergine);
	font-size: 1.5rem;
}
.woocommerce div.product .woocommerce-variation-description { color: rgba(22,29,23,.78); }

/* Qty + button row for variable products */
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .7rem;
}
.woocommerce div.product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
	opacity: .5;
	cursor: not-allowed;
}

/* ---- Inline Description section (replaces the removed tabs) ---- */
.woocommerce div.product .lpaf-single-description,
.lpaf-single-description {
	margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--border);
	max-width: 60ch;
}
.lpaf-single-description h2 {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--aubergine);
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	letter-spacing: -.01em;
	margin: 0 0 .6rem;
}
.lpaf-single-description p {
	color: rgba(22, 29, 23, .8);
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0 0 .8rem;
}

/* Sections after the summary must clear the floated gallery + summary columns
   and span the full width — otherwise "Produits similaires" wraps up beside
   the product image instead of sitting below it. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .lpaf-single-description,
.woocommerce div.product .up-sells,
.woocommerce div.product .related.products {
	clear: both;
	width: 100%;
}
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
	margin-top: clamp(2rem, 5vw, 3.4rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--border);
}

/* Related products heading */
.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--aubergine);
	letter-spacing: -.01em;
}

/* ============================================================
   CART  (classic [woocommerce_cart] — table.shop_table.cart)
   Desktop layout only; WooCommerce's woocommerce-smallscreen.css
   stacks the table below 768px, so no unconditional display
   overrides on rows/cells here (they'd fight the responsive CSS).
   ============================================================ */
.woocommerce-cart .woocommerce { max-width: 100%; }

/* Shared shop_table shell (cart + totals) */
.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 1.5rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1rem 1.1rem;
	vertical-align: middle;
}
.woocommerce table.shop_table thead th {
	font-family: var(--font-display);
	color: var(--aubergine);
	background: var(--paper);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table tbody td {
	color: var(--ink);
	border-top: 1px solid var(--border);
}
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }

/* Force normal table rendering on the classic cart — WooCommerce's own
   stylesheets (wc-blocks / layout) were reordering thead/tbody into a broken
   flex/grid layout (product row above the column headers).
   Desktop only: below 769px these !important display rules also beat
   woocommerce-smallscreen.css (loaded with media="max-width:768px"), which left
   a six-column table overflowing a phone viewport with its data-title labels
   ("Produit:", "Prix:") stranded inline. Mobile gets the card layout further down. */
@media (min-width: 769px) {
	.woocommerce-cart table.cart { display: table !important; table-layout: auto; }
	.woocommerce-cart table.cart thead { display: table-header-group !important; }
	.woocommerce-cart table.cart tbody { display: table-row-group !important; }
	.woocommerce-cart table.cart tr { display: table-row !important; }
	.woocommerce-cart table.cart th,
	.woocommerce-cart table.cart td { display: table-cell !important; float: none !important; }
}
.woocommerce-cart .woocommerce-cart-form { display: block !important; }

/* Cart-specific columns */
.woocommerce-cart table.cart .product-remove { width: 2.6rem; text-align: center; }
.woocommerce-cart table.cart .product-thumbnail { width: 5rem; }
.woocommerce-cart table.cart img,
.woocommerce-cart table.cart .product-thumbnail img {
	width: 64px;
	height: 64px;
	max-width: none;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--border);
	display: block;
}
/* Branded SVG placeholder shown small + square in the thumbnail cell */
.woocommerce-cart table.cart .product-thumbnail .lpaf-illus {
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
	padding: .4rem;
	border-radius: 8px;
	border: 1px solid var(--border);
}
.woocommerce-cart table.cart .product-thumbnail .lpaf-illus svg { width: 70%; }

.woocommerce-cart table.cart td.product-name {
	font-family: var(--font-body);
	font-weight: 500;
}
.woocommerce-cart table.cart td.product-name a {
	color: var(--aubergine);
	text-decoration: none;
	font-weight: 600;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--leaf); }
.woocommerce-cart table.cart td.product-name .variation,
.woocommerce-cart table.cart td.product-name dl.variation {
	font-size: .84rem;
	color: var(--muted);
	margin: .25rem 0 0;
}

/* Price / subtotal right-aligned on desktop */
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal {
	text-align: right;
	white-space: nowrap;
}
.woocommerce-cart table.cart td.product-subtotal { font-weight: 600; color: var(--aubergine); }

/* Quantity cell — reuse the .qty styling used elsewhere */
.woocommerce-cart table.cart td.product-quantity .quantity { margin: 0; }
.woocommerce-cart table.cart td.product-quantity .qty {
	width: 4.6rem;
	min-height: 2.6rem;
}

/* Remove (×) link — subtle round chip */
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	line-height: 1;
	border-radius: 50%;
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--muted) !important;
	background: transparent;
	border: 1px solid var(--border);
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.woocommerce a.remove:hover {
	background: var(--raspberry) !important;
	border-color: var(--raspberry);
	color: #fff !important;
}

/* Actions row (coupon + update cart) — keep the cell as a real table-cell so
   colspan still spans the full table width; coupon floats left, "Mettre à
   jour" floats right, with a clearfix on the cell. */
@media (min-width: 769px) {
	.woocommerce-cart table.cart tr.actions { display: table-row !important; }
	.woocommerce-cart table.cart td.actions { display: table-cell !important; }
}
.woocommerce-cart table.cart td.actions {
	background: var(--paper);
	padding: 1rem 1.1rem;
	text-align: left;
	vertical-align: middle;
}
.woocommerce-cart table.cart td.actions::after { content: ""; display: block; clear: both; }
.woocommerce-cart table.cart td.actions .coupon {
	display: inline-flex;
	align-items: stretch;
	gap: .5rem;
	float: left;
	margin: 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce .coupon .input-text {
	width: auto;
	min-width: 11rem;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-btn);
	background: var(--card);
	color: var(--ink);
	font-family: var(--font-body);
	padding: .6rem .8rem;
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: var(--leaf);
	outline: none;
	box-shadow: 0 0 0 3px rgba(25, 102, 50, .12);
}
.woocommerce-cart table.cart td.actions > .button[name="update_cart"],
.woocommerce-cart table.cart td.actions > button[name="update_cart"] {
	float: right;
	margin: 0;
}

/* ---- Cart on mobile: one card per line item ----------------------------
   WooCommerce's smallscreen stylesheet only stacks cells into right-aligned
   rows with "Label: " prefixes, which reads poorly and drops the thumbnail.
   We lay each row out as a grid card instead: image + name + remove on top,
   price under the name, quantity and line total on the bottom row.
   !important where woocommerce-smallscreen.css uses it (text-align on td). */
@media (max-width: 768px) {
	.woocommerce-cart table.cart {
		display: block;
		border: 0;
		background: transparent;
		border-radius: 0;
		overflow: visible;
		margin-bottom: 1.2rem;
	}
	.woocommerce-cart table.cart thead { display: none; }
	.woocommerce-cart table.cart tbody { display: block; }

	.woocommerce-cart table.cart tbody tr.cart_item {
		display: grid;
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"rule  rule   rule"
			"qty   qty    subtotal";
		align-items: center;
		gap: .35rem .8rem;
		padding: .9rem 1rem;
		margin: 0 0 .8rem;
		border: 1px solid var(--border);
		border-radius: 14px;
		background: var(--card) !important;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left !important;
		/* smallscreen zebra-stripes even rows (tr:nth-child(2n) td) — that reads
		   as a stray grey band inside a card. */
		background: transparent !important;
	}
	/* The "Produit: " / "Prix: " prefixes smallscreen injects — the card's
	   own layout already says what each value is. */
	.woocommerce-cart table.cart tbody tr.cart_item td::before { content: none !important; }

	/* smallscreen hides the thumbnail; it's the fastest way to recognise a row. */
	.woocommerce-cart table.cart .product-thumbnail {
		display: block !important;
		grid-area: thumb;
		align-self: start;
		width: auto;
	}
	.woocommerce-cart table.cart td.product-name {
		grid-area: name;
		font-size: .98rem;
		line-height: 1.3;
	}
	.woocommerce-cart table.cart td.product-remove {
		grid-area: remove;
		align-self: start;
		width: auto;
	}
	.woocommerce-cart table.cart td.product-price {
		grid-area: price;
		align-self: start;
		color: var(--muted);
		font-size: .9rem;
	}
	/* One continuous divider above the quantity row. A border-top on the two
	   cells instead would render as two segments split by the column gap. The
	   tr is display:grid, so its ::before becomes a grid item we can place. */
	.woocommerce-cart table.cart tbody tr.cart_item::before {
		content: "";
		grid-area: rule;
		border-top: 1px solid var(--border);
		margin: .5rem 0 .1rem;
	}
	.woocommerce-cart table.cart tbody tr.cart_item::after { content: none; display: none; }
	.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
	.woocommerce-cart table.cart td.product-subtotal {
		grid-area: subtotal;
		text-align: right !important;
		font-weight: 600;
		color: var(--aubergine);
	}

	/* Actions: coupon field + both buttons stacked full width */
	.woocommerce-cart table.cart tr.actions { display: block; }
	.woocommerce-cart table.cart td.actions {
		display: block;
		background: transparent;
		padding: 0;
	}
	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		float: none;
		margin: 0 0 .6rem;
		padding-bottom: 0;
	}
	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce-cart table.cart td.actions .coupon .button {
		width: 100% !important;
		float: none !important;
		min-width: 0;
	}
	.woocommerce-cart table.cart td.actions > .button[name="update_cart"],
	.woocommerce-cart table.cart td.actions > button[name="update_cart"] {
		float: none !important;
		display: block;
		width: 100%;
	}

	/* Totals: label left, amount right on one line (smallscreen hides the th
	   and right-aligns everything, which stacked them awkwardly). */
	.woocommerce-cart .cart_totals table.shop_table tbody th {
		display: table-cell !important;
		width: 50%;
	}
	.woocommerce-cart .cart_totals table.shop_table tbody td::before { content: none !important; }
	.woocommerce-cart .cart_totals table.shop_table tbody td { text-align: right !important; }
	/* Same smallscreen zebra-stripe as the item cards — here it banded the
	   shipping row grey inside the white totals box. */
	.woocommerce-cart .cart_totals table.shop_table tbody th,
	.woocommerce-cart .cart_totals table.shop_table tbody td { background: transparent !important; }
	/* Shipping options wrap under their own full-width row. Selector must match
	   the `table.shop_table tbody td` rule above (same class count) or its
	   right-align wins. */
	.woocommerce-cart .cart_totals table.shop_table tbody .woocommerce-shipping-totals th,
	.woocommerce-cart .cart_totals table.shop_table tbody .woocommerce-shipping-totals td {
		display: block !important;
		width: auto;
		text-align: left !important;
	}
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals th { padding-bottom: 0; border-bottom: 0; }
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals td { padding-top: .35rem; border-top: 0; }
	.woocommerce-cart .cart_totals ul#shipping_method { margin: 0; padding: 0; }
	.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 .35rem; }
	.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
	.woocommerce-cart .cart_totals .shipping-calculator-button { text-align: left !important; }
}

/* Cart totals box */
.woocommerce .cart-collaterals { margin-top: .5rem; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.2rem 1.4rem;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3 {
	font-family: var(--font-display);
	color: var(--aubergine);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 .8rem;
}
.woocommerce .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	margin: 0;
	background: transparent;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: .7rem 0;
	border-top: 1px solid var(--border);
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}
.woocommerce .cart_totals table.shop_table th {
	color: var(--muted);
	font-family: var(--font-body);
	font-weight: 500;
}
.woocommerce .cart_totals table.shop_table td { text-align: right; color: var(--ink); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
	font-weight: 700;
	color: var(--aubergine);
	font-size: 1.15rem;
}
.woocommerce .cart_totals .order-total td .woocommerce-Price-amount { color: var(--aubergine); }

/* Proceed to checkout button — green, full width, on-brand */
.woocommerce .wc-proceed-to-checkout { padding-top: 1rem; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.05rem;
	padding: .9rem 1.4rem;
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce form .form-row label,
.woocommerce-checkout label {
	font-family: var(--font-body);
	color: var(--aubergine);
	font-weight: 500;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.select2-container .select2-selection {
	background: var(--card);
	border: 1.5px solid var(--border) !important;
	border-radius: var(--radius-btn);
	color: var(--ink);
	font-family: var(--font-body);
	padding: .7rem .85rem;
	box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--leaf) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(25, 102, 50, .12);
}

/* ---- Country / state select2 — WooCommerce renders these oversized.
   Size them like the other fields and style the plain <select> fallback. ---- */
.woocommerce form .form-row .select2-container,
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single {
	height: 2.9rem;
	display: flex;
	align-items: center;
	background: var(--card);
	border: 1.5px solid var(--border) !important;
	border-radius: var(--radius-btn);
	box-shadow: none;
	padding: 0 .85rem;
	font-family: var(--font-body);
	color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 2.9rem;
	padding: 0;
	color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 2.7rem;
	right: .55rem;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
	border-color: var(--leaf) !important;
	box-shadow: 0 0 0 3px rgba(25, 102, 50, .12);
}
/* Dropdown panel + highlighted option, on-brand */
.select2-container--default .select2-dropdown {
	border: 1.5px solid var(--border);
	border-radius: var(--radius-btn);
	background: var(--card);
	font-family: var(--font-body);
	color: var(--ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
	background: var(--leaf);
	color: #fff;
}
/* WooCommerce's woocommerce-blocktheme.css sets `padding: 0 1.1rem .5rem` here
   (top:0), so the search box hugs the panel's top edge. Restore a top gap.
   Same specificity as theirs, but this file loads later so it wins. */
.woocommerce-page .select2-container .select2-search--dropdown {
	padding: .6rem 1.1rem .5rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1.5px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-body);
	padding: .5rem .7rem;
}
/* Tighten dropdown option rows (WooCommerce/select2 defaults render ~74px tall). */
.select2-container--default .select2-results__option {
	padding: .5rem .85rem;
	line-height: 1.35;
	font-family: var(--font-body);
}
.select2-container--default .select2-results__options {
	max-height: 15rem;
}
/* Plain <select> fallback (no JS / before select2 enhances it) */
.woocommerce form .form-row select.country_select,
.woocommerce form .form-row select.state_select,
.woocommerce-checkout #billing_country,
.woocommerce-checkout #billing_state,
select.country_select,
select.state_select {
	height: 2.9rem;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--card);
	border: 1.5px solid var(--border) !important;
	border-radius: var(--radius-btn);
	color: var(--ink);
	font-family: var(--font-body);
	padding: 0 2.4rem 0 .85rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234e594f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
}

/* Subtle on-brand reassurance line above the order summary */
.woocommerce-checkout .lpaf-checkout-reassure {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--font-body);
	font-size: .9rem;
	color: var(--muted);
	margin: 0 0 1rem;
}
.woocommerce-checkout .lpaf-checkout-reassure svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	stroke: var(--leaf);
	fill: none;
}
.woocommerce-checkout #payment,
.woocommerce #payment {
	background: var(--paper);
	border-radius: 14px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--border);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--card);
	color: var(--ink);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--card);
}
.woocommerce #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.2rem 1.4rem;
}
.woocommerce-checkout #place_order,
.woocommerce #place_order {
	width: 100%;
	font-size: 1.05rem;
	padding: .9rem 1.4rem;
	margin-top: .6rem;
}

/* Prices amount colour everywhere */
.woocommerce-Price-amount { color: inherit; }
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount { color: var(--aubergine); }

/* ============================================================
   ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 1px solid var(--border);
	border-radius: var(--radius-btn);
	margin-bottom: .5rem;
	background: var(--card);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--paper); }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .6rem .9rem;
	color: var(--aubergine);
	text-decoration: none;
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--leaf); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.woo-shop ul.products,
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.woo-shop ul.products,
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.shop-filter { padding: .6rem .7rem; gap: .5rem .7rem; }
}
/* Below ~1000px the category chips fill the width, so the Dispo group wraps onto
   its own line and reads as just more chips. Give it the whole row and a rule above
   it. Capped at 959px because from 1000px up the two groups genuinely share a row,
   where a full-width border would cut straight through the bar. If the category
   names change enough to move that crossover, re-measure and adjust this value. */
@media (max-width: 959px) {
	.shop-filter .filter-avail {
		flex: 1 0 100%;
		padding-top: .65rem;
		border-top: 1px solid var(--border);
	}
}

/* Breathing room so cart/checkout content isn't flush against the footer */
.woocommerce-cart .wp-block-post-content,
.woocommerce-checkout .wp-block-post-content,
.woocommerce-cart main,
.woocommerce-checkout main { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* --- Checkout (block): flatten Stripe UPE payment fieldsets --- */
/* Card fields sit inside <fieldset id="wc-stripe-upe-form">, and there is an
   empty sibling fieldset (the Stripe redirect-notice) carrying the default
   browser fieldset border. Strip borders from every fieldset in the checkout
   form and collapse the empty ones. */
#wc-stripe-upe-form,
.wc-stripe-redirect-notice,
.wc-block-checkout fieldset,
.wc-block-checkout__payment-method fieldset,
.wp-block-woocommerce-checkout fieldset,
form.woocommerce-checkout fieldset{
  border:0 !important; padding:0 !important; margin:0 !important;
  min-inline-size:0; background:none !important; box-shadow:none !important;
}
.wc-block-checkout fieldset:empty,
.wp-block-woocommerce-checkout fieldset:empty,
form.woocommerce-checkout fieldset:empty{ display:none !important; }

/* --- Checkout (block): make the express-payment "OU" divider prominent --- */
/* The "OU" text is the container's own text (no __label child); style it directly. */
.wc-block-components-express-payment-continue-rule{
  margin:2.2rem 0 !important;
  font-family:var(--font-display) !important; font-weight:700 !important;
  font-size:1.15rem !important; text-transform:uppercase; letter-spacing:.14em;
  color:var(--aubergine) !important;
}
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after{
  border-bottom:2px solid var(--leaf) !important; opacity:.5;
}

/* --- Checkout: Stripe express-checkout "OU" separator (id set by Stripe JS) --- */
/* Markup is <p>&mdash; OU &mdash;</p>. Hide that text (incl. the em-dashes) and
   rebuild it as a full-width rule with "OU" sitting over the line on a cream
   ground so the line breaks cleanly around the word. */
#wc-stripe-express-checkout-button-separator{
  position:relative !important;
  margin:2rem 0 !important;
  text-align:center;
  font-size:0 !important;      /* hides "— OU —" incl. the dashes */
  line-height:0;
}
#wc-stripe-express-checkout-button-separator::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:0;
  border-top:2px solid rgba(31,52,35,.22); z-index:0;
}
#wc-stripe-express-checkout-button-separator::after{
  content:"OU"; position:relative; z-index:1; display:inline-block;
  background:var(--cream); padding:0 1rem; line-height:1;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--aubergine);
}

/* --- Cart: breathing room under the "Panier" page title --- */
.wp-block-post-title{ margin-bottom:clamp(1.2rem,3vw,2rem) !important; }

/* --- Cart/checkout: mobile side gutter. theme.json declares no root padding,
   and the regular pages get their gutter from .wide/.content (24px) — which
   the WooCommerce markup never passes through, so cart content sat flush
   against both screen edges. Matches the header bar's 24px. --- */
@media (max-width:820px){
  .woocommerce-cart .wp-block-post-title,
  .woocommerce-checkout .wp-block-post-title,
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce{
    padding-inline:24px;
    box-sizing:border-box;
  }
}

/* --- Cart: two-column layout — items left, "Total panier" on the right
   (classic cart defaults to totals stacked below; lay them side by side). --- */
@media (min-width:821px){
  /* Remove the block-layout width cap + root padding on the cart's content
     wrapper so the cart can occupy the header's exact box (not the narrower
     editor content width). */
  .woocommerce-cart main .wp-block-post-content{
    max-width:none !important; padding-inline:0 !important;
  }
  /* Title + cart share the header bar's box: 1120 centered, 24px side padding. */
  .woocommerce-cart .wp-block-post-title{
    max-width:1120px !important; width:auto !important; margin-inline:auto !important;
    padding-inline:24px !important; box-sizing:border-box !important;
  }
  .woocommerce-cart .woocommerce{
    max-width:1120px !important; width:auto !important; margin-inline:auto !important;
    padding-inline:24px !important; box-sizing:border-box !important;
    display:grid; grid-template-columns:minmax(0,1fr) 340px;
    column-gap:2rem; align-items:start;
  }
  /* Full-width rows at the TOP, in DOM order: notices wrapper + any bare
     WooCommerce notices (e.g. the pickup-only notice on woocommerce_before_cart,
     which otherwise fell into the last grid cell at the bottom). */
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce > .woocommerce-info,
  .woocommerce-cart .woocommerce > .woocommerce-message,
  .woocommerce-cart .woocommerce > .woocommerce-error{ grid-column:1 / -1; }
  .woocommerce-cart .woocommerce-cart-form{ grid-column:1; min-width:0; }
  .woocommerce-cart .cart-collaterals{
    grid-column:2; width:auto !important; max-width:none; float:none !important; margin-top:0;
  }
  .woocommerce-cart .cart-collaterals .cart_totals{ width:100% !important; float:none !important; }
}

/* --- Cart: "OU" separator between "Valider la commande" and the express
   buttons. Classic cart: Stripe injects #wc-stripe-express-checkout-element.
   Scoped to the cart so it doesn't touch the checkout's top express element.
   Chip bg = --card (white) to match the Total panier box. --- */
.woocommerce-cart #wc-stripe-express-checkout-element{
  position:relative;
  border-top:2px solid rgba(31,52,35,.22);
  margin-top:2rem !important;
  padding-top:1.6rem;
}
.woocommerce-cart #wc-stripe-express-checkout-element::before{
  content:"OU"; position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--card); padding:0 1rem; line-height:1; z-index:1;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--aubergine);
}

/* --- Checkout: it has no page title, so the content (notices / express
   buttons) sits flush under the header. Add top breathing room so error
   notices aren't pinned to the header. --- */
.woocommerce-checkout .woocommerce{ margin-top:clamp(1.6rem,4vw,2.6rem) !important; }

/* --- Product page: remove the Stripe express-checkout (Apple/Google/Amazon
   Pay, Link) buttons; keep the standard add-to-cart flow only. --- */
.single-product #wc-stripe-express-checkout-element,
.single-product #wc-stripe-express-checkout-button-separator,
.single-product .wc-stripe-product-express-checkout{ display:none !important; }

/* --- Cart: pickup notice — align to the cart content box so its left/right
   edges match the header, items and totals (spans the full grid width; NOT
   full-bleed, NOT items-column-only). Single clean rule (replaces earlier
   conflicting attempts). --- */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .wc-block-components-notice-banner{
  grid-column:1 / -1 !important;
  width:auto !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
}
.woocommerce-cart .wc-block-store-notices{
  width:auto !important; max-width:1120px !important;
  margin-left:auto !important; margin-right:auto !important;
  margin-block:0 !important;
  padding-inline:24px !important; box-sizing:border-box !important;
}
/* Only add vertical spacing when the block actually holds a notice (empty
   store-notices block must not push the "Panier" title down). */
.woocommerce-cart .wc-block-store-notices:has(.wc-block-components-notice-banner){
  margin-top:clamp(1.4rem,3vw,2.2rem) !important;
  margin-bottom:clamp(1rem,2.5vw,1.6rem) !important;
}
.woocommerce-cart .wc-block-components-notice-banner{
  width:100% !important; max-width:none !important; border-radius:12px !important;
  margin:0 0 clamp(1.4rem,3vw,2.2rem) !important;
}

/* ============================================================
   ORDER RECEIVED / CONFIRMATION (block-based confirmation)
   ============================================================ */
/* Constrain the title + the TOP-LEVEL confirmation blocks (alignwide/alignfull)
   to the header box (1120 centered, 24px side padding). Only top-level blocks
   get this padding — NESTED alignwide (totals table, billing/shipping address
   cards, downloads) are excluded via :not() so they fill their parent AND keep
   their own inner card padding. */
.woocommerce-order-received main .wp-block-post-content{ max-width:none !important; padding-inline:0 !important; }
.woocommerce-order-received .wp-block-post-title,
.woocommerce-order-received main :is(.alignwide,.alignfull):not(:is(.alignwide,.alignfull) *){
  max-width:1120px !important; margin-inline:auto !important;
  padding-inline:24px !important; box-sizing:border-box !important;
}
/* Nested alignwide: fill the parent (drop the redundant width constraint) but
   DON'T touch padding, so cards (addresses, etc.) keep their inner padding. */
.woocommerce-order-received main :is(.alignwide,.alignfull) :is(.alignwide,.alignfull){
  max-width:none !important; margin-inline:0 !important;
}
/* Title: page-title sized, not hero-sized. */
.woocommerce-order-received .wp-block-post-title{
  font-size:clamp(1.9rem,3.4vw,2.6rem) !important; line-height:1.1;
  margin-top:clamp(1rem,3vw,2rem) !important; margin-bottom:.3rem !important;
}
/* "Merci, votre commande a été reçue" status line: smaller + calmer. */
.woocommerce-order-received .wc-block-order-confirmation-status{
  font-size:clamp(1.05rem,2vw,1.25rem) !important; font-weight:500 !important;
  line-height:1.4 !important; color:var(--muted) !important;
  margin:.2rem auto 1.8rem !important;
}
/* Section headings on-brand */
.woocommerce-order-received h2,
.woocommerce-order-received h3{ font-family:var(--font-display); color:var(--aubergine); }
/* Totals table fills its wrapper. */
.woocommerce-order-received .wc-block-order-confirmation-totals__table{
  width:100% !important; max-width:none !important; margin:0 !important;
}

/* --- Trust strip (cart + checkout): understated secure-payment reassurance --- */
.lpaf-trust{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.35rem 1.1rem; margin:1.1rem 0 .1rem;
  font-family:var(--font-body); font-size:.82rem; color:var(--muted);
}
.lpaf-trust__item{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.lpaf-trust__item svg{ width:15px; height:15px; flex:0 0 15px; stroke:var(--leaf-bright); }

/* Cart totals: render the totals table as a flex list (not a raw <table>) so the
   shipping row (methods + "Les options de livraison…" notice / calculator) can
   span the FULL box width and read left-aligned, while Sous-total / Total stay
   as clean "label — value" rows. Doing this to the whole table (rather than
   display:block on one <tr>, which collapses the table) keeps it robust. */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody{ display:block; width:100%; }
.woocommerce-cart .cart_totals table.shop_table tr{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-top:1px solid var(--border);
}
.woocommerce-cart .cart_totals table.shop_table tr:first-child{ border-top:0; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{ padding:0 !important; border:0 !important; }
.woocommerce-cart .cart_totals table.shop_table td{ text-align:right; }
/* Shipping row: stack full width, left-aligned. */
.woocommerce-cart .cart_totals table.shop_table tr.shipping{
  flex-direction:column; align-items:stretch; gap:.3rem;
}
.woocommerce-cart .cart_totals table.shop_table tr.shipping td{ text-align:left; width:100%; }
.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method{ margin:0; }
.woocommerce-cart .cart_totals .shipping-calculator-button{ display:inline-flex; align-items:center; gap:.35rem; }

/* ============================================================
   OUT OF STOCK
   ============================================================ */
/* Shop + related loops: disabled "Rupture de stock" button (replaces the
   add-to-cart / "Lire la suite" link for out-of-stock products). */
.woocommerce ul.products li.product .lpaf-oos-button{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  margin-top:.6rem; padding:.72rem 1.4rem; border-radius:var(--radius-btn);
  background:#e8e5dd; color:var(--muted); border:1.5px solid var(--border);
  font-family:var(--font-body); font-weight:500; font-size:.95rem;
  cursor:not-allowed; box-shadow:none;
}
.woocommerce ul.products li.product .lpaf-oos-button:hover{
  background:#e8e5dd; color:var(--muted); border-color:var(--border); transform:none; box-shadow:none;
}
.woocommerce ul.products li.product.outofstock .lpaf-illus{ opacity:.9; }

/* Single product: make the faint "Rupture de stock" line a clear grayed CTA. */
.single-product p.stock.out-of-stock,
.single-product .stock.out-of-stock{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:260px; box-sizing:border-box; margin:.6rem 0 0;
  padding:.82rem 1.6rem; border-radius:var(--radius-btn);
  background:#e8e5dd; color:var(--muted); border:1.5px solid var(--border);
  font-family:var(--font-body); font-weight:600; font-size:1rem;
}

/* Checkout: breathing room above the "Votre commande" order-review heading
   (previously the reassure line filled this space). */
.woocommerce-checkout #order_review_heading{ margin-top:clamp(1.6rem,3.5vw,2.4rem) !important; }

/* ---- "Qu'est-ce qu'un lacet de fruits ?" note on lacets products ----
   Full content width: a narrow max-width left it ending mid-page, aligned to
   nothing. Two columns keep the line length readable at that width instead of
   letting paragraphs run the whole way across. */
.woocommerce div.product .lpaf-lacets-note,
.lpaf-lacets-note {
	clear: both;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
	padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
	gap: clamp(.6rem, 3vw, 2.6rem);
	align-items: start;
}
.lpaf-lacets-note h2 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--aubergine);
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0;
	text-wrap: balance;
}
.lpaf-lacets-note .note-body { min-width: 0; }
.lpaf-lacets-note p {
	color: rgba(22, 29, 23, .82);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 .75rem;
	max-width: 62ch;
}
.lpaf-lacets-note p:last-child { margin-bottom: 0; }
@media (max-width: 820px) {
	.woocommerce div.product .lpaf-lacets-note,
	.lpaf-lacets-note { grid-template-columns: 1fr; }
	.lpaf-lacets-note h2 { margin-bottom: .2rem; }
}