/** * Homepage-only styles — enqueued only on is_front_page() (see * inc/enqueue.php), so no other page pays for any of this CSS. * * 0.2.0-dev.1: .cristaline-section / .cristaline-section--alt / * .cristaline-section__heading / .cristaline-hero* / .cristaline-categories__* / * .cristaline-products-grid / .cristaline-brands__* moved here from * layout.css unchanged (still used by nothing outside front-page.php's own * template parts) — everything else in this file is new this round * (editorial sections, shops, services, the shared "voir tout" link style, * focus-visible states, prefers-reduced-motion). */ /* Section rhythm helpers, used by every homepage template part. 0.2.0-dev.5: the default (var(--space-16), 64px) already sits inside the client's own "56 à 80px sur les écrans intermédiaires" range — kept as-is for that tier. A new >=1280px tier below bumps to the client's separate "80 à 110px sur grand écran" range; the existing <=480px tier (var(--space-8), 32px) is unchanged, mobile was never part of this ask. */ /* 0.2.0-dev.8: real structural cause of "l'alternance des fonds est trop discrète", found live before writing anything — ".cristaline-section" is a direct child of Storefront's own real site-wide "#content .col-full" (the ancestor already documented in this file's own 0.2.0-dev.7 comment below), which caps EVERY section — not just the hero — to exactly var(--container-max) (1280px), centered. That's correct for the hero (deliberately framed) but means every OTHER section's own background colour (".cristaline-section--alt", #EDF1F2) never actually reaches the viewport edges either — confirmed live: at 1920px, a plain #F8F7F4 body- coloured gutter of 312.5px sat on EACH side of the alt background box, making the "alternation" read as a small floating rectangle rather than a true full-width band. The standard "break out of a centered ancestor" technique (negative margins sized to the viewport, independent of the ancestor's own width) makes the SECTION's own box span the full viewport while leaving every section's own inner ".col-full"/content wrapper exactly as centered/boxed as before (~1200-1280px, unchanged — confirmed live no inner content shifted). Hero is unaffected: it uses its own ".cristaline-hero" class, never ".cristaline-section". */ .cristaline-section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--space-16) 0; } /* 0.2.0-dev.8: 96px -> 84px (12.5% reduction, inside the client's own "10 à 15%" ask) — this shared rule governs the gap after the Femme/ Homme/Enfants cards (.cristaline-univers's own bottom padding), both sides of "Nos boutiques" (no dedicated override there), and the top of "Nos services" — reducing it once here covers 3 of this round's 4 named gaps without touching each section's own template part. */ @media (min-width: 1280px) { .cristaline-section { padding: 84px 0; } } /* 0.2.0-dev.5: real bug fixed — "Votre sélection" (process-steps.php) and "Nos boutiques" (shops.php) were BOTH --alt and directly adjacent (no other section renders between them today: Nouveautés has 0 published products, Marques has 0 brand terms, so both sit invisible between "Nos univers" and "Votre sélection"), which merged the two into one visual block — the client's own "ne pas enfermer Votre sélection et Nos boutiques dans un seul grand rectangle commun" complaint. Deliberate alternation, chosen to hold even once Nouveautés/Marques eventually DO render (never assumed permanently invisible): Nos univers (plain, #F8F7F4) -> Nouveautés (--alt) -> Marques (plain) -> Votre sélection (--alt) -> Nos boutiques (plain) -> Nos services (--alt) -> footer (dark) — a clean A/B alternation either with or without the 2 currently- invisible sections in between. Do not add --alt to two sections that can ever sit directly adjacent in front-page.php's own render order. */ /* 0.2.0-dev.6: a hairline top border added — the client's own "renforcer légèrement l'alternance des fonds... transitions sobres, sans bordures épaisses" ask. #F8F7F4 and #EDF1F2 are close enough that the seam between them can read as barely-there on some monitors; a 1px line at low opacity makes the transition legible without touching either background value (both are fixed brand tokens, not to be adjusted). 0.2.0-dev.8: rgba(23,23,23,.06) -> rgba(168,176,179,.20) — this round's own explicit literal (--color-neutral, #A8B0B3, at 20%), a cooler and slightly more visible hairline than the previous warm-ink one, still well short of a "gros cadre"/heavy border. */ .cristaline-section--alt { background-color: var(--color-bg-alt); border-top: 1px solid rgba(168, 176, 179, .20); } .cristaline-section__heading { text-align: center; margin-bottom: var(--space-8); } /* Shared "view all" link — Nouveautés, Boutiques Cristaline. Same weight/ underline pattern as the mega-menu's own "Voir tout X" (navigation.css's .cristaline-mega-menu__view-all), reused here for visual consistency across the whole site rather than inventing a 2nd link style. 0.2.0-dev.3: this round explicitly calls out "Voir toutes nos boutiques" as needing the same elegant treatment as the collection links — this class is the one it actually uses (editorial-section.php's own .cristaline-editorial__cta is a different class), so the same mobile size/weight/underline fixes applied there are mirrored here: .9rem (14.4px) -> 1.2rem (19.2px) on mobile, weight 600 -> 500, an explicit thin text-decoration-thickness, :visited pinned to --color-ink. */ /* 0.2.0-dev.31: "Voir toutes les nouveautés" converted from a plain underlined text link (.cristaline-section__all, now unused — removed rather than left as dead CSS) to a real .button.secondary, matching "Découvrir toutes les marques" exactly (.cristaline-brands__cta below) — the client's own explicit "bouton secondaire centré, cohérent avec le bouton Découvrir toutes les marques" ask. Same minimal centering rule, nothing else needed since .button.secondary already supplies the real visual styling. */ .cristaline-section__all-btn { display: table; margin: var(--space-8) auto 0; } @media (max-width: 480px) { .cristaline-section { padding: var(--space-8) 0; } } /* ========================================================= Hero — 0.2.0-dev.4: full editorial rewrite. The old centered card with an opaque rgba(248,247,244,.88) background is GONE — the client's own explicit "pas de grand encart blanc opaque qui cache les personnes" ask. Text now sits directly on the photo, left-aligned, behind a thin gradient scrim (never a solid box) confined to the zone the real bundled photo actually leaves clear — see hero.php's own docblock for why left/desktop vs bottom/mobile were chosen (checked the real images first, not assumed). ========================================================= */ .cristaline-hero { background-color: var(--color-ink); background-position: center 25%; background-size: cover; display: flex; align-items: center; min-height: 420px; position: relative; } /* 0.2.0-dev.7: verified LIVE (getBoundingClientRect, not assumed from reading the CSS alone) before writing anything here — Storefront's own real "#content .col-full" (its site-wide content wrapper, from header.php's storefront_content_top(), NOT anything in this theme) was ALREADY the ancestor of every ".cristaline-section" including the hero, already capping ALL of them — hero's photo included — to exactly var(--container-max) (1280px), centered, on every viewport tested (1280/1920px): confirmed the hero's own rendered width was byte-for-byte identical to every sibling section's (nos-univers/process/shops/ services) content box, not the "full-bleed, no width constraint" state assumed before re-测ing live. A first draft of this fix added a SECOND, redundant max-width+width:calc() constraint directly on ".cristaline-hero" — since it would have nested INSIDE that already-1280px box, it would have silently SHRUNK the hero below its siblings' width instead of widening it, the opposite of this section's own ask. No width rule is needed at all: the client's own numeric ceiling ("~1200-1280px") and "harmoniser sa largeur avec les autres sections" are both already true. What was genuinely missing was the visual "encadré" quality itself — the photo fills its 1280px box edge-to-edge with no framing treatment of its own, unlike a card; a subtle rounded corner + shadow (the same --radius-md other homepage cards already use) gives it a real framed read without touching the (already-correct) width. */ .cristaline-hero { border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(23, 23, 23, .16); overflow: hidden; } /* 0.2.0-dev.5: client's own explicit "réduire l'espace entre la fin du header et le hero à environ 28 à 40 px" — the sticky header itself never overlaps the hero (it's sticky, not fixed, so it simply occupies its own space at scroll position 0), but there was no deliberate gap between the two, either. 32px sits mid-range. Desktop only — mobile's own spacing is unchanged. */ @media (min-width: 768px) { .cristaline-hero { margin-top: var(--space-8); } } /* 0.2.0-dev.1: real, client-authorized bundled photos (see 02_Ancien-site-Hostinger/Images-exportees/README.md, decision D1) used as the default background only while no Customizer image has been uploaded — hero.php only adds this class in that case, and a Customizer image is set via an inline `style` attribute on the same element, which always wins over this class regardless of source order. Two distinct crops (never one image reused): a portrait mobile crop below 768px, the wide desktop crop from 768px up — matches how the reference site itself served two different files, not a single recrop. */ .cristaline-hero--default-bg { background-image: url('../images/hero-accueil-mobile.jpg'); } @media (min-width: 768px) { .cristaline-hero--default-bg { background-image: url('../images/hero-accueil-desktop.jpg'); } } /* Mobile crop: the family fills the upper ~2/3 of this particular photo (it's a pre-composed rounded card + blurred backdrop, checked live) — a bottom-anchored scrim sits in the plain blurred zone below them, never over a face. Desktop crop: the family stands right-of-center, leaving the left third genuinely clear (lake/mountains) — a left-anchored scrim runs there instead. Both are gradients fading to fully transparent, never a flat tint over the whole photo. */ .cristaline-hero__scrim { background: linear-gradient(to top, rgba(23, 23, 23, .78) 0%, rgba(23, 23, 23, .45) 35%, transparent 65%); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } @media (min-width: 768px) { .cristaline-hero__scrim { background: linear-gradient(to right, rgba(23, 23, 23, .62) 0%, rgba(23, 23, 23, .3) 42%, transparent 62%); } } /* 0.2.0-dev.5: max-width 560px -> 460px — client's own explicit "zone d'environ 430 à 480 px de largeur" (was sized more generously last round; this narrows it back to a tighter, more editorial column). 0.2.0-dev.7: real bug, confirmed live and root-causing this round's "NOUVELLE SAISON presque invisible" report — this element also carries Storefront's real ".col-full" class (for the OUTER content wrapper's own max-width, same as every other section), whose real compiled CSS sets "margin: 0 auto". On every OTHER section that's harmless (plain block centering, exactly what's wanted there); here it collided with this element being a FLEX ITEM (".cristaline-hero" is "display:flex"), where "margin:auto" becomes a flexbox auto-margin and silently CENTERS the item on the main axis instead of leaving it at the flex-start (left) position this component was actually designed for — confirmed live via getComputedStyle: margin-left/-right were both 378px, landing the whole text column (kicker/heading/paragraph) dead center on the photo, exactly where the LEFT-anchored scrim (see .cristaline-hero__scrim above) has already faded to near-transparent. Measured contrast for the kicker against the real photo pixels there: ~1.05:1 (WCAG needs ~4.5:1) — this, not the kicker's own color/size, was the real cause. margin:0 restores the intended flex-start (left) position. */ .cristaline-hero__inner { margin: 0; max-width: 460px; padding: var(--space-16) var(--space-6) var(--space-8); position: relative; text-align: left; z-index: 1; } /* 0.2.0-dev.7: real contrast problem, confirmed by sampling the actual photo pixels behind this text (canvas + WCAG relative-luminance math, not assumed): even after the .cristaline-hero__inner position bug above was fixed, the desktop crop's own left zone is genuinely bright (~238,238,233 — sky/mountains) and champagne (#C5AD8A) is a MID-tone colour — against a bright photo, contrast is fundamentally bad (~1.6:1 measured) and, counter-intuitively, only fixable by scrim opacity alone at very heavy (~80%+) darkening, well past this project's own "never heavily darken / never go grey and heavy" constraint. A page-wide scrim gradient (however dark) can't reliably solve this since it has to work across the WHOLE range of tones the real photo actually contains, not a single sampled point — a dedicated text-shadow is the standard, robust technique for exactly this ("legible text over an arbitrary photo") because it creates real local contrast right at the glyph edges, independent of what's directly behind them. Two layers: a tight, fairly opaque shadow for edge definition + a softer, wider glow — same principle as .cristaline-hero__heading/__subheading's own shadows below, just stronger, since champagne needs more help than near-white text does against the same photo. */ .cristaline-hero__kicker { color: var(--color-chrome-accent); font-family: var(--font-nav); font-size: .95rem; font-weight: 600; letter-spacing: .1em; margin: 0 0 var(--space-3); text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .35); text-transform: uppercase; } /* Subtle text-shadow — the client's own "améliorer légèrement le contraste du texte sur l'image" ask, kept deliberately faint (never a heavy drop shadow) since the gradient scrim above already does most of the work. */ .cristaline-hero__heading { color: var(--color-bg); text-shadow: 0 1px 12px rgba(0, 0, 0, .25); } .cristaline-hero__subheading { color: rgba(248, 247, 244, .92); font-size: 1.05rem; max-width: 46ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .2); } .cristaline-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); } /* 0.2.0-dev.13: real bug, confirmed live — the 2 CTAs already stack one per row below 768px (flex-wrap doing its job), but each one still sized to its OWN intrinsic text width ("Découvrir les nouveautés" vs "Explorer les collections", 225px vs 210px measured live) rather than matching each other — flex-wrap only affects the MAIN axis (here, horizontal); nothing was making the two rows the same width. Switching to flex-direction:column turns width into the CROSS axis, where align-items:stretch (the flex default, made explicit here) naturally gives both buttons the same full-width box with no extra sizing rule needed — the client's own "boutons de même largeur" ask for this round. */ @media (max-width: 767px) { .cristaline-hero__actions { align-items: stretch; flex-direction: column; } } /* 0.2.0-dev.3: styled here, scoped to THIS one class only — never touching components.css's shared ".button" rule, which also styles every WooCommerce button (add-to-cart, checkout, quantity, …). Default ink-fill/pearl-text/ border/dimensions all already come from ".button" (components.css) and are left alone; this only adds a light shadow + the hover/active treatment this round asks for, specifically for the hero. */ /* white-space:nowrap keeps each button's own label as one unbroken line — same fix as the footer legal links (layout.css) for the same reason: a flex row with wrap should move a WHOLE button to the next line if it doesn't fit, never wrap its own text internally (confirmed live in the local harness — without this, both buttons were shrinking to a narrower-than-natural width and wrapping their own label onto 2 lines, which also stretched the OTHER button's height to match via the flex row's default align-items:stretch). */ .cristaline-hero__cta { align-items: center; box-shadow: 0 2px 8px rgba(23, 23, 23, .18); display: inline-flex; justify-content: center; min-height: 48px; transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease; white-space: nowrap; } /* components.css's shared ".button:hover" (background/border/color) is UNCONDITIONAL — it would still apply here on a touch tap regardless of the (hover:hover) media query below, since this element also carries the plain ".button" class. Neutralized back to the same tied specificity (0,2,0) but later in source order (this file loads after components.css) so it wins on every device by default; the media query below then re-applies champagne ONLY where a real hover exists. */ .cristaline-hero__cta--primary:hover { background-color: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); } /* Desktop-with-a-real-pointer only — champagne stays an accent used sparingly, never the default state of every button site-wide (that's still components.css's own ink fill, untouched). */ @media (hover: hover) and (pointer: fine) { .cristaline-hero__cta--primary:hover { background-color: var(--color-gold-hover); border-color: var(--color-gold-hover); box-shadow: 0 4px 14px rgba(23, 23, 23, .25); color: var(--color-ink); transform: translateY(-1px); } } /* Secondary hero CTA — client's own "fond transparent ou clair, bordure fine, texte charbon" spec. components.css's shared ".button.secondary" (transparent bg, gold border) is correct everywhere else on the site, but fully transparent would sit directly on a photo here with no guaranteed contrast — given a light/opaque fill instead, scoped to the hero only. Selector matches ".button.secondary"'s own specificity (0,2,0) plus this class (0,3,0 total) so it reliably wins regardless of source order — the same match-or-exceed pattern used throughout this project for overriding a shared global rule (see CLAUDE.md's own Storefront-collision history). */ .button.secondary.cristaline-hero__cta--secondary { background-color: rgba(248, 247, 244, .94); border-color: rgba(248, 247, 244, .94); color: var(--color-ink); } .button.secondary.cristaline-hero__cta--secondary:hover { background-color: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); } @media (hover: hover) and (pointer: fine) { .button.secondary.cristaline-hero__cta--secondary:hover { box-shadow: 0 4px 14px rgba(23, 23, 23, .18); transform: translateY(-1px); } } /* Transient touch feedback — no lingering hover-coloured state after a tap (mobile never matches :hover here at all, per the media query above). */ .cristaline-hero__cta:active { transform: scale(.98); } @media (min-width: 768px) { .cristaline-hero { min-height: 620px; } .cristaline-hero__inner { padding: var(--space-16) var(--space-8); } } /* Small phones: tighter padding, shorter minimum height — avoids the "grand vide" the client flagged, and keeps the header-to-hero gap small since the hero itself starts right where the sticky header ends. */ @media (max-width: 380px) { .cristaline-hero { min-height: 380px; } .cristaline-hero__inner { padding: var(--space-8) var(--space-4) var(--space-6); } } /* ========================================================= Section kicker — shared "surtitre" style, used above the H2 in every section that has one (Nos univers, Nouveautés, Votre sélection à votre façon, Nos boutiques). One rule, reused, rather than one per section — avoids the drift risk documented elsewhere in this project when the "same" visual concept gets copy-pasted per call site instead of shared. ========================================================= */ .cristaline-section__kicker { color: var(--color-gold-hover); font-family: var(--font-nav); font-size: .85rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 var(--space-2); text-align: center; text-transform: uppercase; } /* ========================================================= Nos univers — 0.2.0-dev.4: replaces BOTH the old "Découvrir par catégorie" tiles AND the old 3× full-width editorial sections (both deleted, see template-parts/homepage/nos-univers.php's own docblock) — the client's own explicit "un seul encart clair" instruction. Desktop: 3 equal cards, one row. Mobile: stacked, image height capped shorter than the old editorial blocks were, so the page reads noticeably shorter. ========================================================= */ .cristaline-univers__intro { color: var(--color-ink); margin: 0 auto var(--space-8); max-width: 56ch; text-align: center; } /* align-items:start — client's own "réduire la hauteur vide sous les liens" ask: without it, CSS Grid's default row-stretch made each card fill the tallest sibling's height, leaving empty space below the shortest card's own link. Image ratio + title/link sizing are shared by all 3 cards already, so they still read as visually uniform. */ .cristaline-univers__grid { align-items: start; display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 768px) { .cristaline-univers__grid { grid-template-columns: repeat(3, 1fr); } } /* 0.2.0-dev.10: real cause of "tout le texte devient champagne au survol", found live — base.css's own global "a:hover, a:focus { color: var(--color-gold-hover) }" matches THIS card too (it's a real , ".cristaline-univers__card"), and ".cristaline-univers__title" never declared its own color at all, only inheriting the card's — so on hover, the card's own (now gold) computed color propagated straight into the title. ".cristaline-univers__link" happened to look correct already only because it already had its own explicit resting colour AND its own dedicated hover override (below); nothing protected the title. Fixed at the root: the card's own colour is now explicitly pinned across every state (normal/hover/focus-visible/visited), so nothing inside it ever has a hover-driven colour to inherit in the first place — not just patched on the title alone. */ .cristaline-univers__card, .cristaline-univers__card:visited, .cristaline-univers__card:hover, .cristaline-univers__card:focus-visible { color: var(--color-ink); display: block; transition: transform 180ms ease; } .cristaline-univers__card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } /* Transient touch feedback only, same reasoning as every other clickable card on this page — CSS :active is inherently transient, never sticks after the pointer lifts, unlike :hover on a touchscreen. */ .cristaline-univers__card:active { transform: scale(.985); } .cristaline-univers__media { border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: block; margin-bottom: var(--space-4); overflow: hidden; } /* Shorter than the old editorial blocks' 4/4.5 ratio (~0.889) — the client's own explicit "images moins hautes que sur la version actuelle" ask for this compact card format. height:auto is required alongside aspect-ratio here for the same reason documented in the (now deleted) editorial-section rule this replaces: the 's own width/height attributes (kept for CLS prevention) map to a literal pixel height that silently overrides aspect-ratio unless neutralized back to "auto". */ .cristaline-univers__media img { aspect-ratio: 4 / 3.4; display: block; height: auto; object-fit: cover; width: 100%; } @media (hover: hover) and (pointer: fine) { .cristaline-univers__media img { transition: transform 500ms ease; } .cristaline-univers__card:hover .cristaline-univers__media img { transform: scale(1.015); } } /* 0.2.0-dev.5: 1.35rem -> 1.5rem, weight 500 -> 600 — client's own "titres Femme, Homme et Enfants légèrement plus visibles" ask, still clearly below the section's own H2 size. */ /* color: explicit (--color-ink) rather than left to inherit from the card's own colour — belt-and-suspenders alongside the card-level fix above, so this specific title never changes colour even if some future rule touches the card's own :hover colour again. */ .cristaline-univers__title { color: var(--color-ink); display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: var(--space-2); } /* 0.2.0-dev.6: mobile font-size 1.1rem (17.6px) -> 1.3rem (20.8px) — the client's own explicit "réduire les liens Découvrir la collection… à environ 20-22px" ask (a card-content wording tweak, not a change to the univers cards' own structure/layout, which stays untouched this round). Underline was already thin (1px) and offset (.25em) — already matched this round's own spec, no change needed there. Desktop size (.9rem, below) untouched — not mentioned this round. */ .cristaline-univers__link { color: var(--color-ink); display: inline-block; font-family: var(--font-nav); font-size: 1.3rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; } @media (min-width: 768px) { .cristaline-univers__link { font-size: .9rem; } } @media (hover: hover) and (pointer: fine) { .cristaline-univers__card:hover .cristaline-univers__link { color: var(--color-gold-hover); } } .cristaline-univers__card:focus-visible .cristaline-univers__link { color: var(--color-gold-hover); } /* ========================================================= Nouveautés — reuses WooCommerce's ul.products, laid out with CSS Grid instead of its default float layout (see also woocommerce.css, which applies the same grid to shop/category pages) ========================================================= */ /* 0.2.0-dev.24: breakpoints changed from this section's own previous 768px/1024px thresholds to 900px/1280px — matching the SAME "no sidebar" grid already used sitewide (assets/css/woocommerce.css, shared by single-product related/upsell grids) instead of a second, homepage-only set of numbers for the same 2/3/4-column shape. 0.2.0-dev.28: the intermediate 900px/3-column tier below was REMOVED — this section now shows exactly 4 real products (never 8), and this round's own brief explicitly specifies only 2 tiers for it ("Tablette : 2 colonnes" / "PC : exactement 4 cartes sur une seule ligne"), not the 3-tier shape shop.css's sidebar-having archive grid still needs (unchanged, not touched this round — a 4-item preview and a many-item paginated archive don't need the same breakpoint count). */ .cristaline-products-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); } /* 0.2.0-dev.28 — the 0.2.0-dev.26 fix below was specificity-insufficient and never actually won on the homepage. Storefront's real compiled rule (Storefront theme's own assets/css/woocommerce/woocommerce.css, fetched and confirmed live this round) is the UNSCOPED `ul.products::before, ul.products::after{content:"";display:table}` — specificity (0,1,2): 1 type (ul) + 1 class (.products) + 1 pseudo-element. The 0.2.0-dev.26 fix, `.cristaline-products-grid::before` alone, is (0,1,1): 1 class + 1 pseudo-element — LOWER on the 3rd (type) component once the class count ties at 1, so Storefront's rule kept winning regardless of load order. This is exactly why the shop/category archives (fixed correctly in assets/css/woocommerce.css via `.woocommerce ul.products::before`, (0,2,2) — wins on class-count) were never affected, while the homepage — which carries no `.woocommerce`/`.woocommerce-page` body class at all — kept the phantom grid item: confirmed live as the exact, sole cause of this round's own "3 cards on row 1, 4 on later rows" report (the generated, empty `::before` box occupies grid cell 1, pushing every real card one position later). Fixed by matching BOTH real classes the markup already carries (`