/** * section-catalog.css — the product card inside a WooCommerce product grid. * * Partner of woocommerce/content-product.php. That loop item renders the theme's * .bedi-pcard (template-parts/product/card.php) inside li.product.bedi-pcell, so * every archive, search-result and related-products tile is the SAME component * as the front-page rail's card. This file does two things and nothing else: * * 1. STRIPS WOOCOMMERCE'S DEFAULT LOOP-CARD BOX. woo.css section 7 gives * li.product a border, a surface fill and padding — the "wrapper" the card * is explicitly designed NOT to have ("our new style cards, without * wrapper"). Removed here, for the .bedi-pcell cell only, so the card sits * directly on the page and is separated from its neighbours by grid gap * alone. The grid itself — ul.products, its 1/2/3/4 columns and its gaps — * is woo.css's and is left untouched. * * 2. TAKES BACK THE FEW CARD SURFACES WOO.CSS REACHES INTO at a higher * specificity than the card's own rules. On the homepage the card owns its * look because woo.css is not loaded there; in a shop grid woo.css IS * present, and two of its rules win on specificity — `li.product a img` * (which frames the media with a margin, a radius and a muted fill) and * `.woocommerce a.button` / `li.product a.button` (which repaints the * add-to-cart button in Woo's shop-button skin). Left alone they would make * the archive card differ from the identical-looking homepage one. They are * re-asserted below with the card's own --prail-* tokens, which .bedi-pcard * now carries itself (see the shared token block in section-products.css). * * Registered as 'bedi-section-catalog', enqueued with bedi-woo and the card CSS * on WooCommerce contexts by Bedi\Theme\Assets. */ /* ------------------------------------------------------------------------- * 1. The cell — no box * ---------------------------------------------------------------------- */ .woocommerce ul.products li.product.bedi-pcell, .woocommerce-page ul.products li.product.bedi-pcell { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; overflow: visible; } .woocommerce ul.products li.product.bedi-pcell > .bedi-pcard, .woocommerce-page ul.products li.product.bedi-pcell > .bedi-pcard { flex: 1 1 auto; inline-size: 100%; block-size: 100%; } /* ------------------------------------------------------------------------- * 2a. The media box and image — a real square that never stretches, no wrapper * * TWO THINGS GO WRONG for the card's media inside a WooCommerce grid that do not * on the fixed-width rail, and both are fixed here: * * THE BOX BLEW UP IN HEIGHT. .bedi-pcard__media is a flex item of the card, * and a flex item's default min-block-size is `auto` — its content's minimum * size. In a grid whose rows auto-size to content, that let the product image * drive the media past its own 1:1 aspect-ratio (a 196px image in a 212px * column rendered a ~1500px-tall box). The image is taken out of flow with * position:absolute so it can no longer inflate the box, and min-block-size:0 * lets the box keep its aspect-ratio square. * * THE GREY WRAPPER. Per the brief ("without image bck wrapper, image * contain"), the media's --prail-media-bg fill and the link's padding are * dropped, so the product photo sits directly on the page and is object-fit: * contain — never cropped, never stretched. * ---------------------------------------------------------------------- */ .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__media, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__media { position: relative; flex: 0 0 auto; min-block-size: 0; aspect-ratio: 1 / 1; inline-size: 100%; background: none; overflow: hidden; } .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__media-link, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__media-link { background: none; padding: 0; } .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__media img, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: none; object-fit: contain; object-position: center; aspect-ratio: auto; } .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__media img.woocommerce-placeholder, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__media img.woocommerce-placeholder { inset: 25%; inline-size: 50%; block-size: 50%; height: 50%; } /* ------------------------------------------------------------------------- * 2b. The add-to-cart button — take it back from woo.css's shop-button skin. * ---------------------------------------------------------------------- */ .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__cart, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__cart { display: flex; align-items: center; justify-content: center; gap: var(--prail-cart-gap); inline-size: 100%; min-width: 0; min-block-size: var(--prail-cart-min-block); margin: 0; padding: var(--bedi-space-1) var(--bedi-space-2); border: 0; border-radius: var(--prail-cart-radius); background-color: var(--prail-cart-bg); box-shadow: var(--bedi-shadow-1); color: var(--prail-cart-ink); font-size: var(--prail-cart-size); font-weight: var(--prail-cart-weight); line-height: var(--bedi-leading-snug, 1.4); text-align: center; text-decoration: none; } .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__cart:hover, .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__cart:focus-visible, .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__cart:active, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__cart:hover, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__cart:focus-visible, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__cart:active { border: 0; background-color: var(--prail-cart-bg); color: var(--prail-cart-ink); } .woocommerce ul.products li.product.bedi-pcell .bedi-pcard__cart svg, .woocommerce-page ul.products li.product.bedi-pcell .bedi-pcard__cart svg { block-size: var(--prail-cart-icon); inline-size: var(--prail-cart-icon); flex: none; }