/** * Catalog (shop archive + product-category archives) -- page-specific * concerns only. Phase 2C.2 (grid), Phase 2C.6/2C.7 (Hero transition), * generalized to category archives + RENAMED from all-products.css this * phase (Hero System Extension). * * RENAME RATIONALE: every rule in this file already targeted a generic * WooCommerce archive structure (`#primary`, `.woocommerce-products- * header__title`, `ul.products.columns-3`, `.woocommerce-result-count`, * `.woocommerce-ordering`) that turned out, this phase, to be pixel- * identical markup on category archives too (live-confirmed via the * Compressor category archive: same `#primary > main#main > * .ast-woocommerce-container` wrapper, same breadcrumb/heading/grid * structure, only the heading text and product set differ) -- "all- * products.css" stopped describing this file's real, now-shared ownership. * Renamed now rather than letting a near-duplicate category.css spread * later; no other file references this one by name (only functions.php's * enqueue path, updated alongside this rename), so the rename is zero-risk. * * The product-card CORE (shell, image, typography, rating/price, Add to * Cart, quick-add removal) lives in the shared assets/css/product-card.css, * which already covers this file's shop + category scope. This file holds * ONLY the grid column behavior and catalog-intro (Hero transition) rules * shared by both contexts -- explicitly NOT copied blindly from the * homepage's Featured Captures grid, but arrived at independently via live * testing during Phase 2C.2 and confirmed to land on the same breakpoint * structure for real, evidence-based reasons (see below), not by assumption. * * Scope: every selector in this file is a two-branch list -- * `body.woocommerce-shop:not(.search-results)` for the shop archive, and * `body.tax-product_cat:not(.search-results)` for product-category * archives (`tax-product_cat` is WordPress core's own generic * `tax-{taxonomy}` body class, added to every `product_cat` term archive -- * live-confirmed present on both the Compressor and Plugins category pages, * absent from the shop archive, search, and single-product pages). * `woocommerce-shop` is WooCommerce's own body class, added when `is_shop()` * is true -- but live testing found it is NOT unique to the shop archive: * WooCommerce's product search-results page also carries `woocommerce-shop` * (and the identical `ul.products.columns-3` markup), so `body.woocommerce- * shop` alone would leak these rules onto search results too. * `:not(.search-results)` excludes it on both branches -- confirmed on the * `tax-product_cat` branch too this phase, defense-in-depth (live testing * found `tax-product_cat` never actually co-occurs with `search-results` in * this site's behavior: a search query appended to a category URL resolves * to the generic sitewide search template instead of combining the two). * Does not use `body.woocommerce` or `body.woocommerce-page` (both broader * still, also present on single-product pages -- confirmed via live * body-class inspection during the Phase 2C.1 audit). * * Enqueued after tsc-tokens AND tsc-product-card. */ /* ============================================================ * GRID * ============================================================ * Native/default behavior before this file: 3 columns at 1440, 1024, AND * 768 (Astra's own `shop-grids` Customizer setting), 2 columns at 400 -- * live-confirmed during the Phase 2C.1 audit. * * Live-tested this phase with the real shared card (real Short * Descriptions, real images, no line-clamp) at every candidate: * * 1440: 3-column (433px cards, 518px row height) vs 4-column (317px * cards, 465px row height) -- neither clamps or wraps awkwardly; total * page scroll for 18 visible products is ~25% shorter at 4 columns * (5 rows vs 6). No readability cost measured at 317px (matches the * homepage's own proven 332px card width closely). 4-column chosen for * reduced page length at catalog scale and consistency with the * homepage. * * 1024: 3-column native default measured comfortable (315px cards, no * clamping/wrapping issues) -- kept as-is, no reason found to drop to 2. * * 768: the audit's flagged risk was confirmed real -- native 3-column * produces 229px cards with only a 142px-tall product image, cramped * for a "professional catalog feel." 2-column at this width produces * 356px cards with a 221px-tall image (matching the homepage's own * 768px Featured Captures card width, 356px, almost exactly) -- * meaningfully more spacious and consistent with the homepage. Switched * to 2-column here specifically because of this evidence, not because * the homepage happens to also use 2 at this width. * * 400/375: kept at the existing 2-column (no evidence of breakage -- * confirmed live, no overflow, no wrapping, TSC Rack's card included). * * Net result: this page's breakpoints end up numerically identical to * Featured Captures' (4 / 3 / 2 at the same three thresholds) -- a * consequence of independent testing arriving at the same answer, not a * copy/paste. */ body.woocommerce-shop:not(.search-results) ul.products.columns-3, body.tax-product_cat:not(.search-results) ul.products.columns-3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tsc-space-5); } @media (max-width: 1024px) { body.woocommerce-shop:not(.search-results) ul.products.columns-3, body.tax-product_cat:not(.search-results) ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { body.woocommerce-shop:not(.search-results) ul.products.columns-3, body.tax-product_cat:not(.search-results) ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); gap: var(--tsc-space-4); } } /* ============================================================ * MOBILE CATALOG CONTROLS -- Phase 2C.3 * ============================================================ * `.woocommerce-result-count` ("Showing 1-18 of 30 results") and * `.woocommerce-ordering` (the "Sort by..." markup and functionality are untouched -- only * layout (float/display/width/margin) changes. No custom JS sorting. * Live-verified without `!important`: this scope's specificity comfortably * out-ranks Astra's own float/width rules for these elements. */ /* ============================================================ * HERO -> CATALOG TRANSITION -- Phase 2C.6, compacted Phase 2C.7 * ============================================================ * Phase 2C.6 trimmed the native "ALL PRODUCTS" heading's bottom margin * (65px -> 24px) once the Hero was added above it, but live inspection * after that upload (Phase 2C.7 audit) found two more sources of the * "second landing page" feeling the heading margin alone didn't fix: * * 1. `#primary` itself (astra/inc/compatibility/woocommerce/ * class-astra-woocommerce.php, before_main_content_start()) carries * Astra's own global top-of-content margin -- live-measured 60px at * 1440/1024/768, tapering to 54.72px at 400/375 (Astra scales its * root font-size responsively and this margin is defined in em units * against it). That margin exists on every template site-wide to * separate content from the header; it was never about this specific * Hero, but now sits directly between the Hero's bottom edge and the * breadcrumb, and reads as a large, unintentional gap there. * * 2. The heading itself is still Astra's native, unscaled H1 -- 65px * (>921px), 40px (<=921px), 30px (<=544px), live-confirmed via * matched-rule inspection of Astra's own inline customizer CSS * (`h1, .entry-content :where(h1)`). At that size it still reads as a * second Hero headline competing with "THE TSC COLLECTION" rather * than a subordinate catalog/section heading, especially on mobile. * * Both are overridden below, scoped identically to the rest of this file * (both the `body.woocommerce-shop:not(.search-results)` and * `body.tax-product_cat:not(.search-results)` branches -- category * archives have the exact same excessive-spacing problem, live-confirmed * via the Compressor archive, since they share the same native markup) so * neither touches any other template. `#primary` also needs an ID-strength * selector to reliably outrank Astra's own rule for it; no `!important` * needed -- `body.woocommerce-shop:not(.search-results) #primary` already * carries an ID in its specificity. * * `--tsc-space-7` is used for the Hero->breadcrumb gap specifically * because tokens.css already redefines it (48px -> 20px) under the same * 767px mobile boundary used everywhere else in this file -- reuses the * existing responsive-token system instead of hand-rolling a new * breakpoint value just for this gap. * * The heading's font-size steps (48 / 38 / 24) are NOT copied from * Astra's own 65/40/30 tiers -- chosen independently so the heading reads * as clearly subordinate to the Hero's 700-weight Inter Display headline * at every breakpoint (roughly 70-75% of the native size at 1440, * tapering further at narrower widths where the Hero's own dominance * needs to be even clearer) while staying one line and legible at 375px. * No change to font-family, color, letter-spacing, case, or the heading * text itself -- font-size, margin-bottom, and line-height (which * recomputes automatically from Astra's own 1.4em rule once font-size * changes) are the only properties touched. */ body.woocommerce-shop:not(.search-results) #primary, body.tax-product_cat:not(.search-results) #primary { margin-top: var(--tsc-space-7); } body.woocommerce-shop:not(.search-results) .woocommerce-products-header__title, body.tax-product_cat:not(.search-results) .woocommerce-products-header__title { font-size: 48px; margin-bottom: var(--tsc-space-4); } @media (max-width: 1024px) { body.woocommerce-shop:not(.search-results) .woocommerce-products-header__title, body.tax-product_cat:not(.search-results) .woocommerce-products-header__title { font-size: 38px; } } @media (max-width: 767px) { body.woocommerce-shop:not(.search-results) .woocommerce-products-header__title, body.tax-product_cat:not(.search-results) .woocommerce-products-header__title { font-size: 24px; margin-bottom: var(--tsc-space-3); } } @media (max-width: 500px) { body.woocommerce-shop:not(.search-results) .woocommerce-result-count, body.tax-product_cat:not(.search-results) .woocommerce-result-count { float: none; display: block; width: 100%; margin: 0 0 var(--tsc-space-2) 0; } body.woocommerce-shop:not(.search-results) .woocommerce-ordering, body.tax-product_cat:not(.search-results) .woocommerce-ordering { float: none; display: block; width: 100%; margin: 0 0 var(--tsc-space-4) 0; } body.woocommerce-shop:not(.search-results) .woocommerce-ordering select, body.tax-product_cat:not(.search-results) .woocommerce-ordering select { width: 100%; } /* * Sort text left-alignment -- Phase 2C.4. The select box itself was * already flush with the result count and the grid (both left and * right edges match, confirmed live) -- the visible "Sort by latest" * text still read as indented because the native select carries * symmetric padding (Astra's own `.woocommerce-js .woocommerce-ordering * select { padding: 0.5em }`, woocommerce-grid.min.css), while * `.woocommerce-result-count` has none. Overriding only `padding-left` * (not the shorthand) removes that one offset and leaves `padding- * right` -- and with it Astra's custom dropdown-arrow background-image * positioning, confirmed live to still render correctly -- untouched. * This scope's specificity (0,3,2) already outranks Astra's competing * rule (0,2,1) without `!important` -- confirmed live. */ body.woocommerce-shop:not(.search-results) .woocommerce-ordering select, body.tax-product_cat:not(.search-results) .woocommerce-ordering select { padding-left: 0; } }