` block, just a bare paragraph.
* 4. Typography on labels/body is mixed (Open Sans / Mulish / Poppins
* leaking) — the v2 F1 typography rules scoped to
* `.woocommerce-MyAccount-content` cover most of this; we re-assert at
* the `.woocommerce-Address` scope so empty-state markup is also painted.
*
* Markup (WC core `templates/myaccount/my-address.php`):
*
*
*
* Billing address
* Add (or "Edit" if address exists)
*
*
… (or
placeholder if empty)
*
*
…
*
You have not set up this type of
* address yet.
` directly inside `.woocommerce-Address`. Our
* `.woocommerce-Address { border:1px; padding:1.25rem }` is correct for
* the card itself, but Kubio's global `p` styling adds a top-margin and
* the theme treats the bare `` as if it were a form note (some Kubio
* stylesheets paint `p` with a faint background when the section is
* flagged as an empty state). We neutralize that: when a `
` is a
* direct child of `.woocommerce-Address` (placeholder pattern), it reads
* as plain body text — no extra border, no background, sits flush.
*
* #4 typography — v2 F1 covers content area; we re-assert on
* `.woocommerce-Address` (already done at line 819-820) and on the
* header `
` (line 417-424 already sets Mulish 1.1rem bold teal).
* The placeholder ` ` inherits via the Mulish rule for
* `.woocommerce-Address` ancestor (line 820). No new typography rule
* needed here — only the card-link visual reset above.
*
* Specificity ladder (must beat both Kubio and WC core):
* - WC core `.col2-set .col-1` = (0,2,0)
* - Our reset uses `#kubio .woocommerce-account .woocommerce-Addresses .col-1`
* = (1,3,1) → wins.
* - Address-title link: Kubio's link rule `[data-kubio] a:not(...)` =
* (0,2,1). Our `#kubio .woocommerce-account .woocommerce-Address-title a`
* = (1,3,1) → wins without `!important`.
*
* Accessibility:
* - Link color stays `--rebs-teal-dark` (#006d82 = 5.34:1 vs surface).
* - Hover/focus add underline so the link is still discoverable for users
* scanning (WCAG 1.4.1: color is not the only means of identification —
* hover/focus give the underline back).
* - Focus ring stays via the global form-control focus block (not affected).
*
* Mobile first:
* - `.woocommerce-Addresses` stays single-column under 768px (inherited from
* line 388-392).
* - Title header switches to `flex-wrap: wrap` so the link drops to the next
* line on narrow cards instead of getting crushed.
* ------------------------------------------------------------------------- */
/* #1 — Responsive grid matching /services card-grid pattern.
`auto-fit minmax(280px, 1fr)`: 1 card = 1 col, 2 cards = 2 cols,
3+ cards flow up to whatever the container width allows. Same
pattern Quiosco uses for product grid (quiosco-product-grid.css:472).
Defeats WC core `.col-1`/`.col-2` floats that can win the cascade
when enqueue order shifts.
SCRUM-164: replaced fixed `1fr 1fr` with `auto-fit minmax`; this
block is now the single source of truth (SCRUM-164 consolidated
the earlier SCRUM-132 block at ~line 388). Specificity (1,3,0).
SCRUM-167 (A.NH-2): dropped redundant `.col2-set` / `.u-columns`
chained selectors — the wrapper element carries all three classes
so `.woocommerce-Addresses` already matches it; the extra selectors
only added specificity nobody needed. Single selector is cleaner. */
#kubio .woocommerce-account .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
#kubio .woocommerce-account .woocommerce-Addresses {
gap: 2rem;
}
}
/* SCRUM-164: neutralise WC core clearfix pseudos.
WC ships `.woocommerce-Addresses::before` and `::after` as legacy
clearfix table-cells for pre-grid float layout. Under `display: grid`
they become grid items — with `auto-fit minmax(280px, 1fr)` the two
extra "items" still consume cells and push the real cards into wrong
positions (Cani reported on 2026-05-15 via DevTools grid overlay
showing 4 cells instead of 2, Billing top-left + Shipping bottom-right
diagonal).
Pattern identical to Quiosco's fix for `ul.products`
(quiosco-product-grid.css:484-494). `content: none` kills generation
at origin; `display: none` adds defence if a future rule forces
`content: ""`. */
#kubio .woocommerce-account .woocommerce-Addresses::before,
#kubio .woocommerce-account .woocommerce-Addresses::after {
content: none;
display: none;
}
/* Reset legacy WC float/width on address card children so the grid wins.
SCRUM-167 (A.NH-2): dropped redundant `.col-1/.col-2/.u-column1/.u-column2`
selectors — every address card child carries `.woocommerce-Address` plus
those legacy classes together, so the single `.woocommerce-Address` child
selector covers them all. */
#kubio .woocommerce-account .woocommerce-Addresses > .woocommerce-Address {
float: none;
width: auto;
max-width: 100%;
margin: 0; /* defeat WC core `.col-1 { margin-right: 3.8% }` */
}
/* #2 — Address title header: SCRUM-176 switched the base rule (line 579) to
`flex-direction: column`, so the action link drops below the heading
naturally and `flex-wrap` is no longer needed. Block kept as a sentinel
for the related SCRUM-162 lessons (uppercase/underline reset below). */
/* #2 — Action link ("Add"/"Edit") visual reset:
- No uppercase at rest (was forcing "ADD BILLING ADDRESS" line break).
- No underline at rest; underline on hover/focus for discoverability.
- Keep Mulish + teal-dark + 700 weight so it still reads as an action.
Overrides the earlier `#kubio .woocommerce-account .woocommerce-Address-title a`
block (lines 429-437) — same specificity (1,3,1), wins by load order. */
#kubio .woocommerce-account .woocommerce-Address-title a,
#kubio .woocommerce-account .woocommerce-Address-title a.edit {
color: var(--rebs-teal-dark);
font-family: 'Mulish', Helvetica, Arial, sans-serif;
font-size: 0.9rem; /* 0.9rem: slight bump for readability after SCRUM-176 restyle. */
font-weight: 700;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
}
@media (hover: hover) {
#kubio .woocommerce-account .woocommerce-Address-title a:hover,
#kubio .woocommerce-account .woocommerce-Address-title a.edit:hover {
color: var(--rebs-teal-darker);
text-decoration: underline;
}
}
#kubio .woocommerce-account .woocommerce-Address-title a:focus-visible,
#kubio .woocommerce-account .woocommerce-Address-title a.edit:focus-visible {
outline: 2px solid var(--rebs-teal-dark);
outline-offset: 2px;
text-decoration: underline;
}
/* #3 — Placeholder "You have not set up this type of address yet." reads
as a disabled input.
Root cause (confirmed against WC core template `myaccount/my-address.php`
v9.3.0): the placeholder copy lives INSIDE `
`, not in a ``.
So the visual "disabled input" cue isn't an extra border on a stray
—
it's the card itself: `.woocommerce-Address` (line 401-405) uses
`--rebs-surface-alt` (a soft grey) as the card background. With the
border + padding + grey tint and a sentence of body text, the card looks
like an `
` too, so the
selector matched everything anyway — simplified for honest intent. */
#kubio .woocommerce-account .woocommerce-Address {
border: 1px solid var(--rebs-border);
}
/* Ensure the inner `` body (which carries either the formatted
address or the placeholder copy) renders as plain body text — no italic
leak (already neutralized at line 449 but we restate under the kubio scope
for explicit hierarchy), no extra padding, Mulish for body rhythm. */
#kubio .woocommerce-account .woocommerce-Address address {
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: 'Mulish', Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 0.95rem;
line-height: 1.6;
color: var(--rebs-text);
}
/* ============================================================================
* SCRUM-137 — Edit-address form h2 weight + size
* ============================================================================
*
* WC core (`templates/myaccount/form-edit-address.php`) renders the form
* heading as `Billing address ` (or "Shipping address"). With our
* base h2 styling for `.woocommerce-MyAccount-content` it inherited Poppins
* 700 at a heading scale that dominated the page (screenshot Cani
* 2026-05-15: "Billing address" almost twice the size of the form inputs
* below it, breaking the visual hierarchy between heading and the action
* the user is taking).
*
* Cani's call: drop to `font-weight: 500; font-size: 2em` — lighter,
* still clearly a heading but no longer steals attention from the form.
*
* Scope: `body.woocommerce-edit-address` (WP body class for the endpoint).
* Targets only the form heading, not address-card titles (those live in
* `.woocommerce-Address-title` on `/my-account/addresses/`, untouched).
*
* Specificity (1,2,1) — `#kubio body.woocommerce-edit-address` outranks the
* earlier (1,3,0) family-only rule at line 828 by selector match path
* (.woocommerce-MyAccount-content is dropped — the h2 lives inside the
* form, but the chain stays under #kubio and edit-address body class so
* the cascade is decisive). No `!important`.
* ============================================================================ */
#kubio body.woocommerce-edit-address .woocommerce-MyAccount-content h2 {
font-weight: 500;
font-size: 2em;
}
/* ============================================================================
* SCRUM-186 — Reset-password form layout
* ============================================================================
*
* Surface: `/my-account/lost-password/?action=rp&key=...&login=...` — the
* "Set password" form a user lands on after clicking the reset link in the
* recovery email. WC core ships this form using `.form-row-first` +
* `.form-row-last` (two side-by-side columns at `width: 47%; float: left/right`
* from `woocommerce-layout.css`).
*
* Two problems on desktop:
*
* 1. The `` carries `max-width: 600px; margin: 0
* auto` (Kubio Pro's WC styles). Without `width: 100%`, the form
* shrink-fits to the intrinsic width of its floated children — collapsing
* to ~293px and leaving each 47% column at ~111px wide. Both labels and
* inputs end up cramped (audit SCRUM-186, 2026-05-16).
*
* 2. Even with the form expanded to 600px, two side-by-side password fields
* is the wrong UX pattern: the user types a password then confirms it —
* a vertical flow. Every other WC form on the site (login, register,
* edit-account) uses single-column `.form-row-wide` for paridad.
*
* Fix: force the form to its `max-width` (600px) and stack the two rows full
* width. Matches the mobile pattern WC core ships in
* `woocommerce-smallscreen.css` (`.form-row-first/.form-row-last {
* width: 100%; float: none }`) — we extend it to all viewports.
*
* Scope: `body.woocommerce-lost-password` (WP body class for the endpoint) +
* `.lost_reset_password` (the form class WC emits only on the set-password
* step). The combination keeps the rules off `/lost-password/` itself (the
* email-entry step, which uses a different form class `.lost_reset_password`
* does NOT carry — only the rp step does) and off every other surface.
*
* Specificity stays low (0,3,1) — no `#kubio` needed because the WC vendor
* rule we're outranking is also unscoped (`.woocommerce form .form-row-first`
* = 0,3,1) and our body class adds match-path precedence in the cascade.
* ============================================================================ */
body.woocommerce-lost-password form.lost_reset_password {
width: 100%;
max-width: 600px;
margin-inline: auto;
}
body.woocommerce-lost-password form.lost_reset_password .form-row-first,
body.woocommerce-lost-password form.lost_reset_password .form-row-last {
width: 100%;
float: none;
margin-right: 0;
}