/**
* TSC Product Card -- shared CORE, Phase 2C.2, extended to category
* archives Phase 2C.7 (Hero System Extension), extended to single-product
* Related Products Phase 3D.
*
* Single visual source of truth for the product card used by:
* 1. Homepage Featured Captures (body.home .elementor-element-ae09b53)
* 2. WooCommerce shop / /all-products/ archive
* (body.woocommerce-shop:not(.search-results))
* 3. WooCommerce product-category archives -- Compressor, EQ, Preamp,
* Saturation & Tape, Plugins, and any other product_cat term
* (body.tax-product_cat:not(.search-results))
* 4. Single-product Related Products (body.single-product
* .tsc-product-section--related) -- Phase 3D. This is exactly the
* "future fourth opt-in context" this comment used to anticipate:
* tsc_render_related_products_section() (nam-product.php) calls
* WooCommerce's own `content-product.php` template part per related
* product, producing the identical `li.product.type-product` /
* `astra-shop-summary-wrap` markup the first three contexts already
* use, wrapped in `.tsc-product-section--related` instead of a fourth
* body-class -- so that class alone is the 4th branch's distinguishing
* selector, added explicitly to every rule below, same as the other
* three.
*
* Refactored out of featured-captures.css, which now holds ONLY homepage-
* specific concerns (heading, homepage grid). catalog.css (renamed from
* all-products.css this phase -- see that file's own header comment) holds
* the shared shop/category grid and catalog-intro rules. All four approved
* contexts are explicitly enumerated in every selector below via a
* comma-separated list -- this is deliberate, not incidental: it is what
* keeps this file from ever silently reaching a search result, an upsell/
* cross-sell loop (neither renders anywhere on this site today), or any
* OTHER single-product-page content. A future fifth opt-in context means
* adding a fifth explicit branch to each rule here, never an automatic
* inheritance. `.woocommerce ul.products li.product` (bare, unscoped) is
* intentionally never used anywhere in this file.
*
* `li.product.type-product` (not bare `li.product`) is used throughout as
* an additional, redundant safety net: WooCommerce only ever adds
* `type-product` to genuine product-loop items, never to the homepage's
* OTHER shortcode widget (`elementor-element-51a5d23`, a [product_categories]
* term loop using `li.product-category.product` -- confirmed during the
* Phase 2C.1 audit to share the bare `.product` class but never `type-
* product`).
*
* `:not(.search-results)` on every shop/category branch is required, not
* decorative: live testing found that WooCommerce's product search-results
* page carries the `woocommerce-shop` body class (and the identical
* `ul.products.columns-3` / `li.product.type-product` markup) of the real
* shop archive -- `body.woocommerce-shop` alone would have silently
* redesigned search results too. `search-results` (confirmed live, present
* only on that page) is the distinguishing class used to exclude it.
* `body.tax-product_cat` never co-occurs with `search-results` in this
* site's own behavior either (live-confirmed this phase: appending a search
* query string to a category URL resolves to the generic sitewide search
* template, which drops the `tax-product_cat` class entirely rather than
* combining it with `search-results`) -- the `:not(.search-results)` guard
* is kept on the category branch anyway, purely for defense-in-depth and
* consistency with the rest of this file, not because a live gap was found.
*
* Enqueued after tsc-tokens only (same reasoning as hero.css/shop-by-
* category.css: typography.css explicitly excludes the homepage, and this
* file needs to work identically across all three contexts, so it cannot
* depend on typography.css's homepage-excluding rules either).
*/
/* ============================================================
* 1. CARD SHELL
* ============================================================
* Flat white surface, thin neutral border, square geometry, no shadow.
* `position: relative` is required by the NEW/SALE badge rule in
* woocommerce.css, which is global and unscoped -- restated here explicitly
* per-context rather than left to depend on that file's own defaults.
*/
body.home .elementor-element-ae09b53 li.product.type-product,
body.woocommerce-shop:not(.search-results) li.product.type-product,
body.tax-product_cat:not(.search-results) li.product.type-product,
body.single-product .tsc-product-section--related li.product.type-product {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--tsc-surface-light);
border: 1px solid var(--tsc-border-light);
border-radius: 0;
overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
body.home .elementor-element-ae09b53 li.product.type-product,
body.woocommerce-shop:not(.search-results) li.product.type-product,
body.tax-product_cat:not(.search-results) li.product.type-product,
body.single-product .tsc-product-section--related li.product.type-product {
transition: border-color 160ms ease;
}
}
body.home .elementor-element-ae09b53 li.product.type-product:hover,
body.home .elementor-element-ae09b53 li.product.type-product:focus-within,
body.woocommerce-shop:not(.search-results) li.product.type-product:hover,
body.tax-product_cat:not(.search-results) li.product.type-product:hover,
body.woocommerce-shop:not(.search-results) li.product.type-product:focus-within,
body.tax-product_cat:not(.search-results) li.product.type-product:focus-within,
body.single-product .tsc-product-section--related li.product.type-product:hover,
body.single-product .tsc-product-section--related li.product.type-product:focus-within {
border-color: var(--tsc-accent);
}
/* ============================================================
* 2. QUICK-ADD REMOVAL
* ============================================================
* Astra's floating icon-overlay quick-add (`.ast-on-card-button`) is a
* redundant control -- confirmed live on all three approved contexts to
* share the exact same `add_to_cart_button`/`ajax_add_to_cart` classes,
* href, and data-product_id as the real text button in
* `.astra-shop-summary-wrap` below it. Hiding it here removes only the
* on-image icon; the real button is untouched and fully functional. Scoped
* to these three contexts only -- Astra's quick-add remains exactly as-is
* everywhere else (search, related products, upsells, etc.).
*/
body.home .elementor-element-ae09b53 .ast-on-card-button,
body.woocommerce-shop:not(.search-results) .ast-on-card-button,
body.tax-product_cat:not(.search-results) .ast-on-card-button,
body.single-product .tsc-product-section--related .ast-on-card-button {
display: none;
}
/* ============================================================
* 3. IMAGE AREA
* ============================================================
* 1131x704 source-format aspect ratio, object-fit: contain (never crops).
* Overrides the legacy `astra-child/assets/css/woocommerce.css` rule
* (`.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img
* { height:300px; background:#111 }`, specificity 0,4,3, still correctly
* serving unrelated WooCommerce contexts and deliberately left untouched)
* via higher specificity (`li.product.type-product` qualifier brings this
* to 0,5,3 per context) -- no `!important` needed.
*
* IMAGE-FILL BUG FOUND + FIXED DURING THIS PHASE: the original homepage
* implementation used `display:flex; align-items:center; justify-content:
* center` on `.astra-shop-thumbnail-wrap` with `width:100%; height:100%`
* on the `![]()
`. Live testing on /all-products/ during this phase found
* that combination silently fails there -- the `![]()
`, as a flex item
* with `align-items:center` (not `stretch`), fell back to its raw
* HTML width/height attributes (300x187) instead of filling the box,
* regardless of specificity or `!important`. The SAME investigation then
* found this is not actually All-Products-specific: a fresh, cache-busted
* load of the currently-live homepage exhibited the identical bug (image
* rendering undersized inside its box) despite passing verification in
* earlier phases -- something changed the effective behavior since that
* verification (not fully diagnosable from outside; possibly a WordPress/
* WooCommerce/Astra update on the live server). The fix removes the
* flex-centering entirely: `display:block` on the wrapper, with the image
* itself set to `width:100%; height:100%; object-fit:contain` -- object-fit
* already does the "contain and center" job on its own, so the flex
* properties were redundant even when things worked, and this pattern does
* not exhibit the percentage-height-in-a-flex-cross-axis failure mode at
* all. Live-verified fixing both contexts identically (homepage image
* measured filling its box correctly after the fix; /all-products/ likewise).
*/
body.home .elementor-element-ae09b53 .astra-shop-thumbnail-wrap,
body.woocommerce-shop:not(.search-results) .astra-shop-thumbnail-wrap,
body.tax-product_cat:not(.search-results) .astra-shop-thumbnail-wrap,
body.single-product .tsc-product-section--related .astra-shop-thumbnail-wrap {
position: relative;
display: block;
aspect-ratio: 1131 / 704;
background-color: var(--tsc-bg-light);
overflow: hidden;
}
body.home .elementor-element-ae09b53 li.product.type-product .astra-shop-thumbnail-wrap img,
body.woocommerce-shop:not(.search-results) li.product.type-product .astra-shop-thumbnail-wrap img,
body.tax-product_cat:not(.search-results) li.product.type-product .astra-shop-thumbnail-wrap img,
body.single-product .tsc-product-section--related li.product.type-product .astra-shop-thumbnail-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
body.home .elementor-element-ae09b53 .astra-shop-thumbnail-wrap img,
body.woocommerce-shop:not(.search-results) .astra-shop-thumbnail-wrap img,
body.tax-product_cat:not(.search-results) .astra-shop-thumbnail-wrap img,
body.single-product .tsc-product-section--related .astra-shop-thumbnail-wrap img {
transition: transform 400ms ease;
}
}
body.home .elementor-element-ae09b53 li.product.type-product:hover .astra-shop-thumbnail-wrap img,
body.home .elementor-element-ae09b53 li.product.type-product:focus-within .astra-shop-thumbnail-wrap img,
body.woocommerce-shop:not(.search-results) li.product.type-product:hover .astra-shop-thumbnail-wrap img,
body.tax-product_cat:not(.search-results) li.product.type-product:hover .astra-shop-thumbnail-wrap img,
body.woocommerce-shop:not(.search-results) li.product.type-product:focus-within .astra-shop-thumbnail-wrap img,
body.tax-product_cat:not(.search-results) li.product.type-product:focus-within .astra-shop-thumbnail-wrap img,
body.single-product .tsc-product-section--related li.product.type-product:hover .astra-shop-thumbnail-wrap img,
body.single-product .tsc-product-section--related li.product.type-product:focus-within .astra-shop-thumbnail-wrap img {
transform: scale(1.02);
}
/* ============================================================
* 4. INFO AREA -- flex column, vertical-rhythm mechanism
* ============================================================
* No line-clamp, no reserved fixed heights anywhere in this file -- title
* and Short Description always render their complete natural content
* (confirmed necessary: real copy was visibly ellipsis-truncated by an
* earlier clamped version, which is not acceptable per approved direction).
*
* Rhythm still holds without clamping because `li.product.type-product` is
* a CSS Grid item with no explicit height, so it receives the grid's
* default `align-items: stretch` -- each card in a row is stretched to the
* height of the tallest card in that row (a grid default, not new CSS).
* `flex: 1 1 auto` here plus `margin-top: auto` on `.price` (section 5)
* then anchors the price/rating/button group to each card's own
* (row-stretched) bottom edge regardless of title/description length.
* Live-verified on both approved contexts with real, unclamped copy: every
* card within the same grid row reports an identical height, and the Add
* to Cart button lands at the same absolute Y position within each row.
*/
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: auto;
padding: var(--tsc-space-4);
gap: var(--tsc-space-2);
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .ast-loop-product__link,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .ast-loop-product__link,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .ast-loop-product__link,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .ast-loop-product__link {
text-decoration: none;
}
body.home .elementor-element-ae09b53 .woocommerce-loop-product__title,
body.woocommerce-shop:not(.search-results) .woocommerce-loop-product__title,
body.tax-product_cat:not(.search-results) .woocommerce-loop-product__title,
body.single-product .tsc-product-section--related .woocommerce-loop-product__title {
margin: 0;
font-family: var(--tsc-font-display);
font-weight: 600;
font-size: 1rem;
line-height: var(--tsc-lh-heading);
color: var(--tsc-text-light);
text-transform: none; /* overrides Astra's default uppercase H2 Customizer setting, confirmed active on /all-products/ */
}
/* ============================================================
* 5. SHORT DESCRIPTION
* ============================================================
* Markup printed by inc/product-cards.php's tsc_product_card_short_
* description(). Visually subordinate to the title, muted light-surface
* text color, readable size. No line-clamp -- full copy always renders.
*/
body.home .elementor-element-ae09b53 .tsc-card-short-description,
body.woocommerce-shop:not(.search-results) .tsc-card-short-description,
body.tax-product_cat:not(.search-results) .tsc-card-short-description,
body.single-product .tsc-product-section--related .tsc-card-short-description {
margin: 0;
font-family: var(--tsc-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--tsc-text-muted-light);
}
/* ============================================================
* 6. RATING + PRICE
* ============================================================
* tsc_product_loop_rating_html() (inc/woocommerce-hooks.php) is NOT
* modified -- global, sitewide, unchanged for every other page. It nests
* `.tsc-product-rating` inside `.price`, after the amount. `flex-direction:
* column-reverse` visually flips that to [rating, amount] with zero markup
* or PHP change. `margin-top: auto` is the bottom-anchor from section 4.
* `padding-top` groups purchase info as a distinct block, set apart from
* the title/description above it.
*/
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--tsc-space-1);
margin-top: auto;
margin-bottom: 0;
padding-top: var(--tsc-space-2);
font-family: var(--tsc-font-body);
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price .woocommerce-Price-amount {
font-family: var(--tsc-font-body);
font-size: var(--tsc-fs-price);
font-weight: 600;
color: var(--tsc-text-light);
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price .tsc-product-rating,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price .tsc-product-rating {
margin: 0;
font-size: 0.75rem;
color: var(--tsc-text-muted-light);
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price .tsc-product-rating__stars,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating__stars,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating__stars,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price .tsc-product-rating__stars {
color: var(--tsc-text-muted-light); /* quieter than the global rule's bright amber -- "compact, visually quiet" per the original brief, homepage/all-products-scoped only. A Phase 2C.3 experiment briefly recolored just the star glyphs with --tsc-accent (requiring a separate .tsc-product-rating__glyphs wrapper in woocommerce-hooks.php); not approved, reverted here, and that now-unnecessary markup was removed from woocommerce-hooks.php rather than left in place unused. */
}
/* ============================================================
* 7. ADD TO CART BUTTON
* ============================================================
* Flat, outlined at rest; dark-ink invert on hover/focus (no accent fill,
* no rounded SaaS treatment). On /all-products/ this also replaces Astra's
* current default solid-black button -- confirmed live as a completely
* different, unrelated style (Astra's own Customizer button color, not any
* child-theme rule) -- with the same restrained treatment already approved
* on the homepage.
*/
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .add_to_cart_button,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .add_to_cart_button {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
padding: var(--tsc-space-3) var(--tsc-space-4);
border: 1px solid var(--tsc-text-light);
border-radius: 0;
background-color: transparent;
color: var(--tsc-text-light);
font-family: var(--tsc-font-body);
font-size: var(--tsc-fs-body);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .add_to_cart_button,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .add_to_cart_button {
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .add_to_cart_button:hover,
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .add_to_cart_button:focus-visible,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button:hover,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button:hover,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button:focus-visible,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button:focus-visible,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .add_to_cart_button:hover,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .add_to_cart_button:focus-visible {
background-color: var(--tsc-text-light);
border-color: var(--tsc-text-light);
color: var(--tsc-surface-light);
}
/* ============================================================
* 8. MOBILE TYPOGRAPHY DENSITY (<=768px)
* ============================================================
* Explicit px, not rem -- this site's font-size is itself
* responsively scaled by Astra's own Customizer setting (confirmed live:
* 15px desktop, 13.68px mobile), so rem-based sizing already shrinks
* automatically in an amount not controllable from this file. Values
* confirmed live-appropriate on the homepage and shop/category contexts: at
* this breakpoint their grids independently arrive at matching ~170px
* (400px viewport) mobile card widths (see featured-captures.css /
* catalog.css), so one shared set of sizes is correct across contexts
* rather than a coincidence. Not re-verified against category archives'
* actual card width this phase (their grid was native/undesigned before
* this pass) -- flagged in the Phase 2C.7 report as needing a live check
* after upload.
*/
@media (max-width: 768px) {
body.home .elementor-element-ae09b53 .woocommerce-loop-product__title,
body.woocommerce-shop:not(.search-results) .woocommerce-loop-product__title,
body.tax-product_cat:not(.search-results) .woocommerce-loop-product__title,
body.single-product .tsc-product-section--related .woocommerce-loop-product__title {
font-size: 14.5px;
}
body.home .elementor-element-ae09b53 .tsc-card-short-description,
body.woocommerce-shop:not(.search-results) .tsc-card-short-description,
body.tax-product_cat:not(.search-results) .tsc-card-short-description,
body.single-product .tsc-product-section--related .tsc-card-short-description {
font-size: 12.5px;
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price .woocommerce-Price-amount,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price .woocommerce-Price-amount {
font-size: 16px;
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .price .tsc-product-rating,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .price .tsc-product-rating,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .price .tsc-product-rating {
font-size: 10.5px;
}
body.home .elementor-element-ae09b53 .astra-shop-summary-wrap .add_to_cart_button,
body.woocommerce-shop:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.tax-product_cat:not(.search-results) .astra-shop-summary-wrap .add_to_cart_button,
body.single-product .tsc-product-section--related .astra-shop-summary-wrap .add_to_cart_button {
font-size: 13px;
padding: 13px var(--tsc-space-3);
}
}
/* ============================================================
* 9. NEW/SALE BADGE -- MOBILE SCALE (<=500px)
* ============================================================
* Phase 2C.5. `.tsc-product-badge` (with `--new` or `--sale`, printed by
* tsc_custom_product_badge() in inc/woocommerce-hooks.php) is styled by a
* global, unscoped rule in assets/css/woocommerce.css: fixed 60x30px,
* 12px font, `top`/`left` inset in `em` units (1.2em), pill radius,
* --tsc-accent fill. Confirmed live (two real "NEW" badges) that width/
* height/font-size are fixed px, not responsive to card width -- at this
* card system's ~170px mobile card width that fixed 60px badge measured
* 35% of the card/image width, visibly oversized relative to the same
* badge at a 317-433px desktop card (~14-19%). Not a bug in the legacy
* rule (it still serves other WooCommerce contexts correctly at their own
* widths) -- scoped down only for the two approved card contexts.
*
* Only width/height/font-size are overridden here (~73% of the original
* 60x30/12px -- within the requested 70-75% range). `top`/`left` are left
* completely alone: since the legacy rule expresses them in `em`, they
* scale down automatically with the smaller `font-size` set here (1.2em x
* 9px = 10.8px, vs. the original 1.2em x 12px = 14.4px) -- a
* proportional inset shrink with zero extra CSS. Pill shape (border-
* radius) and fill color are untouched, inherited from the legacy rule.
* `li.product.type-product` qualifier brings this to (0,5,2), comfortably
* over the legacy rule's (0,4,2) -- no `!important` needed, confirmed live.
*/
@media (max-width: 500px) {
body.home .elementor-element-ae09b53 li.product.type-product .tsc-product-badge,
body.woocommerce-shop:not(.search-results) li.product.type-product .tsc-product-badge,
body.tax-product_cat:not(.search-results) li.product.type-product .tsc-product-badge,
body.single-product .tsc-product-section--related li.product.type-product .tsc-product-badge {
width: 44px;
height: 22px;
font-size: 9px;
}
}