` children of a real list
(content-product.php emits them; a wrapper would orphan them).
woocommerce-layout.css, which is still enqueued, floats those items and pins a
percentage width plus a right margin per `columns-N`. Grid ignores the float
but honours both, so without this reset every cell is starved to ~22% of its
track and offset by a gutter. The clearfix pseudo-elements have to go too —
as children of a grid container they would occupy two real grid cells.
`margin: 0` is only half a reset, and the more interesting half is a DESIGN
CHANGE rather than a fix. Clearing the horizontal margin does belong with the
width work — a grid item still honours it, so Woo's float gutter would offset
every cell inside its own track, on top of the `gap`. But clearing the BOTTOM
margin fixes nothing: it removes spacing that would simply stack on the row
gap and make the rows airier than the columns. That is a deliberate choice —
`gap` as the single source of spacing — and it is the reason to think twice
before "restoring" this shorthand to something narrower.
Scoped to `.a1-grid` so a loop rendered without the override is untouched.
CASCADE — the honest version, because half of it is unverifiable from here.
Against WooCommerce itself these rules win, but on TIE-BREAK, not on weight:
Woo's per-column rule `.woocommerce ul.products.columns-4 li.product` and the
override `.woocommerce ul.products.a1-grid li.product` are both (0,4,2) —
EQUAL specificity — and equal specificity is decided by print order.
`woocommerce-layout` is a declared dependency of `a1-woo` in inc/enqueue.php,
so WP_Dependencies guarantees it prints first and these rules print last.
That is why no `!important` is used against Woo.
GENERATEPRESS IS A DIFFERENT MATTER AND IS NOT SETTLED HERE. GP ships its own
WooCommerce stylesheet, and `a1-woo` does NOT declare it as a dependency:
docs/research/wp-generatepress-brief.md §2 confirms only `generate-style` and
`generate-child` as documented handles and explicitly says not to invent one
for GP's additional sheets. So GP's Woo sheet may print before or after this
file — unknown from source. If GP sets `display` or `grid-template-columns`
on `.woocommerce ul.products` (0,2,1), it beats `.a1-grid` (0,1,0) on
specificity regardless of order, and TWO things fail silently at once: the
grid never activates, and the `.a1-grid--N` collapses in 50-responsive.css
never apply either — while `float: none; width: auto` below still lands, so
every product stacks full-width instead of falling back to Woo's float grid.
Neither an invented handle nor blanket `!important` is an acceptable fix for
a conflict nobody has observed yet. THE SHOP LOOP MUST BE INSPECTED IN A
BROWSER on a real GP + Woo install before this is considered done; see
acad1-child/woocommerce/README.md. If GP does win, the fix is a targeted
`!important` on the two properties it actually sets — this file is one of the
four where §0.6 permits that — or a dependency added once the real handle has
been read out of `wp_styles()`. */
.woocommerce ul.products.a1-grid { margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products.a1-grid::before,
.woocommerce ul.products.a1-grid::after { display: none; }
.woocommerce ul.products.a1-grid li.product {
width: auto; margin: 0; float: none; clear: none;
}
/* ── shop-loop pagination ───────────────────────── */
/* Not in §8 — added by the final review pass. The product archive is a
first-class page in this build (task 7 ships a woocommerce/loop/loop-start.php
override), and §12 requires "no Woo default styling anywhere". Left
unstyled, Woo's own pagination renders as its default pill list with its
own greys and ~1em targets, which is exactly that failure. Tokens only,
--a1-target-min on both axes so every page link clears §7's floor.
Specificity note, same as the loop-grid block above: these selectors tie
with WooCommerce's own (`.woocommerce nav.woocommerce-pagination ul li a`
is (0,2,4) either way) and win on print order, because a1-woo declares
woocommerce-general as a dependency. `span.current` adds a class and so
beats the shared rule outright. No !important needed. */
.woocommerce nav.woocommerce-pagination { margin-top: var(--a1-s-8); text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a1-s-2);
margin: 0; padding: 0; border: 0; list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; padding: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--a1-target-min); min-width: var(--a1-target-min);
padding: 0 var(--a1-s-3);
font-family: var(--a1-font); font-size: var(--a1-body-sm); font-weight: 700;
font-variant-numeric: tabular-nums; line-height: 1.2;
color: var(--a1-secondary); background: transparent; text-decoration: none;
border: 1px solid var(--a1-border); border-radius: var(--a1-r-btn);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
background: var(--a1-surface); color: var(--a1-text);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--a1-primary); color: var(--a1-contrast); border-color: var(--a1-primary);
}
/* ── kill Woo's leftover decoration ──────────────────────── */
.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce span.onsale { display: none; }
.woocommerce div.product .stock { color: var(--a1-accent); font-weight: 700; font-size: var(--a1-meta); }
.woocommerce .star-rating span::before { color: var(--a1-accent); }
.woocommerce-store-notice { background: var(--a1-primary); color: var(--a1-on-dark); }