/**
* Loomify — WooCommerce My Account visual alignment.
*
* TASK-my-account-style-align-003 — visual only.
*
* HARD SCOPE RULE: every selector in this file is prefixed with
* `body.woocommerce-account`. There are no unscoped global selectors
* (no bare body/html, a, button, input, form, h1–h6, or .woocommerce).
* This stylesheet is enqueued by functions.php only on the account page,
* so it cannot affect any other view. It changes no templates, no plugin
* output, and no business/authentication behaviour.
*
* Fonts load only here (account page only) because this file is the only
* place that imports them; @import is not a selector and adds no global rule.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
/* -------------------------------------------------------------------------- *
* Design tokens — held on the account body so they never leak site-wide.
*
* 2026-08-12 presentation alignment (visual only, no selector/scope change):
* this block previously carried the *superseded* Loomify palette — teal
* #00685f, navy #0b1c30, slate #3d4947, cold off-white #f8f9ff, sage #bcc9c6
* and Montserrat headings. Those are the pre-"Final Handoff" tokens, and
* because functions.php enqueues this file *after* assets/css/editorial.css
* (dependency array: child handle + 'loomify-editorial'), they overrode the
* warm-neutral editorial layer on the account page only — so /my-account
* rendered in a palette the child theme itself declares obsolete
* (see style.css header: "warm-neutral palette … matching the Loomify
* marketing site", and editorial.css §1 design tokens).
*
* The values below are now taken from that editorial layer, referenced through
* its own --lm-* custom properties with the literal editorial value as a
* fallback (so this file still renders correctly if loaded on its own):
* --lm-bg #faf9f6 · --lm-bg-2 #e9e8e5 · --lm-card #ffffff
* --lm-text #171717 · --lm-text-2 #6b6b6b · --lm-border #d8d5cf
* --lm-accent #171717 (primary button) · #333333 (button hover)
* display face Playfair Display · body face Inter
* Nothing else changes: no markup, no selectors, no scope, no templates, no
* plugin output, no cart/checkout/pricing/auth behaviour.
* -------------------------------------------------------------------------- */
body.woocommerce-account {
--loomify-primary: var(--lm-accent, #171717); /* near-black — actions, links, accents */
--loomify-primary-hover: #333333; /* editorial button hover (editorial.css) */
--loomify-ink: var(--lm-text, #171717); /* ink — headings & primary text */
--loomify-muted: var(--lm-text-2, #6b6b6b); /* secondary text */
--loomify-surface: var(--lm-bg, #faf9f6); /* warm paper — page background */
--loomify-border: var(--lm-border, #d8d5cf); /* warm border / dividers */
--loomify-card: var(--lm-card, #ffffff); /* card surface */
--loomify-radius: 12px;
--loomify-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 6px 20px rgba(23, 23, 23, 0.06);
--loomify-shadow-focus: 0 0 0 3px rgba(23, 23, 23, 0.18);
--loomify-maxwidth: 1280px;
--loomify-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--loomify-font-head: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
background-color: var(--loomify-surface);
color: var(--loomify-ink);
font-family: var(--loomify-font-body);
line-height: 1.6;
}
/* -------------------------------------------------------------------------- *
* Layout — 1280px centred container with responsive padding.
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce {
max-width: var(--loomify-maxwidth);
margin-inline: auto;
padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 5vw, 3rem);
box-sizing: border-box;
}
body.woocommerce-account .woocommerce::after {
content: '';
display: block;
clear: both;
}
/* Account dashboard: navigation beside content on wide viewports. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
box-sizing: border-box;
}
@media (min-width: 783px) {
body.woocommerce-account .woocommerce-MyAccount-navigation {
float: left;
width: 26%;
margin-right: 4%;
}
body.woocommerce-account .woocommerce-MyAccount-content {
float: right;
width: 70%;
}
}
/* -------------------------------------------------------------------------- *
* Typography — Playfair Display headings, Inter body (editorial layer faces).
* -------------------------------------------------------------------------- */
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-account h4,
body.woocommerce-account h5,
body.woocommerce-account h6,
body.woocommerce-account .woocommerce-MyAccount-content h1,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
font-family: var(--loomify-font-head);
color: var(--loomify-ink);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
}
body.woocommerce-account p,
body.woocommerce-account li,
body.woocommerce-account td,
body.woocommerce-account th,
body.woocommerce-account label {
font-family: var(--loomify-font-body);
color: var(--loomify-muted);
}
body.woocommerce-account a {
color: var(--loomify-primary);
text-decoration: none;
transition: color 0.15s ease;
}
body.woocommerce-account a:hover,
body.woocommerce-account a:focus-visible {
color: var(--loomify-ink);
text-decoration: underline;
}
body.woocommerce-account a:focus-visible {
outline: 2px solid var(--loomify-primary);
outline-offset: 2px;
}
/* My Account MAIN CONTENT — inline body links. The generic rules above give links
* near-black with no underline on muted copy, so they read as plain text. Scoped
* to .woocommerce-MyAccount-content — a sibling of the sidebar nav, so header,
* footer, nav and form controls are out of reach — with body copy colour left
* alone and buttons excluded by class so Woo CTAs keep their own treatment. */
body.woocommerce-account .woocommerce-MyAccount-content
:is(p, li, td, th, address, .woocommerce-Address-title)
a:not(.button):not(.woocommerce-button):not(.wp-element-button):not(.wp-block-button__link) {
color: var(--loomify-primary);
text-decoration-line: underline;
text-decoration-color: rgba(23, 23, 23, 0.5);
text-underline-offset: 0.2em;
text-decoration-skip-ink: auto;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
/* Not the UA purple. */
body.woocommerce-account .woocommerce-MyAccount-content
:is(p, li, td, th, address, .woocommerce-Address-title)
a:not(.button):not(.woocommerce-button):not(.wp-element-button):not(.wp-block-button__link):visited {
color: var(--loomify-primary);
}
/* Underline, not hue (primary == ink); thickness is pinned by the parent theme. */
body.woocommerce-account .woocommerce-MyAccount-content
:is(p, li, td, th, address, .woocommerce-Address-title)
a:not(.button):not(.woocommerce-button):not(.wp-element-button):not(.wp-block-button__link):hover,
body.woocommerce-account .woocommerce-MyAccount-content
:is(p, li, td, th, address, .woocommerce-Address-title)
a:not(.button):not(.woocommerce-button):not(.wp-element-button):not(.wp-block-button__link):focus-visible {
color: var(--loomify-ink);
text-decoration-line: underline;
text-decoration-color: currentColor;
}
body.woocommerce-account .woocommerce-MyAccount-content
:is(p, li, td, th, address, .woocommerce-Address-title)
a:not(.button):not(.woocommerce-button):not(.wp-element-button):not(.wp-block-button__link):focus-visible {
outline: 2px solid var(--loomify-primary);
outline-offset: 3px;
}
/* -------------------------------------------------------------------------- *
* Cards — forms, sections, orders and addresses share the white card look.
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details,
body.woocommerce-account .woocommerce-MyAccount-orders,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
background-color: var(--loomify-card);
border: 1px solid var(--loomify-border);
border-radius: var(--loomify-radius);
box-shadow: var(--loomify-shadow);
padding: clamp(1.25rem, 3vw, 2rem);
}
/* Address grid.
*
* Upstream reference, WooCommerce 11.1.0. templates/myaccount/my-address.php emits
*
* and assets/css/woocommerce-layout.css lays it out as a *float* container:
* .woocommerce .col2-set::before,
* .woocommerce .col2-set::after { content: " "; display: table }
* .woocommerce .col2-set::after { clear: both }
* .woocommerce .col2-set .col-1 { float: left; width: 48% }
* .woocommerce .col2-set .col-2 { float: right; width: 48% }
* woocommerce-smallscreen.css — enqueued with media="only screen and
* (max-width: 768px)" — then resets both columns to `float: none; width: 100%`.
*
* This file turns the same element into a grid, so the two models conflict:
* · the clearfix pseudo-elements are generated content on a grid container,
* so they become grid *items*. ::before takes the first cell and ::after is
* placed last, making the flow order ::before, col-1, col-2, ::after — which
* puts Billing in row 1 / column 2 and Shipping in row 2 / column 1.
* · float has no effect on a grid item, but `width: 48%` still does — so above
* 768px each card resolved to 48% of the track it already filled, leaving
* roughly half of every track empty.
* · those widths are content-box widths, and the cards carry padding and a
* border, so each border box also overhung its track.
* Specificity is what settles it: Woo's column rule is (0,3,0) and its clearfix
* is (0,2,1), so the resets below are written at (0,3,1) / (0,2,2) to win
* regardless of source order or media block.
*
* The rules therefore reconcile the two models: retire the float-era
* pseudo-elements and sizing, and let the track count follow the available width
* rather than a fixed breakpoint — two aligned columns once two 16rem tracks
* plus the gap fit, one stacked column below that. No card height is declared
* anywhere; the grid's default `stretch` alignment is what keeps the two cards
* level.
*/
body.woocommerce-account .woocommerce-Addresses {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
content: none;
}
body.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses > .col-1,
body.woocommerce-account .woocommerce-Addresses > .col-2 {
float: none;
width: auto;
min-width: 0;
box-sizing: border-box;
}
/* Card header. woocommerce.css floats the Edit link right but only floats an
* left:
* .woocommerce-account .addresses .title h3 { float: left }
* .woocommerce-account .addresses .title .edit { float: right }
* while my-address.php (WooCommerce 11.1.0 upstream, @version 9.3.0) emits an
* . The heading therefore stays a full-width block and the float that
* follows it can only start below it, so Edit drops onto its own line instead of
* sitting beside the title. A flex row restores the intended title-left /
* Edit-right pairing; the link's text, href and behaviour are untouched, and the
* float-era clearfix pseudo-elements
* .woocommerce-account .addresses .title::before,
* .woocommerce-account .addresses .title::after { content: " "; display: table }
* are retired here for the same reason as on the grid above — they would
* otherwise become two extra flex items.
*
* What this does and does not promise: the row pairs title-left / Edit-right
* whenever the heading, the gap and the link fit the card's content width, and
* `flex-wrap: wrap` drops Edit onto its own line when they do not — which, at
* the editorial heading size, is what still happens inside a two-column card at
* the widths this layer targets. The gain there is not the pairing but the
* removal of the float artefacts: Edit is no longer a float escaping the header
* box, and the header no longer carries two stray clearfix items. The heading's
* block margins are zeroed because a flex container does not collapse adjacent
* margins the way the float model did, so the header would otherwise grow by the
* heading's full margins on both sides. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 1rem;
}
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title > h2,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title > h3 {
margin-block: 0;
}
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title::before,
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title::after {
content: none;
}
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title .edit {
float: none;
}
/* -------------------------------------------------------------------------- *
* Orders / detail tables.
* -------------------------------------------------------------------------- */
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.woocommerce-table,
body.woocommerce-account table.shop_table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--loomify-border);
border-radius: var(--loomify-radius);
overflow: hidden;
background-color: var(--loomify-card);
}
body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-table th,
body.woocommerce-account table.shop_table th {
/* UI label, not an editorial heading — keep the sans body face now that
--loomify-font-head is the Playfair display face (editorial.css §2 likewise
keeps .woocommerce / form / button text on --lm-font-body). */
font-family: var(--loomify-font-body);
color: var(--loomify-ink);
background-color: var(--loomify-surface);
text-align: left;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--loomify-border);
}
body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.woocommerce-table td,
body.woocommerce-account table.shop_table td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--loomify-border);
color: var(--loomify-muted);
}
body.woocommerce-account table.woocommerce-orders-table tr:last-child td,
body.woocommerce-account table.woocommerce-table tr:last-child td,
body.woocommerce-account table.shop_table tr:last-child td {
border-bottom: 0;
}
/* -------------------------------------------------------------------------- *
* Form fields — inputs, selects, textareas and focus states.
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-form-row label,
body.woocommerce-account .form-row label {
display: block;
margin-bottom: 0.35rem;
font-weight: 500;
color: var(--loomify-ink);
}
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="number"],
body.woocommerce-account input[type="search"],
body.woocommerce-account input.input-text,
body.woocommerce-account select,
body.woocommerce-account textarea {
width: 100%;
box-sizing: border-box;
padding: 0.7rem 0.9rem;
font-family: var(--loomify-font-body);
font-size: 1rem;
color: var(--loomify-ink);
background-color: var(--loomify-card);
border: 1px solid var(--loomify-border);
border-radius: 8px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.woocommerce-account textarea {
min-height: 8rem;
resize: vertical;
}
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="tel"]:focus,
body.woocommerce-account input[type="password"]:focus,
body.woocommerce-account input[type="number"]:focus,
body.woocommerce-account input[type="search"]:focus,
body.woocommerce-account input.input-text:focus,
body.woocommerce-account select:focus,
body.woocommerce-account textarea:focus {
outline: none;
border-color: var(--loomify-primary);
box-shadow: var(--loomify-shadow-focus);
}
body.woocommerce-account input::placeholder,
body.woocommerce-account textarea::placeholder {
color: var(--loomify-border);
}
/* -------------------------------------------------------------------------- *
* Buttons — accessible hover and focus.
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-button,
body.woocommerce-account button.button,
body.woocommerce-account a.button,
body.woocommerce-account input[type="submit"],
body.woocommerce-account button[type="submit"] {
display: inline-block;
/* Buttons keep the sans body face (editorial.css §2 sets `button` to
--lm-font-body); --loomify-font-head is now the Playfair display face. */
font-family: var(--loomify-font-body);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.2;
color: #ffffff;
background-color: var(--loomify-primary);
border: 1px solid var(--loomify-primary);
border-radius: 8px;
padding: 0.7rem 1.4rem;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
body.woocommerce-account .woocommerce-button:hover,
body.woocommerce-account button.button:hover,
body.woocommerce-account a.button:hover,
body.woocommerce-account input[type="submit"]:hover,
body.woocommerce-account button[type="submit"]:hover {
/* Was --loomify-ink, which is now the same near-black as --loomify-primary
(invisible hover). Use the editorial layer's button hover instead. */
background-color: var(--loomify-primary-hover);
border-color: var(--loomify-primary-hover);
color: #ffffff;
text-decoration: none;
}
body.woocommerce-account .woocommerce-button:focus-visible,
body.woocommerce-account button.button:focus-visible,
body.woocommerce-account a.button:focus-visible,
body.woocommerce-account input[type="submit"]:focus-visible,
body.woocommerce-account button[type="submit"]:focus-visible {
outline: 2px solid var(--loomify-primary);
outline-offset: 2px;
box-shadow: var(--loomify-shadow-focus);
}
body.woocommerce-account .woocommerce-button:active,
body.woocommerce-account button.button:active,
body.woocommerce-account a.button:active,
body.woocommerce-account input[type="submit"]:active,
body.woocommerce-account button[type="submit"]:active {
transform: translateY(1px);
}
/* -------------------------------------------------------------------------- *
* Account navigation — responsive tab/list.
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
background-color: var(--loomify-card);
border: 1px solid var(--loomify-border);
border-radius: var(--loomify-radius);
box-shadow: var(--loomify-shadow);
padding: 0.75rem;
}
@media (min-width: 783px) {
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
flex-direction: column;
gap: 0.25rem;
}
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 0.6rem 0.9rem;
border-radius: 8px;
/* Navigation is UI chrome — sans body face (see table th note above). */
font-family: var(--loomify-font-body);
font-weight: 500;
color: var(--loomify-muted);
transition: background-color 0.15s ease, color 0.15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
background-color: var(--loomify-surface);
color: var(--loomify-primary);
text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
background-color: var(--loomify-primary);
color: #ffffff;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
outline: 2px solid var(--loomify-primary);
outline-offset: 2px;
}
/* -------------------------------------------------------------------------- *
* Notices — light surface, primary accent (visual only).
* -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
background-color: var(--loomify-surface);
border: 1px solid var(--loomify-border);
border-left: 4px solid var(--loomify-primary);
border-radius: 8px;
padding: 0.85rem 1rem;
color: var(--loomify-ink);
}
body.woocommerce-account .woocommerce-error {
border-left-color: #b3261e;
}
/* Email-verification prompt — "Confirm email address". Was rooted at
* `.woocommerce-orders` with a direct-child anchor, so the CTA went unstyled on
* every other endpoint and a wrapped anchor broke the layout resets. Now keyed
* only to the CTA's own `wc_send_verification` arg — `.button.wc-forward` also
* matches the "Browse products" notices — with descendant combinators, so nesting
* is safe. Secondary/outline CTA from editorial.css §3, whose `!important` fill is
* why these restate it. Presentation only: href, nonce and handler untouched. */
body.woocommerce-account .woocommerce-info a.button[href*="wc_send_verification"] {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: var(--lm-btn-h, 60px);
max-width: 100%;
padding: 0 2.25rem;
margin: 0 0 0.75rem 1.25rem; /* gutter for the no-:has() fallback, where Woo's float-right still stands */
font-family: var(--loomify-font-body);
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: transparent !important;
color: var(--loomify-primary) !important;
border: 1px solid var(--loomify-primary) !important;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease, box-shadow 0.15s ease;
}
body.woocommerce-account .woocommerce-info a.button[href*="wc_send_verification"]:hover,
body.woocommerce-account .woocommerce-info a.button[href*="wc_send_verification"]:focus-visible {
background-color: var(--loomify-primary) !important;
color: #ffffff !important;
border-color: var(--loomify-primary) !important;
text-decoration: none;
}
body.woocommerce-account .woocommerce-info a.button[href*="wc_send_verification"]:focus-visible {
outline: 2px solid var(--loomify-primary);
outline-offset: 2px;
box-shadow: var(--loomify-shadow-focus);
}
/* `:has()` addresses only the notice owning this CTA; where unsupported these
* rules drop and Woo's float-right stands, which the gutter margin above covers. */
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.25rem;
padding: 1rem;
}
/* Decorative; nowhere to sit once the notice is a flex row. */
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"])::before {
content: none;
}
/* Woo floats the anchor itself, so clear it wherever it sits. */
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) a.button[href*="wc_send_verification"] {
float: none;
margin: 0;
}
/* The flex item: the CTA when it is a direct child, otherwise its wrapper. */
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) > a.button[href*="wc_send_verification"],
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) > :has(a.button[href*="wc_send_verification"]) {
order: 2; /* the message reads first, as it does in the float presentation */
min-width: 0;
margin: 0;
}
/* Narrow: full-width row, trading horizontal padding for label room. `nowrap` is
* kept (one line), and the border-box width stops it widening the viewport. */
@media (max-width: 599px) {
body.woocommerce-account .woocommerce-info a.button[href*="wc_send_verification"] {
width: 100%;
min-width: 0;
padding-inline: 0.5rem;
margin-inline: 0;
}
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) {
padding-inline: 0.625rem;
}
body.woocommerce-account .woocommerce-info:has(a.button[href*="wc_send_verification"]) > :has(a.button[href*="wc_send_verification"]) {
flex: 1 1 100%;
}
}
/* -------------------------------------------------------------------------- *
* Loomify design preview (plugin output). CSS-only alignment; markup, images
* and behaviour are untouched — we only style the existing scoped classes so
* the preview keeps rendering inside the account order view.
* -------------------------------------------------------------------------- */
body.woocommerce-account .loomify-customer-design-preview {
background-color: var(--loomify-card);
border: 1px solid var(--loomify-border);
border-radius: var(--loomify-radius);
box-shadow: var(--loomify-shadow);
padding: clamp(1rem, 2.5vw, 1.5rem);
margin: 1.25rem 0;
}
body.woocommerce-account .loomify-customer-design-preview__heading {
font-family: var(--loomify-font-head);
font-weight: 600;
color: var(--loomify-ink);
margin: 0 0 0.75rem;
}
body.woocommerce-account .loomify-customer-design-preview__image {
display: block;
max-width: 200px;
height: auto;
border: 1px solid var(--loomify-border);
border-radius: 8px;
}
/* -------------------------------------------------------------------------- *
* Shared header / footer chrome, as seen from the account page.
*
* This file is enqueued *after* editorial.css, and the generic element rules
* above are scoped to the body, not to the account content — so they also match
* the shared template parts that wrap this page:
* `body.woocommerce-account a` (0,1,2) beats `.loomify-site-footer a` (0,1,1)
* `body.woocommerce-account p|li` (0,1,1) ties `.loomify-site-footer p|li`, later wins
* `body.woocommerce-account h1..h6` (0,1,1) ties `.loomify-site-footer h3`, later wins
* The result on /my-account only was near-black link and heading text painted on
* the near-black footer surface, plus a hover underline the editorial layer does
* not use. These rules hand the shared chrome back to the editorial layer; they
* add no new colours (values are the editorial --lm-* tokens, with the literal
* fallbacks used elsewhere in this file) and touch nothing inside
* .woocommerce-MyAccount-*.
* -------------------------------------------------------------------------- */
body.woocommerce-account .loomify-site-footer,
body.woocommerce-account .loomify-site-footer p,
body.woocommerce-account .loomify-site-footer li {
color: var(--lm-on-dark, #f4f1ea);
}
/* The rule above is deliberately blunt, so restore the three tones §9 of the
editorial layer gives the footer (white wordmark, 60% brand copy, 40% legal
line) at a specificity that clears it. */
body.woocommerce-account .loomify-site-footer .lm-footer-brand {
color: #ffffff;
}
body.woocommerce-account .loomify-site-footer .wp-block-column:first-child p:not(.lm-footer-brand) {
color: rgba(var(--lm-on-dark-rgb, 244, 241, 234), 0.6);
}
body.woocommerce-account .loomify-site-footer .lm-footer-legal {
color: rgba(var(--lm-on-dark-rgb, 244, 241, 234), 0.4);
}
body.woocommerce-account .loomify-site-footer h2,
body.woocommerce-account .loomify-site-footer h3,
body.woocommerce-account .loomify-site-footer .wp-block-heading {
font-family: var(--lm-font-body, var(--loomify-font-body));
font-weight: 700;
color: #ffffff;
}
body.woocommerce-account .loomify-site-footer a {
color: rgba(var(--lm-on-dark-rgb, 244, 241, 234), 0.7);
}
body.woocommerce-account .loomify-site-footer a:hover,
body.woocommerce-account .loomify-site-footer a:focus-visible {
color: var(--lm-on-dark, #f4f1ea);
}
body.woocommerce-account .loomify-site-footer a:focus-visible {
outline-color: var(--lm-on-dark, #f4f1ea);
}
/* The editorial layer never underlines chrome links on hover; the account
link rule above would. */
body.woocommerce-account .loomify-site-header a:hover,
body.woocommerce-account .loomify-site-header a:focus-visible,
body.woocommerce-account .loomify-site-footer a:hover,
body.woocommerce-account .loomify-site-footer a:focus-visible {
text-decoration: none;
}