/* * Shared WooCommerce loop card. Enqueued GLOBALLY (priority 20, after woocommerce.css) so it * styles both shop archives AND the ud/product-grid + ud/category-tiles blocks on non-shop * pages (whose lacks .woocommerce). */ /* ── Gotcha 1: ul.products clearfix pseudo-elements become grid cells and shift every card. Kill them with matching specificity + !important. ── */ .woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { content: none !important; display: none !important; } /* ── The grid ── */ ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem); grid-template-columns: repeat(var(--ud-cols, 4), minmax(0, 1fr)); } ul.products.columns-2 { --ud-cols: 2; } ul.products.columns-3 { --ud-cols: 3; } ul.products.columns-4 { --ud-cols: 4; } @media (max-width: 980px) { ul.products { --ud-cols: 3 !important; } } @media (max-width: 760px) { ul.products { --ud-cols: 2 !important; } } @media (max-width: 460px) { ul.products { --ud-cols: 1 !important; } } /* ── The card (shared base; re-asserted under .woocommerce below for parity) ── */ ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; background: var(--ud-surface); border: 1px solid var(--ud-line); border-radius: var(--ud-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s var(--ud-ease), box-shadow 0.2s var(--ud-ease), border-color 0.2s var(--ud-ease); } ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--ud-shadow); border-color: color-mix(in srgb, var(--ud-accent) 40%, var(--ud-line)); } ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; } ul.products li.product img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: 0 !important; background: var(--ud-surface-2); } ul.products li.product .woocommerce-loop-product__title { font-family: var(--ud-font-head); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ud-text); padding: 0.9rem 1rem 0.2rem; } /* Price: fixed margin-bottom so a 2-line title never jams it against the button (gotcha 3). */ ul.products li.product .price { display: block; padding: 0 1rem; color: var(--ud-muted); font-weight: 600; margin: 0.2rem 0 0.9rem; } ul.products li.product .price del { color: var(--ud-muted); opacity: 0.6; font-weight: 400; } ul.products li.product .price ins { color: var(--ud-accent-text); text-decoration: none; } /* Button pinned to the card bottom. */ ul.products li.product .button, ul.products li.product .added_to_cart { margin: auto 1rem 1rem !important; text-align: center; background: var(--ud-accent); color: var(--ud-accent-ink); font-family: var(--ud-font-head); font-weight: 600; font-size: 0.9rem; padding: 0.6em 1em; border-radius: var(--ud-radius-sm); border: none; transition: transform 0.18s var(--ud-ease), box-shadow 0.18s var(--ud-ease); } ul.products li.product .button:hover { transform: translateY(-2px); box-shadow: var(--ud-shadow-sm); color: var(--ud-accent-ink); } ul.products li.product .onsale { position: absolute; margin: 0.7rem; background: var(--ud-ink); color: var(--ud-on-dark); font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.6em; border-radius: 999px; min-height: 0; min-width: 0; line-height: 1.4; z-index: 2; } ul.products li.product { position: relative; } /* ── Gotcha 2: WooCommerce's own loop styles are .woocommerce-scoped and only match on shop/archive - NOT a homepage block. Re-assert the SAME design under .woocommerce so cards are identical in both places. Enqueued after woocommerce.css → equal specificity wins by source order, no !important needed (except where Woo itself uses !important). ── */ .woocommerce ul.products li.product { text-align: left; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0.9rem 1rem 0.2rem; } .woocommerce ul.products li.product .button { display: inline-block; } .woocommerce ul.products li.product .price { color: var(--ud-muted); } .woocommerce ul.products li.product .price ins { color: var(--ud-accent-text); }