/* =====================================================================
single-collection — "Monolith"
Stark, mono streetwear label. One focused collection.
Display: Archivo (heavy, can go expanded). Body: Archivo (light/regular).
Palette: pure black & white. ONE accent: red cart dot. Big type does the
work. Hairline rules, generous whitespace, editorial confidence.
===================================================================== */
/* Unbranded defaults for the two operator colour slots.
The layout injects ONLY the slots the operator actually set
(storefront/_preview/palette.html.twig, fed by
StorefrontContext::site() -> PreviewParams::colorsFromQuery, which returns []
for an unbranded load), so --brand / --secondary are UNDEFINED on a plain
storefront. This sheet already routes every use through a var() fallback, so
these change nothing today — they are here so the six themes carry the same
contract and a future bare `var(--brand)` cannot silently drop. CASCADE LAYER
on purpose: unlayered declarations always beat layered ones regardless of
source order, so the operator's inline :root still wins, while a plain
:root copy here would cascade AFTER it and clobber ?brand=. Values match the
fallbacks below and design/theme-previews/single-collection/styles.css. */
@layer storegrid-theme-defaults {
:root {
--brand: #050505;
--secondary: #ff2d2d;
}
}
:root {
/* Operator overrides are injected inline by _layout from site.brand_color /
site.secondary_color (BEFORE this linked sheet). --brand / --secondary are
deliberately NOT redeclared here — a :root copy would cascade later and
clobber the operator value, killing ?brand=. The theme identity is stark
mono: --brand drives the structural ink, --secondary the single red accent.
--ink/--line/--red derive from them (with var() fallbacks) so a brand colour
re-tints the grid without losing the "Monolith" character. */
--ink: var(--brand, #050505);
--paper: #ffffff;
--grey: #6b6b6b;
--grey-soft: #9a9a9a;
--line: var(--brand, #050505);
--line-faint: #e3e3e3;
--red: var(--secondary, #ff2d2d);
--max: 1440px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: "Archivo", system-ui, sans-serif; background: var(--paper); color: var(--ink); line-height: 1.5; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.disp { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; line-height: .86; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: clamp(16px, 4vw, 60px); }
/* ---------------- announcement ---------------- */
.announce { border-bottom: 1px solid var(--line); }
.announce .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.announce .mid { color: var(--grey); }
.announce .blink { color: var(--red); }
/* ---------------- header ---------------- */
header.site { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; gap: 16px; }
.logo { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 26px; letter-spacing: -.04em; }
.logo b { color: var(--red); }
.nav-links { display: flex; gap: 34px; justify-self: center; }
.nav-links a { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--ink); transition: width .25s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 22px; justify-self: end; }
.nav-right a { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; position: relative; }
.nav-right .cart { display: inline-flex; align-items: center; gap: 8px; }
.nav-right .cart .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.burger { display: none; background: none; border: 0; cursor: pointer; }
.burger svg { width: 24px; height: 24px; stroke: var(--ink); }
/* ---------------- hero ---------------- */
.hero { position: relative; height: clamp(560px, 90vh, 900px); overflow: hidden; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); z-index: 0; }
/* The scrim has to reach the whole copy block, not just its last line. It
faded to .05 by 45% up, which is where the eyebrow and the top of the
wordmark sit — on a light operator photo (the stand-in's is a bright leaf)
that left white-on-near-white. Hold it longer, then clear the image. */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.06) 68%, rgba(0,0,0,0) 86%); z-index: 1; }
.hero-inner { position: relative; z-index: 2; width: 100%; padding: clamp(28px, 5vw, 72px); color: #fff; }
.hero .index { position: absolute; top: clamp(24px, 4vw, 48px); right: clamp(20px, 4vw, 60px); z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); writing-mode: vertical-rl; }
.hero .kick { font-size: 12.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 22px; color: rgba(255,255,255,.85); }
.hero h1 { font-size: clamp(48px, 11vw, 168px); }
.hero .statement { margin-top: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero .statement p { max-width: 38ch; font-size: clamp(14px, 1.4vw, 17px); color: rgba(255,255,255,.85); }
.hero-cta { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid #fff; transition: gap .25s; }
.hero-cta:hover { gap: 20px; }
/* ---------------- collection intro (split rule) ---------------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; }
.intro > div { padding: clamp(34px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.intro > div:first-child { border-right: 1px solid var(--line); }
.intro .label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.intro h2 { font-size: clamp(28px, 4vw, 56px); }
.intro p { color: var(--grey); max-width: 44ch; font-size: 15.5px; }
.intro .stat-row { display: flex; gap: 40px; margin-top: 10px; }
.intro .stat b { font-size: clamp(30px, 4vw, 52px); font-weight: 900; font-stretch: 125%; display: block; line-height: 1; }
.intro .stat span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
/* ---------------- product grid ---------------- */
.collection { padding-block: 0; }
.coll-head { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(28px, 4vw, 54px) clamp(16px, 4vw, 60px) clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.coll-head h2 { font-size: clamp(34px, 6vw, 92px); }
.coll-head .meta { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); text-align: right; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.product { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; display: flex; flex-direction: column; transition: background .3s; }
.pgrid .product:nth-child(3n) { border-right: 0; }
.product:hover { background: #fafafa; }
.product-media { position: relative; aspect-ratio: 3/3.6; overflow: hidden; background: #f3f3f3; }
.product-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s, transform .7s cubic-bezier(.2,.8,.2,1); }
.product:hover .product-media img { filter: grayscale(0); transform: scale(1.03); }
.product .num { position: absolute; top: 14px; left: 16px; z-index: 2; font-size: 12px; font-weight: 800; letter-spacing: .06em; mix-blend-mode: difference; color: #fff; }
.product .soldout { position: absolute; top: 14px; right: 16px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 9px; }
.product .quick { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; background: var(--ink); color: #fff; text-align: center; padding: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.product:hover .quick { opacity: 1; transform: none; }
.product-body { padding: 18px clamp(16px, 2vw, 24px) 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.product-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.product-name small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--grey); text-transform: uppercase; margin-top: 4px; }
.product-price { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------------- lookbook strip ---------------- */
.lookbook { display: grid; grid-template-columns: 1.2fr .8fr 1fr; border-bottom: 1px solid var(--line); }
.lookbook .lb { position: relative; overflow: hidden; aspect-ratio: 3/4; border-right: 1px solid var(--line); }
.lookbook .lb:last-child { border-right: 0; }
.lookbook .lb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s, transform .9s cubic-bezier(.2,.8,.2,1); }
.lookbook .lb:hover img { filter: grayscale(0); transform: scale(1.04); }
.lookbook .lb .cap { position: absolute; left: 18px; bottom: 18px; z-index: 2; color: #fff; mix-blend-mode: difference; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lookbook .lb.tall { aspect-ratio: 3/5; }
/* ---------------- manifesto / closing ---------------- */
.manifesto { padding-block: clamp(60px, 10vw, 140px); border-bottom: 1px solid var(--line); text-align: center; }
.manifesto h2 { font-size: clamp(34px, 8vw, 132px); max-width: 16ch; margin: 0 auto; }
.manifesto h2 .red { color: var(--red); }
.manifesto .cta { margin-top: clamp(28px, 4vw, 48px); display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 16px 30px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: gap .25s, background .2s; }
.manifesto .cta:hover { gap: 22px; }
/* ---------------- footer ---------------- */
footer.foot { background: var(--ink); color: #fff; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding: clamp(44px, 6vw, 80px) clamp(16px, 4vw, 60px); }
.foot-top .logo { color: #fff; font-size: 48px; }
.foot-top .logo b { color: var(--red); }
.foot-top h4 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-soft); margin-bottom: 16px; }
.foot-top ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-top ul a { font-size: 13.5px; color: rgba(255,255,255,.78); transition: color .2s; }
.foot-top ul a:hover { color: #fff; }
.foot-news { display: flex; border: 1px solid rgba(255,255,255,.25); margin-top: 16px; }
.foot-news input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; padding: 12px 14px; font-size: 13px; font-family: inherit; }
.foot-news input::placeholder { color: var(--grey-soft); }
.foot-news button { background: #fff; color: var(--ink); border: 0; padding: 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.15); display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(16px, 4vw, 60px); flex-wrap: wrap; gap: 12px; font-size: 12px; letter-spacing: .04em; color: var(--grey-soft); }
.foot-bottom .socials { display: flex; gap: 22px; }
.foot-bottom .socials a { color: rgba(255,255,255,.8); }
.foot-bottom .socials a:hover { color: #fff; }
/* ---------------- reveal ---------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
.intro { grid-template-columns: 1fr; }
.intro > div:first-child { border-right: 0; }
.pgrid { grid-template-columns: 1fr 1fr; }
.pgrid .product:nth-child(3n) { border-right: 1px solid var(--line); }
.pgrid .product:nth-child(2n) { border-right: 0; }
.lookbook { grid-template-columns: 1fr 1fr; }
.lookbook .lb:nth-child(2) { border-right: 0; }
.lookbook .lb.tall { aspect-ratio: 3/4; }
.foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.nav { grid-template-columns: auto 1fr; }
.nav-links { display: none; }
.burger { display: block; }
.pgrid { grid-template-columns: 1fr; }
.pgrid .product { border-right: 0; }
.lookbook { grid-template-columns: 1fr; }
.lookbook .lb { border-right: 0; }
.foot-top { grid-template-columns: 1fr; }
.announce .mid { display: none; }
}
/* =====================================================================
INNER PAGES — shared shell, components, page-scoped layouts
Same restraint: hairline rules, whitespace, type hierarchy, mono.
The red accent stays a single deliberate dot. Nothing decorative.
===================================================================== */
/* footer blurb (added to shared footer) */
.foot-blurb { color: rgba(255,255,255,.62); font-size: 13.5px; max-width: 40ch; margin: 18px 0 0; line-height: 1.6; }
.foot-bottom .socials svg { display: inline-block; vertical-align: middle; }
/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: var(--paper); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; padding: 24px; }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel .x { align-self: flex-end; background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; }
.drawer-panel a { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 30px; letter-spacing: -.02em; padding: 12px 0; border-bottom: 1px solid var(--line-faint); }
/* =================== page shell =================== */
.page-head { border-bottom: 1px solid var(--line); padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 60px) clamp(28px, 4vw, 48px); }
.page-head .crumb { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); display: flex; gap: 8px; align-items: center; margin-bottom: clamp(20px, 4vw, 40px); flex-wrap: wrap; }
.page-head .crumb a { color: var(--grey); transition: color .2s; }
.page-head .crumb a:hover { color: var(--ink); }
.page-head .crumb .sep { color: var(--line-faint); }
.page-head .crumb .here { color: var(--ink); }
.page-head h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(40px, 9vw, 132px); }
.page-head .sub { margin-top: 16px; color: var(--grey); font-size: clamp(14px, 1.5vw, 17px); max-width: 56ch; }
.page-head .head-index { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
.section-pad { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 60px); }
.section-pad + .section-pad { border-top: 1px solid var(--line); }
/* shared buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 16px 28px; cursor: pointer; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); transition: background .2s, color .2s, gap .25s; }
.btn:hover { gap: 20px; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--red); border-color: var(--red); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 11px 18px; font-size: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 3px; transition: gap .25s; }
.link-arrow:hover { gap: 18px; }
/* shared form fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.field input, .field select, .field textarea { font-family: "Archivo", sans-serif; font-size: 15px; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: 12px; color: var(--grey); }
.field-row { display: grid; gap: 18px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--ink); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { color: #117a3d; border-color: #117a3d; }
/* =================== ABOUT =================== */
.about-lede { display: grid; grid-template-columns: 1.1fr .9fr; }
.about-lede > div { padding: clamp(34px, 5vw, 72px); }
.about-lede > div:first-child { border-right: 1px solid var(--line); }
.about-lede h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; font-size: clamp(28px, 4vw, 56px); }
.about-lede .label { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.about-lede p { color: var(--grey); font-size: 15.5px; line-height: 1.7; margin-bottom: 16px; max-width: 52ch; }
.about-img { aspect-ratio: 16/8; overflow: hidden; border-bottom: 1px solid var(--line); background: #f3f3f3; }
.about-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .8s; }
.about-img:hover img { filter: grayscale(0); }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stats-strip .stat { padding: clamp(30px, 5vw, 60px) clamp(20px, 3vw, 40px); border-right: 1px solid var(--line); }
.stats-strip .stat:last-child { border-right: 0; }
.stats-strip .stat b { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; display: block; font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; }
.stats-strip .stat span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-top: 12px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.values-grid .value { padding: clamp(28px, 4vw, 48px); border-right: 1px solid var(--line); min-height: 240px; display: flex; flex-direction: column; }
.values-grid .value:last-child { border-right: 0; }
.values-grid .value .vnum { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--grey); }
.values-grid .value h3 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 110%; text-transform: uppercase; letter-spacing: -.01em; font-size: 21px; margin-top: auto; line-height: 1.05; }
.values-grid .value p { color: var(--grey); font-size: 14px; line-height: 1.6; margin-top: 14px; }
.closing-cta { text-align: center; padding: clamp(60px, 10vw, 130px) 20px; }
.closing-cta h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(34px, 7vw, 100px); max-width: 18ch; margin: 0 auto 36px; }
/* =================== PRODUCTS LISTING =================== */
.filter-bar { position: sticky; top: 72px; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(16px, 4vw, 60px); flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.chip:hover { background: #f3f3f3; }
.chip.active { background: var(--ink); color: #fff; }
.filter-right { display: flex; align-items: center; gap: 16px; }
.result-count { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.sort-wrap { position: relative; display: inline-flex; align-items: center; }
.sort-wrap select { appearance: none; font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 34px 9px 14px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; outline: none; }
.sort-wrap::after { content: "▾"; position: absolute; right: 13px; pointer-events: none; font-size: 11px; }
/* minmax(0, 1fr), not 1fr: a bare `1fr` track is minmax(AUTO, 1fr), and the
card's ![]()
puts its intrinsic width into that auto minimum. At two columns
on a 390px screen the second track grew to 271px and the grid ran 92px off
the right edge. The zero minimum lets the track shrink and the image scale.
Used on shop and on the PDP's related grid, which share this class. */
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.shop-grid .product { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-grid .product:nth-child(4n) { border-right: 0; }
.product-price .was { color: var(--grey); text-decoration: line-through; font-weight: 600; margin-right: 8px; font-size: 13px; }
.product-price .now-sale { color: var(--red); }
/* =================== PRODUCT DETAIL =================== */
.pdp { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 1px solid var(--line); }
.pdp-media { border-right: 1px solid var(--line); position: relative; }
.gallery-main { position: relative; aspect-ratio: 4/4.4; overflow: hidden; background: #f3f3f3; cursor: zoom-in; }
.gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0; transition: opacity .5s, filter .6s; }
.gallery-main img.active { opacity: 1; }
.gallery-main:hover img.active { filter: grayscale(0); }
.gallery-main .zoom-hint { position: absolute; bottom: 16px; right: 16px; z-index: 3; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.gallery-thumbs button { aspect-ratio: 1/1; border: 0; border-right: 1px solid var(--line); background: #f3f3f3; cursor: pointer; padding: 0; overflow: hidden; position: relative; }
.gallery-thumbs button:last-child { border-right: 0; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s; }
.gallery-thumbs button.active::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); }
.gallery-thumbs button:hover img, .gallery-thumbs button.active img { filter: grayscale(0); }
.pdp-info { padding: clamp(28px, 4vw, 56px); }
.pdp-info .cat { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.pdp-info h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(30px, 4vw, 52px); margin: 14px 0 18px; }
.pdp-price { display: flex; align-items: baseline; gap: 14px; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pdp-price .was { color: var(--grey); text-decoration: line-through; font-size: 17px; font-weight: 600; }
.pdp-tag { color: var(--grey); font-size: 15px; margin: 18px 0 28px; line-height: 1.6; max-width: 46ch; }
.opt-block { margin-bottom: 26px; }
.opt-block .opt-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }
.opt-block .opt-label .chosen { color: var(--ink); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 38px; height: 38px; border: 1px solid var(--line); cursor: pointer; position: relative; padding: 0; background-clip: content-box; transition: transform .15s; }
.swatch:hover { transform: scale(1.06); }
.swatch.active { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Combination-unavailable notice for the dynamic picker (quiet, in keeping). */
.combo-oos { margin: 4px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--red); }
.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size-chip { min-width: 48px; padding: 11px 12px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: background .2s, color .2s; }
.size-chip:hover { background: #f3f3f3; }
.size-chip.active { background: var(--ink); color: #fff; }
.size-chip[disabled] { color: var(--line-faint); cursor: not-allowed; position: relative; }
.size-chip[disabled]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--line-faint) 50%, transparent calc(50% + .5px)); }
.qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); }
.qty-stepper button { width: 44px; background: var(--paper); border: 0; cursor: pointer; font-size: 18px; font-weight: 700; transition: background .2s; }
.qty-stepper button:hover { background: var(--ink); color: #fff; }
.qty-stepper input { width: 52px; text-align: center; border: 0; border-inline: 1px solid var(--line); font-family: "Archivo", sans-serif; font-size: 15px; font-weight: 700; outline: none; }
.buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 22px; }
.ship-line { font-size: 13px; color: var(--grey); display: flex; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-faint); }
/* accordion */
.accordion { border-top: 1px solid var(--line); margin-top: 28px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; padding: 20px 0; font-family: "Archivo", sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-align: left; }
.acc-head .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.acc-head .pm::before, .acc-head .pm::after { content: ""; position: absolute; background: var(--ink); transition: transform .3s, opacity .3s; }
.acc-head .pm::before { top: 7px; left: 0; width: 16px; height: 2px; }
.acc-head .pm::after { top: 0; left: 7px; width: 2px; height: 16px; }
.acc-item.open .acc-head .pm::after { transform: scaleY(0); }
.acc-body { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.acc-body-inner { padding: 0 0 22px; color: var(--grey); font-size: 14.5px; line-height: 1.7; }
.acc-body-inner p { margin-bottom: 12px; }
.detail-list { list-style: none; display: grid; gap: 10px; }
.detail-list li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; font-size: 14px; }
.detail-list li b { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-top: 1px; }
/* related */
.related-head { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 60px) clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--line); }
.related-head h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(24px, 4vw, 44px); }
/* =================== LIGHTBOX =================== */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8,8,8,.97); display: none; }
.lightbox.open { display: block; }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px 90px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.lb-close { position: absolute; top: 22px; right: 26px; z-index: 2; background: none; border: 0; color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }
.lb-counter { position: absolute; top: 26px; left: 26px; z-index: 2; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 54px; height: 54px; display: grid; place-items: center; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.lb-arrow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lb-arrow.prev { left: 22px; }
.lb-arrow.next { right: 22px; }
.lb-arrow svg { width: 22px; height: 22px; }
/* =================== CART =================== */
.cart-wrap { display: grid; grid-template-columns: 1.5fr .9fr; border-bottom: 1px solid var(--line); }
.cart-lines { border-right: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 22px; padding: clamp(22px, 3vw, 34px) clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--line); align-items: start; }
.cart-line:last-child { border-bottom: 0; }
.cart-line .thumb { aspect-ratio: 1/1.15; overflow: hidden; background: #f3f3f3; }
.cart-line .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s; }
.cart-line:hover .thumb img { filter: grayscale(0); }
.cart-line .ci-name { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.cart-line .ci-var { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); margin-top: 6px; }
.cart-line .ci-controls { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.cart-line .ci-remove { background: none; border: 0; cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.cart-line .ci-remove:hover { color: var(--red); }
.cart-line .ci-total { text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line .ci-each { display: block; font-size: 11.5px; font-weight: 600; color: var(--grey); margin-top: 4px; }
.cart-summary { padding: clamp(28px, 4vw, 48px); position: sticky; top: 90px; align-self: start; }
.cart-summary h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(22px, 3vw, 34px); margin-bottom: 26px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-faint); }
.sum-row .muted { color: var(--grey); }
.sum-row.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 18px; font-size: 19px; font-weight: 800; }
.sum-row.total b { font-variant-numeric: tabular-nums; }
.sum-row .discount { color: var(--red); font-weight: 700; }
.promo { display: flex; margin: 22px 0; border: 1px solid var(--line); }
.promo input { flex: 1; border: 0; outline: none; padding: 13px 14px; font-family: "Archivo", sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.promo button { background: var(--ink); color: #fff; border: 0; padding: 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.promo button:hover { background: var(--red); }
.promo-msg { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #117a3d; margin: -8px 0 18px; min-height: 16px; }
.cart-empty { padding: clamp(60px, 10vw, 130px) 20px; text-align: center; }
.cart-empty h2 { font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 120%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(28px, 5vw, 56px); margin-bottom: 18px; }
.cart-empty p { color: var(--grey); margin-bottom: 30px; }
/* =================== CHECKOUT =================== */
.checkout-wrap { display: grid; grid-template-columns: 1.35fr .9fr; border-bottom: 1px solid var(--line); }
.checkout-main { border-right: 1px solid var(--line); }
.step { border-bottom: 1px solid var(--line); }
.step-head { display: flex; align-items: center; gap: 16px; padding: 22px clamp(20px, 3vw, 44px); }
.step-num { width: 30px; height: 30px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.step.done .step-num { background: var(--ink); color: #fff; }
.step.active .step-num { background: var(--red); border-color: var(--red); color: #fff; }
.step-title { font-family: "Archivo", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; flex: 1; }
/* step "Edit" — the way back to a step the shopper has already passed. Revealed
only on .done (app.js `i < n`), so it is never a dead control on the step
being filled in; step 4 carries none in markup, as nothing is behind it.
`font-family: inherit` is load-bearing on a