/*
 * Product cards of the shop, category pages and "You may also like" (switch-storefront swc_product_card).
 * The price is the size of the name (16px), then the rating; an out-of-stock product gets a badge on its
 * image, not only a grey photo.
 * The selectors are long because the design system sets the card price with !important; the doubled
 * .ac-price outweighs its :is(... .woocommerce ul.products li.product .price), which counts four classes.
 */
html body.switch-native #wrapper #main ul.ac-products li.ac-product div.ac-product-copy div.ac-price.ac-price{font-size:16px!important;line-height:1.4!important}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-product-rating{margin:0 0 8px}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-product-rating .star-rating{font-size:16px}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-review-count{font-size:12px;color:var(--sw-muted)}
html body.switch-native #wrapper #main :is(ul.ac-products li.ac-product,.sw-cart-recommendations) .ac-review-average{font:700 14px/1 var(--sw-font-body);color:var(--sw-ink)}
/* "VAT where applicable" after the price: smaller and quieter; the info button keeps its 24px target. */
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-price .vat-label{font-size:12px!important;font-weight:400;color:var(--sw-muted);white-space:nowrap}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-price .vat-label button.vat-icon::before{width:14px;height:14px}
/* Omnibus lowest price (wc-price-history) under the card price: its own line, readable, quieter than the price. */
html body.switch-native #wrapper #main ul.ac-products li.ac-product .wc-price-history{display:block;margin:4px 0 0;font-size:14px!important;line-height:1.4;font-weight:400;color:var(--sw-ink)}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .wc-price-history .amount{font-weight:400}
html body.switch-native #wrapper #main ul.ac-products li.ac-product .ac-out-of-stock{position:absolute;top:12px;left:12px;z-index:2;margin:0;padding:.25em .75em;border:1px solid var(--sw-ink);border-radius:4px;background:var(--sw-ink);color:var(--sw-white);font:600 12px/1.6 var(--sw-font-body);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
/* Adding to the cart shows a notification (cart-feedback.js) instead of a "View cart" link under the button. */
html body.switch-native #wrapper #main :is(ul.ac-products,ul.products) a.added_to_cart{display:none}
/* Up-sells and related products keep WooCommerce's "products" class, whose clearfix ::before/::after
   would take the first and last cells of the card grid. */
html body.switch-native #wrapper #main .sw-product-cards ul.ac-products::before,
html body.switch-native #wrapper #main .sw-product-cards ul.ac-products::after{content:none;display:none}
/* On product pages woocommerce.css styles every span in a rating: the review count inside the hidden
   "Rated … based on N customer ratings" text became an absolute box with "SSSSS" over the first star. */
html body.switch-native #wrapper #main .ac-product-rating .star-rating span span{position:static;float:none;padding:0}
html body.switch-native #wrapper #main .ac-product-rating .star-rating span span::before{content:none}
/* Catalogue pagination: the same 44px boxes as the search results (results.css), numbers centred.
   paginate_links() also gives the list itself the page-numbers class, hence li>. */
html body.switch-native #wrapper #main .ac-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
html body.switch-native #wrapper #main .ac-pagination li{margin:0;padding:0}
html body.switch-native #wrapper #main .ac-pagination li>.page-numbers{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;height:44px;margin:0;padding:0 12px;border:1px solid var(--sw-line);background:var(--sw-white);color:var(--sw-ink);font:400 16px/1 var(--sw-font-body);text-decoration:none}
html body.switch-native #wrapper #main .ac-pagination li>.page-numbers.current{background:var(--sw-ink);border-color:var(--sw-ink);color:var(--sw-white)}
html body.switch-native #wrapper #main .ac-pagination li>.page-numbers.dots{border:0;background:none}
html body.switch-native #wrapper #main .ac-pagination a.page-numbers:hover{border-color:var(--sw-ink)}