/* ========================================================================== product-cards.css — DESIGN-REVIEW FIX R1#2 + R1#10 (2026-07-28) Loaded via theme.yml at priority 250 (after theme.css 50 and module CSS 150). R1#2 — Blocker: add-to-cart on product cards was revealed only on desktop :hover (theme.css ~12725: .add-to-links absolute + hidden), so touch devices had NO way to add to cart from any listing page. Make it a persistently visible, in-flow row and promote the price above it. R1#10 — token unification on cards: one green primary CTA, de-emphasised compare, grey out-of-stock badge. Scoped to .js-product-miniature so nothing leaks outside product cards. ========================================================================== */ /* --- Add-to-cart row: always visible, in normal flow (was absolute overlay) --- */ .js-product-miniature.style_product_default .add-to-links { position: static; visibility: visible; opacity: 1; transform: none; -webkit-transform: none; background: transparent; margin-top: 8px; justify-content: center; } .js-product-miniature.style_product_default:hover .add-to-links { transform: none; -webkit-transform: none; } /* Primary CTA: the theme's secondary green, full-width, thumb-friendly. 2026-09-10: this never actually applied — theme.css:12795 (`.js-product-miniature.style_product_default .add-to-links li.cart`, 4 classes) outranks a 3-class selector, so `flex: 1` won and the CTA shared its row with the wishlist/compare icons, squeezing "ADD TO CART" onto two cramped lines. Match the theme's specificity so the button gets the row it was designed for. */ .js-product-miniature .add-to-links li.cart, .js-product-miniature.style_product_default .add-to-links li.cart { flex: 1 1 100%; } /* 2026-09-10: theme.css:12798 sets `padding: 0; padding-bottom: 5px` on this button (it was originally an underlined text link). R1 turned it into a solid block but never reset that, so the label sat flush against all four edges and wrapped mid-phrase. Pad it and centre the label with flex so the box looks the same whether "ADD TO CART" fits on one line or two. */ .js-product-miniature .add-to-links li.cart button.ajax_add_to_cart_button, .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button, .js-product-miniature.style_product_default .add-to-links li.cart button.ajax_add_to_cart_button, .js-product-miniature.style_product_default .add-to-links li.cart span.ajax_add_to_cart_button { display: flex; align-items: center; justify-content: center; width: 100%; background: #80b435 !important; /* theme's .btn-default background otherwise wins */ border: 0 !important; color: #ffffff !important; font-weight: 600; line-height: 1.3; padding: 11px 18px !important; /* overrides theme.css `padding: 0` */ min-height: 44px; /* WCAG tap target */ text-align: center; border-radius: 3px; transition: background 0.2s ease; } .js-product-miniature .add-to-links li.cart button.ajax_add_to_cart_button:hover, .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button:hover { background: #6d9a2d !important; color: #ffffff !important; } /* Out-of-stock variant of the same button (span.disabled) reads as inactive */ .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button.disabled { background: #e5e5e5 !important; color: #9b9b9b !important; cursor: not-allowed; } /* Mobile: theme.css:12813 shrinks the button to a 1.875rem icon-only square with `font-size: 0` and a glyph in :before. R1 wrote this override to undo that, but used a 4-class selector against the theme's 5-class one and silently lost, so phones kept getting the icon square. Selector raised (2026-09-10) — phones now get the same full-width labelled button as every other breakpoint. */ @media (min-width: 360px) and (max-width: 575px) { .js-product-miniature .add-to-links li.cart button.ajax_add_to_cart_button, .js-product-miniature .add-to-links li.cart .ajax_add_to_cart_button, .js-product-miniature.style_product_default .add-to-links li.cart button.ajax_add_to_cart_button, .js-product-miniature.style_product_default .add-to-links li.cart span.ajax_add_to_cart_button { display: flex; /* theme.css sets `display: inherit` at this breakpoint */ font-size: 0.8125rem; width: 100%; height: auto; line-height: 1.3; padding: 11px 14px !important; } /* the icon glyph the theme injects in place of the label */ .js-product-miniature.style_product_default .add-to-links li.cart button.ajax_add_to_cart_button:before, .js-product-miniature.style_product_default .add-to-links li.cart span.ajax_add_to_cart_button:before { content: none; } } /* Secondary icons (wishlist/quickview/compare) stay small beside the CTA */ .js-product-miniature .add-to-links li:not(.cart) { font-size: 0; } /* --- Price: promoted to the card's loudest element --- */ .js-product-miniature .product-price-and-shipping .price { font-size: 1.125rem; font-weight: 700; color: #253237; } .js-product-miniature .product-price-and-shipping .price.price-sale { color: #cf2929; } /* Elementor/homepage carousels use a higher-specificity selector (homepage-cards.css:160) */ .elementor-widget-pos_products .product-miniature .price, .elementor-widget-pos_products .js-product-miniature .product-price-and-shipping .price { font-size: 1.125rem; font-weight: 700; } /* --- De-emphasise "Add to comparison" (kbproductcompare hijacks the reviews hook slot, so it sat above the price as the only visible button) --- */ .js-product-miniature .kbpc-compare-button-container { margin: 4px 0 0; order: 10; } .js-product-miniature .kbpc-compare-button-container .kbpc-compare-btn, .js-product-miniature .kbpc-compare-button-container button { padding: 2px 8px; font-size: 11px; font-weight: 400; text-transform: none; background: transparent; border: 0; color: #9b9b9b; text-decoration: underline; } /* --- R1#10: out-of-stock badge must read as unavailable, not promotional --- (markup: