/* ══════════════════════════════════════════════════════════════════════════
THE CATALOGUE SCREENS — shop, product category, product tag.
Almost nothing. The archive's design is emitted as the concept's own class
names by woocommerce/archive-product.php, woocommerce/content-product.php and
inc/catalogue.php, so concept.css styles it directly: `.cathero`, `.catfacts`,
`.catbody`, `.catgroup-head`, `.catsibs`, `.cta-band`, `.crumbs--light`,
`.card`, `.card-img`, `.card-body`, `.card h3`, `.price .unit`, `.tier-badge`,
`.card-cta`, `.sr-head` and `.sr-facet` were all already in there and were all
matching nothing.
What is left is the four places where the store's markup genuinely cannot be
the concept's markup. Each one says which, and why. No new colours: every
value below is either a concept.css token or a geometry the concept states
itself.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1 · three across, not four ────────────────────────────────────────────
concept.css:328 is `.grid{grid-template-columns:repeat(3,1fr)}` and every
concept grid is `.grid.grid--3`, which is now what the loop emits. But
style.css:944 declares `repeat(4,1fr)` against `.woocommerce ul.products` —
two classes and an element, which outguns a bare `.grid` (one class) no
matter which stylesheet loads last. So the concept's own value is restated at
a specificity that reaches, scoped to the two sections this theme draws.
The 2-up step is concept.css:1992 (`.grid--3` at 900px), stated here for the
same reason: without it the rule above would hold three columns all the way
down to a phone. */
ul.products.grid.grid--3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){
ul.products.grid.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* …and the card has to fill the column it is given.
WooCommerce's own woocommerce-layout.css lays the loop out as floats and
sizes each item off the `columns-N` class the loop prints:
.woocommerce ul.products li.product {float:left; width:22.05%}
.woocommerce ul.products.columns-3 li.product {width:30.75%}
style.css cancels the first with `float:none; width:auto` at the same
specificity and wins on load order — which is why the four-across grid looked
right. The `.columns-3` rule is one class heavier, so the moment
`loop_shop_columns` was filtered to the concept's three, every card collapsed
to 30.75% of its own grid column: a 322px column holding a 99px card.
Restated here at a specificity that clears it. `float` and `margin` come
along because they are the other two halves of the same float layout, and a
grid item should carry neither.
Both rules key off `.grid.grid--3` rather than off the two sections, because
the theme's loop-start filter adds those classes to EVERY product loop it
renders — related products and cross-sells included, which emit `columns-4`
and `columns-2` and would otherwise hit the same rule from the other end. */
ul.products.grid.grid--3 > li.product{
width:auto; float:none; margin:0;
}
/* ── 2 · the link between `.card` and `.card-body` ─────────────────────────
The concept's card is a single `` with `.card-body` as a
direct child, and `.card-body{flex:1}` (concept.css:343) is what pushes the
"View" affordance onto the card's bottom edge so a one-line name and a
two-line name end at the same height.
WooCommerce puts one element in between: `woocommerce_template_loop_product_
link_open` opens `` around the whole
card interior, and that `` — not `` — is `.card-body`'s
flex parent. It therefore has to carry the column itself. This is the same
declaration style.css already makes; it is repeated rather than relied on
because it is load-bearing for the card's geometry and the two files are
maintained separately. */
ul.products li.product > a.woocommerce-LoopProduct-link{
display:flex; flex-direction:column; flex:1;
color:inherit; text-decoration:none;
}
/* ── 2b · the card title is the concept's, not WooCommerce's ───────────────
`content-product.php` prints the concept's own bare `