// are scoped too, purely for consistency.
*
* Properties Breakdance sets that we do NOT want must be restated explicitly,
* not just left out — e.g. the headings need `letter-spacing: normal`, because
* inheriting -0.02em is what the .bde-h2 rule would otherwise still hand them.
*
* AND THE SAME AGAIN FOR EVERY INTERACTIVE STATE. A pseudo-class counts as a
* class, so Breakdance's
*
* .breakdance a:hover { color; text-decoration-line:underline;
* text-decoration-thickness:1px;
* text-decoration-style:solid;
* text-decoration-color } (0,2,1)
*
* outranks a rest-state fix at (0,2,0) the moment the pointer lands. Fixing the
* rest state alone does not fix the element — it just moves the bug into :hover.
* Any rule here that overrides a Breakdance property on an therefore needs a
* matching :hover / :focus rule at (0,3,0).
*
* TIES ARE LOSSES. We always load first, so a rule only wins with STRICTLY
* greater specificity. Matching Breakdance's number is not enough.
*
* AND THE THREAT IS NOT ONLY IN THE GLOBAL SHEETS. Breakdance also emits a
* per-page stylesheet, and /mein-konto/ is page 220, whose Woopageaccount
* element styles every link inside the account content:
*
* post-220.css
* .breakdance .bde-woopageaccount-220-5 .woocommerce-MyAccount-content
* a:not(.button):hover
* { text-decoration-line:underline; text-underline-offset:2px } (0,5,1)
*
* That is the strongest thing pointed at this markup — far above the (0,2,1) of
* `.breakdance a:hover` — and it is :hover-only, which is exactly why the rest
* states were correct while both anchors underlined on hover. It matches
* `a:not(.button)`, so every classed anchor we emit is in scope. The two state
* rules below therefore run at (0,6,1), through
* `.breakdance` (body class) > `.woocommerce-MyAccount-content` (WooCommerce
* wrapper) > `.pwu-dash`, with the anchor class doubled to clear the tie.
*
* Audited across every Breakdance stylesheet — global-settings.css,
* breakdance-woocommerce.css, all element dependencies and all post-*.css — for
* :hover / :focus / :focus-visible / :active rules whose subject can be one of
* our anchors. The post-220 rule above and `.breakdance a:hover` are the only
* two; there are no :focus, :focus-visible, :active or :visited rules anywhere,
* and `…MyAccount-content a:not([class]):hover` skips us because our anchors are
* classed. Headings, paragraphs, lists and images have no state rules at all, so
* their rest-state (0,2,0) fixes need no state twin. (:focus-visible is included
* in the resets anyway, so keyboard users match the pointer.)
*
* Two near-misses that are safe today but worth knowing about:
* - .breakdance-woocommerce .woocommerce-MyAccount-content p:not([class])
* and the matching a:not([class]) rule skip us because every element we
* emit carries a class. Keep it that way.
* - .breakdance-woocommerce .woocommerce-notices-wrapper + h2 { display:none }
* would hide "Letzte Bestellung" if it were ever the notice wrapper's
* adjacent sibling. The .pwu-dash wrapper is what sits there instead, so
* do not flatten it away.
* ---------------------------------------------------------------------- */
.pwu-dash {
display: flex;
flex-direction: column;
/* Figma "Main Content" column gap. */
gap: 32px;
}
.pwu-dash .pwu-dash__section {
display: flex;
flex-direction: column;
gap: 16px;
}
/* a) Greeting -------------------------------------------------------- */
.pwu-dash .pwu-dash__greeting {
display: flex;
flex-direction: column;
gap: 8px;
}
.pwu-dash .pwu-dash__welcome {
margin: 0;
color: var(--pwu-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.pwu-dash .pwu-dash__lede,
.pwu-dash .pwu-dash__empty {
margin: 0;
color: var(--pwu-ink-faint);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
/* Section headings ---------------------------------------------------- */
/*
* Section headings carry their own hairline underneath, as a border on the
* heading itself. This is now the ONLY hairline in the component.
*
* The wireframe also drew a free-floating full-width rule above each heading.
* Rendered, that stacked four hairlines into 305px — each heading bracketed
* between two lines 64px apart — which read as banding and made the headings
* look boxed rather than labelling the content beneath them. The
s are gone; * the attached underline says the same thing more precisely, because it is tied * to its heading, and the 32px .pwu-dash gap carries the section separation on * its own. Two lines instead of four. * * BOTH headings get it. The wireframe underlines "Letzte Bestellung" only, which * at its 40px display size read as part of that heading's weight; at the * corrected 14px the labels are identical in size and an underline on one but * not the other reads as an oversight. Symmetry wins — if it is ever dropped, * drop it from BOTH, never re-split them. * * These ares, so this rule is competing with
* .bde-h2, .breakdance h2 { font-size:40px; line-height:1.05;
* letter-spacing:-0.02em }
* at (0,1,1) — plus its 32px and 26px media-query variants. Scoping through
* .pwu-dash makes this (0,2,0), which wins at every breakpoint, because a media
* query adds no specificity. letter-spacing has to be reset by hand: leaving it
* unset would inherit Breakdance's display-heading -0.02em onto a 14px label.
*
* The intended hierarchy is greeting (16px) ABOVE section heading (14px) — if a
* heading ever renders larger than the greeting again, this rule has been
* out-specified.
*/
.pwu-dash .pwu-dash__heading {
margin: 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--pwu-line);
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
letter-spacing: normal;
}
/* Links --------------------------------------------------------------- */
/*
* Competing with .breakdance a (0,1,1), which sets colour, an underline, a 1px
* decoration thickness and text-underline-offset:3px. We want the underline —
* these are the wireframe's underlined text links — but we want our own offset
* and our own hover colour, so the whole declaration block has to outrank it.
*/
.pwu-dash .pwu-dash__link {
color: var(--pwu-ink);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
text-decoration: underline;
text-underline-offset: 0.2em;
}
/*
* (0,6,1) — see the header note. Has to clear post-220.css's (0,5,1)
* `…MyAccount-content a:not(.button):hover`, which would otherwise force
* text-underline-offset:2px here, and .breakdance a:hover (0,2,1), which would
* hand the underline its own text-decoration-color (Accent #666666) while the
* text took ours (Ink Soft #595959) — label and underline in two colours.
* Restating the `underline` shorthand resets thickness/style/color to
* auto/solid/currentcolor, which is what keeps them in step.
*/
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:hover,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:focus,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:focus-visible {
color: var(--pwu-ink-soft);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.pwu-dash .pwu-dash__more {
margin: 0;
}
/* Arrow must never wrap away from the label it belongs to. */
.pwu-dash .pwu-dash__arrow {
white-space: nowrap;
}
/*
* Same treatment the sidebar item gets (section 7), applied to the one
* dashboard link that also leaves the account area.
*/
.pwu-dash .pwu-dash__link .pwu-external-icon {
width: 0.95em;
height: 0.95em;
margin-inline-start: 0.3em;
flex: 0 0 auto;
vertical-align: -0.12em;
color: var(--pwu-ink-faint);
transition: color 0.15s ease;
}
.pwu-dash .pwu-dash__link:hover .pwu-external-icon,
.pwu-dash .pwu-dash__link:focus .pwu-external-icon {
color: inherit;
}
/* b) Letzte Bestellung ------------------------------------------------ */
.pwu-dash .pwu-dash-order {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px 24px;
padding: 4px 0;
}
.pwu-dash .pwu-dash-order__main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pwu-dash .pwu-dash-order__number {
margin: 0;
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}
.pwu-dash .pwu-dash-order__meta {
margin: 0;
color: var(--pwu-ink-faint);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.pwu-dash .pwu-dash-order__actions {
margin: 4px 0 0;
}
.pwu-dash .pwu-dash-order__actions .pwu-dash__link {
font-size: 12px;
}
/* Total sits hard right and never wraps mid-amount. */
.pwu-dash .pwu-dash-order__total {
margin: 0;
margin-inline-start: auto;
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
/* c) Ihre Lieblinge --------------------------------------------------- */
/*
* The tiles fill the content column. The wireframe's 96px tile was measured
* against a 524px column that does not exist here — the live account column is
* ~854px at 1440, so a 432px cap left the row huddled in the left third. The cap
* is gone; four tiles now span the column and the thumbnail simply grows, since
* the 4/5 ratio is a ratio and not a fixed box.
*
* ONE INTRINSIC EXPRESSION, NO BREAKPOINTS. The account column is not the
* viewport — it sits beside a 25% nav until 767px and goes full width below
* that, and it will change again if the nav is ever restructured. So the track
* size is derived from the container, not from assumed viewport sizes:
*
* minmax( min(100%, max(FLOOR, (100% - 3 * GAP) / 4)), 1fr )
*
* - Wide column: (100% - 3*GAP)/4 is the larger term, so the minimum IS the
* exact quarter-column width. Four tracks fit and fill it; a fifth can never
* fit, because 5 * (100%-48px)/4 + 4*GAP always exceeds 100%. That is what
* caps the row at four without a max-width or a media query.
* - Narrow column: FLOOR takes over and the row wraps on its own — 4 -> 3 -> 2
* -> 1 as the column shrinks past each threshold.
* - min(100%, ...) is the standard guard so a container narrower than FLOOR
* cannot overflow.
*
* FLOOR is 140px, chosen so the phone case lands on 2-up with room to spare:
* two tracks need 2*140 + 16 = 296px and the column is ~343px at a 375px
* viewport. Thresholds, in column width: 4-up >= 608px, 3-up 452-607px,
* 2-up 296-451px, 1-up below that.
*
* auto-fill, NOT auto-fit — this is the whole reason 1, 2 and 3 items still look
* right. auto-fit COLLAPSES the empty tracks, so two items in an 854px column
* would stretch to 419px each and dwarf everything around them. auto-fill KEEPS
* the empty tracks, so every item renders at the same ~201px it would have had
* in a full row of four, and a short list simply leaves the remaining slots
* blank.
*/
.pwu-dash .pwu-dash-favs {
--pwu-fav-gap: 16px;
/* Smallest a tile may shrink to before the row wraps. */
--pwu-fav-floor: 140px;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(
min(
100%,
max(var(--pwu-fav-floor), (100% - var(--pwu-fav-gap) * 3) / 4)
),
1fr
)
);
gap: var(--pwu-fav-gap);
margin: 0;
padding: 0;
list-style: none;
}
.pwu-dash .pwu-dash-favs__item {
margin: 0;
list-style: none;
}
/* Beats .breakdance a's underline (0,1,1) — tiles are not text links. */
.pwu-dash .pwu-dash-fav {
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
}
/*
* The state half of the rule above, at (0,6,1) — see the header note. It has to
* clear post-220.css's (0,5,1) `…MyAccount-content a:not(.button):hover`, which
* is what was underlining these tiles on hover.
*
* This is load-bearing, not belt-and-braces: text-decoration paints THROUGH
* descendants, and a descendant cannot switch off a decoration its ancestor
* draws. So an underline on this underlines the brand line and the product
* name together, and the `:hover .pwu-dash-fav__name` rule below is powerless
* against it — the brand line computed `none` and still rendered underlined.
* Resetting it here, on the anchor, is the only place the fix works, and it is
* what makes the name-only underline possible at all.
*/
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:hover,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:focus,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:focus-visible {
text-decoration: none;
}
.pwu-dash .pwu-dash-fav__thumb {
display: block;
overflow: hidden;
background-color: var(--pwu-canvas);
/*
* The wireframe's 96x120 box as a ratio, so the tile scales with its grid
* column — which is now the whole point, since the column is fluid and the
* rendered thumbnail is ~201px wide at 1440, not 96px. The box follows the
* track; only the proportion is fixed.
*
* Written as unitless numbers ON PURPOSE: aspect-ratio takes
*
s are gone; * the attached underline says the same thing more precisely, because it is tied * to its heading, and the 32px .pwu-dash gap carries the section separation on * its own. Two lines instead of four. * * BOTH headings get it. The wireframe underlines "Letzte Bestellung" only, which * at its 40px display size read as part of that heading's weight; at the * corrected 14px the labels are identical in size and an underline on one but * not the other reads as an oversight. Symmetry wins — if it is ever dropped, * drop it from BOTH, never re-split them. * * These are
s, so this rule is competing with
* .bde-h2, .breakdance h2 { font-size:40px; line-height:1.05;
* letter-spacing:-0.02em }
* at (0,1,1) — plus its 32px and 26px media-query variants. Scoping through
* .pwu-dash makes this (0,2,0), which wins at every breakpoint, because a media
* query adds no specificity. letter-spacing has to be reset by hand: leaving it
* unset would inherit Breakdance's display-heading -0.02em onto a 14px label.
*
* The intended hierarchy is greeting (16px) ABOVE section heading (14px) — if a
* heading ever renders larger than the greeting again, this rule has been
* out-specified.
*/
.pwu-dash .pwu-dash__heading {
margin: 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--pwu-line);
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
letter-spacing: normal;
}
/* Links --------------------------------------------------------------- */
/*
* Competing with .breakdance a (0,1,1), which sets colour, an underline, a 1px
* decoration thickness and text-underline-offset:3px. We want the underline —
* these are the wireframe's underlined text links — but we want our own offset
* and our own hover colour, so the whole declaration block has to outrank it.
*/
.pwu-dash .pwu-dash__link {
color: var(--pwu-ink);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
text-decoration: underline;
text-underline-offset: 0.2em;
}
/*
* (0,6,1) — see the header note. Has to clear post-220.css's (0,5,1)
* `…MyAccount-content a:not(.button):hover`, which would otherwise force
* text-underline-offset:2px here, and .breakdance a:hover (0,2,1), which would
* hand the underline its own text-decoration-color (Accent #666666) while the
* text took ours (Ink Soft #595959) — label and underline in two colours.
* Restating the `underline` shorthand resets thickness/style/color to
* auto/solid/currentcolor, which is what keeps them in step.
*/
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:hover,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:focus,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash__link.pwu-dash__link:focus-visible {
color: var(--pwu-ink-soft);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.pwu-dash .pwu-dash__more {
margin: 0;
}
/* Arrow must never wrap away from the label it belongs to. */
.pwu-dash .pwu-dash__arrow {
white-space: nowrap;
}
/*
* Same treatment the sidebar item gets (section 7), applied to the one
* dashboard link that also leaves the account area.
*/
.pwu-dash .pwu-dash__link .pwu-external-icon {
width: 0.95em;
height: 0.95em;
margin-inline-start: 0.3em;
flex: 0 0 auto;
vertical-align: -0.12em;
color: var(--pwu-ink-faint);
transition: color 0.15s ease;
}
.pwu-dash .pwu-dash__link:hover .pwu-external-icon,
.pwu-dash .pwu-dash__link:focus .pwu-external-icon {
color: inherit;
}
/* b) Letzte Bestellung ------------------------------------------------ */
.pwu-dash .pwu-dash-order {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px 24px;
padding: 4px 0;
}
.pwu-dash .pwu-dash-order__main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pwu-dash .pwu-dash-order__number {
margin: 0;
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}
.pwu-dash .pwu-dash-order__meta {
margin: 0;
color: var(--pwu-ink-faint);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.pwu-dash .pwu-dash-order__actions {
margin: 4px 0 0;
}
.pwu-dash .pwu-dash-order__actions .pwu-dash__link {
font-size: 12px;
}
/* Total sits hard right and never wraps mid-amount. */
.pwu-dash .pwu-dash-order__total {
margin: 0;
margin-inline-start: auto;
color: var(--pwu-ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
/* c) Ihre Lieblinge --------------------------------------------------- */
/*
* The tiles fill the content column. The wireframe's 96px tile was measured
* against a 524px column that does not exist here — the live account column is
* ~854px at 1440, so a 432px cap left the row huddled in the left third. The cap
* is gone; four tiles now span the column and the thumbnail simply grows, since
* the 4/5 ratio is a ratio and not a fixed box.
*
* ONE INTRINSIC EXPRESSION, NO BREAKPOINTS. The account column is not the
* viewport — it sits beside a 25% nav until 767px and goes full width below
* that, and it will change again if the nav is ever restructured. So the track
* size is derived from the container, not from assumed viewport sizes:
*
* minmax( min(100%, max(FLOOR, (100% - 3 * GAP) / 4)), 1fr )
*
* - Wide column: (100% - 3*GAP)/4 is the larger term, so the minimum IS the
* exact quarter-column width. Four tracks fit and fill it; a fifth can never
* fit, because 5 * (100%-48px)/4 + 4*GAP always exceeds 100%. That is what
* caps the row at four without a max-width or a media query.
* - Narrow column: FLOOR takes over and the row wraps on its own — 4 -> 3 -> 2
* -> 1 as the column shrinks past each threshold.
* - min(100%, ...) is the standard guard so a container narrower than FLOOR
* cannot overflow.
*
* FLOOR is 140px, chosen so the phone case lands on 2-up with room to spare:
* two tracks need 2*140 + 16 = 296px and the column is ~343px at a 375px
* viewport. Thresholds, in column width: 4-up >= 608px, 3-up 452-607px,
* 2-up 296-451px, 1-up below that.
*
* auto-fill, NOT auto-fit — this is the whole reason 1, 2 and 3 items still look
* right. auto-fit COLLAPSES the empty tracks, so two items in an 854px column
* would stretch to 419px each and dwarf everything around them. auto-fill KEEPS
* the empty tracks, so every item renders at the same ~201px it would have had
* in a full row of four, and a short list simply leaves the remaining slots
* blank.
*/
.pwu-dash .pwu-dash-favs {
--pwu-fav-gap: 16px;
/* Smallest a tile may shrink to before the row wraps. */
--pwu-fav-floor: 140px;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(
min(
100%,
max(var(--pwu-fav-floor), (100% - var(--pwu-fav-gap) * 3) / 4)
),
1fr
)
);
gap: var(--pwu-fav-gap);
margin: 0;
padding: 0;
list-style: none;
}
.pwu-dash .pwu-dash-favs__item {
margin: 0;
list-style: none;
}
/* Beats .breakdance a's underline (0,1,1) — tiles are not text links. */
.pwu-dash .pwu-dash-fav {
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
}
/*
* The state half of the rule above, at (0,6,1) — see the header note. It has to
* clear post-220.css's (0,5,1) `…MyAccount-content a:not(.button):hover`, which
* is what was underlining these tiles on hover.
*
* This is load-bearing, not belt-and-braces: text-decoration paints THROUGH
* descendants, and a descendant cannot switch off a decoration its ancestor
* draws. So an underline on this underlines the brand line and the product
* name together, and the `:hover .pwu-dash-fav__name` rule below is powerless
* against it — the brand line computed `none` and still rendered underlined.
* Resetting it here, on the anchor, is the only place the fix works, and it is
* what makes the name-only underline possible at all.
*/
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:hover,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:focus,
.breakdance .woocommerce-MyAccount-content .pwu-dash a.pwu-dash-fav.pwu-dash-fav:focus-visible {
text-decoration: none;
}
.pwu-dash .pwu-dash-fav__thumb {
display: block;
overflow: hidden;
background-color: var(--pwu-canvas);
/*
* The wireframe's 96x120 box as a ratio, so the tile scales with its grid
* column — which is now the whole point, since the column is fluid and the
* rendered thumbnail is ~201px wide at 1440, not 96px. The box follows the
* track; only the proportion is fixed.
*
* Written as unitless numbers ON PURPOSE: aspect-ratio takes
* / , so the obvious-looking
* aspect-ratio: var(--pwu-thumb-w) / var(--pwu-thumb-h)
* expands to `96px / 120px`, which is invalid and gets dropped at parse time
* — silently, with no fallback. That is what previously left these tiles
* square: with no ratio the span collapsed onto the image's own height, and
* the images here are 300x300 woocommerce_thumbnail crops.
*
* 4 / 5 === 96 / 120. Keep the two in sync if --pwu-thumb-* ever change.
*/
aspect-ratio: 4 / 5;
}
/*
* .breakdance img { max-width:100%; height:auto } is (0,1,1) and loads after us,
* so an unscoped `.pwu-dash-fav__thumb img` (also (0,1,1)) LOST the height and
* the image sized itself intrinsically. (0,2,1) here settles it, and height:100%
* + object-fit:cover is what actually performs the portrait crop.
*/
.pwu-dash .pwu-dash-fav__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* Wireframe has 10px / 11px, sized against its 96px tile. The tile is now ~201px
* at 1440 — more than double — so the caption was reading as undersized beneath
* it. Stepped up to 12px / 13px.
*
* 12px is not arbitrary: it is exactly the floor this project keeps for
* uppercase, letter-spaced text, and it puts the brand line on the same size as
* .pwu-brand in the cart, so the two surfaces agree. It is also still legible at
* the other end of the range — at the 140px floor the longest brand on the site
* ("FRIENDLY HUNTING") measures ~115px and fits on one line.
*/
.pwu-dash .pwu-dash-fav__brand {
color: var(--pwu-ink);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/*
* Product names in this catalogue are not the wireframe's tidy "Waxed Jacket" —
* several are full sentences imported from the supplier feed. Clamped to two
* lines so one long name cannot push its tile taller than the other three.
*/
.pwu-dash .pwu-dash-fav__name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
color: var(--pwu-ink-soft);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
/*
* The underline is now a real hover affordance rather than a no-op: the tile
* itself is text-decoration:none at rest, so this is the only underline in the
* component and the state change is visible.
*/
.pwu-dash .pwu-dash-fav:hover .pwu-dash-fav__name,
.pwu-dash .pwu-dash-fav:focus .pwu-dash-fav__name {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* -------------------------------------------------------------------------
* 11. Checkout — coupon affordance
*
* Two upstream problems, both purely presentational:
*
* a) breakdance-woocommerce.css sets
* `.breakdance-woocommerce .woocommerce-info a { text-transform: capitalize }`
* at (0,2,1). The German source string is already correct sentence case —
* the broken title-casing („Klicken Sie Hier, Um Ihren Code Einzugeben")
* is that rule landing on a full German sentence. Undone here for the
* coupon toggle only; every other info-notice link keeps its treatment.
*
* b) The same stylesheet puts .woocommerce-form-coupon in its "Wrappers"
* group — white fill, 1px border, 24px padding — so an optional one-field
* affordance renders as a full card. It also sets flex-grow: 1 on
* p.form-row-first, implying the form was meant to be a flex row, but
* nothing ever declares the flex. And because woocommerce.css is not
* enqueued on this site, Woo's own .form-row-first/last floats never load
* either — so the two rows simply stack at full width.
*
* Every selector below carries one class more than the rule it overrides: this
* stylesheet loads before both breakdance-woocommerce.css and the generated
* global-settings.css, so a tie is a loss. No !important anywhere.
* ---------------------------------------------------------------------- */
/*
* The toggle is an optional affordance, not an alert. Strip the notice
* furniture — band, box, state rule, icon — and leave a quiet link. Scoped to
* .pwu-coupon-toggle, which only our forked template emits, so the site-wide
* notice system is untouched everywhere else.
*
* width: auto because Breakdance sets width: 100% on the info family; with
* border-box that would make any horizontal margin inert.
*
* (0,3,0) — beats both Breakdance's and the global custom CSS's (0,2,0).
*/
.breakdance-woocommerce .pwu-coupon-toggle .woocommerce-info,
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info {
width: auto;
margin: 0 0 16px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--pwu-ink-soft);
font-size: 14px;
font-weight: 400;
}
/* (0,3,1) — beats the icon rule at (0,2,1). */
.breakdance-woocommerce .pwu-coupon-toggle .woocommerce-info::before,
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info::before {
content: none;
}
/* (0,3,1) — the capitalize fix. */
.breakdance-woocommerce .pwu-coupon-toggle .woocommerce-info a,
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info a {
text-transform: none;
color: var(--pwu-ink-soft);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* (0,4,1) — :hover counts in the class column. Darkens to Ink, never Accent. */
.breakdance-woocommerce .pwu-coupon-toggle .woocommerce-info a:hover,
.breakdance-woocommerce .pwu-coupon-toggle .woocommerce-info a:focus,
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info a:hover,
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info a:focus {
color: var(--pwu-ink);
}
/*
* The form itself: no card. It is left as a plain block so the inline display
* that checkout.js toggles is never contested — the row layout lives on an
* inner wrapper instead (see templates/woocommerce/checkout/form-coupon.php).
*
* (0,3,0) — beats the "Wrappers" card rule at (0,2,0).
*/
.breakdance-woocommerce .pwu-coupon.woocommerce-form-coupon {
max-width: 420px;
margin: 0 0 24px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
/* Input and button on one row; align-items: stretch equalises their heights. */
.pwu-coupon__row {
display: flex;
align-items: stretch;
gap: 8px;
}
.pwu-coupon__row .form-row {
margin: 0;
padding: 0;
}
/* min-width: 0 so the field may shrink below its intrinsic width inside flex. */
.pwu-coupon__field {
flex: 1 1 auto;
min-width: 0;
}
.pwu-coupon__action {
flex: 0 0 auto;
}
/*
* The input needs no metrics of its own: .input-text is already in Breakdance's
* input selector list, so it inherits exactly the same fill, border, radius,
* type size and 12px/16px padding as every other field on the site.
*/
.pwu-coupon__field .input-text {
width: 100%;
}
/*
* The apply button is already secondary/outline — button[name="apply_coupon"]
* is in Breakdance's secondary list. Only the horizontal padding is trimmed
* from 32px so the pair fits one row; size, tracking, uppercasing and every
* colour (including hover) still come from the design tokens.
*
* (0,3,1) — beats the generated button rule at (0,2,1).
*/
.breakdance-woocommerce .pwu-coupon__action button[name="apply_coupon"] {
width: 100%;
padding-right: 20px;
padding-left: 20px;
}
/*
* Invalid-coupon state.
*
* WooCommerce 10.9 no longer raises a .woocommerce-error for a bad checkout
* coupon. checkout.js calls show_coupon_error( response, $coupon_field.parent() )
* and appends an inline INSIDE
* the field's , flagging the input with .has-error / aria-invalid. So the
* site's global .woocommerce-error rule never matches it, and the message
* rendered as unstyled 16px body text.
*
* It also broke the layout. Breakdance gives BOTH controls their height from
* their stretched parent:
*
* .breakdance-woocommerce .woocommerce-form-coupon .input-text { height: 100% }
* .breakdance-woocommerce .woocommerce-form-coupon p.form-row button[name=apply_coupon]
* { height: 100% }
*
* which is exactly what makes them agree at 46px under align-items: stretch —
* but it also means the error growing the field
drags the row, and both
* controls inflated to 150.6px and overran the "Rechnungsdaten" heading.
*
* Rather than give up the stretch that keeps them matched, the row opts out of
* it only while an error is present. :has() carries the specificity of its
* argument, so this is (0,2,0) and beats the base rule in this same file.
*
* KNOWN DEPENDENCY: this fix requires :has() — Chrome 105+, Safari 15.4+,
* Firefox 121+. On anything older the rule is dropped and the invalid-coupon
* state regresses to the old behaviour (the row inflating with the message).
* Accepted deliberately rather than carrying a JS fallback; revisit only if
* analytics ever show meaningful pre-2024 browser traffic.
*/
.pwu-coupon__row:has(.coupon-error-notice) {
align-items: flex-start;
}
/*
* With the row no longer stretching, each
is content-height, so the
* inherited height: 100% resolves against an auto-height parent. Pinned to auto
* explicitly so the controls keep their natural size rather than depending on
* that resolution.
*
* Both selectors are (0,5,1). The button's rule is the demanding one —
* `.breakdance-woocommerce .woocommerce-form-coupon p.form-row button[name=apply_coupon]`
* is (0,4,2), so a (0,4,1) selector would LOSE on the element column; the extra
* .pwu-coupon class is what carries it.
*/
.breakdance-woocommerce .pwu-coupon .pwu-coupon__row:has(.coupon-error-notice) .input-text,
.breakdance-woocommerce .pwu-coupon .pwu-coupon__row:has(.coupon-error-notice) button[name="apply_coupon"] {
height: auto;
}
/*
* The message itself, in the site's error idiom: Sale text on Canvas with the
* 4px Sale left rule the global notice system uses for errors. No icon — this
* is a field-level message, not a page notice. All palette tokens.
*
* (0,3,0) — nothing else targets this class, but scoped anyway.
*/
.breakdance-woocommerce .pwu-coupon__field .coupon-error-notice {
display: block;
width: 100%;
margin: 8px 0 0;
padding: 12px 16px;
border-left: 4px solid var(--pwu-sale);
background: var(--pwu-canvas);
color: var(--pwu-sale);
font-size: 15px;
line-height: 1.5;
}
/* checkout.js flags the field itself — echo the error colour on its border.
(0,4,0) — beats Breakdance's input :focus rule at (0,3,0). */
.breakdance-woocommerce .pwu-coupon__field .input-text.has-error {
border-color: var(--pwu-sale);
}
/* Below 480px the pair no longer fits side by side — stack it. */
@media (max-width: 479px) {
/*
* width: 100% belongs on the ROW, not just its children. The row is itself
* a flex item of form.checkout_coupon (Breakdance makes that form a flex
* container), so at flex: 0 1 auto it shrink-wraps to the input's intrinsic
* width and left the controls 150px narrower than the billing fields at
* 479px. Sizing the children alone cannot fix that — they were already
* filling a row that was too narrow.
*/
.pwu-coupon__row {
flex-direction: column;
width: 100%;
}
.pwu-coupon__field,
.pwu-coupon__action {
flex: 0 0 auto;
width: 100%;
}
}
/*
* Bind the two toggles as a pair.
*
* div.woocommerce is a flex column with gap: var(--bde-woo-base-large-gaps)
* (32px), and our own 16px margin on the notice sat inside the login wrapper —
* 48px between the two lines of text, loose enough that they read as unrelated.
*
* The parent gap is left alone (it also spaces the coupon toggle from the
* checkout form below, which is correct): the login toggle drops its own margin
* and pulls 8px back, giving ~24px text to text.
*/
.breakdance-woocommerce .pwu-login-toggle .woocommerce-info {
margin-bottom: 0;
}
.breakdance-woocommerce .pwu-login-toggle {
margin-bottom: -8px;
}
/* -------------------------------------------------------------------------
* 12. Checkout — order review totals
*
* The shipping options rendered as UPPERCASE WITH 0.08em TRACKING because the
* site's global form-label token in the generated global-settings.css is:
*
* .breakdance-form-field__label, …, .breakdance-woocommerce label {
* font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase }
*
* at (0,1,1). That token is correct for the billing field labels — VORNAME,
* E-MAIL-ADRESSE — so it is deliberately NOT changed. Shipping methods are
*
, flagging the input with .has-error / aria-invalid. So the * site's global .woocommerce-error rule never matches it, and the message * rendered as unstyled 16px body text. * * It also broke the layout. Breakdance gives BOTH controls their height from * their stretched parent: * * .breakdance-woocommerce .woocommerce-form-coupon .input-text { height: 100% } * .breakdance-woocommerce .woocommerce-form-coupon p.form-row button[name=apply_coupon] * { height: 100% } * * which is exactly what makes them agree at 46px under align-items: stretch — * but it also means the error growing the field
drags the row, and both * controls inflated to 150.6px and overran the "Rechnungsdaten" heading. * * Rather than give up the stretch that keeps them matched, the row opts out of * it only while an error is present. :has() carries the specificity of its * argument, so this is (0,2,0) and beats the base rule in this same file. * * KNOWN DEPENDENCY: this fix requires :has() — Chrome 105+, Safari 15.4+, * Firefox 121+. On anything older the rule is dropped and the invalid-coupon * state regresses to the old behaviour (the row inflating with the message). * Accepted deliberately rather than carrying a JS fallback; revisit only if * analytics ever show meaningful pre-2024 browser traffic. */ .pwu-coupon__row:has(.coupon-error-notice) { align-items: flex-start; } /* * With the row no longer stretching, each
is content-height, so the * inherited height: 100% resolves against an auto-height parent. Pinned to auto * explicitly so the controls keep their natural size rather than depending on * that resolution. * * Both selectors are (0,5,1). The button's rule is the demanding one — * `.breakdance-woocommerce .woocommerce-form-coupon p.form-row button[name=apply_coupon]` * is (0,4,2), so a (0,4,1) selector would LOSE on the element column; the extra * .pwu-coupon class is what carries it. */ .breakdance-woocommerce .pwu-coupon .pwu-coupon__row:has(.coupon-error-notice) .input-text, .breakdance-woocommerce .pwu-coupon .pwu-coupon__row:has(.coupon-error-notice) button[name="apply_coupon"] { height: auto; } /* * The message itself, in the site's error idiom: Sale text on Canvas with the * 4px Sale left rule the global notice system uses for errors. No icon — this * is a field-level message, not a page notice. All palette tokens. * * (0,3,0) — nothing else targets this class, but scoped anyway. */ .breakdance-woocommerce .pwu-coupon__field .coupon-error-notice { display: block; width: 100%; margin: 8px 0 0; padding: 12px 16px; border-left: 4px solid var(--pwu-sale); background: var(--pwu-canvas); color: var(--pwu-sale); font-size: 15px; line-height: 1.5; } /* checkout.js flags the field itself — echo the error colour on its border. (0,4,0) — beats Breakdance's input :focus rule at (0,3,0). */ .breakdance-woocommerce .pwu-coupon__field .input-text.has-error { border-color: var(--pwu-sale); } /* Below 480px the pair no longer fits side by side — stack it. */ @media (max-width: 479px) { /* * width: 100% belongs on the ROW, not just its children. The row is itself * a flex item of form.checkout_coupon (Breakdance makes that form a flex * container), so at flex: 0 1 auto it shrink-wraps to the input's intrinsic * width and left the controls 150px narrower than the billing fields at * 479px. Sizing the children alone cannot fix that — they were already * filling a row that was too narrow. */ .pwu-coupon__row { flex-direction: column; width: 100%; } .pwu-coupon__field, .pwu-coupon__action { flex: 0 0 auto; width: 100%; } } /* * Bind the two toggles as a pair. * * div.woocommerce is a flex column with gap: var(--bde-woo-base-large-gaps) * (32px), and our own 16px margin on the notice sat inside the login wrapper — * 48px between the two lines of text, loose enough that they read as unrelated. * * The parent gap is left alone (it also spaces the coupon toggle from the * checkout form below, which is correct): the login toggle drops its own margin * and pulls 8px back, giving ~24px text to text. */ .breakdance-woocommerce .pwu-login-toggle .woocommerce-info { margin-bottom: 0; } .breakdance-woocommerce .pwu-login-toggle { margin-bottom: -8px; } /* ------------------------------------------------------------------------- * 12. Checkout — order review totals * * The shipping options rendered as UPPERCASE WITH 0.08em TRACKING because the * site's global form-label token in the generated global-settings.css is: * * .breakdance-form-field__label, …, .breakdance-woocommerce label { * font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase } * * at (0,1,1). That token is correct for the billing field labels — VORNAME, * E-MAIL-ADRESSE — so it is deliberately NOT changed. Shipping methods are *