` now (see §13): its own open state
is the mechanism, so a `max-height` reveal would only clip it. The rules are
removed rather than left inert because a leftover `max-height: 0` on a
`
` hides the summary too — and the summary is the whole affordance.
Skins carrying their own copy of the old reveal must drop it; §13 defends
against that with `!important` until they do (variant-a.css:3186 / 3228). */
body.sst-co-ab .sst-pm__details-inner {
padding-top: 4px;
}
body.sst-co-ab .sst-pm__details-text p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------------ *
* 6. Consent card + custom checkbox.
* ------------------------------------------------------------------ */
body.sst-co-ab .sst-consent {
border: 1px solid var( --co-rule );
border-radius: var( --co-radius );
background: var( --co-card );
padding: var( --co-card-pad );
}
body.sst-co-ab .sst-consent__title {
margin: 0 0 12px;
}
body.sst-co-ab .sst-consent__error[hidden] {
display: none;
}
body.sst-co-ab .sst-consent__boxes > .form-row,
body.sst-co-ab .sst-consent .sst-check {
margin: 0 0 12px;
padding: 0;
}
/* Our terms checkbox: native input hidden behind a drawn box. Only inputs that
carry `.sst-check__input` are hidden — a mu-plugin checkbox without the
`.sst-check__box` sibling must never lose its own control. */
body.sst-co-ab .sst-check__label,
body.sst-co-ab .sst-consent .form-row label.checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
cursor: pointer;
}
body.sst-co-ab .sst-check__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
pointer-events: none;
}
body.sst-co-ab .sst-check__box {
flex: 0 0 auto;
width: var( --co-check-size );
height: var( --co-check-size );
margin-top: 1px;
border: 1.5px solid var( --co-rule );
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
background: var( --co-card );
transition: background-color var( --co-motion ) ease, border-color var( --co-motion ) ease, color var( --co-motion ) ease;
}
body.sst-co-ab .sst-check__input:checked ~ .sst-check__box {
background: var( --co-primary );
border-color: var( --co-primary );
color: var( --co-primary-ink );
}
body.sst-co-ab .sst-check__input:focus-visible ~ .sst-check__box,
body.sst-co-ab .sst-check__input:focus ~ .sst-check__box {
outline: 2px solid var( --co-primary );
outline-offset: 2px;
}
body.sst-co-ab .sst-check__text {
flex: 1 1 auto;
min-width: 0;
}
/* Consent checkboxes printed by the mu-plugins keep their native control; only
its size and accent are normalised so the card reads as one set. */
body.sst-co-ab .sst-consent .form-row input[ type="checkbox" ]:not( .sst-check__input ) {
flex: 0 0 auto;
width: var( --co-check-size );
height: var( --co-check-size );
margin: 1px 0 0;
accent-color: var( --co-primary );
}
body.sst-co-ab .sst-check--flash {
animation: sst-co-flash 900ms ease-in-out 2;
border-radius: 8px;
}
@keyframes sst-co-flash {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 0 3px var( --co-primary ); }
}
/* ------------------------------------------------------------------ *
* 7. Pay button spans.
* ------------------------------------------------------------------ */
body.sst-co-ab .place-order {
margin: 16px 0 0;
padding: 0;
}
body.sst-co-ab #place_order .sst-pay,
body.sst-co-ab .sst-co-bar__btn .sst-pay {
display: inline-flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
}
/* The sentence is split at its placeholders, so the spacing lives inside the
translated string — `pre-wrap` is what preserves it. */
body.sst-co-ab .sst-pay__label,
body.sst-co-ab .sst-pay__with {
white-space: pre-wrap;
}
body.sst-co-ab .sst-pay__amount {
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------------ *
* 8. Fixed bottom bar (JS-built, appended to ).
* ------------------------------------------------------------------ */
body.sst-co-ab .sst-co-bar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
padding: 10px 14px;
padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
background: var( --co-card );
border-top: 1px solid var( --co-rule );
}
@media ( max-width: 1023px ) {
body.sst-co-ab .sst-co-bar:not( [hidden] ) {
display: block;
}
}
body.sst-co-ab .sst-co-bar__inner {
display: flex;
align-items: center;
gap: 12px;
max-width: var( --co-max, 1200px );
margin: 0 auto;
}
body.sst-co-ab .sst-co-bar__total {
flex: 0 0 auto;
display: flex;
flex-direction: column;
line-height: 1.2;
}
body.sst-co-ab .sst-co-bar__btn {
flex: 1 1 auto;
min-width: 0;
min-height: 52px;
}
/* ------------------------------------------------------------------ *
* 9. Reduced motion.
* ------------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
body.sst-co-ab .sst-pm,
body.sst-co-ab .sst-pm__check,
body.sst-co-ab .sst-pm__details,
body.sst-co-ab .sst-check__box,
body.sst-co-ab .sst-co-strip__chev {
transition: none;
}
body.sst-co-ab .sst-check--flash {
animation: none;
outline: 3px solid var( --co-primary );
outline-offset: 2px;
}
}
/* ------------------------------------------------------------------ *
* 10. Cart page (DESIGN section 8). Structure only; skins under
* body.sst-co-ab.sst-co-v-* .woocommerce-cart do the rest.
*
* The stays because WooCommerce's own cart.js bails out of the
* form entirely without `.woocommerce-cart-form__contents` (cart.js:550),
* so the rows are turned into cards with `display:grid` instead — the same
* technique WooCommerce's `shop_table_responsive` uses on mobile.
* ------------------------------------------------------------------ */
body.sst-co-ab.woocommerce-cart .sst-cart-items,
body.sst-co-ab.woocommerce-cart .sst-cart-items tbody,
body.sst-co-ab.woocommerce-cart .sst-cart-item,
body.sst-co-ab.woocommerce-cart .sst-cart-item > td,
body.sst-co-ab.woocommerce-cart .sst-cart-actions-row,
body.sst-co-ab.woocommerce-cart .sst-cart-actions-row > td {
display: block;
width: auto;
border: 0;
padding: 0;
}
body.sst-co-ab.woocommerce-cart .sst-cart-items {
border-collapse: collapse;
margin: 0;
}
/* Column headers are meaningless once the rows are cards. */
body.sst-co-ab.woocommerce-cart .sst-cart-items__head {
display: none;
}
body.sst-co-ab.woocommerce-cart .sst-cart-item {
display: grid;
grid-template-columns: 64px minmax( 0, 1fr ) auto;
grid-template-areas:
"thumb main remove"
"thumb unit unit"
"thumb qty line";
column-gap: 14px;
row-gap: 6px;
align-items: start;
padding: var( --co-card-pad ) 0;
border-bottom: 1px solid var( --co-rule );
}
body.sst-co-ab.woocommerce-cart .sst-cart-item__thumb { grid-area: thumb; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__main { grid-area: main; min-width: 0; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__unit { grid-area: unit; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__qty { grid-area: qty; align-self: center; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__line { grid-area: line; align-self: center; text-align: right; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__remove { grid-area: remove; text-align: right; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__thumb img {
display: block;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 8px;
}
body.sst-co-ab.woocommerce-cart .sst-cart-item__remove .remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
text-decoration: none;
line-height: 1;
}
/* Quantity stepper: the +/- buttons are added by JS around WooCommerce's own input. */
body.sst-co-ab.woocommerce-cart .sst-cart-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid var( --co-rule );
border-radius: 8px;
overflow: hidden;
}
body.sst-co-ab.woocommerce-cart .sst-cart-qty .quantity {
margin: 0;
display: flex;
}
body.sst-co-ab.woocommerce-cart .sst-cart-qty input.qty {
width: 3.2em;
min-width: 0;
height: var( --co-qty-size, 36px );
border: 0;
border-radius: 0;
text-align: center;
background: transparent;
-moz-appearance: textfield;
appearance: textfield;
}
body.sst-co-ab.woocommerce-cart .sst-cart-qty input.qty::-webkit-outer-spin-button,
body.sst-co-ab.woocommerce-cart .sst-cart-qty input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body.sst-co-ab.woocommerce-cart .sst-cart-qty__btn {
flex: 0 0 auto;
width: var( --co-qty-size, 36px );
height: var( --co-qty-size, 36px );
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
line-height: 1;
cursor: pointer;
}
/* Only hidden once the stepper exists — a JS-less cart keeps the real button. */
body.sst-co-ab.woocommerce-cart .sst-cart-form.sst-cart--auto .sst-cart-update {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset( 50% );
white-space: nowrap;
}
body.sst-co-ab.woocommerce-cart .sst-cart-actions {
padding-top: var( --co-card-pad );
}
body.sst-co-ab.woocommerce-cart .sst-cart-coupon {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
body.sst-co-ab.woocommerce-cart .sst-cart-coupon__input {
flex: 1 1 12em;
min-width: 0;
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals {
border: 1px solid var( --co-rule );
border-radius: var( --co-radius );
background: var( --co-card );
padding: var( --co-card-pad );
margin-top: 24px;
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals__title {
margin: 0 0 12px;
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals__table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals__table th,
body.sst-co-ab.woocommerce-cart .sst-cart-totals__table td {
padding: 8px 0;
border: 0;
vertical-align: top;
text-align: left;
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals__table td {
text-align: right;
}
body.sst-co-ab.woocommerce-cart .sst-cart-proceed {
margin-top: 16px;
}
body.sst-co-ab.woocommerce-cart .sst-cart-cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
text-align: center;
text-decoration: none;
}
/* Bottom bar is shared with checkout; on the cart it shadows the CTA.
The height reservation lives in §10b, gated on `.sst-co-bar-on` (L-8). */
/* Desktop: items + coupon left, totals card sticky right. */
@media ( min-width: 1024px ) {
body.sst-co-ab.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax( 0, 1fr ) minmax( var( --co-rail-min ), var( --co-rail ) );
/* MUST stay a two-value `gap`, never `column-gap` alone. The theme grids this same
element with a `gap: 22px` SHORTHAND (style.css:6011-6017); a column-gap-only rule
leaves row-gap:22px in place, and the rail's `grid-row: 1 / 100` then bought 98
gutters = 2,156 px of dead white space below the cart (REVIEW-CO-2 C-1). */
gap: 0 var( --co-gap );
align-items: start;
}
/* Column 1 is AUTO-PLACED on purpose: nothing here may pin the cart form to a row.
Pinning it to `grid-row: 1 / 100` filled every cell of column 1, so any member-only
or notice child of `.woocommerce` — a policy notice on `woocommerce_before_cart`, a
points nudge — auto-placed at row 100 and rendered BELOW the form even when it sits
ABOVE it in the DOM. Only the rail is placed; column 1 then follows document order. */
body.sst-co-ab.woocommerce-cart .woocommerce > * {
grid-column: 1;
min-width: 0;
}
/* P1-3 — the step band now also renders on the cart, from `woocommerce_before_cart`,
so on this page it is a `.woocommerce >` child and therefore a grid item here.
It is left AUTO-PLACED (column 1, row 1) on purpose, and the rail keeps rows 1-99.
The desktop placement of the band belongs to the only skin that shows it:
- A and B hide it outright (variant-a.css:3922 `display: none !important`,
variant-b.css:2790 `display: none`). A `display: none` element is not a grid
item at all, so for those two arms nothing here changes by even a pixel.
- C shows it. Pinning it to `grid-column: 1 / -1` from the BASE cannot work:
a full-width auto-placed item cannot fit any row while the rail holds column 2
of rows 1-99, so it would be pushed to row 100 and render below the cart. And
pinning it to row 1 while shifting the rail to row 2 breaks A and B, where the
band is not an item and the cart form would take row 1 with the rail below it.
The fix has to know whether the band is displayed, which only the skin does.
WS-3c: see NOTES-WS2 §14. variant-c.css:390 already has the hook
(`.woocommerce > .sst-co-steps`) and NOTES-WS3c §11 already anticipated this. */
body.sst-co-ab.woocommerce-cart .woocommerce > .cart-collaterals {
grid-column: 2;
grid-row: 1 / 100;
align-self: start;
position: var( --co-rail-position, sticky );
top: var( --co-sticky-top );
}
body.sst-co-ab.woocommerce-cart .sst-cart-totals {
margin-top: 0;
}
body.sst-co-ab.woocommerce-cart .sst-cart-item {
grid-template-columns: 64px minmax( 0, 1fr ) auto auto auto auto;
grid-template-areas: "thumb main unit qty line remove";
align-items: center;
column-gap: 18px;
}
body.sst-co-ab.woocommerce-cart .sst-cart-item__unit { grid-area: unit; }
body.sst-co-ab.woocommerce-cart .sst-cart-item__remove { grid-area: remove; }
}
/* Empty cart. */
body.sst-co-ab.woocommerce-cart .cart-empty,
body.sst-co-ab.woocommerce-cart .return-to-shop {
text-align: center;
}
body.sst-co-ab.woocommerce-cart .return-to-shop {
margin-top: 16px;
}
/* ------------------------------------------------------------------ *
* 10b. Cart page — collisions with the theme (REVIEW-CO-2 H-1, M-1, M-2, L-8).
* ------------------------------------------------------------------ */
/* H-1 — the theme prints its OWN fixed mobile bar (`samurai_sword_cart_mobile_checkout_bar()`,
functions.php:4332 on `woocommerce_after_cart`) at z-index 70, which painted over our
`.sst-co-bar` at 60 and swallowed the arm's CTA. `SST_CO_AB_Render` removes that callback in
PHP so the node is never printed; this rule is the belt-and-braces half, in case the theme
re-registers it at a different priority or a fragment re-injects it. The redesign owns the
mobile CTA on the cart under the test — identically in A, B and C, or the test is unfair. */
body.sst-co-ab.woocommerce-cart .sst-cart-mobile-checkout {
display: none !important;
}
/* …and the theme reserves room for its bar on . With that bar gone, ours is the single
source of the reservation (see the `.sst-co-bar-on` rule below). */
@media ( max-width: 760px ) {
body.sst-co-ab.woocommerce-cart {
padding-bottom: 0;
}
}
/* L-8 — reserve bar height only when a bar actually exists. An empty cart has no form, so
`initCart()` builds no bar, and the old unconditional rule left 96-150px of dead space. */
@media ( max-width: 1023px ) {
body.sst-co-ab.woocommerce-cart .woocommerce {
padding-bottom: 0;
}
body.sst-co-ab.woocommerce-cart.sst-co-bar-on .woocommerce {
padding-bottom: var( --co-bar-height );
}
}
/* M-1 — the theme's <=760px card CSS out-specifies §10 and re-adds `td::before` data-title
labels (A and C showed them, B did not: the arms differed by accident, not by design) and
stretches the remove/thumbnail cells into full-width strips. Neutralised in the BASE so all
three arms match. (0,5,3) beats the theme's (0,2,2). */
@media ( max-width: 760px ) {
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td::before {
content: none !important;
}
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-remove,
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-thumbnail,
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-name,
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-price,
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-quantity,
body.sst-co-ab.woocommerce-cart .sst-cart-items tr.sst-cart-item > td.product-subtotal {
display: block;
width: auto;
min-width: 0;
float: none;
text-align: inherit;
}
}
/* M-2 — `overflow:hidden` plus the theme's `td { display:flex; justify-content:space-between }`
squeezed the stepper below its content width: at 390px in variant A only ~11px of the `+`
was visible and hittable. Never let the box shrink below its content. */
body.sst-co-ab.woocommerce-cart .sst-cart-qty {
flex: 0 0 auto;
min-width: max-content;
}
/* …and keep the buttons inside the box: A sized them 40px inside a 36px shell. */
body.sst-co-ab.woocommerce-cart .sst-cart-qty__btn,
body.sst-co-ab.woocommerce-cart .sst-cart-qty input.qty {
height: var( --co-qty-size, 36px );
box-sizing: border-box;
}
/* ------------------------------------------------------------------ *
* 11. Notices — the region must never be able to hide a payment error.
*
* checkout_rates.md F9 measured the add-to-cart notice in 13/13 arm-A
* captures and 0/26 arm-B/C captures and asked whether B and C were
* suppressing `.woocommerce-notices-wrapper`, because that region also
* carries validation and payment errors.
*
* They are not. Audited 2026-08-21: the ONLY rules any skin has on that
* region are `…-wrapper:empty { display: none }` (variant-b.css:2769,
* variant-c.css:2624) — which by definition cannot hide a notice that has
* content — plus margins and a tablet max-width. No skin sets `display`,
* `visibility` or `opacity` on `.woocommerce-error` / `-message` / `-info`
* at all. The 13/0/0 split is a capture artefact: WooCommerce notices live
* in the session and `wc_print_notices()` clears them after the first
* print, so whichever page a capture run loaded first consumed the notice.
*
* The rule below is nonetheless kept as a floor, because the cost of being
* wrong about this is a customer who cannot see why their payment failed.
* It is deliberately narrow: only the WRAPPER's `display` is forced, since
* skin A lays the notice elements themselves out as `display: flex`
* (variant-a.css:336) and a blanket `display: block !important` would
* flatten that. `ul.woocommerce-error` is additionally pinned because an
* error list is always a `