/**
* Shop — all WooCommerce pages.
*
* Restyles WC defaults with new design system tokens.
* NO functional changes — logic stays intact.
*/
.slist-main--shop {
padding: var(--slist-space-5) 0 var(--slist-space-9);
}
/*
* Shop archive H1 — match the serif product title typography so the header
* sits in the same family as the rest of the PDP/catalog. Default WP H1
* ships in the sans body stack, which visually disconnects it from the
* product cards beneath.
*/
.slist-main--shop h1.woocommerce-products-header__title,
.slist-main--shop h1.page-title,
.woocommerce.archive .slist-main--shop .wp-block-post-title,
.post-type-archive-product .slist-main--shop h1,
.tax-product_cat .slist-main--shop h1 {
font-family: var(--slist-font-display);
font-weight: var(--slist-weight-regular);
letter-spacing: -0.02em;
margin: 0 0 var(--slist-space-2);
}
/*
* Skeleton shimmer — shown while perfmatters-lazy swaps in the real image.
* Products start with a class of `perfmatters-lazy` (no `pmloaded`); once
* loaded, the class updates. We animate a subtle diagonal shimmer on the
* media container when the inner img is still lazy. 800ms loop, easing
* matches the transition-default token.
*/
@keyframes slist-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.woocommerce ul.products li.product .slist-card__media:has(img.perfmatters-lazy:not(.pmloaded))::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
110deg,
transparent 25%,
rgba(255, 255, 255, 0.05) 50%,
transparent 75%
);
background-size: 200% 100%;
animation: slist-shimmer 1.4s infinite linear;
pointer-events: none;
z-index: 1;
}
.woocommerce ul.products li.product .slist-card__media {
position: relative;
}
/*
* ---- Shop toolbar ----
*
* NOT sticky. The nav is already fixed at the top; stacking a second sticky
* element eats ~110px of viewport and doubles the backdrop-filter cost on
* every scroll frame (two glass surfaces re-snapshotting simultaneously).
* Users who want to re-filter scroll back up — the fixed nav already gives
* them an anchor.
*
* Surface is flat — the glass-on-glass approach (glassy toolbar + glassy
* pills inside) produced muddy hierarchy. Apple HIG on Liquid Glass is
* explicit that the material does NOT nest. Now: thin hairline border +
* subtle solid tint, pills sit as flat text ON the surface, not as
* competing glass chips.
*/
.slist-shop-toolbar {
display: flex;
flex-direction: column;
gap: var(--slist-space-3);
margin: 0 0 var(--slist-space-5);
padding: var(--slist-space-3) var(--slist-space-4);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-lg);
background: rgba(255, 255, 255, 0.03);
/* position: sticky intentionally removed — do not re-add. */
}
.slist-shop-toolbar__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--slist-space-3);
flex-wrap: wrap;
}
.slist-shop-toolbar__subhead {
margin: 0;
font-family: var(--slist-font-body);
font-size: var(--slist-text-callout);
color: var(--slist-text-secondary);
letter-spacing: var(--slist-ls-snug);
}
.woocommerce .slist-shop-toolbar .woocommerce-result-count {
margin: 0;
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
float: none;
}
.slist-shop-toolbar__filters {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--slist-space-3);
flex-wrap: wrap;
}
.slist-shop-toolbar__pills {
display: flex;
flex-wrap: wrap;
gap: var(--slist-space-2);
flex: 1 1 auto;
min-width: 0;
}
/*
* Pills inside the toolbar — FLAT. No border, no background by default.
* The toolbar surface IS the container; pills are just text on that surface.
* Only the active state gets visible chrome (red fill) — hierarchy through
* state, not through matching borders. Hover adds a subtle bg so the
* tap target is obvious.
*
* These overrides are scoped to `.slist-shop-toolbar__pills` so the base
* `.slist-btn--pill` (used elsewhere — tags, event filters, etc.) keeps
* its default bordered look.
*/
.slist-shop-toolbar__pills .slist-btn--pill {
background: transparent;
border: 1px solid transparent;
color: var(--slist-text-secondary);
letter-spacing: var(--slist-ls-wider);
transition:
background var(--slist-transition-fast),
color var(--slist-transition-fast);
}
.slist-shop-toolbar__pills .slist-btn--pill:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: transparent;
color: var(--slist-text-primary);
}
@media (hover: hover) {
.slist-shop-toolbar__pills .slist-btn--pill:hover {
background: rgba(255, 255, 255, 0.06);
border-color: transparent;
color: var(--slist-text-primary);
}
}
.slist-shop-toolbar__pills .slist-btn--pill.is-active {
background: var(--slist-primary);
border-color: var(--slist-primary);
color: #ffffff;
}
.woocommerce .slist-shop-toolbar .woocommerce-ordering {
margin: 0;
float: none;
flex: 0 0 auto;
}
.woocommerce .slist-shop-toolbar .woocommerce-ordering select,
.woocommerce .slist-shop-toolbar select.orderby {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--slist-separator-medium);
border-radius: var(--slist-radius-md);
color: var(--slist-text-primary);
font-family: var(--slist-font-body);
font-size: var(--slist-text-callout);
padding: 8px 36px 8px 14px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
transition: border-color var(--slist-transition-fast);
}
.woocommerce .slist-shop-toolbar .woocommerce-ordering select:focus {
border-color: var(--slist-separator-strong);
outline: none;
}
@media (hover: hover) {
.woocommerce .slist-shop-toolbar .woocommerce-ordering select:hover {
border-color: var(--slist-separator-strong);
outline: none;
}
}
@media (max-width: 600px) {
.slist-shop-toolbar__filters {
align-items: stretch;
}
.slist-shop-toolbar__pills {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 4px;
}
.slist-shop-toolbar__pills::-webkit-scrollbar { display: none; }
.slist-shop-toolbar__pills .slist-btn--pill { flex: 0 0 auto; }
.woocommerce .slist-shop-toolbar .woocommerce-ordering select { width: 100%; }
}
.woocommerce,
.woocommerce-page {
color: var(--slist-text-primary);
}
/* ---- Shop archive — product grid ---- */
/*
* Product grid.
*
* Default 3 columns — at 6-product catalog size, 3-col gives two full rows
* of bigger cards instead of a half-empty row 2. Bumps to 4 columns on wide
* viewports (>1600px) so larger screens aren't wastefully empty, and down to
* 2 on tablets, 1 on phones.
*/
.woocommerce ul.products.slist-shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--slist-space-4);
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 1600px) {
.woocommerce ul.products.slist-shop-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 900px) {
.woocommerce ul.products.slist-shop-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/*
* Mobile (≤480px) holds at 2 columns — earlier 1-col override removed
* 2026-04-28 per user direction. Standardizes shop archive grid with
* related-products grid on PDPs (both 2/3/4 cols across breakpoints).
* The 2-col layout still works visually at iPhone widths because the
* card content is just image + title + price — no ATC button or chips
* to crowd the layout.
*/
/*
* WooCommerce injects ::before and ::after on ul.products as a legacy float
* clearfix (content: " "; display: table). On a CSS Grid container those
* pseudos become real grid items and occupy two cells, shifting the real
* products off-grid. Suppress them.
*/
.woocommerce ul.products.slist-shop-grid::before,
.woocommerce ul.products.slist-shop-grid::after {
display: none;
}
.woocommerce ul.products li.product.slist-card {
width: 100%;
margin: 0;
padding: 0;
float: none;
text-align: left;
position: relative;
}
.woocommerce ul.products li.product .slist-card__link {
/*
* Flex-column + height:100% so .slist-card__body fills the remaining
* card height after .slist-card__media. Combined with `margin-top: auto`
* on .slist-card__price below, prices bottom-align across cards even
* when title lengths differ (1-line vs 2-line titles in the same row
* were leaving prices misaligned — fixed 2026-04-28).
*/
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
/* Push price to the bottom of the card body so it aligns horizontally
with sibling cards regardless of title length. */
.woocommerce ul.products li.product .slist-card__price {
margin-top: auto;
}
.woocommerce ul.products li.product .slist-card__media {
aspect-ratio: 1 / 1;
overflow: hidden;
/* Background lives on .slist-card__media in components/card.css */
}
.woocommerce ul.products li.product .slist-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--slist-transition-slow);
}
@media (hover: hover) {
.woocommerce ul.products li.product.slist-card--interactive:hover .slist-card__media img {
transform: scale(1.04);
}
}
.woocommerce ul.products li.product .slist-card__body {
padding: 20px 20px 8px;
}
/*
* Shop card body — everything centered per user direction.
* "This should all be central lined" applies to title, price, chips.
*/
.woocommerce ul.products li.product .slist-card__body {
text-align: center;
}
.woocommerce ul.products li.product .slist-card__title {
/*
* Sans-serif body font (Public Sans), not --slist-font-display
* (Times New Roman). Per brand-system.md, Times is reserved for
* headliner names on event flyers — not product titles. Product
* card titles read as merch nameplates, which want the cleaner
* sans-serif voice.
*
* Size bumped down from --slist-text-title3 → --slist-text-body to
* shrink the type slightly (user direction 2026-04-27). Lets cards
* feel calmer and gives the price below it a more dialed hierarchy.
*/
font-family: var(--slist-font-body);
font-size: var(--slist-text-body);
font-weight: var(--slist-weight-regular);
margin: 0 0 var(--slist-space-1);
color: var(--slist-text-primary);
text-align: center;
}
/*
* Price — smaller + centered. Previous sizing rendered as large/bold
* due to WC core's .price rules winning; user flagged it as "too
* garish." Bumping to eyebrow/callout range + regular weight gives the
* price a supporting role, letting the product image lead.
*/
.woocommerce ul.products li.product .slist-card__price,
.woocommerce ul.products li.product .price {
/*
* Card price — caption/tertiary (muted + smaller) per user direction
* 2026-04-28. Reverted from the brief body/secondary experiment when
* user said 'large price looks gaudy' + preferred the smaller muted
* version.
*
* Same values as .slist-card--product .slist-card__price in card.css —
* this WC-scoped rule has higher specificity and would override otherwise,
* so it must mirror the component-level values to avoid drift.
*
* Source of truth: DESIGN.md §6 Components > Prices.
*/
font-size: var(--slist-text-caption);
font-weight: var(--slist-weight-regular);
color: var(--slist-text-tertiary);
margin: 0;
text-align: center;
}
.woocommerce ul.products li.product .slist-card__price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-size: inherit;
font-weight: var(--slist-weight-regular);
}
.woocommerce ul.products li.product .slist-card__price ins,
.woocommerce ul.products li.product .price ins {
color: var(--slist-text-primary);
text-decoration: none;
background: transparent;
font-weight: var(--slist-weight-semibold);
}
.woocommerce ul.products li.product .slist-card__price del,
.woocommerce ul.products li.product .price del {
color: var(--slist-text-tertiary);
margin-right: var(--slist-space-2);
}
.woocommerce ul.products li.product .slist-card__cta {
padding: 0 20px 20px;
}
/*
* Grid CTA — ghost default, fill on hover/focus.
*
* When every card ends in solid red, red stops being a signal. Defaulting
* to a thin-bordered ghost button and filling to primary on hover makes the
* CTA feel earned — and lets the products carry the page. Solid red is
* reserved for the PDP single high-stakes action.
*/
.woocommerce ul.products li.product .slist-card__cta .button,
.woocommerce ul.products li.product .slist-card__cta .added_to_cart {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px 16px;
background: transparent;
color: var(--slist-text-primary);
border: 1px solid var(--slist-separator-medium);
border-radius: var(--slist-radius-md);
font-family: var(--slist-font-body);
font-weight: var(--slist-weight-bold);
font-size: 12px;
letter-spacing: var(--slist-ls-wide);
text-decoration: none;
text-transform: none;
cursor: pointer;
transition:
background var(--slist-transition-fast),
border-color var(--slist-transition-fast),
color var(--slist-transition-fast);
}
.woocommerce ul.products li.product .slist-card__cta .button:focus-visible,
.woocommerce ul.products li.product .slist-card__cta .added_to_cart:focus-visible {
background: var(--slist-primary);
border-color: var(--slist-primary);
color: #ffffff;
outline: none;
}
@media (hover: hover) {
.woocommerce ul.products li.product .slist-card__cta .button:hover,
.woocommerce ul.products li.product .slist-card__cta .added_to_cart:hover {
background: var(--slist-primary);
border-color: var(--slist-primary);
color: #ffffff;
outline: none;
}
}
@media (hover: hover) {
/* Card-level hover also fills the CTA — reinforces that the whole card is live. */
.woocommerce ul.products li.product.slist-card--interactive:hover .slist-card__cta .button {
background: var(--slist-primary);
border-color: var(--slist-primary);
color: #ffffff;
}
}
.woocommerce ul.products li.product .slist-card__cta .added {
display: none;
}
/* Variant peek — tiny eyebrow above the CTA for variable products. */
.slist-card__variant-peek {
display: block;
margin: 0 0 var(--slist-space-2);
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
}
/* ---- Empty state (no products in filtered view) ---- */
.woocommerce .slist-shop-empty {
padding: var(--slist-space-8) var(--slist-space-4);
text-align: center;
border: 1px dashed var(--slist-separator-medium);
border-radius: var(--slist-radius-lg);
background: rgba(255, 255, 255, 0.02);
}
.slist-shop-empty__eyebrow {
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
font-weight: var(--slist-weight-semibold);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
margin: 0 0 var(--slist-space-2);
}
.slist-shop-empty__title {
font-family: var(--slist-font-display);
font-size: var(--slist-text-title2);
font-weight: var(--slist-weight-regular);
color: var(--slist-text-primary);
margin: 0 0 var(--slist-space-3);
}
.slist-shop-empty__body {
color: var(--slist-text-secondary);
margin: 0 auto var(--slist-space-4);
max-width: 46ch;
}
.slist-shop-empty__link {
color: var(--slist-primary);
text-decoration: none;
font-weight: var(--slist-weight-semibold);
border-bottom: 1px solid var(--slist-primary);
padding-bottom: 2px;
transition: opacity var(--slist-transition-fast);
}
@media (hover: hover) {
.slist-shop-empty__link:hover {
opacity: 0.8;
}
}
/* Remove the default WC "no products" notice styling so our custom empty state takes over. */
.woocommerce-no-products-found .woocommerce-info {
display: none;
}
/* ---- Single product ---- */
/*
* PDP layout — 2-col grid with explicit row placement.
*
* Row 1 col 1: gallery (spans to row 2 so it can extend below summary
* without stretching row 1's height).
* Row 1 col 2: summary (title/price/pills/qty/ATC/pay).
* Row 2 col 2: tabs (description / additional info).
*
* Without the gallery's explicit row span, auto-placement would put
* gallery in cell (1,1), summary in (1,2), tabs in (2,2). Row 1 height
* = max(gallery, summary). If gallery is 817px (9 images stacked —
* flexslider not initializing, see follow-up) and summary is 400px,
* row 1 becomes 817, and tabs at row 2 have a 400px gap above them
* (= gallery height - summary height). The user flagged exactly that
* gap. Solution: gallery spans rows 1-2; row 1 height is defined by
* summary alone; tabs land directly below summary; gallery extends
* downward as its natural height needs (may overflow slightly beyond
* tabs' bottom — acceptable visually).
*/
/*
* PDP container sizing — force the full GeneratePress content chain to fill
* to 1200px, and widen slist-container--wide from 1120 → 1200.
*
* Why: GP's `.site.grid-container` has `flex: 1 0 auto; max-width: 1200px` and
* sits inside `body { display: flex; flex-direction: column }`. With
* `flex-basis: auto`, GP resolves `.site` to its content's max-content width —
* which on PDPs became driven by the grid's intrinsic size. After switching
* the product grid to `minmax(0, 1fr) minmax(0, 1fr)` (tracks can collapse to
* 0), the grid's max-content dropped to whatever the summary needed, and
* `.site` shrank with it (observed: 766px on Beanie, 1120 on Cruelneck —
* content-driven variance). Forcing `width: 100%` on the chain makes GP honor
* its 1200 max-width ceiling instead of shrink-to-fit.
*
* Scoped to `.single-product` so archive/shop pages keep their default GP
* sizing. Stops at `.slist-main--shop` for the same reason.
*/
.single-product .site.grid-container,
.single-product .slist-main--shop,
.single-product .slist-main--shop .slist-container--wide {
width: 100%;
}
.single-product .slist-main--shop .slist-container--wide {
/* Match GP's theme cap so PDP columns fill full content width. */
max-width: 1200px;
}
/*
* WC non-PDP container fix — cart, checkout, my-account, order-received.
*
* Same GP flex-collapse problem as the .single-product fix above. Block-based
* pages render React shells with no intrinsic min-width, so .site collapses to
* ~79px (cart) / ~176px (checkout) on a 1360px viewport, leaving a narrow
* column pushed to the right. Per CSS flexbox spec: when both cross-axis auto
* margins are present (`margin: 0 auto` on .site), `align-items: stretch` is
* cancelled and the element sizes to its content's max-content width.
*
* Scoped to .slist-wc-page (theme-set body class on cart/checkout/my-account
* etc). Event pages use .slist-event-page so this rule won't affect them. The
* PDP rule above stays separate because it widens additional
* .slist-container--wide containers that don't apply to other WC templates.
*/
.slist-wc-page .site.grid-container {
width: 100%;
}
.single-product .slist-main--shop div.product {
display: grid;
/*
* minmax(0, 1fr) forces equal 50/50 tracks. Plain `1fr 1fr` resolves to
* `minmax(auto, 1fr)` — the `auto` floor lets track 1 grow to the gallery's
* max-content (the aspect-ratio:1/1 wrapper pushing to full available width),
* which shoves the summary into whatever's left (observed 644px / 428px on
* a 1120px container instead of the intended 536/536). minmax(0,...)
* clamps the floor to 0 so both tracks distribute space equally regardless
* of intrinsic content size. Pair with the `.site width: 100%` fix above
* or GP's flex parent will shrink-wrap the whole page to content width.
*/
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
gap: var(--slist-space-7);
align-items: start;
}
/*
* Override WC core rule at `woocommerce.css`:
* .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
* width: 25%; display: inline-block;
* }
* WC's default is a 4-col thumbnail grid under the main image. We replaced
* the whole gallery with `.slist-pdp-gallery--js` (pdp.js), so thumbs are
* rendered separately via `.flex-control-thumbs` and these image divs are
* absolutely positioned inside the wrapper. The 25% width is dead at runtime
* but still matches in the cascade — visible briefly as a FOUC before JS
* runs, and on no-JS viewers. Forcing 100% collapses the pre-JS thumbnail
* strip into a vertical stack that hides naturally under our JS overlay.
*
* Specificity: `.single-product .slist-main--shop` adds two class selectors
* over WC core, so we win the cascade without `!important`. Drop this rule
* once we dequeue woocommerce.css entirely (see P0 plan).
*/
.single-product .slist-main--shop .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2),
.single-product .slist-main--shop .woocommerce-product-gallery__image:nth-child(n+2) {
width: 100%;
display: block;
}
.single-product .slist-main--shop .woocommerce-product-gallery {
width: 100%;
float: none;
grid-column: 1;
grid-row: 1 / 3;
/*
* CRITICAL: WC core ships with `opacity: 0` as an inline style on
* this container, expecting its bundled flexslider JS to flip it to
* 1 after initialization. We removed wc-product-gallery-slider
* theme support → flexslider never loads → JS never runs → opacity
* stays at 0 → entire gallery invisible. Force opacity 1 so the
* custom Shopify-style gallery in pdp.js gets to show its work.
*/
opacity: 1 !important;
}
.single-product .slist-main--shop div.product .summary {
grid-column: 2;
grid-row: 1;
}
/*
* PDP gallery wrapper — fully transparent, no panel, no frame.
*
* Removed 2026-04-23 (second pass): previously mirrored `.slist-card__media`
* (home-card `#242428` + SVG fractalNoise + top vignette). User direction:
* strip both the glass/texture and the visible edge between the main image
* and the thumbnails below. Without a border-radius + bg color the panel has
* no visible boundary, which removes the perceived "line" between the hero
* image and the thumbnail strip underneath.
*
* Cascade contract (post 2026-04-24 glass refactor): `components/glass.css`
* sets `background: rgba(255,255,255,0.04)` on this selector chain WITHOUT
* !important. Templates (this file) load AFTER components, so on equal
* specificity (0,4,1 here matches glass.css) we win on load order alone.
* No belt-and-suspenders !important needed.
*
* Known tradeoff: transparent-PNG products with black fabric (e.g. Cruelneck,
* Headshot Beanie) lose silhouette contrast against the page bg. Fix path is
* re-shooting those products on a non-transparent backdrop; CSS can't create
* contrast that doesn't exist in the source pixels.
*/
.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
position: relative;
}
/*
* Vignette killed — was a top-center radial highlight simulating studio
* lighting. With no panel behind the product there's nothing to light; the
* pseudo would just haze the page bg.
*
* glass.css sets ::after's `background` (radial gradient glint) on this
* selector but doesn't set `content`, so the pseudo doesn't render anyway.
* Defensive `content: none` here ensures it stays that way if anything else
* sets `content: ""` upstream.
*/
.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__wrapper::after {
content: none;
display: none;
}
/*
* Image cell mirrors the wrapper — fully transparent, no chrome.
* Same cascade contract: glass.css uses no !important; we win by load order.
*/
.single-product .slist-main--shop .woocommerce-product-gallery .woocommerce-product-gallery__image {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/*
* Remove any leftover drop-shadow filter on gallery images. The cinematic
* drop-shadow now lives on `.slist-card--product .slist-card__media img`
* in card.css — product-card-only. PDP gallery images use a different
* selector and don't inherit the shadow. This `filter: none` is dormant
* defense — kept (without !important) in case a future plugin / inline
* style applies a filter we don't want.
*
* Semantic call still open: should the borderless PDP gallery get a
* cinematic shadow? Decision deferred to user.
*/
.single-product .slist-main--shop .woocommerce-product-gallery__image img,
.single-product .slist-main--shop .woocommerce-product-gallery__image--placeholder img {
filter: none;
}
/*
* Rim-light on PDP. Bigger image needs bigger shadows to read at 500px+.
* Tighter edge highlight defines the silhouette, wider bloom sells it as
* studio-lit. Thumbnails get a lighter version since they're small.
*/
/*
* PDP hero image — long cinematic drop-shadow below, no white rim-light.
* The shadow sells weight and "sitting on a surface." Image goes above the
* ::after vignette via z-index so the shadow composites correctly.
*/
.single-product .slist-main--shop .woocommerce-product-gallery__image img,
.single-product .slist-main--shop .woocommerce-product-gallery__image--placeholder img {
filter:
drop-shadow(0 48px 56px rgba(0, 0, 0, 0.65))
drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
position: relative;
z-index: 2;
}
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs {
display: flex;
gap: var(--slist-space-2);
margin-top: var(--slist-space-2);
padding: 0;
list-style: none;
}
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs li {
width: auto;
max-width: 72px;
margin: 0;
}
/* Thumbnails — ghost mannequin. No border, no bg, just the product image.
Active thumb gets a thin red underline via ::after on the parent
. */
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs img {
border: 0;
border-radius: 0;
cursor: pointer;
background: transparent;
box-shadow: none;
filter: none;
opacity: 0.7;
transition: opacity var(--slist-transition-fast);
}
@media (hover: hover) {
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1;
}
}
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
opacity: 1;
}
/* Active indicator: thin red line under the active thumbnail. */
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs li {
position: relative;
}
.single-product .slist-main--shop .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active)::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: -4px;
height: 2px;
background: var(--slist-primary);
border-radius: 1px;
}
.single-product .slist-main--shop div.product .summary {
width: 100%;
float: none;
margin: 0;
}
.single-product .slist-main--shop .product_title {
font-family: var(--slist-font-display);
font-size: var(--slist-text-title1);
font-weight: var(--slist-weight-regular);
letter-spacing: var(--slist-ls-snug);
margin: 0 0 var(--slist-space-3);
color: var(--slist-text-primary);
}
/*
* Price on PDP. WooCommerce core ships an olive/amber default
* (rgb(149, 142, 9)) on `.woocommerce div.product p.price` that wins on
* specificity against single-class selectors, so include the .woocommerce
* ancestor and inner Price-amount span to guarantee the override.
*/
/*
* PDP main price — scoped strictly to .summary so it doesn't bleed into
* related products / upsells (which use their own card price rule).
*
* 2026-04-28: bumped down from --slist-text-title3 + semibold + primary
* (read as "gaudy" per user) to caption + regular + tertiary, matching
* card prices everywhere. Unified price treatment site-wide — no
* special-treatment for PDP main price. Kept the .summary-only scope so
* related products on the PDP don't inherit the wrong rule.
*/
.single-product .slist-main--shop .summary > .price,
.single-product.woocommerce .slist-main--shop div.product .summary > p.price,
.single-product.woocommerce .slist-main--shop div.product .summary > span.price,
.single-product .slist-main--shop .summary .woocommerce-Price-amount,
.single-product .slist-main--shop .summary .woocommerce-Price-currencySymbol {
font-family: var(--slist-font-body);
font-size: var(--slist-text-caption);
font-weight: var(--slist-weight-regular);
color: var(--slist-text-tertiary);
margin: 0 0 var(--slist-space-3);
}
/*
* Left-align pass — user direction. Everything in the summary column
* left-aligned: title, price, pills, qty stepper. ATC + pay buttons
* still full-width (as wide as the 420px column).
*/
.single-product .slist-main--shop .summary > .price,
.single-product.woocommerce .slist-main--shop div.product .summary > p.price {
text-align: left;
}
.single-product .slist-main--shop form.cart {
align-items: flex-start;
}
.single-product .slist-main--shop form.cart .slist-pdp-stepper {
align-self: flex-start;
margin: 0;
}
.single-product .slist-main--shop .woocommerce-product-details__short-description {
color: var(--slist-text-secondary);
margin: 0 0 var(--slist-space-4);
font-size: var(--slist-text-body);
line-height: var(--slist-lh-default);
}
/* Add-to-cart form */
.single-product .slist-main--shop form.cart {
margin: 0 0 var(--slist-space-5);
}
.single-product .slist-main--shop form.cart .quantity {
display: inline-flex;
align-items: center;
margin-right: var(--slist-space-2);
vertical-align: middle;
}
.single-product .slist-main--shop form.cart .qty {
width: 72px;
text-align: center;
}
.single-product .slist-main--shop form.cart .single_add_to_cart_button,
.slist-main--shop button.button.alt,
.slist-main--shop .button.alt {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 32px;
/*
* Outlined ATC pattern — TRUE BLACK bg + red text + 1.5px red border,
* matching the sticky CTA. Site-wide consistency. Hover fills solid red
* with white text.
*/
background: var(--slist-bg, #000000);
color: var(--slist-primary);
border: 1.5px solid var(--slist-primary);
border-radius: var(--slist-radius-md);
font-family: var(--slist-font-body);
font-weight: var(--slist-weight-bold);
font-size: var(--slist-text-body);
cursor: pointer;
transition: background var(--slist-transition-fast);
text-transform: none;
text-decoration: none;
}
@media (hover: hover) {
.single-product .slist-main--shop form.cart .single_add_to_cart_button:hover,
.slist-main--shop button.button.alt:hover,
.slist-main--shop .button.alt:hover {
background: var(--slist-primary);
color: #ffffff;
border-color: var(--slist-primary);
}
}
/* Variations table */
.single-product .slist-main--shop table.variations {
margin: 0 0 var(--slist-space-3);
border: none;
}
.single-product .slist-main--shop table.variations td,
.single-product .slist-main--shop table.variations th {
border: none;
padding: var(--slist-space-2) 0;
}
.single-product .slist-main--shop table.variations th {
padding-right: var(--slist-space-3);
font-weight: var(--slist-weight-semibold);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-secondary);
}
/* "Clear" link removed entirely — see consolidated hide rule near
the size-pills block below. The original styling that lived here
(color/font-size/margin-left) is dead code now. */
/* Product meta */
.single-product .slist-main--shop .product_meta {
margin-top: var(--slist-space-4);
padding-top: var(--slist-space-3);
border-top: 1px solid var(--slist-separator);
font-size: var(--slist-text-callout);
color: var(--slist-text-secondary);
}
.single-product .slist-main--shop .product_meta > span {
display: block;
margin-bottom: var(--slist-space-1);
}
/* Related products */
.single-product .slist-main--shop .related.products,
.single-product .slist-main--shop .upsells.products {
margin-top: var(--slist-space-8);
padding-top: var(--slist-space-5);
border-top: 1px solid var(--slist-separator);
}
.single-product .slist-main--shop .related.products h2,
.single-product .slist-main--shop .upsells.products h2 {
text-align: center;
margin: 0 0 var(--slist-space-5);
}
@media (max-width: 767px) {
.single-product .slist-main--shop div.product {
grid-template-columns: 1fr;
gap: var(--slist-space-6);
}
/*
* Reset gallery (col 1, rows 1-3) + summary (col 2, row 1) explicit placements.
* Without these resets, `grid-column: 2` on summary forces CSS Grid to materialize
* an implicit second column at mobile widths, defeating the 1fr collapse — the
* page renders cramped two-column instead of stacked. Source order (gallery →
* summary → tabs) gives the natural Spotify-style vertical flow on collapse.
*/
.single-product .slist-main--shop .woocommerce-product-gallery,
.single-product .slist-main--shop div.product .summary {
grid-column: auto;
grid-row: auto;
}
/*
* Center the product summary stack on mobile only — title, price, size
* pills, qty stepper, and ATC button. Flexbox center handles block-level
* children (form, sub-divs); text-align: center cascades to inline text.
* Brand spec calls for left-aligned by default, but on mobile a centered
* vertical stack reads as more focused/showcase-like.
*/
.single-product .slist-main--shop div.product .summary {
text-align: center;
align-items: center;
}
.single-product .slist-main--shop form.cart {
align-items: center;
}
/* Pills container has its own justify-content: flex-start (line 1906)
that overrides parent centering. Force center on mobile. */
.single-product .slist-main--shop .slist-pdp-pills {
justify-content: center;
}
/* Description stays left-aligned even though parent .summary is centered.
Centered body text reads worse than centered chrome — line lengths
become hard to track. Brand spec also defaults left for body copy.
Note: actual rendered wrapper is .slist-pdp-description, not the
.woocommerce-product-details__short-description from the PHP — earlier
selector missed the live class. */
.single-product .slist-main--shop .slist-pdp-description,
.single-product .slist-main--shop .woocommerce-product-details__short-description {
text-align: left;
}
/* Breadcrumb centered on mobile to match the centered summary stack. */
.single-product .slist-main--shop .slist-pdp-breadcrumb,
.single-product .slist-main--shop .slist-breadcrumb {
text-align: center;
}
/*
* Inline ATC button — content-sized on mobile, not stretched to fill the
* row. Default rule (line 2126) sets flex: 1 1 auto so the ATC fills the
* remaining space next to the qty stepper. On mobile that becomes a
* full-width red-bordered button which reads as too dominant. Reverting
* to flex: 0 0 auto + auto width gives it a content-hugging size that
* matches the qty stepper's compact feel.
*/
.single-product .slist-main--shop form.cart .button,
.single-product .slist-main--shop form.cart button.single_add_to_cart_button {
flex: 0 0 auto;
width: auto;
}
/*
* Full-bleed gallery on mobile.
*
* Break out of every parent's horizontal padding (GP grid-container, .slist-main--shop,
* .slist-container--wide) by anchoring the gallery to the viewport width. The trick:
* width:100vw + margin-left:calc(50% - 50vw) makes the element span the full viewport
* regardless of the cumulative inherited padding chain.
*
* Aesthetic rationale: SLIST's "ghost mannequin" treatment + black-on-black product
* shots earn full viewport width on mobile. Horizontal real estate on a phone is
* scarce; spending any of it on container chrome around the hero image is wrong.
* Title/price/pills/CTA below stay inside container padding for readable line length.
*/
.single-product .slist-main--shop .woocommerce-product-gallery {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
}
/*
* Hero-scale product title on mobile.
*
* Default --slist-text-title1 clamps to 1.5rem at mobile widths (~24px) — too
* quiet for a phone hero. Bump to clamp(2rem, 7vw, 2.5rem) → ~32px at 390px
* viewport, scaling up to 40px on larger phones. Tighter letter-spacing reads
* as more confident at hero scale (Spotify pattern: bigger text earns tighter
* tracking, not looser).
*/
.single-product .slist-main--shop .product_title {
font-size: clamp(2rem, 7vw, 2.5rem);
letter-spacing: -0.02em;
line-height: 1.1;
}
/*
* Smooth-scroll target offset for the sticky-CTA scroll-back-to-form
* action (assets/js/pdp-sticky.js). Without this, scrollIntoView lands
* the form behind the fixed header. scroll-margin-top is programmatic-
* scroll-only — has no visual margin effect on layout.
*/
.single-product .slist-main--shop form.cart {
scroll-margin-top: calc(var(--slist-header-height, 64px) + var(--slist-space-3));
}
}
/* ---- PDP: Tabs (Description, Additional Info, Reviews) ---- */
/*
* Tabs sit in the RIGHT column directly below the summary — Shopify-
* standard continuous-right-column layout. Previously `grid-column: 1 / -1`
* made tabs span full-width under gallery + summary, producing a visual
* "jog" where the narrow summary became a wide tabs strip. Now tabs
* continue the right column below the summary, and the gallery on the
* left becomes sticky so it stays in frame as the user scrolls tabs.
*/
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs {
grid-column: 2 / 3;
grid-row: 2 / 3;
margin-top: var(--slist-space-4);
padding-top: var(--slist-space-4);
border-top: 1px solid var(--slist-separator);
}
/* Gallery sticks to top while user scrolls tabs on the right. */
@media (min-width: 768px) {
.single-product .slist-main--shop .woocommerce-product-gallery {
position: sticky;
top: calc(var(--slist-header-height, 64px) + var(--slist-space-4));
align-self: start;
}
}
/* Mobile collapses to single column — tabs render naturally after summary. */
@media (max-width: 767px) {
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs {
grid-column: auto;
grid-row: auto;
max-width: none;
}
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--slist-space-3);
list-style: none;
margin: 0 0 var(--slist-space-4);
padding: 0;
border: none;
background: transparent;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs::before,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs::after {
display: none;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: none;
border-radius: 0;
padding: 0 0 var(--slist-space-2);
margin: 0;
position: relative;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs li a {
padding: 0;
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
font-weight: var(--slist-weight-semibold);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
text-decoration: none;
transition: color var(--slist-transition-fast);
}
@media (hover: hover) {
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs li:hover a {
color: var(--slist-text-secondary);
}
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--slist-text-primary);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs ul.tabs li.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--slist-primary);
border-radius: 2px;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel {
background: transparent;
border: none;
padding: var(--slist-space-3) 0 0;
color: var(--slist-text-primary);
line-height: var(--slist-lh-default);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel h2 {
display: none; /* Redundant with the tab label itself. */
}
/*
* Tab container — no glass panel chrome.
*
* Screenshot showed the tabs wrapped in a glassy rounded rect with a red
* corner glint (inherited from the site-wide `.slist-card` glass retrofit
* in glass.css). Kill those treatments on the tabs specifically so the
* panel reads as a clean separator, not another nested card.
*
* Cascade contract: glass.css's `.single-product.woocommerce .slist-main--shop
* div.product .woocommerce-tabs` rule no longer uses !important. Same
* specificity as ours (0,4,2) but this file loads later → we win by source
* order. No !important required here.
*/
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel {
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs::before,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs::after,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel::before,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel::after {
content: none;
display: none;
}
/* Description panel: bullet styling inside tabs (author writes in WP,
gets a red-dot list out). Same treatment as the summary had previously. */
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel ul {
list-style: none;
padding: 0;
margin: 0;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel ul li,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel p {
position: relative;
padding-left: 18px;
margin: 0 0 var(--slist-space-2);
color: var(--slist-text-secondary);
font-size: var(--slist-text-callout);
line-height: 1.55;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel ul li::before,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel p::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--slist-primary);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel ul,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel ol {
padding-left: var(--slist-space-3);
color: var(--slist-text-secondary);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .panel li {
margin-bottom: var(--slist-space-1);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .shop_attributes {
width: 100%;
border-collapse: collapse;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .shop_attributes th,
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .shop_attributes td {
padding: var(--slist-space-2) var(--slist-space-3);
border-bottom: 1px solid var(--slist-separator);
font-size: var(--slist-text-callout);
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .shop_attributes th {
color: var(--slist-text-secondary);
font-weight: var(--slist-weight-medium);
text-align: left;
width: 30%;
}
.single-product.woocommerce .slist-main--shop div.product .woocommerce-tabs .shop_attributes td {
color: var(--slist-text-primary);
}
/* ---- PDP: Related / Upsells grid ---- */
.single-product .slist-main--shop .related.products,
.single-product .slist-main--shop .upsells.products {
grid-column: 1 / -1;
margin-top: var(--slist-space-8);
padding-top: var(--slist-space-5);
border-top: 1px solid var(--slist-separator);
}
.single-product .slist-main--shop .related.products > h2,
.single-product .slist-main--shop .upsells.products > h2 {
text-align: left;
font-family: var(--slist-font-display);
font-size: var(--slist-text-title2);
font-weight: var(--slist-weight-regular);
margin: 0 0 var(--slist-space-4);
color: var(--slist-text-primary);
}
.single-product .slist-main--shop .related.products ul.products,
.single-product .slist-main--shop .upsells.products ul.products {
display: grid;
/*
* 2-col base on mobile/tablet, matching the shop archive grid feel.
* Previous `repeat(auto-fill, minmax(220px, 1fr))` collapsed to 1 col
* on a 390px iPhone (only one 220px-min column fits). Fixed 2-col
* gives the user the side-by-side product comparison they asked for.
*
* Desktop bumps via min-width media queries (multi-declaration safe
* from Perfmatters' single-rule @media-strip bug — gap is also re-set).
*/
grid-template-columns: repeat(2, 1fr);
gap: var(--slist-space-4);
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 901px) {
.single-product .slist-main--shop .related.products ul.products,
.single-product .slist-main--shop .upsells.products ul.products {
grid-template-columns: repeat(3, 1fr);
gap: var(--slist-space-4);
}
}
@media (min-width: 1600px) {
.single-product .slist-main--shop .related.products ul.products,
.single-product .slist-main--shop .upsells.products ul.products {
grid-template-columns: repeat(4, 1fr);
gap: var(--slist-space-5);
}
}
.single-product .slist-main--shop .related.products ul.products::before,
.single-product .slist-main--shop .related.products ul.products::after,
.single-product .slist-main--shop .upsells.products ul.products::before,
.single-product .slist-main--shop .upsells.products ul.products::after {
display: none;
}
/* ---- Cart + Checkout + Account ---- */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cross-sells,
.woocommerce-checkout form.checkout,
.woocommerce-account .woocommerce {
color: var(--slist-text-primary);
}
.woocommerce-cart table.shop_table {
background: var(--slist-surface);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce-cart table.shop_table th {
background: rgba(255, 255, 255, 0.04);
color: var(--slist-text-primary);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
padding: var(--slist-space-3);
border-bottom: 1px solid var(--slist-separator);
text-align: left;
}
.woocommerce-cart table.shop_table td {
padding: var(--slist-space-3);
border-bottom: 1px solid var(--slist-separator);
color: var(--slist-text-primary);
vertical-align: middle;
}
.woocommerce-cart table.shop_table tr:last-child td {
border-bottom: none;
}
.woocommerce-cart table.shop_table a {
color: var(--slist-text-primary);
text-decoration: none;
}
@media (hover: hover) {
.woocommerce-cart table.shop_table a:hover {
color: var(--slist-primary);
}
}
.woocommerce-cart .product-thumbnail img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--slist-radius-sm);
}
.woocommerce-cart .remove {
color: var(--slist-text-secondary) !important;
font-size: var(--slist-text-title3);
transition: color var(--slist-transition-fast);
}
@media (hover: hover) {
.woocommerce-cart .remove:hover {
color: var(--slist-primary) !important;
background: transparent !important;
}
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
font-family: var(--slist-font-display);
font-size: var(--slist-text-title2);
font-weight: var(--slist-weight-regular);
margin: 0 0 var(--slist-space-3);
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout #order_review table {
width: 100%;
background: var(--slist-surface);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-lg);
border-collapse: separate;
border-spacing: 0;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
padding: var(--slist-space-3);
border-bottom: 1px solid var(--slist-separator);
color: var(--slist-text-primary);
}
.woocommerce-checkout .form-row {
margin-bottom: var(--slist-space-3);
}
.woocommerce-checkout .form-row label {
display: block;
font-size: 12px;
font-weight: var(--slist-weight-medium);
color: var(--slist-text-secondary);
margin-bottom: 6px;
}
.woocommerce-checkout #payment {
background: var(--slist-surface);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-lg);
padding: var(--slist-space-4);
}
.woocommerce-checkout #payment ul.payment_methods {
list-style: none;
margin: 0 0 var(--slist-space-3);
padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: var(--slist-space-2) 0;
border-bottom: 1px solid var(--slist-separator);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
border-bottom: none;
}
.woocommerce-checkout #payment .payment_box {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-md);
padding: var(--slist-space-2) var(--slist-space-3);
color: var(--slist-text-secondary);
font-size: var(--slist-text-callout);
margin-top: var(--slist-space-2);
}
/*
* My Account
*
* WC's woocommerce-layout.css used to provide the 30%/68% float layout for
* .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content. We
* dequeue that stylesheet (see wc-config.php), so the layout is now ours.
*
* Grid here is preferable to floats: the 220px nav column is a fixed
* intrinsic size (matches the longest endpoint label "Payment methods"
* with breathing room), and the content track gets `minmax(0, 1fr)` so a
* wide order table can't bully the nav column wider on overflow.
*/
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--slist-space-5);
align-items: start;
}
@media (max-width: 767px) {
.woocommerce-account .woocommerce {
grid-template-columns: 1fr;
gap: var(--slist-space-4);
}
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: var(--slist-space-3);
background: var(--slist-surface);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-md);
color: var(--slist-text-primary);
text-decoration: none;
margin-bottom: var(--slist-space-2);
transition: border-color var(--slist-transition-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
border-color: var(--slist-primary);
}
@media (hover: hover) {
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
border-color: var(--slist-primary);
}
}
/*
* WC notices — flat panel with a red left-accent. The WC default
* `::before` pseudo was rendering a checkmark-in-red-circle icon
* positioned absolute left: 0, which crashed into the message text
* ("Headshot Beanie" → the H got eaten by the icon). Kill the icon —
* the red border already signals "notice." Cleaner, less broken.
*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
padding: 14px 18px;
background: var(--slist-surface);
border: 1px solid var(--slist-separator-medium);
border-left: 3px solid var(--slist-primary);
border-radius: var(--slist-radius-md);
color: var(--slist-text-primary);
margin: 0 0 var(--slist-space-3);
list-style: none;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--slist-space-3);
flex-wrap: wrap;
}
/*
* WC core's notice icon (checkmark/info/error pseudo) lived in
* notices.css inside the now-dequeued woocommerce.css bundle. With WC
* core CSS gone there's no `::before` to suppress, but keep the rule
* dormant (without `!important`) as a safety net in case a future plugin
* or WC update reintroduces an icon pseudo.
*/
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
content: none;
display: none;
}
/* Notice action button (e.g. "View cart") — keep as a subtle secondary
inside the notice row, right-aligned. */
.woocommerce-message a.button,
.woocommerce-info a.button {
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
padding: 8px 14px;
border-radius: var(--slist-radius-pill);
background: transparent;
border: 1px solid var(--slist-separator-medium);
color: var(--slist-text-primary);
order: 2;
}
@media (hover: hover) {
.woocommerce-message a.button:hover {
border-color: var(--slist-primary);
background: var(--slist-primary);
color: #fff;
}
}
/* WC form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .select2-container--default .select2-selection--single {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--slist-separator-medium);
border-radius: var(--slist-radius-md);
color: var(--slist-text-primary);
padding: 12px 16px;
font-family: var(--slist-font-body);
min-height: auto;
height: auto;
}
.woocommerce-checkout .checkout_coupon {
background: var(--slist-surface);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-lg);
padding: var(--slist-space-3) var(--slist-space-4);
margin-bottom: var(--slist-space-3);
}
/* Non-alt buttons */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button) {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: var(--slist-surface);
color: var(--slist-text-primary);
border: 1px solid var(--slist-separator-medium);
border-radius: var(--slist-radius-md);
font-family: var(--slist-font-body);
font-weight: var(--slist-weight-bold);
font-size: var(--slist-text-callout);
text-decoration: none;
cursor: pointer;
transition: border-color var(--slist-transition-fast);
}
@media (hover: hover) {
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):hover {
border-color: var(--slist-separator-strong);
}
}
/* ========================================================================== */
/* ---- Polish pass additions (2026-04-17) ---- */
/* ========================================================================== */
/*
* ---- Size chips on shop cards ----
*
* Centered row, nowrap so all chips fit on ONE LINE (S M L XL 2XL).
* User flagged the 2XL wrapping to a second line as layout breakage.
* Chips shrunk to 28×22 so five + 4 gaps = 148px, comfortable inside
* any shop card width ≥ 180px (mobile 2-col at 360vw → cards ~170,
* still fits).
*/
.slist-card__variants {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 4px;
padding: 0 12px var(--slist-space-2);
margin: 0;
overflow: hidden; /* clip if somehow a 6th chip appears */
}
.slist-card__variants--onesize {
/* Single-chip row (simple products like beanies). Just center it. */
justify-content: center;
}
.slist-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 6px;
flex: 0 0 auto;
font-family: var(--slist-font-body);
font-size: 10px;
font-weight: var(--slist-weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slist-text-secondary);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--slist-separator);
border-radius: var(--slist-radius-sm);
text-decoration: none;
transition:
background var(--slist-transition-fast),
border-color var(--slist-transition-fast),
color var(--slist-transition-fast);
}
.slist-chip--onesize {
/* Non-clickable — just a label. Slightly softer styling so it reads
as "no options" rather than "tap to filter." */
min-width: 72px;
padding: 0 12px;
color: var(--slist-text-tertiary);
background: transparent;
cursor: default;
}
.slist-chip:focus-visible {
background: rgba(255, 255, 255, 0.10);
border-color: var(--slist-separator-medium);
color: var(--slist-text-primary);
outline: none;
}
@media (hover: hover) {
.slist-chip:hover {
background: rgba(255, 255, 255, 0.10);
border-color: var(--slist-separator-medium);
color: var(--slist-text-primary);
outline: none;
}
}
.slist-chip--oos {
color: var(--slist-text-tertiary);
text-decoration: line-through;
text-decoration-color: rgba(255, 255, 255, 0.3);
}
@media (hover: hover) {
.slist-chip--oos:hover {
color: var(--slist-text-tertiary);
background: rgba(255, 255, 255, 0.04);
border-color: var(--slist-separator);
cursor: not-allowed;
}
}
/* ---- PDP ATC ghost state (pre-variation) ---- */
/*
* When WC marks the ATC as disabled (variation not chosen yet), switch from
* solid red to a ghost variant — matches the shop-card CTA pattern so the
* button reads as "awaiting input" not "broken primary."
*
* JS (see wc-config.php → woocommerce_after_single_variation) also swaps
* the button text to "Select size →" for matching semantics.
*/
/*
* Shopify-standard disabled ATC — same red button as the enabled state
* but desaturated + reduced opacity + not-allowed cursor. Familiar
* affordance: the button is the thing you want to press, it's just
* locked until you pick a size. No label swap, no ghost chrome.
*/
.single-product .slist-main--shop form.cart .single_add_to_cart_button.disabled,
.single-product .slist-main--shop form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.single-product .slist-main--shop form.cart .single_add_to_cart_button[disabled] {
background: var(--slist-primary);
color: #fff;
border-color: transparent;
opacity: 0.35;
filter: saturate(0.6);
cursor: not-allowed;
pointer-events: none;
}
@media (hover: hover) {
.single-product .slist-main--shop form.cart .single_add_to_cart_button.disabled:hover,
.single-product .slist-main--shop form.cart .single_add_to_cart_button[disabled]:hover {
/* no hover state on disabled */
background: var(--slist-primary);
color: #fff;
transform: none;
}
}
/* ---- Express-checkout wrapper: reserve space to avoid initial-paint flash ---- */
.single-product .slist-main--shop .wcpay-express-checkout-wrapper,
.single-product .slist-main--shop .wc-stripe-payment-request-wrapper {
min-height: 48px;
margin-top: var(--slist-space-3);
}
/* ---- Quieter tertiary links (PDP Size Guide, Categories) ---- */
.single-product .slist-main--shop .product_meta a,
.single-product .slist-main--shop .size-guide-link,
.single-product .slist-main--shop a[href*="size-guide"],
.single-product .slist-main--shop .wcsg-invoker,
/* Size Guide plugins (e.g. Printful Product Size Guide) inject an
href="javascript:" link with an inline style="color: #ff1919" that beats
normal specificity. Use !important here to override the inline. */
.single-product .slist-main--shop .single_variation_wrap a[href="javascript:"],
.single-product .slist-main--shop .single_variation_wrap a[href^="#"],
.single-product .slist-main--shop .variations_form a[href="javascript:"] {
color: var(--slist-text-secondary) !important;
text-decoration: none !important;
border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
padding-bottom: 1px;
font-size: var(--slist-text-callout);
transition: color var(--slist-transition-fast), border-color var(--slist-transition-fast);
}
@media (hover: hover) {
.single-product .slist-main--shop .product_meta a:hover,
.single-product .slist-main--shop .size-guide-link:hover,
.single-product .slist-main--shop a[href*="size-guide"]:hover,
.single-product .slist-main--shop .wcsg-invoker:hover,
.single-product .slist-main--shop .single_variation_wrap a[href="javascript:"]:hover,
.single-product .slist-main--shop .single_variation_wrap a[href^="#"]:hover,
.single-product .slist-main--shop .variations_form a[href="javascript:"]:hover {
color: var(--slist-primary) !important;
border-bottom-color: var(--slist-primary);
}
}
/* ---- PDP breadcrumb ---- */
.slist-pdp-breadcrumb {
margin: 0 0 var(--slist-space-3);
}
.slist-breadcrumb {
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
}
.slist-breadcrumb a {
color: var(--slist-text-secondary);
text-decoration: none;
transition: color var(--slist-transition-fast);
}
@media (hover: hover) {
.slist-breadcrumb a:hover {
color: var(--slist-text-primary);
}
}
.slist-breadcrumb span[aria-hidden] {
padding: 0 4px;
color: var(--slist-text-tertiary);
}
/* ---- Final polish tweaks ---- */
/* Tighter gap on desktop grid for a more coherent "wall of merch" */
.woocommerce ul.products.slist-shop-grid {
gap: 20px;
}
@media (max-width: 768px) {
.woocommerce ul.products.slist-shop-grid {
gap: 16px;
}
.slist-shop-toolbar {
/* Sticky feels jumpy on small viewports; relax. */
position: static;
backdrop-filter: none;
}
}
/* Remove the now-redundant variant-peek text style — chips replaced it. */
.slist-card__variant-peek {
display: none;
}
/* =============================================================================
* PDP — Shopify-familiar summary column.
*
* Rebuilt after user feedback — previous iteration was "all over the place
* with no visual hierarchy." Fixes:
* - Summary column has a MAX WIDTH so elements don't stretch edge-to-edge
* (ATC was a 1000px-wide red bar). Max 420px; everything left-aligned
* inside.
* - Size pills UNIFORM size (fixed square 44x44) so S, M, L, XL, 2XL all
* read as the same element with different labels.
* - Add to Cart button is the same width as the pills row — not full
* bleed, not shorter, matches.
* - Pay buttons same width + height as ATC. All three stack cleanly.
* - Label/chip row: "SIZE" eyebrow left, "Size Guide" link right, same
* baseline. Pills below, qty below that, ATC below that.
*
* Visual hierarchy (top to bottom):
* Title (display serif, largest)
* Price (body semibold, supporting)
* SIZE row: label ↔ Size Guide
* Pills (5 uniform chips)
* Qty stepper (left-aligned, 120px block)
* Add to Cart (full column width, red fill)
* Pay buttons (equal width, side by side)
* Description (bullet list, below pay buttons, border-top)
* Filed under (eyebrow footer)
* =============================================================================
*/
/*
* Summary column — ONE consistent vertical rhythm.
*
* Every child of .summary is spaced by `gap` (no margins stacking).
* Every child of form.cart is ALSO spaced by the same gap. User
* flagged doubled gaps between the variations table and stepper, and
* between ATC and the Apple Pay wrapper — that came from flex-gap +
* margin-bottom both applying. Zeroing margins throughout means gap
* is the only spacing source, guaranteed consistent.
*/
.single-product .slist-main--shop div.product .summary {
/*
* No max-width — let summary fill its grid track (now 536px at
* --slist-content-wide 1120 minus gap-7) so it pairs symmetrically with
* the gallery column, matching the event sales page layout
* (.slist-event grid-template-columns: 1fr 1fr with no per-column cap).
* Children like express-wrap and tabs may still cap themselves to 420
* — those are deliberate form-width choices, not column constraints.
*
* Gap promoted from space-3 → space-4 to match event-page vertical rhythm.
* Event page uses space-3/4 within a section, space-5 at major section
* breaks (title-block → tickets-block). Summary sub-clusters (title+price,
* size-label+pills, qty+ATC, pay-buttons) need more room to read as groups
* — at gap-3 everything sat equidistant and the hierarchy collapsed.
*/
display: flex;
flex-direction: column;
gap: var(--slist-space-4);
}
.single-product .slist-main--shop div.product .summary > * {
margin: 0;
}
.single-product .slist-main--shop form.cart {
padding: 0;
background: transparent;
border: 0;
}
.single-product .slist-main--shop form.cart > *,
.single-product .slist-main--shop form.cart .single_variation_wrap > *,
.single-product .slist-main--shop form.cart table.variations,
.single-product .slist-main--shop form.cart table.variations tr,
.single-product .slist-main--shop form.cart table.variations td {
margin: 0;
}
/*
* Kill the leftover product_meta slot entirely. remove_action in
* wc-pdp.php drops the WC core renderer at priority 40, but the
* screen-reader-only wrapper can linger on some WC versions. Belt +
* suspenders — CSS hide ensures zero empty-block residue below the
* pay wrapper.
*/
.single-product .slist-main--shop div.product .summary .product_meta {
display: none;
}
/* Variations table — kill WC's
chrome AND hide the SIZE label.
User flag: "size and size guide is redundant. Just keep the size guide."
The Size Guide link above the pills serves as the affordance header;
a separate "SIZE" eyebrow just adds noise. */
.single-product .slist-main--shop table.variations,
.single-product .slist-main--shop table.variations tbody,
.single-product .slist-main--shop table.variations tr,
.single-product .slist-main--shop table.variations td {
display: block;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: 0;
text-align: center;
}
.single-product .slist-main--shop table.variations th {
display: none; /* SIZE eyebrow — redundant with Size Guide link */
}
/*
* Hide WC's "Clear" link in every state.
*
* !important is load-bearing here: WC's add-to-cart-variation.js calls
* `$reset_variations.css('visibility', 'visible')` and in some flows
* `.css('display', 'inline-block')` directly on the element via inline
* style. Inline beats CSS specificity; only !important wins.
*
* Tap-the-active-pill-to-clear is the documented affordance now (see
* pdp.js — pills toggle off on second tap), so the redundant text link
* adds clutter, not function.
*/
.single-product .slist-main--shop .reset_variations,
.single-product .slist-main--shop a.reset_variations {
display: none !important;
visibility: hidden !important;
}
/*
* Size Guide row — sits BELOW the pills, centered with breathing room above.
* Reordered 2026-04-27 per user direction. The link is the only size header
* now (SIZE eyebrow is hidden above).
*/
.slist-pdp-sizeguide-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--slist-space-3);
margin: var(--slist-space-3) 0 var(--slist-space-2);
}
.slist-pdp-sizeguide-link {
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-secondary);
text-decoration: none;
border-bottom: 1px dotted var(--slist-separator-medium);
padding-bottom: 1px;
transition: color var(--slist-transition-fast), border-color var(--slist-transition-fast);
flex: 0 0 auto;
}
.slist-pdp-sizeguide-link:focus-visible {
color: var(--slist-text-primary);
border-bottom-color: var(--slist-primary);
outline: none;
}
@media (hover: hover) {
.slist-pdp-sizeguide-link:hover {
color: var(--slist-text-primary);
border-bottom-color: var(--slist-primary);
outline: none;
}
}
/* ---- Size pills — CENTERED row, 36×36 so all 5 fit on one line ----
Previous 44×44 wrapped to two lines on narrower screens. 36×36 with
6px gap means 5 pills + 4 gaps = 204px, comfortable inside the 420px
summary column even on mobile. Centered horizontally. */
.slist-pdp-pills {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin: 0;
justify-content: flex-start;
}
/*
* Apple-borderless size pills.
*
* Default: transparent background, no border. Letter sits at 60% opacity so
* non-active sizes read as available-but-dim. Hover: opacity → 1. Active:
* filled white background + black text — the Apple pattern is a filled state,
* never a ring or border. Disabled (OOS) sizes dim further to 30% and strike
* through (handled by is-oos state, see below).
*/
.slist-pdp-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
padding: 0 2px;
font-family: var(--slist-font-body);
font-size: 12px;
font-weight: var(--slist-weight-medium);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--slist-text-primary);
background: transparent;
border: 0;
border-radius: 6px;
opacity: 0.6;
cursor: pointer;
transition:
opacity var(--slist-transition-fast),
background var(--slist-transition-fast),
color var(--slist-transition-fast);
-webkit-tap-highlight-color: transparent;
}
.slist-pdp-pill:focus-visible {
opacity: 1;
background: transparent;
outline: none;
}
@media (hover: hover) {
.slist-pdp-pill:hover {
opacity: 1;
background: transparent;
outline: none;
}
}
.slist-pdp-pill.is-active {
background: #ffffff;
color: #000;
opacity: 1;
}
.slist-pdp-pill:focus-visible {
outline: 2px solid var(--slist-primary);
outline-offset: 2px;
}
/* ---- Qty stepper — mirrors the ET+ ticket stepper on event pages ---- */
.slist-pdp-stepper {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
padding: 0;
}
.slist-pdp-stepper__btn {
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50%;
font-size: 1rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.12s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-webkit-tap-highlight-color: transparent;
}
.slist-pdp-stepper__btn--minus {
background: rgba(255, 220, 130, 0.08);
color: rgba(255, 230, 170, 0.9);
}
@media (hover: hover) {
.slist-pdp-stepper__btn--minus:hover:not(:disabled) {
background: rgba(255, 220, 130, 0.16);
border-color: rgba(255, 220, 130, 0.32);
}
}
.slist-pdp-stepper__btn--plus {
background: rgba(150, 230, 170, 0.08);
color: rgba(180, 240, 200, 0.92);
}
@media (hover: hover) {
.slist-pdp-stepper__btn--plus:hover:not(:disabled) {
background: rgba(150, 230, 170, 0.16);
border-color: rgba(150, 230, 170, 0.32);
}
}
.slist-pdp-stepper__btn:active:not(:disabled) {
transform: scale(0.94);
}
.slist-pdp-stepper__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.slist-pdp-stepper__btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}
/* The input between the buttons — no chrome, bold white number. */
.single-product .slist-main--shop .slist-pdp-stepper input.qty,
.single-product .slist-main--shop form.cart .slist-pdp-stepper input.qty {
width: 42px;
min-width: 0;
height: 32px;
padding: 0;
margin: 0;
background: transparent;
border: 0;
box-shadow: none;
color: var(--slist-text-primary);
font-family: var(--slist-font-body);
font-size: var(--slist-text-body);
font-weight: var(--slist-weight-semibold);
text-align: center;
-moz-appearance: textfield;
}
.slist-pdp-stepper input.qty::-webkit-outer-spin-button,
.slist-pdp-stepper input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/*
* Qty stepper + ATC on the SAME LINE.
*
* WC markup inside the form.cart for variable products:
* form.cart
* table.variations ← size pills (handled above)
* div.single_variation_wrap ← this wraps the qty + ATC
* div.slist-pdp-stepper ← qty stepper (− N +)
* div.woocommerce-variation (notices — empty by default)
* input.variation_id
* button.single_add_to_cart_button ← ADD TO CART
*
* Make single_variation_wrap a flex row: stepper on the left at its
* natural width, ATC takes the remaining space. Both 32px tall so the
* stepper's circular buttons line up with ATC's cap height exactly.
*/
.single-product .slist-main--shop form.cart .single_variation_wrap,
.single-product .slist-main--shop form.cart:not(.variations_form) {
display: flex;
align-items: center;
gap: var(--slist-space-2);
width: 100%;
flex-direction: row;
}
.single-product .slist-main--shop form.cart .single_variation_wrap .slist-pdp-stepper,
.single-product .slist-main--shop form.cart:not(.variations_form) .slist-pdp-stepper {
flex: 0 0 auto;
}
.single-product .slist-main--shop form.cart .single_variation_wrap .woocommerce-variation,
.single-product .slist-main--shop form.cart:not(.variations_form) .woocommerce-variation {
display: none;
}
.single-product .slist-main--shop form.cart .single_variation_wrap input.variation_id,
.single-product .slist-main--shop form.cart:not(.variations_form) input.variation_id {
display: none;
}
/* ---- Add-to-cart button ----
Height matches qty stepper button height (32px). Flex: 1 so it fills
the remaining space on the row. No margin — parent flex gap handles it.
Color: outlined TRUE BLACK bg + red text + 1.5px red border, matching
site-wide ATC pattern (sticky CTA + .button.alt). Hover fills solid red
with white text. */
.single-product .slist-main--shop form.cart .button,
.single-product .slist-main--shop form.cart button.single_add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
height: 32px;
padding: 0 20px;
margin: 0;
background: var(--slist-bg, #000000);
color: var(--slist-primary);
border: 1.5px solid var(--slist-primary);
border-radius: var(--slist-radius-pill);
font-family: var(--slist-font-body);
font-size: 12px;
font-weight: var(--slist-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition:
background var(--slist-transition-fast),
color var(--slist-transition-fast),
transform var(--slist-transition-fast);
}
@media (hover: hover) {
.single-product .slist-main--shop form.cart .button:hover,
.single-product .slist-main--shop form.cart button.single_add_to_cart_button:hover {
background: var(--slist-primary);
color: #ffffff;
border-color: var(--slist-primary);
}
}
.single-product .slist-main--shop form.cart .button:active,
.single-product .slist-main--shop form.cart button.single_add_to_cart_button:active {
transform: scale(0.985);
}
/* Layout the form as a tight vertical stack with a row for qty + add. */
.single-product .slist-main--shop form.cart {
display: flex;
flex-direction: column;
gap: var(--slist-space-3);
}
/*
* Qty stepper — left-aligned, above the full-width ATC.
* Every control in the summary is left-aligned per user direction.
*/
.single-product .slist-main--shop form.cart .slist-pdp-stepper {
margin: 0;
}
/* ---- Description BELOW everything ---- */
.single-product .slist-main--shop .woocommerce-product-details__short-description {
order: 99; /* ensures it lands after everything else if summary becomes a flex container */
margin: var(--slist-space-5) 0 0;
padding-top: var(--slist-space-4);
border-top: 1px solid var(--slist-separator);
color: var(--slist-text-secondary);
font-size: var(--slist-text-callout);
line-height: var(--slist-lh-loose);
}
/* ---- Filed under ---- */
.single-product .slist-main--shop .product_meta {
margin-top: var(--slist-space-4);
padding-top: var(--slist-space-3);
border-top: 1px solid var(--slist-separator);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
}
.single-product .slist-main--shop .product_meta a {
color: var(--slist-text-secondary);
text-decoration: none;
border-bottom: 1px dotted var(--slist-separator-medium);
padding-bottom: 1px;
}
@media (hover: hover) {
.single-product .slist-main--shop .product_meta a:hover {
color: var(--slist-text-primary);
border-bottom-color: var(--slist-primary);
}
}
/* =============================================================================
* PDP v3 — express-checkout sizing, description bullets, info tab visible.
* =============================================================================
*/
/*
* Apple Pay / Google Pay buttons — match ATC height + width so the three
* buttons stack as a cohesive module. Previously the Stripe PRB widget
* rendered at variable height/width + huge white pill which overwhelmed
* everything else in the summary.
*/
.single-product .slist-main--shop .slist-express-wrap {
width: 100% !important;
margin: var(--slist-space-2) 0 !important;
}
.single-product .slist-main--shop .slist-express-wrap .slist-express-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--slist-space-2) !important;
}
.single-product .slist-main--shop .slist-express-wrap .slist-express-row > * {
height: 48px !important;
border-radius: var(--slist-radius-pill) !important;
overflow: hidden !important;
}
/* Stripe Payment Request Button (Apple Pay / Google Pay) sizing */
.single-product .slist-main--shop .slist-express-wrap .StripeElement {
height: 48px !important;
padding: 0 !important;
}
/*
* Description — renders as a bulleted list below the pay buttons.
* The user authors the short description in wp-admin; if they use
* paragraphs we convert to bullets by treating each
as a list item
* via CSS counter + border-bottom. Real HTML
from the editor
* also gets styled for consistency.
*/
.single-product .slist-main--shop .woocommerce-product-details__short-description {
order: 99;
margin: var(--slist-space-5) 0 0;
padding-top: var(--slist-space-4);
border-top: 1px solid var(--slist-separator);
color: var(--slist-text-secondary);
font-size: var(--slist-text-callout);
line-height: 1.55;
}
.single-product .slist-main--shop .woocommerce-product-details__short-description ul {
list-style: none;
padding: 0;
margin: 0;
}
.single-product .slist-main--shop .woocommerce-product-details__short-description ul li,
.single-product .slist-main--shop .woocommerce-product-details__short-description p {
position: relative;
padding-left: 18px;
margin: 0 0 var(--slist-space-2);
}
.single-product .slist-main--shop .woocommerce-product-details__short-description ul li::before,
.single-product .slist-main--shop .woocommerce-product-details__short-description p::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--slist-primary);
}
.single-product .slist-main--shop .woocommerce-product-details__short-description p:last-child,
.single-product .slist-main--shop .woocommerce-product-details__short-description ul li:last-child {
margin-bottom: 0;
}
/*
* Long description — rendered inline at priority 35 (post 2026-04-25
* description-tab removal). Sits below meta, above sharing. Top border
* separates it from the buying area; otherwise it's plain prose styled
* by base.css typography.
*/
.single-product .slist-main--shop .slist-pdp-description {
order: 110;
margin: var(--slist-space-5) 0 0;
padding-top: var(--slist-space-4);
border-top: 1px solid var(--slist-separator);
color: var(--slist-text-secondary);
font-size: var(--slist-text-callout);
line-height: 1.6;
}
.single-product .slist-main--shop .slist-pdp-description p {
margin: 0 0 var(--slist-space-2);
}
.single-product .slist-main--shop .slist-pdp-description p:last-child {
margin-bottom: 0;
}
.single-product .slist-main--shop .slist-pdp-description h2,
.single-product .slist-main--shop .slist-pdp-description h3,
.single-product .slist-main--shop .slist-pdp-description h4 {
font-family: var(--slist-font-body);
font-size: var(--slist-text-callout);
font-weight: var(--slist-weight-semibold);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
margin: var(--slist-space-3) 0 var(--slist-space-2);
}
.single-product .slist-main--shop .slist-pdp-description ul,
.single-product .slist-main--shop .slist-pdp-description ol {
margin: 0 0 var(--slist-space-3);
padding-left: var(--slist-space-3);
}
/*
* Additional Information / Attributes — WC renders these in the Tabs
* system by default. We show them inline inside the summary below the
* description, as a simple definition list. Makes product specs
* discoverable without a tab-click interaction.
*
* Layout: native table (no display:grid). The `width: 1%; white-space:
* nowrap` pattern on
shrinks the label column to max-content while
* letting the value column eat the rest of the row width. Native table
* algorithm aligns columns across rows for free — what grid couldn't
* do without lifting display:grid up to the tbody (and breaking the
* table-row grouping).
*
* History: previously used `display: grid; grid-template-columns: auto 1fr`
* on each
. The `auto` track collapses to min-content under WC's
* narrow summary column, which for an uppercase token like "WEIGHT" is
* exactly one character — so each letter wrapped to its own line. Native
* table side-steps that entirely (2026-04-25).
*/
.single-product .slist-main--shop .woocommerce-product-attributes,
.single-product .slist-main--shop table.shop_attributes {
order: 100;
width: 100%;
margin: var(--slist-space-4) 0 0;
padding: 0;
background: transparent;
border: 0;
border-collapse: collapse;
}
.single-product .slist-main--shop .woocommerce-product-attributes tr,
.single-product .slist-main--shop table.shop_attributes tr {
border-bottom: 1px solid var(--slist-separator);
background: transparent;
}
.single-product .slist-main--shop .woocommerce-product-attributes tr:last-child,
.single-product .slist-main--shop table.shop_attributes tr:last-child {
border-bottom: 0;
}
.single-product .slist-main--shop .woocommerce-product-attributes th,
.single-product .slist-main--shop table.shop_attributes th {
font-family: var(--slist-font-body);
font-size: var(--slist-text-eyebrow);
letter-spacing: var(--slist-ls-wider);
text-transform: uppercase;
color: var(--slist-text-tertiary);
text-align: left;
vertical-align: top;
padding: var(--slist-space-2) var(--slist-space-3) var(--slist-space-2) 0;
font-weight: var(--slist-weight-regular);
background: transparent;
/* Shrink-to-content + nowrap keeps "WEIGHT" / "DIMENSIONS" / etc. on
one line and uses the natural max-content width for the column. */
width: 1%;
white-space: nowrap;
}
.single-product .slist-main--shop .woocommerce-product-attributes td,
.single-product .slist-main--shop table.shop_attributes td {
font-family: var(--slist-font-body);
font-size: var(--slist-text-callout);
color: var(--slist-text-primary);
text-align: left;
vertical-align: top;
padding: var(--slist-space-2) 0;
background: transparent;
}
.single-product .slist-main--shop .woocommerce-product-attributes td p,
.single-product .slist-main--shop table.shop_attributes td p {
margin: 0;
padding: 0;
}
/*
* =============================================================================
* PDP gallery — custom Shopify-style carousel (pdp.js does the JS wiring).
* =============================================================================
*
* When JS hydrates the gallery, the container gets `.slist-pdp-gallery--js`.
* Before JS runs, all slides show stacked (progressive enhancement — still
* usable without JS, just not as a gallery). With JS:
* - all slides absolute-positioned in the same spot, only `.is-active` visible
* - thumbnail strip rendered below the main
* - ‹ › arrows overlaid on the main image
* - counter "3 / 9" bottom-right
*/
.single-product .slist-main--shop .woocommerce-product-gallery {
position: relative;
}
/* ---- Main image area (when JS is active) ---- */
.single-product .slist-main--shop .woocommerce-product-gallery.slist-pdp-gallery--js .woocommerce-product-gallery__wrapper {
position: relative;
aspect-ratio: 1 / 1; /* square frame; product fits via object-fit: contain inside */
overflow: hidden;
}
.single-product .slist-main--shop .woocommerce-product-gallery.slist-pdp-gallery--js .woocommerce-product-gallery__image {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms var(--slist-ease-out, ease-out);
}
.single-product .slist-main--shop .woocommerce-product-gallery.slist-pdp-gallery--js .woocommerce-product-gallery__image.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.single-product .slist-main--shop .woocommerce-product-gallery.slist-pdp-gallery--js .woocommerce-product-gallery__image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
/* ---- Arrow buttons (overlay on main image) ---- */
.slist-pdp-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--slist-text-primary);
font-family: var(--slist-font-body);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background var(--slist-transition-fast), transform var(--slist-transition-fast);
-webkit-tap-highlight-color: transparent;
padding: 0;
}
.slist-pdp-gallery-arrow > span {
line-height: 1;
position: relative;
top: -1px; /* optical centering for ‹ / › glyphs */
}
.slist-pdp-gallery-arrow--prev { left: 12px; }
.slist-pdp-gallery-arrow--next { right: 12px; }
@media (hover: hover) {
.slist-pdp-gallery-arrow:hover {
background: rgba(0, 0, 0, 0.85);
transform: translateY(-50%) scale(1.05);
}
}
.slist-pdp-gallery-arrow:active {
transform: translateY(-50%) scale(0.94);
}
.slist-pdp-gallery-arrow:focus-visible {
outline: 2px solid var(--slist-primary);
outline-offset: 2px;
}
@media (max-width: 640px) {
.slist-pdp-gallery-arrow { width: 34px; height: 34px; font-size: 18px; }
}
/* ---- Counter (bottom-right overlay) ---- */
.slist-pdp-gallery-counter {
position: absolute;
bottom: 12px;
right: 12px;
z-index: 10;
padding: 4px 10px;
font-family: var(--slist-font-body);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--slist-text-primary);
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--slist-radius-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
}
/* ---- Thumbnail strip ---- */
.slist-pdp-gallery-thumbs {
display: flex;
gap: 8px;
margin-top: var(--slist-space-3);
padding: 2px;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
}
.slist-pdp-gallery-thumbs::-webkit-scrollbar { display: none; }
/*
* Apple-borderless gallery thumbnails.
*
* No outlines anywhere, no backgrounds on any state. Non-active thumbs sit
* at 0.5 opacity, hover ticks up to 0.8, active/focused goes full 1.0. The
* image IS the button; no ring, no border, no box, no fill.
*
* Background: transparent is repeated on every state because some browsers
* (Safari, older Firefox) apply a faint user-agent button-bg-color on
* :hover / :focus / :active that bleeds through if not explicitly killed.
*
* Accessibility note: keyboard focus indicator is the opacity change
* (0.5 → 1.0 = 100% relative contrast). If WCAG audit later requires a
* stronger indicator, prefer a subtle bottom underline (matching the
* .flex-control-thumbs pattern in the WC fallback) over an outline ring
* — the ring reads as a "bg highlight" which violates ghost-mannequin.
*/
.slist-pdp-gallery-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
padding: 0;
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
transition: opacity var(--slist-transition-fast);
opacity: 0.5;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
outline: none;
}
@media (hover: hover) {
.slist-pdp-gallery-thumb:hover {
opacity: 0.8;
background: transparent;
}
}
.slist-pdp-gallery-thumb:focus,
.slist-pdp-gallery-thumb:focus-visible,
.slist-pdp-gallery-thumb:active {
opacity: 1;
background: transparent;
outline: none;
box-shadow: none;
}
.slist-pdp-gallery-thumb.is-active {
opacity: 1;
background: transparent;
}
.slist-pdp-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.slist-pdp-gallery-thumb { width: 52px; height: 52px; }
}
/* =============================================================================
* Audit pass — cart/checkout polish + misc.
* =============================================================================
*/
/* "Select a size to add to cart" hint removed 2026-04-25 — pills are
self-evidently the affordance, ATC's faded-red disabled state already
reads as "locked," third explicit message was over-explaining. */
/*
* Checkout country dropdown — WC's select was rendering as a pure-white
* native