/**
* WooCommerce styling.
*
* Approach: style Woo's own markup rather than replacing it. Woo classes
* are stable across versions, so this survives updates far better than
* template overrides do.
*/
/* --- Product grid ------------------------------------------------------ */
/*
* PREMIUM SPACING
*
* 3 columns by default, not 4. Fewer products per row reads as "curated,"
* not "crammed" - the single biggest lever for a premium feel (see Zappos,
* Mr Porter, COS). Generous row gap gives each product room to breathe.
*/
.woocommerce ul.products {
display: grid;
grid-template-columns: repeat(var(--mc-grid-cols, 3), minmax(0, 1fr));
gap: var(--mc-space-16) var(--mc-space-10);
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce ul.products.columns-2 { --mc-grid-cols: 2; }
.woocommerce ul.products.columns-3 { --mc-grid-cols: 3; }
/* Even if Woo asks for 4, hold at 3 on the widest screens for the airy look. */
.woocommerce ul.products.columns-4 { --mc-grid-cols: 3; }
.woocommerce ul.products li.product {
width: auto !important; /* neutralises Woo's inline float widths */
margin: 0 !important;
float: none !important;
clear: none !important;
}
@media (max-width: 1024px) {
.woocommerce ul.products {
--mc-grid-cols: 2 !important;
gap: var(--mc-space-12) var(--mc-space-8);
}
}
@media (max-width: 767px) {
.woocommerce ul.products {
--mc-grid-cols: 2 !important;
gap: var(--mc-space-8) var(--mc-space-4);
}
}
/* --- Product card ------------------------------------------------------ */
.mc-card { position: relative; display: flex; flex-direction: column; }
/*
* Fixed aspect ratio. The catalogue mixes 700x875 portrait and 700x467
* landscape source images; without this, card heights jump and the page
* shifts as images load (poor CLS).
*/
.mc-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
margin-bottom: var(--mc-space-5);
background: var(--mc-paper-alt);
border-radius: var(--mc-radius);
}
.mc-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 400ms var(--mc-ease);
}
.mc-card:hover .mc-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.mc-card:hover .mc-card__media img { transform: none; }
}
/*
* Related/upsell products may use Woo's default card markup (not our
* content-product.php), so their ![]()
isn't wrapped in .mc-card__media.
* Give those images the same 4:5 framing so no beige gap shows under a
* short image.
*/
/*
* Plain Woo cards (no .mc-card__media wrapper) get the 4:5 framing directly on
* the image. The .mc-card__media img case is already handled above.
*/
.woocommerce ul.products li.product > a > img,
.woocommerce ul.products li.product > img {
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center;
width: 100%;
height: auto;
border-radius: var(--mc-radius);
background: var(--mc-paper-alt);
display: block;
margin-bottom: var(--mc-space-4);
}
.mc-card__body { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.mc-card__title {
margin: 0;
font-size: var(--mc-text-base);
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
color: var(--mc-ink-soft);
}
.mc-card a { text-decoration: none; }
/*
* Make the whole card clickable while keeping one real link for
* accessibility and for crawlers.
*/
.mc-card .woocommerce-LoopProduct-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* Add-to-cart must sit above the overlay to stay clickable. */
.mc-card .button,
.mc-card .add_to_cart_button { position: relative; z-index: 2; }
.mc-card__stock.is-out {
margin: 0;
color: var(--mc-nubuk);
font-size: var(--mc-text-sm);
}
/* --- Price ------------------------------------------------------------- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
margin: 0;
color: var(--mc-ink) !important; /* beat Fusion/Elementor yellow */
font-size: var(--mc-text-base);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.woocommerce .price .amount,
.woocommerce .price bdi { color: inherit !important; }
.woocommerce .price del {
margin-right: var(--mc-space-2);
color: var(--mc-nubuk);
font-weight: 400;
text-decoration-thickness: 1px;
}
.woocommerce .price ins {
background: none;
color: var(--mc-cordovan);
text-decoration: none;
}
/*
* Woo prints "Original price was: X. Current price is: Y." for screen
* readers. Visually redundant next to the struck-through price, so hide
* it visually but keep it available to assistive technology.
*/
.woocommerce .price .screen-reader-text { position: absolute !important; }
/* --- Sale badge -------------------------------------------------------- */
.woocommerce span.onsale {
position: absolute;
top: var(--mc-space-3);
left: var(--mc-space-3);
z-index: 2;
min-height: 0;
min-width: 0;
margin: 0;
padding: var(--mc-space-1) var(--mc-space-3);
border-radius: var(--mc-radius);
background: var(--mc-badge);
color: var(--mc-white);
font-size: var(--mc-text-xs);
font-weight: 600;
letter-spacing: var(--mc-tracking-wide);
line-height: 1.6;
text-transform: uppercase;
}
/* --- Single product ---------------------------------------------------- */
.woocommerce div.product {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--mc-space-12);
align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
grid-column: 1;
min-width: 0; /* let grid child shrink instead of forcing overflow */
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .summary {
grid-column: 2;
min-width: 0; /* critical: stops the summary column pushing past viewport */
width: auto !important;
margin: 0 !important;
float: none !important;
}
/* Size picker must never exceed its column. */
.mc-size-field,
.mc-size-pills,
.mc-size-legend,
.mc-size-status { max-width: 100%; }
.mc-size-pills { box-sizing: border-box; }
/* Tabs and related products span the full width below the two columns. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
grid-column: 1 / -1;
margin-top: var(--mc-space-16);
}
/*
* Related products grid — force a clean 4-up (2-up mobile) grid that starts at
* column 1. Woo's default float layout was leaving the first cell empty and
* pushing cards right. Explicit grid + auto-flow fixes the "pushed" gap.
*/
/*
* Related/upsells sit in