/* =========================================================================
PRODUCT CARDS — WoodMart-inspired aesthetic
Variants: default | compact | minimal | badge | list | showcase
========================================================================= */
/* ── Shared design tokens & micro-elements ──────────────────────── */
.pc {
--pc-radius: 14px;
--pc-radius-sm: 10px;
--pc-border: 1px solid rgba(0,0,0,0.06);
--pc-shadow-rest: 0 1px 2px rgba(0,0,0,0.03);
--pc-shadow-hover: 0 12px 32px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);
--pc-surface: #ffffff;
--pc-soft: #f7f7f8;
--pc-text-1: #0e1015;
--pc-text-2: #5b6068;
--pc-text-3: #9ca3af;
--pc-divider: #f1f1f3;
--pc-accent: var(--primary-color, #111315);
/* Sale prices follow the merchant's brand colour — it's the
'this is the highlight' tint they picked, and showing
discounts in a hardcoded red would clash with brands that
chose a non-red palette. Hardcoded red kept only as the
fallback if --primary-color isn't injected yet. */
--pc-sale: var(--primary-color, #e74c3c);
--pc-new: #6fd943;
}
/* Dark scheme: re-bind every token so the surfaces, image fallback,
borders, dividers and text contrast cleanly against the dark page.
--pc-soft was the missing piece — it's the image-placeholder bg used
by all 6 card variants (default/compact/minimal/badge/list/showcase),
so leaving it light meant every product with no image still showed
a white block on a dark page. */
html[data-scheme="dark"] .pc {
--pc-border: 1px solid rgba(255,255,255,0.06);
--pc-shadow-rest: 0 1px 2px rgba(0,0,0,0.40);
--pc-shadow-hover: 0 14px 36px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
--pc-surface: rgba(255,255,255,0.05);
--pc-soft: rgba(255,255,255,0.06);
--pc-text-1: #e8ecf4;
--pc-text-2: #a0a6b3;
--pc-text-3: #6b7280;
--pc-divider: rgba(255,255,255,0.06);
}
/* "NEW" pill — green disc in the top-leading corner of the image */
.pc-new-badge {
position: absolute;
top: 12px;
inset-inline-start: 12px;
z-index: 3;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--pc-new, #6fd943);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(111,217,67,0.35);
pointer-events: none;
}
/* Out-of-stock pill */
.pc-oos-badge {
position: absolute;
z-index: 3;
top: 12px;
inset-inline-end: 12px;
background: rgba(255,73,81,0.95);
color: #fff;
font-size: 10.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
/* Price chip overlaid on the product image — sits on the LEADING
edge (top-inline-start), the opposite corner from the quick-view
magnifier. Frosted glass surface so it floats above any
photograph. Compact horizontal layout: optional "From" eyebrow,
active price, optional strikethrough original — all on a single
baseline-aligned row. */
.pc-price-chip {
position: absolute !important;
top: 12px !important;
inset-inline-start: 12px !important;
inset-inline-end: auto !important;
z-index: 3;
width: auto !important;
max-width: calc(100% - 80px);
height: auto !important;
padding: 7px 12px !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(14px) saturate(1.5);
-webkit-backdrop-filter: blur(14px) saturate(1.5);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
display: inline-flex !important;
flex-direction: row;
align-items: baseline;
gap: 7px;
pointer-events: none;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
.pc-price-chip__lead {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.45);
line-height: 1;
flex-shrink: 0;
}
.pc-price-chip__price {
font-size: 15px;
font-weight: 800;
color: #0e1015;
line-height: 1;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* On-sale state — active price flips to the sale colour. */
.pc-price-chip.is-sale .pc-price-chip__price {
color: var(--pc-sale, #e74c3c);
}
.pc-price-chip__strike {
font-size: 11.5px;
font-weight: 500;
color: rgba(0, 0, 0, 0.38);
text-decoration: line-through;
text-decoration-thickness: 1.1px;
line-height: 1;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
html[data-scheme="dark"] .pc-price-chip {
background: rgba(20, 20, 26, 0.82);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
html[data-scheme="dark"] .pc-price-chip__lead { color: rgba(255, 255, 255, 0.55); }
html[data-scheme="dark"] .pc-price-chip__price { color: #ffffff; }
html[data-scheme="dark"] .pc-price-chip__strike { color: rgba(255, 255, 255, 0.40); }
/* Floating action icon stack — always visible on the trailing edge.
Used to be hover-only but that meant the actions were invisible
to anyone scanning the page without a mouse (or on touch). */
.pc-actions {
position: absolute;
top: 12px;
inset-inline-end: 12px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: auto;
}
.pc-actions__btn {
width: 36px; height: 36px;
border-radius: 50%;
background: #fff;
color: #1a1a1a;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
padding: 0;
text-decoration: none;
}
.pc-actions__btn:hover {
background: var(--pc-accent);
color: #fff;
transform: scale(1.06);
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
text-decoration: none;
}
.pc-actions__btn svg {
width: 16px; height: 16px;
display: block;
}
/* Price display — base + sale */
.pc-price {
font-size: 15px;
font-weight: 700;
color: var(--pc-text-1);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.pc-price.has-sale {
text-decoration: line-through;
color: var(--pc-text-3);
font-weight: 500;
}
.pc-price--sale {
color: var(--pc-sale);
font-weight: 800;
}
/* Color swatch row — small variant-color dots */
.pc-swatches {
display: inline-flex;
align-items: center;
gap: 5px;
}
.pc-swatches__dot {
width: 10px; height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.1);
background: var(--swatch, #111);
display: inline-block;
}
/* ─────────────────────────────────────────────────────────────────
1) DEFAULT — clean storefront card, hover-revealed actions + CTA
───────────────────────────────────────────────────────────────── */
.product-card {
position: relative;
background: var(--pc-surface, #fff);
/* sites.css ships a legacy '.product-card' rule with
'padding: 15px !important', 'border-radius: 0 !important',
'border-width: 1px !important', 'min-height: 312px', and
'display: grid' — all wrong for the modern card. Re-declare
every conflicting property with !important so this rule
actually applies. */
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-width: 0 !important;
border-radius: var(--pc-radius, 14px) !important;
min-height: 0 !important;
box-shadow: var(--pc-shadow-rest, 0 1px 2px rgba(0,0,0,0.03));
overflow: hidden;
transition: transform .25s cubic-bezier(0.4,0,0.2,1),
box-shadow .25s cubic-bezier(0.4,0,0.2,1);
display: flex !important;
flex-direction: column;
height: 100%;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: var(--pc-shadow-hover, 0 12px 32px rgba(0,0,0,0.10));
}
/* .pc-actions are now permanently visible; the legacy hover-reveal
rule was removed. Kept as a comment-anchor so the layered card
styles below still read in order. */
/* Image wrap — edge-to-edge product photography filling the top
of the card. No padding, no background — the image IS the
visual. Inspired by standard Shopify themes (Dawn, Sense,
Refresh). */
.product-card .product-image {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: transparent;
border-radius: var(--pc-radius) var(--pc-radius) 0 0;
}
/* The inner wrapper around ![]()
needs to fill the aspect-ratio
box. Scope to the wrapper (the only direct DIV child) so floats
like the price chip or hover badges aren't stretched too. */
.product-card .product-image > div {
width: 100%;
height: 100%;
display: block;
}
.product-card .product-image img {
/* Legacy custom.css ships .product-image img with !important
declarations that fix the height at 199px, cap max-height at
131px, force object-fit: contain, and pile on margins — every
one of those is the wrong call inside a modern aspect-ratio
card. Re-declare with !important + matching specificity so
this rule actually applies. */
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0;
margin: 0 !important;
padding: 0;
object-fit: cover !important;
object-position: center center;
border-radius: 0;
display: block;
transition: transform .55s cubic-bezier(0.22,0.61,0.36,1);
}
.product-card:hover .product-image img {
transform: scale(1.04);
}
/* (Dark-scheme image background removed — wrapper stays transparent
so cards on dark surfaces don't sit on a different tone than
the surrounding card body.) */
/* Old in-image search-glass anchor (left over from legacy markup) —
hidden because we have a proper .pc-actions stack now. */
.product-card > .product_details_icon { display: none !important; }
/* Body / text area — clean editorial hierarchy:
1. CATEGORY (tiny uppercase eyebrow, muted, tracked)
2. Product name (main heading, slightly larger, calm weight)
3. Price row (active price prominent + sale strike-through
on the trailing edge when a sale is active)
4. CTA (full-width pill, anchored at the bottom)
*/
.product-card .product-detail {
padding: 16px 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.product-card .product-detail .one {
display: flex;
flex-direction: column;
gap: 6px;
/* Category appears ABOVE the title (visual order). HTML order
in the Blade is title-then-category so screen-reader / SEO
see the product name first; we flip it visually via order. */
}
.product-card .product-detail .qty-item {
order: 0;
font-size: 10px;
color: var(--pc-text-3);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 700;
line-height: 1;
}
.product-card .product-detail .title,
.product-card .product-detail h4.title {
order: 1;
/* Product name typography — bigger + roomier than before so it
doesn't read as a footnote. 16px / weight 600 with a relaxed
line-height; allow up to 3 lines before ellipsing so longer
names (common in Hebrew product catalogs) don't get clipped
at the awkward middle of a word. */
font-size: 16px !important;
font-weight: 600 !important;
color: var(--pc-text-1) !important;
letter-spacing: -0.012em;
line-height: 1.4 !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
transition: color .18s ease;
}
.product-card:hover .product-detail .title,
.product-card:hover .product-detail h4.title { color: var(--pc-accent) !important; }
/* Price row — when there's a sale, the active sale price sits
first and the original is shown line-through after it in muted
text. When there's no sale, the single price reads as the
active price (no strikethrough). */
.product-card .product-detail .two {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0;
margin: 0;
}
.product-card .product-detail .item-spin {
display: inline-flex !important;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
row-gap: 4px;
}
/* Base price (no sale) — the single visible price. */
.product-card .product-detail .price-spin {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--pc-text-1) !important;
margin: 0 !important;
font-variant-numeric: tabular-nums;
letter-spacing: -0.012em;
line-height: 1;
}
/* Original price when a sale is active — strikethrough, muted,
smaller. The .sale-price element (rendered next to it) is the
real active price. */
.product-card .product-detail .price-spin.has-sale {
order: 2;
text-decoration: line-through;
text-decoration-thickness: 1.2px;
color: var(--pc-text-3) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
letter-spacing: 0;
}
/* Active sale price — promoted in the sale colour, slightly
larger than the regular base price so it draws the eye. */
.product-card .product-detail .sale-price {
order: 1;
color: var(--pc-sale) !important;
font-weight: 800 !important;
font-size: 18px !important;
letter-spacing: -0.015em;
}
/* Dark scheme — keep the sale colour vibrant but soften the
strike-through so it doesn't fight the surrounding card text. */
html[data-scheme="dark"] .product-card .product-detail .price-spin {
color: var(--pc-text-1, #e8ecf4) !important;
}
html[data-scheme="dark"] .product-card .product-detail .price-spin.has-sale {
color: rgba(255, 255, 255, 0.40) !important;
}
/* "Add to Cart" CTA — full-width pill below the product details.
Standard storefront pattern: icon + text label inside a solid
primary-colour pill. Always visible (not hover-only). */
.product-card .product-detail .btn-addcart,
.product-card .product-detail a.btn-addcart {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
transform: none !important;
opacity: 1 !important;
margin: 6px 0 0 !important;
padding: 11px 16px !important;
background: var(--pc-text-1, #0e1015) !important;
color: #ffffff !important;
border: none !important;
border-radius: 10px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
text-decoration: none;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
line-height: 1;
box-shadow: none;
overflow: visible !important;
transition: background .18s ease,
transform .15s ease;
}
/* The label sibling next to the SVG gets a leading divider + a bit
of padding so the icon sits in its own pocket on the start side
of the button, separated from the text by a hairline rule. */
.product-card .product-detail .btn-addcart svg ~ * {
padding-inline-start: 12px;
margin-inline-start: 12px;
border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}
.product-card .product-detail .btn-addcart:hover {
background: var(--pc-accent, #111315) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.product-card .product-detail .btn-addcart:active {
transform: translateY(0);
}
.product-card .product-detail .btn-addcart svg {
width: 16px;
height: 16px;
flex-shrink: 0;
display: block;
stroke: currentColor;
}
/* Dark scheme — the pill stays solid primary-colour on dark
backgrounds; only the hover hue shifts. The icon divider flips
to a darker tint so it stays visible on the now-white button. */
html[data-scheme="dark"] .product-card .product-detail .btn-addcart {
background: #ffffff !important;
color: #0e1015 !important;
}
html[data-scheme="dark"] .product-card .product-detail .btn-addcart:hover {
background: var(--pc-accent, #ffffff) !important;
color: #ffffff !important;
}
html[data-scheme="dark"] .product-card .product-detail .btn-addcart svg ~ * {
border-inline-start-color: rgba(0, 0, 0, 0.18);
}
html[data-scheme="dark"] .product-card .product-detail .btn-addcart:hover svg ~ * {
border-inline-start-color: rgba(255, 255, 255, 0.28);
}
/* ─────────────────────────────────────────────────────────────────
2) COMPACT — efficient catalog row (image left, info right).
Inspired by Amazon / Sephora category rows: dense, scannable, no
chrome lift (lift behaviour distracts in a long list).
───────────────────────────────────────────────────────────────── */
.product-card--compact {
display: grid;
grid-template-columns: 108px 1fr auto;
gap: 14px;
border-radius: var(--pc-radius);
background: var(--pc-surface);
overflow: hidden;
border: 0;
transition: background .18s;
position: relative;
padding: 10px;
align-items: center;
}
.product-card--compact:hover {
background: rgba(0, 0, 0, 0.02);
}
.pc-compact__img {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--pc-soft);
position: relative;
border-radius: 10px;
display: block;
}
.pc-compact__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s cubic-bezier(0.22,0.61,0.36,1);
}
.product-card--compact:hover .pc-compact__img img { transform: scale(1.05); }
.pc-compact__body {
padding: 2px 4px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
.pc-compact__cat {
font-size: 10px;
color: var(--pc-text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
line-height: 1;
}
.pc-compact__name {
font-size: 14px;
font-weight: 600;
color: var(--pc-text-1);
line-height: 1.32;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
transition: color .18s ease;
}
.product-card--compact:hover .pc-compact__name { color: var(--pc-accent); }
.pc-compact__price {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 14.5px;
font-weight: 700;
color: var(--pc-text-1);
margin-top: 2px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* The compact CTA sits in the third grid column — a small chip
pinned to the end side, always visible (not a hover reveal),
so the row reads as a scannable list item with a clear action. */
.pc-compact__btn {
margin: 0 !important;
padding: 8px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
border-radius: 999px !important;
background: transparent !important;
color: var(--pc-text-1) !important;
border: 1.5px solid var(--pc-text-1) !important;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
align-self: center;
line-height: 1;
}
.pc-compact__btn:hover {
background: var(--pc-text-1) !important;
color: #fff !important;
}
@media (max-width: 560px) {
.product-card--compact {
grid-template-columns: 92px 1fr;
grid-template-rows: auto auto;
}
.pc-compact__btn { grid-column: 2; justify-self: start; }
}
/* ─────────────────────────────────────────────────────────────────
3) MINIMAL — editorial gallery card. No chrome, no border, no
shadow. The image is the hero; type beneath it is calm and
left-aligned (Acne Studios / COS / & Other Stories). Hover
reveals a hairline text-link CTA, not a button.
───────────────────────────────────────────────────────────────── */
.product-card--minimal {
position: relative;
background: transparent;
border: none;
box-shadow: none;
transition: none;
}
.pc-minimal__img {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 8px;
background: var(--pc-soft);
position: relative;
display: block;
}
.pc-minimal__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .65s cubic-bezier(0.22,0.61,0.36,1),
filter .35s ease;
}
.product-card--minimal:hover .pc-minimal__img img {
transform: scale(1.045);
filter: saturate(1.06) contrast(1.02);
}
.pc-minimal__body {
padding: 12px 2px 0;
text-align: start;
display: flex;
flex-direction: column;
gap: 4px;
}
.pc-minimal__cat {
font-size: 10px;
color: var(--pc-text-3);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
margin: 0;
}
.pc-minimal__name {
font-size: 14px;
font-weight: 500;
color: var(--pc-text-1);
letter-spacing: -0.005em;
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .18s ease;
}
.product-card--minimal:hover .pc-minimal__name { color: var(--pc-accent); }
.pc-minimal__price {
font-size: 13.5px;
font-weight: 600;
color: var(--pc-text-2);
margin: 2px 0 0;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* Text-link style CTA — never a chunky button. Just a hairline
underline that grows in from below. Sits on its own line under
the price so the eye scans price → action. */
.pc-minimal__btn {
margin: 8px 0 0 !important;
padding: 0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
background: transparent !important;
color: var(--pc-text-1) !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--pc-text-1) !important;
align-self: flex-start;
opacity: 0;
transform: translateY(4px);
transition: opacity .22s ease, transform .22s ease, color .15s;
text-decoration: none;
display: inline-block;
text-align: start;
line-height: 1.6;
padding-bottom: 1px !important;
width: auto;
}
.product-card--minimal:hover .pc-minimal__btn {
opacity: 1;
transform: translateY(0);
}
.pc-minimal__btn:hover {
color: var(--pc-accent) !important;
border-bottom-color: var(--pc-accent) !important;
background: transparent !important;
}
/* ─────────────────────────────────────────────────────────────────
4) BADGE — lookbook / lifestyle card with glassy info pill on the
image. Inspired by Nike + Glossier campaign tiles. Always-visible
product name overlaid in a frosted chip, hover reveals price +
CTA from a gradient veil at the bottom.
───────────────────────────────────────────────────────────────── */
.product-card--badge {
position: relative;
border-radius: var(--pc-radius);
overflow: hidden;
background: var(--pc-surface);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
transition: transform .25s cubic-bezier(0.22,0.61,0.36,1),
box-shadow .25s ease;
}
.product-card--badge:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}
.pc-badge__img {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
display: block;
background: var(--pc-soft);
position: relative;
}
.pc-badge__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .65s cubic-bezier(0.22,0.61,0.36,1),
filter .35s ease;
}
.product-card--badge:hover .pc-badge__img img {
transform: scale(1.07);
filter: saturate(1.08);
}
/* Floating frosted info pill — anchored to bottom-start so it
doesn't compete with the NEW / OOS pills in the top corners. */
.pc-badge__info {
position: absolute;
bottom: 14px;
inset-inline-start: 14px;
inset-inline-end: 14px;
z-index: 3;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px) saturate(1.5);
-webkit-backdrop-filter: blur(14px) saturate(1.5);
padding: 10px 14px;
border-radius: 12px;
text-align: start;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
transition: transform .35s cubic-bezier(0.22,0.61,0.36,1),
opacity .25s ease;
}
.product-card--badge:hover .pc-badge__info {
transform: translateY(-2px);
}
.pc-badge__info-name {
font-size: 14.5px;
font-weight: 700;
color: var(--pc-text-1);
line-height: 1.3;
letter-spacing: -0.008em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.pc-badge__info-cat {
font-size: 10px;
color: var(--pc-text-3);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
/* Hover overlay — slides up from below with price + CTA. Sits
above the info pill (which fades out so the two don't fight). */
.pc-badge__overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.55) 45%,
rgba(0, 0, 0, 0.92) 100%
);
padding: 80px 16px 16px;
transform: translateY(100%);
opacity: 0;
transition: transform .4s cubic-bezier(0.22,0.61,0.36,1),
opacity .25s ease;
color: #fff;
z-index: 4;
}
.product-card--badge:hover .pc-badge__overlay {
transform: translateY(0);
opacity: 1;
}
.product-card--badge:hover .pc-badge__info {
opacity: 0;
transform: translateY(8px);
}
.pc-badge__price {
font-size: 17px;
font-weight: 800;
color: #fff;
margin-bottom: 12px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.pc-badge__btn {
width: 100%;
padding: 12px 14px !important;
background: #fff !important;
/* Hardcoded dark fill so the button stays legible in both light
AND dark schemes. var(--pc-text-1) flipped to a near-white in
dark mode — white text on the white pill → invisible label. */
color: #0e1015 !important;
border: none !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
transition: background .15s, color .15s, transform .15s;
}
.pc-badge__btn:hover {
background: var(--pc-accent) !important;
color: #fff !important;
transform: translateY(-1px);
}
/* ─────────────────────────────────────────────────────────────────
5) LIST — editorial wide row with description. Inspired by
Net-a-Porter quick-shop rows + Apple feature lists. Generous
image + breathable typography so the row reads like a product
article preview, not a catalog line item.
───────────────────────────────────────────────────────────────── */
.product-card--list {
display: grid;
grid-template-columns: 200px 1fr auto;
gap: 0;
border-radius: var(--pc-radius);
border: 0;
background: var(--pc-surface);
overflow: hidden;
box-shadow: var(--pc-shadow-rest);
transition: box-shadow .25s, transform .25s;
align-items: stretch;
}
.product-card--list:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
.pc-list__img {
overflow: hidden;
background: var(--pc-soft);
position: relative;
}
.pc-list__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .55s cubic-bezier(0.22,0.61,0.36,1),
filter .35s ease;
}
.product-card--list:hover .pc-list__img img {
transform: scale(1.05);
filter: saturate(1.05);
}
.pc-list__body {
padding: 22px 26px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-width: 0;
}
.pc-list__cat {
font-size: 10.5px;
color: var(--pc-text-3);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
margin-bottom: 2px;
}
.pc-list__name {
font-size: 18px;
font-weight: 700;
color: var(--pc-text-1);
line-height: 1.28;
letter-spacing: -0.015em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .18s ease;
}
.product-card--list:hover .pc-list__name { color: var(--pc-accent); }
.pc-list__desc {
font-size: 13px;
color: var(--pc-text-2);
margin-top: 6px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pc-list__price {
font-size: 17px;
font-weight: 700;
color: var(--pc-text-1);
margin-top: 10px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.pc-list__action {
padding: 22px 22px;
display: flex;
align-items: center;
}
.pc-list__btn {
padding: 13px 26px !important;
background: var(--pc-text-1) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .15s ease, transform .15s ease;
}
.pc-list__btn:hover {
background: var(--pc-accent) !important;
transform: translateY(-1px);
}
@media (max-width: 640px) {
.product-card--list {
grid-template-columns: 120px 1fr;
grid-template-rows: auto auto;
}
.pc-list__body { padding: 16px 18px; }
.pc-list__name { font-size: 16px; }
.pc-list__action {
grid-column: 1 / -1;
padding: 0 18px 16px;
}
.pc-list__btn { width: 100%; justify-content: center; }
}
/* ─────────────────────────────────────────────────────────────────
6) SHOWCASE — luxury premium card. Dark surface, image fills,
gradient veil rises from the bottom, type sits anchored at the
foot of the card. Inspired by Bottega Veneta / Hermès editorial
tiles — restrained, generous letter-spacing, all-caps category
eyebrow, refined hover.
───────────────────────────────────────────────────────────────── */
.product-card--showcase {
position: relative;
border-radius: var(--pc-radius);
overflow: hidden;
background: #0a0a0c;
color: #fff;
aspect-ratio: 3 / 4;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
transition: transform .35s cubic-bezier(0.22,0.61,0.36,1),
box-shadow .35s ease;
}
.product-card--showcase:hover {
transform: translateY(-5px);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}
.pc-showcase__img {
position: absolute;
inset: 0;
display: block;
text-decoration: none;
}
.pc-showcase__img img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.95;
transition: transform .7s cubic-bezier(0.22,0.61,0.36,1),
opacity .35s ease,
filter .35s ease;
}
.product-card--showcase:hover .pc-showcase__img img {
transform: scale(1.08);
opacity: 0.82;
filter: contrast(1.03) saturate(1.04);
}
/* Two-stop veil: subtle wash across the full image so the type
stays readable even in the upper crops, then a deep anchor at
the bottom. */
.pc-showcase__veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0.50) 70%,
rgba(0, 0, 0, 0.92) 100%);
pointer-events: none;
}
.pc-showcase__body {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 24px 24px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Editorial eyebrow with a leading rule — evokes magazine
chapter heads. */
.pc-showcase__cat {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.pc-showcase__cat::before {
content: '';
width: 22px;
height: 1px;
background: rgba(255, 255, 255, 0.6);
}
.pc-showcase__name {
font-size: 19px;
font-weight: 700;
color: #fff;
line-height: 1.28;
letter-spacing: -0.018em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.pc-showcase__price {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-top: 6px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* CTA pinned at the TOP of the body (above the category eyebrow).
Compact pill with the merchant-picked cart icon on the start
side and the label ("הוסף לסל" / "בחר אפשרויות") on the other,
separated by a hairline rule so it reads as "[icon] | label" —
matches the divider pattern on the default card's full-width
pill. White pill on the dark showcase surface; hover fills with
the merchant's brand colour. */
.pc-showcase__btn {
margin: 0 0 12px !important;
padding: 9px 16px 9px 12px !important;
height: auto !important;
width: auto !important;
background: #ffffff !important;
color: #0a0a0c !important;
border: none !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
align-self: flex-start;
opacity: 1;
transform: none;
text-decoration: none;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
line-height: 1;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
overflow: visible !important;
transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pc-showcase__btn:hover {
background: var(--pc-accent) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}
.pc-showcase__btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
display: block;
stroke: currentColor;
}
.pc-showcase__btn svg ~ * {
padding-inline-start: 10px;
margin-inline-start: 10px;
border-inline-start: 1px solid rgba(0, 0, 0, 0.18);
}
.pc-showcase__btn:hover svg ~ * {
border-inline-start-color: rgba(255, 255, 255, 0.28);
}
/* Showcase 'NEW' badge — adapt to a refined cream chip on the dark
surface so it doesn't read as a sticker. */
.product-card--showcase .pc-new-badge {
background: #fff;
color: #0a0a0c;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* ─────────────────────────────────────────────────────────────────
7) MINI — compact dense card. Used when the merchant wants
4-6 products per row on desktop. Image fills the top, body
is tight, the only CTA is a small icon-only cart chip pinned
to the trailing edge of the price row.
───────────────────────────────────────────────────────────────── */
.product-card--mini {
position: relative !important;
background: var(--pc-surface, #fff);
/* No border, no shadow at rest — the mini card reads as a
weightless tile (the merchant explicitly didn't want a
visible frame). A barely-there shadow only on hover gives a
tactile lift without re-introducing a border-like edge. */
border: 0 !important;
border-radius: var(--pc-radius);
overflow: hidden;
box-shadow: none;
outline: 0;
display: flex !important;
flex-direction: column;
height: 100%;
padding: 0 !important;
margin: 0 !important;
transition: transform .22s ease, box-shadow .22s ease;
}
.product-card--mini:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.pc-mini__img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: transparent;
text-decoration: none;
}
.pc-mini__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
max-height: none !important;
margin: 0 !important;
padding: 0;
border-radius: 0;
display: block;
transition: transform .45s cubic-bezier(0.22,0.61,0.36,1);
}
.product-card--mini:hover .pc-mini__img img {
transform: scale(1.04);
}
.pc-mini__body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;
}
.pc-mini__name-link { text-decoration: none; color: inherit; }
.pc-mini__name {
/* Centred to balance the dense compact layout — title sits
directly above the centred price block instead of hanging
off the start edge. */
font-size: 14px;
font-weight: 600;
color: var(--pc-text-1);
line-height: 1.38;
letter-spacing: -0.005em;
margin: 0;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
transition: color .15s;
}
.product-card--mini:hover .pc-mini__name { color: var(--pc-accent); }
/* Prices centred; no cart button lives in this row anymore (moved
down to .pc-mini__cta), so it's a pure price row. */
.pc-mini__price-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.pc-mini__price {
font-size: 14.5px;
font-weight: 800;
color: var(--pc-text-1);
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pc-mini__price--sale { color: var(--pc-sale); }
.pc-mini__price-strike {
font-size: 11px;
color: var(--pc-text-3);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Bottom CTA row — compact stepper on the start, wide Add-to-Cart
pill on the end. Same pattern as the buttons card, scaled down
for the mini card's dense column. */
.pc-mini__cta {
margin-top: 8px;
display: flex;
align-items: stretch;
gap: 6px;
}
/* Compact stepper variant — neutral white with outline border, same
visual language as the buttons stepper but shorter (32px high to
keep the dense card from feeling top-heavy). */
.pc-mini__stepper {
flex: 0 0 88px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
height: 32px;
background: #ffffff;
border: 1.5px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
overflow: hidden;
}
.pc-mini__stepper .pc-step { font-size: 15px; }
.pc-mini__stepper .pc-step__val {
font-size: 12px;
border-inline-start-color: rgba(0, 0, 0, 0.10);
border-inline-end-color: rgba(0, 0, 0, 0.10);
}
html[data-scheme="dark"] .pc-mini__stepper {
background: #1a1a22;
border-color: rgba(255, 255, 255, 0.14);
}
html[data-scheme="dark"] .pc-mini__stepper .pc-step__val {
border-inline-start-color: rgba(255, 255, 255, 0.14);
border-inline-end-color: rgba(255, 255, 255, 0.14);
}
/* Wide Add-to-Cart pill for the mini card — same shape as the
buttons-card pill but on a 32px height to match the stepper.
Uses --primary-color so the builder's brand colour drives it. */
.pc-mini__addtocart {
flex: 1 1 auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px !important;
background: var(--primary-color, #0e1015) !important;
color: #ffffff !important;
border: none !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
overflow: visible !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
transition: transform .15s, box-shadow .15s, filter .15s;
cursor: pointer;
white-space: nowrap;
min-width: 0;
}
.pc-mini__addtocart span {
color: inherit;
line-height: 1;
/* Truncate gracefully on the narrowest grid (5 per row) so the
label doesn't push the icon off the pill. */
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.pc-mini__addtocart svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: #ffffff;
stroke: currentColor;
}
.pc-mini__addtocart:hover {
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
filter: brightness(1.08);
text-decoration: none !important;
}
.pc-mini__addtocart:active { transform: translateY(0); }
/* Variant-products fallback — full-width pill (no stepper next to
it) carrying "Select Options". Same height + colour as the
stepper-paired version so swapping between simple / variant
products doesn't shift the card geometry. */
.pc-mini__addtocart--variant {
margin-top: 8px;
width: 100%;
display: flex !important;
}
.pc-mini__btn:hover {
/* Darken without changing the hue — keeps the cart chip on
the merchant's brand palette while signalling a press
state. */
filter: brightness(0.88);
transform: scale(1.06);
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.pc-mini__btn svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0;
display: block;
stroke: currentColor;
}
html[data-scheme="dark"] .product-card--mini {
background: #15151b;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
html[data-scheme="dark"] .product-card--mini:hover {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
/* ─────────────────────────────────────────────────────────────────
8) BUTTONS — like the regular card but the bottom CTA is a
−/+ quantity stepper instead of a single Add-to-Cart pill.
───────────────────────────────────────────────────────────────── */
.product-card--buttons {
position: relative !important;
background: var(--pc-surface, #fff);
border: 0 !important;
border-radius: var(--pc-radius);
overflow: hidden;
box-shadow: var(--pc-shadow-rest);
display: flex !important;
flex-direction: column;
height: 100%;
padding: 0 !important;
margin: 0 !important;
transition: transform .22s, box-shadow .22s;
}
.product-card--buttons:hover {
transform: translateY(-3px);
box-shadow: var(--pc-shadow-hover);
}
.pc-buttons__img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: transparent;
text-decoration: none;
}
.pc-buttons__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
max-height: none !important;
margin: 0 !important;
padding: 0;
border-radius: 0;
display: block;
transition: transform .55s cubic-bezier(0.22,0.61,0.36,1);
}
.product-card--buttons:hover .pc-buttons__img img {
transform: scale(1.045);
}
.pc-buttons__body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;
}
.pc-buttons__name-link { text-decoration: none; color: inherit; }
.pc-buttons__name {
font-size: 15.5px;
font-weight: 600;
color: var(--pc-text-1);
line-height: 1.38;
letter-spacing: -0.008em;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
transition: color .15s;
}
.product-card--buttons:hover .pc-buttons__name { color: var(--pc-accent); }
.pc-buttons__cat {
font-size: 10px;
color: var(--pc-text-3);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
margin: 0;
line-height: 1;
}
.pc-buttons__price {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin: 4px 0 0;
}
.pc-buttons__price-now {
font-size: 16px;
font-weight: 800;
color: var(--pc-text-1);
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pc-buttons__price-was {
font-size: 12px;
color: var(--pc-text-3);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Bottom CTA row — wide Add-to-Cart pill (primary brand colour, cart
icon + label) takes most of the width; a neutral white stepper
sits at the start as the secondary control. Mirrors the reference
the merchant supplied. */
.pc-buttons__cta {
margin-top: 10px;
display: flex;
align-items: stretch;
gap: 8px;
}
/* Neutral stepper — outline pill with two internal hairlines. White
surface so it contrasts against the accent-coloured cart pill
next to it. Three cells: −, value, +. The +/- are buttons; the
centre value is an input the cart-sidebar JS reads on pc-qty-add. */
.pc-buttons__stepper {
flex: 0 0 110px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
height: 40px;
background: #ffffff;
border: 1.5px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
overflow: hidden;
}
.pc-step {
appearance: none;
border: 0;
background: transparent;
color: var(--pc-text-1, #0e1015);
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background .15s, color .15s;
padding: 0;
}
.pc-step:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--primary-color, var(--pc-text-1, #0e1015));
text-decoration: none;
}
.pc-step:active { background: rgba(0, 0, 0, 0.10); }
.pc-step__val {
color: var(--pc-text-1, #0e1015);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
justify-content: center;
/* Internal hairlines between the three cells. */
border-inline-start: 1px solid rgba(0, 0, 0, 0.10);
border-inline-end: 1px solid rgba(0, 0, 0, 0.10);
/* .pc-step__val is on an element (the cart handler
reads its value) — strip the browser-native input chrome so
it visually matches a flat label cell. */
background: transparent !important;
border-top: 0;
border-bottom: 0;
width: 100%;
height: 100%;
text-align: center;
padding: 0 !important;
outline: none;
-moz-appearance: textfield;
}
.pc-step__val:focus { background: rgba(0, 0, 0, 0.03) !important; }
.pc-step__val::-webkit-outer-spin-button,
.pc-step__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Wide Add-to-Cart pill — uses --primary-color directly so the
builder's brand-colour picker drives this button (same way the
product page's .btn-addcart does). Icon + label sit side-by-side
with a small gap; in RTL the icon ends up on the visual end. */
.pc-buttons__addtocart {
flex: 1 1 auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 16px !important;
background: var(--primary-color, #0e1015) !important;
color: #ffffff !important;
border: none !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-decoration: none !important;
overflow: visible !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
transition: transform .15s, box-shadow .15s, filter .15s;
cursor: pointer;
white-space: nowrap;
}
.pc-buttons__addtocart span { color: inherit; line-height: 1; }
.pc-buttons__addtocart svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #ffffff;
stroke: currentColor;
}
.pc-buttons__addtocart:hover {
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
filter: brightness(1.08);
text-decoration: none !important;
}
.pc-buttons__addtocart:active { transform: translateY(0); }
html[data-scheme="dark"] .product-card--buttons {
background: #15151b;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
html[data-scheme="dark"] .product-card--buttons:hover {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
html[data-scheme="dark"] .pc-buttons__stepper {
background: #1a1a22;
border-color: rgba(255, 255, 255, 0.14);
}
html[data-scheme="dark"] .pc-step,
html[data-scheme="dark"] .pc-step__val { color: #e8ecf4; }
html[data-scheme="dark"] .pc-step:hover { background: rgba(255, 255, 255, 0.08); }
html[data-scheme="dark"] .pc-step__val {
border-inline-start-color: rgba(255, 255, 255, 0.14);
border-inline-end-color: rgba(255, 255, 255, 0.14);
}
html[data-scheme="dark"] .pc-step__val:focus { background: rgba(255, 255, 255, 0.06) !important; }
/* Variant-products fallback for the buttons card. A +/- stepper
makes no sense here (you can't increment a quantity for a SKU
you haven't picked yet), so we show a single full-width pill
that opens the variant popup. Same height/shape as the stepper
so the row geometry stays identical across product types. */
.pc-buttons__select {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
padding: 0 18px !important;
background: var(--pc-text-1, #0e1015) !important;
color: #ffffff !important;
border: none !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
overflow: visible !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background .15s, transform .15s, box-shadow .15s;
cursor: pointer;
}
.pc-buttons__select span { color: inherit; line-height: 1; }
.pc-buttons__select:hover {
background: var(--pc-accent, #0e1015) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
text-decoration: none !important;
}
.pc-buttons__select:active { transform: translateY(0); }
html[data-scheme="dark"] .pc-buttons__select {
background: #ffffff !important;
color: #0e1015 !important;
}
html[data-scheme="dark"] .pc-buttons__select:hover {
background: var(--pc-accent, #ffffff) !important;
color: #fff !important;
}
/* ─────────────────────────────────────────────────────────────────
Grid spacing (gap between cards is handled by Bootstrap col-* gutters)
───────────────────────────────────────────────────────────────── */
.product_item, .product_item_new { margin-bottom: 20px; }
/* Responsive — tighten paddings on small screens */
@media (max-width: 640px) {
.product-card .product-detail { padding: 12px 14px 14px; }
.product-card .product-detail .title { font-size: 13.5px !important; }
.pc-actions { top: 8px; inset-inline-end: 8px; }
.pc-actions__btn { width: 32px; height: 32px; }
.pc-actions__btn svg { width: 14px; height: 14px; }
.pc-new-badge { width: 32px; height: 32px; font-size: 9px; top: 8px; inset-inline-start: 8px; }
}
/* ═══════════════════════════════════════════════════════════════════
DARK SCHEME — comprehensive coverage for every product card variant
The token rebind at the top of this file already flips the shared
surfaces (--pc-surface, --pc-soft, --pc-text-*, --pc-border). This
block patches all the hardcoded #fff / #1a1a1a / rgba(255,255,255,
0.9X) the individual variants still ship with.
═══════════════════════════════════════════════════════════════════ */
/* Base card outer chrome — even with the token rebind, force the
product-card itself to be a clear dark surface so it can't fall
through to whatever the theme inherits via .card. Solid #15151b
(not rgba over the page) so the cards are unambiguously dark. */
html[data-scheme="dark"] .product-card {
background: #15151b;
border: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
html[data-scheme="dark"] .product-card:hover {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55),
0 2px 6px rgba(0, 0, 0, 0.30);
}
/* Floating action buttons (wishlist / quick-view) — base #fff flips
to a tinted dark pill so they read as deliberate against the
product image. */
html[data-scheme="dark"] .pc-actions__btn {
background: rgba(21, 21, 27, 0.85);
color: #e8ecf4;
border-color: rgba(255, 255, 255, 0.10);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}
html[data-scheme="dark"] .pc-actions__btn:hover {
background: var(--pc-accent);
color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
/* Color swatches — softer border so it doesn't disappear */
html[data-scheme="dark"] .pc-swatches__dot {
border-color: rgba(255, 255, 255, 0.18);
}
/* "NEW" badge on showcase — was forced white, swap to dark-on-light
so it stays readable but doesn't look like a floating white block. */
html[data-scheme="dark"] .product-card--showcase .pc-new-badge {
background: rgba(255, 255, 255, 0.92);
color: #0e1015;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* ─── Variant: COMPACT ─────────────────────────────────────────── */
html[data-scheme="dark"] .product-card--compact { background: var(--pc-surface); }
html[data-scheme="dark"] .pc-compact__cat { color: var(--pc-text-3); }
html[data-scheme="dark"] .pc-compact__name { color: var(--pc-text-1); }
html[data-scheme="dark"] .pc-compact__price { color: var(--pc-text-1); }
/* ─── Variant: MINIMAL ─────────────────────────────────────────── */
html[data-scheme="dark"] .product-card--minimal { background: var(--pc-surface); }
html[data-scheme="dark"] .pc-minimal__cat { color: var(--pc-text-3); }
html[data-scheme="dark"] .pc-minimal__name { color: var(--pc-text-1); }
html[data-scheme="dark"] .pc-minimal__price { color: var(--pc-text-1); }
/* The CTA pill on the minimal variant — keep the inverse contrast
(light pill on dark card) so the action stays prominent. */
html[data-scheme="dark"] .pc-minimal__btn {
background: rgba(255, 255, 255, 0.10) !important;
color: #e8ecf4 !important;
border-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-scheme="dark"] .pc-minimal__btn:hover {
background: #e8ecf4 !important;
color: #0e1015 !important;
border-color: #e8ecf4 !important;
}
/* ─── Variant: BADGE ───────────────────────────────────────────── */
/* The floating info tag in the top-end corner of the image — was a
light translucent pill. Flip to a dark translucent pill so it
stays legible against typical product images. */
html[data-scheme="dark"] .pc-badge__info {
background: rgba(21, 21, 27, 0.78);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);
}
html[data-scheme="dark"] .pc-badge__info-name { color: #e8ecf4; }
html[data-scheme="dark"] .pc-badge__info-cat { color: rgba(255, 255, 255, 0.65); }
/* The bottom CTA is rendered over a dark-to-transparent gradient
overlay already — keep the white pill (it pops against the
image) but soften the hover and ensure the disabled state has
a sensible dark fallback. */
/* ─── Variant: LIST ────────────────────────────────────────────── */
html[data-scheme="dark"] .product-card--list { background: var(--pc-surface); }
html[data-scheme="dark"] .pc-list__cat { color: var(--pc-text-3); }
html[data-scheme="dark"] .pc-list__name { color: var(--pc-text-1); }
html[data-scheme="dark"] .pc-list__desc { color: var(--pc-text-2); }
html[data-scheme="dark"] .pc-list__price { color: var(--pc-text-1); }
html[data-scheme="dark"] .pc-list__img { background: var(--pc-soft); }
/* ─── Variant: SHOWCASE ───────────────────────────────────────────
This variant is already a dark gradient card in light mode — the
only thing to adjust in dark mode is the inner CTA so it doesn't
look identical to the card surface (raise contrast). */
html[data-scheme="dark"] .pc-showcase__btn:hover {
background: #e8ecf4 !important;
color: #0e1015 !important;
}
/* ─── Area AROUND the cards — the grid wrapper + toolbar + headers
The big card chrome containing the toolbar + the product grid was
the bright slab the merchant kept flagging. Force it transparent
so it reads as the page itself, plus tint the heading + toolbar
text so they pop on the dark page. */
html[data-scheme="dark"] body .bestsell-card.data_grid,
html[data-scheme="dark"] body .card.customer-card.bestsell-card,
html[data-scheme="dark"] body .card.customer-card {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.06) !important;
box-shadow: none !important;
}
html[data-scheme="dark"] body .products-toolbar,
html[data-scheme="dark"] body .card-header.products-toolbar,
html[data-scheme="dark"] body .bestsell-card .card-header {
background: transparent !important;
}
html[data-scheme="dark"] body .products-toolbar__title,
html[data-scheme="dark"] body .card-title {
color: #e8ecf4 !important;
}
/* Sort / grid-list controls within the toolbar */
html[data-scheme="dark"] body .ptb-segs,
html[data-scheme="dark"] body .ptb-sortdrop__btn {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .ptb-seg {
color: #cfd5e1 !important;
}
html[data-scheme="dark"] body .ptb-seg.on {
background: rgba(255, 255, 255, 0.10) !important;
color: #fff !important;
}
html[data-scheme="dark"] body .ptb-sortdrop__menu {
background: #15151b !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] body .ptb-sortdrop__menu .dropdown-item {
color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .ptb-sortdrop__menu .dropdown-item:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Category breadcrumb above the products grid on category pages */
html[data-scheme="dark"] body .category-breadcrumb {
color: #cfd5e1 !important;
}
html[data-scheme="dark"] body .category-breadcrumb a {
color: #94a3b8 !important;
}
html[data-scheme="dark"] body .category-breadcrumb a:hover {
color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .category-breadcrumb__current {
color: #e8ecf4 !important;
}
/* ═══════════════════════════════════════════════════════════════════
FRAME ON — body.card-border-on
Opt-in visible stroke around every card variant. The default
storefront look already carries a soft surface + shadow; this
layer ADDS a crisp 1.5px outline so the merchant can pick a
clearly "framed" presentation when they want one.
body.card-border-off is the default and intentionally has no
rules — cards keep their out-of-box look.
Specificity: body.card-border-on raises these above the variant-
specific ones (.product-card{...} single-class) so a plain
declaration is enough — !important only on the variants whose
existing rules already use !important.
═══════════════════════════════════════════════════════════════════ */
body.card-border-on .product-card,
body.card-border-on .product-card--mini,
body.card-border-on .product-card--buttons,
body.card-border-on .product-card--showcase,
body.card-border-on .product-card--badge,
body.card-border-on .product-card--compact,
body.card-border-on .product-card--minimal,
body.card-border-on .product-card--list {
border: 1.5px solid rgba(0, 0, 0, 0.16) !important;
}
/* Dark scheme — flip the stroke to a translucent white so it shows
against the dark surfaces the cards switch to. */
html[data-scheme="dark"] body.card-border-on .product-card,
html[data-scheme="dark"] body.card-border-on .product-card--mini,
html[data-scheme="dark"] body.card-border-on .product-card--buttons,
html[data-scheme="dark"] body.card-border-on .product-card--showcase,
html[data-scheme="dark"] body.card-border-on .product-card--badge,
html[data-scheme="dark"] body.card-border-on .product-card--compact,
html[data-scheme="dark"] body.card-border-on .product-card--minimal,
html[data-scheme="dark"] body.card-border-on .product-card--list {
border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
/* ───────────────────────────────────────────────────────────────────
PER-INSTANCE FRAME — section-frame-{on|off}
The position-dock border picker writes per-instance now, and the
storefront emits section-frame-on / section-frame-off on each
Products section wrapper. These rules outrank the body.card-
border-* fallback above so a per-instance choice always wins for
THAT section while other sections keep the body-class default.
─────────────────────────────────────────────────────────────────── */
.storefront-section.section-frame-on .product-card,
.storefront-section.section-frame-on .product-card--mini,
.storefront-section.section-frame-on .product-card--buttons,
.storefront-section.section-frame-on .product-card--showcase,
.storefront-section.section-frame-on .product-card--badge,
.storefront-section.section-frame-on .product-card--compact,
.storefront-section.section-frame-on .product-card--minimal,
.storefront-section.section-frame-on .product-card--list {
border: 1.5px solid rgba(0, 0, 0, 0.16) !important;
}
.storefront-section.section-frame-off .product-card,
.storefront-section.section-frame-off .product-card--mini,
.storefront-section.section-frame-off .product-card--buttons,
.storefront-section.section-frame-off .product-card--showcase,
.storefront-section.section-frame-off .product-card--badge,
.storefront-section.section-frame-off .product-card--compact,
.storefront-section.section-frame-off .product-card--minimal,
.storefront-section.section-frame-off .product-card--list {
border: 0 !important;
}
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--mini,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--buttons,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--showcase,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--badge,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--compact,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--minimal,
html[data-scheme="dark"] .storefront-section.section-frame-on .product-card--list {
border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
/* ═══════════════════════════════════════════════════════════════════
PRODUCT PAGE Add-to-Cart — force the builder's primary colour
The per-theme stylesheets (style-black-body-blue.css and siblings)
hardcode .product-detail .btn-addcart { background: #2980B9 } etc.,
which beats the var(--primary-color) declaration in custom.css on
tied specificity. Override at the cascade end with !important so
whatever colour the merchant picks in the builder is the colour
the product page's Add-to-Cart button actually paints.
Card-listing CTAs are explicitly excluded via the dark-scheme
override block right below — that block has higher specificity
(html[data-scheme="dark"] body .product-card .product-detail
.btn-addcart) so the card's dark-mode contrast always wins. The
merchant flagged the light primary-color + dark-scheme case where
the unscoped rule was leaving the card CTA with light bg + white
text → invisible label.
═══════════════════════════════════════════════════════════════════ */
.product-detail .btn-addcart,
.product-detail a.btn.btn-addcart,
.product-detail .btn-addcart.add_to_cart {
background: var(--primary-color, #0e1015) !important;
color: #ffffff !important;
border: none !important;
}
.product-detail .btn-addcart:hover,
.product-detail a.btn.btn-addcart:hover {
background: var(--primary-color, #0e1015) !important;
color: #ffffff !important;
filter: brightness(1.08);
}
.product-detail .btn-addcart svg,
.product-detail .btn-addcart svg path,
.product-detail .btn-addcart svg circle {
stroke: #ffffff !important;
}
/* Dark-scheme override for the CARD-LISTING CTA only — beats the
product-page rule above via higher specificity (html[data-scheme]
+ body + .product-card adds enough class points). The card's
primary-coloured fill could be a light brand colour, which made
white text invisible in dark mode. Lock to white pill + dark text
so the label reads in every palette. Light mode still uses the
primary fill from the rule above (dark backgrounds tolerate white
text fine), so the change is dark-mode-only. */
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart,
html[data-scheme="dark"] body .product-card .product-detail a.btn.btn-addcart,
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart.add_to_cart {
background: #ffffff !important;
color: #0e1015 !important;
}
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart:hover {
background: #e8ecf4 !important;
color: #0e1015 !important;
filter: none !important;
}
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart svg,
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart svg path,
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart svg circle {
stroke: #0e1015 !important;
}
html[data-scheme="dark"] body .product-card .product-detail .btn-addcart svg ~ * {
border-inline-start-color: rgba(0, 0, 0, 0.18) !important;
}