/* ============================================================================
MMHN — WooCommerce Skin
----------------------------------------------------------------------------
Loaded conditionally (is_woocommerce || is_cart || is_checkout ||
is_account_page) and source-ordered AFTER Bricks' `bricks-woocommerce`
layer — see functions.php. Bricks' woocommerce-layer.min.css enqueues after
the child theme and out-specifies single-class rules (0,2,1); loading after
it lets equal-specificity rules win on source order, and the doubled-class
trick (.foo.foo) covers the rest. Never !important by default.
SCOPE: native Woo surfaces only — My Account, Cart (Block), Checkout (Block),
plus global add-to-cart notices. Product single + Shop archive are BRICKS
templates (wireframe set) and are NOT styled here.
TOKENS: ACSS. Functional colors are ACSS SEMANTIC SLOTS, not custom names:
error = var(--danger) #9E3A26 (Brick)
success = var(--success) #3E6B3A (Sage)
warning = var(--warning) #8F4E00 (Burnt Amber)
info = var(--info) #003865 (Navy)
Notice tint = ~90%-toward-cream via color-mix; token-colored text + 3px
token left border (brand notice pattern). Commerce text = --base (Ink).
========================================================================== */
/* ---------------------------------------------------------------------------
0.1 Page conformance — container width + commerce typography base
--------------------------------------------------------------------------- */
.woocommerce,
.woocommerce-page,
.woocommerce-account .woocommerce,
.wc-block-cart,
.wc-block-checkout {
font-family: var(--text-font-family);
color: var(--base); /* Ink — commerce-critical text */
}
/* Constrain native Woo page bodies to the brand container + section rhythm.
Header/footer are Bricks; native page content renders inside Bricks' default
`#brx-content` article (no classic `.entry-content` on this stack). Verified
against real DOM 2026-07-18. */
/* #brx-content is a FLEX ITEM of (Bricks: body{display:flex} +
#brx-content{flex:1}). Putting max-width + margin-inline:auto on #brx-content
ITSELF backfires — auto margins on a flex item DISABLE stretch, so it shrinks
to the wide min-content of the Woo Cart/Checkout blocks and overflows on
mobile (horizontal page scroll + block stuck in 2-column .is-large mode).
min-width:0 can't rescue it because margin-auto already killed the stretch.
Fix: leave #brx-content full-width (+min-width:0), and centre each DIRECT
CHILD (the page + the Woo block) on the brand width — children are
block-level, so max-width + margin:auto behave normally and the block shrinks
to the viewport on mobile → Woo stacks natively. Verified DOM 2026-07-18. */
.woocommerce-cart #brx-content,
.woocommerce-checkout #brx-content,
.woocommerce-account #brx-content {
min-width: 0;
padding-block: var(--section-space-m, 3rem) var(--section-space-l, 4rem);
}
.woocommerce-cart #brx-content > *,
.woocommerce-checkout #brx-content > *,
.woocommerce-account #brx-content > * {
max-width: var(--content-width);
margin-inline: auto;
padding-inline: var(--space-m);
}
/* WP page title (raw Bricks prints for the page) — brand header treatment.
Centred at every breakpoint (Michael, 2026-07-20): the native Woo surfaces
centre their content on a narrow card/table, so a left-flush title read as
detached from what sits under it. No breakpoint variants — deliberate. */
.woocommerce-cart #brx-content > h1,
.woocommerce-checkout #brx-content > h1,
.woocommerce-account #brx-content > h1 {
font-family: var(--heading-font-family);
color: var(--primary);
margin: 0 auto var(--space-s);
text-align: center;
}
/* ---------------------------------------------------------------------------
0.2 Buttons — map Woo (classic + block) to brand primary
Navy fill, white text, 2px navy border, 3px radius, Outfit 600 13px
uppercase 0.1em tracking, 14/28 padding (brand button spec).
--------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button.contained,
/* Block-editor buttons on the Woo pages — the empty-cart "New in store" grid's
add-to-cart / select-options and any future wp:button — otherwise fall to
WP's global `:root :where(.wp-element-button, .wp-block-button__link)`
(#32373c, no radius, no case). Michael, 2026-09-06. */
.woocommerce-cart #brx-content .wp-block-button__link,
.woocommerce-checkout #brx-content .wp-block-button__link,
.woocommerce-account #brx-content .wp-block-button__link,
.woocommerce-cart #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button),
.woocommerce-checkout #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button),
.woocommerce-account #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
background: var(--primary);
color: var(--white);
border: 2px solid var(--primary);
border-radius: var(--radius);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 13px;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
min-height: 44px; /* touch target */
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button.contained:hover:not(:disabled),
.woocommerce-cart #brx-content .wp-block-button__link:hover,
.woocommerce-checkout #brx-content .wp-block-button__link:hover,
.woocommerce-account #brx-content .wp-block-button__link:hover,
.woocommerce-cart #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button):hover,
.woocommerce-checkout #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button):hover,
.woocommerce-account #brx-content .wp-element-button:not(.outlined):not(.wc-block-components-button):hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--white);
}
/* Secondary / outline — transparent, gold-text, 2px gold-text border (on light).
Woo's low-emphasis buttons + block outlined/text variants. */
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart,
.wc-block-components-button.outlined {
background: transparent;
color: var(--gold-text);
border: 2px solid var(--gold-text);
border-radius: var(--radius);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 13px;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
min-height: 44px;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce a.added_to_cart:hover,
.wc-block-components-button.outlined:hover {
background: color-mix(in srgb, var(--gold-text) 8%, transparent);
color: var(--gold-text);
}
/* ---------------------------------------------------------------------------
0.3 Global notices — functional-color pattern (classic + block)
90%-toward-cream tint + token text + 3px token left border.
Fires on Bricks pages too (e.g. "added to cart").
--------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
li.woocommerce-error {
border-radius: var(--radius);
border-top: 0;
border-left: 3px solid;
padding: 1em 1.25em 1em 2.75em; /* room for Woo's ::before icon */
font-family: var(--text-font-family);
font-size: 15px;
line-height: 1.6;
}
.woocommerce-message {
background: color-mix(in srgb, var(--success) 10%, var(--cream));
border-left-color: var(--success);
color: var(--success);
}
.woocommerce-message::before { color: var(--success); }
.woocommerce-info {
background: color-mix(in srgb, var(--info) 8%, var(--cream));
border-left-color: var(--info);
color: var(--info);
}
.woocommerce-info::before { color: var(--info); }
.woocommerce-error {
background: color-mix(in srgb, var(--danger) 10%, var(--cream));
border-left-color: var(--danger);
color: var(--danger);
}
.woocommerce-error::before { color: var(--danger); }
/* Block notices (Store API — cart/checkout) */
.wc-block-components-notice-banner {
border-radius: var(--radius);
font-family: var(--text-font-family);
font-size: 15px;
}
.wc-block-components-notice-banner.is-success {
background: color-mix(in srgb, var(--success) 10%, var(--cream));
border-color: var(--success);
color: var(--success);
}
.wc-block-components-notice-banner.is-error {
background: color-mix(in srgb, var(--danger) 10%, var(--cream));
border-color: var(--danger);
color: var(--danger);
}
.wc-block-components-notice-banner.is-info {
background: color-mix(in srgb, var(--info) 8%, var(--cream));
border-color: var(--info);
color: var(--info);
}
.wc-block-components-notice-banner.is-warning {
background: color-mix(in srgb, var(--warning) 10%, var(--cream));
border-color: var(--warning);
color: var(--warning);
}
.wc-block-components-notice-banner svg { fill: currentColor; }
/* ---------------------------------------------------------------------------
0.4 Form controls — base (account + checkout inherit)
16px (prevents iOS zoom), 48px height, warm-gray border, visible labels.
--------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input,
.wc-block-components-select .wc-block-components-select__select {
font-family: var(--text-font-family);
font-size: 16px;
min-height: 48px;
padding: 0 14px;
color: var(--base);
background: var(--white);
border: 1px solid var(--neutral);
border-radius: var(--radius);
line-height: 1.4;
}
.woocommerce form .form-row textarea,
.wc-block-components-text-input textarea {
padding: 12px 14px;
min-height: 120px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select .wc-block-components-select__select:focus {
outline: 3px solid var(--primary);
outline-offset: 2px;
border-color: var(--primary);
}
/* Visible labels above fields, never placeholder-only */
.woocommerce form .form-row label {
font-family: var(--text-font-family);
font-size: 15px;
font-weight: 500;
color: var(--base);
margin-bottom: 6px;
}
.woocommerce form .required { color: var(--danger); border: 0; }
/* ACSS flow-spacing leaks into Woo's classic form rows.
ACSS ships `:not(.woocommerce-checkout) [class*="woocommerce"] * + p > * + *`
{ margin-block-start: var(--flow-spacing) } — and Woo builds every form row as
a
. So any row that FOLLOWS a sibling row has its field pushed 16px (1em)
below its label, while the first row in the form is exempt: label->field is
6px on row one and 22px on every row after it. On the side-by-side
first/last pair that reads as a broken alignment; stacked rows just read as
uneven. Override the TOKEN on the row rather than out-specifying the
selector (KB-01) — the 6px label margin above owns this gap. */
.woocommerce form .form-row { --flow-spacing: 0px; }
/* ...but a field's description text keeps a deliberate, smaller gap. */
.woocommerce form .form-row input + span,
.woocommerce form .form-row select + span {
display: block;
margin-block-start: 6px;
}
/* ---------------------------------------------------------------------------
0.5 Prices — Outfit 600 tabular-nums, Ink
--------------------------------------------------------------------------- */
.woocommerce .woocommerce-Price-amount,
.woocommerce .amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value,
.price .amount {
font-family: var(--text-font-family);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--base);
}
/* ---------------------------------------------------------------------------
0.6 Focus indicators (SC 2.4.7) — navy on light Woo surfaces
--------------------------------------------------------------------------- */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.wc-block-components-button:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
0.7 Classic tables (order-received / thank-you / order details / order view)
General .shop_table skin so post-purchase surfaces are branded too.
Visual verification of order-received is pending a completed order
(blocked on payment-gateway config). Account tables extend this in 1.4.
--------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-order-details table.woocommerce-table--order-details,
.woocommerce table.order_details {
width: 100%;
border-collapse: collapse;
border: 1px solid color-mix(in srgb, var(--neutral) 30%, transparent);
border-radius: var(--radius);
font-size: 16px;
overflow: hidden;
}
.woocommerce table.shop_table th {
background: var(--cream);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary);
text-align: left;
padding: 14px 16px;
}
.woocommerce table.shop_table td {
padding: 14px 16px;
color: var(--base);
border-top: 1px solid color-mix(in srgb, var(--neutral) 16%, transparent);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table .order-total .amount {
font-weight: 700;
color: var(--primary);
font-variant-numeric: tabular-nums;
}
/* Order-received overview strip (order #, date, total, payment method) */
.woocommerce ul.woocommerce-order-overview.order_details {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
list-style: none;
padding: var(--space-s);
margin: 0 0 var(--space-m);
border: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
border-radius: var(--radius);
background: var(--white);
}
.woocommerce ul.woocommerce-order-overview li {
border: 0;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--neutral);
}
.woocommerce ul.woocommerce-order-overview li strong {
display: block;
margin-top: 4px;
font-size: 16px;
text-transform: none;
letter-spacing: 0;
color: var(--base);
}
/* ===========================================================================
PHASE 1 — MY ACCOUNT
DOM: #brx-content > h1 + .woocommerce > (.woocommerce-MyAccount-navigation
+ .woocommerce-MyAccount-content). Bricks' woocommerce-layer.min.css
styles `.woocommerce-account .woocommerce-MyAccount-navigation a` at
(0,2,1); this skin loads AFTER it, so equal-specificity selectors win
on source order (no !important needed).
=========================================================================== */
/* 1.1 Two-column layout (nav sidebar + content). Woo defaults to floats;
replace with grid. Single column on mobile. */
.woocommerce-account.logged-in .woocommerce {
display: grid;
grid-template-columns: minmax(220px, 260px) 1fr;
gap: var(--space-m);
align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: auto;
margin: 0;
}
@media (max-width: 767px) {
.woocommerce-account.logged-in .woocommerce {
grid-template-columns: 1fr;
gap: var(--space-s);
}
}
/* 1.2 Navigation — white card, bordered rows, 44px touch targets, navy active */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
background: var(--white);
border: 1px solid color-mix(in srgb, var(--neutral) 40%, transparent);
border-radius: var(--radius);
overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link {
margin: 0;
border-bottom: 1px solid color-mix(in srgb, var(--neutral) 22%, transparent);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child {
border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
display: flex;
align-items: center;
min-height: 44px;
padding: 11px 18px;
font-family: var(--text-font-family);
font-size: 15px;
font-weight: 500;
color: var(--primary);
text-decoration: none;
transition: background 0.18s, color 0.18s;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
background: var(--cream);
color: var(--primary);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
background: var(--primary);
color: var(--white);
font-weight: 600;
}
/* Logout — set apart, gold-text accent */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--gold-text);
}
/* 1.3 Dashboard intro copy */
.woocommerce-account .woocommerce-MyAccount-content {
font-family: var(--text-font-family);
font-size: 16px;
line-height: 1.7;
color: var(--neutral);
}
.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 1.1em; }
/* Generic in-content link treatment. Excludes `.edit` — the address-card
action carries the designed .text-link treatment (style.css) and this
rule would otherwise out-specify it at (0,3,1) vs (0,2,0). Step aside
rather than escalating specificity on the .text-link side. */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit) {
color: var(--primary);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit):hover {
text-decoration-color: var(--gold-text);
}
.woocommerce-account .woocommerce-MyAccount-content mark {
background: color-mix(in srgb, var(--accent) 20%, var(--cream));
color: var(--base);
padding: 0 4px;
}
/* 1.4 Tables — orders, downloads (16px, generous rows, tabular-nums totals) */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-downloads {
width: 100%;
border-collapse: collapse;
border: 1px solid color-mix(in srgb, var(--neutral) 35%, transparent);
border-radius: var(--radius);
font-size: 16px;
overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
background: var(--cream);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary);
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--neutral) 35%, transparent);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
padding: 16px;
color: var(--base);
border-bottom: 1px solid color-mix(in srgb, var(--neutral) 18%, transparent);
vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
border-bottom: 0;
}
.woocommerce-account .woocommerce-orders-table__cell-order-total,
.woocommerce-account td[data-title="Total"] {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Order status pill */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
font-weight: 600;
color: var(--primary);
}
/* 1.5 Addresses */
.woocommerce-account .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-m);
margin-top: 0;
}
.woocommerce-account .woocommerce-Address {
width: auto;
float: none;
background: var(--white);
border: 1px solid color-mix(in srgb, var(--neutral) 35%, transparent);
border-radius: var(--radius);
padding: var(--space-s);
}
.woocommerce-account .woocommerce-Address-title h3 {
font-family: var(--heading-font-family);
color: var(--primary);
margin: 0 0 0.6em;
}
.woocommerce-account .woocommerce-Address address {
font-style: normal;
color: var(--base);
line-height: 1.7;
}
/* 1.6 Edit-account / edit-address forms (inherit base field styles from 0.4) */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
max-width: 640px;
}
/* Address headings ("Billing address" / "Shipping address") stay
— they are
the correct document level under the page H1 — and are only sized DOWN for
presentation (KB-01: resize a heading visually without changing its tag).
The address pages are the only account surfaces carrying an h2. */
.woocommerce-account .woocommerce-MyAccount-content h2 {
font-size: var(--h3);
}
/* Address-card header: the "Add/Edit address" action is styled by the
shared .text-link rule in style.css (selector list extended there — one
source of truth). Spacing belongs here, on the Woo surface. The gap goes on
the HEADER, not the link: .text-link owns padding-bottom for its underline
offset, so padding the anchor would push its own rule away from the text. */
.woocommerce-account .woocommerce-Address-title {
padding-bottom: var(--space-s);
}
.woocommerce-account .woocommerce-Address-title h2 {
margin-bottom: var(--space-xs);
}
.woocommerce-account fieldset {
margin-top: var(--space-s);
padding: var(--space-s);
border: 1px solid color-mix(in srgb, var(--neutral) 30%, transparent);
border-radius: var(--radius);
}
.woocommerce-account fieldset legend {
font-family: var(--heading-font-family);
color: var(--primary);
font-size: var(--h4, 1.3rem);
padding: 0 8px;
}
.woocommerce-account .woocommerce-form-row span.password-input { display: block; }
/* Password show/hide toggle. Bricks' woocommerce-layer sets
`.woocommerce-account form .show-password-input { position:absolute; right:0;
width:40px }` with NO vertical anchor — it relies on the wrapper being a flex
container, where an absolutely-positioned child's static position is the
content-box origin. The `display:block` above changes that static position to
the line AFTER the input, so the eye lands below the field. Pin it to the
field box; Bricks' own align-items:center then centres the glyph. Equal
specificity to the Bricks rule, and this sheet is source-ordered after
`bricks-woocommerce`, so it wins on order — no !important needed. */
.woocommerce-account form .show-password-input {
top: 0;
bottom: 0;
height: auto;
}
/* Keep typed characters clear of the 40px toggle. */
.woocommerce-account .woocommerce-form-row span.password-input input { padding-right: 44px; }
/* 1.7 Logged-out auth surfaces — VISUAL PARITY with the Bricks auth pages
(608 Login / 611 Lost Password / 614 Reset Password).
Two doors, one look. The Bricks pages own wp-login.php (staff); Woo owns
/my-account/ (shoppers). Neither replaces the other, so they must READ as
one system: white card on cream, navy Newsreader heading, warm-gray
labels, 48px fields, full-width navy button, the same eye icon.
THREE THINGS FIGHT US HERE, all documented inline below:
1. Section 1.1's dashboard grid also matched logged-out (the form landed
in column 2) — now scoped to .logged-in.
2. Bricks' woocommerce-layer centres the login form and auto-margins it
at (0,3,0)/(0,4,0). This sheet loads after it, so equal-specificity
selectors win on source order — no !important.
3. With registration disabled Woo emits NO .u-columns/.col-1 wrapper —
just Login
+ the form. So the CARD is the .woocommerce
container (which puts the heading inside it, as on the Bricks pages),
not the form.
--------------------------------------------------------------------------- */
/* NOTE the #brx-content: section 0.1 caps every direct child at --content-width
via `.woocommerce-account #brx-content > *`, which carries an ID — (1,1,0).
A class-only selector here loses no matter how many classes it stacks. */
.woocommerce-account:not(.logged-in) #brx-content > .woocommerce {
display: block;
max-width: 520px;
margin-inline: auto;
background: var(--white);
border: 1px solid var(--base-light);
border-radius: var(--radius);
padding: var(--space-xl);
text-align: left;
}
@media (max-width: 767px) {
.woocommerce-account:not(.logged-in) .woocommerce {
padding: var(--space-l) var(--space-m);
}
}
/* The card is the container now — strip the form's own card (and Bricks' centring
+ auto margins). Equal specificity to the Bricks layer, later in source order. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin-top: 0;
text-align: left;
max-width: none;
}
/* Bricks also sets `width:50%` on the login form at (0,4,0) — that is what makes
the fields half-width and wraps the labels. Matched specificity + later source
order takes it back. */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-ResetPassword {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Card heading — matches the Bricks `login__form-heading` class.
#brx-content again: Bricks centres this with
`.woocommerce-account .woocommerce:not(#brx-content) > h2`, and the ID inside
:not() counts toward specificity — (1,2,1). Class-only selectors lose. */
.woocommerce-account:not(.logged-in) #brx-content > .woocommerce > h2 {
text-align: left;
font-family: var(--heading-font-family);
font-size: var(--h3);
font-weight: 600;
color: var(--primary);
margin: 0 0 var(--space-s);
}
/* Intro copy on lost-password — mirrors the Bricks `login-form__description`
device (cream inset + 3px navy rule) so both flows explain themselves the
same way. */
.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword > p:first-of-type {
background: var(--base-ultra-light);
border-left: 4px solid var(--primary);
padding: var(--space-s);
margin: 0 0 var(--space-m);
color: var(--neutral);
font-size: 15px;
line-height: 1.6;
}
/* Full-width submit, as on the Bricks cards. */
.woocommerce-account:not(.logged-in) .woocommerce button.button,
.woocommerce-account:not(.logged-in) .woocommerce input.button {
width: 100%;
}
/* Remember me — inline checkbox + label, left aligned (Woo stacks and centres). */
.woocommerce-account .woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--neutral);
}
.woocommerce-account .woocommerce-form-login__rememberme input {
width: auto;
margin: 0;
}
/* "Lost your password?" — matches the Bricks login page's link, not the old
gold-text treatment. */
.woocommerce-account:not(.logged-in) .lost_password {
margin: var(--space-xs) 0 0;
}
.woocommerce-account:not(.logged-in) .lost_password a {
color: var(--primary);
font-size: 15px;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.woocommerce-account:not(.logged-in) .lost_password a:hover {
text-decoration-color: var(--gold-text);
}
/* Password eye — SAME ICON as the Bricks pages. Woo draws its own eye with a
data-URI ::before (hardcoded #111) and Bricks' layer draws a WooCommerce
icon-font ::after; neither is our Phosphor mark and neither can be recoloured
with `color`. Kill both pseudo-elements and mask the button with the real
asset, so the icon inherits a brand colour and matches /login/ exactly.
Woo's JS adds .display-password while the password is VISIBLE — so the base
state is the eye ("show") and .display-password is the slash ("hide"), which
is the same convention as the Bricks form. */
.woocommerce-account form .show-password-input::before,
.woocommerce-account form .show-password-input::after {
content: none;
}
.woocommerce-account form .show-password-input {
width: 44px;
background-color: var(--neutral);
-webkit-mask: url(icons/eye.svg) center / 20px 20px no-repeat;
mask: url(icons/eye.svg) center / 20px 20px no-repeat;
transition: background-color 0.2s;
}
.woocommerce-account form .show-password-input.display-password {
-webkit-mask-image: url(icons/eye-slash.svg);
mask-image: url(icons/eye-slash.svg);
}
.woocommerce-account form .show-password-input:hover {
background-color: var(--primary);
}
/* ===========================================================================
PHASE 2 — CART (BLOCK)
DOM: .wp-block-woocommerce-cart.alignwide
> .wc-block-components-sidebar-layout.wc-block-cart
> .wc-block-cart__main (.wc-block-cart-items > __row)
> .wc-block-cart__sidebar (.wc-block-components-totals-*)
Bricks' #brx-content is width:100% (no max-width), and the block is
alignwide/alignfull, so it breaks out of the page container. Constrain the
BLOCK wrapper directly + neutralise the WP alignment margins. Verified DOM
2026-07-18.
=========================================================================== */
/* 2.1 Container centring + alignwide/full breakout are handled once for all
Woo surfaces by the `#brx-content > *` rule in section 0.1 (each direct
child capped at --content-width, centred, padded).
⚠️ That rule caps max-width but never touched WIDTH — and Bricks'
frontend-light-layer.min.css ships an UNLAYERED
`.alignwide{width:120%;margin-left:-10%}` that it only resets to 100%
below 1320px. Bricks' woocommerce-layer counters it for the CHECKOUT
block (`.wp-block-woocommerce-checkout.alignwide{width:100%}`) but not
the cart, so above 1320px the cart block was 120% wide, clamped by
max-width, with a negative left margin (Michael, 2026-09-06, incognito
at ~1373px). Pin both explicitly, ID specificity, every browser. */
.woocommerce-cart #brx-content > .alignwide,
.woocommerce-checkout #brx-content > .alignwide,
.woocommerce-cart #brx-content > .alignfull,
.woocommerce-checkout #brx-content > .alignfull {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: var(--content-width);
}
/* 2.2 Column layout — LET WOO OWN IT. The cart block sets .is-large/.is-medium
/.is-small on itself via a ResizeObserver on its OWN width and stacks the
sidebar natively at narrow widths. Overriding display/flex-wrap/flex-basis
breaks that (sidebar fails to stack on mobile). We only cap the container
(2.1) so Woo measures the right width, and guard the flex child against
overflow. Lean on the platform. */
.woocommerce-cart .wc-block-cart__main { min-width: 0; }
/* 2.3 Line-item table */
.woocommerce-cart .wc-block-cart-items {
border: 1px solid color-mix(in srgb, var(--neutral) 30%, transparent);
border-radius: var(--radius);
background: var(--white);
overflow: hidden;
}
.woocommerce-cart .wc-block-cart-items__header {
background: var(--cream);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
border-bottom: 1px solid color-mix(in srgb, var(--neutral) 30%, transparent);
}
.woocommerce-cart .wc-block-cart-items__row {
padding-inline: 16px;
border-bottom: 1px solid color-mix(in srgb, var(--neutral) 16%, transparent);
}
.woocommerce-cart .wc-block-cart-item__image img {
border: 1px solid color-mix(in srgb, var(--neutral) 20%, transparent);
border-radius: 4px; /* brand: 4px on product imagery */
}
.woocommerce-cart .wc-block-components-product-name {
font-family: var(--text-font-family);
font-weight: 600;
font-size: 16px;
color: var(--primary);
text-decoration: none;
}
.woocommerce-cart .wc-block-components-product-name:hover { color: var(--primary-hover); }
.woocommerce-cart .wc-block-components-product-metadata__description {
font-size: 14px;
color: var(--neutral);
line-height: 1.55;
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.woocommerce-cart .wc-block-components-product-price__value {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--base);
}
/* 2.4 Quantity selector — 44px touch controls, brand border */
.woocommerce-cart .wc-block-components-quantity-selector {
border: 1px solid var(--neutral);
border-radius: var(--radius);
max-width: 132px;
}
.woocommerce-cart .wc-block-components-quantity-selector__input {
font-family: var(--text-font-family);
font-size: 16px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--base);
min-height: 44px;
}
.woocommerce-cart .wc-block-components-quantity-selector__button {
min-width: 40px;
min-height: 44px;
color: var(--primary);
transition: background 0.15s;
}
.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) {
background: var(--cream);
}
.woocommerce-cart .wc-block-cart-item__remove-link {
color: var(--gold-text);
font-size: 13px;
text-underline-offset: 2px;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover { color: var(--danger); }
/* 2.5 Totals sidebar — white card (separates from the cream page).
NOTE: .wc-block-cart__sidebar IS .wc-block-components-sidebar (same
element) — compound selector, not descendant. */
.woocommerce-cart .wc-block-cart__sidebar.wc-block-components-sidebar {
background: var(--white);
border: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
border-radius: var(--radius);
padding: var(--space-s);
}
.woocommerce-cart .wc-block-cart__totals-title {
font-family: var(--text-font-family);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
}
.woocommerce-cart .wc-block-components-totals-item {
color: var(--base);
font-size: 15px;
}
.woocommerce-cart .wc-block-components-totals-item__label { color: var(--neutral); }
.woocommerce-cart .wc-block-components-totals-footer-item {
border-top: 1px solid color-mix(in srgb, var(--neutral) 30%, transparent);
font-size: 18px;
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-weight: 700;
color: var(--primary);
}
/* Coupon panel */
.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
color: var(--gold-text);
font-weight: 600;
font-size: 14px;
}
/* 2.6 Proceed-to-checkout — full-width brand primary (base button styles from 0.2) */
.woocommerce-cart .wc-block-cart__submit-container,
.woocommerce-cart .wc-block-cart__submit-button {
width: 100%;
}
.woocommerce-cart .wc-block-cart__submit-button {
background: var(--primary);
color: var(--white);
border: 2px solid var(--primary);
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 52px;
}
.woocommerce-cart .wc-block-cart__submit-button:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
/* 2.7 Empty-cart state */
.woocommerce-cart .wc-block-cart__empty-cart__title,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
font-family: var(--heading-font-family);
color: var(--primary);
}
/* ===========================================================================
PHASE 3 — CHECKOUT (BLOCK)
DOM: .wp-block-woocommerce-checkout
> .wc-block-checkout (sidebar-layout)
> .wc-block-checkout__main (steps: contact / address / payment)
> .wc-block-checkout__sidebar (.wc-block-components-checkout-order-summary)
Container centring + responsive column stacking are inherited from 0.1
(#brx-content > *) and Woo's own .is-large/.is-small — same as Cart.
Express pay renders above the form once a gateway that supports it is live
(Stripe keys outstanding) — no styling owed until then.
=========================================================================== */
/* 3.1 Step headings — brand section subheads (not the 15px form labels) */
.woocommerce-checkout .wc-block-components-checkout-step__title {
font-family: var(--text-font-family);
font-weight: 600;
font-size: 18px;
letter-spacing: 0.01em;
color: var(--primary);
}
.woocommerce-checkout .wc-block-components-checkout-step__description {
color: var(--neutral);
font-size: 14px;
}
.woocommerce-checkout .wc-block-components-checkout-step {
border: 0;
padding-block: var(--space-s);
}
/* 3.2 Order-summary sidebar — white card (matches Cart totals) */
.woocommerce-checkout .wc-block-checkout__sidebar.wc-block-components-sidebar {
background: var(--white);
border: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
border-radius: var(--radius);
padding: var(--space-s);
}
.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text,
.woocommerce-checkout .wc-block-components-order-summary__title {
font-family: var(--text-font-family);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
}
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
font-weight: 600;
color: var(--primary);
font-size: 15px;
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
background: var(--primary);
color: var(--white);
}
.woocommerce-checkout .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
font-variant-numeric: tabular-nums;
color: var(--base);
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-weight: 700;
color: var(--primary);
}
/* 3.3 Address-card (saved address chip) */
.woocommerce-checkout .wc-block-components-address-card {
border: 1px solid color-mix(in srgb, var(--neutral) 28%, transparent);
border-radius: var(--radius);
color: var(--base);
}
.woocommerce-checkout .wc-block-components-address-card__edit {
color: var(--gold-text);
font-weight: 600;
}
/* 3.4 Add-a-note / terms */
.woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-checkbox__label,
.woocommerce-checkout .wc-block-checkout__terms {
color: var(--neutral);
font-size: 14px;
}
.woocommerce-checkout .wc-block-checkout__terms a { color: var(--primary); }
/* 3.5 Place-order — full-width brand primary */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
background: var(--primary);
color: var(--white);
border: 2px solid var(--primary);
border-radius: var(--radius);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 54px;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
/* 3.6 Radio/checkbox controls — brand accent (shipping/payment options) */
.woocommerce-checkout .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__input:checked),
.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option {
border-color: var(--primary);
}
.woocommerce-checkout input[type="radio"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
accent-color: var(--primary);
}
/* ===========================================================================
4. PRODUCT SINGLE — Bricks template 03 (#602)
The buy panel's commerce mechanics are native Woo/Bricks elements
(product-price, product-add-to-cart, product-stock); their inner
markup carries no Bricks classes, so it's styled here, scoped to the
template's BEM hooks. Panel layout/typography live on the global
classes; this is Woo-markup-only.
=========================================================================== */
/* 4.1 Form layout — qty + Add to Cart on one row (variations stack above) */
.product-buy__cart form.cart:not(.variations_form),
.product-buy__cart form.cart.variations_form .woocommerce-variation-add-to-cart {
display: flex;
align-items: stretch;
gap: 12px;
}
/* 4.2 Quantity stepper — Bricks renders input + .action.minus/.plus spans.
Markup order is input→minus→plus; flex order rebuilds minus|input|plus. */
.product-buy__cart .quantity {
display: flex;
align-items: stretch;
background: var(--white);
border: 1px solid var(--neutral);
border-radius: var(--radius);
overflow: hidden;
}
.product-buy__cart .quantity .action {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
min-height: 46px;
color: var(--primary);
background: var(--white);
cursor: pointer;
transition: background 0.2s;
}
.product-buy__cart .quantity .action:hover {
background: var(--cream);
}
.product-buy__cart .quantity .action svg {
width: 16px;
height: 16px;
}
.product-buy__cart .quantity .action.minus { order: -1; }
.product-buy__cart .quantity .qty {
width: 52px;
text-align: center;
border: 0;
border-left: 1px solid rgba(0, 0, 0, 0.09);
border-right: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 0;
background: var(--white);
font-family: var(--text-font-family);
font-weight: 600;
font-size: 16px;
font-variant-numeric: tabular-nums;
color: var(--base);
-moz-appearance: textfield;
appearance: textfield;
}
.product-buy__cart .quantity .qty::-webkit-outer-spin-button,
.product-buy__cart .quantity .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* 4.3 Add to Cart fills the row (foundation 0.2 already brands .button.alt) */
.product-buy__cart .single_add_to_cart_button {
flex: 1;
}
/* 4.4 Variation selector — the 2 mixed-case products. Label above select,
16px input / 48px target (mature demo, iOS no-zoom). */
.product-buy__cart table.variations {
width: 100%;
border-collapse: collapse;
margin: 0 0 var(--space-s);
}
.product-buy__cart table.variations th.label,
.product-buy__cart table.variations td.value {
display: block;
width: 100%;
padding: 0;
text-align: left;
}
.product-buy__cart table.variations th.label,
.product-buy__cart table.variations th.label label {
font-size: 14px;
font-weight: 600;
color: var(--base);
padding-bottom: 6px;
}
.product-buy__cart table.variations select {
width: 100%;
min-height: 48px;
padding: 0 12px;
font-family: var(--text-font-family);
font-size: 16px;
color: var(--base);
background: var(--white);
border: 1px solid var(--neutral);
border-radius: var(--radius);
cursor: pointer;
}
.product-buy__cart .reset_variations {
display: inline-block;
margin-top: 6px;
font-size: 13px;
color: var(--neutral);
}
.product-buy__cart .woocommerce-variation-price {
margin-bottom: var(--space-s);
}
.product-buy__cart .woocommerce-variation-price .price {
font-family: var(--text-font-family);
font-weight: 600;
font-size: 20px;
font-variant-numeric: tabular-nums;
color: var(--base);
}
/* 4.5 Stock states — quiet warning pattern for out-of-stock (locked
functional colors); the store finder below stays available. */
.product-buy p.stock.out-of-stock {
color: var(--warning);
background: color-mix(in srgb, var(--warning) 10%, var(--cream));
border-left: 3px solid var(--warning);
border-radius: var(--radius);
padding: 12px 18px;
margin-bottom: var(--space-s);
font-size: 15px;
line-height: 1.5;
}
.product-buy p.stock.in-stock {
font-size: 14px;
color: var(--success);
}
/* ===========================================================================
5. ORDER RECEIVED / THANK-YOU (.woocommerce-order-received)
Native Woo surface per the locked split. PHP layer (confirmation copy,
next-step section) lives in mmhn-functionality/inc/thankyou-render.php.
=========================================================================== */
/* 5.0 ROOT FIX — un-Bricks Woo's semantic markup.
ACSS normalises EVERY (and its direct children) into a
centred flex column, for Bricks-authored sections:
section:where(:not(.bricks-shape-divider)){display:flex;
flex-direction:column;align-items:center}
section > div:where(:not(.bricks-shape-divider)){…align-items:flex-start}
:where(section:not(section section)){padding-block:var(--section-padding-block)}
Woo's classic order markup is built from
elements, so it
inherited all three: 90px dead bands stacked between blocks, headings
shrink-wrapped and centre-aligned (they were never text-align:center),
and the address columns forced to stack. All are :where()/element-level
(0,0,1)–(0,0,2), so plain class selectors win — no !important, no
doubled-class. Scoped to the Woo classes rather than the body class so
My Account's view-order inherits the same repair. 2026-07-19. */
.woocommerce-order-details,
.woocommerce-customer-details {
display: block;
align-items: initial;
padding-block: 0;
padding-inline: 0;
}
.woocommerce-customer-details .woocommerce-column {
display: block;
align-items: initial;
}
/* 5.1 Page rhythm — owned here now that the inherited padding is gone. */
.woocommerce-order-received .woocommerce-order > * + * {
margin-block-start: var(--space-l);
}
/* 5.2 Confirmation moment — a brand headline, not a green notice chip.
Woo prints this as ; the two
spans come from mmhn_thankyou_received_text(). */
.woocommerce-order-received p.woocommerce-thankyou-order-received {
margin: 0 0 var(--space-m);
padding: 0;
border: 0;
background: none;
color: inherit;
text-align: left;
font-size: inherit;
}
.woocommerce-order-received p.woocommerce-thankyou-order-received::before {
content: none; /* kill Woo's notice icon */
}
.mmhn-ty__headline {
display: block;
font-family: var(--heading-font-family);
font-size: clamp(1.5rem, 2.6vw, 1.875rem);
font-weight: 400;
line-height: 1.25;
color: var(--primary);
}
.mmhn-ty__sub {
display: block;
margin-top: 8px;
font-family: var(--text-font-family);
font-size: 16px;
line-height: 1.6;
color: var(--neutral);
}
.mmhn-ty__sub strong {
font-weight: 600;
color: var(--base);
}
/* 5.3 Overview receipt card — distribute across the card instead of
clustering left in a stretched flex row (0.7 set the shell). */
.woocommerce-order-received ul.woocommerce-order-overview.order_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-s) var(--space-m);
padding: var(--space-m);
margin: 0;
}
/* 5.4 Order details — subhead scale (the __title H2s inherit --h2 = 48px,
which is section-header scale, not receipt scale) + price typography. */
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title {
font-family: var(--heading-font-family);
font-size: clamp(1.375rem, 2.2vw, 1.625rem);
font-weight: 400;
line-height: 1.25;
color: var(--primary);
margin: 0 0 var(--space-s);
}
.woocommerce-order-received table.shop_table .woocommerce-table__product-name {
width: 70%;
}
.woocommerce-order-received table.shop_table .woocommerce-table__product-table,
.woocommerce-order-received table.shop_table td.product-total,
.woocommerce-order-received table.shop_table tfoot td {
text-align: right;
}
.woocommerce-order-received table.shop_table .product-name a {
color: var(--base);
text-decoration: none;
font-weight: 500;
}
.woocommerce-order-received table.shop_table .product-name a:hover {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.woocommerce-order-received table.shop_table .product-quantity {
color: var(--neutral);
font-weight: 400;
}
/* Prices: Outfit 600 + tabular figures wherever money appears (0.7 covered
tfoot totals only). */
.woocommerce-order-received .woocommerce-Price-amount,
.woocommerce-order-received ul.woocommerce-order-overview li.total strong {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--base);
}
/* Totals block reads as a receipt, not a shaded panel: Woo ships a grey
tfoot fill (#f5f6f7) and 0.7 gives every th a cream fill, which on a cream
page renders as a two-tone box floating at the 70% column boundary. */
.woocommerce-order-received table.shop_table tfoot,
.woocommerce-order-received table.shop_table tfoot th,
.woocommerce-order-received table.shop_table tfoot td {
background: transparent;
}
.woocommerce-order-received table.shop_table tfoot th {
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--neutral);
font-weight: 600;
padding-block: 10px;
}
.woocommerce-order-received table.shop_table tfoot td {
padding-block: 10px;
border-top: 0;
}
.woocommerce-order-received table.shop_table tfoot .amount {
color: var(--primary);
}
/* Order total — the row that matters. Anchored to the .mmhn-ty-total marker
span injected by mmhn_thankyou_mark_order_total(), NOT to row position:
Woo gives tfoot rows no classes and appends payment-method / customer-note /
actions rows after the total, so nth-last-child() drifts per order. */
.woocommerce-order-received table.shop_table tfoot tr:has(.mmhn-ty-total) th,
.woocommerce-order-received table.shop_table tfoot tr:has(.mmhn-ty-total) td {
border-top: 2px solid var(--primary);
padding-top: 14px;
}
.woocommerce-order-received table.shop_table tfoot tr:has(.mmhn-ty-total) th {
color: var(--primary);
}
.woocommerce-order-received .mmhn-ty-total .amount {
font-size: 20px;
color: var(--primary);
}
.woocommerce-order-received .shipped_via {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 400;
color: var(--neutral);
font-variant-numeric: normal;
}
/* 5.5 Customer details — restore the 2-up Woo intended. ACSS's
flex-direction:column beat Woo's own .woocommerce-columns{display:flex}
(which sets no direction), so the columns stacked. */
.woocommerce-order-received .woocommerce-columns--addresses {
display: grid;
grid-template-columns: var(--grid-2);
gap: var(--space-l);
align-items: start;
width: 100%;
}
.woocommerce-order-received .woocommerce-customer-details address {
font-style: normal;
line-height: 1.7;
color: var(--base);
border: 0;
padding: 0;
}
.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email {
margin-top: 8px;
color: var(--neutral);
font-size: 15px;
}
/* 5.6 Next step — "Try them in these recipes".
ty-card is a self-contained equivalent of the Bricks r-card component:
this page has NO Bricks content template, so Bricks emits no global-class
CSS here (only post-43 header + post-35 footer load) and r-card is
genuinely unavailable. Visual language mirrors r-card deliberately. */
.mmhn-ty-next {
display: block;
padding: var(--space-l) 0 0;
margin-top: var(--space-l);
border-top: 1px solid rgba(0, 0, 0, 0.09);
}
/* flex-direction MUST be explicit: this div is a direct child of a ,
so ACSS's `section > div{flex-direction:column}` (5.0) applies and would
otherwise turn align-items:flex-end into a right-aligned stack. */
.mmhn-ty-next__head {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-s);
margin-bottom: var(--space-m);
}
.mmhn-ty-next__heading {
font-family: var(--heading-font-family);
font-size: clamp(1.75rem, 3vw, 2.125rem);
font-weight: 400;
line-height: 1.2;
color: var(--primary);
margin: 0;
}
.mmhn-ty-next__view-all {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 24px;
border: 2px solid var(--gold-text);
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-text);
text-decoration: none;
white-space: nowrap;
}
.mmhn-ty-next__view-all:hover {
background: rgba(128, 100, 0, 0.07);
color: var(--gold-text);
}
.mmhn-ty-next__grid {
display: grid;
grid-template-columns: var(--grid-3);
gap: var(--space-l);
list-style: none;
margin: 0;
padding: 0;
}
.ty-card {
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.09);
border-radius: 4px;
overflow: hidden;
transition: box-shadow 0.25s, transform 0.25s;
}
.ty-card:hover {
box-shadow: 0 8px 32px rgba(0, 56, 101, 0.1);
transform: translateY(-3px);
}
.ty-card__link {
display: block;
text-decoration: none;
color: inherit;
}
.ty-card__media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.ty-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ty-card__body {
padding: var(--space-s);
}
.ty-card__title {
font-family: var(--heading-font-family);
font-size: 24px;
font-weight: 400;
line-height: 1.2;
color: var(--primary);
margin: 0;
}
/* 5.7 Mobile
(A store-finder fallback band lived here and was cut on review
2026-07-19 — a second CTA isn't worth the attention on this page.
Orders with no recipe match now end after the addresses.) */
@media (max-width: 991px) {
.woocommerce-order-received .woocommerce-columns--addresses {
grid-template-columns: var(--grid-1);
gap: var(--space-m);
}
.mmhn-ty-next__grid {
grid-template-columns: var(--grid-2);
}
}
@media (max-width: 767px) {
.mmhn-ty-next__head {
flex-direction: column;
align-items: flex-start;
}
.mmhn-ty-next__grid {
grid-template-columns: var(--grid-1);
}
.woocommerce-order-received table.shop_table .woocommerce-table__product-name {
width: 60%;
}
}