/*
* WooCommerce Styles
* ─────────────────────────────────────────────────────────────────────────────
* Targets WooCommerce's own class structure.
* No !important. Specificity is matched or slightly raised where WC
* generates inline styles or high-specificity selectors.
*
* Loaded only on WooCommerce pages (is_woocommerce, is_cart, is_checkout,
* is_account_page) via the enqueue.php conditional.
* ─────────────────────────────────────────────────────────────────────────────
*/
/* ── Product Cards (global — every WooCommerce product list) ────────────────────
* One consistent card across the shop archive, related products, the cart
* recommendation, and every WooCommerce products block (Product Collection, All
* Products, Hand-picked, On Sale, New, Top Rated, By Category, …). Cream surface +
* border + radius from the MSK palette, a soft dark shadow, equal-height cards (flex
* column; the title reserves two lines so prices + buttons line up), bigger/bolder
* titles + accent prices, and the bold add-to-cart pinned to the bottom. The three
* markups: classic `ul.products li.product`, legacy grid `.wc-block-grid__product`,
* and modern Product Collection `li.wc-block-product`.
*/
ul.products li.product,
.wc-block-grid__product,
li.wc-block-product {
position: relative;
display: flex;
flex-direction: column;
padding: 0; /* let the image bleed; inner text rows carry their own inset */
background: var(--msk-woo-card-surface, var(--msk-color-surface));
border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
overflow: hidden;
box-shadow: 0 6px 18px rgba(34, 34, 34, 0.16);
transition:
box-shadow var(--msk-duration-normal) var(--msk-ease-out),
transform var(--msk-duration-normal) var(--msk-ease-out);
}
ul.products li.product:hover,
.wc-block-grid__product:hover,
li.wc-block-product:hover {
box-shadow: var(--msk-woo-card-hover-shadow, 0 12px 28px rgba(34, 34, 34, 0.24));
transform: var(--msk-woo-card-hover-transform, translateY(-4px));
border-color: transparent;
}
/* Match the Product Collection's card gap on the legacy "products" grids (handpicked,
* on-sale, new, top-rated, best-sellers, by-category) — their cards are otherwise
* flush against each other. The flex-basis shrinks per the block's column count so the
* gap doesn't force wrapping. */
.wc-block-grid__products {
gap: 1.75rem;
}
.wc-block-grid.has-1-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 100%;
max-width: 100%;
}
.wc-block-grid.has-2-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 calc((100% - 1.75rem) / 2);
max-width: calc((100% - 1.75rem) / 2);
}
.wc-block-grid.has-3-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 calc((100% - 3.5rem) / 3);
max-width: calc((100% - 3.5rem) / 3);
}
.wc-block-grid.has-4-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 calc((100% - 5.25rem) / 4);
max-width: calc((100% - 5.25rem) / 4);
}
.wc-block-grid.has-5-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 calc((100% - 7rem) / 5);
max-width: calc((100% - 7rem) / 5);
}
.wc-block-grid.has-6-columns .wc-block-grid__products .wc-block-grid__product {
flex: 0 0 calc((100% - 8.75rem) / 6);
max-width: calc((100% - 8.75rem) / 6);
}
/* Image bleeds to the card edges; capped to a uniform square (matching the shop's
* woocommerce_thumbnail crop) so cards are the same height regardless of the source
* image's aspect ratio. Subtle zoom on hover. */
ul.products li.product a img,
.wc-block-grid__product-image img,
li.wc-block-product .wc-block-components-product-image img {
display: block;
inline-size: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: transform var(--msk-duration-slow) var(--msk-ease-smooth);
}
.wc-block-grid .wc-block-grid__product .wc-block-grid__product-image,
li.wc-block-product .wc-block-components-product-image {
margin: 0;
}
ul.products li.product:hover a img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
li.wc-block-product:hover .wc-block-components-product-image img {
transform: scale(1.04);
}
/* Titles — bigger, bold; reserve two lines so prices + buttons align across cards. */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title,
li.wc-block-product .wp-block-post-title {
font-size: var(--msk-font-size-md);
font-weight: 700;
line-height: var(--msk-leading-tight, 1.25);
min-block-size: 2.5em;
padding-inline: var(--msk-space-3, 0.75rem);
margin-block: var(--msk-space-3, 0.75rem) 0; /* space above the title (8px → 12px, +50%) */
}
/* Prices — bold, accent; struck original lighter on sale. */
ul.products li.product .price,
.wc-block-grid__product-price,
li.wc-block-product .wc-block-components-product-price {
font-size: var(--msk-font-size-base);
font-weight: 800;
color: var(--msk-woo-price, var(--msk-color-accent));
padding-inline: var(--msk-space-3, 0.75rem);
margin-block: var(--msk-space-1, 0.25rem);
}
ul.products li.product .price del,
.wc-block-grid__product-price del,
li.wc-block-product .wc-block-components-product-price del {
font-weight: 400;
}
/* Add-to-cart pinned to the bottom so buttons line up on equal-height cards. */
ul.products li.product .add_to_cart_button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart,
li.wc-block-product .wp-block-button.wc-block-components-product-button {
margin-block: auto var(--msk-space-3, 0.75rem);
margin-inline: var(--msk-space-3, 0.75rem);
}
/* Sale badge pinned to the top-right corner, in the MSK sale palette (sale_bg /
* sale_text settings) and bold — applied to the block-card badge classes too, which
* the classic `.woocommerce span.onsale` rule doesn't reach. */
ul.products li.product .onsale,
.wc-block-grid__product .wc-block-grid__product-onsale,
.wc-block-grid__product .onsale,
li.wc-block-product .wc-block-components-product-sale-badge,
li.wc-block-product .onsale {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: 0.75rem;
margin: 0;
z-index: 1;
background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
color: var(--msk-woo-sale-text, #ffffff);
border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
padding: 0.25rem 0.6rem;
font-size: var(--msk-font-size-xs, 0.75rem);
font-weight: 700;
}
/* ── Related Products (single-product "you may also like") ──────────────────────
* The related grid inherits the card styling above, but takes its own thumbnail
* shape — 2:3 by default, so it matches the category slider — and the accent
* add-to-cart button (the shop-archive button recolour does not reach here, which
* is why related buttons were the theme's dark default). Scoped to the related
* Product Collection by its data-collection marker so the shop archive is
* untouched; the classic .related.products markup is covered for non-block themes.
* The related-only shape (--msk-woo-related-aspect) and card colour
* (--msk-woo-related-card-surface) come from WooCommerce → Related Products.
*
* Specificity: the global card image rule is (0,2,2); routing through
* li.wc-block-product here lifts these to (0,3,2) so the related shape wins. */
[data-collection="woocommerce/product-collection/related"] li.wc-block-product .wc-block-components-product-image img,
.related.products li.product a img {
aspect-ratio: var(--msk-woo-related-aspect, 2 / 3);
object-fit: cover;
}
[data-collection="woocommerce/product-collection/related"] li.wc-block-product,
.related.products li.product {
background: var(--msk-woo-related-card-surface, var(--msk-woo-card-surface, var(--msk-color-surface)));
}
[data-collection="woocommerce/product-collection/related"] li.wc-block-product .wp-block-button__link,
[data-collection="woocommerce/product-collection/related"] li.wc-block-product .add_to_cart_button,
.related.products li.product .add_to_cart_button {
background: var(--msk-woo-accent, var(--msk-color-accent));
color: var(--msk-woo-button-text, #ffffff);
border-color: transparent;
}
/* ── Product Page (Single) ─────────────────────────────────────────────── */
/* Summary area refinements */
.woocommerce div.product .product_title {
letter-spacing: var(--msk-tracking-tight);
line-height: var(--msk-leading-tight);
margin-block-end: var(--msk-space-4);
}
/* Price: make it a focal point */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: var(--msk-font-size-lg);
font-weight: 700;
color: var(--msk-woo-price, var(--msk-color-accent));
}
/* Single product page (block-theme template) — larger, bolder price. The classic
* rule above doesn't reach the woocommerce/product-price block; body.single-product
* raises specificity over the theme's font-size preset without !important. */
body.single-product .wp-block-woocommerce-product-price,
body.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount {
font-size: 2rem; /* fixed 32px — even, non-fluid */
font-weight: 800;
}
/* On sale: keep the struck original lighter, like the cart cards. */
body.single-product .wp-block-woocommerce-product-price del,
body.single-product .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
font-weight: 400;
}
/* ── Shop archive (product catalogue) — bigger, bolder, prettier ────────────────
* Scoped to body.post-type-archive-product. Bigger/bolder product titles + prices
* and a bold Add-to-Cart label (the button COLOURS/RADIUS are configurable in the
* Shop settings and emitted inline by build_shop_overrides()). The sorting dropdown
* is restyled below. body-class scope keeps all of this off other WooCommerce pages.
*/
body.post-type-archive-product li.product .wp-block-post-title,
body.post-type-archive-product li.product .woocommerce-loop-product__title,
body.post-type-archive-product li.product .wc-block-grid__product-title,
body.post-type-archive-product li.product .wc-block-components-product-title {
font-size: var(--msk-font-size-md);
font-weight: 700;
line-height: var(--msk-leading-tight, 1.25);
}
body.post-type-archive-product li.product .price,
body.post-type-archive-product li.product .wc-block-components-product-price,
body.post-type-archive-product li.product .wc-block-grid__product-price {
font-size: var(--msk-font-size-base);
font-weight: 800;
color: var(--msk-woo-price, var(--msk-color-accent));
}
/* On sale: keep the struck original lighter. */
body.post-type-archive-product li.product del,
body.post-type-archive-product li.product del .woocommerce-Price-amount {
font-weight: 400;
}
/* Bold Add-to-Cart label. */
body.post-type-archive-product li.product .add_to_cart_button,
body.post-type-archive-product li.product .wp-block-button__link.add_to_cart_button {
font-weight: 700;
}
/* "Default sorting" dropdown — larger, rounded, padded, with a custom chevron. */
body.post-type-archive-product .woocommerce-ordering select.orderby,
body.post-type-archive-product .woocommerce-ordering select[name="orderby"] {
font-size: var(--msk-font-size-base);
font-weight: 600;
line-height: 1.2;
padding: 0.6rem 2.75rem 0.6rem 1.1rem;
border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
border-radius: var(--msk-radius-md);
background-color: var(--msk-woo-card-surface, var(--msk-color-surface));
color: inherit;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 0.95rem;
cursor: pointer;
transition:
border-color var(--msk-duration-normal) var(--msk-ease-out),
box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}
body.post-type-archive-product .woocommerce-ordering select.orderby:hover {
border-color: var(--msk-woo-accent, var(--msk-color-accent));
}
body.post-type-archive-product .woocommerce-ordering select.orderby:focus {
border-color: var(--msk-woo-accent, var(--msk-color-accent));
box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-woo-accent, var(--msk-color-accent)) 20%, transparent);
outline: none;
}
/* Sale badge */
.woocommerce span.onsale {
background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
color: var(--msk-woo-sale-text, #ffffff);
border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
font-size: var(--msk-font-size-xs);
font-weight: 700;
letter-spacing: var(--msk-tracking-wide);
text-transform: uppercase;
padding: var(--msk-space-1) var(--msk-space-3);
min-width: unset;
min-height: unset;
line-height: 1.4;
top: var(--msk-space-3);
left: var(--msk-space-3);
}
/* Add to Cart button */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
font-weight: 700;
letter-spacing: var(--msk-tracking-wide);
padding-inline: var(--msk-space-8);
transition:
background-color var(--msk-duration-fast) var(--msk-ease-out),
box-shadow var(--msk-duration-fast) var(--msk-ease-out),
transform var(--msk-duration-fast) var(--msk-ease-out);
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
transform: translateY(-1px);
box-shadow: var(--msk-shadow-accent);
}
/* ── Global action-button shape ─────────────────────────────────────────────────
* One consistent look for every Add-to-Cart, "Proceed to Checkout", and "Place
* order" button across the shop, product, cart, and checkout: slightly-rounded
* corners (configurable via the Button corners setting — the default is now a soft
* 8px radius rather than a full pill) and a bold label.
*/
.woocommerce .single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce button.add_to_cart_button,
.woocommerce .button.alt,
.wp-block-button__link.add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
border-radius: var(--msk-woo-button-radius, var(--msk-radius-md));
font-weight: 700;
}
/* ── Cart & Checkout ───────────────────────────────────────────────────── */
/* Block-based cart/checkout table */
.wc-block-cart-items,
.wc-block-components-order-summary {
border-radius: var(--msk-radius-lg);
overflow: hidden;
border: 1px solid var(--msk-color-border);
}
/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-select select,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select {
border-radius: var(--msk-radius-md);
border-color: var(--msk-color-border);
transition: border-color var(--msk-duration-fast) var(--msk-ease-out),
box-shadow var(--msk-duration-fast) var(--msk-ease-out);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
border-color: var(--msk-woo-accent, var(--msk-color-accent));
box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-woo-accent, var(--msk-color-accent)) 20%, transparent);
outline: none;
}
/* ── Notices ───────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-radius: var(--msk-radius-md);
border-inline-start-width: 4px;
}
/* ── prefers-reduced-motion ─────────────────────────────────────────────
* WCAG 2.3.3 — honour users' OS-level motion preference. The 0.01ms
* duration cancels visible motion while still firing transitionend /
* animationend events that JS handlers may listen for.
*/
@media ( prefers-reduced-motion: reduce ) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Enhanced Empty Cart ────────────────────────────────────────────────────────
* Opt-in via Settings → Maple Site Kit → WooCommerce → Empty Cart. Markup is
* rendered by inc/woocommerce.php (render_empty_cart). Cards inherit the MSK
* WooCommerce palette (surface/border/radius/price); the pill colours come from the
* Empty Cart settings (emitted inline on the element). Scoped to .msk-empty-cart so
* nothing leaks to the filled cart, and kept free of !important.
*/
.msk-empty-cart {
text-align: center;
max-width: 100%;
margin-inline: auto;
padding-block: var(--msk-space-12, 2.75rem) var(--msk-space-4, 1rem);
}
.msk-empty-cart__message {
font-size: clamp(1.16rem, 2.08vw, 1.64rem);
line-height: var(--msk-leading-snug, 1.3);
font-weight: 700;
margin: 0 auto 0.5rem;
}
.msk-empty-cart__pill {
display: inline-block;
font-weight: 700;
font-size: clamp(1rem, 1.7vw, 1.25rem);
letter-spacing: var(--msk-tracking-wide, 0.05em);
text-transform: uppercase;
padding: 0.55rem 1.5rem;
border-radius: var(--msk-radius-full, 999px);
margin: 1.5rem auto;
}
.msk-empty-cart__products {
list-style: none;
margin: 0.5rem auto 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.25rem;
max-width: 1040px;
}
.msk-empty-cart__product {
flex: 1 1 240px;
max-width: 320px;
display: flex;
flex-direction: column;
text-align: center;
background: var(--msk-woo-card-surface, var(--msk-color-surface));
border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
overflow: hidden;
box-shadow: 0 6px 18px rgba(34, 34, 34, 0.16);
transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}
.msk-empty-cart__product:hover {
box-shadow: 0 12px 28px rgba(34, 34, 34, 0.24);
}
.msk-empty-cart__product-link {
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
.msk-empty-cart__product-link img {
display: block;
inline-size: 100%;
block-size: auto;
}
/* Bigger title; reserve two lines so prices + buttons align across cards. */
.msk-empty-cart__product-title {
display: block;
font-size: 1.45rem;
font-weight: 700;
line-height: var(--msk-leading-tight, 1.25);
min-block-size: 2.5em;
padding: 0.85rem 0.75rem 0;
}
.msk-empty-cart__product-price {
font-weight: 700;
padding: 0.35rem 0.75rem 0.85rem;
color: var(--msk-woo-price, var(--msk-color-accent));
}
/* On sale: keep the struck original light, bold the final price. */
.msk-empty-cart__product-price del,
.msk-empty-cart__product-price del .amount {
font-weight: 400;
}
/* Add-to-cart: bold, slightly rounded, pinned to the bottom so buttons align. */
.msk-empty-cart__product .button {
margin: auto 0.75rem 1rem;
font-weight: 700;
border-radius: 8px;
}
/* Sale flash on the cover (uses the MSK sale-badge palette). */
.msk-empty-cart__product .onsale {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: 0.75rem;
margin: 0;
background: var(--msk-woo-sale-bg, var(--msk-gradient-accent));
color: var(--msk-woo-sale-text, #ffffff);
border-radius: var(--msk-woo-sale-radius, var(--msk-radius-full));
padding: 0.25rem 0.6rem;
font-size: var(--msk-font-size-xs, 0.75rem);
font-weight: 700;
}
@media (max-width: 768px) {
.msk-empty-cart__products {
grid-template-columns: 1fr;
max-width: 22rem;
}
}
/* ── Filled-cart recommendation ("We also recommend:") ──────────────────────────
* Reuses the .msk-empty-cart promo styling above; this adds the wide width and a
* separating rule above it. Appended after the cart block (a sibling of the React
* cart wrapper), so it is a top-level child of the constrained layout — widen it to
* the theme's wide size (the constraint rule is :where() = 0 specificity).
*/
.msk-cart-recommend {
max-width: var(--wp--style--global--wide-size, 1340px);
margin-inline: auto;
margin-block-start: var(--msk-space-10, 2.5rem);
padding-block-start: var(--msk-space-8, 2rem);
border-block-start: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
}
/* ── Cart polish (always on whenever the cart renders) ──────────────────────────
* Bold the Proceed-to-Checkout label and the estimated-total row (label + amount).
* Cart-wrapper-prefixed for specificity over WooCommerce's own block styles.
*/
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
font-weight: 700;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-weight: 700;
}
/* ── Storefront theme (reusable, opt-in via .msk-shop) ──────────────────────────
* A storefront layer for WooCommerce landing-page PATTERNS. The always-on rules
* above already theme product cards, titles, prices and sale badges site-wide via
* the --msk-woo-* custom properties (set by the WooCommerce style settings, or
* overridden per-pattern). This opt-in layer adds only what those omit for a
* marketing page: a colour on the add-to-cart button, a tile grid for the Product
* Categories block, and header Mini-Cart polish. Everything reads the same
* --msk-woo-* contract, so a pattern re-skins the whole storefront just by setting
* those vars — see .msk-shop--comic for a worked example.
*
* Contract (all optional; each falls back to an MSK token):
* --msk-woo-accent add-to-cart button + category-tile hover
* --msk-woo-price price colour
* --msk-woo-sale-bg / --msk-woo-sale-text sale badge
* --msk-woo-card-surface / -border / -radius cards + category tiles
* --msk-woo-button-radius button + tile corners
*/
/* Add-to-cart colour — the global button rule sets only radius/weight (colour is
* left to the theme so cart/checkout stay on-theme); a storefront pattern opts in
* to an accent-filled button, scoped so it never leaks to cart/checkout. */
.msk-shop li.wc-block-product .wp-block-button.wc-block-components-product-button .wp-block-button__link,
.msk-shop .wc-block-grid__product .add_to_cart_button,
.msk-shop .wc-block-grid__product a.button,
.msk-shop .single_add_to_cart_button {
background: var(--msk-woo-accent, var(--msk-color-accent));
color: var(--msk-woo-button-text, #ffffff);
border-color: transparent;
transition: filter var(--msk-duration-fast) var(--msk-ease-out);
}
.msk-shop li.wc-block-product .wp-block-button.wc-block-components-product-button .wp-block-button__link:hover,
.msk-shop .wc-block-grid__product .add_to_cart_button:hover,
.msk-shop .wc-block-grid__product a.button:hover,
.msk-shop .single_add_to_cart_button:hover {
filter: brightness(0.92);
}
/* Product Categories → responsive CARD grid, where the category's own image IS
* the card. The block renders:
*
* ![]()
[
*
* The is the cover: the image fills it edge to edge, a gradient scrim darkens
* the lower half, and the name sits on top of the scrim in white — so the title
* stays legible over ANY artwork (and over the grey placeholder WooCommerce
* substitutes when a category has no thumbnail set). The count is a sibling of
* the , so it can't live inside the scrim without fragile offsets; it becomes
* a corner badge instead, which also keeps it clear of the title when a long
* category name wraps to two lines.
*
* Only the TOP-LEVEL list is a grid. With "Show hierarchy" on, WooCommerce nests
* a of children inside the parent - — grid-ing that too would render a
* card inside a card. Nested lists collapse to plain chips under the cover. */
.msk-shop .wc-block-product-categories > ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: clamp(1rem, 2.5vw, 1.75rem);
/* Cards size to their own content. Grid rows stretch items to the tallest
* sibling by default, which would pull a square cover out of square whenever
* another card in the row carries a subcategory chip row. */
align-items: start;
}
.msk-shop .wc-block-product-categories > ul > li {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
overflow: hidden;
background: var(--msk-woo-card-surface, var(--msk-color-surface));
border: 1px solid var(--msk-woo-card-border, var(--msk-color-border));
border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
transition:
transform var(--msk-duration-fast) var(--msk-ease-out),
box-shadow var(--msk-duration-fast) var(--msk-ease-out);
}
.msk-shop .wc-block-product-categories > ul > li:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(20, 19, 27, 0.16);
}
/* The cover: image + scrim + title, all inside the link. Square, and it stays
* square — `flex: none` keeps aspect-ratio the exact height rather than a floor,
* so the cover can't be stretched by a taller sibling card (see align-items on
* the grid above). A card with subcategory chips is a square cover plus a chip
* strip beneath it, not a taller-than-square cover. */
.msk-shop .wc-block-product-categories > ul > li > a {
position: relative;
display: flex;
flex: none;
align-items: flex-end;
justify-content: center;
aspect-ratio: 1 / 1;
/* Anchors inherit content-box here, which would square the CONTENT box and
* then add the padding on top — a cover 32px taller than it is wide. */
box-sizing: border-box;
overflow: hidden;
padding: 1rem 0.9rem;
text-decoration: none;
/* The image loads over this, so it only shows through on a transparent PNG. */
background: var(--msk-woo-category-cover-bg, #2a2731);
}
/* WooCommerce ships this span as a tiny inline thumbnail beside the text:
* `max-width:50px; margin:0 .5em 0 -60px; border:1px solid #eee`. The max-width
* caps any width we set (and beats inset:0, since an explicit width wins over
* left/right offsets), so every one of those has to be undone by name — this is
* why the artwork was showing up as a 50px sliver. */
.msk-shop .wc-block-product-categories-list-item__image {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border: 0;
line-height: 0;
}
.msk-shop .wc-block-product-categories-list-item__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--msk-duration-slow, 0.4s) var(--msk-ease-out);
}
.msk-shop .wc-block-product-categories > ul > li:hover .wc-block-product-categories-list-item__image img {
transform: scale(1.06);
}
/* No category image → WooCommerce substitutes its grey "no image" graphic, which
* reads as a broken card in a grid this size. Drop it and let the cover's own
* background carry the title, so an unset thumbnail looks deliberate rather than
* missing. WooCommerce flags these itself with the --placeholder modifier. */
.msk-shop .wc-block-product-categories-list-item__image--placeholder img {
display: none;
}
.msk-shop .wc-block-product-categories-list-item__image--placeholder {
background: var(
--msk-woo-category-placeholder-bg,
linear-gradient(150deg, #3a3644 0%, #2a2731 100%)
);
}
/* The scrim. Bottom-weighted so the artwork still reads at the top of the card
* while the title sits on near-solid ink. */
.msk-shop .wc-block-product-categories > ul > li > a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(
--msk-woo-category-scrim,
linear-gradient(
to top,
rgba(20, 19, 27, 0.88) 0%,
rgba(20, 19, 27, 0.66) 32%,
rgba(20, 19, 27, 0.24) 62%,
rgba(20, 19, 27, 0.06) 100%
)
);
}
.msk-shop .wc-block-product-categories-list-item__name {
position: relative;
z-index: 2;
display: block;
text-align: center;
font-weight: 800;
font-size: 1.05rem;
line-height: 1.25;
color: var(--msk-woo-category-name-color, #ffffff);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* Count → corner badge. pointer-events:none so a click anywhere over the badge
* still falls through to the category link underneath it. */
.msk-shop .wc-block-product-categories > ul > li > .wc-block-product-categories-list-item-count {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 3;
pointer-events: none;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background: var(--msk-woo-accent, var(--msk-color-accent));
color: var(--msk-woo-button-text, #ffffff);
font-weight: 700;
font-size: 0.78rem;
line-height: 1.5;
}
/* Subcategories ("Show hierarchy" on) → chips beneath the cover, on the card
* surface. Explicitly undoes the grid/card/cover rules above. */
.msk-shop .wc-block-product-categories > ul ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0.75rem;
}
/* The chip itself is the
- , not the — the count is a SIBLING of the link,
* so pilling the alone would push "(1)" onto its own line underneath. */
.msk-shop .wc-block-product-categories > ul ul li {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin: 0;
padding: 0.2rem 0.6rem;
border: 0;
border-radius: 999px;
background: var(--msk-color-surface-alt, rgba(20, 19, 27, 0.06));
transform: none;
box-shadow: none;
}
.msk-shop .wc-block-product-categories > ul ul a {
display: block;
flex: none;
aspect-ratio: auto;
padding: 0;
background: none;
color: var(--msk-color-text-primary);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
}
.msk-shop .wc-block-product-categories > ul ul a::after {
content: none;
}
.msk-shop .wc-block-product-categories > ul ul .wc-block-product-categories-list-item__image {
display: none;
}
.msk-shop .wc-block-product-categories > ul ul .wc-block-product-categories-list-item__name {
position: static;
color: inherit;
font-size: inherit;
font-weight: inherit;
text-shadow: none;
}
.msk-shop .wc-block-product-categories > ul ul .wc-block-product-categories-list-item-count {
position: static;
padding: 0;
background: none;
color: var(--msk-color-text-secondary, #5b5563);
font-size: 0.75rem;
}
/* Header Mini-Cart sitting inside the MSK nav pill — inherit the nav's link colour. */
.msk-shop .msk-app-nav .wc-block-mini-cart__button {
color: inherit;
font-weight: 700;
padding: 0;
}
/* ── Example storefront skin: comic-book shop ───────────────────────────────────
* Used by the "Maple Page — Comic Book Shop (WooCommerce)" pattern. A skin is just
* the --msk-woo-* contract set to a palette; add more (.msk-shop--yourname) or lean
* on the site's WooCommerce style settings for the default look. */
.msk-shop--comic {
--msk-woo-accent: #7c3aed;
--msk-woo-price: #14131b;
--msk-woo-sale-bg: #ffcc00;
--msk-woo-sale-text: #14131b;
--msk-woo-card-surface: #ffffff;
--msk-woo-card-border: #e7e1f5;
--msk-woo-card-radius: 1rem;
--msk-woo-button-radius: 999px;
}
/* ── Featured Product (WC cover block) inside .msk-shop ──────────────────────────
* The Featured Product block is a Cover: the product image fills the frame with
* title / price / description and a CTA overlaid. Round it to match the card
* system, bolden the title, and give the CTA the storefront accent. */
.msk-shop .wc-block-featured-product {
border-radius: var(--msk-woo-card-radius, var(--msk-radius-lg));
overflow: hidden;
}
/* Fill the frame (portrait covers letterbox by default); the owner can set a
* landscape promo image, but cover-fit keeps it clean either way. */
.msk-shop .wc-block-featured-product__background-image {
background-size: cover;
background-position: center;
}
.msk-shop .wc-block-featured-product__background-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.msk-shop .wc-block-featured-product__title {
font-weight: 900;
line-height: 1.1;
}
.msk-shop .wc-block-featured-product__price {
font-weight: 800;
}
.msk-shop .wc-block-featured-product .wp-block-button__link {
background: var(--msk-woo-accent, var(--msk-color-accent));
color: #ffffff;
border: 0;
border-radius: var(--msk-woo-button-radius, var(--msk-radius-md));
font-weight: 700;
}