/* ==========================================================================
 * Fermentierra — WooCommerce checkout / account skin
 * --------------------------------------------------------------------------
 * Makes the WooCommerce block checkout and the classic My Account pages read
 * like the Next.js storefront (app/design-system.css). CSS only. Every selector
 * below was taken from the LIVE dev-remote DOM (WordPress 7.0.4, WooCommerce
 * 11.0.1, Twenty Twenty-Four). Values are copied from the design system, not
 * invented. Everything is scoped under the page body classes
 * (.woocommerce-checkout, .woocommerce-account) so the nav, the footer and the
 * rest of the site are left alone.
 *
 * Covers the block checkout, the classic order-received page and the classic
 * My Account pages (logged-out login form + logged-in dashboard).
 * ========================================================================== */

/* --- self-hosted fonts (no runtime Google call on checkout) --------------- */
@font-face {
	font-family: "Lovelo";
	src: url("fonts/lovelo-black.woff2") format("woff2"),
		url("fonts/lovelo-black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
/* Lexend is a variable font (weight 300–700), same source as the frontend.
   Two subsets cover French/Swiss text; ranges mirror Google Fonts. */
@font-face {
	font-family: "Lexend";
	src: url("fonts/lexend-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lexend";
	src: url("fonts/lexend-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- design tokens, scoped to the commerce pages ------------------------- */
body.woocommerce-checkout,
body.woocommerce-account {
	/* Fixed brand ink for controls painted on the lime accent. Unlike the
	   semantic --ftr-dark token, this colour must not invert in dark mode. */
	--ftr-ink: #1c1c1a;
	--ftr-dark: #1c1c1a;
	--ftr-light: #fffff9;
	--ftr-accent: #b6f78e;

	--ftr-radius-btn: 3px;
	--ftr-radius-pill: 50px;

	--ftr-space-3xs: 4px;
	--ftr-space-2xs: 8px;
	--ftr-space-xs: 12px;
	--ftr-space-sm: 16px;
	--ftr-space-md: 24px;
	--ftr-space-lg: 32px;
	--ftr-space-2xl: 48px;

	--ftr-text-base: 1rem;
	--ftr-text-detail: 0.875rem;
	--ftr-text-lg: 1.5rem;
	--ftr-text-heading: clamp(1.5rem, 2.5vw, 2.125rem);

	--ftr-lh-heading: 1.2;
	--ftr-lh-body: 1.7;

	--ftr-fw-light: 300;
	--ftr-fw-semibold: 600;
	--ftr-hairline: 1px solid var(--ftr-dark);

	--ftr-font-display: "Lovelo", Arial, sans-serif;
	--ftr-font-body: "Lexend", Arial, sans-serif;
}

/* The Next.js preference is validated and stamped by the environment bridge
   as ftr-theme-light, ftr-theme-dark or ftr-theme-system. Swapping the two
   semantic ink/paper tokens keeps the complete checkout and account skin in
   the same palette without duplicating every WooCommerce selector. */
body.woocommerce-checkout.ftr-theme-dark,
body.woocommerce-account.ftr-theme-dark {
	--ftr-dark: #f0f0e9;
	--ftr-light: #141412;
	color-scheme: dark;
	background: var(--ftr-light);
	color: var(--ftr-dark);
}

@media (prefers-color-scheme: dark) {
	body.woocommerce-checkout.ftr-theme-system,
	body.woocommerce-account.ftr-theme-system {
		--ftr-dark: #f0f0e9;
		--ftr-light: #141412;
		color-scheme: dark;
		background: var(--ftr-light);
		color: var(--ftr-dark);
	}
}

body.woocommerce-checkout.ftr-theme-dark .wp-site-blocks,
body.woocommerce-account.ftr-theme-dark .wp-site-blocks,
body.woocommerce-checkout.ftr-theme-dark .wc-block-components-sidebar-layout,
body.woocommerce-account.ftr-theme-dark .woocommerce {
	background: var(--ftr-light);
	color: var(--ftr-dark);
}

/* Twenty Twenty-Four gives its template header an independent white surface.
   Keep the commerce header on the same paper token as the page in dark mode;
   the WordPress admin toolbar sits outside this element and is untouched. */
body.woocommerce-checkout.ftr-theme-dark header.wp-block-template-part,
body.woocommerce-account.ftr-theme-dark header.wp-block-template-part,
body.woocommerce-checkout.ftr-theme-dark header.wp-block-template-part > .wp-block-group,
body.woocommerce-account.ftr-theme-dark header.wp-block-template-part > .wp-block-group {
	background-color: var(--ftr-light) !important;
	color: var(--ftr-dark);
}

@media (prefers-color-scheme: dark) {
	body.woocommerce-checkout.ftr-theme-system .wp-site-blocks,
	body.woocommerce-account.ftr-theme-system .wp-site-blocks,
	body.woocommerce-checkout.ftr-theme-system .wc-block-components-sidebar-layout,
	body.woocommerce-account.ftr-theme-system .woocommerce {
		background: var(--ftr-light);
		color: var(--ftr-dark);
	}

	body.woocommerce-checkout.ftr-theme-system header.wp-block-template-part,
	body.woocommerce-account.ftr-theme-system header.wp-block-template-part,
	body.woocommerce-checkout.ftr-theme-system header.wp-block-template-part > .wp-block-group,
	body.woocommerce-account.ftr-theme-system header.wp-block-template-part > .wp-block-group {
		background-color: var(--ftr-light) !important;
		color: var(--ftr-dark);
	}
}

/* ==========================================================================
 * Body type — scoped to the commerce CONTENT only (not the theme nav/footer)
 * ========================================================================== */
.woocommerce-checkout .wc-block-checkout,
.woocommerce-account .woocommerce {
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-light);
	line-height: var(--ftr-lh-body);
	color: var(--ftr-dark);
}

/* Page title (the post title on these pages) and section/step headings ->
   Lovelo. h1 is unique to the page title, so the footer headings are untouched. */
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-heading);
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0;
	color: var(--ftr-dark);
}

.woocommerce-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text,
.woocommerce-account .woocommerce h2 {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-lg);
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0;
	color: var(--ftr-dark);
}

/* Product names in the order summary use the storefront's small display title. */
.woocommerce-checkout .wc-block-components-product-name {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-base);
	line-height: var(--ftr-lh-heading);
}

/* Money amounts read semibold like the storefront cart. */
.woocommerce-checkout .wc-block-formatted-money-amount {
	font-weight: var(--ftr-fw-semibold);
}

/* ==========================================================================
 * Header — swap the site-title text for the brand wordmark (CSS only)
 * The header prints <p class="wp-block-site-title"><a>Fermentierra</a></p> with
 * no Site Logo block. We hide the text and paint the same SVG wordmark the
 * frontend nav uses (vendored into assets/images/) as the link's background, in
 * the same 156x44 box the frontend nav gives its logo (the 144x37 SVG paints at
 * 156x40 inside it, centred). display: block, not inline-block: an inline box
 * would sit on the paragraph's baseline and inherit its line box, which is why
 * the wordmark used to hang 7-10px below the cart glyph (see "Header rhythm"
 * at the end of this file). No markup or WP-setting change; this only loads on
 * the commerce pages the stylesheet is enqueued on.
 * ========================================================================== */
.woocommerce-checkout .wp-block-site-title a,
.woocommerce-account .wp-block-site-title a {
	display: block;
	width: 156px;
	height: 44px;
	background: url("images/fermentierra-dark.svg") no-repeat left center;
	background-size: contain;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

body.ftr-theme-dark.woocommerce-checkout .wp-block-site-title a,
body.ftr-theme-dark.woocommerce-account .wp-block-site-title a {
	background-image: url("images/fermentierra-light.svg");
}

@media (prefers-color-scheme: dark) {
	body.ftr-theme-system.woocommerce-checkout .wp-block-site-title a,
	body.ftr-theme-system.woocommerce-account .wp-block-site-title a {
		background-image: url("images/fermentierra-light.svg");
	}
}

/* Header cart glyph -> the frontend's bag icon. We vendor the same icon the
   frontend nav draws (assets/images/cart.svg: 0 0 24 viewBox, 1.5 stroke baked
   in) and render it at 22px, so it is pixel-identical to .nav-icon svg on
   dev-frontend. WooCommerce's own <svg> glyph is hidden; the link's destination
   is repointed to the frontend in functions.php.

   Two blocks can render this glyph depending on the template: the Cart Link
   block (.wc-block-cart-link) on the checkout, and the Mini-Cart block on the
   account templates. The Mini-Cart is not styled here — functions.php replaces
   that block outright with a .wc-block-cart-link anchor pointing at /panier,
   because its own pop-up drawer is unstyled and escapes to WordPress pages.
   One selector therefore covers every commerce page. */
.woocommerce-checkout .wc-block-cart-link,
.woocommerce-account .wc-block-cart-link {
	display: inline-block;
	width: 22px;
	height: 22px;
	padding: 0;
	background: url("images/cart.svg") no-repeat center / 22px 22px;
	border: 0;
	color: transparent;
}

body.ftr-theme-dark.woocommerce-checkout .wc-block-cart-link,
body.ftr-theme-dark.woocommerce-account .wc-block-cart-link {
	background-image: url("images/cart-light.svg");
}

@media (prefers-color-scheme: dark) {
	body.ftr-theme-system.woocommerce-checkout .wc-block-cart-link,
	body.ftr-theme-system.woocommerce-account .wc-block-cart-link {
		background-image: url("images/cart-light.svg");
	}
}
.woocommerce-checkout .wc-block-cart-link svg,
.woocommerce-account .wc-block-cart-link svg {
	display: none;
}

/* Header account glyph -> the frontend's person icon, drawn from the same paths
   as .nav-icon on dev-frontend. Inlined as a data URI rather than a vendored
   file so this stays a CSS-only change (no theme re-zip). The Customer Account
   block prints its own <svg>, which is hidden underneath. */
.woocommerce-checkout .wc-block-customer-account,
.woocommerce-account .wc-block-customer-account,
.woocommerce-checkout .wp-block-woocommerce-customer-account a,
.woocommerce-account .wp-block-woocommerce-customer-account a {
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

body.ftr-theme-dark.woocommerce-checkout .wc-block-customer-account,
body.ftr-theme-dark.woocommerce-account .wc-block-customer-account,
body.ftr-theme-dark.woocommerce-checkout .wp-block-woocommerce-customer-account a,
body.ftr-theme-dark.woocommerce-account .wp-block-woocommerce-customer-account a {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	body.ftr-theme-system.woocommerce-checkout .wc-block-customer-account,
	body.ftr-theme-system.woocommerce-account .wc-block-customer-account,
	body.ftr-theme-system.woocommerce-checkout .wp-block-woocommerce-customer-account a,
	body.ftr-theme-system.woocommerce-account .wp-block-woocommerce-customer-account a {
		filter: invert(1);
	}
}
.woocommerce-checkout .wc-block-customer-account svg,
.woocommerce-account .wc-block-customer-account svg,
.woocommerce-checkout .wp-block-woocommerce-customer-account svg,
.woocommerce-account .wp-block-woocommerce-customer-account svg {
	display: none;
}

/* ==========================================================================
 * Surfaces — flat panels, hairline rules, no shadows / no rounded cards
 * ========================================================================== */
/* ONE flat hairline panel around the whole summary column (the outer sidebar).
   The inner order-summary must NOT also carry a border, or the two nest into a
   frame-in-frame. */
.woocommerce-checkout .wc-block-checkout__sidebar,
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce form.edit-account {
	background: var(--ftr-light);
	border: var(--ftr-hairline);
	border-radius: 0;
	box-shadow: none;
}
/* Exactly ONE border on the summary column: the outer sidebar above. Every
   element WooCommerce nests inside it is forced borderless — the order-summary
   BLOCK carries WooCommerce's own 1px / 5px-radius frame (the frame-in-frame the
   first pass missed, because it lives on a different element than the
   order-summary list) and the totals wrappers carry divider top-rules. The
   [class*=] match covers every order-summary sub-block; the ancestor lifts
   specificity over WooCommerce's own rule so it wins regardless of load order.
   Verified: each nested border-width reads back 0. The "Add coupons" toggle is
   deliberately NOT in this list any more: it is a control, and keeps the
   secondary-button box it has everywhere else (see "Coupon toggle" below). */
.woocommerce-checkout .wc-block-checkout__sidebar div[class*="wp-block-woocommerce-checkout-order-summary"],
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	border: 0;
	box-shadow: none;
}

/* Checkout prices are not retail promotion cards. Role-based pricing can make
   Woo Blocks expose the public price as a struck-through "regular" amount and
   add an "Économisez" badge beside the actual cart amount. Keep only the final
   WooCommerce-calculated line total shown at the right. */
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge,
.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
	display: none;
}

/* Keep the cart quantity badge on the same lime/black brand pairing as the
   primary actions, independently of the active light or dark palette. */
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	background: var(--ftr-accent);
	border-color: var(--ftr-ink);
	color: var(--ftr-ink);
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity > span {
	color: var(--ftr-ink);
}

/* The tax-display extension's verbose English preview is disabled in its cart
   settings. Restore the concise storefront convention here: customers and
   guests see TTC; wholesale checkouts see HT until the final payable total,
   which is always TTC. The stronger wholesale selectors also correct the
   administrator's "Previewing as: Wholesale Customer" mode. */
.woocommerce-checkout .wc-block-components-order-summary-item__total-price
	.wc-block-components-product-price__value::after,
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block
	.wc-block-components-totals-item__value::after {
	content: " TTC";
	font-size: var(--ftr-text-detail);
	font-weight: var(--ftr-fw-light);
}
.woocommerce-checkout.wholesale_customer .wc-block-components-order-summary-item__total-price
	.wc-block-components-product-price__value::after,
.woocommerce-checkout.ftr-wholesale-checkout .wc-block-components-order-summary-item__total-price
	.wc-block-components-product-price__value::after,
.woocommerce-checkout.wholesale_customer .wp-block-woocommerce-checkout-order-summary-subtotal-block
	.wc-block-components-totals-item__value::after,
.woocommerce-checkout.ftr-wholesale-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block
	.wc-block-components-totals-item__value::after {
	content: " HT" !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item
	.wc-block-components-totals-item__value::after {
	content: " TTC" !important;
	font-size: var(--ftr-text-detail);
	font-weight: var(--ftr-fw-light);
}

/* Paid delivery is also customer-facing TTC for guests/private customers.
   Target the formatted money itself so a zero-cost "GRATUIT" label never gets
   an unnecessary tax suffix. */
.woocommerce-checkout:not(.wholesale_customer):not(.ftr-wholesale-checkout)
	.wp-block-woocommerce-checkout-order-summary-shipping-block
	.wc-block-formatted-money-amount::after,
.woocommerce-checkout:not(.wholesale_customer):not(.ftr-wholesale-checkout)
	#shipping-option
	.wc-block-components-radio-control__secondary-label
	.wc-block-formatted-money-amount::after {
	content: " TTC";
	font-size: var(--ftr-text-detail);
	font-weight: var(--ftr-fw-light);
}

/* The reseller delivery participation is displayed excluding tax; its 8.1%
   tax is itemized separately on the following row. */
.woocommerce-checkout.wholesale_customer
	.wp-block-woocommerce-checkout-order-summary-fee-block
	.wc-block-components-totals-item__value::after,
.woocommerce-checkout.ftr-wholesale-checkout
	.wp-block-woocommerce-checkout-order-summary-fee-block
	.wc-block-components-totals-item__value::after {
	content: " HT";
	font-size: var(--ftr-text-detail);
	font-weight: var(--ftr-fw-light);
}

/* A reseller carton that carries the explicit delivery-participation fee has
   no separate free-delivery benefit to report. Woo Blocks still renders the
   selected zero-cost shipping method, so suppress that redundant row only in
   wholesale checkout summaries where a fee row is present. */
.woocommerce-checkout.wholesale_customer .wc-block-checkout__sidebar:has(.wp-block-woocommerce-checkout-order-summary-fee-block)
	.wp-block-woocommerce-checkout-order-summary-shipping-block,
.woocommerce-checkout.ftr-wholesale-checkout .wc-block-checkout__sidebar:has(.wp-block-woocommerce-checkout-order-summary-fee-block)
	.wp-block-woocommerce-checkout-order-summary-shipping-block {
	display: none;
}

/* The same paid participation also makes the left-hand free-shipping selector
   misleading. Hide the whole option section (heading and radio row), again
   only for wholesale checkouts carrying a fee. */
.woocommerce-checkout.wholesale_customer:has(.wp-block-woocommerce-checkout-order-summary-fee-block)
	#shipping-option,
.woocommerce-checkout.ftr-wholesale-checkout:has(.wp-block-woocommerce-checkout-order-summary-fee-block)
	#shipping-option {
	display: none;
}

/* Kill stray radii / shadows WooCommerce blocks add to panels and rows. */
.woocommerce-checkout .wc-block-components-panel,
.woocommerce-checkout .wc-block-components-totals-coupon,
.woocommerce-checkout .wc-block-components-order-summary-item {
	box-shadow: none;
	border-radius: 0;
}

/* Notices become flat panels: hairline border, no rounding, no shadow. */
.woocommerce-checkout .wc-block-components-notice-banner {
	border-radius: 0;
	box-shadow: none;
}

/* Terms & Privacy links in the "By proceeding…" line: underlined, --dark, no
   colour shift on hover — the frontend's inline link treatment. WooCommerce
   only turns those words into links once the Terms page and the Privacy Policy
   page are selected in the admin (see the theme notes); until then the line is
   plain text and this rule simply has nothing to match. */
.woocommerce-checkout .wc-block-checkout__terms a {
	color: var(--ftr-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-checkout .wc-block-checkout__terms a:hover {
	color: var(--ftr-dark);
	text-decoration: underline;
}

/* ==========================================================================
 * Inputs — match .field (1.5px dark border, 3px radius, light background)
 * ========================================================================== */

/* Block checkout fields: a SINGLE hairline on the wrapper (like the selects,
   which are already wrapper-bordered). WooCommerce also draws its own border on
   the inner <input> at a 4px radius; ours is 3px, so the two showed as a doubled
   edge at the corners. We drop WooCommerce's inner border — the extra
   .wc-block-checkout ancestor lifts specificity above WooCommerce's
   `input[type=...]` rule, so it wins regardless of stylesheet load order — and
   keep only the wrapper's. The floating label is untouched (its padding stays). */
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select {
	background: var(--ftr-light);
	border: 1.5px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	box-shadow: none;
}
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input:focus-within,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select:focus-within {
	border-color: var(--ftr-dark);
	box-shadow: none;
}
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ftr-dark);
	font-family: var(--ftr-font-body);
	font-size: var(--ftr-text-base);
}
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select {
	/* Woo Blocks sets a literal white background on country/state controls.
	   The important declarations only neutralise that component-level rule. */
	background-color: var(--ftr-light) !important;
	color: var(--ftr-dark) !important;
}
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select option {
	background-color: var(--ftr-light);
	color: var(--ftr-dark);
}
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select svg {
	color: var(--ftr-dark);
	fill: currentColor;
}
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__label {
	color: var(--ftr-dark);
	font-family: var(--ftr-font-body);
}

/* Classic My Account login: label sits above the input, so the full .field
   treatment is safe here. */
.woocommerce-account .woocommerce-Input.input-text,
.woocommerce-account .woocommerce form.woocommerce-form-register input.input-text,
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"].input-text,
.woocommerce-account input[type="password"].input-text {
	border: 1.5px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	height: 48px;
	padding: 0 var(--ftr-space-md);
	background: var(--ftr-light);
	color: var(--ftr-dark);
	font-family: var(--ftr-font-body);
	font-size: var(--ftr-text-base);
	box-shadow: none;
	outline: none;
}
.woocommerce-account .woocommerce-Input.input-text:focus,
.woocommerce-account .woocommerce form.woocommerce-form-register input.input-text:focus,
.woocommerce-account input.input-text:focus {
	border-color: var(--ftr-dark);
	box-shadow: none;
	outline: none;
}
.woocommerce-account .woocommerce-form__label {
	font-family: var(--ftr-font-body);
	color: var(--ftr-dark);
}

/* ==========================================================================
 * Buttons
 * ========================================================================== */

/* Primary CTAs (Place Order, Log in, Reset password, Save address / details)
   = accent fill, pill, 1px dark border, dark text; hover inverts to dark
   background / light text. Matches .btn-primary. Every classic-account submit
   is a .woocommerce-button or .woocommerce-Button, so one pair of selectors
   covers the login, lost/reset-password and edit forms alike. */
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wp-element-button,
.woocommerce-account .woocommerce-button.wp-element-button,
.woocommerce-account .woocommerce-Button.wp-element-button {
	background: var(--ftr-accent);
	color: var(--ftr-ink);
	border: 1px solid var(--ftr-ink);
	border-radius: var(--ftr-radius-pill);
	padding: var(--ftr-space-xs) var(--ftr-space-md);
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-semibold);
	font-size: var(--ftr-text-base);
	letter-spacing: 0.02em;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wp-element-button:hover,
.woocommerce-account .woocommerce-button.wp-element-button:hover,
.woocommerce-account .woocommerce-Button.wp-element-button:hover {
	background: var(--ftr-dark);
	color: var(--ftr-light);
	border-color: var(--ftr-dark);
}

/* Secondary buttons (coupon apply / "Add a coupon" toggle) = transparent,
   3px radius, dark hairline; hover inverts. Matches .btn-secondary. */
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-button.wp-element-button,
.woocommerce-checkout .wc-block-components-panel__button {
	background: transparent;
	color: var(--ftr-dark);
	border: 1px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-semibold);
	box-shadow: none;
}
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-button.wp-element-button:hover {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}

/* ==========================================================================
 * Selection controls — dark hairlines, DARK selected state (accent is reserved
 * for the Place Order CTA only)
 * ========================================================================== */

/* Checkbox: dark hairline box; dark fill + light tick when checked. */
.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	background: var(--ftr-light);
	box-shadow: none;
}
.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--ftr-dark);
	border-color: var(--ftr-dark);
}
.woocommerce-checkout .wc-block-components-checkbox__mark {
	fill: var(--ftr-light);
	color: var(--ftr-light);
}

/* Shipping-option radios: dark hairline rows; the selected radio is a dark disc
   with a light centre dot (no accent). */
.woocommerce-checkout .wc-block-components-radio-control__option {
	border-radius: 0;
}
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
	border-color: var(--ftr-dark);
	box-shadow: none;
}
/* Radios (shipping now, payment methods once gateways exist): both states have a
   light fill and a thin dark ring. WooCommerce draws the selected marker as a
   ::before dot (its own colour is near-black); we recolour that to --dark and
   keep the fill light, so SELECTED = light disc + dark ring + small solid dark
   centre dot, UNSELECTED = light disc + dark ring, no dot. No accent — that is
   reserved for Place Order. The .wc-block-components-radio-control ancestor lifts
   specificity over WooCommerce's own radio rules (which set the 1px border and
   the black dot) so ours win regardless of load order. */
.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--ftr-light);
	background-image: none;
	border: 1.5px solid var(--ftr-dark);
	box-shadow: none;
}
.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	background-color: var(--ftr-light);
	background-image: none;
	border-color: var(--ftr-dark);
}
.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--ftr-dark);
}

/* ==========================================================================
 * Chrome — remove the Twenty Twenty-Four page list and footer
 * --------------------------------------------------------------------------
 * The header nav is the core Page List block: it auto-lists every published
 * WordPress page (Accueil, Cart, Checkout, Shop, My account, …), all of them
 * pointing at WordPress URLs that are NOT the real site. The default footer is
 * the parent theme's placeholder pattern and its links are equally wrong.
 * Neither can be repaired from CSS — the fix is to not show them on the
 * commerce pages, exactly like the checkout. What is left is the wordmark
 * (linked to the frontend in functions.php) and the cart glyph, which is the
 * intended transactional chrome.
 *
 * Scoped to the commerce body classes; this stylesheet only ever loads there.
 * ========================================================================== */
.woocommerce-checkout .wp-block-page-list,
.woocommerce-account .wp-block-page-list {
	display: none;
}

/* Below the parent theme's breakpoint the same page list is reached through the
 * Navigation block's hamburger, which the rule above does not touch: the button
 * stays, and opening it shows the WordPress pages in an overlay carrying the
 * parent theme's own icon. Feeding it our three site sections instead was the
 * preferred fix but is not available from a child theme — a block theme keeps
 * its menu in a wp_navigation post in the database, not in code, and swapping
 * the rendered markup would also mean shipping our own open/close script, which
 * this theme deliberately does not do. So the hamburger goes the same way as
 * the list it opens, leaving the wordmark and the cart glyph. */
.woocommerce-checkout .wp-block-navigation,
.woocommerce-account .wp-block-navigation {
	display: none;
}
.woocommerce-checkout footer.wp-block-template-part,
.woocommerce-account footer.wp-block-template-part {
	display: none;
}

/* ==========================================================================
 * Page rhythm — headings, top gap, bottom breathing room
 * --------------------------------------------------------------------------
 * The parent theme's serif was still winning on every heading these pages
 * render outside the block checkout (the order-received h1 and its section
 * headings). Rather than chase each block class, every heading inside the
 * commerce pages is Lovelo: with the page list and the footer hidden, the only
 * headings left on these pages are the ones we want in the display face.
 * ========================================================================== */
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout h4,
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-account h4 {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	letter-spacing: 0;
	line-height: var(--ftr-lh-heading);
	color: var(--ftr-dark);
}
.woocommerce-checkout h1,
.woocommerce-account h1 {
	font-size: var(--ftr-text-heading);
}
.woocommerce-checkout h2,
.woocommerce-account h2 {
	font-size: var(--ftr-text-lg);
}
.woocommerce-checkout h3,
.woocommerce-checkout h4,
.woocommerce-account h3,
.woocommerce-account h4 {
	font-size: var(--ftr-text-base);
}

/* The gap under the wordmark was the template's default block spacing stacked
   on the title's own top margin. Both are pulled back to one deliberate step. */
.woocommerce-checkout .wp-site-blocks > main,
.woocommerce-account .wp-site-blocks > main {
	margin-block-start: var(--ftr-space-lg);
}
.woocommerce-checkout h1.wp-block-post-title,
.woocommerce-account h1.wp-block-post-title {
	margin-block-start: 0;
	margin-block-end: var(--ftr-space-lg);
}

/* Both pages ended flush against the last line of text. Give the content the
   storefront's page-bottom breathing room (--space-5xl on the frontend). */
.woocommerce-checkout .wp-site-blocks > main,
.woocommerce-account .wp-site-blocks > main {
	padding-bottom: 80px;
}

/* ==========================================================================
 * Order received (classic thank-you page)
 * ========================================================================== */
.woocommerce-checkout .woocommerce-order {
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-light);
	line-height: var(--ftr-lh-body);
	color: var(--ftr-dark);
}

/* "Merci. Votre commande a été reçue." — the one lead line on the page. */
.woocommerce-checkout .woocommerce-notice--success {
	font-size: var(--ftr-text-lg);
	line-height: var(--ftr-lh-heading);
	margin-bottom: var(--ftr-space-lg);
	background: none;
	border: 0;
	padding: 0;
}

/* Section headings (Détails de la commande, addresses) match the checkout's. */
.woocommerce-checkout .woocommerce-order h2,
.woocommerce-checkout .woocommerce-column__title {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-lg);
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0;
	color: var(--ftr-dark);
}

/* Order overview strip (number / date / total / email / payment): a plain row
   of label-over-value pairs, no bullets, no boxes. */
.woocommerce-checkout ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ftr-space-lg);
	list-style: none;
	margin: 0 0 var(--ftr-space-2xl);
	padding: 0;
	border: 0;
}
.woocommerce-checkout ul.woocommerce-order-overview li {
	border: 0;
	margin: 0;
	padding: 0;
	text-transform: none;
	font-size: var(--ftr-text-base);
}
.woocommerce-checkout ul.woocommerce-order-overview li strong {
	display: block;
	font-weight: var(--ftr-fw-semibold);
}

/* Order + address tables: flat, hairline-ruled, no zebra fills, no radii. */
.woocommerce-checkout .woocommerce-order table.shop_table {
	width: 100%;
	border: var(--ftr-hairline);
	border-radius: 0;
	border-collapse: collapse;
	background: var(--ftr-light);
}
.woocommerce-checkout .woocommerce-order table.shop_table th,
.woocommerce-checkout .woocommerce-order table.shop_table td {
	border: 0;
	border-bottom: var(--ftr-hairline);
	padding: var(--ftr-space-sm) var(--ftr-space-md);
	background: none;
	color: var(--ftr-dark);
	font-size: var(--ftr-text-base);
}
.woocommerce-checkout .woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce-order table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
}
.woocommerce-checkout .woocommerce-order table.shop_table th {
	font-weight: var(--ftr-fw-semibold);
}
/* Product names read like the checkout summary's. */
.woocommerce-checkout .woocommerce-order table.shop_table td.woocommerce-table__product-name a {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	color: var(--ftr-dark);
	text-decoration: none;
}
.woocommerce-checkout .woocommerce-order table.shop_table td.woocommerce-table__product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Amounts semibold, like the cart and the checkout totals. */
.woocommerce-checkout .woocommerce-order table.shop_table .woocommerce-Price-amount {
	font-weight: var(--ftr-fw-semibold);
}

/* Bank-transfer instructions, when the gateway prints any. */
.woocommerce-checkout .woocommerce-order .woocommerce-thankyou-order-details + p,
.woocommerce-checkout .woocommerce-order .wc-bacs-bank-details-heading {
	font-family: var(--ftr-font-body);
	color: var(--ftr-dark);
}

/* Delivery / billing address columns: flat hairline panels, side by side. */
.woocommerce-checkout .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ftr-space-lg);
	margin-top: var(--ftr-space-2xl);
}
.woocommerce-checkout .woocommerce-customer-details address {
	border: var(--ftr-hairline);
	border-radius: 0;
	padding: var(--ftr-space-md);
	background: var(--ftr-light);
	font-style: normal;
	line-height: var(--ftr-lh-body);
}

/* ==========================================================================
 * My Account — logged-in dashboard
 * ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-light);
	line-height: var(--ftr-lh-body);
	color: var(--ftr-dark);
}

/* Account nav: the storefront's filter row (.hub-filter on /boutique and the
   article hub) rather than a sidebar list — a horizontal row of links above the
   content, inactive items at half opacity, the current one underlined. Set in
   Lovelo at the .label letter-spacing so it reads as a section control, not as
   body copy. WooCommerce floats the nav and the content into two columns by
   default; both floats are dropped so the row sits above full width. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: var(--ftr-space-2xl);
	padding-bottom: var(--ftr-space-sm);
	border-bottom: var(--ftr-hairline);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ftr-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 0;
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-base);
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0.08em;
	color: var(--ftr-dark);
	text-decoration: none;
	opacity: 0.5;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #b96a54;
	opacity: 1;
}

/* Inline links in the dashboard copy: --dark + underline, no colour shift. */
.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--ftr-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-account.fermentierra-pro-account-dashboard .woocommerce-MyAccount-content > p:not(.fermentierra-pro-greeting) {
	display: none;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-greeting {
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-customer-greeting {
	margin: 0;
}

/* Standard customer dashboard: a fast exit to the shop followed by the three
   latest WordPress articles. The markup stays inside WooCommerce's existing
   account content so navigation, notices and account endpoints keep their
   native behaviour. */
.woocommerce-account .fermentierra-customer-dashboard__intro {
	padding: 0 0 var(--ftr-space-2xl);
}
.woocommerce-account a.fermentierra-customer-dashboard__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: var(--ftr-space-lg);
	padding: var(--ftr-space-xs) var(--ftr-space-md);
	border: 1px solid var(--ftr-ink);
	border-radius: var(--ftr-radius-pill);
	background: var(--ftr-accent);
	color: var(--ftr-ink);
	font-weight: var(--ftr-fw-semibold);
	line-height: normal;
	text-decoration: none;
}
.woocommerce-account a.fermentierra-customer-dashboard__shop:hover,
.woocommerce-account a.fermentierra-customer-dashboard__shop:focus-visible {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}
.woocommerce-account a.fermentierra-customer-dashboard__shop:focus-visible,
.woocommerce-account .fermentierra-account-articles__footer a:focus-visible,
.woocommerce-account .fermentierra-account-article h3 a:focus-visible {
	outline: 2px solid var(--ftr-dark);
	outline-offset: 4px;
}
.woocommerce-account .fermentierra-account-articles {
	border-top: var(--ftr-hairline);
}
.woocommerce-account .fermentierra-account-articles__header {
	display: flex;
	flex-direction: column;
	gap: var(--ftr-space-2xs);
	padding: var(--ftr-space-lg) 0 var(--ftr-space-md);
}
.woocommerce-account .fermentierra-account-articles__eyebrow,
.woocommerce-account .fermentierra-account-article__meta {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-base);
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.woocommerce-account .fermentierra-account-articles__header h2 {
	margin: 0;
}
.woocommerce-account .fermentierra-account-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: var(--ftr-hairline);
}
.woocommerce-account .fermentierra-account-article {
	display: flex;
	min-width: 0;
	flex-direction: column;
	margin: 0;
	border-right: var(--ftr-hairline);
	background: var(--ftr-light);
}
.woocommerce-account .fermentierra-account-article:last-child {
	border-right: 0;
}
.woocommerce-account .fermentierra-account-article__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	text-decoration: none;
}
.woocommerce-account .fermentierra-account-article__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.woocommerce-account .fermentierra-account-article__body {
	display: flex;
	flex-direction: column;
	gap: var(--ftr-space-xs);
	padding: var(--ftr-space-md) var(--ftr-space-lg) var(--ftr-space-lg);
	border-top: var(--ftr-hairline);
}
.woocommerce-account .fermentierra-account-article__meta {
	font-size: var(--ftr-text-detail);
}
.woocommerce-account .fermentierra-account-article h3 {
	margin: 0;
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: 1.125rem;
	line-height: var(--ftr-lh-heading);
}
.woocommerce-account .fermentierra-account-article h3 a {
	color: var(--ftr-dark);
	text-decoration: none;
}
.woocommerce-account .fermentierra-account-article h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-account .fermentierra-account-article p {
	margin: 0;
	font-size: var(--ftr-text-base);
	line-height: 1.5;
}
.woocommerce-account .fermentierra-account-articles__footer {
	display: flex;
	justify-content: center;
	padding: var(--ftr-space-2xl) 0;
	border-top: var(--ftr-hairline);
}
.woocommerce-account .fermentierra-account-articles__footer a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--ftr-space-xs) var(--ftr-space-md);
	border: var(--ftr-hairline);
	border-radius: var(--ftr-radius-btn);
	background: transparent;
	color: var(--ftr-dark);
	font-weight: var(--ftr-fw-semibold);
	line-height: normal;
	text-decoration: none;
}
.woocommerce-account .fermentierra-account-articles__footer a:hover {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}

/* Orders / downloads tables reuse the order-received table treatment. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border: var(--ftr-hairline);
	border-radius: 0;
	border-collapse: collapse;
	background: var(--ftr-light);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: 0;
	border-bottom: var(--ftr-hairline);
	padding: var(--ftr-space-sm) var(--ftr-space-md);
	background: none;
	color: var(--ftr-dark);
	font-size: var(--ftr-text-base);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	font-weight: var(--ftr-fw-semibold);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var(--ftr-space-3xs) 0 var(--ftr-space-3xs) var(--ftr-space-2xs);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:first-child {
	margin-left: 0;
}

/* Saved addresses: same flat hairline panel as the thank-you page. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ftr-space-lg);
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none !important;
	width: auto !important;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ftr-space-sm);
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address address {
	border: var(--ftr-hairline);
	border-radius: 0;
	padding: var(--ftr-space-md);
	background: var(--ftr-light);
	font-style: normal;
}

/* Dashboard buttons (View order, Edit address, Save changes) = the secondary
   button, so the accent stays unique to Place Order / Log in. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: transparent;
	color: var(--ftr-dark);
	border: 1px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	padding: var(--ftr-space-2xs) var(--ftr-space-sm);
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-semibold);
	font-size: var(--ftr-text-base);
	box-shadow: none;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}

/* Reordering is the primary action in the order table; "Voir" remains the
   quieter outlined action beside it. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .order-again {
	background: var(--ftr-accent);
	color: var(--ftr-ink);
	border: 1px solid var(--ftr-ink);
	border-radius: var(--ftr-radius-pill);
	padding: var(--ftr-space-xs) var(--ftr-space-md);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .order-again:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .order-again:focus-visible {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}

.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ftr-space-lg);
	margin-top: var(--ftr-space-lg);
	padding: var(--ftr-space-2xl);
	border: var(--ftr-hairline);
	background: var(--ftr-light);
	color: var(--ftr-dark);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__content {
	display: block;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__eyebrow,
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__title,
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__button {
	display: block;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__eyebrow {
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: 0.875rem;
	line-height: var(--ftr-lh-heading);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__title {
	margin-top: var(--ftr-space-2xs);
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.1;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__button {
	flex: 0 0 auto;
	padding: var(--ftr-space-xs) var(--ftr-space-md);
	border: 1px solid var(--ftr-ink);
	border-radius: var(--ftr-radius-pill);
	background: var(--ftr-accent);
	color: var(--ftr-ink);
	font-family: var(--ftr-font-body);
	font-weight: var(--ftr-fw-semibold);
	font-size: var(--ftr-text-base);
	line-height: var(--ftr-lh-heading);
	white-space: nowrap;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__button:hover {
	background: var(--ftr-dark);
	color: var(--ftr-light);
}
.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__button:focus-visible {
	outline: 2px solid var(--ftr-dark);
	outline-offset: 4px;
}

/* Account-details / address form inputs reuse the login field treatment above;
   the select (country) needs the same frame. */
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .select2-selection {
	border: 1.5px solid var(--ftr-dark);
	border-radius: var(--ftr-radius-btn);
	height: 48px;
	padding: 0 var(--ftr-space-md);
	background: var(--ftr-light);
	color: var(--ftr-dark);
	font-family: var(--ftr-font-body);
	font-size: var(--ftr-text-base);
	box-shadow: none;
}

/* ==========================================================================
 * Header rhythm — the site nav's 60px bar, wordmark and glyphs centred (FER-88)
 * --------------------------------------------------------------------------
 * The wordmark link and the glyph links are inline boxes inside block wrappers
 * (a <p> for the site title, a <div> per glyph block). Each wrapper's line box
 * is taller than the box it holds, and flex centres the WRAPPER, so the
 * wordmark rode low and the glyphs high. Zeroing the wrappers' line-height and
 * making the links block-level leaves nothing but the boxes to centre.
 *
 * The header group's padding is written by WordPress as an INLINE style
 * (padding-top: var(--wp--preset--spacing--20), 7.5px on phones, 20px on
 * desktop), which no stylesheet rule can beat without !important. 8px top and
 * bottom around the 44px wordmark gives the 60px bar the frontend nav has.
 * The account header nests a second .alignwide group inside the padded one;
 * that inner group carries no padding of its own.
 * ========================================================================== */
.woocommerce-checkout .wp-block-site-title,
.woocommerce-account .wp-block-site-title {
	line-height: 0;
	margin: 0;
}
.woocommerce-checkout .wp-block-woocommerce-cart-link,
.woocommerce-account .wp-block-woocommerce-cart-link,
.woocommerce-account .wp-block-woocommerce-customer-account {
	line-height: 0;
}
.woocommerce-checkout .wc-block-cart-link,
.woocommerce-account .wc-block-cart-link,
.woocommerce-account .wc-block-customer-account__link,
.woocommerce-account .wp-block-woocommerce-customer-account a {
	display: block;
}
.woocommerce-checkout header .wp-block-group.alignwide,
.woocommerce-account header .wp-block-group.alignwide {
	flex-wrap: nowrap;
	padding-top: var(--ftr-space-2xs) !important;
	padding-bottom: var(--ftr-space-2xs) !important;
}
.woocommerce-account header .wp-block-group.alignwide .wp-block-group.alignwide {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.woocommerce-account header .wp-block-group.is-layout-flex {
	flex-wrap: nowrap;
	align-items: center;
}

/* ==========================================================================
 * Classic account forms — login, lost / reset password, addresses, details
 * --------------------------------------------------------------------------
 * These screens are WooCommerce's classic templates (.woocommerce form,
 * .form-row, .input-text, .woocommerce-button), so one set of rules covers
 * them all. Twenty Twenty-Four set the page's body text at 16.8px and the
 * field text at 14.4px — smaller than its own label, and under the 16px that
 * keeps iOS from zooming into a focused field. Everything reads at the
 * storefront's 16px; the button loses the inherited 1.7 line-height (53px)
 * for the 46px every .btn has; rows get the storefront's 16px rhythm.
 * ========================================================================== */
.woocommerce-account .woocommerce {
	font-size: var(--ftr-text-base);
}
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce-Input.input-text {
	font-size: var(--ftr-text-base) !important; /* TT4's input rule outranks the plain selector */
}
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-form-register,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce form.edit-account {
	padding: var(--ftr-space-sm);
	max-width: 560px; /* a login form is not a paragraph; 1000px-wide fields read wrong */
}

/* Logged-out My Account: login and registration are one matched pair. Woo's
   register form otherwise keeps its default rounded white card and larger
   inset. Grid + flex makes both cards exactly the same width and height while
   preserving the familiar side-by-side desktop / stacked mobile layout. */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	display: none;
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
}
.woocommerce-account #customer_login form.woocommerce-form-login,
.woocommerce-account #customer_login form.woocommerce-form-register {
	box-sizing: border-box;
	flex: 1;
	width: 100%;
}
.woocommerce-account #customer_login form.woocommerce-form-register {
	display: flex;
	flex-direction: column;
}
.woocommerce-account #customer_login form.woocommerce-form-register .form-row:last-child {
	margin-top: auto;
}
/* The login card has a one-line lost-password link below its CTA. Reserve the
   same line in the registration card so both CTA rows share one baseline. */
.woocommerce-account #customer_login form.woocommerce-form-register::after {
	content: "";
	display: block;
	flex: 0 0 1.7em;
}
.woocommerce-account #customer_login button[type="submit"] {
	justify-content: center;
	min-width: 158px;
}
.woocommerce-account .woocommerce form .form-row {
	padding: 0;
	margin: 0 0 var(--ftr-space-sm);
}
.woocommerce-account .woocommerce form .form-row label {
	margin-bottom: var(--ftr-space-2xs);
}
.woocommerce-account .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0 var(--ftr-space-2xs) 0 0;
	vertical-align: -3px;
	accent-color: var(--ftr-dark);
}
.woocommerce-account .woocommerce-button.wp-element-button,
.woocommerce-account .woocommerce-Button.wp-element-button {
	line-height: normal;
}
.woocommerce-account .woocommerce-LostPassword {
	margin: var(--ftr-space-sm) 0 0;
}
/* WooCommerce marks the lost-password form's single field "form-row-first" —
   the 47% float meant for Prénom / Nom pairs — so it sat half-width on
   desktop. Full width here only; the address forms keep their pairs. */
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row-first,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword .woocommerce-form-row--first {
	width: 100%;
	float: none;
}
/* The lost-password intro paragraph opens its panel; the panel's inset is the
   only space it needs above. */
.woocommerce-account .woocommerce form > p:first-child {
	margin-top: 0;
}
/* Long submit labels ("Réinitialisation du mot de passe") wrap on phones, as
   the storefront's card buttons do; the narrower side padding keeps the pill
   proportionate to two lines. */
@media (max-width: 900px) {
	.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		gap: var(--ftr-space-md);
	}
	.woocommerce-account .woocommerce-button.wp-element-button,
	.woocommerce-account .woocommerce-Button.wp-element-button {
		padding-inline: var(--ftr-space-sm);
		text-align: center;
	}
}

/* Page title: the storefront's display size (same clamp as its page headers).
   Twenty Twenty-Four had it at the section-heading size, so "Mon compte" and
   "Se connecter" read as two equal headlines. The logged-out screens are a
   centred composition — title, section heading and the 560px panel share the
   page axis. One 32px step to the first section heading: the template's
   spacer block and the heading's own top margin are removed. */
.woocommerce-account h1.wp-block-post-title {
	text-align: center;
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1;
}
/* Signed in, the title heads a working page (nav row, tables, forms) rather
   than a centred card, so it sits on the content's left edge like every
   storefront page header. */
.woocommerce-account.logged-in h1.wp-block-post-title {
	text-align: left;
}
.woocommerce-account .entry-content.wp-block-post-content {
	margin-top: 0;
}
.woocommerce-account .wp-block-spacer {
	display: none;
}
.woocommerce-account .woocommerce > h2:first-of-type {
	margin-top: 0;
	text-align: center;
}
.woocommerce-account .woocommerce form.woocommerce-form-login,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
 * Signed-in account — navigation, notices, fieldsets
 * --------------------------------------------------------------------------
 * The nav row (see "Account nav" above) works on desktop, but on a phone four
 * Lovelo items with 32px gaps wrap into a word-pile with underlines running
 * between the lines. Below the breakpoint it becomes the storefront's mobile
 * filter list instead: one 48px row per item, hairline between, the current
 * one in medium weight with the ink dot the .hub-filter list uses.
 * ========================================================================== */
@media (max-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: var(--ftr-space-md);
		padding-bottom: 0;
		border-bottom: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		gap: 0;
		border-top: var(--ftr-hairline);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		display: block;
		width: 100%;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px;
		border-bottom: var(--ftr-hairline);
		opacity: 1;
		font-family: var(--ftr-font-body);
		font-weight: var(--ftr-fw-light);
		letter-spacing: 0;
		text-decoration: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
		font-weight: 500;
		text-decoration: none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		margin-left: auto;
		border-radius: 50%;
		background: var(--ftr-dark);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-left: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--ftr-space-md);
		padding: var(--ftr-space-lg);
	}

	/* Tables become flat information cards before five columns can squeeze or
	   force horizontal scrolling on portrait tablets. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive {
		display: block;
		border: 0;
		background: transparent;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive thead {
		display: none;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody {
		display: grid;
		gap: var(--ftr-space-sm);
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr {
		display: block;
		margin: 0;
		border: var(--ftr-hairline);
		background: var(--ftr-light);
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td {
		display: flex !important;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--ftr-space-sm);
		width: 100%;
		text-align: right !important;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td::before {
		content: attr(data-title);
		float: none;
		flex: 0 0 38%;
		font-weight: var(--ftr-fw-semibold);
		text-align: left;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td:last-child {
		border-bottom: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		white-space: normal;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before {
		margin-right: auto;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions .button {
		margin: 0 0 0 var(--ftr-space-2xs);
	}
}

@media (max-width: 600px) {
	.woocommerce-account .fermentierra-customer-dashboard__shop,
	.woocommerce-account .fermentierra-account-articles__footer a {
		width: 100%;
		box-sizing: border-box;
	}
	.woocommerce-account .fermentierra-account-articles__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.woocommerce-account .fermentierra-account-article {
		border-right: 0;
		border-bottom: var(--ftr-hairline);
	}
	.woocommerce-account .fermentierra-account-article:last-child {
		border-bottom: 0;
	}
	.woocommerce-account .fermentierra-account-article__body {
		padding-right: var(--ftr-space-sm);
		padding-left: var(--ftr-space-sm);
	}

	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ftr-space-md);
	}
	.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card {
		padding: var(--ftr-space-md);
	}
	.woocommerce-account .woocommerce-MyAccount-content .fermentierra-pro-card__button {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td {
		align-items: stretch;
		flex-direction: column;
		gap: var(--ftr-space-2xs);
		text-align: left !important;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive td::before {
		flex-basis: auto;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions .button {
		width: 100%;
		box-sizing: border-box;
		margin: 0;
	}
	.woocommerce-account .woocommerce form .form-row-first,
	.woocommerce-account .woocommerce form .form-row-last {
		float: none;
		width: 100%;
	}
	.woocommerce-account .woocommerce form.woocommerce-EditAccountForm .woocommerce-button,
	.woocommerce-account .woocommerce form.edit-account .woocommerce-button {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* Notices: WooCommerce ships these as blue-on-pale-blue rounded cards with a
   blue glyph — the only colour on the page that is not ours. Same flat
   hairline panel as everywhere else, with the glyph reversed out of a dark
   chip. Their inner call to action is marked up as a .button but is a plain
   navigation link, and WooCommerce right-aligns it, which on a phone strands
   it above (or mid-sentence within) its own explanatory text. It reads as a
   link on its own line under the text. */
.woocommerce-account .wc-block-components-notice-banner {
	background: var(--ftr-light);
	border: var(--ftr-hairline);
	border-radius: 0;
	box-shadow: none;
	color: var(--ftr-dark);
}
.woocommerce-account .wc-block-components-notice-banner > svg {
	background-color: var(--ftr-dark) !important;
	fill: var(--ftr-light) !important;
}
.woocommerce-account .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	display: block;
}
.woocommerce-account .wc-block-components-notice-banner .button,
.woocommerce-account .wc-block-components-notice-banner a {
	display: block;
	float: none;
	margin-top: var(--ftr-space-2xs);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	color: var(--ftr-dark);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Détails du compte": the form gets the same panel as the login form, and
   the password fieldset drops the browser's 2px grey groove for a hairline
   rule with the legend as a section heading. */
.woocommerce-account .woocommerce fieldset {
	margin: var(--ftr-space-md) 0 0;
	padding: var(--ftr-space-md) 0 0;
	border: 0;
	border-top: var(--ftr-hairline);
	border-radius: 0;
}
.woocommerce-account .woocommerce fieldset legend {
	padding: 0;
	font-family: var(--ftr-font-display);
	font-weight: 900;
	font-size: var(--ftr-text-base);
}

/* ==========================================================================
 * Content guards
 * ========================================================================== */
/* A product's short description reaches the order summary with whatever inline
   styling it was written with in WordPress (one had an 18px bold green <p>).
   Inside the summary it is item metadata and reads as such. */
.woocommerce-checkout .wc-block-components-product-metadata__description p {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	margin: 0 !important;
}

/* The newsletter checkbox and the guest notice followed the e-mail field with
   0 and 4px; every other field in the form has 16px below it. */
.woocommerce-checkout .wc-block-components-text-input + .wc-block-components-checkbox {
	margin-top: var(--ftr-space-sm);
}
.woocommerce-checkout .wc-block-checkout__guest-checkout-notice {
	margin-top: var(--ftr-space-sm);
}

/* ==========================================================================
 * Option groups — shipping and payment: one hairline frame, hairline dividers
 * --------------------------------------------------------------------------
 * WooCommerce draws the selected option with an inset box-shadow "highlight",
 * gives the options mixed 0 / 4px radii and no frame around the group, so a
 * two-option group read as a loose stack with a glow on one row. Flat instead:
 * the group gets the frame, the rows a divider, the highlight is dropped (the
 * radio itself marks the selection).
 * ========================================================================== */
.woocommerce-checkout .wc-block-components-radio-control,
.woocommerce-checkout .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	box-shadow: none !important;
	outline: none !important;
	border-radius: 0 !important;
}
.woocommerce-checkout .wc-block-components-radio-control__option::before,
.woocommerce-checkout .wc-block-components-radio-control__option::after,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option::before,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option::after {
	display: none !important;
}
.woocommerce-checkout .wc-block-components-shipping-rates-control__package,
.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control {
	border: var(--ftr-hairline);
	border-radius: 0;
}
.woocommerce-checkout .wc-block-components-radio-control__option + .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	border-top: var(--ftr-hairline);
}

/* ==========================================================================
 * Coupon toggle — a bordered secondary button with padding, everywhere
 * --------------------------------------------------------------------------
 * WooCommerce ships `padding-left: 0 !important` on this button (its
 * packages-style.css), so the focus outline and, in the full summary, the
 * border sat flush against the label; !important is the only way past it.
 * The sidebar variant used to be stripped of its border (see the borderless
 * list above); on phones the summary also renders un-sided, where the toggle
 * kept its box, and the two looked like different controls. One look now.
 * ========================================================================== */
.woocommerce-checkout .wc-block-components-panel__button,
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button {
	padding: var(--ftr-space-xs) var(--ftr-space-sm);
	padding-left: var(--ftr-space-sm) !important;
	border: var(--ftr-hairline);
	border-radius: var(--ftr-radius-btn);
}
.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-button.wp-element-button {
	padding: var(--ftr-space-xs) var(--ftr-space-sm);
}

/* ==========================================================================
 * Summary column insets
 * --------------------------------------------------------------------------
 * Desktop: WooCommerce separates the two columns with padding-LEFT on the
 * sidebar (~28px) — inside our frame, so the content sat 45px from the left
 * edge and 17px from the right. The main column already carries the gap as
 * padding-right, so the sidebar's own can go; 16px under the last totals row
 * mirrors the title's 16px top margin.
 *
 * Phones (WooCommerce's single-column layout): the collapsible summary at the
 * top had 0 side padding on its title and mixed insets below it; the full
 * summary above the button had a grey rounded WooCommerce frame. One 16px
 * inset on the block, every nested wrapper zeroed, and the full summary gets
 * the same hairline frame as the sidebar.
 * ========================================================================== */
@media (min-width: 769px) {
	.woocommerce-checkout .wc-block-checkout__sidebar {
		padding-left: 0;
	}
	.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		padding-bottom: var(--ftr-space-sm);
	}
}

@media (max-width: 768px) {
	/* Header -> content: 24px, like the storefront's section rhythm. */
	.woocommerce-checkout main.wp-block-group,
	.woocommerce-checkout .entry-content.alignwide {
		margin-top: 0;
	}
	.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
		padding-top: var(--ftr-space-md);
	}

	/* Collapsible summary (inside the sidebar). */
	.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		padding: 0 var(--ftr-space-sm);
	}
	/* The title is the tap target (a div[role=button]). It spans the panel —
	   negative margin against the block's inset, its own 16px padding keeps the
	   text aligned with the rows — so the focus ring frames the whole header
	   row instead of a text-hugging box. 2px dark ring like the storefront's
	   size choices; tucked inside the hairline rather than outside it. */
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
		margin: 0 calc(-1 * var(--ftr-space-sm));
		padding: var(--ftr-space-sm);
		border: 0;
	}
	.woocommerce-checkout .wc-block-components-checkout-order-summary__title:focus-visible {
		outline: 2px solid var(--ftr-dark);
		outline-offset: -2px;
	}
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-coupon,
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-coupon .wc-block-components-panel,
	.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	/* Full summary (in the main column, above the place-order button). */
	.woocommerce-checkout .wc-block-checkout__main .checkout-order-summary-block-fill {
		border: var(--ftr-hairline);
		border-radius: 0;
		box-shadow: none;
	}
	.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
	.woocommerce-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-totals-block,
	.woocommerce-checkout .wc-block-checkout__main .wc-block-components-totals-wrapper {
		border-top: 0;
	}
}