26% THC

– – – – – – – – – – – – – – >8 – – – – – – – – – – – – – – – – – – – – – – ————————————————————————– PART 2 OF 2 — THE CSS ————————————————————————– Where: WP Admin -> Appearance -> Editor -> Styles (the half-filled circle) -> three-dot menu -> Additional CSS How: paste PART 2 at the end of whatever is already in that box, Save Then: purge WP Rocket, purge any host cache (SiteGround / Cloudflare), and hard-refresh with Cmd/Ctrl + Shift + R. Note: PART 2 ends with section 27, which hides a filter sidebar. PART 1 has no sidebar, so once you have pasted PART 1 that section does nothing — leave it or delete it, either is fine. – – – – – – – – – – – – – – 8< - - - - - - - - - - - - - - - - - - - - - - /* -------------------------------------------------------------------------- A. CATEGORY PILL ROW -------------------------------------------------------------------------- */ /* --- Shop page: category buttons ---------------------------------------- Five pills above the product grid. The current category lights up gold via the body class WooCommerce already puts on category archives, so there is no PHP and no plugin involved. */ .imp-cat-nav{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 40px} .imp-cat-nav a{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:11px 22px; font-family:var(--wp--preset--font-family--body);font-size:13px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; color:var(--imp-ink);background:var(--wp--preset--color--paper-100); border:var(--imp-border) solid var(--imp-ink);border-radius:999px; box-shadow:var(--imp-shadow-sm);white-space:nowrap; transition:transform var(--imp-dur) var(--imp-pop),box-shadow var(--imp-dur) var(--imp-pop); } .imp-cat-nav a:hover{transform:translate(-2px,-2px);box-shadow:var(--imp-shadow);color:var(--imp-ink);text-decoration:none} .imp-cat-nav a:active{transform:translate(3px,3px);box-shadow:var(--imp-shadow-press)} /* Active pill goes red, same as the prototype. WooCommerce already puts the term on the body class, so no PHP is needed to work out where you are. */ body.woocommerce-shop .imp-cat-nav a[href="/shop/"], body.term-flower .imp-cat-nav a[href*="/flower"], body.term-vapes .imp-cat-nav a[href*="/vapes"], body.term-pre-rolls .imp-cat-nav a[href*="/pre-rolls"], body.term-edibles .imp-cat-nav a[href*="/edibles"], body.term-extracts .imp-cat-nav a[href*="/extracts"], body.term-deals .imp-cat-nav a[href*="/deals"], body.page .imp-cat-nav a[href="/deals/"][aria-current]{ background:var(--wp--preset--color--red-500); color:var(--wp--preset--color--paper-100); } /* Phone: one swipeable row that bleeds to both edges, rather than a four-line stack. The bottom padding keeps the hard shadow from clipping. */ @media (max-width:820px){ .imp-cat-nav{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin-inline:-24px;padding:4px 24px 14px;margin-bottom:28px; } .imp-cat-nav::-webkit-scrollbar{display:none} .imp-cat-nav a{flex:0 0 auto} } /* -------------------------------------------------------------------------- B + C. PRODUCT CARDS AND FILTER BAR -------------------------------------------------------------------------- */ /* ========================================================================== 21. PRODUCT CARDS — matched to the design system's ProductCard Written to match WHICHEVER grid the shop is running: the theme's own post-template (.imp-product-grid), WooCommerce's Product Collection (.wc-block-product-template) and the classic shortcode grid (ul.products). Numbers are lifted from the ProductCard component, not eyeballed: 14/14/16 padding, 9px stack gap, 20px headline title, 26px data price, 14px struck was-price, halftone under the image so cut-out PNGs sit on paper. ========================================================================== */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products){gap:24px;list-style:none;margin:0;padding:0} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.product, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.wp-block-post{ position:relative;display:flex;flex-direction:column; margin:0 !important;padding:0;overflow:visible;width:auto;float:none; background:var(–wp–preset–color–white); border:var(–imp-border) solid var(–imp-ink); border-radius:8px;box-shadow:var(–imp-shadow); transition:transform var(–imp-dur) var(–imp-pop),box-shadow var(–imp-dur) var(–imp-pop); } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li:hover{transform:translate(-3px,-3px);box-shadow:var(–imp-shadow-hover)} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.outofstock{opacity:.6} /* Image on halftone paper, square, ink line under it, top corners only */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-woocommerce-product-image, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-image, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li > a:first-child{ margin:0;display:block; background-color:var(–wp–preset–color–paper-200); background-image:radial-gradient(#15100C 1.2px,transparent 1.3px); background-size:8px 8px; border-bottom:var(–imp-border) solid var(–imp-ink); border-radius:5px 5px 0 0;overflow:hidden; } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-image img, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-woocommerce-product-image img, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li > a:first-child img{ display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover; margin:0;border:0;border-radius:0; } /* Card body */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li > .wp-block-group{ display:flex;flex-direction:column;gap:9px;flex:1; padding:14px 14px 16px !important; } /* Tag row — small pills. Products with no tags render nothing on the front end; “NO TAGS” only ever shows inside the editor. */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .imp-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:0} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .imp-tag-row a{ display:inline-flex;align-items:center;padding:4px 10px; font-family:var(–wp–preset–font-family–body);font-size:11px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; color:var(–imp-ink);background:var(–wp–preset–color–paper-200); border:2px solid var(–imp-ink);border-radius:999px; } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .imp-tag-row a:hover{background:var(–wp–preset–color–gold-500)} /* Title */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-name, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .woocommerce-loop-product__title{margin:0} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title a, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-name, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .woocommerce-loop-product__title{ font-family:var(–wp–preset–font-family–headline) !important; font-size:20px !important;line-height:1.05;text-transform:uppercase;letter-spacing:.01em; color:var(–imp-ink) !important;text-decoration:none; } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title a:hover, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-name:hover{color:var(–wp–preset–color–red-500) !important} /* Price row pinned to the bottom */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-price, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-woocommerce-product-price, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .price{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; margin:auto 0 0 !important; font-family:var(–wp–preset–font-family–data) !important; font-size:26px !important;line-height:1;color:var(–imp-ink) !important; } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-price del, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .price del{ font-size:14px;color:var(–wp–preset–color–ink-300); text-decoration:line-through;margin:0;opacity:1; } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-price ins, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .price ins{text-decoration:none;color:var(–imp-ink)} /* Add to bag */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-woocommerce-product-button, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button{margin:0} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button .wp-block-button__link, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button a, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button button, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li .button.add_to_cart_button, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li .added_to_cart{ display:flex;align-items:center;justify-content:center;width:100%; min-height:44px;padding:11px 18px;margin:0; font-family:var(–wp–preset–font-family–body);font-size:13px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; color:var(–wp–preset–color–paper-100); background:var(–wp–preset–color–red-500); border:var(–imp-border) solid var(–imp-ink);border-radius:999px; box-shadow:var(–imp-shadow-sm); transition:transform var(–imp-dur) var(–imp-pop),box-shadow var(–imp-dur) var(–imp-pop); } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button .wp-block-button__link:hover, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li .button.add_to_cart_button:hover{ transform:translate(-2px,-2px);box-shadow:var(–imp-shadow); color:var(–wp–preset–color–paper-100); } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button .wp-block-button__link:active{ transform:translate(3px,3px);box-shadow:var(–imp-shadow-press); } :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.outofstock .wc-block-components-product-button .wp-block-button__link{ background:var(–wp–preset–color–paper-100);color:var(–imp-ink);pointer-events:none; } /* Sale flag: gold badge breaking out of the corner */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-sale-badge, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) span.onsale{ position:absolute;top:-12px;left:-8px;right:auto;z-index:2; padding:6px 12px;min-width:0;min-height:0;line-height:1; font-family:var(–wp–preset–font-family–display);font-size:13px; letter-spacing:.06em;text-transform:uppercase; color:var(–imp-ink);background:var(–wp–preset–color–gold-500); border:var(–imp-border) solid var(–imp-ink);border-radius:999px; box-shadow:var(–imp-shadow-sm);transform:rotate(-6deg); } /* Pagination pills */ .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:10px 16px; font-family:var(–wp–preset–font-family–data);font-size:14px;text-decoration:none; color:var(–imp-ink);background:var(–wp–preset–color–paper-100); border:var(–imp-border) solid var(–imp-ink);border-radius:999px; box-shadow:var(–imp-shadow-sm); } .wp-block-query-pagination .page-numbers.current{background:var(–wp–preset–color–gold-500)} @media (max-width:820px){ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products){grid-template-columns:repeat(2,1fr) !important;gap:14px} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title a{font-size:16px !important} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-price{font-size:20px !important} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-button .wp-block-button__link{font-size:12px;padding:11px 12px} } @media (max-width:400px){ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products){grid-template-columns:1fr !important} } /* ========================================================================== 22. SHOP FILTER BAR The filters run horizontally under the category pills instead of down a sidebar, so the grid gets the full 1280. ========================================================================== */ .imp-filter-bar__row{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding:14px 16px;margin-bottom:14px; background:var(–wp–preset–color–paper-100); border:var(–imp-border) solid var(–imp-ink); border-radius:8px;box-shadow:var(–imp-shadow-sm); } .imp-filter-bar__row > *{margin:0} .imp-filter-bar .wp-block-woocommerce-filter-wrapper{margin:0;flex:0 1 auto;min-width:180px} .imp-filter-bar h4,.imp-filter-bar .wp-block-heading{display:none} /* Every control in the bar is an ink-bordered pill or field, 44px tall */ .imp-filter-bar select, .imp-filter-bar .wc-block-components-sort-select__select, .imp-filter-bar .wc-blocks-components-form-token-field{ min-height:44px;padding:10px 14px; font-family:var(–wp–preset–font-family–body);font-size:14px;font-weight:600; color:var(–imp-ink);background:var(–wp–preset–color–white); border:var(–imp-border) solid var(–imp-ink);border-radius:999px; } .imp-filter-bar .wc-block-components-product-sort-select label, .imp-filter-bar .wc-block-components-product-results-count{ font-family:var(–wp–preset–font-family–body);font-size:13px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(–wp–preset–color–ink-500); } .imp-filter-bar .wc-block-components-product-results-count{margin-left:auto} /* Price slider: ink rail, gold handles */ .imp-filter-bar .wc-block-price-filter__range-input-wrapper, .imp-filter-bar .wc-block-components-price-slider__range-input-wrapper{ border:2px solid var(–imp-ink);border-radius:999px;height:10px; background:var(–wp–preset–color–paper-300); } .imp-filter-bar .wc-block-components-price-slider__range-input-progress{ background:var(–wp–preset–color–gold-500); } .imp-filter-bar .wc-block-components-price-slider__button, .imp-filter-bar .wc-block-components-filter-submit-button{ min-height:44px;padding:10px 20px; font-family:var(–wp–preset–font-family–body);font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; color:var(–wp–preset–color–paper-100);background:var(–wp–preset–color–red-500); border:var(–imp-border) solid var(–imp-ink);border-radius:999px; box-shadow:var(–imp-shadow-sm); } /* Active filter chips */ .imp-filter-bar .wc-block-active-filters__list li, .imp-filter-bar .wc-block-components-chip{ min-height:36px;padding:6px 14px; font-family:var(–wp–preset–font-family–body);font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; background:var(–wp–preset–color–gold-500);color:var(–imp-ink); border:2px solid var(–imp-ink);border-radius:999px; } @media (max-width:820px){ .imp-filter-bar__row{gap:10px;padding:12px} .imp-filter-bar .wp-block-woocommerce-filter-wrapper{flex:1 1 100%;min-width:0} .imp-filter-bar .wc-block-components-product-results-count{margin-left:0} } /* ========================================================================== 24. CATEGORY PILLS AS NATIVE BUTTON BLOCKS Raw HTML blocks get stripped on save by some hosts, so the pill row is built from core Button blocks instead. Same look as .imp-cat-nav, which is kept above for any page still using the HTML-block version. ========================================================================== */ .imp-cat-buttons{ display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px; } .imp-cat-buttons .wp-block-button{margin:0} .imp-cat-buttons .wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:11px 22px; font-family:var(–wp–preset–font-family–body);font-size:13px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; color:var(–imp-ink) !important; background:var(–wp–preset–color–paper-100) !important; border:var(–imp-border) solid var(–imp-ink) !important;border-radius:999px; box-shadow:var(–imp-shadow-sm);white-space:nowrap; transition:transform var(–imp-dur) var(–imp-pop),box-shadow var(–imp-dur) var(–imp-pop); } .imp-cat-buttons .wp-block-button__link:hover{ transform:translate(-2px,-2px);box-shadow:var(–imp-shadow); color:var(–imp-ink) !important; background:var(–wp–preset–color–gold-500) !important; } .imp-cat-buttons .wp-block-button__link:active{ transform:translate(3px,3px);box-shadow:var(–imp-shadow-press); } /* Current shelf goes red. Woo puts the term on the body class, so this needs no PHP — it follows you from category to category on its own. */ body.woocommerce-shop .imp-cat-buttons .wp-block-button__link[href=”/shop/”], body.term-flower .imp-cat-buttons .wp-block-button__link[href*=”/flower”], body.term-vapes .imp-cat-buttons .wp-block-button__link[href*=”/vapes”], body.term-pre-rolls .imp-cat-buttons .wp-block-button__link[href*=”/pre-rolls”], body.term-edibles .imp-cat-buttons .wp-block-button__link[href*=”/edibles”], body.term-extracts .imp-cat-buttons .wp-block-button__link[href*=”/extracts”], body.term-deals .imp-cat-buttons .wp-block-button__link[href*=”/deals”]{ background:var(–wp–preset–color–red-500) !important; color:var(–wp–preset–color–paper-100) !important; } /* Phone: one swipeable row bleeding to both edges rather than a four-line stack. Bottom padding keeps the hard shadow from clipping. */ @media (max-width:820px){ .imp-cat-buttons{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; margin-inline:-24px;padding:4px 24px 14px;margin-bottom:28px; } .imp-cat-buttons::-webkit-scrollbar{display:none} .imp-cat-buttons .wp-block-button{flex:0 0 auto} } /* ————————————————————————– 25. HARDENING Woo core and theme.json both style these same elements, and on the live site they were winning. Everything below is the same design as sections 21-24 — only the weight changed, so this loses to nothing. ————————————————————————– */ :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.product, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) > li.wp-block-post{ background:var(–wp–preset–color–white) !important; border:var(–imp-border) solid var(–imp-ink) !important; border-radius:8px !important; box-shadow:var(–imp-shadow) !important; } /* Woo’s classic grid floats its items and sets width in % — that fights any grid layout, so it gets unset explicitly. */ ul.products{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important} ul.products > li.product{width:auto !important;float:none !important;margin:0 !important;clear:none !important} ul.products > li.product::before,ul.products > li.product::after{display:none !important} /* Classic grid puts the image and title as bare children, so the padding has to go on the elements rather than a wrapper group. */ ul.products > li.product > a.woocommerce-LoopProduct-link{display:block;padding:0} ul.products > li.product .woocommerce-loop-product__title{padding:14px 14px 0 !important} ul.products > li.product > .price{padding:0 14px !important} ul.products > li.product > .button, ul.products > li.product > .added_to_cart{margin:12px 14px 16px !important;width:calc(100% – 28px) !important} ul.products > li.product img{margin:0 !important;border-bottom:var(–imp-border) solid var(–imp-ink) !important} :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .woocommerce-loop-product__title, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wc-block-components-product-name, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title, :is(.imp-product-grid,.wc-block-product-template,.wp-block-post-template.products-block-post-template,ul.products) .wp-block-post-title a{ color:var(–imp-ink) !important; font-family:var(–wp–preset–font-family–headline) !important; } /* ————————————————————————– 26. SHOP CARDS, SCOPED BY BODY CLASS Keyed off the page (shop archive / category archive) rather than a grid class, because the live template’s grid carries no product class. Cards are addressed as direct children rather than by tag, because the grid emits divs on some Woo versions and list items on others. ————————————————————————– */ body.woocommerce-shop .wp-block-post-template, body.woocommerce-shop .wc-block-product-template, body.woocommerce-shop ul.products, body.tax-product_cat .wp-block-post-template, body.tax-product_cat .wc-block-product-template, body.tax-product_cat ul.products, body.post-type-archive-product .wp-block-post-template, body.post-type-archive-product .wc-block-product-template, body.post-type-archive-product ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:20px !important;list-style:none;margin:0;padding:0; } body.woocommerce-shop .wp-block-post-template > *, body.woocommerce-shop .wc-block-product-template > *, body.woocommerce-shop ul.products > *, body.tax-product_cat .wp-block-post-template > *, body.tax-product_cat .wc-block-product-template > *, body.tax-product_cat ul.products > *, body.post-type-archive-product .wp-block-post-template > *, body.post-type-archive-product .wc-block-product-template > *, body.post-type-archive-product ul.products > *{ position:relative;display:flex !important;flex-direction:column; margin:0 !important;padding:0 !important;width:auto !important;float:none !important; background:var(–wp–preset–color–white) !important; border:var(–imp-border) solid var(–imp-ink) !important; border-radius:8px !important; box-shadow:var(–imp-shadow) !important; overflow:visible; transition:transform var(–imp-dur) var(–imp-pop),box-shadow var(–imp-dur) var(–imp-pop); } body.woocommerce-shop .wp-block-post-template > *:hover, body.woocommerce-shop .wc-block-product-template > *:hover, body.woocommerce-shop ul.products > *:hover, body.tax-product_cat .wp-block-post-template > *:hover, body.tax-product_cat .wc-block-product-template > *:hover, body.tax-product_cat ul.products > *:hover, body.post-type-archive-product .wp-block-post-template > *:hover, body.post-type-archive-product .wc-block-product-template > *:hover, body.post-type-archive-product ul.products > *:hover{transform:translate(-3px,-3px);box-shadow:var(–imp-shadow-hover) !important} /* Image sits on halftone paper so cut-out PNGs don’t float on white */ body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-image, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-image, body.woocommerce-shop ul.products > * .wc-block-components-product-image, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-image, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-image, body.tax-product_cat ul.products > * .wc-block-components-product-image, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-image, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-image, body.post-type-archive-product ul.products > * .wc-block-components-product-image, body.woocommerce-shop .wp-block-post-template > * .wp-block-woocommerce-product-image, body.woocommerce-shop .wc-block-product-template > * .wp-block-woocommerce-product-image, body.woocommerce-shop ul.products > * .wp-block-woocommerce-product-image, body.tax-product_cat .wp-block-post-template > * .wp-block-woocommerce-product-image, body.tax-product_cat .wc-block-product-template > * .wp-block-woocommerce-product-image, body.tax-product_cat ul.products > * .wp-block-woocommerce-product-image, body.post-type-archive-product .wp-block-post-template > * .wp-block-woocommerce-product-image, body.post-type-archive-product .wc-block-product-template > * .wp-block-woocommerce-product-image, body.post-type-archive-product ul.products > * .wp-block-woocommerce-product-image, body.woocommerce-shop .wp-block-post-template > * > a:first-child, body.woocommerce-shop .wc-block-product-template > * > a:first-child, body.woocommerce-shop ul.products > * > a:first-child, body.tax-product_cat .wp-block-post-template > * > a:first-child, body.tax-product_cat .wc-block-product-template > * > a:first-child, body.tax-product_cat ul.products > * > a:first-child, body.post-type-archive-product .wp-block-post-template > * > a:first-child, body.post-type-archive-product .wc-block-product-template > * > a:first-child, body.post-type-archive-product ul.products > * > a:first-child, body.woocommerce-shop .wp-block-post-template > * > figure:first-child, body.woocommerce-shop .wc-block-product-template > * > figure:first-child, body.woocommerce-shop ul.products > * > figure:first-child, body.tax-product_cat .wp-block-post-template > * > figure:first-child, body.tax-product_cat .wc-block-product-template > * > figure:first-child, body.tax-product_cat ul.products > * > figure:first-child, body.post-type-archive-product .wp-block-post-template > * > figure:first-child, body.post-type-archive-product .wc-block-product-template > * > figure:first-child, body.post-type-archive-product ul.products > * > figure:first-child{ display:block !important;margin:0 !important;padding:0 !important; background-color:var(–wp–preset–color–paper-200); background-image:radial-gradient(#15100C 1.2px,transparent 1.3px); background-size:8px 8px; border-bottom:var(–imp-border) solid var(–imp-ink) !important; border-radius:5px 5px 0 0;overflow:hidden; } body.woocommerce-shop .wp-block-post-template > * img, body.woocommerce-shop .wc-block-product-template > * img, body.woocommerce-shop ul.products > * img, body.tax-product_cat .wp-block-post-template > * img, body.tax-product_cat .wc-block-product-template > * img, body.tax-product_cat ul.products > * img, body.post-type-archive-product .wp-block-post-template > * img, body.post-type-archive-product .wc-block-product-template > * img, body.post-type-archive-product ul.products > * img{ display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover; margin:0 !important;border:0 !important;border-radius:0 !important; } /* Padding on the elements themselves — the grid may have no inner wrapper */ body.woocommerce-shop .wp-block-post-template > * > .wp-block-group, body.woocommerce-shop .wc-block-product-template > * > .wp-block-group, body.woocommerce-shop ul.products > * > .wp-block-group, body.tax-product_cat .wp-block-post-template > * > .wp-block-group, body.tax-product_cat .wc-block-product-template > * > .wp-block-group, body.tax-product_cat ul.products > * > .wp-block-group, body.post-type-archive-product .wp-block-post-template > * > .wp-block-group, body.post-type-archive-product .wc-block-product-template > * > .wp-block-group, body.post-type-archive-product ul.products > * > .wp-block-group{ display:flex;flex-direction:column;gap:9px;flex:1;padding:14px 14px 16px !important; } body.woocommerce-shop .wp-block-post-template > * > .wp-block-post-title, body.woocommerce-shop .wc-block-product-template > * > .wp-block-post-title, body.woocommerce-shop ul.products > * > .wp-block-post-title, body.tax-product_cat .wp-block-post-template > * > .wp-block-post-title, body.tax-product_cat .wc-block-product-template > * > .wp-block-post-title, body.tax-product_cat ul.products > * > .wp-block-post-title, body.post-type-archive-product .wp-block-post-template > * > .wp-block-post-title, body.post-type-archive-product .wc-block-product-template > * > .wp-block-post-title, body.post-type-archive-product ul.products > * > .wp-block-post-title, body.woocommerce-shop .wp-block-post-template > * > .woocommerce-loop-product__title, body.woocommerce-shop .wc-block-product-template > * > .woocommerce-loop-product__title, body.woocommerce-shop ul.products > * > .woocommerce-loop-product__title, body.tax-product_cat .wp-block-post-template > * > .woocommerce-loop-product__title, body.tax-product_cat .wc-block-product-template > * > .woocommerce-loop-product__title, body.tax-product_cat ul.products > * > .woocommerce-loop-product__title, body.post-type-archive-product .wp-block-post-template > * > .woocommerce-loop-product__title, body.post-type-archive-product .wc-block-product-template > * > .woocommerce-loop-product__title, body.post-type-archive-product ul.products > * > .woocommerce-loop-product__title, body.woocommerce-shop .wp-block-post-template > * > h2, body.woocommerce-shop .wc-block-product-template > * > h2, body.woocommerce-shop ul.products > * > h2, body.tax-product_cat .wp-block-post-template > * > h2, body.tax-product_cat .wc-block-product-template > * > h2, body.tax-product_cat ul.products > * > h2, body.post-type-archive-product .wp-block-post-template > * > h2, body.post-type-archive-product .wc-block-product-template > * > h2, body.post-type-archive-product ul.products > * > h2, body.woocommerce-shop .wp-block-post-template > * > h3, body.woocommerce-shop .wc-block-product-template > * > h3, body.woocommerce-shop ul.products > * > h3, body.tax-product_cat .wp-block-post-template > * > h3, body.tax-product_cat .wc-block-product-template > * > h3, body.tax-product_cat ul.products > * > h3, body.post-type-archive-product .wp-block-post-template > * > h3, body.post-type-archive-product .wc-block-product-template > * > h3, body.post-type-archive-product ul.products > * > h3{padding:14px 14px 0 !important;margin:0 !important} body.woocommerce-shop .wp-block-post-template > * > .wc-block-components-product-price, body.woocommerce-shop .wc-block-product-template > * > .wc-block-components-product-price, body.woocommerce-shop ul.products > * > .wc-block-components-product-price, body.tax-product_cat .wp-block-post-template > * > .wc-block-components-product-price, body.tax-product_cat .wc-block-product-template > * > .wc-block-components-product-price, body.tax-product_cat ul.products > * > .wc-block-components-product-price, body.post-type-archive-product .wp-block-post-template > * > .wc-block-components-product-price, body.post-type-archive-product .wc-block-product-template > * > .wc-block-components-product-price, body.post-type-archive-product ul.products > * > .wc-block-components-product-price, body.woocommerce-shop .wp-block-post-template > * > .wp-block-woocommerce-product-price, body.woocommerce-shop .wc-block-product-template > * > .wp-block-woocommerce-product-price, body.woocommerce-shop ul.products > * > .wp-block-woocommerce-product-price, body.tax-product_cat .wp-block-post-template > * > .wp-block-woocommerce-product-price, body.tax-product_cat .wc-block-product-template > * > .wp-block-woocommerce-product-price, body.tax-product_cat ul.products > * > .wp-block-woocommerce-product-price, body.post-type-archive-product .wp-block-post-template > * > .wp-block-woocommerce-product-price, body.post-type-archive-product .wc-block-product-template > * > .wp-block-woocommerce-product-price, body.post-type-archive-product ul.products > * > .wp-block-woocommerce-product-price, body.woocommerce-shop .wp-block-post-template > * > .price, body.woocommerce-shop .wc-block-product-template > * > .price, body.woocommerce-shop ul.products > * > .price, body.tax-product_cat .wp-block-post-template > * > .price, body.tax-product_cat .wc-block-product-template > * > .price, body.tax-product_cat ul.products > * > .price, body.post-type-archive-product .wp-block-post-template > * > .price, body.post-type-archive-product .wc-block-product-template > * > .price, body.post-type-archive-product ul.products > * > .price{padding:0 14px !important;margin:auto 0 0 !important} body.woocommerce-shop .wp-block-post-template > * > .wp-block-woocommerce-product-button, body.woocommerce-shop .wc-block-product-template > * > .wp-block-woocommerce-product-button, body.woocommerce-shop ul.products > * > .wp-block-woocommerce-product-button, body.tax-product_cat .wp-block-post-template > * > .wp-block-woocommerce-product-button, body.tax-product_cat .wc-block-product-template > * > .wp-block-woocommerce-product-button, body.tax-product_cat ul.products > * > .wp-block-woocommerce-product-button, body.post-type-archive-product .wp-block-post-template > * > .wp-block-woocommerce-product-button, body.post-type-archive-product .wc-block-product-template > * > .wp-block-woocommerce-product-button, body.post-type-archive-product ul.products > * > .wp-block-woocommerce-product-button, body.woocommerce-shop .wp-block-post-template > * > .wc-block-components-product-button, body.woocommerce-shop .wc-block-product-template > * > .wc-block-components-product-button, body.woocommerce-shop ul.products > * > .wc-block-components-product-button, body.tax-product_cat .wp-block-post-template > * > .wc-block-components-product-button, body.tax-product_cat .wc-block-product-template > * > .wc-block-components-product-button, body.tax-product_cat ul.products > * > .wc-block-components-product-button, body.post-type-archive-product .wp-block-post-template > * > .wc-block-components-product-button, body.post-type-archive-product .wc-block-product-template > * > .wc-block-components-product-button, body.post-type-archive-product ul.products > * > .wc-block-components-product-button, body.woocommerce-shop .wp-block-post-template > * > .wp-block-buttons, body.woocommerce-shop .wc-block-product-template > * > .wp-block-buttons, body.woocommerce-shop ul.products > * > .wp-block-buttons, body.tax-product_cat .wp-block-post-template > * > .wp-block-buttons, body.tax-product_cat .wc-block-product-template > * > .wp-block-buttons, body.tax-product_cat ul.products > * > .wp-block-buttons, body.post-type-archive-product .wp-block-post-template > * > .wp-block-buttons, body.post-type-archive-product .wc-block-product-template > * > .wp-block-buttons, body.post-type-archive-product ul.products > * > .wp-block-buttons{padding:12px 14px 16px !important;margin:0 !important} body.woocommerce-shop .wp-block-post-template > * > .button, body.woocommerce-shop .wc-block-product-template > * > .button, body.woocommerce-shop ul.products > * > .button, body.tax-product_cat .wp-block-post-template > * > .button, body.tax-product_cat .wc-block-product-template > * > .button, body.tax-product_cat ul.products > * > .button, body.post-type-archive-product .wp-block-post-template > * > .button, body.post-type-archive-product .wc-block-product-template > * > .button, body.post-type-archive-product ul.products > * > .button, body.woocommerce-shop .wp-block-post-template > * > .added_to_cart, body.woocommerce-shop .wc-block-product-template > * > .added_to_cart, body.woocommerce-shop ul.products > * > .added_to_cart, body.tax-product_cat .wp-block-post-template > * > .added_to_cart, body.tax-product_cat .wc-block-product-template > * > .added_to_cart, body.tax-product_cat ul.products > * > .added_to_cart, body.post-type-archive-product .wp-block-post-template > * > .added_to_cart, body.post-type-archive-product .wc-block-product-template > * > .added_to_cart, body.post-type-archive-product ul.products > * > .added_to_cart{margin:12px 14px 16px !important;width:calc(100% – 28px) !important} /* Title: ink, headline face — not the red link colour */ body.woocommerce-shop .wp-block-post-template > * .wp-block-post-title, body.woocommerce-shop .wc-block-product-template > * .wp-block-post-title, body.woocommerce-shop ul.products > * .wp-block-post-title, body.tax-product_cat .wp-block-post-template > * .wp-block-post-title, body.tax-product_cat .wc-block-product-template > * .wp-block-post-title, body.tax-product_cat ul.products > * .wp-block-post-title, body.post-type-archive-product .wp-block-post-template > * .wp-block-post-title, body.post-type-archive-product .wc-block-product-template > * .wp-block-post-title, body.post-type-archive-product ul.products > * .wp-block-post-title, body.woocommerce-shop .wp-block-post-template > * .wp-block-post-title a, body.woocommerce-shop .wc-block-product-template > * .wp-block-post-title a, body.woocommerce-shop ul.products > * .wp-block-post-title a, body.tax-product_cat .wp-block-post-template > * .wp-block-post-title a, body.tax-product_cat .wc-block-product-template > * .wp-block-post-title a, body.tax-product_cat ul.products > * .wp-block-post-title a, body.post-type-archive-product .wp-block-post-template > * .wp-block-post-title a, body.post-type-archive-product .wc-block-product-template > * .wp-block-post-title a, body.post-type-archive-product ul.products > * .wp-block-post-title a, body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-name, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-name, body.woocommerce-shop ul.products > * .wc-block-components-product-name, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-name, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-name, body.tax-product_cat ul.products > * .wc-block-components-product-name, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-name, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-name, body.post-type-archive-product ul.products > * .wc-block-components-product-name, body.woocommerce-shop .wp-block-post-template > * .woocommerce-loop-product__title, body.woocommerce-shop .wc-block-product-template > * .woocommerce-loop-product__title, body.woocommerce-shop ul.products > * .woocommerce-loop-product__title, body.tax-product_cat .wp-block-post-template > * .woocommerce-loop-product__title, body.tax-product_cat .wc-block-product-template > * .woocommerce-loop-product__title, body.tax-product_cat ul.products > * .woocommerce-loop-product__title, body.post-type-archive-product .wp-block-post-template > * .woocommerce-loop-product__title, body.post-type-archive-product .wc-block-product-template > * .woocommerce-loop-product__title, body.post-type-archive-product ul.products > * .woocommerce-loop-product__title{ font-family:var(–wp–preset–font-family–headline) !important; font-size:18px !important;line-height:1.05 !important; text-transform:uppercase;letter-spacing:.01em; color:var(–imp-ink) !important;text-decoration:none !important; } body.woocommerce-shop .wp-block-post-template > * .wp-block-post-title a:hover, body.woocommerce-shop .wc-block-product-template > * .wp-block-post-title a:hover, body.woocommerce-shop ul.products > * .wp-block-post-title a:hover, body.tax-product_cat .wp-block-post-template > * .wp-block-post-title a:hover, body.tax-product_cat .wc-block-product-template > * .wp-block-post-title a:hover, body.tax-product_cat ul.products > * .wp-block-post-title a:hover, body.post-type-archive-product .wp-block-post-template > * .wp-block-post-title a:hover, body.post-type-archive-product .wc-block-product-template > * .wp-block-post-title a:hover, body.post-type-archive-product ul.products > * .wp-block-post-title a:hover{color:var(–wp–preset–color–red-500) !important} /* Price in the data face */ body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-price, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-price, body.woocommerce-shop ul.products > * .wc-block-components-product-price, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-price, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-price, body.tax-product_cat ul.products > * .wc-block-components-product-price, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-price, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-price, body.post-type-archive-product ul.products > * .wc-block-components-product-price, body.woocommerce-shop .wp-block-post-template > * .price, body.woocommerce-shop .wc-block-product-template > * .price, body.woocommerce-shop ul.products > * .price, body.tax-product_cat .wp-block-post-template > * .price, body.tax-product_cat .wc-block-product-template > * .price, body.tax-product_cat ul.products > * .price, body.post-type-archive-product .wp-block-post-template > * .price, body.post-type-archive-product .wc-block-product-template > * .price, body.post-type-archive-product ul.products > * .price{ display:block;font-family:var(–wp–preset–font-family–data) !important; font-size:22px !important;line-height:1.1 !important;color:var(–imp-ink) !important; } body.woocommerce-shop .wp-block-post-template > * .price del, body.woocommerce-shop .wc-block-product-template > * .price del, body.woocommerce-shop ul.products > * .price del, body.tax-product_cat .wp-block-post-template > * .price del, body.tax-product_cat .wc-block-product-template > * .price del, body.tax-product_cat ul.products > * .price del, body.post-type-archive-product .wp-block-post-template > * .price del, body.post-type-archive-product .wc-block-product-template > * .price del, body.post-type-archive-product ul.products > * .price del, body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-price del, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-price del, body.woocommerce-shop ul.products > * .wc-block-components-product-price del, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-price del, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-price del, body.tax-product_cat ul.products > * .wc-block-components-product-price del, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-price del, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-price del, body.post-type-archive-product ul.products > * .wc-block-components-product-price del{ font-size:14px !important;color:var(–wp–preset–color–ink-300) !important;opacity:1; } body.woocommerce-shop .wp-block-post-template > * .price ins, body.woocommerce-shop .wc-block-product-template > * .price ins, body.woocommerce-shop ul.products > * .price ins, body.tax-product_cat .wp-block-post-template > * .price ins, body.tax-product_cat .wc-block-product-template > * .price ins, body.tax-product_cat ul.products > * .price ins, body.post-type-archive-product .wp-block-post-template > * .price ins, body.post-type-archive-product .wc-block-product-template > * .price ins, body.post-type-archive-product ul.products > * .price ins, body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-price ins, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-price ins, body.woocommerce-shop ul.products > * .wc-block-components-product-price ins, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-price ins, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-price ins, body.tax-product_cat ul.products > * .wc-block-components-product-price ins, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-price ins, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-price ins, body.post-type-archive-product ul.products > * .wc-block-components-product-price ins{text-decoration:none;color:var(–imp-ink) !important} /* Sale flag breaking out of the corner */ body.woocommerce-shop .wp-block-post-template > * span.onsale, body.woocommerce-shop .wc-block-product-template > * span.onsale, body.woocommerce-shop ul.products > * span.onsale, body.tax-product_cat .wp-block-post-template > * span.onsale, body.tax-product_cat .wc-block-product-template > * span.onsale, body.tax-product_cat ul.products > * span.onsale, body.post-type-archive-product .wp-block-post-template > * span.onsale, body.post-type-archive-product .wc-block-product-template > * span.onsale, body.post-type-archive-product ul.products > * span.onsale, body.woocommerce-shop .wp-block-post-template > * .wc-block-components-product-sale-badge, body.woocommerce-shop .wc-block-product-template > * .wc-block-components-product-sale-badge, body.woocommerce-shop ul.products > * .wc-block-components-product-sale-badge, body.tax-product_cat .wp-block-post-template > * .wc-block-components-product-sale-badge, body.tax-product_cat .wc-block-product-template > * .wc-block-components-product-sale-badge, body.tax-product_cat ul.products > * .wc-block-components-product-sale-badge, body.post-type-archive-product .wp-block-post-template > * .wc-block-components-product-sale-badge, body.post-type-archive-product .wc-block-product-template > * .wc-block-components-product-sale-badge, body.post-type-archive-product ul.products > * .wc-block-components-product-sale-badge{ position:absolute !important;top:-12px !important;left:-8px !important;right:auto !important; padding:6px 12px !important;min-width:0 !important;min-height:0 !important;line-height:1 !important; font-family:var(–wp–preset–font-family–display) !important;font-size:13px !important; letter-spacing:.06em;text-transform:uppercase; color:var(–imp-ink) !important;background:var(–wp–preset–color–gold-500) !important; border:var(–imp-border) solid var(–imp-ink) !important;border-radius:999px !important; box-shadow:var(–imp-shadow-sm) !important;transform:rotate(-6deg); } /* ————————————————————————– 27. NO FILTER SIDEBAR ON SHOP / CATEGORY Hides the filter column and lets the grid take the full container. This is the quick way; deleting the column in the template editor is the real fix, and once that’s done these rules are harmless leftovers you can drop. ————————————————————————– */ body.woocommerce-shop .wp-block-columns > .wp-block-column:first-child, body.tax-product_cat .wp-block-columns > .wp-block-column:first-child{ display:none !important; } body.woocommerce-shop .wp-block-columns > .wp-block-column:last-child, body.tax-product_cat .wp-block-columns > .wp-block-column:last-child{ flex-basis:100% !important;max-width:100% !important; } – – – – – – – – – – – – – – >8 – – – – – – – – – – – – – – – – – – – – – – ————————————————————————– IF IT STILL LOOKS WRONG ————————————————————————– 1. View source on the shop page, search for: wp-custom-css The text “26. SHOP CARDS” must be inside that style block. If it is not, the CSS did not save — that is the whole problem, not the selectors. 2. Search the same source for: imp-cat-buttons Present but unstyled means the CSS is missing. Absent means the page is not using the Product Catalog template you edited — check whether Woo’s shop page is assigned to a normal page under Settings -> Reading or WooCommerce -> Settings -> Products. 3. Category pill links assume Woo’s default permalink base, /product-category//. If yours differs, fix the seven hrefs in PART 1.

Pink Certz