/** * ════════════════════════════════════════════════════════════════════════════ * PRODUCT ARCHIVE CARDS — DSS Theme * Category / tag archives + the shop archive. * ════════════════════════════════════════════════════════════════════════════ * * A port of the DSS search page card (assets/styles/search.css, the * `.dss-search .card` block) onto WooCommerce's own loop markup, so the search * grid, the related-products grid and the category grid all read as one design. * * ───────────────────────────────────────────────────────────────────────────── * SCOPE — WHY BODY CLASSES AND NOT A THEME WRAPPER * ───────────────────────────────────────────────────────────────────────────── * Every rule is scoped to the archive body classes WordPress emits itself: * * body.tax-product_cat product category archives * body.tax-product_tag product tag archives * body.post-type-archive-product the shop archive * * These are core-generated, always present, and — importantly — never present * on a single product page. That means this file cannot collide with section 12 * of single-product.css, which styles the related-products grid using the same * WooCommerce markup. Neither file needs to know about the other. * * If templates/archive-product.twig wraps its content in a theme class, these * selectors still work; the wrapper simply is not needed. * * ───────────────────────────────────────────────────────────────────────────── * MARKUP THIS EXPECTS * ───────────────────────────────────────────────────────────────────────────── * li.product * a.woocommerce-LoopProduct-link ← image + title + price * div.dss-loop-thumb ← from archive-product.php * img * span.dss-loop-cat ← category badge * h2.woocommerce-loop-product__title * span.price * a.button ← Select options / Add to cart * div.dss-loop-wishlist ← from dss-loop-card-extras.php * div.tinv-wraper.tinv-wishlist * * `.dss-loop-thumb`, `.dss-loop-cat` and `.dss-loop-wishlist` come from PHP. * Without those files the card still styles correctly — it simply has no badge * and no heart; those rules match nothing and cost nothing. * * ───────────────────────────────────────────────────────────────────────────── * THE ONE STRUCTURAL CONSTRAINT * ───────────────────────────────────────────────────────────────────────────── * WooCommerce renders the button and the wishlist as SIBLINGS of * a.woocommerce-LoopProduct-link, not inside it. So the card's white box, * radius, shadow and padding go on `li.product`, NOT on the anchor — put them * on the anchor and the yellow button renders outside the white box. * * The wishlist is a sibling for a second reason: the plugin's button is itself * an , and an anchor nested inside the card anchor is invalid HTML that * browsers resolve by auto-closing the outer one, collapsing the card. * ════════════════════════════════════════════════════════════════════════════ */ body.tax-product_cat ul.products, body.tax-product_tag ul.products, body.post-type-archive-product ul.products { /* Design tokens, declared here so this file is self-contained and does not depend on single-product.css being loaded on archives. Values are lifted from the search card. */ --dss-yellow: #fce224; --dss-yellow-hover: black; --dss-text: #1a1a1a; --dss-text-muted: #6b6b6b; --dss-bg-card: #ffffff; --dss-bg-page: #ffffff; --dss-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); --dss-shadow-md: 0 4px 14px rgba(0, 0, 0, .08); --dss-shadow-lg: 0 8px 24px rgba(0, 0, 0, .10); --dss-radius: 10px; --dss-radius-lg: 14px; --dss-radius-pill: 999px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 16px !important; align-items: stretch !important; list-style: none !important; margin: 0 0 32px !important; padding: 0 !important; float: none !important; } /* WooCommerce emits clearfix pseudo-elements on ul.products. Left alone they become grid items and punch holes in the track. */ body.tax-product_cat ul.products::before, body.tax-product_cat ul.products::after, body.tax-product_tag ul.products::before, body.tax-product_tag ul.products::after, body.post-type-archive-product ul.products::before, body.post-type-archive-product ul.products::after { content: none !important; display: none !important; } /* ── The card ───────────────────────────────────────────────────────────── li.product carries the white box, because the button and the wishlist are its children too — see the note in the file header. `position: relative` anchors the heart; `overflow: visible` keeps the heart's focus ring from being clipped at the rounded corner. */ body.tax-product_cat ul.products li.product, body.tax-product_tag ul.products li.product, body.post-type-archive-product ul.products li.product { position: relative !important; display: flex !important; flex-direction: column !important; background: var(--dss-bg-card) !important; border: none !important; border-radius: var(--dss-radius-lg) !important; box-shadow: var(--dss-shadow-md) !important; padding: 14px 14px 16px !important; margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; overflow: visible !important; list-style: none !important; box-sizing: border-box !important; transition: transform .2s ease, box-shadow .2s ease !important; } body.tax-product_cat ul.products li.product::before, body.tax-product_cat ul.products li.product::after, body.tax-product_tag ul.products li.product::before, body.tax-product_tag ul.products li.product::after, body.post-type-archive-product ul.products li.product::before, body.post-type-archive-product ul.products li.product::after { content: none !important; display: none !important; } body.tax-product_cat ul.products li.product:hover, body.tax-product_tag ul.products li.product:hover, body.post-type-archive-product ul.products li.product:hover { transform: translateY(-3px) !important; box-shadow: var(--dss-shadow-lg) !important; } /* The card anchor is a transparent block, sized to its content. `flex: 0 0 auto` matters: with flex-grow it would stretch to the card's full height and leave dead space between the price and the button. */ body.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link, body.tax-product_tag ul.products li.product > a.woocommerce-LoopProduct-link, body.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; text-decoration: none !important; color: inherit !important; overflow: visible !important; } /* ── Image tile ─────────────────────────────────────────────────────────── `object-fit: contain` letterboxes instead of cropping, which is what keeps a wide sign (1000x290) legible in the same track as a square one. The wrapper carries the bottom margin so the badge can be positioned against the image box itself rather than the image plus its margin. */ body.tax-product_cat ul.products li.product .dss-loop-thumb, body.tax-product_tag ul.products li.product .dss-loop-thumb, body.post-type-archive-product ul.products li.product .dss-loop-thumb { position: relative !important; display: block !important; margin: 0 0 12px !important; padding: 0 !important; line-height: 0 !important; } body.tax-product_cat ul.products li.product img, body.tax-product_tag ul.products li.product img, body.post-type-archive-product ul.products li.product img { width: 100% !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; object-fit: contain !important; object-position: center !important; background: var(--dss-bg-page) !important; border: none !important; border-radius: var(--dss-radius) !important; padding: 6px !important; margin: 0 !important; display: block !important; box-sizing: border-box !important; } /* Category badge. Plain text, never a link — it renders inside the card-wide anchor, and a nested would collapse the card. */ body.tax-product_cat ul.products li.product .dss-loop-cat, body.tax-product_tag ul.products li.product .dss-loop-cat, body.post-type-archive-product ul.products li.product .dss-loop-cat { position: absolute !important; bottom: 8px !important; left: 8px !important; z-index: 2 !important; display: block !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase !important; line-height: 1.3 !important; padding: 4px 8px !important; border-radius: 6px !important; color: #fff !important; background: var(--dss-text) !important; max-width: calc(100% - 16px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ── Title ──────────────────────────────────────────────────────────────── Clamped to exactly two lines with a fixed min AND max height, so the price and the button below land on the same baseline on every card regardless of name length. Long names ellipsis — intended. */ body.tax-product_cat ul.products li.product .woocommerce-loop-product__title, body.tax-product_cat ul.products li.product h2, body.tax-product_tag ul.products li.product .woocommerce-loop-product__title, body.tax-product_tag ul.products li.product h2, body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title, body.post-type-archive-product ul.products li.product h2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--dss-text) !important; text-align: center !important; margin: 0 0 6px !important; padding: 0 !important; min-height: calc(1.35em * 2) !important; max-height: calc(1.35em * 2) !important; text-transform: none !important; overflow-wrap: break-word !important; } /* ── Price ──────────────────────────────────────────────────────────────── No "From: " pseudo-element here. WooCommerce's price_html already emits it for variable products; adding another produced "From: From: $12.30" on the related-products grid. Fixed-price products show a plain price, which is more accurate anyway. */ body.tax-product_cat ul.products li.product .price, body.tax-product_tag ul.products li.product .price, body.post-type-archive-product ul.products li.product .price { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: var(--dss-text) !important; text-align: center !important; margin: 0 0 10px !important; padding: 0 !important; } body.tax-product_cat ul.products li.product .price::before, body.tax-product_tag ul.products li.product .price::before, body.post-type-archive-product ul.products li.product .price::before { content: none !important; display: none !important; } body.tax-product_cat ul.products li.product .price .woocommerce-Price-amount, body.tax-product_tag ul.products li.product .price .woocommerce-Price-amount, body.post-type-archive-product ul.products li.product .price .woocommerce-Price-amount { font-size: 16px !important; font-weight: 800 !important; } body.tax-product_cat ul.products li.product .price .woocommerce-price-suffix, body.tax-product_tag ul.products li.product .price .woocommerce-price-suffix, body.post-type-archive-product ul.products li.product .price .woocommerce-price-suffix { font-size: 11px !important; color: var(--dss-text-muted) !important; } body.tax-product_cat ul.products li.product .price del, body.tax-product_tag ul.products li.product .price del, body.post-type-archive-product ul.products li.product .price del { color: var(--dss-text-muted) !important; font-weight: 600 !important; margin-right: 6px !important; } body.tax-product_cat ul.products li.product .price ins, body.tax-product_tag ul.products li.product .price ins, body.post-type-archive-product ul.products li.product .price ins { text-decoration: none !important; } /* Tiered-pricing plugin: show only the first amount + suffix, matching the single-product and search treatment. */ body.tax-product_cat ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > *, body.tax-product_tag ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > *, body.post-type-archive-product ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > * { display: none !important; } body.tax-product_cat ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount:first-of-type, body.tax-product_cat ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-price-suffix, body.tax-product_tag ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount:first-of-type, body.tax-product_tag ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-price-suffix, body.post-type-archive-product ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount:first-of-type, body.post-type-archive-product ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-price-suffix { display: inline !important; } /* ── Button ─────────────────────────────────────────────────────────────── `margin-top: auto` pins it to the bottom of the card, so buttons share a baseline even if a card ever grows taller than its neighbours. Labels stay WooCommerce's own ("Select options" / "Add to cart") — they are functional, unlike the search card's "Shop now". */ body.tax-product_cat ul.products li.product .button, body.tax-product_cat ul.products li.product a.button, body.tax-product_tag ul.products li.product .button, body.tax-product_tag ul.products li.product a.button, body.post-type-archive-product ul.products li.product .button, body.post-type-archive-product ul.products li.product a.button { display: block !important; width: 100% !important; background-color: var(--dss-yellow) !important; background-image: none !important; color: var(--dss-text) !important; padding: 10px 16px !important; border: none !important; border-radius: var(--dss-radius-pill) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; text-shadow: none !important; letter-spacing: normal !important; cursor: pointer !important; margin: auto 0 0 !important; box-shadow: var(--dss-shadow-sm) !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important; font-family: inherit !important; position: relative !important; z-index: 2 !important; box-sizing: border-box !important; } body.tax-product_cat ul.products li.product .button:hover, body.tax-product_tag ul.products li.product .button:hover, body.post-type-archive-product ul.products li.product .button:hover { background-color: black !important; color:white !important; transform: translateY(-1px) !important; box-shadow: var(--dss-shadow-md) !important; opacity: 1 !important; } /* Loop chrome the search card does not show. */ body.tax-product_cat ul.products li.product .star-rating, body.tax-product_cat ul.products li.product .added_to_cart, body.tax-product_cat ul.products li.product .screen-reader-text, body.tax-product_tag ul.products li.product .star-rating, body.tax-product_tag ul.products li.product .added_to_cart, body.tax-product_tag ul.products li.product .screen-reader-text, body.post-type-archive-product ul.products li.product .star-rating, body.post-type-archive-product ul.products li.product .added_to_cart, body.post-type-archive-product ul.products li.product .screen-reader-text { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ WISHLIST HEART — TI WooCommerce Wishlist, restyled in place ──────────────────────────────────────────────────────────────────────────── This is the plugin's OWN button, rendered into `.dss-loop-wishlist` by dss_loop_wishlist_button() in inc/dss-loop-card-extras.php. The plugin keeps the click, the AJAX, the nonce, the guest session and the header counter. State comes from the plugin's own `.tinvwl-product-in-list` class, which is why the red heart is correct on first paint and after a reload with no JS of ours involved. Always visible, deliberately: a control that also REPORTS state cannot be hover-revealed, or a saved product looks unsaved until you hover it. The plugin paints its icon from an admin-configurable icon-font glyph. That is suppressed and replaced with inline SVG, so the icon is deterministic regardless of plugin settings and the webfont need not load here. ════════════════════════════════════════════════════════════════════════════ */ /* Zero-height wrapper — its child is taken out of flow below. */ body.tax-product_cat ul.products li.product .dss-loop-wishlist, body.tax-product_tag ul.products li.product .dss-loop-wishlist, body.post-type-archive-product ul.products li.product .dss-loop-wishlist { display: block !important; position: static !important; height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } /* Suppress any loop button TI Wishlist emits by itself, so only one heart renders no matter how the plugin is configured. Ours lives inside .dss-loop-wishlist and is untouched by these selectors. */ body.tax-product_cat ul.products li.product > .tinv-wraper, body.tax-product_cat ul.products li.product > .tinvwl-after-add-to-cart, body.tax-product_tag ul.products li.product > .tinv-wraper, body.tax-product_tag ul.products li.product > .tinvwl-after-add-to-cart, body.post-type-archive-product ul.products li.product > .tinv-wraper, body.post-type-archive-product ul.products li.product > .tinvwl-after-add-to-cart { display: none !important; } /* 22px = the card's 14px padding + the 8px inset the search card uses inside its thumb, so the heart lands in exactly the same place. */ body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinv-wraper, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinv-wraper, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinv-wraper { position: absolute !important; top: 22px !important; right: 22px !important; left: auto !important; bottom: auto !important; z-index: 6 !important; display: block !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-align: initial !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button { display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: rgba(255, 255, 255, .92) !important; box-shadow: var(--dss-shadow-sm) !important; cursor: pointer !important; font-size: 0 !important; line-height: 0 !important; gap: 0 !important; text-decoration: none !important; text-indent: 0 !important; overflow: hidden !important; transition: background .2s ease, transform .2s ease !important; -webkit-tap-highlight-color: transparent !important; } /* `content: ""` rather than `none` — the pseudo-element must stay a paintable box for the SVG background. */ body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before { content: "" !important; display: block !important; width: 17px !important; height: 17px !important; margin: 0 !important; font-size: 0 !important; vertical-align: middle !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: url("data:image/svg+xml;utf8,") !important; transition: background-image .15s ease !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist-text, body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl-tooltip, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist-text, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl-tooltip, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist-text, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl-tooltip { display: none !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover { background: #fff !important; transform: scale(1.06) !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover::before, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover::before, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:hover::before { background-image: url("data:image/svg+xml;utf8,") !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:focus-visible, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:focus-visible, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button:focus-visible { outline: 3px solid var(--dss-text) !important; outline-offset: 2px !important; } /* IN WISHLIST — solid red, driven purely by the plugin's own state class. */ body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before, body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list:hover::before, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list:hover::before, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list:hover::before { background-image: url("data:image/svg+xml;utf8,") !important; } /* While the plugin's request is in flight it sets .tinvwl-processing. */ body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-processing, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-processing, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button.tinvwl-processing { pointer-events: none !important; opacity: .55 !important; } /* ── Sub-category tiles ─────────────────────────────────────────────────── Category archives can list child categories alongside products. Those tiles share li.product-category and get the same card box, but have no price, no button and no wishlist — so the title is centred in the remaining space. */ body.tax-product_cat ul.products li.product-category, body.tax-product_tag ul.products li.product-category, body.post-type-archive-product ul.products li.product-category { position: relative !important; display: flex !important; flex-direction: column !important; background: var(--dss-bg-card) !important; border: none !important; border-radius: var(--dss-radius-lg) !important; box-shadow: var(--dss-shadow-md) !important; padding: 14px !important; margin: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; list-style: none !important; box-sizing: border-box !important; transition: transform .2s ease, box-shadow .2s ease !important; } body.tax-product_cat ul.products li.product-category:hover, body.tax-product_tag ul.products li.product-category:hover, body.post-type-archive-product ul.products li.product-category:hover { transform: translateY(-3px) !important; box-shadow: var(--dss-shadow-lg) !important; } body.tax-product_cat ul.products li.product-category h2, body.tax-product_tag ul.products li.product-category h2, body.post-type-archive-product ul.products li.product-category h2 { font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--dss-text) !important; text-align: center !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } body.tax-product_cat ul.products li.product-category .count, body.tax-product_tag ul.products li.product-category .count, body.post-type-archive-product ul.products li.product-category .count { font-size: 11px !important; font-weight: 500 !important; color: var(--dss-text-muted) !important; } /* ── Responsive — mirrors the search grid ─────────────────────────────── */ @media (max-width: 640px) { body.tax-product_cat ul.products, body.tax-product_tag ul.products, body.post-type-archive-product ul.products { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important; gap: 14px !important; } body.tax-product_cat ul.products li.product, body.tax-product_tag ul.products li.product, body.post-type-archive-product ul.products li.product { padding: 10px 10px 12px !important; } body.tax-product_cat ul.products li.product img, body.tax-product_tag ul.products li.product img, body.post-type-archive-product ul.products li.product img { height: 150px !important; min-height: 150px !important; max-height: 150px !important; padding: 4px !important; } body.tax-product_cat ul.products li.product .dss-loop-cat, body.tax-product_tag ul.products li.product .dss-loop-cat, body.post-type-archive-product ul.products li.product .dss-loop-cat { font-size: 9.5px !important; padding: 3px 7px !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinv-wraper, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinv-wraper, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinv-wraper { top: 18px !important; right: 18px !important; width: 30px !important; height: 30px !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button { width: 30px !important; height: 30px !important; } body.tax-product_cat ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before, body.tax-product_tag ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before, body.post-type-archive-product ul.products li.product .dss-loop-wishlist .tinvwl_add_to_wishlist_button::before { width: 15px !important; height: 15px !important; } } @media (prefers-reduced-motion: reduce) { body.tax-product_cat ul.products li.product, body.tax-product_tag ul.products li.product, body.post-type-archive-product ul.products li.product, body.tax-product_cat ul.products li.product .button, body.tax-product_tag ul.products li.product .button, body.post-type-archive-product ul.products li.product .button { transition: none !important; } } .dss-shop-archive ul.products li.product-category .woocommerce-loop-category__title { align-self: center; max-width: 100%; text-align: center; background: transparent !important; color: var(--dss-ink); font-size: 13px; font-weight: 800; line-height: 1.2; padding: 6px 14px; border-radius: 0 !important; margin: 2px 0 12px; }