/* ============================================================
MONO theme — foundations (Agent A)
Layer 1: tokens (light + dark)
Layer 2: reset + base typography
Layer 3: primitives (.btn, .container, .grid-12, hairlines, .ph)
Subsequent agents append their prefix-scoped blocks below.
============================================================ */
/* Self-hosted fonts (vendly-wd21). Replaces Google Fonts . */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('Inter-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('JetBrainsMono-Medium.woff2') format('woff2');
}
:root {
--mono-bg: #FFFFFF;
--mono-surface: #F4F4F4;
--mono-border: #000000;
--mono-rule: #E5E5E5;
--mono-text: #0A0A0A;
--mono-text-2: #2A2A2A;
--mono-muted: #999999;
--mono-placeholder: #EDEDED;
--mono-placeholder-2:#E0E0E0;
--mono-accent: #E1261C;
--mono-accent-fg: #FFFFFF;
--mono-container: 1440px;
--mono-gutter: 24px;
--mono-section-v: 120px;
--mono-radius: 0px;
--font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
--t-mega: clamp(72px, 10vw, 168px);
--t-display: clamp(48px, 6vw, 96px);
--t-h1: clamp(40px, 4.4vw, 64px);
--t-h2: clamp(28px, 2.6vw, 40px);
--t-h3: 22px;
--t-body: 16px;
--t-body-lg: 18px;
--t-small: 13px;
--t-micro: 11px;
}
[data-theme="dark"] {
--mono-bg: #0A0A0A;
--mono-surface: #141414;
--mono-border: #FFFFFF;
--mono-rule: #2A2A2A;
--mono-text: #FAFAFA;
--mono-text-2: #CCCCCC;
--mono-muted: #777777;
--mono-placeholder: #1A1A1A;
--mono-placeholder-2:#222222;
/* --mono-accent stays the same red — it's a system color, not theme color */
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
font-size: var(--t-body);
line-height: 1.5;
color: var(--mono-text);
background: var(--mono-bg);
font-feature-settings: "ss01", "cv11", "tnum" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
/* TYPOGRAPHY ----------------------------------------------- */
.t-mega { font-size: var(--t-mega); line-height: 0.92; letter-spacing: -0.04em; font-weight: 600; margin: 0; }
.t-display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.t-h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.025em; font-weight: 600; margin: 0; }
.t-h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.018em; font-weight: 600; margin: 0; }
.t-h3 { font-size: var(--t-h3); line-height: 1.20; letter-spacing: -0.010em; font-weight: 600; margin: 0; }
.t-eyebrow { font-size: var(--t-micro); line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mono-text); margin: 0; font-feature-settings: "tnum" 1; }
.t-num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.t-small { font-size: var(--t-small); line-height: 1.5; color: var(--mono-text-2); }
.t-muted { color: var(--mono-muted); }
.t-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; text-transform: uppercase; }
/* LAYOUT --------------------------------------------------- */
.container { max-width: var(--mono-container); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--mono-section-v) 0; }
.section-tight { padding: calc(var(--mono-section-v) * 0.5) 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--mono-gutter); }
/* BUTTONS -------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; border: 1px solid var(--mono-text); border-radius: 0; transition: background .15s linear, color .15s linear; cursor: pointer; }
.btn-solid { background: var(--mono-text); color: var(--mono-bg); }
.btn-solid:hover { background: var(--mono-bg); color: var(--mono-text); }
.btn-outline { background: var(--mono-bg); color: var(--mono-text); }
.btn-outline:hover { background: var(--mono-text); color: var(--mono-bg); }
.btn-ghost { background: transparent; color: var(--mono-bg); border-color: var(--mono-bg); }
.btn-ghost:hover { background: var(--mono-bg); color: var(--mono-text); }
.btn-link { height: auto; padding: 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; letter-spacing: 0; font-size: 14px; font-weight: 500; padding-bottom: 1px; }
.btn-block { width: 100%; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 12px; }
.btn-accent { background: var(--mono-accent); color: var(--mono-accent-fg); border-color: var(--mono-accent); }
/* PLACEHOLDERS -------------------------------------------- */
.ph { background: var(--mono-placeholder); position: relative; aspect-ratio: 1 / 1; }
.ph::before { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mono-muted); text-align: center; overflow: hidden; word-break: break-word; }
/* MOBILE breakpoint base ---------------------------------- */
@media (max-width: 979px) {
:root { --mono-section-v: clamp(48px, 6vw, 96px); --mono-gutter: 16px; }
.container { padding: 0 20px; }
}
/* === Agent B (chrome) appends below === */
/* ============================================================
MONO — chrome (Agent B)
Header / Footer / Announcement bar / Mobile drawer
Prefix: .mono-chrome__*
============================================================ */
/* ANNOUNCEMENT --------------------------------------------- */
.mono-chrome__announcement-band {
background: var(--mono-text);
color: var(--mono-bg);
}
.mono-chrome__announcement {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
padding: 10px 24px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
flex-wrap: wrap;
}
.mono-chrome__announcement-text { white-space: nowrap; }
.mono-chrome__announcement-sep { opacity: 0.5; }
/* HEADER --------------------------------------------------- */
.mono-chrome__header {
position: relative; /* NOT fixed/sticky — Rule 8 */
background: var(--mono-bg);
color: var(--mono-text);
border-bottom: 1px solid var(--mono-border);
z-index: 50;
}
.mono-chrome__header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 64px;
gap: 32px;
}
.mono-chrome__header-nav {
display: flex;
gap: 28px;
justify-content: flex-start;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
.mono-chrome__header-nav-link {
color: inherit;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: border-color 0.15s linear;
}
.mono-chrome__header-nav-link:hover,
.mono-chrome__header-nav-link[aria-current="page"] {
border-bottom-color: currentColor;
}
.mono-chrome__header-logo {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: inherit;
text-decoration: none;
white-space: nowrap;
text-align: center;
}
.mono-chrome__header-icons {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 18px;
}
/* ICON BUTTONS --------------------------------------------- */
.mono-chrome__icon-btn {
position: relative;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
border-radius: 0;
}
.mono-chrome__icon-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 1.4;
}
.mono-chrome__icon-btn:hover { opacity: 0.7; }
.mono-chrome__icon-btn:focus-visible {
outline: 1px solid currentColor;
outline-offset: 4px;
}
/* THEME TOGGLE --------------------------------------------- */
.mono-chrome__theme-toggle { position: relative; }
.mono-chrome__theme-toggle [data-toggle-light],
.mono-chrome__theme-toggle [data-toggle-dark] { display: block; }
/* HEADER SWITCHER (currency / locale) — Swiss-minimal text-button + dropdown */
.mono-chrome__header-switcher {
position: relative;
font-family: var(--mono-font-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.mono-chrome__header-switcher-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 0;
padding: 4px 2px;
margin: 0;
cursor: pointer;
color: inherit;
font: inherit;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.mono-chrome__header-switcher-toggle:hover { opacity: 0.7; }
.mono-chrome__header-switcher-toggle:focus-visible {
outline: 1px solid currentColor;
outline-offset: 3px;
}
.mono-chrome__header-switcher-toggle svg {
width: 8px;
height: 8px;
transition: transform 0.15s ease;
}
.mono-chrome__header-switcher-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 120px;
background: var(--mono-bg, #fff);
border: 1px solid var(--mono-border, #1a1a1a);
display: none;
z-index: 50;
padding: 4px 0;
}
.mono-chrome__header-switcher-menu.is-open { display: block; }
.mono-chrome__header-switcher-option {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
padding: 8px 12px;
margin: 0;
cursor: pointer;
color: inherit;
font: inherit;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mono-chrome__header-switcher-option:hover { background: var(--mono-surface, #f5f5f5); }
.mono-chrome__header-switcher-option.is-active { font-weight: 600; }
/* CART BADGE (always in DOM, [hidden] when zero) ----------- */
.mono-chrome__cart-btn { position: relative; }
.mono-chrome__cart-count {
position: absolute;
top: -6px;
right: -10px;
min-width: 16px;
height: 16px;
padding: 0 3px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mono-text);
color: var(--mono-bg);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
border-radius: 0;
}
.mono-chrome__cart-count[hidden] { display: none; }
/* MOBILE MENU TRIGGER -------------------------------------- */
.mono-chrome__mobile-menu-btn { display: none; }
/* MOBILE DRAWER -------------------------------------------- */
.mono-chrome__mobile-drawer {
position: fixed;
inset: 0;
z-index: 200;
background: var(--mono-bg);
color: var(--mono-text);
transform: translateX(100%);
/* Delay visibility:hidden until slide-out completes so content stays in a11y tree mid-animation. */
transition: transform 0.25s ease, visibility 0s 0.25s;
display: flex;
flex-direction: column;
visibility: hidden;
}
.mono-chrome__mobile-drawer.is-open {
transform: translateX(0);
visibility: visible;
/* When opening, flip visibility immediately so transform animation is visible. */
transition: transform 0.25s ease, visibility 0s 0s;
}
@media (prefers-reduced-motion: reduce) {
.mono-chrome__mobile-drawer,
.mono-chrome__mobile-drawer.is-open { transition: none; }
}
.mono-chrome__mobile-drawer-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px;
height: 64px;
border-bottom: 1px solid var(--mono-border);
box-sizing: border-box;
}
.mono-chrome__mobile-drawer-logo {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
}
.mono-chrome__mobile-drawer-nav {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
}
.mono-chrome__mobile-drawer-link {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 22px 24px;
border-bottom: 1px solid var(--mono-rule);
font-family: var(--font-sans);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--mono-text);
text-decoration: none;
}
.mono-chrome__mobile-drawer-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
font-weight: 400;
}
.mono-chrome__mobile-drawer-arr {
font-family: var(--font-mono);
font-size: 14px;
color: var(--mono-muted);
}
.mono-chrome__mobile-drawer-foot {
padding: 20px 24px;
border-top: 1px solid var(--mono-border);
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
/* FOOTER --------------------------------------------------- */
.mono-chrome__footer {
background: var(--mono-bg);
color: var(--mono-text);
border-top: 1px solid var(--mono-border);
padding: 80px 0 24px;
font-size: 14px;
}
.mono-chrome__footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
gap: 48px;
padding-bottom: 64px;
border-bottom: 1px solid var(--mono-rule);
}
.mono-chrome__footer-brand .mono-chrome__footer-logo,
.mono-chrome__footer-logo {
display: block;
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--mono-text);
text-decoration: none;
margin-bottom: 18px;
}
.mono-chrome__footer-blurb {
color: var(--mono-text-2);
margin: 0 0 24px;
max-width: 34ch;
line-height: 1.55;
font-size: 14px;
}
.mono-chrome__footer-blurb--newsletter {
font-size: 13px;
margin: 0 0 14px;
max-width: none;
}
.mono-chrome__footer-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-chrome__footer-col-heading {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 18px;
color: var(--mono-text);
}
.mono-chrome__footer-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mono-chrome__footer-list a {
color: var(--mono-text-2);
font-size: 14px;
text-decoration: none;
}
.mono-chrome__footer-list a:hover {
color: var(--mono-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* NEWSLETTER MINI ------------------------------------------ */
.mono-chrome__newsletter-mini {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
border: 1px solid var(--mono-border);
background: var(--mono-bg);
}
.mono-chrome__newsletter-input {
border: 0;
border-right: 1px solid var(--mono-border);
padding: 0 14px;
height: 42px;
background: transparent;
color: var(--mono-text);
font-family: var(--font-sans);
font-size: 13px;
outline: none;
min-width: 0;
}
.mono-chrome__newsletter-input::placeholder { color: var(--mono-muted); }
.mono-chrome__newsletter-mini .btn { height: 42px; border-radius: 0; }
/* FOOTER BOTTOM -------------------------------------------- */
.mono-chrome__footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
color: var(--mono-muted);
font-size: 12px;
font-family: var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* MOBILE BREAKPOINT (≤979px) ------------------------------ */
@media (max-width: 979px) {
.mono-chrome__header-nav { display: none; }
.mono-chrome__header-inner {
grid-template-columns: auto 1fr auto;
height: 56px;
gap: 12px;
}
.mono-chrome__header-logo { font-size: 16px; }
.mono-chrome__header-icons { gap: 14px; }
/* Hide search + account in header bar (drawer surfaces them); cart stays. */
.mono-chrome__icon-btn--search,
.mono-chrome__icon-btn--account { display: none; }
/* Hide currency/locale switchers on mobile — accessible via /account or
dedicated language/currency page in v1; mobile drawer port is follow-up. */
.mono-chrome__header-switcher { display: none; }
.mono-chrome__mobile-menu-btn { display: inline-flex; }
.mono-chrome__announcement {
font-size: 11px;
padding: 8px 16px;
gap: 16px;
}
.mono-chrome__footer { padding: 56px 0 20px; }
.mono-chrome__footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
padding-bottom: 40px;
}
.mono-chrome__footer-brand,
.mono-chrome__footer-newsletter { grid-column: span 2; }
.mono-chrome__footer-bottom {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
}
/* === Agent C (home) appends below === */
/* ============================================================
MONO — home (Agent C)
Hero · Categories rail · Featured collection · Editorial pair
Journal strip · Newsletter
Prefix: .mono-home__*
============================================================ */
/* SHARED — section heads on home -------------------------- */
.mono-home__section-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
margin-bottom: 48px;
padding-bottom: 14px;
border-bottom: 1px solid var(--mono-border);
}
.mono-home__section-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-text-2);
margin: 0 0 18px;
}
.mono-home__section-title {
font-size: clamp(32px, 3.2vw, 48px);
line-height: 1;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0;
max-width: 18ch;
color: var(--mono-text);
}
.mono-home__section-link {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
color: var(--mono-text);
}
.mono-home__section-link:hover { opacity: 0.7; }
/* HERO ---------------------------------------------------- */
/* Hero deliberately omits --mono-section-v: full-bleed above-the-fold layout. */
.mono-home__hero {
border-bottom: 1px solid var(--mono-border);
background: var(--mono-bg);
color: var(--mono-text);
}
.mono-home__hero-inner {
display: flex;
flex-direction: column;
min-height: 760px;
padding-top: 40px;
padding-bottom: 48px;
box-sizing: border-box;
}
.mono-home__hero-top {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--mono-border);
padding-bottom: 12px;
}
.mono-home__hero-img {
position: relative;
height: 380px;
margin: 28px 0;
background: var(--mono-placeholder);
overflow: hidden;
}
.mono-home__hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-home__hero-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 920px;
}
.mono-home__hero-heading {
font-family: var(--font-sans);
font-size: clamp(64px, 8vw, 144px);
line-height: 0.92;
letter-spacing: -0.04em;
font-weight: 700;
margin: 0 0 18px;
color: var(--mono-text);
}
.mono-home__hero-subcopy {
font-size: 14px;
line-height: 1.5;
color: var(--mono-text-2);
margin: 0 0 24px;
max-width: 38ch;
}
.mono-home__hero-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* CATEGORIES RAIL ----------------------------------------- */
.mono-home__categories-rail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--mono-border);
border-left: 1px solid var(--mono-border);
}
.mono-home__categories-rail-card {
position: relative;
display: flex;
flex-direction: column;
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
background: var(--mono-bg);
color: var(--mono-text);
text-decoration: none;
transition: background 0.15s linear;
}
.mono-home__categories-rail-card:hover {
background: var(--mono-surface);
}
.mono-home__categories-rail-media {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--mono-rule);
aspect-ratio: 4 / 5;
}
.mono-home__categories-rail-media .ph {
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.mono-home__categories-rail-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-home__categories-rail-info {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 16px 18px 22px;
gap: 12px;
}
.mono-home__categories-rail-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--mono-text);
}
.mono-home__categories-rail-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* FEATURED COLLECTION (4-up product grid) ----------------- */
.mono-home__featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--mono-border);
border-left: 1px solid var(--mono-border);
}
/* Featured grid uses shared .mono-card snippet — apply grid-cell borders. */
.mono-home__featured-grid > .mono-card {
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
padding: 0;
position: relative;
}
.mono-home__featured-grid > .mono-card .mono-card__img-wrap {
height: 360px;
aspect-ratio: auto;
}
.mono-home__featured-empty {
padding: 80px 0;
text-align: center;
color: var(--mono-muted);
font-size: 14px;
border-top: 1px solid var(--mono-rule);
}
.mono-home__featured-empty a {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
}
/* EDITORIAL PAIR (2-up image+text; second card permanently dark) */
/* Editorial deliberately omits --mono-section-v: border-bounded section
with internal padding on .mono-home__editorial-body. */
/* Outer + inter-card borders use --mono-rule (softer divider tone)
so dark mode doesn't render bright white lines around the section. */
.mono-home__editorial {
border-top: 1px solid var(--mono-rule);
border-bottom: 1px solid var(--mono-rule);
}
.mono-home__editorial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.mono-home__editorial-card {
display: grid;
grid-template-rows: auto 1fr;
align-items: stretch;
border-right: 1px solid var(--mono-rule);
}
.mono-home__editorial-card:last-child { border-right: 0; }
/* Permanently light — uses literal hex, NOT tokens, so the
light/dark contrast survives global [data-theme="dark"] flip. */
.mono-home__editorial-card--light {
background: #FFFFFF;
color: #0A0A0A;
}
/* Permanently dark — uses literal hex, NOT tokens. */
.mono-home__editorial-card--dark {
background: #0A0A0A;
color: #FAFAFA;
}
.mono-home__editorial-card--dark .mono-home__editorial-eyebrow,
.mono-home__editorial-card--dark .mono-home__editorial-subcopy {
color: #CCCCCC;
}
.mono-home__editorial-card--dark .mono-home__editorial-cta {
color: #FAFAFA;
}
/* Pin light-card descendants to literal hex too — otherwise tokenized
var(--mono-muted/text-2/text) flip in dark mode and collapse contrast. */
.mono-home__editorial-card--light .mono-home__editorial-eyebrow,
.mono-home__editorial-card--light .mono-home__editorial-subcopy {
color: #525252;
}
.mono-home__editorial-card--light .mono-home__editorial-cta {
color: #0A0A0A;
}
.mono-home__editorial-ph--dark {
background: #1A1A1A;
}
.mono-home__editorial-media {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--mono-rule);
}
.mono-home__editorial-card--dark .mono-home__editorial-media {
border-bottom-color: #2A2A2A;
}
.mono-home__editorial-media img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 5;
display: block;
}
.mono-home__editorial-media .ph {
aspect-ratio: 4 / 5;
}
.mono-home__editorial-body {
padding: 64px 56px 72px;
display: flex;
flex-direction: column;
gap: 18px;
}
.mono-home__editorial-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0;
}
.mono-home__editorial-heading {
font-family: var(--font-sans);
font-size: clamp(32px, 3.2vw, 48px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 600;
margin: 0;
max-width: 16ch;
color: inherit;
}
.mono-home__editorial-subcopy {
font-size: 16px;
line-height: 1.6;
color: var(--mono-text-2);
margin: 0;
max-width: 42ch;
}
.mono-home__editorial-cta {
align-self: flex-start;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
color: var(--mono-text);
}
/* JOURNAL STRIP (3-up blog cards) ------------------------- */
.mono-home__journal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--mono-border);
border-left: 1px solid var(--mono-border);
}
.mono-home__journal-card {
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
display: flex;
flex-direction: column;
background: var(--mono-bg);
}
.mono-home__journal-media-link { display: block; color: inherit; text-decoration: none; }
.mono-home__journal-media {
position: relative;
border-bottom: 1px solid var(--mono-rule);
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--mono-placeholder);
}
.mono-home__journal-media .ph { width: 100%; height: 100%; aspect-ratio: auto; }
.mono-home__journal-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.mono-home__journal-info {
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.mono-home__journal-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-home__journal-tag {
color: var(--mono-text);
font-weight: 600;
}
.mono-home__journal-title {
font-family: var(--font-sans);
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 600;
margin: 8px 0 4px;
color: var(--mono-text);
}
.mono-home__journal-card a { color: inherit; text-decoration: none; }
.mono-home__journal-card a:hover .mono-home__journal-title { text-decoration: underline; text-underline-offset: 3px; }
.mono-home__journal-excerpt {
margin: 0;
color: var(--mono-text-2);
font-size: 14px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mono-home__journal-read {
margin-top: auto;
padding-top: 14px;
font-size: 13px;
font-weight: 500;
border-top: 1px solid var(--mono-rule);
display: flex;
justify-content: space-between;
align-items: center;
color: var(--mono-text);
}
.mono-home__journal-arr {
display: inline-block;
font-family: var(--font-mono);
transition: transform 0.15s linear;
}
.mono-home__journal-card:hover .mono-home__journal-arr { transform: translateX(4px); }
.mono-home__journal-empty {
padding: 64px 0;
text-align: center;
color: var(--mono-muted);
font-size: 14px;
}
/* NEWSLETTER (full-width 2-col, hairline border-form) ----- */
.mono-home__newsletter {
border-top: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
background: var(--mono-bg);
color: var(--mono-text);
}
.mono-home__newsletter-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
padding-top: var(--mono-section-v);
padding-bottom: var(--mono-section-v);
align-items: start;
}
.mono-home__newsletter-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 18px;
}
.mono-home__newsletter-heading {
font-family: var(--font-sans);
font-size: clamp(36px, 3.6vw, 56px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 600;
margin: 0 0 18px;
color: var(--mono-text);
}
.mono-home__newsletter-subcopy {
margin: 0;
color: var(--mono-text-2);
max-width: 42ch;
line-height: 1.6;
font-size: 15px;
}
.mono-home__newsletter-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
border: 1px solid var(--mono-border);
margin-top: 8px;
background: var(--mono-bg);
}
.mono-home__newsletter-label {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.mono-home__newsletter-input {
height: 56px;
border: 0;
background: transparent;
font: inherit;
font-size: 15px;
color: var(--mono-text);
outline: none;
padding: 0 18px;
border-right: 1px solid var(--mono-border);
min-width: 0;
}
.mono-home__newsletter-input::placeholder { color: var(--mono-muted); }
.mono-home__newsletter-submit {
height: 56px;
padding: 0 24px;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 500;
background: var(--mono-text);
color: var(--mono-bg);
border: 0;
cursor: pointer;
transition: opacity 0.15s linear;
}
.mono-home__newsletter-submit:hover { opacity: 0.85; }
.mono-home__newsletter-privacy {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-muted);
margin-top: 14px;
letter-spacing: 0.02em;
}
.mono-home__newsletter-privacy a {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
/* MOBILE (≤979px) ----------------------------------------- */
@media (max-width: 979px) {
.mono-home__section-head {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 32px;
}
.mono-home__section-link { justify-self: start; }
.mono-home__hero-inner {
min-height: 560px;
padding-top: 24px;
padding-bottom: 32px;
}
.mono-home__hero-img {
height: 280px;
margin: 20px 0;
}
.mono-home__categories-rail-grid,
.mono-home__featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.mono-home__featured-grid > .mono-card .mono-card__img-wrap { height: 320px; }
.mono-home__editorial-grid {
grid-template-columns: 1fr;
}
.mono-home__editorial-card {
border-right: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-home__editorial-card:last-child { border-bottom: 0; }
.mono-home__editorial-body {
padding: 40px 24px 48px;
}
.mono-home__journal-grid {
grid-template-columns: 1fr;
}
.mono-home__newsletter-inner {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 56px;
padding-bottom: 56px;
}
.mono-home__newsletter-input,
.mono-home__newsletter-submit { height: 48px; }
}
/* === Agent D (plp/pdp) appends below === */
/* ============================================================
MONO — PLP + PDP (Agent D)
PLP page (.mono-plp__*) + PDP page (.mono-pdp__*) +
shared product card (.mono-card__*).
Prefixes: .mono-plp__*, .mono-pdp__*, .mono-card__*
============================================================ */
/* PRODUCT CARD (shared by PLP grid, PDP recs, featured-collection) */
.mono-card { display: block; color: inherit; }
.mono-card__img-wrap {
position: relative;
aspect-ratio: 3 / 4;
background: var(--mono-placeholder);
overflow: hidden;
border-bottom: 1px solid var(--mono-rule);
}
.mono-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-card__img--ph { position: absolute; inset: 0; }
.mono-card__badge {
position: absolute;
left: 16px; top: 16px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mono-bg);
padding: 5px 8px;
border: 1px solid var(--mono-border);
color: var(--mono-text);
}
.mono-card__badge--sale {
background: var(--mono-accent);
border-color: var(--mono-accent);
color: var(--mono-accent-fg);
}
.mono-card__quick {
position: absolute;
left: 0; right: 0; bottom: 0;
background: var(--mono-text);
color: var(--mono-bg);
height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.15s, transform 0.15s;
cursor: pointer;
/* button reset (was a span) */
border: 0;
padding: 0;
margin: 0;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.mono-card__quick:disabled { cursor: default; opacity: 0.6; }
.mono-card:hover .mono-card__quick { opacity: 1; transform: translateY(0); }
.mono-card__info { padding: 18px 24px; }
.mono-card__top {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 6px;
}
.mono-card__num { color: var(--mono-text); font-weight: 500; }
.mono-card__title {
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 4px;
color: var(--mono-text);
}
.mono-card__price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--mono-text);
font-weight: 500;
}
.mono-card__price-was { color: var(--mono-muted); margin-right: 8px; font-weight: 400; text-decoration: line-through; }
.mono-card__price-now--accent { color: var(--mono-accent); }
.mono-card__colors { display: inline-flex; gap: 4px; align-items: center; }
.mono-card__color-dot {
width: 10px; height: 10px;
border: 1px solid var(--mono-rule);
border-radius: 50%;
display: inline-block;
}
.mono-card--compact .mono-card__info { padding: 16px 20px; }
.mono-card--compact .mono-card__title { font-size: 16px; }
/* PLP — breadcrumb */
.mono-plp__crumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
padding: 18px 0;
border-bottom: 1px solid var(--mono-rule);
display: flex;
gap: 10px;
align-items: center;
}
.mono-plp__crumb a { color: var(--mono-muted); }
.mono-plp__crumb a:hover { color: var(--mono-text); }
.mono-plp__crumb-sep { opacity: 0.5; }
.mono-plp__crumb-here { color: var(--mono-text); }
/* PLP — collection hero */
.mono-plp__hero {
border-bottom: 1px solid var(--mono-border);
padding: 56px 0 48px;
}
.mono-plp__hero-top {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 18px;
display: flex;
gap: 14px;
align-items: center;
}
.mono-plp__hero-num { color: var(--mono-text); font-weight: 500; }
.mono-plp__hero-title {
font-size: 96px;
line-height: 0.95;
letter-spacing: -0.04em;
font-weight: 600;
margin: 0 0 22px;
}
.mono-plp__hero-desc {
font-size: 17px;
line-height: 1.55;
max-width: 60ch;
color: var(--mono-text-2);
margin: 0 0 8px;
text-wrap: pretty;
}
.mono-plp__hero-meta {
display: flex;
gap: 32px;
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
flex-wrap: wrap;
}
.mono-plp__hero-meta strong { color: var(--mono-text); font-weight: 500; display: block; }
/* PLP — layout */
.mono-plp__layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
border-bottom: 1px solid var(--mono-border);
position: relative;
}
.mono-plp__rail-wrap {
border-right: 1px solid var(--mono-border);
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
}
.mono-plp__main { min-width: 0; }
.mono-plp__drawer-close { display: none; }
.mono-plp__mobile-bar { display: none; }
.mono-plp__drawer-backdrop { display: none; }
/* PLP — filter rail */
.mono-plp__rail-head {
padding: 20px 24px;
border-bottom: 1px solid var(--mono-border);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-plp__rail-head strong { color: var(--mono-text); font-weight: 500; }
.mono-plp__rail-clear {
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
color: var(--mono-text);
}
.mono-plp__filter-group { border-bottom: 1px solid var(--mono-rule); }
.mono-plp__filter-summary {
padding: 18px 24px;
list-style: none;
display: flex;
justify-content: space-between;
cursor: pointer;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
}
.mono-plp__filter-summary::-webkit-details-marker { display: none; }
.mono-plp__filter-ico {
width: 11px; height: 11px;
position: relative;
display: inline-block;
}
.mono-plp__filter-ico::before,
.mono-plp__filter-ico::after {
content: "";
position: absolute;
background: var(--mono-text);
}
.mono-plp__filter-ico::before { left: 0; right: 0; top: 50%; height: 1px; }
.mono-plp__filter-ico::after { top: 0; bottom: 0; left: 50%; width: 1px; transition: transform 0.2s; }
.mono-plp__filter-group[open] > .mono-plp__filter-summary .mono-plp__filter-ico::after { transform: scaleY(0); }
.mono-plp__filter-body {
padding: 0 24px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mono-plp__filter-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px;
cursor: pointer;
color: var(--mono-text);
text-decoration: none;
}
.mono-plp__filter-label {
flex: 1;
display: flex;
gap: 10px;
align-items: center;
}
.mono-plp__filter-check {
width: 16px; height: 16px;
border: 1px solid var(--mono-border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--mono-bg);
}
.mono-plp__filter-check svg {
width: 10px; height: 10px;
stroke: currentColor;
fill: none;
stroke-width: 2;
display: none;
}
.mono-plp__filter-row.is-on .mono-plp__filter-check {
background: var(--mono-text);
border-color: var(--mono-text);
color: var(--mono-bg);
}
.mono-plp__filter-row.is-on .mono-plp__filter-check svg { display: block; }
.mono-plp__filter-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-muted);
font-variant-numeric: tabular-nums;
}
.mono-plp__filter-color-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 0 24px 18px;
}
.mono-plp__filter-sw {
aspect-ratio: 1 / 1;
border: 1px solid var(--mono-rule);
position: relative;
cursor: pointer;
display: block;
}
.mono-plp__filter-sw.is-on { outline: 1px solid var(--mono-text); outline-offset: 2px; }
/* PLP — toolbar (sticky, top:0) */
.mono-plp__toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--mono-border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
position: sticky;
top: 0;
background: var(--mono-bg);
z-index: 10;
}
.mono-plp__toolbar-count strong { color: var(--mono-text); font-weight: 500; }
.mono-plp__toolbar-right {
display: flex;
gap: 24px;
align-items: center;
}
.mono-plp__sort-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.mono-plp__sort-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-plp__sort-select {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-text);
background: var(--mono-bg);
border: 1px solid var(--mono-border);
padding: 6px 28px 6px 12px;
height: 28px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
border-radius: 0;
}
.mono-plp__sort-caret {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--mono-text);
display: inline-flex;
}
/* PLP — applied chips */
.mono-plp__chips {
padding: 14px 24px;
border-bottom: 1px solid var(--mono-rule);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-plp__chip {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 5px 10px;
border: 1px solid var(--mono-border);
color: var(--mono-text);
cursor: pointer;
text-decoration: none;
}
.mono-plp__chip svg { stroke: currentColor; fill: none; stroke-width: 1.6; }
.mono-plp__chips-clear {
margin-left: auto;
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
/* PLP — product grid (3-col) */
.mono-plp__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.mono-plp__grid > .mono-card {
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
padding: 0;
position: relative;
}
.mono-plp__grid > .mono-card:nth-child(3n) { border-right: 0; }
.mono-plp__grid > .mono-card .mono-card__img-wrap {
height: 480px;
aspect-ratio: auto;
}
/* PLP — empty */
.mono-plp__empty {
padding: 96px 32px;
text-align: center;
border-bottom: 1px solid var(--mono-border);
}
.mono-plp__empty h2 {
font-size: 32px;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.mono-plp__empty p { color: var(--mono-muted); margin-bottom: 24px; }
/* PLP — pagination */
.mono-plp__page-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 24px 56px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-plp__page-spacer { display: block; width: 0; }
.mono-plp__page-nums {
display: flex;
gap: 0;
border: 1px solid var(--mono-border);
}
.mono-plp__page-link {
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--mono-border);
color: var(--mono-text);
font-family: var(--font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.mono-plp__page-link:last-child { border-right: 0; }
.mono-plp__page-link.is-on { background: var(--mono-text); color: var(--mono-bg); }
.mono-plp__page-link:hover:not(.is-on):not(.is-disabled) { background: var(--mono-surface); }
.mono-plp__page-link.is-disabled { color: var(--mono-muted); pointer-events: none; opacity: 0.5; }
/* PDP — breadcrumb (shared visual with PLP) */
.mono-pdp__crumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
padding: 18px 0;
border-bottom: 1px solid var(--mono-rule);
display: flex;
gap: 10px;
align-items: center;
}
.mono-pdp__crumb a { color: var(--mono-muted); }
.mono-pdp__crumb a:hover { color: var(--mono-text); }
.mono-pdp__crumb-sep { opacity: 0.5; }
.mono-pdp__crumb-here { color: var(--mono-text); }
/* PDP — main grid (gallery 7fr / info 5fr) */
.mono-pdp {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-pdp__gallery {
border-right: 1px solid var(--mono-border);
background: var(--mono-bg);
}
.mono-pdp__info {
padding: 48px 56px;
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
}
.mono-pdp__info-inner { max-width: 560px; }
/* PDP — gallery */
.mono-pdp__g-main {
height: 760px;
border-bottom: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
}
.mono-pdp__g-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-pdp__g-main-ph { position: absolute; inset: 0; }
.mono-pdp__g-meta {
position: absolute;
left: 24px; top: 20px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mono-bg);
padding: 6px 10px;
border: 1px solid var(--mono-border);
z-index: 2;
}
.mono-pdp__g-counter {
position: absolute;
right: 24px; bottom: 20px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
background: var(--mono-bg);
padding: 6px 10px;
border: 1px solid var(--mono-border);
z-index: 2;
}
.mono-pdp__g-zoom {
position: absolute;
right: 24px; top: 20px;
width: 36px; height: 36px;
background: var(--mono-bg);
border: 1px solid var(--mono-border);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--mono-text);
z-index: 2;
}
.mono-pdp__g-zoom svg { display: block; }
.mono-pdp__g-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-pdp__g-thumb {
height: 200px;
border-right: 1px solid var(--mono-rule);
position: relative;
cursor: pointer;
background: transparent;
border-top: 0; border-bottom: 0; border-left: 0;
padding: 0;
overflow: hidden;
}
.mono-pdp__g-thumb:last-child { border-right: 0; }
.mono-pdp__g-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-pdp__g-thumb.is-active::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--mono-text);
pointer-events: none;
}
.mono-pdp__g-thumb-num {
position: absolute;
left: 8px; top: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--mono-muted);
background: var(--mono-bg);
padding: 3px 6px;
border: 1px solid var(--mono-rule);
}
.mono-pdp__g-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.mono-pdp__g-detail-cell {
height: 560px;
border-right: 1px solid var(--mono-border);
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.mono-pdp__g-detail-cell:last-child { border-right: 0; }
.mono-pdp__g-detail-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mono-pdp__g-detail-lbl {
position: absolute;
left: 18px; bottom: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mono-bg);
padding: 6px 10px;
border: 1px solid var(--mono-border);
}
/* PDP — info column */
.mono-pdp__info-top {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--mono-rule);
padding-bottom: 12px;
margin-bottom: 24px;
}
.mono-pdp__info-top strong { color: var(--mono-text); font-weight: 500; }
.mono-pdp__info-top a { color: var(--mono-muted); }
.mono-pdp__info-top a:hover { color: var(--mono-text); }
.mono-pdp__title {
font-size: 44px;
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0 0 4px;
}
.mono-pdp__subtitle {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 20px;
}
.mono-pdp__rating {
display: flex;
gap: 10px;
align-items: center;
font-size: 12px;
color: var(--mono-muted);
margin-bottom: 24px;
}
.mono-pdp__stars {
display: inline-flex;
gap: 1px;
color: var(--mono-text);
}
.mono-pdp__stars svg { fill: currentColor; }
.mono-pdp__rating-num {
font-family: var(--font-mono);
color: var(--mono-text);
font-weight: 500;
}
.mono-pdp__rating-link {
color: var(--mono-muted);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.mono-pdp__price {
display: flex;
gap: 14px;
align-items: baseline;
border-top: 1px solid var(--mono-rule);
border-bottom: 1px solid var(--mono-rule);
padding: 18px 0;
margin-bottom: 24px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
flex-wrap: wrap;
}
.mono-pdp__price-cur { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--mono-text); }
.mono-pdp__price-was { font-size: 16px; color: var(--mono-muted); text-decoration: line-through; }
.mono-pdp__price-save {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-accent);
font-weight: 500;
margin-left: auto;
}
.mono-pdp__desc {
font-size: 15px;
line-height: 1.55;
color: var(--mono-text-2);
margin: 0 0 28px;
text-wrap: pretty;
}
/* PDP — variant pickers */
.mono-pdp__field {
margin: 0 0 24px;
border: 0;
padding: 0;
}
.mono-pdp__field-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 10px;
}
.mono-pdp__field-head strong { color: var(--mono-text); font-weight: 500; }
.mono-pdp__field-selected { color: var(--mono-muted); font-weight: 400; }
.mono-pdp__size-guide {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.mono-pdp__swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.mono-pdp__swatch {
width: 36px; height: 36px;
border: 1px solid var(--mono-rule);
position: relative;
cursor: pointer;
background: #000;
padding: 0;
border-radius: 0;
}
.mono-pdp__swatch.is-active {
outline: 1px solid var(--mono-text);
outline-offset: 2px;
}
.mono-pdp__swatch-name {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + 6px);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--mono-muted);
opacity: 0;
transition: opacity 0.15s;
}
.mono-pdp__swatch:hover .mono-pdp__swatch-name,
.mono-pdp__swatch.is-active .mono-pdp__swatch-name {
opacity: 1;
color: var(--mono-text);
}
.mono-pdp__sizes {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
border: 1px solid var(--mono-border);
}
.mono-pdp__size-btn {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
background: var(--mono-bg);
border: 0;
border-right: 1px solid var(--mono-border);
cursor: pointer;
color: var(--mono-text);
position: relative;
border-radius: 0;
}
.mono-pdp__size-btn:last-child { border-right: 0; }
.mono-pdp__size-btn.is-active { background: var(--mono-text); color: var(--mono-bg); }
.mono-pdp__size-btn:not(.is-active):hover { background: var(--mono-surface); }
.mono-pdp__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mono-pdp__pill {
height: 38px;
padding: 0 18px;
border: 1px solid var(--mono-border);
background: var(--mono-bg);
color: var(--mono-text);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
border-radius: 0;
}
.mono-pdp__pill.is-active { background: var(--mono-text); color: var(--mono-bg); border-color: var(--mono-text); }
/* PDP — qty + ATC */
.mono-pdp__qty-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 12px;
margin: 24px 0 14px;
}
.mono-pdp__qty {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid var(--mono-border);
height: 52px;
}
.mono-pdp__qty-btn {
background: var(--mono-bg);
border: 0;
cursor: pointer;
font-family: var(--font-mono);
font-size: 18px;
color: var(--mono-text);
border-right: 1px solid var(--mono-border);
}
.mono-pdp__qty-btn:last-child {
border-right: 0;
border-left: 1px solid var(--mono-border);
}
.mono-pdp__qty-input {
border: 0;
background: var(--mono-bg);
color: var(--mono-text);
text-align: center;
font-family: var(--font-mono);
font-size: 14px;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.mono-pdp__qty-input::-webkit-outer-spin-button,
.mono-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mono-pdp__qty-input.is-at-max {
animation: monoQtyShake 0.3s ease;
box-shadow: inset 0 0 0 1px var(--mono-accent, #d23535);
}
@keyframes monoQtyShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-1px); }
}
.mono-pdp__form { display: contents; }
.mono-pdp__atc { width: 100%; }
.mono-pdp__buynow { margin-top: 12px; }
/* PDP — trust meta grid */
.mono-pdp__meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--mono-border);
margin: 24px 0;
}
.mono-pdp__meta-cell {
padding: 14px 16px;
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
display: flex;
gap: 10px;
align-items: flex-start;
}
.mono-pdp__meta-cell:nth-child(2n) { border-right: 0; }
.mono-pdp__meta-cell:nth-last-child(-n+2) { border-bottom: 0; }
.mono-pdp__meta-cell svg {
stroke: currentColor;
fill: none;
stroke-width: 1.4;
flex-shrink: 0;
margin-top: 2px;
}
.mono-pdp__meta-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 2px;
}
.mono-pdp__meta-val {
font-size: 13px;
color: var(--mono-text);
font-weight: 500;
}
/* PDP — section heading utility */
.mono-pdp__sec-head {
padding: 80px 0 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid var(--mono-border);
margin-bottom: 0;
gap: 24px;
flex-wrap: wrap;
}
.mono-pdp__sec-top {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 14px;
display: flex;
gap: 14px;
align-items: center;
}
.mono-pdp__sec-num { color: var(--mono-text); font-weight: 500; }
.mono-pdp__sec-title {
font-size: 56px;
line-height: 1;
letter-spacing: -0.03em;
font-weight: 600;
margin: 0;
}
.mono-pdp__sec-link {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
background: transparent;
border-top: 0; border-left: 0; border-right: 0;
cursor: pointer;
border-radius: 0;
height: auto;
}
.mono-pdp__sec-link[disabled] { opacity: 0.4; cursor: not-allowed; }
/* PDP — accordion (product-tabs) */
.mono-pdp__tabs-section { padding: 0 0 40px; }
.mono-pdp__tabs {
border-top: 1px solid var(--mono-rule);
margin-top: 24px;
}
.mono-pdp__tab { border-bottom: 1px solid var(--mono-rule); }
.mono-pdp__tab-head {
width: 100%;
padding: 18px 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
background: transparent;
border: 0;
text-align: left;
color: var(--mono-text);
}
.mono-pdp__tab-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--mono-muted);
margin-right: 14px;
font-weight: 400;
}
.mono-pdp__tab-label { flex: 1; }
.mono-pdp__tab-ico {
width: 14px; height: 14px;
position: relative;
display: inline-block;
}
.mono-pdp__tab-ico::before,
.mono-pdp__tab-ico::after {
content: "";
position: absolute;
background: var(--mono-text);
transition: transform 0.2s;
}
.mono-pdp__tab-ico::before { left: 0; right: 0; top: 50%; height: 1px; }
.mono-pdp__tab-ico::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.mono-pdp__tab.is-open .mono-pdp__tab-ico::after { transform: scaleY(0); }
.mono-pdp__tab-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, padding 0.25s ease;
font-size: 14px;
line-height: 1.6;
color: var(--mono-text-2);
}
.mono-pdp__tab.is-open .mono-pdp__tab-body {
max-height: 1200px;
padding: 0 0 22px 36px;
}
.mono-pdp__tab-body p { margin: 0 0 10px; }
.mono-pdp__tab-body ul { margin: 6px 0; padding-left: 0; list-style: none; }
.mono-pdp__tab-body li {
display: flex;
gap: 14px;
padding: 6px 0;
border-bottom: 1px dashed var(--mono-rule);
font-size: 13px;
}
.mono-pdp__tab-body li:last-child { border-bottom: 0; }
.mono-pdp__tab-body li strong {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
width: 140px;
flex-shrink: 0;
font-weight: 400;
}
/* PDP — reviews stub */
.mono-pdp__reviews-section { padding: 0 0 40px; }
.mono-pdp__reviews-stats {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0;
border-bottom: 1px solid var(--mono-border);
border-top: 1px solid var(--mono-border);
}
.mono-pdp__reviews-agg {
padding: 48px 56px;
border-right: 1px solid var(--mono-border);
}
.mono-pdp__reviews-big {
font-size: 96px;
line-height: 1;
letter-spacing: -0.04em;
font-weight: 600;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
color: var(--mono-text);
}
.mono-pdp__reviews-stars {
display: flex;
gap: 2px;
color: var(--mono-text);
margin-bottom: 8px;
}
.mono-pdp__reviews-stars svg { fill: currentColor; }
.mono-pdp__reviews-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--mono-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mono-pdp__reviews-empty {
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.mono-pdp__reviews-empty p {
margin: 0;
font-size: 15px;
color: var(--mono-text-2);
}
.mono-pdp__reviews-stub-note small { color: var(--mono-muted); font-size: 12px; }
/* PDP — recommendations grid (4-up) */
.mono-pdp__recs-section { border-bottom: 1px solid var(--mono-border); }
.mono-pdp__recs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.mono-pdp__recs-grid > .mono-card {
border-right: 1px solid var(--mono-border);
border-top: 1px solid var(--mono-border);
}
.mono-pdp__recs-grid > .mono-card:last-child { border-right: 0; }
.mono-pdp__recs-grid > .mono-card .mono-card__img-wrap {
height: 420px;
aspect-ratio: auto;
}
/* Recently viewed — horizontal scroll strip on PDP */
.mono-pdp__rv-section {
border-bottom: 1px solid var(--mono-border);
}
.mono-pdp__rv-row {
display: flex;
gap: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-top: 1px solid var(--mono-border);
}
.mono-pdp__rv-row::-webkit-scrollbar { display: none; }
.mono-pdp__rv-row > .mono-card--rv {
flex: 0 0 320px;
scroll-snap-align: start;
border-right: 1px solid var(--mono-border);
background: var(--mono-bg);
}
.mono-pdp__rv-row > .mono-card--rv:last-child { border-right: 0; }
.mono-pdp__rv-row > .mono-card--rv .mono-card__img-wrap {
height: 360px;
aspect-ratio: auto;
}
@media (max-width: 979px) {
.mono-pdp__rv-row > .mono-card--rv { flex: 0 0 240px; }
.mono-pdp__rv-row > .mono-card--rv .mono-card__img-wrap { height: 280px; }
}
/* PDP — lightbox */
.mono-pdp__lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.mono-pdp__lightbox.is-open {
visibility: visible;
opacity: 1;
}
.mono-pdp__lightbox-image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
display: block;
}
.mono-pdp__lightbox-close {
position: absolute;
top: 24px; right: 24px;
font-size: 32px;
line-height: 1;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px;
z-index: 2;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.mono-card__quick { transition: none; }
.mono-pdp__lightbox { transition: none; }
.mono-pdp__tab-body { transition: none; }
.mono-pdp__tab-ico::before,
.mono-pdp__tab-ico::after { transition: none; }
.mono-plp__filter-ico::after { transition: none; }
.mono-pdp__swatch-name { transition: none; }
}
/* MOBILE — < 980px */
@media (max-width: 979px) {
/* PLP */
.mono-plp__hero { padding: 32px 0 24px; }
.mono-plp__hero-title { font-size: 48px; letter-spacing: -0.025em; }
.mono-plp__hero-meta { gap: 18px; }
.mono-plp__hero-meta > div { flex: 1 1 45%; }
.mono-plp__layout {
grid-template-columns: 1fr;
}
.mono-plp__rail-wrap {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(360px, 86vw);
background: var(--mono-bg);
z-index: 100;
border-right: 1px solid var(--mono-border);
transform: translateX(-100%);
transition: transform 0.2s ease;
max-height: none;
}
body.mono-plp-filter-open .mono-plp__rail-wrap { transform: translateX(0); }
body.mono-plp-filter-open { overflow: hidden; }
.mono-plp__drawer-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.mono-plp__drawer-backdrop[hidden] { display: none; }
.mono-plp__drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
background: transparent;
border: 0;
font-size: 24px;
cursor: pointer;
color: var(--mono-text);
z-index: 101;
}
.mono-plp__mobile-bar {
display: flex;
padding: 16px 0;
border-bottom: 1px solid var(--mono-rule);
}
.mono-plp__mobile-trigger {
width: 100%;
height: 44px;
background: var(--mono-bg);
border: 1px solid var(--mono-border);
color: var(--mono-text);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.mono-plp__toolbar {
position: static;
padding: 14px 18px;
flex-wrap: wrap;
gap: 10px;
}
.mono-plp__chips { padding: 12px 18px; }
.mono-plp__grid { grid-template-columns: repeat(2, 1fr); }
.mono-plp__grid > .mono-card:nth-child(3n) { border-right: 1px solid var(--mono-border); }
.mono-plp__grid > .mono-card:nth-child(2n) { border-right: 0; }
.mono-plp__grid > .mono-card .mono-card__img-wrap { height: 280px; }
.mono-plp__page-bar {
flex-direction: column;
gap: 16px;
padding: 24px 18px 40px;
align-items: stretch;
}
/* PDP */
.mono-pdp { grid-template-columns: 1fr; }
.mono-pdp__gallery {
border-right: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-pdp__info {
position: static;
max-height: none;
padding: 32px 24px;
overflow: visible;
}
.mono-pdp__info-inner { max-width: none; }
.mono-pdp__title { font-size: 32px; }
.mono-pdp__g-main { height: 480px; }
.mono-pdp__g-thumb { height: 120px; }
.mono-pdp__g-detail-cell { height: 320px; }
.mono-pdp__sec-head { padding: 48px 0 24px; gap: 16px; }
.mono-pdp__sec-title { font-size: 32px; }
.mono-pdp__recs-grid {
grid-template-columns: repeat(2, 1fr);
}
.mono-pdp__recs-grid > .mono-card:nth-child(2n) { border-right: 0; }
.mono-pdp__recs-grid > .mono-card .mono-card__img-wrap { height: 320px; }
.mono-pdp__reviews-stats { grid-template-columns: 1fr; }
.mono-pdp__reviews-agg {
padding: 32px 24px;
border-right: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-pdp__reviews-empty { padding: 32px 24px; }
}
/* === Agent E (cart) appends below === */
/* ============================================================
MONO — cart (Agent E)
Cart page (.mono-cart__page) + drawer (.mono-cart__drawer)
Prefix: .mono-cart__*
============================================================ */
/* PAGE — head ---------------------------------------------- */
.mono-cart__page { padding-bottom: 0; }
.mono-cart__head {
padding: 48px 0 32px;
border-bottom: 1px solid var(--mono-border);
}
.mono-cart__head-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 14px;
display: flex;
gap: 14px;
justify-content: space-between;
}
.mono-cart__head-num { color: var(--mono-text); font-weight: 500; }
.mono-cart__head-title {
font-size: 80px;
line-height: 0.95;
letter-spacing: -0.04em;
font-weight: 600;
margin: 0;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
}
.mono-cart__head-count {
font-family: var(--font-mono);
font-size: 24px;
color: var(--mono-muted);
font-weight: 400;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
/* PAGE — checkout steps ----------------------------------- */
.mono-cart__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--mono-border);
}
.mono-cart__step {
padding: 18px 24px;
border-right: 1px solid var(--mono-border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
display: flex;
gap: 14px;
align-items: center;
}
.mono-cart__step:last-child { border-right: 0; }
.mono-cart__step-num {
display: inline-flex;
width: 24px;
height: 24px;
border: 1px solid var(--mono-border);
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--mono-text);
}
.mono-cart__step.is-on { color: var(--mono-text); }
.mono-cart__step.is-on .mono-cart__step-num {
background: var(--mono-text);
color: var(--mono-bg);
border-color: var(--mono-text);
}
/* PAGE — grid layout -------------------------------------- */
.mono-cart__grid {
display: grid;
grid-template-columns: 1fr 420px;
border-bottom: 1px solid var(--mono-border);
}
.mono-cart__col-items { border-right: 1px solid var(--mono-border); min-width: 0; }
.mono-cart__col-summary {
position: sticky;
top: 64px;
align-self: start;
max-height: calc(100vh - 64px);
overflow-y: auto;
}
/* PAGE — line items --------------------------------------- */
.mono-cart__line {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 24px;
padding: 28px 32px;
border-bottom: 1px solid var(--mono-rule);
align-items: start;
}
.mono-cart__line-image {
width: 140px;
height: 180px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
display: block;
}
.mono-cart__line-image img { width: 100%; height: 100%; object-fit: cover; }
.mono-cart__line-image .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.mono-cart__line-body { display: flex; flex-direction: column; min-width: 0; }
.mono-cart__line-top {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 8px;
}
.mono-cart__line-edit {
color: var(--mono-muted);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.mono-cart__line-edit:hover { color: var(--mono-text); }
.mono-cart__line-title {
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 6px;
}
.mono-cart__line-title a { color: var(--mono-text); }
.mono-cart__line-opts {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--mono-text-2);
margin-bottom: 14px;
display: flex;
gap: 18px;
}
.mono-cart__line-actions {
display: flex;
gap: 14px;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: auto;
flex-wrap: wrap;
}
.mono-cart__line-qty {
display: inline-grid;
grid-template-columns: 32px 44px 32px;
border: 1px solid var(--mono-border);
}
.mono-cart__line-qty-btn {
background: var(--mono-bg);
border: 0;
cursor: pointer;
height: 32px;
font-family: var(--font-mono);
color: var(--mono-text);
border-right: 1px solid var(--mono-border);
}
.mono-cart__line-qty-btn:last-child { border-right: 0; border-left: 1px solid var(--mono-border); }
.mono-cart__line-qty-value {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 13px;
font-variant-numeric: tabular-nums;
text-align: center;
width: 100%;
border: 0;
background: var(--mono-bg);
color: var(--mono-text);
outline: none;
-moz-appearance: textfield;
}
.mono-cart__line-qty-value::-webkit-outer-spin-button,
.mono-cart__line-qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mono-cart__line-remove {
color: var(--mono-muted);
border-bottom: 1px solid currentColor;
padding: 0 0 1px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: transparent;
cursor: pointer;
}
.mono-cart__line-remove:hover { color: var(--mono-text); }
.mono-cart__line-price {
text-align: right;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
min-width: 80px;
}
.mono-cart__line-price-now {
font-size: 18px;
font-weight: 500;
display: block;
color: var(--mono-text);
}
/* PAGE — upsell ------------------------------------------- */
.mono-cart__upsell {
padding: 32px;
border-bottom: 1px solid var(--mono-border);
background: var(--mono-surface);
}
.mono-cart__upsell-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__upsell-head strong { color: var(--mono-text); font-weight: 500; }
.mono-cart__upsell-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--mono-border);
border: 1px solid var(--mono-border);
}
.mono-cart__upsell-card {
background: var(--mono-bg);
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px;
}
.mono-cart__upsell-pic {
width: 80px;
height: 80px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
display: block;
overflow: hidden;
}
.mono-cart__upsell-pic img { width: 100%; height: 100%; object-fit: cover; }
.mono-cart__upsell-pic .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.mono-cart__upsell-info { min-width: 0; }
.mono-cart__upsell-title {
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
display: block;
margin-bottom: 4px;
color: var(--mono-text);
}
.mono-cart__upsell-price {
font-family: var(--font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--mono-text-2);
}
.mono-cart__upsell-add {
width: 32px;
height: 32px;
border: 1px solid var(--mono-border);
background: var(--mono-bg);
cursor: pointer;
font-family: var(--font-mono);
font-size: 16px;
color: var(--mono-text);
}
.mono-cart__upsell-add:hover { background: var(--mono-text); color: var(--mono-bg); }
/* PAGE — continue row ------------------------------------- */
.mono-cart__continue {
padding: 24px 32px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mono-cart__continue-link {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.mono-cart__continue-meta { color: var(--mono-muted); }
/* PAGE — summary ------------------------------------------ */
.mono-cart__sum-head {
padding: 24px 32px;
border-bottom: 1px solid var(--mono-border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
display: flex;
justify-content: space-between;
}
.mono-cart__sum-head strong { color: var(--mono-text); font-weight: 500; }
.mono-cart__sum-rows {
padding: 18px 32px;
display: flex;
flex-direction: column;
gap: 10px;
border-bottom: 1px solid var(--mono-rule);
}
.mono-cart__sum-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--mono-text-2);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.mono-cart__sum-row-label { display: flex; align-items: center; gap: 8px; }
.mono-cart__sum-total {
padding: 24px 32px;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--mono-border);
}
.mono-cart__sum-total-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__sum-total-amt-wrap { text-align: right; }
.mono-cart__sum-total-amt {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 500;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--mono-text);
}
.mono-cart__sum-total-vat {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
display: block;
text-align: right;
margin-top: 4px;
}
.mono-cart__sum-cta {
padding: 24px 32px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mono-cart__sum-trust {
padding: 18px 32px;
border-top: 1px solid var(--mono-rule);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__sum-trust-item { display: flex; gap: 8px; align-items: flex-start; }
.mono-cart__sum-trust-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 2px;
color: var(--mono-text);
}
.mono-cart__sum-trust-item strong {
color: var(--mono-text);
font-weight: 500;
display: block;
margin-bottom: 2px;
}
/* SHARED — free-ship progress ------------------------------ */
.mono-cart__progress {
padding: 18px 32px;
border-bottom: 1px solid var(--mono-rule);
}
.mono-cart__progress--page { border-bottom: 1px solid var(--mono-rule); }
.mono-cart__progress-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 8px;
}
.mono-cart__progress-label { color: var(--mono-text); font-weight: 500; }
.mono-cart__progress-amount { color: var(--mono-muted); }
.mono-cart__progress-track {
height: 2px;
background: var(--mono-rule);
position: relative;
overflow: hidden;
}
.mono-cart__progress-fill {
height: 100%;
background: var(--mono-text);
transition: width .3s ease;
width: 0%;
}
/* PAGE — empty state -------------------------------------- */
.mono-cart__empty {
padding: 120px 32px;
text-align: center;
border-bottom: 1px solid var(--mono-border);
}
.mono-cart__empty-title {
font-size: 64px;
line-height: 1;
letter-spacing: -0.03em;
margin: 0 0 14px;
font-weight: 600;
}
.mono-cart__empty-copy {
color: var(--mono-text-2);
max-width: 46ch;
margin: 0 auto 28px;
}
.mono-cart__empty-cta { min-width: 240px; }
/* DRAWER --------------------------------------------------- */
.mono-cart__drawer {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
visibility: hidden;
}
.mono-cart__drawer.is-open {
pointer-events: auto;
visibility: visible;
}
.mono-cart__drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity .25s ease;
}
.mono-cart__drawer.is-open .mono-cart__drawer-backdrop { opacity: 1; }
.mono-cart__drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 440px;
max-width: 100vw;
background: var(--mono-bg);
color: var(--mono-text);
border-left: 1px solid var(--mono-border);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .3s ease;
outline: none;
}
.mono-cart__drawer.is-open .mono-cart__drawer-panel { transform: translateX(0); }
.mono-cart__drawer-header {
padding: 24px 24px 20px;
border-bottom: 1px solid var(--mono-border);
position: relative;
}
.mono-cart__drawer-eyebrow {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 10px;
}
.mono-cart__drawer-eyebrow > span:first-child { color: var(--mono-text); font-weight: 500; }
.mono-cart__drawer-count { font-variant-numeric: tabular-nums; }
.mono-cart__drawer-title {
font-size: 32px;
letter-spacing: -0.02em;
margin: 0;
font-weight: 600;
line-height: 1;
}
.mono-cart__drawer-close {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--mono-border);
background: var(--mono-bg);
color: var(--mono-text);
cursor: pointer;
}
.mono-cart__drawer-close:hover { background: var(--mono-text); color: var(--mono-bg); }
.mono-cart__drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0;
}
.mono-cart__drawer-items[aria-busy="true"] {
min-height: 200px;
position: relative;
}
.mono-cart__drawer-items[aria-busy="true"]::before {
content: "Loading…";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__drawer-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
padding: 18px 24px;
border-bottom: 1px solid var(--mono-rule);
align-items: start;
}
.mono-cart__drawer-item-image {
width: 80px;
height: 100px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
display: block;
}
.mono-cart__drawer-item-image img { width: 100%; height: 100%; object-fit: cover; }
.mono-cart__drawer-item-image .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.mono-cart__drawer-item-body { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.mono-cart__drawer-item-title {
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--mono-text);
display: block;
}
.mono-cart__drawer-item-variant {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__drawer-item-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
gap: 14px;
}
.mono-cart__drawer-qty {
display: inline-grid;
grid-template-columns: 28px 32px 28px;
border: 1px solid var(--mono-border);
}
.mono-cart__drawer-qty-btn {
background: var(--mono-bg);
border: 0;
cursor: pointer;
height: 28px;
font-family: var(--font-mono);
color: var(--mono-text);
border-right: 1px solid var(--mono-border);
font-size: 13px;
}
.mono-cart__drawer-qty-btn:last-child { border-right: 0; border-left: 1px solid var(--mono-border); }
.mono-cart__drawer-qty-value {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.mono-cart__drawer-item-price {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--mono-text);
}
.mono-cart__drawer-item-remove {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
border-bottom: 1px solid currentColor;
padding: 0 0 1px;
background: transparent;
cursor: pointer;
}
.mono-cart__drawer-item-remove:hover { color: var(--mono-text); }
.mono-cart__drawer-empty {
padding: 64px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.mono-cart__drawer-empty[hidden] { display: none; }
.mono-cart__drawer-empty-icon { color: var(--mono-muted); }
.mono-cart__drawer-empty-title {
font-size: 24px;
letter-spacing: -0.02em;
margin: 0;
font-weight: 600;
}
.mono-cart__drawer-empty-copy {
color: var(--mono-text-2);
margin: 0 0 12px;
max-width: 28ch;
}
.mono-cart__drawer-empty-cta { width: 100%; }
.mono-cart__drawer-footer {
border-top: 1px solid var(--mono-border);
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mono-cart__drawer-sumrow {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
}
.mono-cart__drawer-sumlabel {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-cart__drawer-sumvalue {
font-size: 20px;
font-weight: 500;
color: var(--mono-text);
}
.mono-cart__drawer-note {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 6px;
}
.mono-cart__drawer-viewlink { margin-top: 0; }
/* prefers-reduced-motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
.mono-cart__drawer-panel,
.mono-cart__drawer-backdrop,
.mono-cart__progress-fill {
transition: none;
}
}
/* MOBILE breakpoint --------------------------------------- */
@media (max-width: 979px) {
.mono-cart__head { padding: 24px 0; }
.mono-cart__head-title { font-size: 48px; flex-direction: column; align-items: flex-start; gap: 10px; }
.mono-cart__steps { grid-template-columns: 1fr 1fr; }
.mono-cart__step { border-bottom: 1px solid var(--mono-border); }
.mono-cart__grid { grid-template-columns: 1fr; }
.mono-cart__col-items { border-right: 0; }
.mono-cart__col-summary {
position: static;
max-height: none;
border-top: 1px solid var(--mono-border);
}
.mono-cart__line {
grid-template-columns: 100px 1fr;
padding: 18px;
gap: 14px;
}
.mono-cart__line-image { width: 100px; height: 130px; }
.mono-cart__line-price {
grid-column: span 2;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.mono-cart__upsell { padding: 18px; }
.mono-cart__upsell-grid { grid-template-columns: 1fr; }
.mono-cart__continue { padding: 18px; flex-direction: column; gap: 10px; align-items: flex-start; }
.mono-cart__sum-head,
.mono-cart__progress,
.mono-cart__sum-rows,
.mono-cart__sum-total,
.mono-cart__sum-cta,
.mono-cart__sum-trust { padding-left: 18px; padding-right: 18px; }
.mono-cart__sum-total-amt { font-size: 26px; }
.mono-cart__empty { padding: 64px 18px; }
.mono-cart__empty-title { font-size: 40px; }
.mono-cart__drawer-panel { width: 100vw; border-left: 0; }
.mono-cart__drawer-header { padding: 20px 18px 16px; }
.mono-cart__drawer-close { top: 16px; right: 16px; }
.mono-cart__drawer-title { font-size: 26px; }
.mono-cart__drawer-item { padding: 14px 18px; }
.mono-cart__drawer-footer { padding: 16px 18px 20px; }
.mono-cart__progress { padding: 14px 18px; }
}
/* === Agent F (Article) appends below === */
.mono-article__breadcrumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
padding: 18px 0;
border-bottom: 1px solid var(--mono-rule);
display: flex;
gap: 10px;
align-items: center;
}
.mono-article__breadcrumb a {
color: var(--mono-muted);
text-decoration: none;
}
.mono-article__breadcrumb a:hover { color: var(--mono-text); }
.mono-article__breadcrumb [aria-hidden="true"] { opacity: 0.5; }
.mono-article__breadcrumb [aria-current="page"] { color: var(--mono-text); }
.mono-article__hero {
padding: 64px 0 56px;
border-bottom: 1px solid var(--mono-border);
}
.mono-article__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 18px;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.mono-article__eyebrow strong { color: var(--mono-text); font-weight: 500; }
.mono-article__title {
font-size: clamp(48px, 9vw, 120px);
line-height: 0.92;
letter-spacing: -0.045em;
font-weight: 600;
margin: 0 0 22px;
text-wrap: balance;
}
.mono-article__lede {
font-size: 22px;
line-height: 1.45;
color: var(--mono-text-2);
max-width: 60ch;
margin: 0;
text-wrap: pretty;
}
.mono-article__byline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-article__byline .b {
padding: 18px 24px;
border-right: 1px solid var(--mono-border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-article__byline .b:last-child { border-right: 0; }
.mono-article__byline .b strong {
color: var(--mono-text);
font-weight: 500;
display: block;
margin-bottom: 2px;
}
.mono-article__cover {
height: 600px;
border-bottom: 1px solid var(--mono-border);
position: relative;
background: var(--mono-placeholder);
overflow: hidden;
}
.mono-article__cover img,
.mono-article__cover .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mono-article__cover .cap {
position: absolute;
left: 32px;
bottom: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mono-bg);
padding: 6px 10px;
border: 1px solid var(--mono-border);
color: var(--mono-text);
}
.mono-article__grid {
display: grid;
grid-template-columns: 240px 1fr 240px;
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-article__toc {
border-right: 1px solid var(--mono-border);
padding: 48px 24px;
position: sticky;
top: 64px;
align-self: start;
max-height: calc(100vh - 64px);
overflow: auto;
}
.mono-article__toc[hidden] { display: none; }
.mono-article__toc h5 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 16px;
font-weight: 500;
}
.mono-article__toc ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.mono-article__toc li {
padding: 10px 0;
border-bottom: 1px dashed var(--mono-rule);
color: var(--mono-text-2);
}
.mono-article__toc li:last-child { border-bottom: 0; }
.mono-article__toc-btn {
display: grid;
grid-template-columns: 28px 1fr;
gap: 8px;
align-items: baseline;
width: 100%;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.mono-article__toc-btn:focus-visible {
outline: 1px solid var(--mono-text);
outline-offset: 2px;
}
.mono-article__toc-btn .num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-muted);
letter-spacing: 0.06em;
}
.mono-article__toc-btn .label {
font-size: 13px;
letter-spacing: -0.005em;
}
.mono-article__toc li:hover .mono-article__toc-btn .label,
.mono-article__toc li:hover .mono-article__toc-btn .num { color: var(--mono-text); }
.mono-article__toc li.on .mono-article__toc-btn .label,
.mono-article__toc li.on .mono-article__toc-btn .num { color: var(--mono-text); font-weight: 500; }
.mono-article__prose {
padding: 64px 56px;
border-right: 1px solid var(--mono-border);
max-width: 780px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
counter-reset: mono-h2;
}
.mono-article__prose p {
font-size: 18px;
line-height: 1.65;
color: var(--mono-text);
margin: 0 0 24px;
text-wrap: pretty;
}
.mono-article__prose > p:first-child::first-letter {
font-size: 80px;
float: left;
line-height: 0.85;
padding: 6px 12px 0 0;
font-weight: 600;
}
.mono-article__prose h2 {
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 600;
margin: 48px 0 18px;
counter-increment: mono-h2;
display: flex;
align-items: baseline;
gap: 18px;
}
.mono-article__prose h2::before {
content: counter(mono-h2, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 13px;
color: var(--mono-muted);
font-weight: 400;
letter-spacing: 0.04em;
width: 32px;
flex-shrink: 0;
display: inline-block;
}
.mono-article__prose blockquote {
margin: 48px 0;
padding: 32px 0;
border-top: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
}
.mono-article__prose blockquote p {
font-size: 30px;
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 500;
margin: 0 0 14px;
text-wrap: balance;
}
.mono-article__prose blockquote cite {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
font-style: normal;
}
.mono-article__prose ul {
margin: 0 0 24px;
padding: 0;
list-style: none;
counter-reset: mono-li;
}
.mono-article__prose ul li {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--mono-rule);
font-size: 16px;
line-height: 1.55;
counter-increment: mono-li;
}
.mono-article__prose ul li::before {
content: counter(mono-li, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-muted);
letter-spacing: 0.06em;
}
.mono-article__end {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mono-muted);
margin-top: 48px;
border-top: 1px solid var(--mono-border);
padding-top: 24px;
}
.mono-article__side {
padding: 48px 24px;
position: sticky;
top: 64px;
align-self: start;
max-height: calc(100vh - 64px);
overflow: auto;
}
.mono-article__side h5 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 14px;
font-weight: 500;
}
.mono-article__actions {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--mono-border);
margin-bottom: 32px;
}
.mono-article__actions a,
.mono-article__actions button {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 0;
border-bottom: 1px solid var(--mono-border);
color: var(--mono-text);
background: var(--mono-bg);
text-align: left;
cursor: pointer;
text-decoration: none;
}
.mono-article__actions a:last-child,
.mono-article__actions button:last-child { border-bottom: 0; }
.mono-article__actions a:hover,
.mono-article__actions button:hover { background: var(--mono-surface); }
.mono-article__related-card {
padding: 14px 0;
border-bottom: 1px solid var(--mono-rule);
display: grid;
grid-template-columns: 64px 1fr;
gap: 14px;
align-items: center;
text-decoration: none;
color: var(--mono-text);
}
.mono-article__related-card .pic {
width: 64px;
height: 64px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
}
.mono-article__related-card .pic img,
.mono-article__related-card .pic .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-article__related-card .meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--mono-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.mono-article__related-card h6 {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
margin: 0 0 2px;
}
.mono-article__related-card .price {
font-family: var(--font-mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.mono-article__foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-article__author {
padding: 48px 56px;
border-right: 1px solid var(--mono-border);
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
align-items: start;
}
.mono-article__author .av {
width: 80px;
height: 80px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
border-radius: 50%;
position: relative;
overflow: hidden;
}
.mono-article__author .av img,
.mono-article__author .av .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-article__author .meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 6px;
}
.mono-article__author h4 {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 8px;
}
.mono-article__author p {
font-size: 14px;
line-height: 1.55;
color: var(--mono-text-2);
margin: 0 0 14px;
}
.mono-article__news {
padding: 48px 56px;
background: var(--mono-surface);
display: flex;
flex-direction: column;
justify-content: center;
}
.mono-article__news .meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 8px;
}
.mono-article__news h3 {
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0 0 12px;
text-wrap: balance;
}
.mono-article__news p {
font-size: 14px;
line-height: 1.55;
color: var(--mono-text-2);
margin: 0 0 20px;
max-width: 42ch;
}
.mono-article__news-form {
display: grid;
grid-template-columns: 1fr auto;
border: 1px solid var(--mono-border);
}
.mono-article__news-form input {
border: 0;
border-right: 1px solid var(--mono-border);
padding: 0 14px;
height: 48px;
background: var(--mono-bg);
color: var(--mono-text);
font-family: var(--font-sans);
font-size: 14px;
outline: none;
min-width: 0;
}
/* Related articles strip */
.mono-related__header {
padding: 80px 0 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid var(--mono-border);
gap: 24px;
}
.mono-related__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 14px;
}
.mono-related__eyebrow strong { color: var(--mono-text); font-weight: 500; }
.mono-related__title {
font-size: 48px;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0;
}
.mono-related__more {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
text-decoration: none;
color: var(--mono-text);
white-space: nowrap;
}
.mono-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-related__card {
padding: 0;
border-right: 1px solid var(--mono-border);
text-decoration: none;
color: var(--mono-text);
display: block;
}
.mono-related__card:last-child { border-right: 0; }
.mono-related__card .pic {
height: 340px;
border-bottom: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
background: var(--mono-placeholder);
}
.mono-related__card .pic img,
.mono-related__card .pic .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-related__card .info { padding: 24px 28px; }
.mono-related__card .meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 8px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.mono-related__card h3 {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0 0 8px;
text-wrap: balance;
}
.mono-related__card p {
font-size: 14px;
line-height: 1.55;
color: var(--mono-text-2);
margin: 0;
max-width: 36ch;
}
@media (max-width: 979px) {
.mono-article__grid { grid-template-columns: 1fr; }
.mono-article__toc,
.mono-article__side {
position: static;
max-height: none;
border-right: 0;
padding: 24px 18px;
border-bottom: 1px solid var(--mono-rule);
}
.mono-article__prose { padding: 32px 18px; border-right: 0; }
.mono-article__title { font-size: 48px; }
.mono-article__byline { grid-template-columns: 1fr 1fr; }
.mono-article__byline .b { border-bottom: 1px solid var(--mono-border); }
.mono-article__cover { height: 280px; }
.mono-article__foot { grid-template-columns: 1fr; }
.mono-article__author { border-right: 0; border-bottom: 1px solid var(--mono-border); padding: 24px 18px; }
.mono-article__news { padding: 24px 18px; }
.mono-related__header { padding: 40px 0 24px; flex-direction: column; align-items: stretch; }
.mono-related__title { font-size: 36px; }
.mono-related__grid { grid-template-columns: 1fr; }
.mono-related__card { border-right: 0; border-bottom: 1px solid var(--mono-border); }
.mono-related__card:last-child { border-bottom: 0; }
.mono-related__card .pic { height: 240px; }
}
/* === Agent G (Search) appends below === */
/* ============================================================
MONO — Search (Agent G)
Editorial search shell + predictive overlay + results + empty
Prefix: .mono-search__* / .mono-predict__*
============================================================ */
/* SHELL ---------------------------------------------------- */
.mono-search-section { display: block; background: var(--mono-bg); border-bottom: 1px solid var(--mono-border); }
.mono-search__form { display: block; }
.mono-search__bar {
display: grid;
grid-template-columns: 96px 1fr 96px;
align-items: center;
border-bottom: 1px solid var(--mono-border);
height: 96px;
}
.mono-search__bar-label {
padding: 0 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
border-right: 1px solid var(--mono-border);
height: 100%;
display: flex;
align-items: center;
}
.mono-search__q {
border: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 48px;
letter-spacing: -0.02em;
font-weight: 500;
padding: 0 28px;
outline: none;
color: var(--mono-text);
width: 100%;
font-feature-settings: "ss01" on;
}
.mono-search__q::placeholder { color: var(--mono-muted); opacity: 0.7; }
.mono-search__q::-webkit-search-cancel-button,
.mono-search__q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.mono-search__bar-close {
padding: 0 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
border-left: 1px solid var(--mono-border);
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
}
.mono-search__bar-close:hover { color: var(--mono-text); }
/* META row ------------------------------------------------- */
.mono-search__meta {
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
height: 48px;
border-bottom: 1px solid var(--mono-border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
}
.mono-search__meta .l { padding: 0 24px; border-right: 1px solid var(--mono-border); height: 100%; display: flex; align-items: center; }
.mono-search__meta .m { padding: 0 28px; display: flex; gap: 24px; flex-wrap: wrap; }
.mono-search__meta .m strong { color: var(--mono-text); font-weight: 500; }
.mono-search__meta .r { padding: 0 28px; display: flex; gap: 18px; }
.mono-search__meta .r a { color: var(--mono-muted); cursor: default; display: flex; align-items: center; gap: 6px; }
.mono-search__meta .r a.on { color: var(--mono-text); }
.mono-search__meta .r a .kbd {
border: 1px solid var(--mono-border);
padding: 2px 5px;
font-size: 9px;
line-height: 1;
}
/* PREDICTIVE ---------------------------------------------- */
.mono-predict {
display: grid;
grid-template-columns: 340px 1fr 1fr;
gap: 0;
border-bottom: 1px solid var(--mono-border);
min-height: 560px;
}
.mono-predict[hidden] { display: none; }
.mono-predict__col {
padding: 36px 28px;
border-right: 1px solid var(--mono-border);
}
.mono-predict__col:last-child { border-right: 0; }
.mono-predict__col h5 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 16px;
font-weight: 500;
display: flex;
justify-content: space-between;
}
.mono-predict__col h5 span:last-child { color: var(--mono-text); }
.mono-predict__recent-clear { cursor: pointer; }
.mono-predict__recent-clear:hover { text-decoration: underline; }
/* Suggestions list */
.mono-predict__sugg { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }
.mono-predict__sugg li {
display: block;
border-bottom: 1px solid var(--mono-rule);
}
.mono-predict__sugg li:last-child { border-bottom: 0; }
.mono-predict__sugg li.empty {
padding: 12px 0;
font-size: 13px;
color: var(--mono-muted);
}
.mono-predict__sugg li a {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 12px 0;
align-items: center;
cursor: pointer;
}
.mono-predict__sugg li a .text { font-size: 14px; letter-spacing: -0.005em; color: var(--mono-text); }
.mono-predict__sugg li a .text em { font-style: normal; background: var(--mono-surface); padding: 0 2px; }
.mono-predict__sugg li a .arr { font-family: var(--font-mono); font-size: 11px; color: var(--mono-muted); letter-spacing: 0.06em; }
.mono-predict__sugg li a.on,
.mono-predict__sugg li a:hover {
background: var(--mono-surface);
margin: 0 -28px;
padding: 12px 28px;
}
.mono-predict__sugg li a.on { outline: none; }
/* Recent chips */
.mono-predict__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.mono-predict__chip {
border: 1px solid var(--mono-border);
padding: 6px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--mono-text);
background: var(--mono-bg);
}
.mono-predict__chip .x { color: var(--mono-muted); }
.mono-predict__chip:hover { background: var(--mono-text); color: var(--mono-bg); }
.mono-predict__chip:hover .x { color: var(--mono-bg); }
/* Quick categories */
.mono-predict__quick {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--mono-border);
}
.mono-predict__quick a {
padding: 18px 16px;
border-right: 1px solid var(--mono-border);
border-bottom: 1px solid var(--mono-border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--mono-text);
cursor: pointer;
}
.mono-predict__quick a:nth-child(2n) { border-right: 0; }
.mono-predict__quick a:nth-last-child(-n+2) { border-bottom: 0; }
.mono-predict__quick a:hover { background: var(--mono-surface); }
.mono-predict__quick a .n {
font-family: var(--font-mono);
font-size: 10px;
color: var(--mono-muted);
letter-spacing: 0.06em;
}
/* Predictive product row */
.mono-predict__products { display: flex; flex-direction: column; }
.mono-predict__pp {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--mono-rule);
cursor: pointer;
align-items: center;
color: var(--mono-text);
}
.mono-predict__pp:last-child { border-bottom: 0; }
.mono-predict__pp .pic {
width: 80px;
height: 96px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.mono-predict__pp .pic img,
.mono-predict__pp .pic .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-predict__pp .body { min-width: 0; }
.mono-predict__pp h6 {
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
margin: 0 0 4px;
color: var(--mono-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mono-predict__pp .row {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--mono-text);
font-variant-numeric: tabular-nums;
}
.mono-predict__pp.on,
.mono-predict__pp:hover { background: var(--mono-surface); }
/* Editorial cards (collections + articles) */
.mono-predict__editorial-list { display: flex; flex-direction: column; }
.mono-predict__editorial {
display: grid;
grid-template-columns: 64px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--mono-rule);
align-items: center;
cursor: pointer;
color: var(--mono-text);
}
.mono-predict__editorial:last-child { border-bottom: 0; }
.mono-predict__editorial .pic {
width: 64px;
height: 64px;
background: var(--mono-placeholder);
border: 1px solid var(--mono-rule);
position: relative;
overflow: hidden;
}
.mono-predict__editorial .pic img,
.mono-predict__editorial .pic .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-predict__editorial .body { min-width: 0; }
.mono-predict__editorial .meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--mono-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.mono-predict__editorial h6 {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
margin: 0;
text-wrap: balance;
color: var(--mono-text);
}
.mono-predict__editorial.on,
.mono-predict__editorial:hover { background: var(--mono-surface); }
/* RESULTS state ------------------------------------------- */
.mono-search__results { padding: 48px 0 80px; background: var(--mono-bg); }
.mono-search__results[hidden] { display: none; }
.mono-search__results-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 0 24px;
border-bottom: 1px solid var(--mono-border);
gap: 24px;
}
.mono-search__results-head h2 {
font-size: 48px;
line-height: 1;
letter-spacing: -0.025em;
font-weight: 600;
margin: 0;
text-wrap: balance;
color: var(--mono-text);
}
.mono-search__results-head h2 em { font-style: italic; font-weight: 400; }
.mono-search__results-head .meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 8px;
}
.mono-search__results-head .right {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
display: flex;
gap: 18px;
align-items: center;
}
.mono-search__results-head .right .active {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
}
/* Tabs */
.mono-search__tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--mono-border);
}
.mono-search__tabs .t {
padding: 14px 18px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
cursor: pointer;
border-right: 1px solid var(--mono-border);
display: flex;
align-items: center;
gap: 8px;
background: transparent;
}
.mono-search__tabs .t[disabled] { cursor: not-allowed; opacity: 0.4; }
.mono-search__tabs .t.on {
color: var(--mono-text);
border-bottom: 1px solid var(--mono-text);
margin-bottom: -1px;
}
.mono-search__tabs .t .n { font-size: 10px; opacity: 0.6; }
/* Filter bar */
.mono-search__filter-bar {
display: flex;
gap: 6px;
padding: 18px 0;
border-bottom: 1px solid var(--mono-border);
overflow-x: auto;
align-items: center;
}
.mono-search__filter-bar .lbl {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-right: 6px;
}
.mono-search__filter-bar .b {
border: 1px solid var(--mono-border);
padding: 7px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
color: var(--mono-text);
}
.mono-search__filter-bar .b .n { opacity: 0.5; font-size: 10px; }
.mono-search__filter-bar .clear {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mono-muted);
cursor: pointer;
flex-shrink: 0;
}
/* Results grid + cards */
.mono-search__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-left: 1px solid var(--mono-rule);
border-top: 1px solid var(--mono-rule);
margin-top: 24px;
}
.mono-search__results[data-active-tab="products"] [data-tab-pane]:not([data-tab-pane="products"]),
.mono-search__results[data-active-tab="collections"] [data-tab-pane]:not([data-tab-pane="collections"]),
.mono-search__results[data-active-tab="journal"] [data-tab-pane]:not([data-tab-pane="journal"]),
.mono-search__results[data-active-tab="pages"] [data-tab-pane]:not([data-tab-pane="pages"]) {
display: none;
}
.mono-search__grid--pages { grid-template-columns: repeat(2, 1fr); }
.mono-search__card {
padding: 0;
border-right: 1px solid var(--mono-rule);
border-bottom: 1px solid var(--mono-rule);
color: var(--mono-text);
display: block;
}
.mono-search__card .pic {
aspect-ratio: 3 / 4;
background: var(--mono-placeholder);
position: relative;
border-bottom: 1px solid var(--mono-rule);
overflow: hidden;
}
.mono-search__card .pic img,
.mono-search__card .pic .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-search__card--pg { aspect-ratio: auto; }
.mono-search__card--pg .info { min-height: 160px; }
.mono-search__card .info { padding: 14px 14px 18px; }
.mono-search__card .info .top {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--mono-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.mono-search__card .info h4 {
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
margin: 0 0 4px;
color: var(--mono-text);
}
.mono-search__card .info .row {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.mono-search__card .info .row .colors { color: var(--mono-muted); }
.mono-search__card:hover .info h4 { text-decoration: underline; }
/* Load more */
.mono-search__more {
display: flex;
justify-content: center;
padding: 32px 0;
border-top: 1px solid var(--mono-border);
margin-top: -1px;
}
/* EMPTY state --------------------------------------------- */
.mono-search__empty {
padding: 80px 32px;
border-top: 1px solid var(--mono-border);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
background: var(--mono-bg);
}
.mono-search__empty .glyph {
width: 80px;
height: 80px;
border: 1px solid var(--mono-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--mono-muted);
}
.mono-search__empty .eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 14px;
}
.mono-search__empty h2 {
font-size: 48px;
line-height: 1;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0;
color: var(--mono-text);
}
.mono-search__empty h2 em { font-style: italic; font-weight: 400; }
.mono-search__empty p {
font-size: 16px;
line-height: 1.55;
color: var(--mono-text-2);
max-width: 48ch;
margin: 0;
}
.mono-search__empty .suggestions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
}
.mono-search__empty .suggestions a {
border: 1px solid var(--mono-border);
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
color: var(--mono-text);
background: var(--mono-bg);
}
.mono-search__empty .suggestions a:hover {
background: var(--mono-text);
color: var(--mono-bg);
border-color: var(--mono-text);
}
.mono-search__empty .optin {
border-top: 1px solid var(--mono-border);
padding-top: 24px;
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
width: 100%;
max-width: 480px;
}
.mono-search__empty .optin .copy {
margin: 0;
max-width: 42ch;
color: var(--mono-text-2);
}
.mono-search__empty .optin-form {
display: grid;
grid-template-columns: 1fr auto;
border: 1px solid var(--mono-border);
width: 380px;
max-width: 100%;
margin-top: 8px;
background: var(--mono-bg);
}
.mono-search__empty .optin-form input[type="email"] {
border: 0;
border-right: 1px solid var(--mono-border);
padding: 0 14px;
height: 44px;
background: transparent;
font-family: var(--font-sans);
font-size: 14px;
outline: none;
color: var(--mono-text);
}
.mono-search__empty .optin-form input[type="email"]::placeholder { color: var(--mono-muted); }
.mono-search__empty .optin-form .btn { height: 44px; border: 0; }
/* MOBILE -------------------------------------------------- */
@media (max-width: 979px) {
.mono-search__bar { grid-template-columns: 60px 1fr 60px; height: 72px; }
.mono-search__bar-label { padding: 0 14px; font-size: 9px; }
.mono-search__bar-close { padding: 0 14px; font-size: 9px; }
.mono-search__q { font-size: 24px; padding: 0 16px; }
.mono-search__meta {
grid-template-columns: 1fr;
height: auto;
}
.mono-search__meta .l,
.mono-search__meta .m,
.mono-search__meta .r {
padding: 10px 18px;
border-right: 0;
border-bottom: 1px solid var(--mono-rule);
}
.mono-search__meta .r { border-bottom: 0; flex-wrap: wrap; gap: 12px; }
.mono-predict {
grid-template-columns: 1fr;
min-height: 0;
}
.mono-predict__col {
border-right: 0;
border-bottom: 1px solid var(--mono-border);
padding: 24px 18px;
}
.mono-predict__col:last-child { border-bottom: 0; }
.mono-search__results { padding: 32px 0 56px; }
.mono-search__results-head {
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.mono-search__results-head h2 { font-size: 32px; }
.mono-search__tabs { overflow-x: auto; }
.mono-search__tabs .t { flex-shrink: 0; padding: 12px 14px; }
.mono-search__grid { grid-template-columns: repeat(2, 1fr); }
.mono-search__grid--pages { grid-template-columns: 1fr; }
.mono-search__empty { padding: 56px 18px; }
.mono-search__empty h2 { font-size: 32px; }
.mono-search__empty .optin-form { width: 100%; }
}
/* === Agent H (Account/Auth) appends below === */
/* ============================================================
MONO — Account / Auth (Agent H)
Customer login / register / forgot-password
Prefix: .mono-auth__*
Mockup: docs/design_handoff_mono_store/Mono Account.html (STATE A)
============================================================ */
.mono-auth {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 720px;
border-bottom: 1px solid var(--mono-border);
}
/* Image column ------------------------------------------- */
.mono-auth__pic {
position: relative;
background: var(--mono-placeholder);
border-right: 1px solid var(--mono-border);
overflow: hidden;
}
.mono-auth__pic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mono-auth__pic .ph {
position: absolute;
inset: 0;
aspect-ratio: auto;
}
.mono-auth__cap {
position: absolute;
left: 24px;
bottom: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-text);
background: var(--mono-bg);
padding: 6px 10px;
border: 1px solid var(--mono-border);
}
/* Form column -------------------------------------------- */
.mono-auth__form-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 0 32px;
}
.mono-auth__form {
padding: 80px 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.mono-auth__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin: 0 0 18px;
}
.mono-auth__eyebrow strong {
color: var(--mono-text);
font-weight: 500;
}
.mono-auth__title {
font-size: 64px;
line-height: 0.95;
letter-spacing: -0.03em;
font-weight: 600;
margin: 0 0 16px;
color: var(--mono-text);
text-wrap: balance;
}
.mono-auth__lede {
font-size: 16px;
line-height: 1.55;
color: var(--mono-text-2);
margin: 0 0 32px;
max-width: 42ch;
}
/* Sign-in / Create-account toggle ------------------------ */
.mono-auth__toggle {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--mono-border);
margin-bottom: 24px;
}
.mono-auth__t {
padding: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
color: var(--mono-text);
border-right: 1px solid var(--mono-border);
cursor: pointer;
transition: background .15s linear, color .15s linear;
}
.mono-auth__t:last-child { border-right: 0; }
.mono-auth__t:hover { background: var(--mono-surface); }
.mono-auth__t.is-on {
background: var(--mono-text);
color: var(--mono-bg);
}
/* Field stack (overlapping borders, Mono signature) ------ */
.mono-auth__form-el { display: flex; flex-direction: column; }
.mono-auth__field {
display: flex;
flex-direction: column;
border: 1px solid var(--mono-border);
margin-bottom: -1px;
padding: 10px 14px;
background: var(--mono-bg);
position: relative;
}
.mono-auth__field:focus-within {
z-index: 1;
border-color: var(--mono-text);
box-shadow: inset 0 0 0 1px var(--mono-text);
}
.mono-auth__field label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mono-muted);
margin-bottom: 4px;
}
.mono-auth__field input {
border: 0;
background: transparent;
outline: none;
font-family: var(--font-sans);
font-size: 15px;
color: var(--mono-text);
height: 24px;
padding: 0;
width: 100%;
}
.mono-auth__field input::placeholder { color: var(--mono-muted); }
/* Login row: remember me + forgot password --------------- */
.mono-auth__below {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--mono-muted);
text-transform: uppercase;
margin: 18px 0 24px;
}
.mono-auth__remember {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--mono-text-2);
}
.mono-auth__remember input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--mono-text);
}
.mono-auth__forgot {
color: var(--mono-text);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.mono-auth__forgot:hover { color: var(--mono-text-2); }
/* Submit button — large variant -------------------------- */
.mono-auth__submit { height: 60px; padding: 0 32px; font-size: 14px; margin-top: 24px; }
/* When no .below row precedes (register/forgot), add gap */
.mono-auth__form-el > .mono-auth__field + .mono-auth__submit { margin-top: 24px; }
/* Passwordless block ------------------------------------- */
/* Inserted between the password form and the .mono-auth__foot
line. One