/* ==========================================================================
 * 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 {
	--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-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;
}

/* ==========================================================================
 * 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, at
 * the frontend's 40px logo height (144x37 aspect -> 156px wide). 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: inline-block;
	width: 311px;
	height: 80px;
	background: url("images/fermentierra-dark.svg") no-repeat left center;
	background-size: contain;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

/* 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;
}
.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;
}
.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 {
	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), the totals wrappers carry divider top-rules, and the
   "Add coupons" toggle carries a box. 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. */
.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,
.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button {
	border: 0;
	box-shadow: 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-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 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 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) = accent fill, pill, 1px dark border,
   dark text; hover inverts to dark background / light text. Matches .btn-primary. */
.woocommerce-checkout .wc-block-components-checkout-place-order-button.wp-element-button,
.woocommerce-account .woocommerce-button.woocommerce-form-login__submit.wp-element-button {
	background: var(--ftr-accent);
	color: var(--ftr-dark);
	border: 1px solid var(--ftr-dark);
	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.woocommerce-form-login__submit.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;
}
.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;
}

/* 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;
}

/* 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);
}

/* Saved addresses: same flat hairline panel as the thank-you page. */
.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);
}

/* 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;
}