/* ========================================================================== The product card + the grid it sits in. Shared by the shop archive, the category archives, blocks/product-grid and blocks/category-row. READ THIS BEFORE EDITING — two things here look redundant and are not. 1. `ul.products::before/::after`. WooCommerce core adds clearfix pseudo-elements to ul.products. In a CSS grid they become grid ITEMS, so the first real card is pushed out of the first cell and every card shifts right by one. They have to die, and at matching specificity plus !important because core sets them from a stylesheet we do not control. 2. Every rule appears twice — once bare, once under `.woocommerce`. WooCommerce's own loop styles are scoped `.woocommerce ul.products li.product …`. On the shop that ancestor exists; inside a home-page product-grid block it does not, because has no `.woocommerce` class. Writing only the bare selector loses to core on the shop; writing only the scoped one loses nothing on the home page but styles nothing either. Both are declared, and inc/woocommerce.php enqueues this file at wp_enqueue_scripts priority 20 — AFTER woocommerce.css — so equal specificity is settled by source order and no !important is needed. (effectus_wc_render_product_loop() also wraps block grids in a `.woocommerce` div, mirroring Woo's own [products] shortcode, so the two contexts really are identical.) ========================================================================== */ /* -- 1. kill the clearfix ------------------------------------------------- */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { content: none !important; display: none !important; } /* -- 2. the grid ---------------------------------------------------------- */ ul.products, .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; } /* Tablet: 2 up. The original stayed 3-up at every breakpoint, which produced 108px-wide cards on a 390px phone. */ @media (max-width: 1024px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 640px) { ul.products, .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); gap: 24px; } } /* Undo the float grid core would otherwise apply to each cell. */ ul.products li.product, .woocommerce ul.products li.product { float: none; clear: none; width: auto; margin: 0; padding: 0; text-align: left; list-style: none; } ul.products li.product::before, ul.products li.product::after, .woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; } /* -- 3. the card ---------------------------------------------------------- */ /* The card's whole visual identity on the source site: a 3px brand-green outline, no radius, no fill, and a soft drop shadow on hover. */ .effectus-product-card__inner { display: flex; flex-direction: column; height: 100%; border: 3px solid var(--effectus-brand); border-radius: 0; background: var(--effectus-card-bg); transition: box-shadow .25s var(--effectus-ease); } .woocommerce ul.products li.product .effectus-product-card__inner { border: 3px solid var(--effectus-brand); border-radius: 0; background: var(--effectus-card-bg); } .effectus-product-card__inner:hover, .effectus-product-card__inner:focus-within { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); } /* Media box. woocommerce_thumbnail_cropping is off site-wide, so the source images are every aspect ratio going. A fixed ratio with object-fit: contain keeps the card tops aligned across a row without cropping anything off a rack photo. */ .effectus-product-card__media { display: block; aspect-ratio: 4 / 3; padding: 14px; background: var(--effectus-card-bg); } .effectus-product-card__media img, .woocommerce ul.products li.product .effectus-product-card__media img { width: 100%; height: 100%; margin: 0; object-fit: contain; box-shadow: none; } .effectus-product-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0 18px 18px; } /* Full title, linked, never truncated. */ .effectus-product-card__title, .woocommerce ul.products li.product .effectus-product-card__title { margin: 0 0 .45em; padding: 0; font-family: var(--effectus-font-heading); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--effectus-text); text-wrap: balance; } .effectus-product-card__title a { color: inherit; text-decoration: none; } .effectus-product-card__title a:hover, .effectus-product-card__title a:focus-visible { color: var(--effectus-brand); } /* GOTCHA 3 — `margin-top: auto` on the CTA pins it to the card's bottom edge. When a two-line title fills the card that auto gap collapses to nothing and the blurb jams against the button. The fixed margin-bottom guarantees a minimum gap survives at any title length. */ .effectus-product-card__excerpt, .woocommerce ul.products li.product .effectus-product-card__excerpt { margin: 0 0 20px; font-size: .9rem; line-height: 1.55; color: #444; } .effectus-product-card__cta, .woocommerce ul.products li.product a.button.effectus-product-card__cta, .woocommerce ul.products li.product .effectus-product-card__cta { align-self: flex-start; margin-top: auto; padding: .7em 1.25em; border-radius: 1px; background: var(--effectus-brand); color: var(--effectus-text-invert); font-size: .85rem; font-weight: 600; line-height: 1; text-decoration: none; } .effectus-product-card__cta:hover, .effectus-product-card__cta:focus-visible, .woocommerce ul.products li.product .effectus-product-card__cta:hover { background: var(--effectus-accent); color: var(--effectus-text-invert); } /* No product on this site has a price, so nothing should ever render one. This is the safety net for a price element arriving from core or a plugin: the old cards emitted an empty

on every product. */ ul.products li.product .price, .woocommerce ul.products li.product .price, ul.products li.product .star-rating, .woocommerce ul.products li.product .star-rating { display: none; } /* Core's own loop title/button, in case anything renders the stock card. */ .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: 1.05rem; }