/* ==========================================================================
OSTUGRUPP — TÄNULEHT · MINU KONTO · TELLIMUSE JÄLGIMINE
assets/css/account-polish.css — loaded by inc/account-polish.php at
wp_enqueue_scripts priority 25, and ONLY on the three surfaces named there.
WHAT THIS FILE IS FOR
Everything a shopper sees AFTER paying. The thank-you page is the single
most emotionally loaded page in the shop — the shopper has just handed over
money and is asking one question, "did that work" — and until this file it
was WooCommerce's default: an unstyled two-column table under a paragraph.
The account is where they come back to ask "where is it".
SOURCES READ BEFORE A LINE OF THIS WAS WRITTEN
assets/css/tokens.css every value below
assets/css/woocommerce.css:1307-1524 the rules this file extends
assets/css/woocommerce.css:1812-1839 the de-tabling pattern (Trap 11)
assets/css/tracking.css the timeline + badge vocabulary
assets/css/empty-states.css the illustration route + family
assets/css/surfaces-d4-d12.css the elevation ladder (D4)
assets/css/controls-d1-d2.css the button/field ladder (D1/D2)
assets/css/motion.css press feedback ownership
docs/DISAIN-KOMPONENDID.md §D5 §D8 §D12 chips, tables, state colour
design_handoff_ostugrupp_system/
"Ostugrupp System Sample 01.dc.html":1606-1683 D8, verbatim
LIVE: curl https://ostugrupp.ee/my-account-2/ and .../lost-password/
(2026-08-14) — body class, wrapper markup and the login/register
structure are read from the live HTML, not remembered.
ADDED FOR SECTIONS 10-13 (v1.2.102, 2026-08-15)
curl http://og.local/my-account-2/ and .../lost-password/
the local copy of the live database. Body classes, the #customer_login
id, the register card's three tick rows and the reset form's structure
are quoted from that HTML.
plugins/woocommerce/templates/myaccount/
my-address.php · form-edit-address.php · form-edit-account.php ·
orders.php · view-order.php · navigation.php · dashboard.php
plugins/woocommerce/templates/order/order-details.php
plugins/woocommerce/includes/class-wc-order.php (get_order_item_totals —
which row is last, and which rows carry no sum at all)
plugins/woocommerce/assets/css/woocommerce-layout.css (the col2-set floats)
plugins/woocommerce/assets/css/woocommerce-smallscreen.css (tbody th)
assets/css/type-rhythm.css:205 (the bare-h2 size)
──────────────────────────────────────────────────────────────────────
THE THREE MOMENTS THIS FILE ACTUALLY DESIGNS
Everything else in here is deliberately calm.
1. THE CONFIRMATION — the "Täname" line becomes a real confirmation
(mark, measure, rhythm) instead of a large paragraph. §1.
2. THE ORDER STATUS — six WooCommerce statuses get ONE state language,
built from the state tokens, shared by the desktop table and the
phone card. §6.
3. THE WAY OUT WHEN THERE IS NOTHING — "Sul ei ole veel ühtegi
tellimust" stops being a grey bar with a button jammed into its
right edge and becomes an invitation, in the same drawing family as
the other four empty states. §7.
──────────────────────────────────────────────────────────────────────
⛔ MONTONIO (CLAUDE.md invariant 1). This file is loaded on the
order-received page, where `is_checkout()` is TRUE — which is exactly why
several other modules skip that page. Two guards:
(i) inc/account-polish.php never enqueues on the checkout itself, the
order-pay screen or the add-payment-method screen. Only the
order-received endpoint, the account and the tracking page.
(ii) every selector below is fenced on ORDER or ACCOUNT markup
(.woocommerce-order, .woocommerce-order-details,
.woocommerce-customer-details, .woocommerce-MyAccount-*,
.woocommerce-orders-table, .ostu-track). Not one generic
`.form-row`, `.button` or `input` net exists in this file, so no
rule here can reach a gateway control even if the stylesheet were
served on a page it was not enqueued for (W3TC combining).
v1.2.102 keeps that promise while adding form rules: §11 and §12 do
touch a checkbox, a submit and a form wrapper, and every one of them
is fenced on `#customer_login`, on
`.u-columns.col2-set:has(.woocommerce-form-register)`, on
`.woocommerce-ResetPassword` or on `.woocommerce-EditAccountForm` —
four pieces of markup that exist only on the account, never on a
page that can render a gateway list.
The file contains none of the four names gate check 6a greps for, in code
or in comment.
⚠️ CLAUDE.md TRAP 11 — the one that has cost this project two releases,
both times in an order-shaped table. A non-table `display` on a `| `
voids its `colspan` and hands the content to an anonymous cell. Two
consequences are honoured throughout this file:
• The thank-you / view-order details table STAYS a real table at every
width (§2). It is two columns; it does not need de-tabling, and half
a conversion is what the trap is made of.
• The account's responsive tables are already HALF converted by
woocommerce.css:1503-1523 (tr → block, td → flex, while `table` and
`tbody` keep table display). §5b finishes that conversion the way
woocommerce.css:1826-1835 finished the checkout summary: table, tbody
and tfoot go to block as well, so no anonymous row or cell can be
generated at all. Never half.
⚠️ CLAUDE.md TRAP 9 — the `woocommerce-page` body class changes the
cascade. Every substantial rule below states the specificity it achieves
and the declaration it must beat. Those numbers are ARITHMETIC, not
measurement: this session had no browser (see §9).
⚠️ Every var() carries its literal. This theme deploys as a hand-built
zip; a custom property that cannot resolve does not fall back to an older
value, it poisons the whole declaration.
⚠️ --shadow-card resolves to main.css:98, NOT to tokens.css:238 (both
declare it, main.css loads last — docs/DISAIN-KOMPONENDID.md §1). The
literal fallbacks below are main.css's value, i.e. the one that renders.
========================================================================== */
/* ==========================================================================
1 · TÄNULEHT — THE CONFIRMATION
==========================================================================
Markup (WooCommerce checkout/thankyou.php + checkout/order-received.php):
div.woocommerce-order
p.woocommerce-notice.woocommerce-notice--success
.woocommerce-thankyou-order-received ← "Täname. …"
ul.woocommerce-order-overview.order_details
li.woocommerce-order-overview__order (nr)
li…__date · li…__email · li…__total · li…__… (method)
[ hooks: woocommerce_thankyou → order details table, addresses ]
What was here before: woocommerce.css:1308 turned the paragraph into a
24-32px display heading and :1309-1311 turned the list into a flex card.
Both are good and both stay — this section adds the two things a
confirmation needs and a heading cannot give: a MARK that says "done", and
a MEASURE, so the receipt is not 1376px wide on a laptop.
⛔ NOT DONE HERE, on purpose: no delivery date, no "arrives on", no
countdown. The theme promises "keskmiselt 3-7 tööpäeva" while
/muugitingimused/ says 1-14 and up to 45. Until the owner settles that,
this page prints no date it cannot keep (pack rule 2: a wrong number is
worse than no number). The honest answer to "when" is the status timeline
— see the note at the end of this section. */
/* The measure. `.woocommerce-order` is a plain block child of `.woocommerce`
(verified: the only grid this theme puts on a checkout wrapper is on
`form.checkout`, woocommerce.css:1137 — NOT on `.woocommerce`, so there is
no repeat of the empty-cart grid trap documented at empty-states.css:67).
860px is wider than the tracking panel's 760px (tracking.css:9) because
this page carries a two-column table and two addresses, and narrower than
the page container, which is 1376px at 1440px viewport.
Specificity (0,1,0); nothing else in the theme sets a width on this
element, so it only has to exist. */
.woocommerce-order {
width: 100%;
max-width: 860px;
margin-inline: auto;
}
/* ---- 1a · The mark --------------------------------------------------------
A solid brand disc with a white check, centred above the line.
WHY A BACKGROUND-IMAGE AND NOT A ROTATED PSEUDO-ELEMENT. The usual CSS
tick is a box with two borders turned 45deg; its geometry has to be tuned
by eye, and there was no browser in this session (§9). The check drawn
below is the SAME path, stroke width and cap style that
inc/order-tracking.php:370 already draws for a completed timeline step, so
the two marks are one glyph. Same delivery route as
empty-states.css:187-194, and the same consequence: inside a
background-image the SVG is its own document, so `currentColor` cannot see
the page and the stroke is the literal #ffffff. That is not a missing
token — it is --text-on-brand's value, on a --brand disc, and it can never
be anything else because the disc under it is fixed too.
Base = 56px on a phone, 64px from 640px up. `position:static` is stated
because core sets `position:absolute` on `.woocommerce-info::before` — a
different element, but the same author habit, and being explicit costs
nothing.
Specificity (0,2,0) + pseudo-element. Nothing in core or in
woocommerce.css touches `.woocommerce-thankyou-order-received::before`, so
this only has to be valid, not to win an argument. */
.woocommerce-order > .woocommerce-thankyou-order-received {
display: block;
margin: 0 auto var(--space-24, 24px);
max-width: 34ch;
text-align: center;
font: var(--h2, 700 clamp(24px, 3.2vw, 32px)/1.15 "Space Grotesk", "DM Sans", system-ui, sans-serif);
letter-spacing: var(--h2-tracking, -.015em);
color: var(--text, #0f172a);
}
.woocommerce-order > .woocommerce-thankyou-order-received::before {
content: "";
position: static;
display: block;
width: 56px;
height: 56px;
margin: 0 auto var(--space-16, 16px);
border-radius: var(--radius-circle, 50%);
background:
var(--brand, #047857)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
center / 26px 26px no-repeat;
}
@media (min-width: 640px) {
.woocommerce-order > .woocommerce-thankyou-order-received::before {
width: 64px;
height: 64px;
background-size: 30px 30px;
}
}
/* ---- 1b · The overview: a receipt on a phone, a stat row on a desk --------
woocommerce.css:1309-1311 gives this list a flex card with a 24px gap and
`li { display:flex; flex-direction:column }` — label above value. That is
right at 1280px and wrong at 375px: five stacked label/value pairs with a
long e-mail address in the middle read as a ragged column with no
alignment to hang on.
PHONE → one column, label LEFT and value RIGHT on one baseline. This is
the "silt: väärtus" row the whole shop already uses on small
screens (D8), and it is what a receipt looks like.
≥560px → back to the pack's stat layout, three across, which lets the two
long values (e-mail, makseviis) have a full column each.
Specificity: `ul.woocommerce-order-overview` is emitted by exactly one
template (checkout/thankyou.php) and always inside `.woocommerce-order`,
so prefixing with it is free — the container rule is (0,2,0) against
woocommerce.css:1309's (0,1,0), and the `li` rule is (0,2,1) against
woocommerce.css:1310's (0,1,1). Both win on specificity, not on order. */
.woocommerce-order .woocommerce-order-overview {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: var(--space-8, 8px) var(--space-20, 20px);
}
.woocommerce-order .woocommerce-order-overview > li {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-8, 8px) var(--space-16, 16px);
padding: var(--space-12, 12px) 0;
border-bottom: 1px solid var(--border, #e2e8f0);
}
.woocommerce-order .woocommerce-order-overview > li:last-child {
border-bottom: 0;
}
/* The value. `strong` is core's element (thankyou.php wraps every value in
one); woocommerce.css:1311 already gives it the display face at 18px.
Here it only has to stop being a block so it can sit on the label's
baseline, and to line its digits up. (0,3,1) — no competitor, stated for
symmetry with the rule above. */
.woocommerce-order .woocommerce-order-overview > li strong {
text-align: right;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
/* The total is the number the shopper is checking. One step up the price
ladder, no colour change — this is a receipt, not an offer. */
.woocommerce-order .woocommerce-order-overview > li.woocommerce-order-overview__total strong {
font: var(--price-md, 700 20px/24px "Space Grotesk", "DM Sans", system-ui, sans-serif);
letter-spacing: var(--price-md-tracking, -.015em);
color: var(--text, #0f172a);
}
@media (min-width: 560px) {
.woocommerce-order .woocommerce-order-overview {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-24, 24px);
padding: var(--space-24, 24px);
}
/* Back to the pack's stacked stat: label above value, no rule between. */
.woocommerce-order .woocommerce-order-overview > li {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-4, 4px);
padding: 0;
border-bottom: 0;
}
.woocommerce-order .woocommerce-order-overview > li strong {
text-align: left;
}
}
/* ---- 1c · The order that did NOT go through ------------------------------
thankyou.php renders `.woocommerce-thankyou-order-failed` instead of the
success line when the order failed, plus a `-failed-actions` paragraph
holding the retry links. Those two are UNSTYLED today, and once §1a exists
the contrast matters: a designed success page next to a bare paragraph
makes the failure look like a broken page rather than a clear message.
This is the smallest honest treatment — the pack's D6 shape (surface, 1px
border, a 3px rule in the state colour, --radius-12) and nothing more. It
deliberately does NOT reuse the confirmation mark, the measure or the
heading size: a failure must not look like a confirmation.
The retry links inside `-failed-actions` are left entirely alone. They
lead to the pay-for-order screen and this file has no business shaping
the way in there. Untested — no order can be failed from here (§9). */
.woocommerce-order > .woocommerce-thankyou-order-failed,
.woocommerce-order > .woocommerce-thankyou-order-failed-actions {
max-width: 640px;
margin: 0 auto var(--space-16, 16px);
padding: var(--space-16, 16px) var(--space-20, 20px);
background: var(--surface, #ffffff);
border: 1px solid var(--border, #e2e8f0);
border-left: 3px solid var(--state-error, #b91c1c);
border-radius: var(--radius-12, 12px);
font: var(--text-md, 400 16px/24px "DM Sans", "Segoe UI", sans-serif);
color: var(--text, #0f172a);
}
/* ---- 1d · What this page still cannot say -------------------------------
"What happens next" is CONTENT, and this file is a stylesheet — the PHP
half of this module is enqueue-only by instruction. The answer already
exists in the theme and is one line away from this page:
inc/order-tracking.php builds the five-step timeline (Tellitud →
Makstud → Pakitud → Teel → Kohal) and hangs it on `woocommerce_view_order`
(:647) only. tracking.css is ALREADY enqueued on the order-received
endpoint (inc/order-tracking.php:50), so the styling for it is on this
page today with nothing to style.
The exact edit is written out in the handover. Nothing in this file
depends on it, and no dead CSS was written in anticipation of it — if the
lead adds the hook, tracking.css dresses it, and §8 below gives it the
right spacing whichever page it lands on. */
/* ==========================================================================
2 · THE ORDER TABLE — thank-you AND view-order
==========================================================================
Markup (WooCommerce order/order-details.php):
table.woocommerce-table.woocommerce-table--order-details.shop_table
thead > tr > th.product-name | th.product-total
tbody > tr.order_item > td.product-name | td.product-total
tfoot > tr > th (label) | td (value) ← Vahesumma / Tarne / Kokku
⚠️ THIS TABLE IS NOT CONVERTED TO CARDS AND THAT IS THE DECISION, NOT AN
OMISSION. Three reasons, in order:
1. It carries NO `shop_table_responsive` class and NO `data-title`
attributes, so the D8 card mechanism ("silti ei ehitata ise — core
annab selle juba", sample:1677) has nothing to build from. Building
labels here would mean inventing them, and the pack's own rule is
that the label may come from exactly one place.
2. It is TWO columns. The D8 rule exists because a six-column cart
cannot be read on a phone; a name/price pair can, and does.
3. CLAUDE.md Trap 11. Converting it would mean taking table, thead,
tbody, tfoot, tr, th and td off table display together — all seven,
never some — to buy a layout that is not better. The cheapest correct
move was to leave the table a table and make it read well.
On the thank-you page this table has NO theme styling at all today: every
rule woocommerce.css:1480-1498 writes for order tables is fenced inside
`.woocommerce-MyAccount-content`, which does not exist on that page. So
the shopper's receipt renders in raw WooCommerce: a 5px radius, a
`color-mix` border and 9px/12px cells. This section is what closes that.
Specificity: core ships `.woocommerce table.shop_table` (0,2,0),
`… th` (0,2,1), `… td` (0,2,1) and `… tfoot th` (0,2,2). Every rule below
carries `.woocommerce .woocommerce-order-details table.shop_table…`, which
is (0,3,1) bare, (0,3,2) with a cell element and (0,3,3) in the tfoot — so
each one beats the core declaration it answers on SPECIFICITY, not on load
order, which a plugin that recombines stylesheets can reorder. */
.woocommerce .woocommerce-order-details {
margin-top: var(--space-32, 32px);
}
.woocommerce .woocommerce-order-details .woocommerce-order-details__title,
.woocommerce .woocommerce-customer-details .woocommerce-column__title {
margin: 0 0 var(--space-16, 16px);
font: var(--h4, 600 18px/26px "Space Grotesk", "DM Sans", system-ui, sans-serif);
letter-spacing: var(--h4-tracking, -.005em);
color: var(--text, #0f172a);
}
/* The shell. D4 level 0 — "sisuplokk lehel, tabeli ümbris" is a border and
no shadow (docs/DISAIN-KOMPONENDID.md §D4). Same treatment
woocommerce.css:1480-1485 gives the account tables, so a shopper who
compares the thank-you page with /my-account-2/view-order/ sees one table.
`border-collapse:separate` + `overflow:hidden` is what lets the radius
actually clip the header row. */
.woocommerce .woocommerce-order-details table.shop_table {
width: 100%;
margin: 0;
background: var(--surface, #ffffff);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-16, 16px);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce .woocommerce-order-details table.shop_table th {
padding: var(--space-12, 12px) var(--space-16, 16px);
text-align: left;
background: var(--surface-muted, #f1f5f9);
color: var(--text-muted, #475569);
font: var(--label-sm, 600 12px/1 "DM Sans", "Segoe UI", sans-serif);
letter-spacing: var(--label-sm-tracking, .06em);
text-transform: uppercase;
border-top: 0;
}
.woocommerce .woocommerce-order-details table.shop_table td {
padding: var(--space-16, 16px);
vertical-align: top;
border-top: 1px solid var(--border, #e2e8f0);
color: var(--text, #0f172a);
font: var(--text-sm, 400 14px/20px "DM Sans", "Segoe UI", sans-serif);
}
/* The item. Name on the left, money on the right, digits aligned.
`.product-total` is the column a shopper scans, so it is the one that gets
tabular figures and `white-space:nowrap` — a price that wraps between the
number and the € is the one wrap nobody forgives. */
.woocommerce .woocommerce-order-details table.shop_table td.product-name {
font: var(--text-sm, 400 14px/20px "DM Sans", "Segoe UI", sans-serif);
color: var(--text-muted, #475569);
}
.woocommerce .woocommerce-order-details table.shop_table td.product-name a {
color: var(--text, #0f172a);
font-weight: var(--fw-semibold, 600);
text-decoration: none;
}
.woocommerce .woocommerce-order-details table.shop_table td.product-name a:hover {
color: var(--brand, #047857);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Core's `× 2` sits inline after
the name at full weight, where it reads as part of the product title. It
is a count; it gets the count's voice. */
.woocommerce .woocommerce-order-details table.shop_table td.product-name .product-quantity {
display: inline-block;
margin-left: var(--space-4, 4px);
color: var(--text-subtle, #64748b);
font-weight: var(--fw-medium, 500);
font-variant-numeric: tabular-nums;
}
.woocommerce .woocommerce-order-details table.shop_table td.product-name .wc-item-meta {
margin: var(--space-4, 4px) 0 0;
padding: 0;
color: var(--text-subtle, #64748b);
font: var(--text-xs, 400 13px/18px "DM Sans", "Segoe UI", sans-serif);
}
.woocommerce .woocommerce-order-details table.shop_table td.product-total {
width: 1%;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-weight: var(--fw-semibold, 600);
}
/* The totals block. Core makes every tfoot cell bold
(`.woocommerce table.shop_table tfoot th/td`, 0,2,2), which flattens
"Vahesumma", "Tarne" and "Kokku" into one wall of bold. Only the LAST row
is the number the shopper came for. These rules are (0,3,3). */
.woocommerce .woocommerce-order-details table.shop_table tfoot th,
.woocommerce .woocommerce-order-details table.shop_table tfoot td {
padding: var(--space-12, 12px) var(--space-16, 16px);
border-top: 1px solid var(--border, #e2e8f0);
background: var(--surface-muted, #f1f5f9);
font: var(--text-sm, 400 14px/20px "DM Sans", "Segoe UI", sans-serif);
font-weight: var(--fw-medium, 500);
color: var(--text-muted, #475569);
}
.woocommerce .woocommerce-order-details table.shop_table tfoot td {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--text, #0f172a);
}
/* ⚠️ v1.2.102 — `tr:last-child` WAS THE WRONG TEST AND IT COULD OVERFLOW.
The tfoot is not only the totals ladder. order-details.php appends two more
rows AFTER it, inside the SAME tfoot:
:103 | | Märkus: | …the shopper's own free-text note… |
|---|
:118 | Toimingud: | …buttons… |
|---|
Either one, when present, IS `tr:last-child`. The old rule then handed a
whole sentence `white-space: nowrap` plus a 20px money face — a note of any
length would have pushed the table wider than the page on a phone, which is
checklist item 6, not a cosmetic slip. `$actions` is non-empty exactly when
the order still needs the shopper to act, i.e. on the view-order page they
are most likely to open.
THE REPLACEMENT TEST. Every real totals row prints its value through
wc_price(), which always emits `` (verified in this shop's rendered cart HTML, not assumed). The
note row, the actions row and the method line carry no such span. So:
"the grand total" = the last tfoot row that carries a price
= a row WITH a price that has no LATER sibling row
carrying one.
`tr:has(td .woocommerce-Price-amount):not(:has(~ tr td .woocommerce-Price-amount))`
says exactly that, and it stays correct when refund rows are present
(refunds carry prices and sit before the total, so they are not last).
SPECIFICITY. `:has()` and `:not()` each contribute their most specific
argument, here `~ tr td .woocommerce-Price-amount` = (0,1,2):
.woocommerce .woocommerce-order-details .shop_table = 3 classes
:has(td .woocommerce-Price-amount) = +1 class, +2 elements
:not(:has(~ tr td .woocommerce-Price-amount)) = +1 class, +2 elements
table tfoot tr td = +4 elements
→ (0,5,8), against core's `.woocommerce table.shop_table tfoot td` (0,2,2).
Won on specificity, not on load order.
Without :has() support the rule is dropped and the total renders like the
rows above it — quieter, never wrong. The de-emphasis rule below is what
actually prevents the overflow, and it degrades the same safe way. */
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:has(td .woocommerce-Price-amount):not(:has(~ tr td .woocommerce-Price-amount)) th,
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:has(td .woocommerce-Price-amount):not(:has(~ tr td .woocommerce-Price-amount)) td {
padding-top: var(--space-16, 16px);
padding-bottom: var(--space-16, 16px);
border-top: 2px solid var(--border-strong, #cbd5e1);
color: var(--text, #0f172a);
}
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:has(td .woocommerce-Price-amount):not(:has(~ tr td .woocommerce-Price-amount)) th {
font: var(--label-md, 600 14px/16px "DM Sans", "Segoe UI", sans-serif);
letter-spacing: var(--label-md-tracking, .02em);
text-transform: uppercase;
}
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:has(td .woocommerce-Price-amount):not(:has(~ tr td .woocommerce-Price-amount)) td {
font: var(--price-md, 700 20px/24px "Space Grotesk", "DM Sans", system-ui, sans-serif);
letter-spacing: var(--price-md-tracking, -.015em);
}
/* A tfoot row whose value is NOT a sum is prose or controls, so it loses the
money face the block rule above gives every tfoot cell: it reads left, it
wraps, and its digits are not forced onto a tabular grid. This is the rule
that removes the overflow; the emphasis rule above only decides which row
is loud. (0,4,6) — three classes, plus :not(:has(td .woocommerce-Price-amount))
at (0,1,2), over table + tfoot + tr + td. */
.woocommerce .woocommerce-order-details table.shop_table tfoot tr:not(:has(td .woocommerce-Price-amount)) td {
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
font-variant-numeric: normal;
}
/* ⛔ WHAT WAS NOT DONE HERE, AND WHY. The obvious next move is
`tfoot tr:has(th.order-actions--heading) td { display:flex; gap:8px }` to
lay the action buttons out properly. That is CLAUDE.md Trap 11 verbatim: a
non-table `display` on a `` makes the browser wrap it in an anonymous
table cell, and this table is deliberately a REAL table at every width
(see the decision at the head of §2). Half a conversion is what the trap is
made of. The buttons are inline-flex controls already, so `text-align:left`
plus `white-space:normal` above is enough to make them wrap and read as a
row; the gap between them is the markup's own whitespace. */
/* Phone: the cells tighten, they do not restack (see the decision above).
16px → 12px horizontal on a 375px screen buys 8px per row for the product
name, which is the column that needs it. */
@media (max-width: 480px) {
.woocommerce .woocommerce-order-details table.shop_table th,
.woocommerce .woocommerce-order-details table.shop_table td,
.woocommerce .woocommerce-order-details table.shop_table tfoot th,
.woocommerce .woocommerce-order-details table.shop_table tfoot td {
padding-left: var(--space-12, 12px);
padding-right: var(--space-12, 12px);
}
}
/* "Telli uuesti" — WooCommerce prints ` `
on a completed order. It is a secondary action next to a receipt, so it
gets the secondary shape, not the green one. `.woocommerce .button` is
(0,2,0); `.woocommerce .order-again .button` is (0,3,0). Height 44px =
--tap-min, the pack's S button (D1: "S 44px · tootekaart, tabelirida"). */
.woocommerce .order-again {
margin: var(--space-20, 20px) 0 0;
}
.woocommerce .order-again .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min, 44px);
padding: 0 var(--space-20, 20px);
background: var(--surface, #ffffff);
color: var(--text, #0f172a);
border: 1px solid var(--border-strong, #cbd5e1);
border-radius: var(--radius-12, 12px);
font: var(--label-md, 600 14px/16px "DM Sans", "Segoe UI", sans-serif);
letter-spacing: var(--label-md-tracking, .02em);
}
.woocommerce .order-again .button:hover {
background: var(--brand-a1, rgb(4 120 87 / .06));
border-color: var(--brand-a3, rgb(4 120 87 / .20));
color: var(--brand, #047857);
}
/* ==========================================================================
3 · ADDRESSES ON THE ORDER — customer details
==========================================================================
Markup (WooCommerce order/order-customer-details.php):
section.woocommerce-customer-details
section.woocommerce-columns--addresses.col2-set.addresses
div.woocommerce-column--billing-address.col-1 > h2 + address
div.woocommerce-column--shipping-address.col-2 > h2 + address
Two things are wrong here today and both come from core:
• The columns are FLOATS. `.woocommerce .col2-set .col-1 {float:left;
width:48%}` (0,2,0) — two 48% floats with a 4% river between them and
no equal-height relationship. The theme's grid fix for this shape
(woocommerce.css:1376) is fenced on `:has(.woocommerce-form-register)`,
i.e. the login page only, so it never reaches this one.
• `address` carries core's asymmetric double border:
`border:1px solid rgba(0,0,0,.1); border-bottom-width:2px;
border-right-width:2px; border-radius:5px` (0,2,1) — a 2010 bevel
that appears nowhere else in this shop.
The column rule below is (0,3,0) and beats core's (0,2,0) outright.
The `address` rule is the one honest exception in this file: core's
selector is `.woocommerce .woocommerce-customer-details address`, which is
(0,2,1) — the same shape mine would be. It is therefore written TWICE:
once qualified with the real element (`section.woocommerce-customer-details`
→ (0,2,2), decisive) and once plain (→ (0,2,1), a tie that this file wins on
load order). WooCommerce's order-customer-details.php does emit a
``; the plain selector is the fallback for the day it does not.
Specificity is computed per selector, so the pair genuinely covers both.
Mobile first: one column, stacked. Two columns from 640px, where 2×~300px
is still readable. */
.woocommerce .woocommerce-customer-details {
margin-top: var(--space-32, 32px);
}
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16, 16px);
}
/* Kill the floats. Stated as a pair because core sets left/right separately,
and `width:auto` has to be said too — a floated 48% that stops floating is
still 48% wide. */
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses > .col-1,
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses > .col-2 {
float: none;
width: auto;
}
/* ⚠️ v1.2.102 — the radius here was --radius-12 and it was the odd one out.
The thank-you page stacks four blocks of the SAME width, one under the
other, and three of them already round at 16px: the overview card
(woocommerce.css:1313, --radius-lg → --radius-16), the order table (§2) and
— from this release — the pickup block below. A 12px corner in the middle of
that column is exactly the "two boxes side by side with different corners"
the polish pass exists to remove. 16px is also the token's own role for this
size of box (tokens.css:231 "tootekaart, paneel"); 12px is the button and
form-field step. */
.woocommerce section.woocommerce-customer-details address,
.woocommerce .woocommerce-customer-details address {
padding: var(--space-16, 16px);
background: var(--surface, #ffffff);
border: 1px solid var(--border, #e2e8f0);
border-radius: var(--radius-16, 16px);
font: var(--text-sm, 400 14px/20px "DM Sans", "Segoe UI", sans-serif);
font-style: normal;
color: var(--text-muted, #475569);
}
@media (min-width: 640px) {
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-20, 20px);
}
}
/* The theme's own pickup-point block (inc/pickup-points.php:498 renders it on
`woocommerce_order_details_after_order_table`, i.e. between the table and
the addresses on BOTH the thank-you page and view-order). It has a heading
and a value and no surface of its own; given one, the three sections on
this page read as three sections. Fenced on the theme's class, so it can
only ever match markup this theme emitted. */
.woocommerce .og-pickup-order {
margin-top: var(--space-24, 24px);
padding: var(--space-16, 16px) var(--space-20, 20px);
background: var(--surface-muted, #f1f5f9);
border-radius: var(--radius-16, 16px); /* v1.2.102 — see the note at `address` above. */
}
.woocommerce .og-pickup-order .og-pickup-order__title {
margin: 0 0 var(--space-4, 4px);
font: var(--label-sm, 600 12px/1 "DM Sans", "Segoe UI", sans-serif);
letter-spacing: var(--label-sm-tracking, .06em);
text-transform: uppercase;
color: var(--text-subtle, #64748b);
}
.woocommerce .og-pickup-order .og-pickup-order__value {
margin: 0;
font: var(--text-md, 400 16px/24px "DM Sans", "Segoe UI", sans-serif);
font-weight: var(--fw-semibold, 600);
color: var(--text, #0f172a);
}
/* ==========================================================================
4 · MINU KONTO — THE NAVIGATION
==========================================================================
woocommerce.css:1447-1456 already gives this list a white card with
rounded rows and a green active state, so it is not unstyled. Three real
defects remain, and one of them is a token violation:
a) On a phone the nav is a SEVEN-ROW STACK above the content. At ~45px a
row that is ~315px of chrome before the shopper reaches the thing they
came for. Two columns halves it to four rows / ~180px. The breakpoint
is 900px because that is exactly where woocommerce.css:1331 and :1345
turn the account into a 260px sidebar — one number, two files, so the
grid never disagrees with the column it lives in.
b) The row height is 44px only by accident (12px + 12px padding plus a
1.5 line-height on 14px type). Stated explicitly it survives a type
change. Pack: --tap-min, "iga vajutatav asi ≥ 44×44".
c) woocommerce.css:1454 paints the active row `rgb(4 120 87 / .10)` —
#059669, the green tokens.css:10 says out loud does not exist any more
("#059669 on siit kustutatud"). --brand-a2 is the role for exactly this
("teisese nupu hover, kiip"). The visible difference is small (a
slightly deeper, slightly less blue tint); the point is that the shop
stops carrying two greens.
Specificity: woocommerce.css:1451/1453 are `.woocommerce-MyAccount-navigation
li a` (0,1,2) and `… li.is-active a` (0,2,2). Every rule below is prefixed
with `.woocommerce-account`, giving (0,2,2) and (0,3,2). That body class is
not left to WooCommerce — inc/woocommerce.php:491 force-adds it whenever the
page really is the account, which is why it is safe to lean on here (Trap 9).
Verified present in the live HTML, 2026-08-14. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4, 4px);
}
/* ⚠️ VISIBLE: the label drops from the inherited 16px to --label-md's 14px,
which is the pack's role for a navigational label (D1/D5 use --label-md for
exactly this). It is also what keeps two columns safe at 320px: inside a
~140px cell, "Allalaadimised" measures roughly 106px at 14px semibold and
roughly 121px at 16px — the second wraps to two lines. Those two numbers
are ESTIMATED from character count, not measured (§9); if the label wraps
on a real 320px device the honest fix is one column below 380px, not a
smaller type step. The 44px tap target is stated separately and does not
depend on the type size either way. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
min-height: var(--tap-min, 44px);
padding: var(--space-8, 8px) var(--space-12, 12px);
border-radius: var(--radius-12, 12px);
font: var(--label-md, 600 14px/16px "DM Sans", "Segoe UI", sans-serif);
letter-spacing: var(--label-md-tracking, .02em);
color: var(--text-muted, #475569);
transition: background-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)),
color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1));
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
background: var(--brand-a1, rgb(4 120 87 / .06));
color: var(--brand, #047857);
}
/* The pack's one focus recipe. a11y.css:34-47 already draws a ring on every
focusable element inside `.a11y-ready`; this states the token recipe on the
element that most needs it and is harmless where a11y.css also fires — both
draw a ring in --brand, and the later one wins with the same intent. */
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
outline: none;
box-shadow: var(--focus-ring, 0 0 0 2px #ffffff, 0 0 0 5px #047857);
}
/* ⚠️ `font-weight` is RESTATED here and it is not redundant. woocommerce.css:
1455 gives the active row `font-weight: 700` at (0,2,2) — the same weight as
the `li a` rule above, which carries a `font:` SHORTHAND and therefore resets
font-weight to --label-md's 600. Equal specificity, later source: without
this line the active row would silently lose its bold, and the diff would
only say "added a file". `box-shadow: inset 3px 0 0 var(--green)` from that
same rule is deliberately NOT restated — nothing here touches box-shadow on
this element, so the green edge bar survives untouched. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--brand-a2, rgb(4 120 87 / .12));
color: var(--brand, #047857);
font-weight: var(--fw-bold, 700);
}
/* "Logi välja" is the one destructive-ish row and it is always last. On an
odd-numbered menu it would sit alone in the left column with a hole beside
it; spanning it closes the hole and separates it from the navigation
proper, which is what it is. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--text-subtle, #64748b);
}
@media (min-width: 900px) {
/* Sidebar width — back to one column, the way a sidebar reads, and back to
woocommerce.css:1451's roomier row padding now that there is room. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
grid-template-columns: minmax(0, 1fr);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
padding: var(--space-12, 12px) var(--space-16, 16px);
}
}
/* ==========================================================================
5 · MINU KONTO — CONTENT
========================================================================== */
/* ---- 5a · The lead line --------------------------------------------------
Two account views open with a bare paragraph and nothing else:
dashboard → "Tere NIMI (kas sa ei ole NIMI? Logi välja)"
view-order → "Tellimus #123 esitati 14.08.2026 ja on hetkel Töötlemisel."
Both are the sentence that orients the shopper, and both render at body
size with no distinction from the content under them.
woocommerce.css:1460 already selects exactly this element to zero its top
margin — (0,1,1) — so this rule at (0,2,1) extends an existing hook rather
than inventing one. On endpoints that open with a table or a notice, the
selector simply matches nothing. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
margin: 0 0 var(--space-20, 20px);
font: var(--text-md, 400 16px/24px "DM Sans", "Segoe UI", sans-serif);
color: var(--text-muted, #475569);
}
/* Order notes — ` |
Arve aadress
… an h2. The rule has matched nothing since that template bumped, and the same is true of two more headings nobody gave a size to: form-edit-address.php