/* trueworngear — modern editorial / sports archive aesthetic */
:root {
--bg: #bdbdbb; /* darker neutral grey (page) */
--bg-alt: #b2b2b0;
--bg-grey: #a4a4a2; /* deeper grey — header / blocks */
--ink: #131312;
--ink-soft: #3b3b39;
--ink-muted: #4f4f4d; /* tuned for WCAG AA contrast on the darker grey */
--rule: #949491; /* grey hairline */
--accent: #1a1a1a; /* keep accents monochrome — photos do the color */
--hot: #c8362a; /* used sparingly (sold, errors) */
--green-deep:#2f5d4f; /* legacy house green — retired as the accent (kept for reference) */
--accent-pop: #b5531f; /* burnt orange — THE brand accent: CTAs, eyebrows, active state, hovers */
--accent-pop-deep:#98441a; /* darker orange for hover/pressed states */
--card-bg: #fcfcfc; /* near-white so cards pop on the grey */
--header-bg: rgba(160, 160, 158, 0.72); /* translucent glass — opaque enough to read on */
--bar-bg: rgba(150, 150, 148, 0.8); /* drop-list banner — a touch more solid for text */
--page-bg: #bdbdbb; /* true page bg per mode (banner fade — not re-pinned) */
--header-line: #8c8c8a;
--pad: clamp(1rem, 2vw, 1.5rem);
--container: 1280px;
--font-display: "Bebas Neue", "Arial Narrow", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* Dark mode is the storefront DEFAULT — always on, no OS sniffing. A signed-in
customer can opt into light from Account → Appearance, which sets a `tw_theme=light`
cookie; the layout then adds `.theme-light` to , reverting the storefront to
the :root light palette above. Admin (/jumanji, body.is-admin) is always light —
internal tooling full of light-surface tables/forms. The UI is variable-driven, so
dark just re-points the palette to a warm charcoal scheme. Tweak these freely. */
body:not(.is-admin):not(.theme-light) {
--bg: #121212; /* dark neutral grey */
--bg-alt: #191919;
--bg-grey: #1f1f1f; /* header / blocks */
--ink: #f0f0ef; /* off-white text */
--ink-soft: #c3c3c1;
--ink-muted: #8f8f8d;
--rule: #353533; /* dark grey hairline */
--accent: #f0f0ef;
--accent-pop: #e07a35; /* brighter burnt orange for contrast on dark */
--accent-pop-deep:#c2641f;
--card-bg: #1e1e1d;
--header-bg: rgba(22, 22, 22, 0.72); /* translucent glass — opaque enough to read on */
--bar-bg: rgba(18, 18, 18, 0.82); /* drop-list banner — a touch more solid for text */
--page-bg: #121212; /* true page bg per mode (banner fade) */
--header-line: #343432;
}
/* "Dark anchor" blocks (footer, support strip, banner hero) are intentionally
dark-on-light. Re-pin the two flipping vars to their LIGHT values inside them
so they keep their original dark look instead of inverting to a light slab. */
body:not(.is-admin):not(.theme-light) .site-footer {
--ink: #1a1814;
--bg: #f2efe7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-grey);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* Custom scrollbar across the whole site — slim, themed to the palette, with the
brand orange on hover. */
* { scrollbar-width: thin; scrollbar-color: #b3afa4 transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-grey); }
::-webkit-scrollbar-thumb {
background: #b3afa4;
border-radius: 8px;
border: 3px solid var(--bg-grey); /* inset look */
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-pop); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad);
}
/* --- Header --- */
.site-header {
background: var(--bg-grey);
border-bottom: 1px solid var(--header-line);
box-shadow: 0 2px 8px -5px rgba(0,0,0,0.35);
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
background: var(--header-bg); /* translucent — glassy blur over content */
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 92px; gap: 2rem;
max-width: none; /* full-bleed header: brand to the left edge, cart/account to the right edge */
}
.brand {
display: inline-flex; align-items: baseline; gap: 0.55rem;
text-decoration: none;
}
.brand__mark {
font-family: var(--font-display);
background: var(--ink); color: var(--bg);
padding: 4px 8px; line-height: 1;
letter-spacing: 0.04em;
font-size: 22px;
}
.brand__word {
font-family: var(--font-display);
font-size: 28px; letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Bigger header at the top of the page that slims down as you scroll — pure CSS
scroll-driven animation (no JS), same approach as dev.skatells. Browsers
without scroll timelines (e.g. Firefox) simply keep the full-size header. */
@supports (animation-timeline: scroll()) {
@keyframes tw-slim-header { to { height: 58px; } }
@keyframes tw-slim-word { to { font-size: 20px; } }
@keyframes tw-slim-mark { to { font-size: 16px; } }
.site-header__inner {
animation: tw-slim-header linear both;
animation-timeline: scroll(root block);
animation-range: 0 150px;
}
.brand__word {
animation: tw-slim-word linear both;
animation-timeline: scroll(root block);
animation-range: 0 150px;
}
.brand__mark {
animation: tw-slim-mark linear both;
animation-timeline: scroll(root block);
animation-range: 0 150px;
}
}
.site-nav { display: flex; align-items: center; gap: 2.7rem; }
.site-nav a {
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-soft);
}
.site-nav a:hover { color: var(--accent-pop); text-decoration: none; }
/* Header dropdown menus (CSS-only — open on hover or keyboard focus). */
/* padding-bottom + negative margin = an invisible hover bridge so the menu can hang
lower without the gap closing it. */
.nav-dd { position: relative; display: inline-flex; align-items: center; padding-bottom: 0.6rem; margin-bottom: -0.6rem; }
.nav-dd__caret { font-size: 9px; opacity: 0.65; }
.nav-dd__menu {
position: absolute; top: 100%; left: 0; z-index: 60;
display: none;
min-width: 200px; max-height: 72vh; overflow-y: auto;
background: var(--bg-grey); border: 1px solid #a7a396; border-radius: 3px;
box-shadow: 0 18px 38px -16px rgba(0,0,0,0.5);
padding: 0.4rem;
}
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu { display: block; }
.nav-dd__menu a {
display: block; padding: 0.44rem 0.7rem; border-radius: 2px;
font-family: var(--font-body); font-size: 13px; text-transform: none;
font-weight: 600; letter-spacing: 0.01em;
color: var(--ink-soft);
}
.nav-dd__menu a:hover { background: rgba(0,0,0,0.06); color: var(--accent-pop); text-decoration: none; }
/* Placeholder shown when a category has nothing listed yet — non-interactive, muted. */
.nav-dd__empty {
display: block; padding: 0.44rem 0.7rem;
font-family: var(--font-body); font-size: 13px; text-transform: none;
font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted);
white-space: nowrap;
}
.site-header__util { display: flex; align-items: center; gap: 1rem; }
.util-link {
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-soft);
}
.util-link:hover { color: var(--accent-pop); text-decoration: none; }
/* Orange accent on the grey bar: the brand chip pops (scoped to the header so the
footer logo stays as-is). */
.site-header .brand__mark { background: var(--accent-pop); }
.util-link__icon { display: block; flex: none; transform: translateY(-0.5px); }
/* --- Mobile menu (checkbox toggle, no JS) --- */
.nav-toggle { display: none; }
.mobile-nav { display: none; }
@media (max-width: 760px) {
.site-nav { display: none; }
/* Account/Sign in lives in the mobile menu — header keeps just Cart + Menu.
Scoped selector so it beats the later .util-link--account inline-flex rule. */
.site-header__util .util-link--account { display: none !important; }
.site-header__util { gap: 1.25rem; }
.nav-toggle {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-soft); cursor: pointer;
padding: 0.6rem 0 0.6rem 0.4rem;
}
.nav-toggle::after { content: "Menu"; }
.nav-toggle:hover { color: var(--ink); }
.mobile-nav__checkbox:checked ~ .container .nav-toggle::after { content: "Close"; }
.mobile-nav__checkbox:focus-visible ~ .container .nav-toggle {
outline: 2px solid var(--ink); outline-offset: 2px;
}
.mobile-nav__checkbox:checked ~ .mobile-nav {
display: block;
border-top: 1px solid var(--rule);
background: var(--bg-grey);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.mobile-nav a {
display: block;
padding: 0.85rem var(--pad);
font-family: var(--font-display); font-size: 20px;
text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { text-decoration: none; background: var(--bg-alt); }
/* Category accordions in the mobile menu (tap to open, arrow rotates). */
.mobile-nav__group > summary {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
list-style: none; cursor: pointer;
padding: 0.85rem var(--pad);
font-family: var(--font-display); font-size: 20px;
text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--rule);
}
.mobile-nav__group > summary::-webkit-details-marker { display: none; }
.mobile-nav__group > summary::after {
content: "\25BE"; font-size: 13px; color: var(--ink-muted);
transition: transform 0.2s ease;
}
.mobile-nav__group[open] > summary::after { transform: rotate(180deg); }
.mobile-nav__sub { background: rgba(0, 0, 0, 0.06); }
.mobile-nav__sub a {
font-family: var(--font-body); font-size: 13px;
text-transform: none; font-weight: 600; letter-spacing: 0.01em;
padding-left: calc(var(--pad) + 1.1rem);
}
/* Account / Sign in lives only here in the menu, with the person icon. */
.mobile-nav__account { display: flex; align-items: center; gap: 0.6rem; }
}
/* --- Hero --- */
.hero {
border-bottom: 1px solid var(--rule);
background:
radial-gradient(ellipse at top right, rgba(200, 54, 42, 0.06), transparent 60%),
var(--bg);
}
.hero__inner {
padding: clamp(3rem, 8vw, 6rem) var(--pad);
max-width: 1100px;
}
.eyebrow {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--accent-pop);
margin: 0 0 1rem;
}
.display {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.95; letter-spacing: 0.005em;
margin: 0 0 1.25rem;
text-transform: uppercase;
}
.display--alt { color: var(--ink-muted); }
.display--sm { font-size: clamp(2rem, 4vw, 3rem); }
.hero__lede {
font-size: clamp(1rem, 1.4vw, 1.15rem);
max-width: 56ch; color: var(--ink-soft);
margin: 0 0 2rem;
}
.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* Measured contrast: a bolder hero headline + a solid accent rule, so the page
has structure and pop while staying minimal (green product photos do the color). */
.hero .display { font-size: clamp(3.25rem, 8.5vw, 7.5rem); }
.hero__rule { width: 72px; height: 4px; background: var(--ink); margin: 0 0 1.75rem; }
/* Full-width banner hero: headline overlaid on a banner image. Placeholder color
for now (swap .hero__banner background for a real ![]()
later). */
.hero--banner { background: none; border-bottom: 1px solid var(--rule); }
.hero__banner {
position: relative; overflow: hidden;
min-height: clamp(380px, 56vh, 600px);
display: flex; align-items: center;
background: var(--page-bg); /* placeholder colour — drop in a photo to replace */
}
.hero__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Mode-aware left→right fade. LIGHT mode: left light, fades to dark on the right.
DARK mode: left dark, fades to light (override below). The headline sits on the
left, so it always has the strong, same-tone-as-text side behind it. */
.hero__banner::after {
content: ""; position: absolute; inset: 0;
background:
/* horizontal: starts grey on the left and fades smoothly to black across the width */
linear-gradient(90deg, rgba(168,168,168,0.82) 0%, rgba(110,110,110,0.8) 38%, rgba(0,0,0,0.86) 100%),
/* vertical "block fade": top & bottom blend into the page colour */
linear-gradient(to bottom, var(--page-bg) 0%, transparent 22%, transparent 78%, var(--page-bg) 100%);
}
/* Dark-mode banner fade (default storefront; reverts under .theme-light). */
body:not(.is-admin):not(.theme-light) .hero__banner::after {
background:
linear-gradient(90deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.95) 30%, rgba(255,255,255,0.32) 62%, rgba(255,255,255,0.32) 100%),
linear-gradient(to bottom, var(--page-bg) 0%, transparent 22%, transparent 78%, var(--page-bg) 100%);
}
.hero__banner-inner {
position: relative; z-index: 1; width: 100%;
/* Full-bleed like the header: let the headline sit near the left edge (aligned
with the brand) instead of the centered 1280px container edge — with a little
extra padding so the text isn't cramped against the edges. */
max-width: none;
padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
padding-left: clamp(1.5rem, 4vw, 3rem); padding-right: clamp(1.5rem, 4vw, 3rem);
}
.hero__banner .hero__text { max-width: 640px; min-width: 0; }
/* Text follows the mode so it reads against the same-tone left side of the fade
(dark text in light mode, light text in dark mode). */
.hero--banner .eyebrow { color: var(--ink-muted); }
.hero--banner .display { color: var(--ink); }
.hero--banner .display--alt { color: var(--ink-muted); }
.hero--banner .hero__rule { background: var(--accent-pop); }
.hero--banner .hero__lede { color: var(--ink-soft); }
.hero--banner .btn--primary { background: var(--accent-pop); color: #fff; border-color: var(--accent-pop); }
.hero--banner .btn--primary:hover { background: var(--accent-pop-deep); color: #fff; border-color: var(--accent-pop-deep); }
.hero__banner-label {
position: absolute; right: 0.9rem; bottom: 0.7rem; z-index: 1;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--bg); /* opposite tone — sits on the faded side */
text-shadow: 0 1px 2px var(--ink);
}
/* Mobile: show the whole banner photo (contain — "zoomed out") instead of cropping,
and shrink the headline/lede so the text isn't cramped. */
@media (max-width: 640px) {
.hero__banner { min-height: clamp(280px, 62vw, 440px); }
.hero__banner img { object-fit: contain; }
.hero .display { font-size: clamp(2rem, 9vw, 2.8rem); }
.hero__lede { font-size: 0.9rem; }
.hero__rule { width: 56px; height: 3px; margin-bottom: 1.1rem; }
.hero__banner-inner {
padding-top: clamp(1.75rem, 6vw, 2.5rem); padding-bottom: clamp(1.75rem, 6vw, 2.5rem);
}
}
/* --- Buttons --- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.85rem 1.5rem;
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.14em;
border: 1px solid var(--ink);
background: var(--ink); color: var(--bg);
transition: transform 80ms ease, background 120ms ease, color 120ms ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--primary { background: var(--accent-pop); border-color: var(--accent-pop); color: #fff; }
.btn--primary:hover { background: var(--accent-pop-deep); border-color: var(--accent-pop-deep); color: #fff; }
.btn--block { width: 100%; padding: 1rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Back link — orange pill that returns up one level (product -> shop, shop -> home).
Mono/uppercase to match the eyebrow language; fills on hover, arrow nudges left. */
.back-nav { margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem); }
.back-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--accent-pop); background: transparent;
border: 1px solid var(--accent-pop); border-radius: 999px;
padding: 0.5rem 0.95rem;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.back-link:hover {
background: var(--accent-pop); color: #fff;
border-color: var(--accent-pop); text-decoration: none;
}
.back-link__arrow { font-size: 13px; line-height: 1; transition: transform 0.18s ease; }
.back-link:hover .back-link__arrow { transform: translateX(-3px); }
/* --- Sections --- */
.section { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section__head {
display: flex; align-items: baseline; justify-content: space-between;
margin: 0 0 2rem; gap: 1rem;
padding-bottom: 0.9rem; border-bottom: 2px solid var(--ink);
}
.section__head--shop { align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 1rem; }
.section__title {
font-family: var(--font-display);
text-transform: uppercase; letter-spacing: 0.04em;
font-size: clamp(1.5rem, 2.5vw, 2.25rem); margin: 0;
}
.section__more {
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--accent-pop);
}
.section__more:hover { color: var(--accent-pop-deep); }
.shop__count {
font-family: var(--font-mono); color: var(--ink-muted);
font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
}
.shop__count-range { opacity: 0.75; }
/* --- Shop pagination (no-JS page links) --- */
.pagination {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 0.4rem;
margin: clamp(2rem, 4vw, 3.5rem) 0 0;
font-family: var(--font-mono); font-size: 12px;
}
.pagination__page, .pagination__step {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 0.7rem;
border: 1px solid var(--rule); color: var(--ink);
letter-spacing: 0.06em;
}
.pagination__page:hover, .pagination__step:hover {
text-decoration: none; border-color: var(--accent-pop); color: var(--accent-pop);
}
.pagination__page.is-current {
background: var(--accent-pop); border-color: var(--accent-pop); color: #fff;
}
.pagination__step.is-disabled {
color: var(--ink-muted); border-color: var(--rule); opacity: 0.45; cursor: default;
}
.pagination__gap { color: var(--ink-muted); padding: 0 0.2rem; }
/* --- Filter chips --- */
.shop-filters {
display: flex; gap: 0.5rem; flex-wrap: wrap;
margin: 0 0 2rem; padding: 0.25rem 0 1.5rem;
border-bottom: 1px solid var(--rule);
}
.chip {
padding: 0.4rem 0.8rem;
border: 1px solid var(--rule);
background: var(--card-bg);
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.chip--active { background: var(--accent-pop); color: #fff; border-color: var(--accent-pop); }
/* --- Shop search (no-JS GET form) --- */
.shop-search { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.25rem; }
.shop-search__input {
flex: 1 1 280px; min-width: 0;
padding: 0.65rem 0.85rem;
border: 1px solid var(--rule); background: var(--card-bg);
font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.shop-search__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.shop-search__btn { flex: 0 0 auto; }
.shop-search__clear {
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--ink-muted);
}
.shop-search__clear:hover { color: var(--ink); }
/* --- Shop: faceted filter sidebar (skatells-style UX, trueworngear look) --- */
.shop-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.shop-filters-panel {
position: sticky; top: 84px;
background: var(--bg-grey); border: 1px solid #b1ada1; border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
padding: 1.1rem 1.15rem 0.5rem;
}
.shop-filters-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.85rem; }
.shop-filters-panel__head h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.3rem; margin: 0; }
.shop-filters-panel__clear { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-pop); white-space: nowrap; }
.shop-filters-panel__clear:hover { color: var(--accent-pop-deep); text-decoration: none; }
.filter-search { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.filter-search__input { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--rule); background: var(--bg); font: inherit; font-size: 13px; border-radius: 4px; }
.filter-search__input:focus { outline: none; border-color: var(--ink); background: #fff; }
.filter-search__btn { flex: none; width: 2.2rem; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1; }
.filter-search__btn:hover { background: var(--accent-pop); border-color: var(--accent-pop); }
.filter-group { border-top: 1px solid var(--rule); padding: 0.75rem 0 0.4rem; }
.filter-group__title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); margin: 0 0 0.35rem; }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.filter-opt {
display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
padding: 0.34rem 0.5rem; border-radius: 4px;
color: var(--ink-soft); font-size: 0.9rem;
}
.filter-opt:hover { background: rgba(0, 0, 0, 0.08); color: var(--accent-pop); text-decoration: none; }
.filter-opt__count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); background: var(--bg-alt); padding: 1px 7px; border-radius: 999px; }
/* Selected filter = brand orange; plain otherwise. Several can be active at once. */
.filter-opt.is-active { background: var(--accent-pop); color: #fff; font-weight: 600; }
.filter-opt.is-active .filter-opt__count { background: rgba(255,255,255,0.25); color: #fff; }
.filter-empty { font-size: 0.85rem; color: var(--ink-muted); margin: 0.25rem 0 0.75rem; line-height: 1.5; }
/* Sort dropdown (CSS-only ) — one option per row, orange active. */
.sort-dd { margin-bottom: 0.85rem; }
.sort-dd__summary {
list-style: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
padding: 0.5rem 0.7rem;
border: 1px solid #b1ada1; border-radius: 5px; background: rgba(0, 0, 0, 0.07);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-soft);
}
.sort-dd__summary::-webkit-details-marker { display: none; }
.sort-dd__summary::after { content: "\25BE"; font-size: 10px; color: var(--ink-muted); transition: transform 0.2s ease; }
.sort-dd[open] .sort-dd__summary::after { transform: rotate(180deg); }
.sort-dd__menu { display: grid; gap: 2px; margin-top: 0.35rem; }
.sort-dd__opt { display: block; padding: 0.45rem 0.7rem; border-radius: 4px; font-size: 0.9rem; color: var(--ink-soft); }
.sort-dd__opt:hover { background: rgba(0,0,0,0.06); color: var(--accent-pop); text-decoration: none; }
.sort-dd__opt.is-active { background: var(--accent-pop); color: #fff; font-weight: 600; }
/* Shop empty state — shown when a filter/category link returns no items. */
.shop-empty { text-align: center; padding: clamp(2.5rem, 7vw, 5.5rem) 1rem; max-width: 32rem; margin: 0 auto; }
.shop-empty__title {
font-family: var(--font-display); text-transform: uppercase;
font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: 0.03em; line-height: 1;
margin: 0.35rem 0 0.7rem;
}
.shop-empty__note { color: var(--ink-muted); margin: 0 0 1.6rem; line-height: 1.6; }
/* Customer sign-in page */
.signin { max-width: 27rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 0; }
.signin__card {
background: var(--bg-grey); border: 1px solid #b1ada1; border-radius: 14px;
box-shadow: 0 6px 26px -14px rgba(0,0,0,0.35);
padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); text-align: center;
}
.signin__title {
font-family: var(--font-display); text-transform: uppercase;
font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.02em; line-height: 1;
margin: 0.4rem 0 0.7rem;
}
.signin__lede { color: var(--ink-soft); margin: 0 auto 1.6rem; line-height: 1.6; max-width: 24rem; }
.btn-google {
display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%;
padding: 0.8rem 1.25rem; background: #fff; color: #1f1f1f;
border: 1px solid #dadce0; border-radius: 8px;
font-family: var(--font-body); font-size: 15px; font-weight: 600;
cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease;
}
.btn-google:hover { background: #f7f8f8; border-color: #c6c9ce; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.btn-google__icon { flex: none; display: block; }
.signin__fine { font-size: 12px; color: var(--ink-muted); margin: 1.15rem 0 0; line-height: 1.5; }
.signin__back { text-align: center; margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.signin__back a { color: var(--ink-muted); }
.signin__back a:hover { color: var(--accent-pop); }
/* Marketing / descriptive prose uses the mono face (same as the "Game-worn ·
Athlete-issued" eyebrow) instead of the plain sans, so taglines and ledes read as
intentional. Legal pages (.legal p) and functional UI keep the sans. */
.hero__lede,
.drop-list__sub,
.signin__lede,
.empty__note,
.shop-empty__note,
.support-block__hint,
.toggle__hint,
.site-footer__brand p {
font-family: var(--font-mono);
}
.shop-results__meta { display: flex; align-items: center; gap: 1rem; }
.filter-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.filter-toggle-btn { display: none; } /* desktop: sidebar is always visible */
@media (max-width: 760px) {
.shop-layout { grid-template-columns: 1fr; }
.shop-filters-panel { position: static; display: none; margin-bottom: 1.5rem; }
#filter-toggle:checked ~ .section .shop-filters-panel { display: block; }
.filter-toggle-btn {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 0.85rem; border: 1px solid var(--ink); border-radius: 4px; cursor: pointer;
}
}
/* --- Grids & cards --- */
.grid { display: grid; gap: 1.5rem; }
/* Featured cards now match the shop's product cards exactly — uniform 4/5 tiles,
no fixed-height hero card — so card sizing is consistent across every page. */
/* Both home strips show exactly three items, so lock to three even columns that
span the row (auto-fill left 3 cards narrow and bunched on wide screens). */
.grid--featured,
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Latest drops: a more prominent strip of larger cards (reference layout). */
.grid--latest { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.25rem); }
@media (max-width: 900px) {
.grid--3, .grid--featured, .grid--latest { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
/* Phones: keep two products side by side (not one at a time) with a tighter gap. */
.grid--3, .grid--featured, .grid--latest { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.card__body { padding: 0.7rem 0.8rem 0.9rem; }
.card__title { font-size: 0.92rem; }
}
/* Cards share the page's grey; a slightly darker border + faint shadow keeps them
reading as distinct tiles instead of blending into the grey background. */
.card { display: block; background: var(--bg-grey); border: 1px solid #c2bfb7; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 120ms ease, box-shadow 120ms ease; }
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.18); border-color: var(--accent-pop); }
.card__media {
position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-alt);
}
/* Absolute-fill so the photo always covers the frame — height:100% alone doesn't
resolve reliably against an aspect-ratio box, which left a gap below the image. */
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--large .card__media { aspect-ratio: 4/5; }
.card__body { padding: 1rem 1.1rem 1.25rem; }
.card__meta {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted); margin: 0 0 0.4rem;
}
.card__meta-dot { margin: 0 0.4em; }
.card__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem; line-height: 1.35; }
.card__price { margin: 0; font-family: var(--font-mono); font-size: 14px; }
.card__sold-ago {
margin: 0.35rem 0 0; font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--ink-muted);
}
.item-detail__sold-ago {
margin: 0.6rem 0 0; font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--ink-muted); text-align: center;
}
.badge {
position: absolute; top: 0.75rem; left: 0.75rem;
background: var(--bg); color: var(--ink);
padding: 4px 8px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase;
}
.badge--sold { background: var(--hot); color: #fff; }
.badge--reserved { background: var(--ink); color: var(--bg); }
.badge--showcase { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }
/* --- Item detail --- */
.item-detail { padding: clamp(2rem, 4vw, 4rem) 0; }
.item-detail__inner {
display: grid;
/* Photo column matches the info/text column (equal halves). */
grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
@media (max-width: 900px) {
.item-detail__inner { grid-template-columns: 1fr; }
.item-detail__info { position: static; }
}
/* Gallery: a CSS-only image switcher (no JS). Hidden radios decide which large
"slide" shows in the stage; thumbnail labels select them, and the active thumbnail
is outlined so you always know which photo you're on. Supports up to 6 photos. */
.item-detail__gallery { display: grid; gap: 0.6rem; align-content: start; }
.pimg-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.pimg-stage { display: grid; }
.pimg-slide { grid-area: 1 / 1; display: none; }
/* Shared framed tile (the active slide + the empty state), matching the product cards. */
.item-detail__media, .pimg-slide {
aspect-ratio: 1 / 1; overflow: hidden;
background: var(--bg-grey);
border: 1px solid #c2bfb7; border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.item-detail__media img, .pimg-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Show the slide whose radio is checked. */
#pimg-0:checked ~ .pimg-stage .pimg-slide:nth-child(1),
#pimg-1:checked ~ .pimg-stage .pimg-slide:nth-child(2),
#pimg-2:checked ~ .pimg-stage .pimg-slide:nth-child(3),
#pimg-3:checked ~ .pimg-stage .pimg-slide:nth-child(4),
#pimg-4:checked ~ .pimg-stage .pimg-slide:nth-child(5),
#pimg-5:checked ~ .pimg-stage .pimg-slide:nth-child(6) { display: block; }
/* Thumbnail strip. */
.pimg-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.pthumb {
aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;
border: 1px solid #c2bfb7; border-radius: 4px;
opacity: 0.5; transition: opacity 0.15s ease;
}
.pthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pthumb:hover { opacity: 0.85; }
/* Active thumbnail: full opacity + orange outline so the current photo is obvious. */
#pimg-0:checked ~ .pimg-thumbs .pthumb:nth-child(1),
#pimg-1:checked ~ .pimg-thumbs .pthumb:nth-child(2),
#pimg-2:checked ~ .pimg-thumbs .pthumb:nth-child(3),
#pimg-3:checked ~ .pimg-thumbs .pthumb:nth-child(4),
#pimg-4:checked ~ .pimg-thumbs .pthumb:nth-child(5),
#pimg-5:checked ~ .pimg-thumbs .pthumb:nth-child(6) {
opacity: 1; outline: 2px solid var(--accent-pop); outline-offset: -2px;
}
.item-detail__media--empty {
aspect-ratio: 4/5; background: var(--bg-alt);
display: grid; place-items: center; color: var(--ink-muted);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
}
.item-detail__info { position: sticky; top: 84px; }
.item-detail__title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1; letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0.25rem 0 0.75rem;
}
.item-detail__price {
font-family: var(--font-mono); font-size: 22px;
margin: 0 0 1.5rem;
}
/* Subtle spec table: hairline row dividers, muted mono labels — reads as a tidy
table without heavy borders or shading. */
.spec {
display: grid; grid-template-columns: auto 1fr;
margin: 1.75rem 0 0.75rem; border-top: 1px solid var(--rule);
}
.spec dt, .spec dd {
padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
font-size: 0.92rem;
/* Flex-center the text but let the cell stretch to the full row height, so the
label and value border-bottoms line up into one unbroken divider — even when
the two sides differ in height (e.g. the larger Athlete value). */
display: flex; align-items: center;
}
.spec dt {
font-family: var(--font-mono); font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted);
padding-right: 1.75rem; white-space: nowrap;
}
.spec dd { margin: 0; font-family: var(--font-mono); }
/* Athlete name — same mono face as the other descriptors, just a touch larger. */
.spec__athlete { font-size: 1rem; font-weight: 600; }
.item-detail__section { margin: 2rem 0; }
/* First section (Description) sits right under the spec table — pull it up so it
doesn't float a full 2rem below the condition row. */
.spec + .item-detail__section { margin-top: 0.85rem; }
.item-detail__section h2 {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted); margin: 0 0 0.6rem;
}
/* Description / provenance as solid body copy in the full ink colour — a paragraph
of thin mono reads noticeably greyer than the rest, so use the sans body face. */
.item-detail__section p {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
font-size: 0.97rem; line-height: 1.7;
}
/* "Recommended for you" — related pieces below the product detail. A hairline rule
separates it from the gallery/info above; the grid + cards are the shared ones. */
.item-related { border-top: 1px solid var(--rule); margin-top: clamp(2rem, 5vw, 4rem); }
/* --- Empty / utility --- */
.empty { padding: 3rem 0; text-align: left; max-width: 56ch; }
.empty__note { margin: 1rem 0 0; max-width: 46ch; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.65; }
/* "First drop coming soon" section: centered, filling the full width (not the
narrow 56ch cap), with a moderate height. Word size is unchanged. */
.coming-soon { padding: clamp(2.75rem, 5vw, 4.5rem) 0; background: var(--bg-grey); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.coming-soon .empty { padding: 1rem 0; max-width: none; text-align: center; }
.coming-soon .empty__note { max-width: 52ch; margin-left: auto; margin-right: auto; }
/* Full copy on desktop, the short version only on mobile. */
.empty__note--short { display: none; }
@media (max-width: 640px) {
.coming-soon { padding: clamp(2.5rem, 8vw, 3.75rem) 0; }
.coming-soon .display { font-size: clamp(1.7rem, 9vw, 2.4rem); }
.coming-soon .eyebrow { display: none; }
.empty__note--full { display: none; }
.empty__note--short { display: block; }
}
/* --- Footer --- */
.site-footer {
margin-top: 4rem;
background: var(--ink); color: var(--bg);
padding: 3rem 0 1.5rem;
}
.site-footer .brand__word { color: var(--bg); }
.site-footer__inner {
max-width: none; /* full-bleed like the header */
/* Centered cluster: brand in the middle, Shop just left of it, Legal just right.
cols uses display:contents so Shop/Legal become flex items of the inner row,
letting the brand sit between them via `order`. */
display: flex; justify-content: center; align-items: flex-start; gap: 4rem;
}
.site-footer__brand { order: 2; text-align: center; }
.site-footer__brand p { color: rgba(255,255,255,0.6); max-width: 32ch; margin: 0.75rem auto 0; }
.site-footer__cols { display: contents; }
.site-footer__cols > div:first-child { order: 1; } /* Shop — left of brand */
.site-footer__cols > div:last-child { order: 3; } /* Legal — right of brand */
.site-footer__cols h4 {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(255,255,255,0.6); margin: 0 0 0.75rem;
}
.site-footer__cols a {
display: block; padding: 0.25rem 0; color: rgba(255,255,255,0.85); font-size: 0.95rem;
}
.site-footer__legal {
max-width: none; /* divider spans the full width, edge to edge */
display: flex; justify-content: space-between; align-items: center;
margin-top: 2.5rem; padding-top: 1.25rem;
border-top: 1px solid rgba(255,255,255,0.08);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.site-footer__legal a { color: rgba(255,255,255,0.85); }
@media (max-width: 760px) {
/* Stack vertically, centered: brand on top, then Shop, then Legal. */
.site-footer__inner { flex-direction: column; align-items: center; gap: 1.75rem; }
.site-footer__brand, .site-footer__cols > div { order: 0; } /* source order: brand, Shop, Legal */
.site-footer__cols > div { text-align: center; }
}
/* --- Drop List band (above footer) — quiet, confident --- */
.drop-list {
background: var(--bar-bg); /* translucent glass — a touch more solid than the header */
-webkit-backdrop-filter: saturate(160%) blur(16px);
backdrop-filter: saturate(160%) blur(16px);
color: var(--ink);
border-top: 4px solid var(--accent-pop);
}
/* Sharpen text on the glassy header + banner so it reads over content behind. */
.site-nav a, .brand__word, .drop-list__title, .drop-list__sub {
text-shadow: 0 1px 2px var(--bg);
}
/* Permanent variant (non-home pages): the same full-width banner, but sitting in
the page flow (below the support block) instead of fixed/scroll-revealed. Two
classes so it beats the fixed/animated .drop-list rules in the media queries. */
.drop-list.drop-list--static {
position: static; transform: none; animation: none;
max-height: none; overflow: visible; box-shadow: none; z-index: auto;
}
.dl-close { text-decoration: none; }
.drop-list__tag {
display: inline-block; margin: 0 0 0.75rem;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: #fff; background: var(--accent-pop);
padding: 0.3rem 0.6rem;
}
.drop-list__inner {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: center;
padding-top: clamp(2.5rem, 4vw, 3.5rem);
padding-bottom: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 820px) {
.drop-list__inner {
grid-template-columns: 1fr auto;
gap: 3rem;
}
}
.drop-list__pitch { max-width: 38rem; text-align: center; margin: 0 auto; }
.drop-list__sub--short { display: none; }
.drop-list__title {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: clamp(2rem, 4.2vw, 3.25rem);
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
}
.drop-list__sub {
margin: 0;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.5;
}
.drop-list__form {
display: flex;
width: 100%;
max-width: 460px;
background: var(--card-bg);
border: 1px solid var(--rule);
transition: border-color 150ms ease, background 150ms ease;
}
.drop-list__form:focus-within {
border-color: var(--ink);
}
.drop-list__form input[type=email] {
flex: 1; min-width: 0;
background: transparent;
border: 0;
outline: none;
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
padding: 1rem 1.1rem;
}
.drop-list__form input[type=email]::placeholder { color: var(--ink-muted); }
.drop-list__form button {
background: var(--accent-pop);
color: #fff;
border: 0;
padding: 0 1.75rem;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 120ms ease;
}
.drop-list__form button:hover { background: var(--accent-pop-deep); }
.drop-list__fineprint {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad) clamp(1.5rem, 3vw, 2rem);
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.drop-list--subscribed .drop-list__title { opacity: 0.9; }
.drop-list--subscribed .drop-list__sub { opacity: 0.65; }
.drop-list__manage {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
align-self: center;
}
.drop-list__manage:hover { color: var(--accent-pop); text-decoration: underline; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
/* --- Account page --- */
.account { padding: clamp(2rem, 4vw, 4rem) 0 5rem; }
.account__container { max-width: 1080px; }
.account__card {
background: var(--card-bg);
border: 1px solid var(--rule);
padding: clamp(1.25rem, 3vw, 2.25rem);
margin-top: 1.25rem;
}
.account__identity { display: flex; gap: 1rem; align-items: center; }
.account__identity-text { min-width: 0; flex: 1; }
.account__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.account__name { margin: 0; font-weight: 600; word-break: break-word; }
.account__email {
margin: 0.15rem 0 0;
font-family: var(--font-mono); font-size: 13px;
color: var(--ink-muted);
word-break: break-all;
}
.account__h2 {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted);
margin: 0 0 1rem;
}
.account__empty { color: var(--ink-soft); margin: 0; }
.account__orders { list-style: none; margin: 0; padding: 0; }
.account-order {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0.85rem;
align-items: center;
padding: 0.75rem 0;
border-top: 1px solid var(--rule);
}
.account-order:first-child { border-top: none; padding-top: 0; }
.account-order__media img {
width: 64px; height: 64px; object-fit: cover; display: block;
background: var(--bg-alt);
}
.account-order__title {
display: block; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-order__meta {
margin: 0.25rem 0 0;
display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
font-size: 0.9rem;
}
.account-order__price {
margin: 0;
font-family: var(--font-mono); font-weight: 600;
}
.account__signout-wrap {
margin-top: 1.5rem;
}
.prefs { padding: 0; }
.prefs h2 {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted); margin: 0 0 1rem;
}
.toggle {
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding: 1rem;
border: 1px solid var(--rule);
background: var(--bg-alt);
cursor: pointer;
}
.toggle input[type=checkbox] {
width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink);
}
.toggle__label { display: block; }
.toggle__label strong { display: block; margin-bottom: 0.2rem; }
.toggle__hint { color: var(--ink-soft); font-size: 0.9rem; }
.prefs__actions { margin-top: 1.25rem; }
.prefs__status { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.prefs__status--on { color: var(--ink); }
.prefs__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4f8f4a; margin-right: 0.4rem; vertical-align: middle; }
.prefs__actions--confirm { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.prefs__actions--confirm form { margin: 0; }
.account__signout {
margin: 1.5rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
}
.account__signout a { color: var(--ink-muted); }
.account__signout a:hover { color: var(--ink); }
/* --- Legal (privacy, terms) --- */
.legal { padding: clamp(2rem, 4vw, 4rem) 0 5rem; }
.legal__container { max-width: 760px; }
.legal__container h1 { margin-top: 0.25rem; margin-bottom: 0.5rem; }
.legal__meta {
font-family: var(--font-mono); font-size: 12px;
color: var(--ink-muted); letter-spacing: 0.04em;
margin: 0 0 2rem; padding-bottom: 1.5rem;
border-bottom: 1px solid var(--rule);
}
.legal__container h2 {
font-family: var(--font-display);
font-size: 1.4rem; letter-spacing: 0.04em;
text-transform: uppercase;
margin: 2.25rem 0 0.6rem;
}
.legal__container h3 {
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-muted);
margin: 1.5rem 0 0.4rem;
}
.legal__container p, .legal__container li { line-height: 1.65; }
.legal__container ul { padding-left: 1.2rem; margin: 0.5rem 0 1rem; }
.legal__container li { margin: 0.3rem 0; }
.legal__container address {
font-style: normal;
background: var(--bg-alt); border: 1px solid var(--rule);
padding: 1rem 1.25rem; margin-top: 0.75rem;
font-family: var(--font-mono); font-size: 13px;
}
/* --- Admin --- */
.admin { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.admin__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; }
.admin__counts {
display: flex; flex-wrap: wrap; gap: 1.5rem;
padding: 1rem 1.25rem; border: 1px solid var(--rule); background: var(--card-bg);
margin-bottom: 1.5rem;
font-family: var(--font-mono); font-size: 13px;
}
.admin__counts strong { font-family: var(--font-display); font-size: 22px; margin-right: 0.4rem; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--rule); }
.admin-table th, .admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.admin-table th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); background: var(--bg-alt); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table__thumb img { width: 48px; height: 48px; object-fit: cover; background: var(--bg-alt); }
.admin-table__empty { text-align: center; padding: 2rem; color: var(--ink-muted); }
.muted { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.pill {
display: inline-block; padding: 2px 8px;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink);
border: 1px solid var(--rule); background: var(--bg);
}
/* Each status carries a distinct darker text color so they don't read as
near-identical pale chips on the inventory table. */
.pill--available { background: #e6f0e2; border-color: #9cc389; color: #2f6b2a; }
.pill--reserved { background: #fdf1d7; border-color: #e3b75a; color: #8a5a00; }
.pill--sold { background: #f7d7d3; border-color: #d99a93; color: #a3271c; }
.pill--draft { background: var(--bg-alt); border-color: var(--rule); color: var(--ink-soft); }
.pill--showcase { background: #e7eef5; border-color: #93b4d4; color: #1f4a73; } /* blue "display only" */
.pill--refunded { background: #fbe5c2; border-color: #e3b75a; color: #6b4e00; } /* amber warning */
.pill--incart { background: #fbdcdc; border-color: #d97b7b; color: #9a1c1c; font-weight: 600; } /* red "in cart" light */
.util-link--disabled { opacity: 0.45; cursor: not-allowed; text-decoration: none; }
/* ---- Color-coded admin rows ---------------------------------------------- */
/* A left stripe (and, for action-needed order rows, a soft tint) so status
reads at a glance. Colors echo the .pill / .flash palette already in use. */
.admin-row--ship td { background: #fdf1d7; box-shadow: inset 3px 0 0 #e3b75a; } /* awaiting shipment — amber, stands out */
.admin-row--shipped td { background: #eef3ea; box-shadow: inset 3px 0 0 #7ba05b; } /* shipped — calm green */
/* Inventory rows: stripe only (the status pill already carries the fill color). */
.admin-row--sold td { box-shadow: inset 3px 0 0 var(--hot); }
.admin-row--reserved td { box-shadow: inset 3px 0 0 #e3b75a; }
.admin-row--available td { box-shadow: inset 3px 0 0 #7ba05b; }
.admin-row--draft td { box-shadow: inset 3px 0 0 #cfcabb; }
/* Status legend (orders page) */
.admin-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1.25rem;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
text-transform: uppercase; letter-spacing: 0.08em; }
.admin-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.admin-legend__swatch { width: 12px; height: 12px; border: 1px solid var(--rule); display: inline-block; }
.admin-legend__swatch--ship { background: #fdf1d7; border-color: #e3b75a; }
.admin-legend__swatch--shipped { background: #eef3ea; border-color: #7ba05b; }
.admin-form { background: var(--card-bg); border: 1px solid var(--rule); padding: 1.5rem; margin-bottom: 2rem; }
.admin-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.25rem; }
.admin-form__full { display: block; margin-top: 1.25rem; }
.admin-form label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.admin-form input, .admin-form select, .admin-form textarea {
font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
padding: 0.55rem 0.7rem; border: 1px solid var(--rule); background: var(--bg);
text-transform: none; letter-spacing: 0;
}
.admin-form textarea { resize: vertical; min-height: 110px; }
.admin-form__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
@media (max-width: 760px) {
.admin-form__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.admin-form__grid { grid-template-columns: 1fr; }
}
.admin__photos { background: var(--card-bg); border: 1px solid var(--rule); padding: 1.5rem; }
.admin__photos h2 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); margin: 0 0 1rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.photo-grid__cell { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-alt); }
.photo-grid__cell img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid__hint { margin: 0 0 0.75rem; }
/* Reorder / remove controls overlaid along the bottom of each thumbnail. */
.photo-grid__tools {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-between; gap: 0.4rem;
padding: 0.4rem; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
}
.photo-grid__tools form { display: flex; gap: 0.3rem; margin: 0; }
.photo-grid__tools .btn { padding: 0.3rem 0.5rem; font-size: 11px; background: rgba(255,255,255,0.92); border-color: transparent; }
.photo-grid__tools .btn--danger { background: var(--hot); color: #fff; }
.photo-grid__tools .btn[disabled] { opacity: 0.4; cursor: default; }
.upload-form__hint { margin: 0.6rem 0 0; }
.upload-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; padding-top: 1rem; border-top: 1px solid var(--rule); }
/* Admin photo pickers — a tidy dashed dropzone with a styled button, instead of
the raw browser "Choose File / no file chosen" control. (The JS preview above
shows what's actually selected, so the native control just needs to look clean.)
These are the only file inputs on the site. ::file-selector-button and the older
::-webkit-file-upload-button are kept as SEPARATE rules on purpose — combining a
standard and vendor pseudo-element in one selector list voids the whole rule. */
.admin-form input[type=file], .upload-form input[type=file] {
display: block; width: 100%; box-sizing: border-box; flex: 1 1 100%;
padding: 0.6rem; border: 1px dashed var(--rule); border-radius: 7px;
background: var(--bg-alt); color: var(--ink-soft);
font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.admin-form input[type=file]:hover, .upload-form input[type=file]:hover {
border-color: var(--accent-pop); background: var(--bg);
}
.admin-form input[type=file]::file-selector-button, .upload-form input[type=file]::file-selector-button {
margin-right: 0.85rem; padding: 0.5rem 0.95rem;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: #fff; background: var(--ink); border: 0; border-radius: 5px; cursor: pointer;
}
.admin-form input[type=file]:hover::file-selector-button, .upload-form input[type=file]:hover::file-selector-button { background: var(--accent-pop); }
.admin-form input[type=file]::-webkit-file-upload-button, .upload-form input[type=file]::-webkit-file-upload-button {
margin-right: 0.85rem; padding: 0.5rem 0.95rem;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
color: #fff; background: var(--ink); border: 0; border-radius: 5px; cursor: pointer;
}
.admin-form input[type=file]:hover::-webkit-file-upload-button, .upload-form input[type=file]:hover::-webkit-file-upload-button { background: var(--accent-pop); }
.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; }
.flash--ok { background: #e6f0e2; border-color: #b8d3aa; }
.flash--err { background: #f7d7d3; border-color: #d99a93; }
.flash--warn { background: #fdf1d7; border-color: #ecd098; }
/* --- Cart --- */
.util-link--cart, .util-link--account { display: inline-flex; align-items: center; gap: 0.4em; line-height: 1; }
.cart-badge {
display: inline-block; min-width: 1.4em; padding: 0 0.45em;
background: var(--ink); color: var(--bg);
border-radius: 999px; font-family: var(--font-mono); font-size: 11px;
text-align: center; line-height: 1.5;
}
.cart { padding: 3rem 0 4rem; }
.cart__empty { padding: 3rem 0; text-align: center; }
.cart__empty p { color: var(--ink-muted); margin-bottom: 1rem; }
.cart-policy {
border: 1px solid var(--rule); background: var(--bg-alt);
padding: 0.9rem 1.1rem; margin-bottom: 2rem; max-width: 60ch;
}
.cart-policy__label {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-muted); margin: 0 0 0.35rem;
}
.cart-policy__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.cart-policy__text a { text-decoration: underline; text-underline-offset: 2px; }
.cart-list { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--rule); }
.cart-row {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 1rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--rule);
align-items: center;
}
.cart-row__media img { width: 96px; height: 96px; object-fit: cover; background: var(--bg-alt); }
.cart-row__title { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; margin: 0.15rem 0; }
.cart-row__timer { color: var(--ink-muted); font-family: var(--font-mono); font-size: 12px; margin: 0.25rem 0 0; }
.cart-row__countdown { color: var(--ink); }
.cart-row__right { text-align: right; }
.cart-row__price { font-family: var(--font-display); font-size: 22px; margin: 0 0 0.5rem; }
.cart-summary { max-width: 420px; margin-left: auto; }
.cart-summary__row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 14px; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.cart-summary__note { color: var(--ink-muted); font-size: 12px; margin: 0.5rem 0 1rem; text-align: right; }
.cart-summary__continue { text-align: center; margin-top: 1rem; }
.link-button {
background: none; border: none; padding: 0; cursor: pointer;
color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px;
text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--ink); }
.link-button--danger { color: var(--hot); }
.link-button--danger:hover { color: #8e221a; }
/* --- Admin: archived state + danger zone --- */
.btn--danger { background: var(--hot); color: #fff; }
.btn--danger:hover { background: #8e221a; color: #fff; }
.admin-table__row--archived td { opacity: 0.55; }
/* Keep the td a real table-cell (flex on a td breaks row rendering); space
the action links/forms with inline-block + margins instead of flex gap. */
.admin-table__actions { white-space: nowrap; }
.admin-table__actions .util-link,
.admin-table__actions form { display: inline-block; vertical-align: baseline; margin: 0; }
.admin-table__actions > * + * { margin-left: 0.75rem; }
.pill--archived { background: var(--bg-alt); color: var(--ink-muted); }
.admin-form__danger {
margin-top: 2.5rem; padding: 1.25rem; border: 1px dashed var(--rule);
background: var(--bg-alt);
}
.admin-form__danger .muted { font-size: 12px; margin: 0.75rem 0 0; }
.btn--sm { padding: 0.45rem 0.85rem; font-size: 12px; }
.admin__inline-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.admin__inline-form input { padding: 0.45rem 0.6rem; font: inherit; border: 1px solid var(--rule); }
details > summary { cursor: pointer; }
/* --- Staff login chooser --- */
.admin-login__container { max-width: 920px; padding-top: 3rem; padding-bottom: 4rem; }
.admin-login__panels {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
margin-top: 1.5rem;
}
@media (min-width: 760px) {
.admin-login__panels {
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
}
}
.admin-login__panel {
background: var(--card-bg);
border: 1px solid var(--rule);
padding: 1.5rem;
}
.admin-login__h2 {
font-family: var(--font-display); text-transform: uppercase;
letter-spacing: 0.04em; font-size: 1.4rem; margin: 0 0 0.5rem;
}
.admin-login__sep {
display: flex; align-items: center; justify-content: center;
color: var(--ink-muted); font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.admin-login__sep::before,
.admin-login__sep::after {
content: ""; flex: 1; height: 1px; background: var(--rule);
}
.admin-login__sep span { padding: 0 0.75rem; }
@media (max-width: 759px) {
.admin-login__sep::before, .admin-login__sep::after { display: none; }
}
.admin-login__form { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem; }
.admin-login__form label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.admin-login__form input { display: block; width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.85rem; font: inherit; border: 1px solid var(--rule); background: var(--bg); }
.admin-login__form input:focus { outline: none; border-color: var(--ink); background: #fff; }
/* --- Support block (footer contact form) --- */
.support-block {
background: #c96c30; /* brand orange, a touch lighter than the accent */
border-top: 1px solid #b35e26;
border-bottom: 1px solid #b35e26;
padding: 0.85rem 0;
}
.support-block__details summary {
list-style: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.15rem 0;
}
.support-block__details summary::-webkit-details-marker { display: none; }
.support-block__details summary::after {
content: "+ Open";
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
margin-top: 0.25rem;
}
.support-block__details[open] summary::after { content: "− Close"; }
.support-block__title {
font-family: var(--font-display);
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
}
.support-block__hint {
color: rgba(255,255,255,0.85);
font-size: 0.95rem;
}
.support-block__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-top: 1.25rem;
max-width: 56rem;
}
.support-block__form textarea,
.support-block__form button {
grid-column: 1 / -1;
}
.support-block__form input,
.support-block__form textarea {
width: 100%;
padding: 0.75rem 0.85rem;
font: inherit;
border: 1px solid #b35e26;
background: #fff; /* crisp white fields on the orange block (both modes) */
color: #1a1814;
}
.support-block__form input:focus,
.support-block__form textarea:focus {
outline: none;
border-color: var(--ink);
background: #fff;
}
.support-block__form textarea { resize: vertical; min-height: 7rem; }
.support-block__form button { justify-self: start; }
@media (max-width: 600px) {
.support-block__form { grid-template-columns: 1fr; }
}
.support-thanks {
padding: 4rem 0 5rem;
max-width: 44rem;
}
.support-thanks__h1 {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 2rem;
margin: 0 0 1rem;
}
.support-thanks__errors {
border-left: 3px solid #c62828;
padding: 0.5rem 0 0.5rem 1rem;
margin: 1rem 0;
color: #b71c1c;
}
.cart-summary__row--total {
font-size: 16px;
font-weight: 600;
border-top: 2px solid var(--ink);
margin-top: 0.5rem;
}
/* --- Header mobile tightening (post-redesign 2026-05-21) --- */
@media (max-width: 560px) {
.site-header__inner { gap: 0.75rem; height: 56px; }
.site-header__util { gap: 1.1rem; }
.brand__word { font-size: 18px; }
.brand__mark { font-size: 15px; padding: 3px 6px; }
.mobile-nav__checkbox:checked ~ .mobile-nav { max-height: calc(100vh - 56px); }
}
@media (max-width: 380px) {
.site-header__util { gap: 0.85rem; }
}
/* --- Comprehensive mobile scale-down: keep everything compact on phones --- */
@media (max-width: 560px) {
/* Scale all text down a notch on phones */
html { font-size: 15px; }
body { font-size: 14.5px; }
/* Header: cart is just the icon + badge (no "Cart" label) */
.util-link__label { display: none; }
.brand__word { font-size: 16px; }
/* "Get the drop list" banner */
.drop-list__inner { padding-top: 1.5rem; padding-bottom: 1.5rem; gap: 1rem; }
.drop-list__title { font-size: 1.45rem; margin-bottom: 0.35rem; }
.drop-list__sub { font-size: 0.85rem; }
.drop-list__form { max-width: none; }
.drop-list__form input[type=email] { padding: 0.6rem 0.75rem; font-size: 14px; }
.drop-list__fineprint { font-size: 10px; }
/* Help / support form — black on mobile, flush into the (also black) footer */
.support-block { padding: 0.9rem 0; background: #c96c30; border-top: 1px solid #b35e26; border-bottom: none; }
.support-block__title { font-size: 1.25rem; color: #fff; }
.support-block__hint { font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.support-block__details summary::after { color: rgba(255,255,255,0.8); }
.support-block__form { gap: 0.55rem; margin-top: 0.85rem; }
/* Footer — stack vertically; a very thin breaker between it and the black help block */
.site-footer { padding: 1.75rem 0 1.5rem; margin-top: 0; border-top: 1px solid rgba(255,255,255,0.12); }
.site-footer__inner { gap: 2rem; }
.site-footer__cols { flex-direction: column; gap: 1.75rem; align-items: flex-start; }
.site-footer__cols h4 { margin-bottom: 0.6rem; }
.site-footer__cols a { font-size: 0.9rem; padding: 0.35rem 0; }
.site-footer__brand p { font-size: 0.85rem; }
.site-footer__legal { margin-top: 2rem; padding-top: 1.25rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
/* Let section headers (title + link) wrap rather than cram side by side */
.section__head { flex-wrap: wrap; gap: 0.4rem 1rem; }
/* A bit more air between the brand chip and word in the header */
.site-header__inner { gap: 0.6rem; }
}
/* Drop-list dismiss control (a no-JS link to /drop-list/dismiss). Hidden by
default; shown as the corner "×" only when the bar is the bottom popup below. */
.dl-close { display: none; }
@keyframes dlSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 760px) {
/* On mobile the drop-list is a dismissible bottom popup, taken out of the page
flow so it doesn't clutter the page. Slides up shortly after you land/scroll. */
.drop-list {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
max-height: 72vh; overflow-y: auto;
box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.6);
animation: dlSlideUp 0.45s ease 0.7s both;
}
.dl-close {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 0.4rem; right: 0.5rem; z-index: 2;
width: 2rem; height: 2rem; font-size: 1.6rem; line-height: 1;
color: var(--ink-soft); cursor: pointer;
}
.drop-list__inner { padding: 1.4rem var(--pad) 1.25rem; }
.drop-list__fineprint { display: none; }
/* Shorter + much smaller body text in the mobile popup */
.drop-list__sub--full { display: none; }
.drop-list__sub--short { display: block; }
.drop-list__sub { font-size: 0.72rem; line-height: 1.4; }
.drop-list__title { font-size: 1.3rem; }
}
/* Desktop: the drop-list is the SAME dismissible bottom popup as mobile, and pops
up as you scroll down the page (not just when you reach the very bottom). */
@media (min-width: 761px) {
.drop-list {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
max-height: 60vh; overflow-y: auto;
box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.55);
transform: translateY(100%); /* parked off-screen until revealed */
}
.dl-close {
display: flex; align-items: center; justify-content: center;
position: absolute; top: 0.5rem; right: 0.8rem; z-index: 2;
width: 2rem; height: 2rem; font-size: 1.6rem; line-height: 1;
color: var(--ink-soft); cursor: pointer;
}
/* Reveal tied to page scroll: hidden at the top, slides fully in by ~16% down.
Longhands (not the `animation` shorthand) so duration stays `auto` and maps
to the scroll range instead of time. */
@supports (animation-timeline: scroll()) {
.drop-list {
animation-name: dlSlideUp;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 80px 16%;
}
}
/* Browsers without scroll timelines: time-delayed slide-up, like the mobile popup. */
@supports not (animation-timeline: scroll()) {
.drop-list { animation: dlSlideUp 0.45s ease 0.8s both; }
}
/* Reduced motion: just show it pinned, no slide. */
@media (prefers-reduced-motion: reduce) {
.drop-list { animation: none; transform: none; }
}
}
/* --- Touch-target / mobile polish for forms & buttons --- */
@media (max-width: 560px) {
.btn { padding: 0.85rem 1.2rem; }
.account-order { grid-template-columns: 56px 1fr; row-gap: 0.25rem; }
.account-order__media img { width: 56px; height: 56px; }
.account-order__price { grid-column: 2; }
}
/* --- Checkout split layout (order panel + Stripe form) --- */
#checkout-split { gap: 2.5rem; align-items: flex-start; margin-top: 1rem; }
#checkout-split #stripe-checkout-container { flex: 1; min-width: 0; }
.checkout-order-panel { width: 280px; flex-shrink: 0; }
.checkout-order-panel > .eyebrow { margin-bottom: 1rem; }
.checkout-order-items { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checkout-order-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding: 0.75rem 0;
border-top: 1px solid var(--rule);
}
.checkout-order-item:last-child { border-bottom: 1px solid var(--rule); }
.checkout-order-item__img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; background: var(--bg-alt); }
.checkout-order-item__title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; margin: 0 0 0.3rem; }
.checkout-order-item__price { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin: 0; }
.checkout-order-totals { font-family: var(--font-mono); font-size: 13px; }
.checkout-order-totals__row { display: flex; justify-content: space-between; padding: 0.45rem 0; border-top: 1px solid var(--rule); color: var(--ink-muted); }
.checkout-order-totals__row--total { font-size: 15px; font-weight: 600; color: var(--ink); border-top: 2px solid var(--ink); margin-top: 0.25rem; }
@media (max-width: 720px) {
#checkout-split { flex-direction: column; }
.checkout-order-panel { width: 100%; }
}
/* --- Admin tabs --- */
.admin-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin-bottom: 2rem; }
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 0.6rem 1.25rem; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.admin-tab:hover { color: var(--ink); }
.admin-tab--active { color: var(--ink); border-bottom-color: var(--ink); }
.admin-tab__badge { background: var(--ink); color: var(--bg); font-size: 10px; padding: 0.15em 0.5em; border-radius: 2px; }
/* --- Admin orders page --- */
.admin-section-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); margin: 0 0 0.75rem; }
.admin-empty { color: var(--ink-muted); margin-top: 2rem; }
.admin-table--muted td { color: var(--ink-muted); }
.admin-table--muted strong { color: var(--ink); }
.admin-ship-address { font-size: 0.85em; line-height: 1.5; }
.admin-ship-actions { min-width: 160px; }
/* --- Ship modal --- */
.ship-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; }
.ship-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ship-modal__box { position: relative; background: var(--card-bg); border: 1px solid var(--rule); width: 100%; max-width: 420px; padding: 2rem; z-index: 1; }
.ship-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.ship-modal__title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.02em; margin: 0; }
.ship-modal__close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-muted); padding: 0.25rem; }
.ship-modal__close:hover { color: var(--ink); }
.ship-modal__order { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin: 0 0 1.5rem; }
.ship-modal__form { display: flex; flex-direction: column; gap: 0.5rem; }
.ship-modal__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.ship-modal__select, .ship-modal__input { padding: 0.6rem 0.75rem; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: 14px; width: 100%; }
.ship-modal__footer { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }
/* --- Admin: drop email page --- */
.admin-form__grid--1col { grid-template-columns: 1fr !important; }
.drop-checklist { display: flex; flex-direction: column; gap: 0; }
.drop-checklist__row {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.6rem 0.5rem;
border-bottom: 1px solid var(--rule);
cursor: pointer;
font-family: var(--font-body); font-size: 14px;
text-transform: none; letter-spacing: 0; color: var(--ink);
}
.drop-checklist__row:first-child { border-top: 1px solid var(--rule); }
.drop-checklist__row:hover { background: var(--bg-alt); }
.drop-checklist__row input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink); }
.drop-checklist__thumb { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; background: var(--bg-alt); }
.drop-checklist__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-checklist__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-send-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
padding: 1.25rem 1.5rem;
background: var(--bg-alt); border: 1px solid var(--rule);
}
.drop-send-bar__test { display: flex; gap: 0.5rem; align-items: center; flex: 1; min-width: 240px; }
.drop-send-bar__input {
flex: 1; padding: 0.55rem 0.75rem;
border: 1px solid var(--rule); background: var(--card-bg);
color: var(--ink); font-family: var(--font-body); font-size: 14px;
}
/* --- Admin: scrollable order table regions --- */
.admin-scroll-table {
max-height: 420px;
overflow-y: auto;
border: 1px solid var(--rule);
/* keep thead sticky inside the scroll box */
}
.admin-scroll-table--archive {
max-height: 300px;
}
.admin-scroll-table .admin-table {
border: none; /* border lives on the wrapper */
}
.admin-scroll-table .admin-table thead th {
position: sticky;
top: 0;
background: var(--bg-alt);
z-index: 1;
box-shadow: 0 1px 0 var(--rule);
}
.admin-scroll-table--inventory { max-height: 65vh; }
/* Admin filter bar (inventory + orders) — collapsible search / status / sort. */
.admin-filterbar { margin: 1.25rem 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--card-bg); }
.admin-filterbar__summary {
cursor: pointer; list-style: none;
padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
}
.admin-filterbar__summary::-webkit-details-marker { display: none; }
.admin-filterbar__summary::after { content: "\25BE"; transition: transform 0.2s ease; color: var(--ink-muted); }
.admin-filterbar[open] .admin-filterbar__summary::after { transform: rotate(180deg); }
.admin-filterbar__body { padding: 0.85rem 1rem 1rem; display: grid; gap: 0.85rem; border-top: 1px solid var(--rule); }
.admin-filterbar__search {
width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--rule);
background: var(--bg); font: inherit; font-size: 14px; border-radius: 5px;
}
.admin-filterbar__search:focus { outline: none; border-color: var(--ink); }
.admin-filterbar__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin-filterbar__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); min-width: 3.5rem; }
.admin-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-chip {
padding: 0.35rem 0.8rem; border: 1px solid var(--rule); background: var(--bg);
border-radius: 999px; font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; color: var(--ink-soft);
}
.admin-chip:hover { border-color: var(--ink); color: var(--ink); }
.admin-chip.is-active { background: var(--accent-pop); color: #fff; border-color: var(--accent-pop); }
.admin-filter__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.inv-tag { font-family: var(--font-mono); font-size: 12px; color: var(--accent-pop); background: rgba(181, 83, 31, 0.12); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
/* --- Mobile pass (2026-06-11): chips, cart rows, tap targets --- */
@media (max-width: 560px) {
/* Filter chips: one scrollable row, full-bleed, bigger tap targets */
.shop-filters {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-left: calc(-1 * var(--pad));
margin-right: calc(-1 * var(--pad));
padding-left: var(--pad);
padding-right: var(--pad);
}
.shop-filters::-webkit-scrollbar { display: none; }
.chip {
padding: 0.6rem 0.95rem;
white-space: nowrap;
flex-shrink: 0;
}
/* Cart rows: stack price/remove under the title instead of a cramped third column */
.cart-row { grid-template-columns: 72px 1fr; }
.cart-row__media img { width: 72px; height: 72px; }
.cart-row__title { font-size: 19px; }
.cart-row__right {
grid-column: 2;
display: flex; align-items: baseline; justify-content: space-between;
text-align: left;
}
.cart-row__price { font-size: 19px; margin: 0; }
.cart-row__remove-form .link-button { padding: 0.5rem 0; }
.cart-summary { max-width: none; }
/* Section headers: let the "view all" link wrap below the title */
.section__head { flex-wrap: wrap; }
/* Tighter card grid so browsing isn't all scrolling */
.grid { gap: 1.25rem; }
/* Spec table: narrower label column on small phones */
.spec { grid-template-columns: 7rem 1fr; }
}
/* --- Checkout success / order confirmation --- */
.confirm-sub {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-soft);
margin: 0.2rem 0 1rem;
line-height: 1.1;
}
.confirm-note { color: var(--ink-soft); max-width: 46ch; }
.order-confirm {
max-width: 540px;
margin: 2.25rem 0;
background: var(--card-bg);
border: 1px solid var(--rule);
padding: 1.5rem 1.75rem 1.6rem;
}
.order-confirm__num {
font-family: var(--font-mono); font-size: 13px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-soft);
margin: 0 0 0.9rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--rule);
}
.order-confirm__items { list-style: none; margin: 0; padding: 0; }
.order-confirm__items li {
display: flex; align-items: baseline;
justify-content: space-between; gap: 1.5rem;
padding: 0.6rem 0;
border-bottom: 1px dashed var(--rule);
}
.order-confirm__item-title { font-weight: 500; }
.order-confirm__item-price {
font-family: var(--font-mono); font-size: 14px;
white-space: nowrap;
}
.order-confirm__total {
display: flex; align-items: baseline;
justify-content: space-between; gap: 1.5rem;
margin: 1rem 0 0;
font-weight: 600;
}
.order-confirm__total-amt { font-family: var(--font-mono); font-size: 16px; }
.order-confirm__ship {
margin: 0.9rem 0 0;
padding-top: 0.9rem;
border-top: 1px solid var(--rule);
color: var(--ink-soft); font-size: 14px;
}
@media (max-width: 760px) {
.order-confirm { padding: 1.2rem 1.25rem 1.3rem; }
}
/* --- Cart hold countdown — pure CSS, no JS.
Animates a registered number from 1 -> 0 over the hold window (--cd seconds,
set inline on .cart-row) and renders minutes:seconds via CSS counters.
When it hits zero, the timer line swaps for the "hold expired" notice. --- */
@property --cd-p { syntax: ""; inherits: true; initial-value: 0; }
@keyframes cd-run { from { --cd-p: 1; } to { --cd-p: 0; } }
@keyframes cd-swap { to { visibility: hidden; } }
@keyframes cd-reveal { to { visibility: visible; } }
.cart-row__timer {
font-family: var(--font-mono); font-size: 12px;
color: var(--ink-soft); margin: 0.35rem 0 0;
}
.cart-row__hold-expired {
font-family: var(--font-mono); font-size: 12px;
color: var(--hot); margin: 0.2rem 0 0;
visibility: hidden;
}
.cart-row__hold-expired a { text-decoration: underline; text-underline-offset: 3px; }
/* Fallback for browsers without @property/round(): static wording, no tick. */
.cart-row__countdown::after { content: "a few more minutes"; }
@supports (width: round(down, 10px, 7px)) {
.cart-row__countdown { animation: cd-run calc(var(--cd, 0) * 1s) linear forwards; }
.cart-row__countdown::after {
counter-reset:
cd-m round(down, calc(var(--cd-p) * var(--cd, 0) / 60))
cd-s calc(round(down, calc(var(--cd-p) * var(--cd, 0)))
- 60 * round(down, calc(var(--cd-p) * var(--cd, 0) / 60)));
content: counter(cd-m) ":" counter(cd-s, decimal-leading-zero) " min";
}
.cart-row__timer { animation: cd-swap calc(var(--cd, 0) * 1s) step-end forwards; }
.cart-row__hold-expired { animation: cd-reveal calc(var(--cd, 0) * 1s) step-end forwards; }
}
.cart-summary__legal {
margin: 0.75rem 0 0;
font-size: 12px; color: var(--ink-muted);
text-align: center; line-height: 1.5;
}
.cart-summary__legal a { text-decoration: underline; text-underline-offset: 2px; }