/* ════════════════════════════════════════════════════════════════════════
 * brand.css — GENERATED by wordpress/sop/gen-theme-css.sh. DO NOT EDIT.
 * Edit site.config.ts (tokens) or the generator's static section instead.
 * Generated for: uu.life
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted brand fonts (match the storefront) ─────────────────────── */
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("./fonts/Gilroy-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --brand-bg: #FAF8F3;
  --brand-paper: #FFFFFF;
  --brand-paper-warm: #F6F7F9;
  --brand-ink: #0A0A0A;
  --brand-ink-soft: #56585C;
  --brand-ink-dim: #9CA0A6;
  --brand-accent: #5783DA;
  --brand-accent-soft: #DCE6F7;
  --brand-copper: #8C96A1;
  --brand-coral: #C98E78;
  --brand-card: #FFFFFF;
  --brand-btn: #0A0A0A;
  --brand-font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --brand-font-display: "Gilroy", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --brand-font-mono: "Gilroy", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Reset-ish base for the Woo pages ───────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body.brand-body {
margin: 0;
background: var(--brand-bg);
color: var(--brand-ink);
font-family: var(--brand-font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.brand-body a { color: var(--brand-accent); text-underline-offset: 2px; }
body.brand-body a:hover { color: var(--brand-ink); }
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
font-family: var(--brand-font-display);
color: var(--brand-ink);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.15;
}

/* ── Layout shell ───────────────────────────────────────────────────────── */
/* The storefront's compact sticky bar (mirrors novo.plus): translucent
 * white with backdrop blur, hairline bottom rule, 59px tall. */
.brand-header {
position: sticky;
top: 0;
z-index: 80;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid #e8eaee;
}
/* Header + footer span the storefront header width (max-w-[1400px], px-9);
 * the checkout content sits in the narrower commerce column (max-w 1100). */
.brand-header__inner,
.brand-footer__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 36px;
}
.brand-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 36px;
}
/* 10px vertical padding + a 38px min row = the storefront bar's 59px. */
.brand-header__inner {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding-top: 10px;
padding-bottom: 10px;
}
.brand-header__wordmark {
font-family: var(--brand-font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--brand-ink);
letter-spacing: -0.01em;
}
.brand-main { min-height: 60vh; }
.brand-container { padding-top: 40px; padding-bottom: 64px; }

/* ── Footer ───────────────────────────────────────────────────────────
 * Mirrors the closing section of the storefront footer (dark ink panel:
 * legal row, trust badges with the payment marks beneath them, brand
 * line, research-use disclaimer) so the WP-hosted pages end the same
 * way the rest of the site does. Text tones are white alphas, as in the
 * storefront's text-white/70 etc., so they read on any dark ink. */
.brand-footer {
background: var(--brand-ink);
color: var(--brand-paper);
margin-top: 64px;
}
.brand-footer__inner {
padding-top: 40px;
padding-bottom: 32px;
}
.brand-footer__legal-row {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
gap: 24px 32px;
justify-content: space-between;
}
.brand-footer__legal-group {
align-items: center;
color: rgba(255, 255, 255, 0.7);
display: flex;
flex-wrap: wrap;
font-size: 11px;
gap: 8px 20px;
}
.brand-footer__legal { margin: 0; }
.brand-footer__back { margin: 0; }
.brand-footer__back a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.brand-footer__back a:hover { color: #fff; }
.brand-footer__trust {
align-items: flex-end;
display: flex;
flex-direction: column;
gap: 16px;
}
.brand-footer__badges,
.brand-footer__payments {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
.brand-footer__badges { gap: 12px; }
.brand-footer__badge {
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 2px;
color: rgba(255, 255, 255, 0.75);
font-family: var(--brand-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
padding: 6px 12px;
text-transform: uppercase;
}
/* White chips so the card marks keep their own colours on the ink. */
.brand-footer__payments {
align-items: center;
gap: 8px;
}
.brand-footer__payment {
align-items: center;
background: #fff;
border-radius: 5px;
display: inline-flex;
height: 28px;
justify-content: center;
padding: 6px;
width: 44px;
}
.brand-footer__payment img {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
.brand-footer__brand {
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 40px;
padding-top: 32px;
}
.brand-footer__tagline {
color: #fff;
font-family: var(--brand-font-display);
font-size: clamp(22px, 3.4vw, 34px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
text-transform: uppercase;
}
.brand-footer__tagline-body {
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
line-height: 1.7;
margin: 12px 0 0;
max-width: 640px;
}
.brand-footer__disclaimer {
color: rgba(255, 255, 255, 0.55);
font-family: var(--brand-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
margin: 24px 0 0;
text-transform: uppercase;
}
/* The fixed WhatsApp button floats over the footer's right edge on
 * checkout (56px at bottom:20px; 48px at bottom:104px on phones, above
 * the sticky pay bar). Leave the footer a floor at least that tall so
 * the button never covers the disclaimer or the payment marks. */
body.woocommerce-checkout:not(.woocommerce-order-received) .brand-footer__inner { padding-bottom: 96px; }
@media (max-width: 768px) {
.brand-footer__trust { align-items: flex-start; }
.brand-footer__badges,
.brand-footer__payments { justify-content: flex-start; }
body.woocommerce-checkout:not(.woocommerce-order-received) .brand-footer__inner { padding-bottom: 168px; }
}

.brand-article__title { font-size: 2rem; margin: 0 0 24px; }

/* ── Checkout header: back-to-cart + padlock ──────────────────────────
 * A lone wordmark on a 1400px bar reads as a broken page. These sit on
 * the right of the same row, quiet enough not to compete with the form. */
.brand-header__back,
.brand-header__secure {
align-items: center;
display: inline-flex;
font-size: 0.8rem;
gap: 6px;
}
.brand-header__back {
color: var(--brand-ink-soft);
margin-left: auto;
position: relative;
text-decoration: none;
}
/* The link is one short line of 13px text; the pseudo-element gives it
 * a 44px-tall thumb target without changing the bar's height. */
.brand-header__back::after {
content: "";
height: 44px;
left: -8px;
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
}
.brand-header__back:hover { color: var(--brand-ink); }
/* The same Visa / MC / Amex card chips as the storefront bar. */
.brand-header__pay {
align-items: center;
display: inline-flex;
gap: 4px;
margin-left: 24px;
}
.brand-header__pay img {
border-radius: 3px;
display: block;
height: 18px;
width: auto;
}
.brand-header__secure {
color: var(--brand-ink-dim);
margin-left: 24px;
}
@media (max-width: 600px) {
/* Both labels will not fit a phone bar, but dropping back-to-cart
 * leaves no way back except the browser button. Keep both: shorten
 * the link to "Cart" and reduce the padlock to its icon. */
.brand-header__inner { padding-left: 20px; padding-right: 20px; }
.brand-header__back span { font-size: 0; }
.brand-header__back span::after { content: "Cart"; font-size: 0.8rem; }
.brand-header__pay { margin-left: 12px; }
.brand-header__secure { margin-left: 12px; }
.brand-header__secure span { display: none; }
}

/* ── Checkout page rhythm ─────────────────────────────────────────────
 * wpautop wraps the [woocommerce_checkout] shortcode in empty <p>s; with
 * the container's 64px bottom pad and the footer's 64px top margin that
 * left ~144px of dead cream under the pay button. Tighten all three. */
.woocommerce-checkout .brand-article__content > p { margin: 0; }
.woocommerce-checkout .brand-container { padding-bottom: 32px; }
.woocommerce-checkout .brand-footer { margin-top: 32px; }

/* Login + coupon toggles: a quiet utility pair under the title. They were
 * two full-width accent-blue link lines with nothing separating them from
 * the form, so they read louder than the H1 they sit under. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
border-bottom: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
margin-bottom: 24px;
padding-bottom: 4px;
}
/* .woocommerce-checkout prefix is load-bearing: the base .showcoupon /
 * .showlogin rule further down this sheet sets accent + no underline,
 * and equal specificity later in the file would win. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-checkout .woocommerce-form-login-toggle .showlogin {
color: var(--brand-ink);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--brand-ink) 30%, transparent);
text-underline-offset: 3px;
}

/* ── Tick rows: one treatment for every checkbox + radio ───────────────
 * Woo ships 13px OS-default ticks, and this sheet used to give each one a
 * different treatment (22px block + hanging indent, 18px flex, 40px
 * inline-flex). One rule set instead: 20px control, 12px gap, 44px row
 * (Apple HIG / WCAG 2.5.5 minimum), whole label tappable, brand accent
 * on every tick. The terms box is REQUIRED and sits on the last step
 * before payment, so a mis-tap costs an order. */
/* The .checkbox second class is load-bearing: Woo core ships
 * `.woocommerce form .form-row label.checkbox { display: inline }`
 * (0,3,2). An inline box ignores min-height and gap, so a
 * lower-specificity rule here sizes the control but leaves the row 17px
 * tall. The login panel's "Remember me" is listed separately: its label
 * carries .woocommerce-form-login__rememberme but NOT .checkbox, so the
 * selector above never reaches it. brand-ac-manual carries the
 * form-row prefix for the same reason — core's
 * `.woocommerce form .form-row label { display: block }` outranks a bare
 * class and would flatten the row back into an unaligned tick with the
 * text jammed against it. */
.woocommerce-checkout form.checkout label.woocommerce-form__label-for-checkbox.checkbox,
.woocommerce-checkout form.woocommerce-form-login label.woocommerce-form-login__rememberme,
.woocommerce form .form-row label.brand-ac-manual,
.woocommerce-checkout .form-row label.brand-ac-manual,
.woocommerce-checkout label.brand-ship-protect__label {
align-items: center;
color: var(--brand-ink-soft);
cursor: pointer;
display: flex;
font-size: 0.9rem;
font-weight: 400;
gap: 12px;
line-height: 1.4;
margin: 0;
min-height: 44px;
}
/* The required asterisk is a SIBLING of the text span (Woo markup), so as
 * a flex item it would sit a full 12px gap after the last word. Pull it
 * back to a normal word space; it must not strand at the row's far end. */
.woocommerce-checkout form.checkout label.woocommerce-form__label-for-checkbox.checkbox abbr.required {
margin-left: -8px;
}
/* Checkbox and payment radio share size + accent. The radios are scoped
 * to #payment: the shipping-rate radios in the totals table keep their
 * own treatment.
 *
 * The .form-row variant is listed too, at matching specificity to Woo
 * core's `.woocommerce form .form-row input.input-checkbox`, which ships
 * its own margin. Without it "Create an account?" (the only one of these
 * ticks that sits in a .form-row AND carries .input-checkbox) keeps that
 * margin on top of the label's 12px gap and its text hangs 8px right of
 * the rows above and below it. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout form .form-row input[type="checkbox"],
.woocommerce-checkout #payment input[type="radio"] {
accent-color: var(--brand-accent);
flex: none;
height: 20px;
margin: 0;
width: 20px;
}
/* "Deliver to a different address" arrives wrapped in an h3 — Woo core
 * markup, so the element stays (a11y/DOM). Without this reset it renders
 * at 18.72px in the display face, identical to the real section headings
 * (Contact, Delivery) it sits between; a tick control must not outrank
 * the sections around it. The label inside is styled by the shared rule
 * above; this only kills the wrapper's heading typography. */
.woocommerce-checkout h3#ship-to-different-address {
color: var(--brand-ink-soft);
font-family: var(--brand-font-sans);
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.4;
/* 6px, not the h3's 24px: this is the third of three identical tick
 * rows, and the two above it sit ~14px apart. At 24px it read as a
 * new section rather than the last option in the same group. */
margin: 6px 0 0;
/* Core insets .form-row by 3px, which is where every field and the
 * two ticks above start. This h3 is NOT a .form-row, so without the
 * match its tick hangs 3px left of the column. */
padding-left: 3px;
}

/* ── Order totals table on a phone ────────────────────────────────────
 * The th/td split leaves the value column ~140px, so "Tracked delivery
 * (3-7 business days): EUR 9.95" and "Today's Total" both wrap to three
 * lines. Stack the label over the value below 600px instead. */
@media (max-width: 600px) {
/* Line items keep the 2-column table (name | price). The totals rows
 * become flex rows so the label sits left and the value right on ONE
 * line, instead of each cell being trapped in a ~140px table column.
 * The thead is dropped: "PRODUCT / SUBTOTAL" earns nothing on a phone
 * and stacks into two empty-looking rows. */
.woocommerce-checkout .woocommerce-checkout-review-order-table { display: block; }
.woocommerce-checkout .woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
align-items: baseline;
background: var(--brand-paper-warm);
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
display: flex;
gap: 16px;
justify-content: space-between;
padding: 12px 16px;
}
/* Background and padding move to the ROW. Left on the cells they only
 * paint their own flex width, which reads as staggered blocks with
 * cream showing through the gap between label and value.
 * table.shop_table is in the selector for specificity: the base cell
 * rule (.woocommerce table.shop_table th) is also two classes and
 * sits LATER in this sheet, so it would otherwise keep its padding
 * and border-top — the latter drawing a stub line above each cell. */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tfoot td {
background: transparent;
border-top: 0;
display: block;
padding: 0;
width: auto;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
flex: 0 0 auto;
text-align: left;
white-space: nowrap;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
/* Single-cell rows (the saving, the muted note) span the row and stay
 * right-aligned. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.brand-total-note td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.brand-order-saved td {
margin-left: auto;
}
.woocommerce-checkout .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
/* The method row is one flex-row card at every width (see the
 * #payment block below), so the phone needs no block-flow fallback.
 * Only the gateway's card icons need a phone rule: at ~290px of card
 * the four of them cannot share the title's line, and float:right
 * stacks them right-to-left, so they wrap as a ragged second group
 * in reverse reading order. Unfloated they simply run on after the
 * title and wrap in DOM order. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
float: none !important;
margin: 4px 6px 0 0 !important;
}
}

/* ── Mobile-first ordering: summary first, then form, then payment ────
 * display:contents dissolves #order_review so its children (totals
 * table, trust strip, #payment) become flex items of the form and can be
 * ordered independently of #customer_details. Note the visual order then
 * differs from DOM order, so the summary disclosure is reached late in
 * the tab sequence; everything in it is also shown in the sticky bar. */
@media (max-width: 600px) {
/* body. prefix is load-bearing: the desktop two-column
 * `display: grid` rule for this same selector lives LATER in this
 * sheet and is unwrapped, so at equal specificity it wins at every
 * width and the order values below never take effect. */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: flex;
flex-direction: column;
/* The desktop grid rule's align-items:start survives into this
 * flex context and makes every child shrink-wrap (the summary
 * band rendered 266px wide). Stretch is the flex default we
 * actually want back. */
align-items: stretch;
}
/* The injected Delivery heading rides the .form-row sorter; strip
 * the row chrome so it reads as a plain section break. */
.woocommerce-checkout form.checkout .brand-section-row {
float: none;
margin: 0;
padding: 0;
width: 100%;
}
.woocommerce-checkout form.checkout #order_review { display: contents; }
.woocommerce-checkout form.checkout #order_review_heading { display: none; }
/* Catch-all FIRST: the payment plugin injects its own nodes into
 * #order_review (#cs-stripe-button-container, a <style>, …). Once the
 * wrapper is display:contents those become flex items with the
 * default order:0 and the pay button jumps above everything. Park
 * unknown children after the payment box; the id in this selector is
 * why the rules below must also be scoped to #order_review to win. */
.woocommerce-checkout form.checkout #order_review > * { order: 9; }
/* Reference rhythm: chips, summary band, Contact/Delivery fields,
 * delivery-method card, Payment heading, gateway. The plugin's
 * injected pay button lands in the catch-all, after #payment. */
.woocommerce-checkout form.checkout #order_review > .brand-trust { order: 0; }
.woocommerce-checkout form.checkout #order_review > .brand-summary,
.woocommerce-checkout form.checkout #order_review > .woocommerce-checkout-review-order-table { order: 1; }
.woocommerce-checkout form.checkout > #customer_details { order: 2; }
.woocommerce-checkout form.checkout #order_review > .brand-ship-method { order: 3; }
.woocommerce-checkout form.checkout #order_review > .brand-upsell { order: 4; }
.woocommerce-checkout form.checkout #order_review > .brand-pay-intro { order: 4; }
.woocommerce-checkout form.checkout #order_review > #payment { order: 5; }

/* No "Checkout" h1 on a phone: the header wordmark + padlock already
 * say where the shopper is, and the first screen belongs to the
 * summary band and the form. (Kept on order-received, which shares
 * the woocommerce-checkout body class.) */
body.woocommerce-checkout:not(.woocommerce-order-received) .brand-article__header { display: none; }
body.woocommerce-checkout:not(.woocommerce-order-received) .brand-container { padding-top: 16px; }

/* First/Last name stack full width — two-up at 375px leaves ~160px
 * fields. Desktop keeps the pair. */
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last {
float: none;
width: 100%;
}

/* Full-bleed band, not a floating card: -20px margins cancel the
 * container's mobile gutter so it spans edge to edge under the
 * header, the way the reference checkout leads with its summary. */
.brand-summary {
background: var(--brand-paper-warm);
border-block: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
margin: 0 -20px 24px;
}
.brand-summary__toggle {
align-items: center;
cursor: pointer;
display: flex;
font-size: 0.95rem;
gap: 8px;
list-style: none;
min-height: 52px;
padding: 0 20px;
}
.brand-summary__toggle::-webkit-details-marker { display: none; }
.brand-summary__label { color: var(--brand-accent); font-weight: 500; }
.brand-summary__total {
color: var(--brand-ink);
font-weight: 600;
margin-left: auto;
}
.brand-summary .woocommerce-checkout-review-order-table { padding: 0 20px 8px; }
/* Chevron leads the label (reference order: "⌄ Show order summary"). */
.brand-summary__chevron {
color: var(--brand-accent);
flex: 0 0 auto;
order: -1;
transition: transform 0.18s ease;
}
.brand-summary[open] .brand-summary__chevron { transform: rotate(180deg); }
.brand-summary .woocommerce-checkout-review-order-table { margin: 0; }

/* Sticky total + jump to payment. */
.brand-paybar {
align-items: center;
backdrop-filter: blur(12px);
background: color-mix(in srgb, var(--brand-bg) 92%, transparent);
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
bottom: 0;
display: flex;
gap: 12px;
inset-inline: 0;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
position: fixed;
z-index: 100;
}
.brand-paybar__total { display: flex; flex-direction: column; line-height: 1.2; }
.brand-paybar__label {
color: var(--brand-ink-dim);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brand-paybar__amount { color: var(--brand-ink); font-size: 1.05rem; font-weight: 600; }
.brand-paybar__cta {
background: var(--brand-ink);
border: 0;
border-radius: 999px;
color: var(--brand-bg);
flex: 1 1 auto;
font-size: 0.95rem;
font-weight: 500;
min-height: 48px;
padding: 0 20px;
}
/* The fixed bar must not cover the end of the page. */
.woocommerce-checkout .brand-container { padding-bottom: 96px; }
}

/* Implied-consent line above the pay button (replaces the terms checkbox). */
.brand-consent {
color: var(--brand-ink-dim);
font-size: 0.8rem;
line-height: 1.5;
margin: 0 0 12px;
}
.brand-consent a {
color: var(--brand-ink-soft);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--brand-ink) 30%, transparent);
text-underline-offset: 3px;
}
.brand-consent a:hover { color: var(--brand-ink); }

/* Address-scope note under the (relabelled) Shipping details heading. */
.brand-address-note {
color: var(--brand-ink-soft);
font-size: 0.85rem;
line-height: 1.5;
margin: -8px 0 12px;
max-width: 46ch;
}

/* ════════════════════════════════════════════════════════════════════════
 * WooCommerce — checkout / cart / account, restyled to the brand.
 * Selectors limited to Woo core classes so they survive plugin updates.
 * ════════════════════════════════════════════════════════════════════════ */
.woocommerce, .woocommerce-page { color: var(--brand-ink); }
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
border-top-color: var(--brand-accent);
background: var(--brand-card);
border-radius: 8px;
box-shadow: none;
display: flow-root;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--brand-accent); }
.woocommerce .woocommerce-error { border-top-color: var(--brand-coral); }
.woocommerce .woocommerce-error::before { color: var(--brand-coral); }

/* Classic checkout coupon/login: quiet toggles, themed forms when opened. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--brand-ink-dim);
font-size: 12px;
margin: 0;
padding: 0;
text-align: right;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before {
content: none;
display: none;
}
.woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-form-login-toggle .showlogin {
align-items: center;
color: var(--brand-accent);
display: inline-flex;
font-weight: 500;
min-height: 44px;
text-decoration: none;
}
.woocommerce-form-coupon-toggle .showcoupon:hover,
.woocommerce-form-login-toggle .showlogin:hover { color: var(--brand-ink); }
.woocommerce-form-coupon-toggle .showcoupon:focus-visible,
.woocommerce-form-login-toggle .showlogin:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
}
.checkout_coupon.woocommerce-form-coupon {
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
margin: 12px 0 24px;
padding: 16px;
}
.checkout_coupon.woocommerce-form-coupon .form-row { margin-bottom: 0; }
.woocommerce-checkout form.woocommerce-form-login {
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
margin: 12px 0 24px;
padding: 16px;
}
.woocommerce-checkout form.woocommerce-form-login .form-row { margin-bottom: 12px; }
.woocommerce-checkout form.woocommerce-form-login .lost_password { margin: 4px 0 0; }
.woocommerce-checkout form.woocommerce-form-login .lost_password a {
color: var(--brand-accent);
font-weight: 500;
}

/* Headings on Woo pages */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-cart h1,
.woocommerce-account h1,
.woocommerce h2 {
font-family: var(--brand-font-display);
font-weight: 500;
color: var(--brand-ink);
}

/* ── Classic checkout layout ────────────────────────────────────────────
 * Woo core only floats .col-1/.col-2 at 48%, leaving the right half of
 * wide screens empty. Grid it instead: billing left, order review in a
 * sticky right rail. Falls back to one column under 900px. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
/* 1fr on row 2 is load-bearing. #customer_details spans both rows, so
 * with `auto` rows the browser splits its height across them and row 1
 * inflates — pushing "Your order" ~370px above its own card whenever
 * the left column is the taller one (e.g. once "Deliver to a different
 * address" is ticked). 1fr sends that slack to row 2 instead. */
grid-template-rows: min-content 1fr;
column-gap: 48px;
align-items: start;
}
.woocommerce-checkout form.checkout #customer_details {
grid-column: 1;
grid-row: 1 / span 2;
}
.woocommerce-checkout form.checkout #order_review_heading {
grid-column: 2;
grid-row: 1;
margin-top: 0;
}
.woocommerce-checkout form.checkout #order_review {
grid-column: 2;
grid-row: 2;
position: sticky;
top: 24px;
}
/* Kill the core 48% floats inside customer details; fields fill the column. */
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
float: none;
width: 100%;
}
/* Login/coupon toggles: tuck them under the title, not floating far right. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { text-align: left; }
/* Tablet only. This used to be plain (max-width: 900px), which also
 * matched phones — and being later in this sheet than the mobile-first
 * block above, its `display: block` silently won there, leaving the
 * summary/form/payment `order` values inert and the order summary
 * stranded at the bottom of the page. Below 601px the mobile-first flex
 * ordering owns the layout. */
@media (min-width: 601px) and (max-width: 900px) {
.woocommerce-checkout form.checkout.woocommerce-checkout { display: block; }
.woocommerce-checkout form.checkout #order_review { position: static; }
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
color: var(--brand-ink-soft);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce .select2-container .select2-selection,
.woocommerce select {
background: var(--brand-paper);
border: 1px solid color-mix(in srgb, var(--brand-ink) 18%, transparent);
border-radius: 8px;
color: var(--brand-ink);
padding: 12px 14px;
font-size: 16px;
line-height: 1.3;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce select:focus {
outline: none;
border-color: var(--brand-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}
.woocommerce form .form-row.woocommerce-invalid label { color: var(--brand-coral); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
border-color: var(--brand-coral);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-coral) 16%, transparent);
}

/* ── Paired address rows ─────────────────────────────────────────────────
 * Street + House no. and Postcode + City each share a line, matching the
 * reference checkout. Woo's own form-row-first/last are a fixed 47/47,
 * and a house number wants a quarter of the row while a postcode wants a
 * third, so these carry their own widths. Floats, because that is the
 * layout Woo core already uses for .form-row inside the field wrapper.
 *
 * `clear: both` on the left-hand member of each pair: the row above it is
 * either another float pair (the names) or a full-width field, and
 * without the clear the street would try to sit beside the last name. */
.woocommerce-checkout form.checkout .brand-col-street {
clear: both;
float: left;
width: 70%;
}
.woocommerce-checkout form.checkout .brand-col-houseno {
float: right;
width: 26%;
}
.woocommerce-checkout form.checkout .brand-col-postcode {
clear: both;
float: left;
width: 36%;
}
.woocommerce-checkout form.checkout .brand-col-city {
float: right;
width: 60%;
}
/* Both pairs survive the phone. Unpairing the street was tried first and
 * is worse: the "use my location" link and the manual-entry tick live
 * inside the street row, so a full-width street pushes House no. below
 * them and the number stops reading as part of the address at all.
 *
 * The street keeps a little more of the row here than on desktop, and the
 * suggestion dropdown breaks out of its column to the full container
 * width — a list of complete addresses inside a 224px box is unreadable,
 * and the list is the fastest path through this form.
 *
 * Its own media block, here rather than up in the phone section: these
 * pair rules sit further down the sheet, so an override written up there
 * loses on source order at equal specificity. */
@media (max-width: 600px) {
.woocommerce-checkout form.checkout .brand-col-street { width: 68%; }
.woocommerce-checkout form.checkout .brand-col-houseno { width: 28%; }
/* 40px = the container's two 20px mobile gutters. */
.woocommerce-checkout form.checkout .brand-col-street .brand-ac-list {
right: auto;
width: calc(100vw - 40px);
}
}

/* ── The address gate ────────────────────────────────────────────────────
 * assets/checkout-suggest.js puts .brand-addr-collapsed on the field
 * wrapper until there is an address. `!important` is load-bearing:
 * Woo's own address-i18n.js calls jQuery .show()/.hide() on these rows
 * as the locale changes, and an inline display beats a class. */
.brand-addr-collapsed .brand-addr-detail { display: none !important; }
/* The one box left runs the full width while it is the only one, on every
 * screen — it is a whole address going in, not a street name. Scoped past
 * the pair rules above and their phone override. */
.woocommerce-checkout form.checkout .brand-addr-collapsed .brand-col-street {
clear: both;
float: none;
width: 100%;
}
.woocommerce-checkout form.checkout .brand-addr-collapsed .brand-col-street .brand-ac-list {
right: 0;
width: auto;
}

/* ── Checkout address suggestions ────────────────────────────────────────
 * Dropdown rendered by assets/checkout-address-autocomplete.js under the
 * address_1 input, inside the block anchor the script wraps it in. */
.brand-ac-anchor { position: relative; }
.brand-ac-list {
position: absolute;
/* 90 clears the fixed WhatsApp button (z-index:80) so suggestions are
 * never hidden behind it. */
z-index: 90;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px;
list-style: none;
max-height: 280px;
overflow-y: auto;
background: var(--brand-paper);
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 8px;
box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-ink) 12%, transparent);
}
.brand-ac-list[hidden] { display: none; }
.brand-ac-item {
display: block;
padding: 9px 10px;
border-radius: 6px;
cursor: pointer;
line-height: 1.35;
}
.brand-ac-item__main { display: block; color: var(--brand-ink); font-size: 0.95rem; }
.brand-ac-item__sub { display: block; color: var(--brand-ink-dim); font-size: 0.8rem; }
.brand-ac-item.is-active,
.brand-ac-item:hover { background: color-mix(in srgb, var(--brand-accent) 10%, transparent); }
/* Escape hatch: reads as an action, not as another address. */
.brand-ac-item--manual {
border-bottom: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
border-radius: 6px 6px 0 0;
margin-bottom: 2px;
}
.brand-ac-item--manual .brand-ac-item__main {
color: var(--brand-accent);
font-size: 0.85rem;
}

.brand-ac-status {
margin: 4px 0 0;
color: var(--brand-ink-soft);
font-size: 0.8rem;
line-height: 1.4;
}
.brand-ac-status[hidden] { display: none; }

/* The suggestion controls' own row, a sibling of the street field rather
 * than a child of it (see checkout-suggest.js for why). It carries no
 * field, so it wants none of the .form-row bottom margin. */
.woocommerce-checkout form.checkout .brand-ac-tools {
clear: both;
float: none;
margin-bottom: 8px;
width: 100%;
}
.woocommerce-checkout form.checkout .brand-ac-tools:empty { display: none; }

/* Manual-entry tick under the street field. The 20px control, 12px gap,
 * 44px flex row and accent colour all come from the shared tick-row rule
 * in the "Tick rows" section above; this block keeps only what is
 * specific to its position directly under the street field. */
.woocommerce form .form-row label.brand-ac-manual,
.woocommerce-checkout .form-row label.brand-ac-manual {
margin-top: 2px;
}
.brand-ac-manual:hover { color: var(--brand-ink); }
.brand-ac-manual:focus-within {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
border-radius: 4px;
}

/* ── Phone row: dial-code select + number ───────────────────────────────
 * assets/checkout-phone.js wraps #billing_phone in .brand-tel and puts a
 * native <select> beside it. The code column is capped so the number
 * itself keeps most of the row — it is the part being typed. */
.brand-tel {
display: flex;
align-items: stretch;
gap: 8px;
}
/* Scoped past `.woocommerce form .form-row select { width: 100% }`, and
 * min-width:0 so flex sizes the box from `width` rather than from the
 * longest option — a native select's intrinsic width is the widest row,
 * which on a phone left the number itself the narrower of the two. */
.woocommerce .brand-tel .brand-tel__code {
flex: 0 0 auto;
width: 44%;
max-width: 12rem;
min-width: 0;
/* Tighter than the field default (12px 14px). A native select reserves
 * its own arrow gutter on top of the padding, and at 390px the two
 * together clipped "+49 Germany" to "+49 German" — the one label most
 * of this store's shoppers will ever see. The long names (United
 * Kingdom, Czech Republic) still tail off, which is why the code
 * leads. */
padding-left: 10px;
padding-right: 8px;
}
.woocommerce .brand-tel input.input-text {
flex: 1 1 auto;
min-width: 0;
}

.woocommerce fieldset {
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
margin: 24px 0;
padding: 18px 18px 6px;
}
.woocommerce legend {
color: var(--brand-ink-soft);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0 6px;
}
.woocommerce form .show-password-input {
top: 50%;
transform: translateY(-50%);
}
.woocommerce .select2-container .select2-selection--single {
height: auto;
min-height: 45px;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
color: var(--brand-ink);
line-height: 1.3;
padding-left: 0;
padding-right: 28px;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.select2-dropdown {
border: 1px solid color-mix(in srgb, var(--brand-ink) 18%, transparent);
border-radius: 8px;
overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: var(--brand-accent);
color: var(--brand-paper);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid color-mix(in srgb, var(--brand-ink) 18%, transparent);
border-radius: 8px;
color: var(--brand-ink);
font: inherit;
font-size: 16px;
padding: 10px 12px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Primary = the storefront's .lp-btn-primary: ink pill, paper text,
 * 1rem 1.75rem padding, 15px/600, hover opacity .86. */
.woocommerce #payment #place_order,
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register button.woocommerce-form-register__submit,
.woocommerce form.lost_reset_password button.button,
.woocommerce form.woocommerce-ResetPassword button.button,
.woocommerce form.woocommerce-EditAccountForm button.button,
.woocommerce .woocommerce-address-fields button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button.alt {
background: var(--brand-btn);
color: var(--brand-paper);
border: 1px solid var(--brand-btn);
border-radius: 9999px;
padding: 1rem 1.75rem;
font-weight: 600;
font-size: 15px;
text-shadow: none;
box-shadow: none;
transition: opacity .15s var(--ease-out), transform .12s var(--ease-out);
}
.woocommerce #payment #place_order:hover,
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit:hover,
.woocommerce form.woocommerce-form-register button.woocommerce-form-register__submit:hover,
.woocommerce form.lost_reset_password button.button:hover,
.woocommerce form.woocommerce-ResetPassword button.button:hover,
.woocommerce form.woocommerce-EditAccountForm button.button:hover,
.woocommerce .woocommerce-address-fields button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button.alt:hover {
background: var(--brand-btn);
color: var(--brand-paper);
opacity: .86;
}
.woocommerce #payment #place_order:active { transform: translateY(1px); }
.woocommerce #payment #place_order {
float: none;
min-height: 56px;
width: 100%;
}
.woocommerce #payment #place_order:focus-visible,
.woocommerce-checkout form.woocommerce-form-login button.woocommerce-form-login__submit:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 3px;
}

/* Secondary (ghost) buttons — e.g. "update cart", "apply coupon". Same pill
 * shape as the primary, outlined instead of filled. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
background: transparent;
color: var(--brand-ink);
border: 1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent);
border-radius: 9999px;
padding: 14px 24px;
font-weight: 500;
font-size: 15px;
box-shadow: none;
transition: border-color .15s ease, background .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
background: var(--brand-card);
border-color: var(--brand-ink);
color: var(--brand-ink);
}

/* ── Cart + order review tables ─────────────────────────────────────────── */
.woocommerce table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 8px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--brand-card);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
padding: 14px 16px;
}
.woocommerce table.shop_table thead th {
background: var(--brand-paper-warm);
color: var(--brand-ink-soft);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border-top: none;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
background: var(--brand-paper-warm);
font-weight: 600;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout #order_review .order-total .amount {
color: var(--brand-ink);
font-family: var(--brand-font-display);
font-size: 1.15rem;
}
/* Commerce colour system (matches the storefront): discounts and
 * savings read in UU Blue, shipping and fees in the medium grey, the
 * total in ink (the rules above), the pay button in ink. */
.woocommerce .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount td,
.woocommerce-checkout #order_review tr.cart-discount th,
.woocommerce-checkout #order_review tr.cart-discount td {
color: var(--brand-accent);
}
.woocommerce .cart_totals tr.woocommerce-shipping-totals td,
.woocommerce .cart_totals tr.fee td,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td,
.woocommerce-checkout #order_review tr.fee td {
color: var(--brand-ink-soft);
}

/* Coupon / totals cards */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
padding: 8px 16px 16px;
}

/* ── Account pages ──────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
overflow: hidden;
background: var(--brand-card);
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
border-bottom: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
padding: 12px 16px;
color: var(--brand-ink-soft);
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
background: var(--brand-paper-warm);
color: var(--brand-ink);
}
.brand-account-back { margin: 0 0 18px; }
.brand-account-back a {
color: var(--brand-accent);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
}
.brand-account-back a:hover { color: var(--brand-ink); }
.woocommerce-Addresses .woocommerce-Address {
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
border-radius: 8px;
box-sizing: border-box;
padding: 18px;
}
.woocommerce-Address address { font-style: normal; }
.woocommerce-Address-title {
align-items: flex-start;
display: flex;
gap: 12px;
justify-content: space-between;
margin-bottom: 12px;
}
.woocommerce-Address-title h2 {
font-size: 1.05rem;
margin: 0;
}
.woocommerce-Address-title .edit {
color: var(--brand-accent);
float: none;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
}
.woocommerce-Address-title .edit:hover { color: var(--brand-ink); }

/* Payment method box (checkout) */
.woocommerce-checkout #payment {
background: var(--brand-paper-warm);
border-radius: 8px;
}
/* Core pads the list 16px. The li cards now carry their own edges, and on
 * the desktop right rail (~420px) that outer pad plus each card's own
 * inset left too little for "Wallet Checkout (iDeal, Bancontact)" to fit
 * on one line. Drop it and let the cards reach the panel's own padding. */
.woocommerce-checkout #payment ul.payment_methods {
border-bottom-color: color-mix(in srgb, var(--brand-ink) 10%, transparent);
padding: 0;
}
/* Payment methods: each li is a selectable CARD, and the li — not the
 * label — is the flex row. Woo core markup is
 * <li><input type="radio"><label>…</label><div class="payment_box"></li>:
 * the radio is a SIBLING of the label, so a display:flex label still
 * begins on its own line below the radio. flex-wrap on the li puts
 * radio + label on one row at every width; the payment_box
 * (flex-basis:100%) wraps to its own line underneath. The plain card
 * below is also the no-:has() fallback appearance. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
align-items: center;
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 10px;
display: flex;
flex-wrap: wrap;
gap: 0 12px;
margin-bottom: 8px;
min-height: 56px;
transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out);
}
/* Selected state: accent border + soft tint. The gateway's payment_box is
 * only rendered visible for the checked method, which keeps the state
 * readable even where :has() is unsupported. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
background: var(--brand-accent-soft);
border-color: var(--brand-accent);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
margin-left: 16px;
}
/* flex:1 so the label — the radio's actual hit target — spans the row to
 * the card's right edge (an inline-width label would leave the rest of
 * the card dead to a tap). The row's padding lives here and on the
 * radio's left margin, not on the li, for the same reason.
 *
 * flow-root, NOT flex: the method title is a bare TEXT NODE next to the
 * gateway's icons, so in a flex label it becomes an anonymous flex item
 * that cannot be given flex:1 — the icons then squeeze it and "Credit or
 * Debit Card" wraps mid-phrase. In normal block flow the text runs the
 * row's full width and the icons (float:right, inline style) sit at its
 * end. flow-root over plain block so the label's box CONTAINS those
 * floats: the icons are taller than the text line, and an uncontained
 * float would spill past the card's bottom edge. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
cursor: pointer;
display: flow-root;
flex: 1;
line-height: 1.4;
min-width: 0;
padding: 12px 16px 12px 0;
}
/* The icons keep their inline float:right; only the gateway's own margins
 * are normalised so the group sits tight to the card's right edge. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
margin: 0 0 0 6px !important;
vertical-align: middle;
}
.woocommerce-checkout #payment div.payment_box {
background: var(--brand-card);
color: var(--brand-ink-soft);
border-radius: 8px;
}
/* flex-basis:100% drops the box onto its own line; the 48px left margin
 * aligns it with the label text (16px card padding + 20px radio + 12px
 * gap), so the gateway copy reads as belonging to its selected method. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
flex-basis: 100%;
margin: 2px 16px 14px 48px;
}
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--brand-card);
}
/* Cap anything a gateway drops into its own instruction box so an
 * oversized redirect / instruction graphic reads as a caption, not a
 * banner. Scoped to div.payment_box so the method-title logos
 * (> label img) and #place_order are untouched. */
.woocommerce-checkout #payment div.payment_box img {
max-width: 100%;
width: auto;
height: auto;
max-height: 44px;
object-fit: contain;
}
.woocommerce-checkout #payment div.payment_box p {
font-size: 0.85rem;
line-height: 1.45;
margin: 0 0 8px;
}

/* ════════════════════════════════════════════════════════════════════════
 * WooCommerce — Cart / Checkout BLOCKS (Gutenberg).
 * Modern WooCommerce ships block-based cart + checkout pages by default,
 * whose markup (.wc-block-*) the classic selectors above never touch. These
 * rules bring the block UI in line with the brand: pill buttons like the
 * storefront's .lp-btn-primary, and fields that match the classic ones.
 * ════════════════════════════════════════════════════════════════════════ */

/* Primary action buttons (Place Order, etc.) → ink pill, paper text. */
.wc-block-components-button.wp-element-button {
border-radius: 9999px;
font-weight: 600;
transition: opacity .15s var(--ease-out);
}
.wc-block-components-button.wp-element-button.contained {
background-color: var(--brand-btn);
color: var(--brand-paper);
}
.wc-block-components-button.wp-element-button.contained:hover {
background-color: var(--brand-btn);
color: var(--brand-paper);
opacity: .86;
}

/* Form fields → match the classic checkout fields (8px, ink hairline). */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-select select {
border-radius: 8px;
border-color: color-mix(in srgb, var(--brand-ink) 18%, transparent);
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-address-form select:focus {
border-color: var(--brand-accent);
}

/* Order-summary card + the Total row, to the brand surface + display font. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-family: var(--brand-font-display);
color: var(--brand-ink);
}

/* ════════════════════════════════════════════════════════════════════════
 * Checkout CRO — trust strip, payment reassurance, richer summary, focus.
 * Markup is injected by the brand theme (functions.php) via Woo hooks.
 * ════════════════════════════════════════════════════════════════════════ */

/* Trust chips — compact pills (icon + short claim). On mobile the flex
 * ordering lifts them to the top of the form, under the header. */
.brand-trust {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.brand-trust__item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: var(--brand-ink-soft);
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 999px;
padding: 6px 12px;
white-space: nowrap;
}
.brand-trust__icon { flex: none; width: 13px; height: 13px; color: var(--brand-accent); }

/* Section headings injected into the checkout flow (Delivery, Delivery
 * method, Payment). clear:both — the name fields above them float. */
.brand-form-heading {
clear: both;
font-size: 1.2rem;
margin: 20px 0 12px;
}
/* The relabelled "Contact" Woo h3 (#customer_details' own heading) shares
 * the compact rhythm of the injected .brand-form-heading rows above.
 * #ship-to-different-address is excluded: it is a tick-row wrapper with
 * its own tuned 6px margin further up this sheet, and this rule sits
 * later at equal specificity, so without the :not() it would win and push
 * that heading down into reading as a new section. */
.woocommerce-checkout #customer_details h3:not(#ship-to-different-address) {
margin: 20px 0 10px;
}

/* Delivery-method card: chosen rate + price + dispatch promise. Phone
 * only — the desktop right rail already shows the Shipment row in the
 * always-visible totals table, so the card would be a duplicate there. */
.brand-ship-card {
align-items: baseline;
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 10px;
display: flex;
gap: 16px;
justify-content: space-between;
padding: 14px 16px;
}
.brand-ship-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-ship-card__name { font-weight: 600; color: var(--brand-ink); }
.brand-ship-card__sub { font-size: 0.8rem; line-height: 1.45; color: var(--brand-ink-soft); }
.brand-ship-card__price { flex: none; font-weight: 600; color: var(--brand-ink); }
.brand-ship-card__free { color: var(--brand-ink); }
.brand-pay-intro p { color: var(--brand-ink-soft); font-size: 0.85rem; margin: 0 0 12px; }

/* Shipping Protection opt-in row inside the delivery card. The whole
 * label is the tap target (tick sizing + accent come from the shared
 * "Tick rows" rule via .checkbox); the sub-copy sits under the label as
 * quiet small print. */
.brand-ship-protect {
display: block;
margin-top: 12px;
}
.brand-ship-protect__sub {
color: var(--brand-ink-dim);
display: block;
font-size: 0.78rem;
line-height: 1.4;
margin: 4px 0 0 32px;
}

/* Complete your order: pair partner + spare supplies, one-tap Add. Same
 * row shape as the storefront cart (thumb, name + price, reason, pill). */
.brand-upsell { margin: 0 0 6px; }
.brand-upsell__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.brand-upsell__row {
align-items: center;
background: var(--brand-card);
border: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent);
border-radius: 14px;
display: flex;
gap: 12px;
padding: 10px 12px;
}
.brand-upsell__thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--brand-paper-warm); }
.brand-upsell__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-upsell__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.brand-upsell__name { color: var(--brand-ink); font-size: 0.9rem; font-weight: 600; }
.brand-upsell__price { color: var(--brand-ink-dim); font-size: 0.8rem; font-weight: 400; margin-left: 4px; }
.brand-upsell__chip {
background: color-mix(in srgb, var(--brand-accent) 15%, transparent);
border-radius: 999px;
color: var(--brand-accent);
display: inline-block;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-left: 6px;
padding: 2px 8px;
text-transform: uppercase;
vertical-align: middle;
}
.brand-upsell__sub { color: var(--brand-ink-soft); font-size: 0.78rem; line-height: 1.4; }
.brand-upsell__btn {
align-items: center;
border: 1px solid color-mix(in srgb, var(--brand-ink) 25%, transparent);
border-radius: 999px;
color: var(--brand-ink);
display: inline-flex;
flex: none;
font-size: 0.82rem;
font-weight: 600;
justify-content: center;
min-height: 40px;
min-width: 72px;
padding: 0 16px;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
}
.brand-upsell__btn:hover { background: var(--brand-ink); color: var(--brand-card); }

/* Tooltip (i) marker on the processing-fee totals row. Small, muted, and
 * help-cursor so it reads as an explainer, not a control. */
.brand-fee-tip {
color: var(--brand-ink-dim);
cursor: help;
font-size: 0.8rem;
margin-left: 5px;
}
.brand-fee-tip:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
border-radius: 3px;
}
@media (min-width: 601px) {
/* The delivery-method card duplicates the desktop right rail's
 * Shipment row, so it stays phone-only. The Payment intro keeps its
 * h3 — it is the payment section's ONLY heading on desktop; just the
 * strapline is dropped (the desktop trust strip already carries the
 * encryption claim). */
.brand-ship-method { display: none; }
.brand-pay-intro p { display: none; }
/* Desktop right-rail order. The gateway appends its own pay button as
 * the LAST child of #order_review, below the privacy/terms panel that
 * lives INSIDE #payment, so the CTA sat at the very bottom of the rail
 * adrift from the method it pays with. display:contents dissolves
 * #payment so its method list and .place-order become orderable
 * siblings of that button; the trust chips then drop to the bottom.
 * Phones keep their own rhythm (chips first) in the max-width:600px
 * block above. #payment's warm ground moves to .place-order, the only
 * part that still reads as a panel once the wrapper has no box. */
.woocommerce-checkout form.checkout #order_review {
display: flex;
flex-direction: column;
gap: 12px;
}
.woocommerce-checkout form.checkout #order_review > #payment { display: contents; }
/* Catch-all FIRST, same reason as the mobile block: the gateway also
 * injects a <style> and its own wrappers here, and an unordered flex
 * item would jump to the top. Park unknown children with the button. */
.woocommerce-checkout form.checkout #order_review > *,
.woocommerce-checkout form.checkout #payment > * { order: 4; }
.woocommerce-checkout form.checkout #order_review > .brand-summary,
.woocommerce-checkout form.checkout #order_review > .woocommerce-checkout-review-order-table { order: 0; }
.woocommerce-checkout form.checkout #order_review > .brand-ship-method { order: 1; }
.woocommerce-checkout form.checkout #order_review > .brand-pay-intro { order: 2; }
.woocommerce-checkout form.checkout #payment > ul.payment_methods {
border-bottom: 0;
margin-bottom: 0;
order: 3;
}
.woocommerce-checkout form.checkout #payment > .place-order {
background: var(--brand-paper-warm);
border-radius: 8px;
order: 5;
}
.woocommerce-checkout form.checkout #order_review > .brand-trust { margin: 0; order: 6; }
}

/* Payment reassurance under the place-order button. */
.brand-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
}
.brand-pay__secure {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--brand-ink-dim);
}
.brand-pay__lock { flex: none; color: var(--brand-accent); }
.brand-pay__marks { display: inline-flex; align-items: center; gap: 6px; }
.brand-pay__mark { display: block; }

/* "Today's Total" row — larger + bolder, with a muted note beneath. */
.woocommerce-checkout #order_review .order-total th {
font-family: var(--brand-font-display);
color: var(--brand-ink);
font-size: 1.3rem;
font-weight: 700;
}
.woocommerce-checkout #order_review .order-total .amount {
font-size: 1.3rem;
font-weight: 700;
}
.woocommerce-checkout #order_review .brand-total-note td {
border-top: none;
padding-top: 4px;
text-align: right;
font-size: 0.8rem;
color: var(--brand-ink-dim);
}

/* ── Order summary: one card, an image per line ───────────────────────
 * Woo renders the summary as a 2-column table with a PRODUCT/SUBTOTAL
 * head, ruled cells and a grey tfoot: a spreadsheet, directly after a
 * storefront cart that shows a photo per line. Dissolve the table into
 * flex rows instead — [thumb][name][× n] over hairlines, then totals as
 * label/value pairs — inside the one card #order_review already draws.
 * The thumb markup comes from the cart-item-name filter in functions.php.
 *
 * Every selector carries #order_review deliberately: these have to beat
 * both the base table.shop_table rules further up and the phone block,
 * and they replace that block's grey tfoot rows at every width. */
.woocommerce-checkout #order_review table.shop_table {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table tbody,
.woocommerce-checkout #order_review table.shop_table tfoot { display: block; }
.woocommerce-checkout #order_review table.shop_table thead { display: none; }
.woocommerce-checkout #order_review table.shop_table tr {
align-items: center;
display: flex;
gap: 12px;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
background: transparent;
border-top: 0;
padding: 0;
}
.woocommerce-checkout #order_review tbody tr.cart_item { padding: 12px 0; }
.woocommerce-checkout #order_review tbody tr.cart_item + tr.cart_item {
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
}
.woocommerce-checkout #order_review tbody td.product-name {
align-items: center;
color: var(--brand-ink);
display: flex;
flex: 1 1 auto;
font-size: 0.95rem;
gap: 12px;
line-height: 1.35;
min-width: 0;
}
.woocommerce-checkout #order_review tbody td.product-total {
font-variant-numeric: tabular-nums;
font-weight: 600;
margin-left: auto;
white-space: nowrap;
}
.woocommerce-checkout #order_review .product-quantity {
color: var(--brand-ink-dim);
font-weight: 500;
white-space: nowrap;
}
.brand-item__text { flex: 1 1 auto; min-width: 0; }
.brand-item__thumb {
background: var(--brand-paper-warm);
border-radius: 10px;
display: grid;
flex: none;
height: 52px;
overflow: hidden;
place-items: center;
width: 52px;
}
.brand-item__img { display: block; height: 100%; object-fit: contain; width: 100%; }
/* ShadowPay's checkout-container module wraps the item name in
 * .sa-fw-checkout-product and prints ITS OWN thumbnail beside ours, so
 * every summary line showed the same vial twice. Ours is the styled
 * tile, so drop theirs. #order_review is load-bearing: the plugin's own
 * rule carries three classes and would otherwise win. */
.woocommerce-checkout #order_review .product-name .sa-fw-checkout-product__thumbnail {
display: none;
}
.woocommerce-checkout #order_review tfoot {
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
margin-top: 4px;
padding-top: 6px;
}
.woocommerce-checkout #order_review tfoot tr {
background: transparent;
border-top: 0;
justify-content: space-between;
padding: 7px 0;
}
.woocommerce-checkout #order_review tfoot th {
color: var(--brand-ink-soft);
font-family: var(--brand-font-sans);
font-size: 0.95rem;
font-weight: 500;
text-align: left;
white-space: nowrap;
}
.woocommerce-checkout #order_review tfoot td {
font-variant-numeric: tabular-nums;
font-weight: 600;
margin-left: auto;
text-align: right;
}
.woocommerce-checkout #order_review tfoot tr.order-total {
border-top: 1px solid color-mix(in srgb, var(--brand-ink) 10%, transparent);
margin-top: 6px;
padding-top: 13px;
}
.woocommerce-checkout #order_review tfoot tr.brand-total-note { padding-top: 0; }

/* The list price a line or the subtotal beats, struck through beside
 * what is actually charged. Volume pricing lands on the unit price
 * before totals, so without this the deal is invisible at checkout. */
.woocommerce-checkout .brand-was {
color: var(--brand-ink-dim);
font-weight: 500;
margin-right: 5px;
text-decoration: line-through;
}
.woocommerce-checkout .brand-was .woocommerce-Price-amount { font-size: 0.86em; }

/* Everything the order saves, stated once under the total. */
.woocommerce-checkout #order_review tfoot tr.brand-order-saved { padding-top: 0; }
.woocommerce-checkout #order_review .brand-order-saved td {
border-top: none;
color: var(--brand-accent);
font-size: 0.86rem;
font-weight: 600;
padding-top: 6px;
text-align: right;
}
.woocommerce-checkout #order_review .brand-order-saved .amount { color: inherit; }

/* Richer summary line-item meta (category · strength) under the name. */
.woocommerce-checkout .brand-item-meta {
display: block;
margin-top: 3px;
font-size: 0.78rem;
line-height: 1.4;
color: var(--brand-ink-dim);
}

.woocommerce-checkout .woocommerce-error li + li { margin-top: 6px; }
.woocommerce-checkout .woocommerce-error a {
color: var(--brand-accent);
font-weight: 500;
}

/* ── Post-purchase app invitation ────────────────────────────────────
 * The order-received page is the highest-intent install moment. This card
 * sits after the confirmation summary and before dense order details. */
.brand-pwa {
align-items: center;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 42%),
var(--brand-card);
border-radius: 24px;
box-shadow:
0 0 0 1px rgb(0 0 0 / 6%),
0 1px 2px -1px rgb(0 0 0 / 6%),
0 12px 32px -12px rgb(0 0 0 / 14%);
display: grid;
gap: 20px;
grid-template-columns: auto minmax(0, 1fr) auto;
margin: 28px 0 36px;
overflow: hidden;
padding: 24px;
transition-property: opacity, transform;
transition-duration: 180ms;
transition-timing-function: var(--ease-out);
}
.brand-pwa[hidden] { display: none !important; }
.brand-pwa[data-installed="true"] { opacity: 0; transform: translateY(-8px); }
.brand-pwa__app-icon {
background: #fff;
border-radius: 18px;
box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 8px 20px -10px rgb(0 0 0 / 25%);
display: grid;
height: 72px;
overflow: hidden;
place-items: center;
width: 72px;
}
.brand-pwa__app-icon img {
display: block;
height: 100%;
outline: 1px solid rgb(0 0 0 / 10%);
outline-offset: -1px;
width: 100%;
}
.brand-pwa__content { min-width: 0; }
.brand-pwa__eyebrow {
color: var(--brand-accent);
font-family: var(--brand-font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 0 5px;
text-transform: uppercase;
}
.brand-pwa h2 {
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.brand-pwa__copy {
color: var(--brand-ink-soft);
font-size: 0.94rem;
line-height: 1.5;
margin: 7px 0 0;
max-width: 54ch;
text-wrap: pretty;
}
.brand-pwa__benefits {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
list-style: none;
margin: 14px 0 0;
padding: 0;
}
.brand-pwa__benefits li {
align-items: center;
color: var(--brand-ink);
display: inline-flex;
font-size: 0.82rem;
font-weight: 500;
gap: 7px;
}
.brand-pwa__benefits svg { color: var(--brand-accent); flex: none; }
.brand-pwa__action { align-items: center; display: flex; flex-direction: column; gap: 7px; }
.brand-pwa__button {
background: var(--brand-btn);
border: 0;
border-radius: 999px;
color: var(--brand-paper);
cursor: pointer;
font-size: 0.9rem;
font-weight: 650;
min-height: 48px;
padding: 12px 20px;
white-space: nowrap;
transition-property: opacity, transform;
transition-duration: 150ms;
transition-timing-function: var(--ease-out);
}
.brand-pwa__button:hover { opacity: 0.86; }
.brand-pwa__button:active { transform: scale(0.96); }
.brand-pwa__button:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.brand-pwa__button:disabled { cursor: wait; opacity: 0.58; }
.brand-pwa__note { color: var(--brand-ink-dim); font-size: 0.7rem; margin: 0; white-space: nowrap; }
.brand-pwa__instructions {
align-items: center;
background: color-mix(in srgb, var(--brand-accent-soft) 58%, var(--brand-paper));
border-radius: 14px;
color: var(--brand-ink-soft);
display: flex;
font-size: 0.84rem;
gap: 10px;
grid-column: 2 / -1;
line-height: 1.45;
padding: 11px 14px;
text-wrap: pretty;
}
.brand-pwa__instructions[hidden] { display: none !important; }
.brand-pwa__instructions svg { color: var(--brand-accent); flex: none; }
@media (max-width: 760px) {
.brand-pwa {
align-items: start;
grid-template-columns: 56px minmax(0, 1fr);
padding: 20px;
}
.brand-pwa__app-icon { border-radius: 14px; height: 56px; width: 56px; }
.brand-pwa__action { align-items: stretch; grid-column: 1 / -1; }
.brand-pwa__button { width: 100%; }
.brand-pwa__instructions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.brand-pwa,
.brand-pwa__button { transition-duration: 0.01ms; }
.brand-pwa__instructions { scroll-behavior: auto; }
}

/* ── Post-payment account offer (thank-you page) ─────────────────────
 * Sits on order-received under the confirmation summary. Same card
 * surface + shadow language as the PWA invite so the two post-purchase
 * cards read as one family. Guests get a one-tap "save your details"
 * without the account tick ever appearing during checkout. */
.brand-create-account {
background: var(--brand-card);
border-radius: 24px;
box-shadow:
0 0 0 1px rgb(0 0 0 / 6%),
0 1px 2px -1px rgb(0 0 0 / 6%),
0 12px 32px -12px rgb(0 0 0 / 14%);
margin: 28px 0 36px;
padding: 24px;
}
.brand-create-account[hidden] { display: none !important; }
.brand-create-account__eyebrow {
color: var(--brand-accent);
font-family: var(--brand-font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0 0 5px;
text-transform: uppercase;
}
.brand-create-account h2 {
font-size: clamp(1.3rem, 3vw, 1.6rem);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.brand-create-account__copy {
color: var(--brand-ink-soft);
font-size: 0.94rem;
line-height: 1.5;
margin: 7px 0 0;
max-width: 54ch;
text-wrap: pretty;
}
.brand-create-account__action { margin-top: 16px; }
.brand-create-account__button {
background: var(--brand-btn);
border: 0;
border-radius: 999px;
color: var(--brand-paper);
cursor: pointer;
flex: none;
font-size: 0.9rem;
font-weight: 650;
min-height: 48px;
padding: 12px 20px;
white-space: nowrap;
transition: opacity 150ms var(--ease-out);
}
.brand-create-account__button:hover { opacity: 0.86; }
.brand-create-account__button:disabled { cursor: wait; opacity: 0.58; }
.brand-create-account__button:focus-visible {
outline: 3px solid var(--brand-accent);
outline-offset: 3px;
}
.brand-create-account__status {
color: var(--brand-ink-dim);
font-size: 0.78rem;
line-height: 1.45;
margin: 10px 0 0;
}
.brand-create-account__status:empty { display: none; }

/* Focus: hide the "Back to shop" exit link on checkout (kept on thank-you). */
body.woocommerce-checkout:not(.woocommerce-order-received) .brand-footer__back { display: none; }

/* Keep support within reach without competing with checkout content. */
.brand-whatsapp {
align-items: center;
background: #25d366;
border-radius: 999px;
bottom: 20px;
box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
display: flex;
height: 56px;
justify-content: center;
position: fixed;
right: 20px;
transition: transform 200ms ease-out;
width: 56px;
z-index: 80;
}
.brand-whatsapp:hover { transform: scale(1.05); }
.brand-whatsapp:active { transform: scale(0.96); }
.brand-whatsapp:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.brand-whatsapp svg { fill: #fff; height: 28px; width: 28px; }
/* Reserve a floor under both checkout columns so the CTA, the last field
 * or the payment box can never rest under the fixed WhatsApp button. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
padding-bottom: 80px;
}

/* Responsive: stack the checkout columns comfortably. 20px gutters match the
 * storefront's mobile padding (max-[600px]:px-5). Only override the
 * horizontal padding so the header keeps its vertical rhythm. */
@media (max-width: 768px) {
.brand-whatsapp {
bottom: 104px;
height: 48px;
right: 16px;
width: 48px;
}
.brand-whatsapp svg { height: 24px; width: 24px; }
.brand-header__inner,
.brand-footer__inner,
.brand-container {
padding-left: 20px;
padding-right: 20px;
}
.brand-container { padding-top: 24px; }
.woocommerce #payment #place_order,
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register button.woocommerce-form-register__submit,
.woocommerce form.lost_reset_password button.button,
.woocommerce form.woocommerce-ResetPassword button.button,
.woocommerce form.woocommerce-EditAccountForm button.button,
.woocommerce .woocommerce-address-fields button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button.alt { font-size: 14px; }
.woocommerce table.shop_table_responsive tbody th,
.woocommerce-page table.shop_table_responsive tbody th {
display: block;
text-align: left;
}
.woocommerce table.shop_table_responsive tbody th::before,
.woocommerce-page table.shop_table_responsive tbody th::before {
content: attr(data-title) ": ";
font-weight: 700;
}
}
@media (prefers-reduced-motion: reduce) {
.brand-whatsapp { transition: none; }
.brand-whatsapp:active { transform: none; }
}