/* market.css -- the look of the marketplace: storefront, seller portal, back office, sign-in.
 *
 * Separate from app.css (the operations console) on purpose: these pages face buyers and
 * sellers and must read as a product, not an admin tool. Rules this file keeps:
 *   - no CDN and no build step: one stylesheet served from /static; the fonts are self-hosted
 *     under /static/fonts (see the fonts note below), so no request leaves the site;
 *   - Avera navy, blue and pale surfaces; retain distinct status and error colors.
 *   - contrast at least 4.5:1 for every text/background pair (WCAG AA, recomputed 2026-10-02 with
 *     the WCAG relative-luminance formula; a pair not listed here is checked before it is added):
 *       ink #142b46 on #ffffff 14.35:1, on #f7f9fc 13.60:1, on #e9f2fb 12.68:1;
 *       ink-2 #2b4869 on #ffffff 9.40:1, on #e9f2fb 8.31:1 (MOCK banner), on #dbeaf6 7.66:1;
 *       muted #52677d on #ffffff 5.84:1, on #f7f9fc 5.54:1, on #f8fafc 5.58:1, on #e9f2fb 5.16:1,
 *         on #eaf3f8 5.19:1;
 *       brand #2768b7 on #ffffff 5.60:1, on #f7f9fc 5.31:1, on #e9f2fb 4.95:1, on #eaf3f8 4.98:1,
 *         on #dbeaf6 4.56:1;  brand-dark #1d4f8e on #e9f2fb 7.25:1, on #dceaf8 6.70:1;
 *       white on #2768b7 5.60:1, on #1d4f8e 8.20:1, on #167365 5.72:1, on #10584d 8.32:1,
 *         on #b91c1c 6.47:1, on #991b1b 8.31:1, on #142b46 14.35:1;
 *       status: #1e40af/#dbeafe 7.15:1, #5b21b6/#ede9fe 7.57:1, #065f46/#d1fae5 6.78:1,
 *         #991b1b/#fee2e2 6.80:1, #92400e/#fef3c7 6.37:1, #374151/#e5e7eb 8.33:1;
 *       flash: #065f46/#ecfdf5 7.29:1, #991b1b/#fef2f2 7.60:1, #92400e/#fffbeb 6.84:1;
 *         mock note #78350f/#fffbeb 8.75:1;
 *       a problem row and the problem list (#fef2f2, CSV-UI-01): ink 13.12:1, muted 5.34:1,
 *         brand 5.12:1, #991b1b 7.60:1;
 *       thumbnail tones (label on tile): tone-0 #2f5f91/#e8f1fb 5.81:1, tone-1 #2f6862/#e3f3ef
 *         5.59:1, tone-2 #6f5b36/#f6efe2 5.69:1, tone-3 #555a8c/#ecebf8 5.52:1, tone-4
 *         #1d5f74/#e0f2f7 6.19:1, tone-5 #476833/#eaf4e2 5.62:1, tone-6 #8a463d/#f8ebe8 5.97:1,
 *         tone-7 #6d4a7c/#f4ecf6 6.22:1, custom #2768b7/#e9f2fb 4.95:1;
 *   - the approved visual direction (Block E, 2026-10-15; reference avera-prototype.netlify.app,
 *     its look only): warm off-white page, ink text, cobalt actions, a dark hero band. Pairs added
 *     then, recomputed with the same formula:
 *       ink #181c20 on #ffffff 17.13:1, on #f4f3ef 15.43:1, on #fbfaf8 16.42:1, on #eaeeff 14.82:1;
 *       ink-2 #353b42 on #ffffff 11.32:1, on #f4f3ef 10.19:1;
 *       muted #5d646c on #ffffff 5.99:1, on #f4f3ef 5.40:1, on #fbfaf8 5.74:1, on #eaeeff 5.18:1;
 *       cobalt #345cff on #ffffff 5.10:1, on #f4f3ef 4.59:1; white on #345cff 5.10:1;
 *       cobalt-2 #2347e0 on #ffffff 6.89:1, on #f4f3ef 6.20:1, on #eaeeff 5.96:1; white on #2347e0 6.89:1;
 *       on the dark band and footer #181c20: white 17.13:1, #c9ced4 10.82:1 (MOCK banner),
 *         #c9d3ff 11.62:1, #b9c0c8 9.33:1, #9aa3ad 6.70:1, #e3e7ec 13.79:1; the glass panel
 *         #232a33: #c9d3ff 9.82:1, #b9c0c8 7.88:1;
 *       ok #0f7b5c on #ffffff 5.24:1, on #e9f5f0 4.69:1;
 *       checkpoint 2 notices: #8a5300 on #fff4e5 5.82:1 (stock note), #9b2c2c on #fdecec 6.59:1
 *         (error, unavailable), #2347e0 on #eaeeff 5.96:1 (adjusted), #9b2c2c on #ffffff 7.53:1,
 *         muted #5d646c on #fff4e5 5.51:1, on #e9e7e1 4.85:1;
 *   - fonts (owner approval E2, 2026-10-15): Inter Tight 500-800 (display), Inter 400/500/600
 *     (text) and JetBrains Mono 500, self-hosted under /static/fonts/ from their official sources
 *     with their SIL OFL 1.1 notices beside them; no request leaves the site. The weights are the
 *     reference's own; a weight between two faces renders the nearer face, as there;
 *   - layouts work at 768 px and 1280 px; only a wide table scrolls, inside .scroll-x;
 *   - focus is always visible; every control a finger uses is at least 44 px high.
 */

:root {
  /* Block E (2026-10-15): the reference's palette; the names stay so every rule keeps its role. */
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --line: #e8e6e0;
  --line-strong: #cfccc4;
  --ink: #181c20;
  --ink-2: #353b42;
  --muted: #5d646c;
  --brand: #345cff;
  --brand-dark: #2347e0;
  --brand-soft: #eaeeff;
  --night: #181c20;
  --night-ink: #c9ced4;
  --ok-ink: #065f46;
  --ok-bg: #d1fae5;
  --bad-ink: #991b1b;
  --bad-bg: #fee2e2;
  --warn-ink: #92400e;
  --warn-bg: #fef3c7;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(24, 28, 32, 0.06), 0 8px 24px rgba(24, 28, 32, 0.06);
  --shadow-lift: 0 2px 6px rgba(24, 28, 32, 0.08), 0 24px 60px rgba(24, 28, 32, 0.16);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Self-hosted fonts (FONTS.md of Block E records source, version and sha256). Inter Tight is one
   variable file declared once per weight, as the reference's font request declares it, so a weight
   in between renders the face the reference renders. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-tight/InterTight-Variable.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-tight/InterTight-Variable.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-tight/InterTight-Variable.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/inter-tight/InterTight-Variable.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2"); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The footer stays at the bottom of a short page. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main, body > .signin-page { flex: 1 0 auto; width: 100%; }

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 12px; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.strong { font-weight: 650; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
}

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.page { padding-top: 28px; padding-bottom: 56px; min-height: 60vh; }

/* ------------------------------------------------------------------ banner and header */

.mockbar { background: #e9f2fb; color: #2b4869; font-size: .76rem; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: center; }
/* MOCK and PROTOTYPE are never smaller than the banner's sentence (owner decision D-c). */
.mockbar strong { letter-spacing: .12em; margin-right: 10px; }
.site-header { position: relative; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.header-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; padding-top: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); width: fit-content; }
.brand-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.brand-word { font-size: 30px; line-height: .9; font-weight: 850; letter-spacing: -.075em; }
.brand-word small { display: block; margin-top: 7px; color: #52677d; font-size: 7px; letter-spacing: .17em; line-height: 1.2; font-weight: 800; }
.brand-area { font-size: .7rem; padding: 4px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-dark); }
.header-search { min-width: 0; display: flex; margin: 0; border: 1px solid #b9cee3; background: #f8fafc; border-radius: 10px; overflow: hidden; }
.header-search:focus-within { outline: 3px solid #b7d8f0; outline-offset: 2px; }
.header-search input { flex: 1; width: 0; min-width: 0; min-height: 48px; padding: 12px 16px; border: 0; font: inherit; background: transparent; color: var(--ink); }
.header-search input:focus { outline: none; }
.header-search .btn { border-radius: 0; min-width: 92px; }
.header-nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid #edf1f6; padding: 5px 0; }
.header-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.header-nav .nav-about { margin-left: auto; }
.header-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: .875rem; font-weight: 650; }
.header-nav a:hover, .header-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-dark); }
.cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 50px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; }
.account { position: relative; grid-column: 3; grid-row: 1; }
.account summary { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .875rem; font-weight: 650; border-radius: 8px; }
.account summary::-webkit-details-marker { display: none; }
.account[open] summary, .account summary:hover { background: var(--brand-soft); }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 265px; max-width: calc(100vw - 32px); background: #fff; padding: 20px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); }
.account-name, .account-org { display: block; overflow-wrap: anywhere; }
.account-name { font-weight: 700; font-size: .9rem; }
.account-org { color: var(--muted); font-size: .8rem; margin: 5px 0 16px; }
.account form { margin: 0; }
.area-seller .header-row, .area-staff .header-row { grid-template-columns: minmax(0, 1fr) auto; }
.area-seller .account, .area-staff .account { grid-column: 2; }

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px; font-size: 0.875rem;
}

/* ------------------------------------------------------------------ buttons and forms */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: #b91c1c; border-color: #b91c1c; }
.btn.danger:hover { background: #991b1b; border-color: #991b1b; }
.btn.large { min-height: 52px; padding: 12px 22px; font-size: 1.05rem; }
.btn.small { padding: 8px 12px; font-size: 0.9rem; }
.btn.block { width: 100%; }

.field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 650; font-size: 0.92rem; color: var(--ink-2); }
.field input, .field select, .field textarea, .hero-search input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .hero-search input:focus,
.header-search input:focus { outline: 3px solid rgba(29, 78, 216, 0.35); outline-offset: 0; border-color: var(--brand); }
.field .help { font-size: 0.82rem; color: var(--muted); }
/* A table of inputs, row by row (the listing form's specifications, roadmap 1C; the rate card's
   materials, 1D): the fields' look, at the 44px touch target every other field has. */
.input-table td { padding: 6px 8px; }
.input-table input {
  width: 100%; min-width: 7rem; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit;
}
.input-table input:focus { outline: 3px solid rgba(29, 78, 216, 0.35); outline-offset: 0; border-color: var(--brand); }
.field.check { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
.field.check input { width: 20px; min-height: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 750; font-size: 0.95rem; margin-bottom: 10px; color: var(--ink); }
.grid-2, .grid-3 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 8px 0 0; }
.inline { display: inline; }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

/* ------------------------------------------------------------------ messages */

.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 20px; font-weight: 600; border: 1px solid transparent; }
.flash.ok { background: #ecfdf5; color: var(--ok-ink); border-color: #a7f3d0; }
.flash.error { background: #fef2f2; color: var(--bad-ink); border-color: #fecaca; }
.flash.warn { background: #fffbeb; color: var(--warn-ink); border-color: #fde68a; }
.mock-note {
  background: #fffbeb; color: #78350f; border: 1px solid #fde68a;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.875rem; margin: 12px 0 0;
}

/* ------------------------------------------------------------------ cards and sections */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.card.flush { padding: 0; overflow: hidden; }
.card-title { font-size: 1.1rem; font-weight: 750; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.sub-title { font-size: 0.95rem; margin: 20px 0 8px; color: var(--ink-2); }
.section { margin-top: 36px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.page-head { margin-bottom: 24px; }
.page-head h1 { margin-bottom: 6px; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.stack-gap { display: flex; flex-direction: column; gap: 16px; }
.split { display: grid; gap: 24px; grid-template-columns: 1fr; }
.two-col { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: minmax(0, 1fr) 340px; }
}
.crumbs { font-size: 0.875rem; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plain-list li { display: flex; flex-direction: column; }
.how-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }

.center-block { max-width: 640px; margin: 48px auto; text-align: center; }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.center-card {
  width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px; box-shadow: var(--shadow-lift);
}
.center-card .brand { margin-bottom: 20px; }

.empty-state {
  text-align: center; padding: 48px 24px; background: var(--surface);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty-state h2 { font-size: 1.2rem; }
.empty-state p { color: var(--muted); max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ home */

.hero { display: grid; gap: 38px; grid-template-columns: 1.1fr 1fr; align-items: center; background: radial-gradient(circle at 88% 30%, #dbeaf6, transparent 45%), linear-gradient(110deg, #fff, #eff6fb); border: 1px solid var(--line); border-radius: 20px; padding: 44px; overflow: hidden; }
.hero h1 { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.08; letter-spacing: -.055em; margin: 14px 0 20px; }
.hero h1 span { color: var(--brand); text-decoration: underline; text-decoration-color: #bfe9ef; text-decoration-thickness: 7px; text-underline-offset: 5px; }
.hero .lead { font-size: 1rem; line-height: 1.8; max-width: 50ch; }
.hero .eyebrow { font-size: .65rem; letter-spacing: .14em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.hero-actions .btn.large { font-size: .875rem; }
.text-link { font-size: .875rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.text-link:hover { text-decoration: underline; }
.hero-inventory { background: rgba(255,255,255,.9); border: 1px solid #d1e0ed; border-top: 3px solid var(--brand); padding: 24px; border-radius: 16px; box-shadow: 0 20px 50px #18385812; }
.inventory-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 22px; }
.inventory-caption .eyebrow { margin: 0; font-size: .58rem; line-height: 1.7; max-width: 24ch; }
.tiny-tag { display: inline-block; background: var(--brand-soft); border-radius: 30px; padding: 5px 9px; font-size: .65rem; font-weight: 750; color: var(--brand-dark); white-space: nowrap; }
.hero-components { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.hero-components a { text-decoration: none; color: var(--ink); font-size: .7rem; font-weight: 700; }
.hero-components a > span { display: flex; justify-content: space-between; gap: 5px; padding: 12px 2px; }
.hero-components .thumb { aspect-ratio: 1; border: 1px solid var(--line); }
.hero-components .thumb-glyph { width: 70%; }
.hero-components .thumb-label { display: none; }
.hero-components a:hover .thumb { border-color: var(--brand); }
.inventory-foot { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; display: flex; align-items: center; gap: 8px; }
.availability-dot { width: 7px; height: 7px; flex-shrink: 0; background: #41827e; border-radius: 50%; }
.value-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding: 24px 10px; gap: 22px; }
.value-strip > div { display: flex; align-items: center; gap: 14px; }
.value-icon { font-size: .7rem; color: var(--brand); background: #e9f2fb; border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; }
.value-strip strong { display: block; font-size: .85rem; }
.value-strip small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.custom-banner { margin-top: 40px; padding: 28px 32px; background: #eaf3f8; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.custom-banner .eyebrow { font-size: .65rem; }
.custom-banner p:last-child { margin: 8px 0 0; font-size: .875rem; color: var(--muted); }
.custom-banner .btn { flex-shrink: 0; }
.order-welcome { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.order-welcome h3 { font-size: 1rem; }

.seller-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seller-item {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.seller-item:hover { border-color: #c7d2fe; }
.seller-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.seller-go { margin-left: auto; color: var(--brand); font-weight: 700; }
.seller-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--night); color: #fff; font-weight: 800;
}
.seller-name { font-weight: 700; }
/* The seller's name opens its page (roadmap gap G5), stretched over its row: the whole row is the
   target, and the focus ring outlines the row. */
a.seller-name { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.seller-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
a.seller-name:hover { color: var(--brand-dark); text-decoration: underline; }
a.seller-name:focus-visible { outline: none; }
a.seller-name:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 2px; }

.order-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.order-mini {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.order-mini:hover { border-color: #c7d2fe; color: var(--ink); }
.order-number { font-weight: 750; }
.order-total { font-weight: 750; white-space: nowrap; }

/* ------------------------------------------------------------------ thumbnails */

.thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
}
.thumb-glyph { width: 52%; max-width: 116px; height: auto; opacity: 0.9; }
.thumb-label {
  position: absolute; left: 10px; bottom: 8px; font-size: 0.72rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.thumb-small { flex: 0 0 56px; width: 56px; aspect-ratio: 1 / 1; border-radius: 10px; }
.thumb-small .thumb-label { display: none; }
.thumb-small .thumb-glyph { width: 60%; }
.thumb-large { aspect-ratio: 4 / 3; border-radius: 18px; }
.thumb-large .thumb-glyph { max-width: 140px; }
/* One palette per tone (market_shell.CATEGORY_TONES = 8); each label pair is in the header list. */
.tone-0 { background: #e8f1fb; color: #2f5f91; }
.tone-1 { background: #e3f3ef; color: #2f6862; }
.tone-2 { background: #f6efe2; color: #6f5b36; }
.tone-3 { background: #ecebf8; color: #555a8c; }
.tone-4 { background: #e0f2f7; color: #1d5f74; }
.tone-5 { background: #eaf4e2; color: #476833; }
.tone-6 { background: #f8ebe8; color: #8a463d; }
.tone-7 { background: #f4ecf6; color: #6d4a7c; }
.tone-custom { background: #e9f2fb; color: #2768b7; }

/* ------------------------------------------------------------------ search */

.with-sidebar { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .with-sidebar { grid-template-columns: 260px minmax(0, 1fr); } }
.filters { display: flex; flex-direction: column; gap: 16px; }
.filter-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.side-note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.side-note p { margin-bottom: 6px; }
/* The search page's note on custom parts, below the results at every width (a secondary way to buy). */
.custom-note { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.custom-note p { margin: 0; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .filter-form .filter-actions { grid-column: 1 / -1; }
}

.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.product-card .thumb { aspect-ratio: 16 / 9; }
.product-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow-lift); border-color: #c7d2fe; transform: translateY(-2px); }
.product-inner { display: flex; flex-direction: column; height: 100%; color: var(--ink); padding: 10px; gap: 10px; }
/* The title is the card's link to the listing, stretched over the whole card (roadmap gap G5): a
   click anywhere opens the listing, and its focus ring outlines the card, never only the title. The
   seller's name is a second link, drawn above that layer (.product-seller-link). */
.product-link { color: inherit; text-decoration: none; }
.product-link:hover { color: inherit; }
.product-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 13px; }
.product-link:focus-visible { outline: none; }
.product-link:focus-visible::after { outline: 3px solid var(--brand); outline-offset: -3px; }
.product-body { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.product-title {
  font-size: 0.98rem; font-weight: 650; margin: 0; line-height: 1.35;
  overflow-wrap: anywhere;
}
.product-seller { font-size: 0.85rem; color: var(--muted); margin: 0; }
/* The seller's name on a card (G5): above the card's stretched link, in the brand colour (5.60:1 on
   white), alone on its line; 14 px of padding above and below, taken back by the margins, give it a
   44 px touch target without moving the card's other lines. */
.product-seller-link {
  position: relative; z-index: 2; display: inline-block; padding: 14px 0; margin: -14px 0;
  color: var(--brand); text-decoration: none; overflow-wrap: anywhere;
}
.product-seller-link:hover, .product-seller-link:focus-visible { color: var(--brand-dark); text-decoration: underline; }
.product-price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price { font-weight: 800; font-size: 1.2rem; color: var(--ink); white-space: nowrap; }
.price.big { font-size: 1.8rem; letter-spacing: -0.01em; }
.per { color: var(--muted); font-size: 0.875rem; }
.product-meta { display: flex; gap: 14px; margin: 6px 0 0; font-size: 0.82rem; flex-wrap: wrap; }
.product-meta div { display: flex; gap: 4px; }
.product-meta dt { color: var(--muted); }
.product-meta dd { margin: 0; font-weight: 650; }
/* A listing's condition (roadmap gap G1): one look for every stated grade, since the grades are the
   tenant's configuration and no colour belongs to one (brand-dark on brand-soft, 7.25:1), and a
   dashed, quieter one for "Condition not stated" (muted on white, 5.84:1). */
.product-condition { margin: 0; }
.condition-tag {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 2px 9px;
  border: 1px solid transparent; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
  font-size: .72rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere;
}
.condition-tag.unstated { background: #fff; color: var(--muted); border: 1px dashed var(--line-strong); font-weight: 600; }
/* In a table a tag never breaks, and a part's title keeps a readable width: below it the table
   scrolls inside .scroll-x rather than wrapping each title word by word (the seller's listings
   table at 768 px, once G1 added its Condition column). */
.table .condition-tag { white-space: nowrap; }
.cell-part { min-width: 14rem; }

/* ------------------------------------------------------------------ listing detail */

.product-detail { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.product-media { display: flex; flex-direction: column; gap: 16px; }
.product-heading { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.sold-by { color: var(--muted); }
.description { color: var(--ink-2); }
.buy-box {
  margin-top: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; box-shadow: var(--shadow);
}
.buy-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.add-form { margin-top: 18px; }

.facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0; }
.facts div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.facts dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.facts dd { margin: 2px 0 0; font-weight: 700; }
.facts.inline { margin-bottom: 8px; }

.spec-list { margin: 0; display: grid; grid-template-columns: 1fr; }
.spec-list div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.spec-list div:first-child { border-top: 0; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; font-weight: 650; text-align: right; }

/* ------------------------------------------------------------------ custom parts and offers */

.form-card { padding: 24px; }
.part-card { margin-bottom: 22px; }
.part-card .spec-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 24px; }
.part-card .spec-list div:first-child { border-top: 1px solid var(--line); }

.offer-grid {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.offer-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.offer-card:first-child { border: 2px solid var(--brand); }
.offer-card.is-accepted { border: 2px solid var(--ok-ink); }
.offer-card form { margin-top: auto; }
.offer-badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 750; }
.badge-best { background: var(--ok-bg); color: var(--ok-ink); }
.badge-fast { background: #dbeafe; color: #1e40af; }
.badge-done { background: var(--night); color: #fff; }
.offer-seller { font-size: 1.15rem; margin: 0; }
.offer-price { display: flex; flex-direction: column; margin: 0; }

.unpriced { margin-top: 16px; }
.unpriced-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.unpriced-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--line-strong);
}
.unpriced-list .reason { color: var(--ink-2); }

/* ------------------------------------------------------------------ cart */

.cart-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; } .summary { position: sticky; top: 20px; } }
.cart-groups { display: flex; flex-direction: column; gap: 16px; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid; align-items: center; gap: 8px 16px;
  grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.cart-line:first-child { border-top: 0; padding-top: 0; }
.cart-line-title { font-weight: 650; margin: 0 0 2px; }
.cart-line-title a { color: var(--ink); text-decoration: none; }
.cart-line-title a:hover { text-decoration: underline; }
.cart-line-main p.small { margin: 0; }
/* A cart line market.api.preview_cart cannot price now, and the summary's count of them. */
.cart-warn { color: var(--warn-ink); font-weight: 600; }
.cart-line-main p.cart-warn { margin-top: 4px; }
/* Each quantity stays on one line; the one a line is priced for ("= 750 cm") may wrap below it. */
.cart-line-qty { color: var(--ink-2); }
.cart-line-qty span { white-space: nowrap; }
.cart-line-amount { font-weight: 750; white-space: nowrap; text-align: right; min-width: 96px; }
.cart-line-remove { margin: 0; }
@media (max-width: 767px) {
  .cart-line { grid-template-columns: 56px minmax(0, 1fr); }
  .cart-line-qty, .cart-line-amount, .cart-line-remove { grid-column: 2; text-align: left; }
}
.summary-list { margin: 0 0 12px; }
.summary-list div { display: flex; justify-content: space-between; padding: 8px 0; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 650; }
.summary-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px !important; }
.summary-total dt { color: var(--ink); font-weight: 750; }
.summary-total dd { font-size: 1.4rem; font-weight: 800; }
.summary form { margin-top: 12px; }

/* ------------------------------------------------------------------ orders */

.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.order-row { padding: 0; }
.order-row-link {
  display: grid; gap: 10px 20px; grid-template-columns: 1fr; padding: 18px 20px;
  text-decoration: none; color: var(--ink);
}
@media (min-width: 768px) { .order-row-link { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; } }
.order-row-link:hover { color: var(--ink); background: var(--surface-2); border-radius: var(--radius); }
.order-row-head { display: flex; flex-direction: column; }
.order-row-sellers { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; margin: 2px 4px 2px 0;
}
.order-paid { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.seller-order { margin-top: 18px; }
.seller-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.seller-order-head.padded { padding: 18px 20px 6px; }
.tracking { margin: 12px 0 14px; color: var(--ink-2); }
.tracking.bad { color: var(--bad-ink); }
.line-summary { display: block; }

.stepper { list-style: none; display: flex; margin: 16px 0 20px; padding: 0; counter-reset: step; }
.stepper li {
  flex: 1 1 0; position: relative; padding-top: 30px; font-size: 0.85rem; font-weight: 650; color: var(--muted);
  text-align: center;
}
.stepper li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); font-size: 0.78rem;
  z-index: 1;
}
.stepper li::after {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line-strong);
}
.stepper li:first-child::after { display: none; }
.stepper li.done { color: var(--ok-ink); }
.stepper li.done::before { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; content: "\2713"; }
.stepper li.done::after { background: var(--ok-ink); }
.stepper li.stop { color: var(--bad-ink); }
.stepper li.stop::before { background: #b91c1c; border-color: #b91c1c; color: #fff; content: "\2715"; }

/* ------------------------------------------------------------------ status pills */

.status {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap; background: #e5e7eb; color: #374151;
}
.status-placed, .status-open, .status-offered { background: #dbeafe; color: #1e40af; }
.status-accepted { background: #ede9fe; color: #5b21b6; }
.status-shipped, .status-captured, .status-due, .status-active, .status-published, .status-completed { background: var(--ok-bg); color: var(--ok-ink); }
.status-rejected, .status-failed, .status-cancelled { background: var(--bad-bg); color: var(--bad-ink); }
.status-pending, .status-paused, .status-draft, .status-on_hold, .status-held, .status-awaiting_payment { background: var(--warn-bg); color: var(--warn-ink); }
.status-paid, .status-retired, .status-superseded, .status-expired { background: #e5e7eb; color: #374151; }

/* ------------------------------------------------------------------ seller portal and back office */

.stat-row {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.stat-label { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.stat .mono { word-break: break-all; }
.money-row .stat-value { order: 2; }
.money-row .stat-label { order: 1; }
.money-row .small { order: 3; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 650;
  background: var(--surface); border: 1px solid var(--line);
}
.tabs a[aria-current="page"] { background: var(--night); border-color: var(--night); color: #fff; }
.tabs .count { font-size: 0.8rem; opacity: 0.85; }

.identity { padding: 14px 18px; border-radius: var(--radius); margin: 0 0 8px; border: 1px solid; }
.identity.ok { background: #ecfdf5; color: var(--ok-ink); border-color: #a7f3d0; }
.identity.bad { background: #fef2f2; color: var(--bad-ink); border-color: #fecaca; }

/* docs/finance/07 rule 5: an order held on a failed payment, cancelled unpaid, or still being paid */
.notice { padding: 14px 18px; border-radius: var(--radius); margin: 0 0 16px; border: 1px solid #fde68a; background: #fffbeb; color: var(--warn-ink); }
.notice.bad { background: #fef2f2; color: var(--bad-ink); border-color: #fecaca; }
.notice .card-title { color: inherit; }
.notice form { margin-top: 12px; }
.hold-actions { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 16px; }
.hold-actions form { display: grid; gap: 8px; }

/* ------------------------------------------------------------------ tables */

.scroll-x { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.table thead th {
  background: var(--surface-2); color: var(--muted); font-size: 0.75rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table tbody td { border-top: 1px solid var(--line); }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover td { background: #fafbfc; }
.table tfoot th, .table tfoot td { border-top: 2px solid var(--line); font-weight: 700; background: var(--surface-2); }
.table.symbols thead th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card:not(.flush) .table th:first-child, .card:not(.flush) .table td:first-child { padding-left: 0; }
.card:not(.flush) .table thead th { background: transparent; }

/* ------------------------------------------------------------------ sign-in */

.signin-page { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .signin-page { grid-template-columns: 1.1fr 1fr; } }
.signin-aside {
  display: none; background: var(--night); color: #fff; padding: 56px;
  background-image: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.35), transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.25), transparent 50%);
}
@media (min-width: 1024px) { .signin-aside { display: flex; flex-direction: column; justify-content: space-between; } }
.signin-aside .brand { color: #fff; }
.signin-aside .aside-title { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.2; max-width: 18ch; }
.signin-aside p { color: var(--night-ink); max-width: 44ch; }
.signin-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.signin-points li { padding-left: 28px; position: relative; color: #e2e8f0; }
.signin-points li::before { content: "\2713"; position: absolute; left: 0; color: #93c5fd; font-weight: 800; }
.signin-main { display: grid; place-items: center; padding: 32px 20px; }
.signin-card { width: 100%; max-width: 420px; }
.signin-card h1 { margin-top: 18px; }

/* Avera catalogue details and responsive layout. */
.product-grid > *, .with-sidebar > *, .two-col > *, .split > *, .product-detail > * { min-width: 0; }
.product-card .thumb { aspect-ratio: 4 / 3; border-radius: 9px; }
.product-inner { padding: 12px; gap: 14px; }
.product-card { border-radius: 13px; }
.product-body { gap: 6px; }
.product-category { margin: 0; color: var(--brand); text-transform: uppercase; font-size: .62rem; letter-spacing: .1em; font-weight: 750; overflow-wrap: anywhere; }
.product-title { font-size: .95rem; min-height: 2.6em; }
.product-seller { font-size: .73rem; }
.product-price { margin-top: auto; padding-top: 12px; }
.product-meta { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; font-size: .76rem; }
.product-meta div { justify-content: space-between; }
.product-cta { display: flex; justify-content: space-between; color: var(--brand); font-size: .75rem; font-weight: 650; padding: 10px 0 2px; }
.featured-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.filter-panel { border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.filter-panel summary { padding: 16px 18px; min-height: 52px; cursor: pointer; font-size: .9rem; font-weight: 750; }
.filter-panel summary span { float: right; }
.filter-panel .filter-form { border: 0; border-radius: 0; padding-top: 8px; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .78rem; padding: 0 0 16px; }
.product-media .thumb-large { background-image: linear-gradient(#ffffff60 1px,transparent 1px),linear-gradient(90deg,#ffffff60 1px,transparent 1px); background-size: 26px 26px; }
.product-media .thumb-large .thumb-glyph { max-width: 230px; }
.spec-list dd { overflow-wrap: anywhere; min-width: 0; }
.signin-aside { background: linear-gradient(140deg,#e9f2fb,#f4fafb); border-right: 1px solid var(--line); color: var(--ink); }
.signin-aside .brand, .signin-aside .aside-title { color: var(--ink); }
.signin-aside p, .signin-points li { color: var(--muted); }
.signin-points li::before { color: #326e65; }
.signin-aside .aside-title { font-size: 3rem; letter-spacing: -.05em; }
.signin-main { background: #fff; }
.signin-card > .brand { margin-bottom: 20px; }
.signin-card .card { box-shadow: none; padding: 24px; margin-top: 24px; }
@media (max-width: 1100px) {
  .header-row { grid-template-columns: 175px minmax(0,1fr) auto; gap: 18px; }
  .hero { padding: 30px; gap: 24px; }
  .hero-inventory { padding: 18px; }
}
@media (max-width: 800px) {
  .header-row { grid-template-columns: minmax(0,1fr) auto; padding-top: 14px; gap: 12px; }
  .account { grid-column: 2; }
  .header-search { grid-column: 1 / -1; grid-row: 2; }
  .header-nav { grid-row: 3; }
  .header-nav a { padding: 8px 10px; font-size: .78rem; }
  .header-nav .nav-about { margin-left: 0; }
  .hero { grid-template-columns: 1fr; }
  .hero-inventory { display: none; }
  .hero h1 { font-size: 2.8rem; }
  .value-strip { gap: 12px; padding-inline: 0; }
  .value-strip > div { align-items: flex-start; }
  .value-icon { display: none; }
  .featured-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .custom-banner { align-items: flex-start; flex-direction: column; }
  .filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .filter-form > .field:first-child, .filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 20px; }
  .mockbar { font-size: .67rem; line-height: 1.5; }
  .mockbar strong { margin-right: 5px; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-word { font-size: 26px; }
  .brand-word small { font-size: 6px; }
  .header-search input { padding: 12px; font-size: .85rem; }
  .header-search .btn { min-width: 76px; font-size: .85rem; padding-inline: 12px; }
  .header-nav ul { gap: 0; justify-content: space-between; }
  .header-nav a { padding-inline: 7px; font-size: .72rem; }
  .header-nav .nav-about { display: none; }
  .account summary { padding-inline: 5px; font-size: .8rem; }
  .hero { padding: 26px 22px; border-radius: 14px; }
  .hero h1 { font-size: 2.35rem; }
  .hero .lead { font-size: .9rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .value-strip { grid-template-columns: 1fr; gap: 14px; padding: 20px 4px; }
  .value-icon { display: grid; }
  .section { margin-top: 28px; }
  .section-head { align-items: flex-start; flex-wrap: wrap; gap: 6px; }
  .section-head h2 { font-size: 1.15rem; }
  .section-head .text-link { min-height: 36px; font-size: .8rem; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .product-inner { padding: 8px; gap: 10px; }
  .product-body { padding: 0 2px 4px; }
  .product-title { font-size: .8rem; }
  .product-category, .product-seller { font-size: .62rem; }
  .product-price .price { font-size: .95rem; white-space: normal; }
  .product-price .per, .product-meta { font-size: .68rem; }
  .product-meta div { flex-direction: column; gap: 0; }
  .product-cta { font-size: .65rem; }
  .thumb-label { font-size: .55rem; }
  .results-toolbar { align-items: flex-start; }
  .order-mini { grid-template-columns: 1fr auto; }
  .order-mini .muted { grid-column: 1 / -1; grid-row: 2; }
  .custom-banner { padding: 24px; }
  .buy-box { padding: 20px; }
  .site-footer .footer-row { padding-block: 24px; }
  .footer-row .muted { font-size: .75rem; }
  .signin-card .card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.nav-short { display: none; }
@media (max-width: 480px) {
  .nav-wide { display: none; }
  .nav-short { display: inline; }
  .header-nav ul { flex-wrap: nowrap; }
  .area-seller .header-nav ul, .area-staff .header-nav ul { flex-wrap: wrap; }
}

.brand-word small { white-space: nowrap; }
@media (max-width: 899px) {
  .product-media { display: contents; }
  .product-media > .thumb { grid-row: 1; max-height: 250px; }
  .product-info { grid-row: 2; }
  .product-media > .card { grid-column: 1; }
}

@media (max-width: 380px) {
  .header-nav a { padding-inline: 4px; gap: 4px; font-size: .68rem; }
  .header-nav .cart-count { min-width: 18px; height: 18px; padding-inline: 4px; }
}

/* Inventory browsing: horizontal facets inspired by surplus marketplaces. */
.inventory-browser { min-width: 0; scroll-margin-top: 24px; }
.inventory-controls { border: 1px solid var(--line); background: #fff; border-radius: 13px; }
.inventory-controls > summary { padding: 16px 18px; cursor: pointer; font-weight: 700; min-height: 54px; }
.inventory-controls > summary > span:last-child { float: right; }
.inventory-controls form { padding: 20px; }
/* Six selects (G1 added Condition and Brand): the part's three, then material and the seller's two. */
.inventory-primary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.inventory-primary .field { margin: 0; }
.inventory-primary label, .inventory-more label { font-size: .72rem; letter-spacing: .035em; color: var(--muted); }
.inventory-primary select, .inventory-more select { font-size: .86rem; text-overflow: ellipsis; padding-right: 24px; background: #f8fafc; }
.inventory-advanced { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inventory-advanced > summary { min-height: 46px; padding: 12px 0; cursor: pointer; color: var(--brand); font-weight: 650; font-size: .8rem; }
.inventory-advanced > summary > span { float: right; }
.inventory-more { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; padding-top: 8px; }
.inventory-more .field { margin: 0; }
.inventory-more input { font-size: .85rem; }
.filter-help { color: var(--muted); font-size: .73rem; line-height: 1.6; margin: 12px 0 14px; }
.inventory-actions { display: flex; align-items: center; gap: 18px; padding-top: 16px; }
.inventory-query { flex: 1; min-width: 0; }
.inventory-query input { border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: .85rem; }
.inventory-actions .field { margin: 0; flex-shrink: 0; }
.inventory-actions .field label { font-size: .8rem; }
.inventory-actions .btn { font-size: .85rem; flex-shrink: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.filter-chip { display: inline-flex; align-items: center; gap: 10px; background: #e9f2fb; color: var(--brand-dark); border: 1px solid #cfdeed; border-radius: 30px; padding: 9px 13px; min-height: 44px; text-decoration: none; font-size: .75rem; max-width: 100%; overflow-wrap: anywhere; }
.filter-chip span { font-size: 1.1rem; }
.filter-chip:hover { background: #dceaf8; border-color: var(--brand); }
.clear-filters { padding: 10px; font-size: .8rem; min-height: 44px; }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0 18px; }
.inventory-toolbar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.inventory-toolbar strong { font-size: 1rem; }
.inventory-toolbar > div:first-child span { font-size: .75rem; color: var(--muted); }
.inventory-sort { display: flex; align-items: center; gap: 10px; }
.inventory-sort label { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.inventory-sort select { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px; color: var(--ink); font: inherit; font-size: .8rem; max-width: 230px; }
.inventory-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.inventory-end { text-align: center; padding-top: 24px; }
.filter-count { font-size: .72rem; color: var(--brand); margin-left: 10px; }
/* The summary shows at every width: a panel closed on a phone can be opened again after rotating
   to a wide screen (the summary used to be hidden above 800 px; review finding, 2026-10-02). */
.inventory-controls[open] > summary { border-bottom: 1px solid var(--line); }
@media (max-width: 1000px) {
  .inventory-more { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .inventory-primary { gap: 10px; }
}
@media (max-width: 800px) {
  .inventory-primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-more { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-actions { flex-wrap: wrap; gap: 12px; }
  .inventory-query { flex-basis: 100%; }
  .inventory-actions > .btn { margin-left: auto; }
  .inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-toolbar { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .inventory-controls form { padding: 16px; }
  .inventory-primary select, .inventory-more select { padding-left: 8px; font-size: .76rem; }
  .inventory-more { gap: 12px 8px; }
  .inventory-sort { width: 100%; }
  .inventory-sort select { flex: 1; max-width: none; min-width: 0; }
  .inventory-toolbar { padding-top: 18px; gap: 12px; }
  .filter-chip { font-size: .7rem; }
}
/* Manufacturer entry and header actions. */
.header-row { grid-template-columns: 180px minmax(160px, 1fr) auto; gap: 16px; }
.header-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.header-actions .account { flex-shrink: 0; }
.sell-stock-link { background: #167365; border-color: #167365; white-space: nowrap; gap: 10px; }
.sell-stock-link:hover { background: #10584d; border-color: #10584d; }
/* The cart: its icon with the line count, and the word "Cart" where the row has room (the link's
   aria-label, "Cart, 2 lines", begins with the visible word). */
.header-cart { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 48px; min-height: 48px; padding: 0 12px 0 10px; color: var(--ink); border-radius: 10px; text-decoration: none; font-size: .875rem; font-weight: 650; white-space: nowrap; }
.header-cart:hover, .header-cart[aria-current="page"] { background: var(--brand-soft); color: var(--ink); }
.cart-icon { position: relative; display: inline-flex; }
.header-cart .cart-count { position: absolute; top: -8px; right: -10px; font-size: .65rem; min-width: 18px; height: 18px; }
.area-seller .header-actions, .area-staff .header-actions { grid-column: 2; }
.sell-intro { max-width: 960px; margin: 20px auto; }
.sell-intro h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -.04em; }
.sell-intro .lead { max-width: 700px; color: var(--muted); font-size: 1.1rem; }
.sell-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; list-style: none; padding: 0; margin: 32px 0; }
.sell-steps li { padding: 20px; background: var(--brand-soft); border-radius: 12px; }
.sell-steps strong, .sell-steps span { display: block; }
.sell-steps span { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.sell-start { max-width: 700px; }
.published-stock { border-left: 4px solid #167365; margin-bottom: 24px; }
@media (max-width: 1100px) {
  .area-shop .header-row { grid-template-columns: minmax(0,1fr) auto; }
  .area-shop .header-actions { grid-column: 2; }
  .area-shop .header-search { grid-row: 2; grid-column: 1 / -1; }
  .area-shop .header-nav { grid-row: 3; }
}
@media (max-width: 600px) {
  .header-row, .area-seller .header-row, .area-staff .header-row { grid-template-columns: minmax(0,1fr); }
  .header-actions, .area-shop .header-actions, .area-seller .header-actions, .area-staff .header-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 8px; }
  .header-actions .account { margin-left: auto; }
  .header-actions .sell-stock-link { font-size: .82rem; padding: 10px 12px; }
  .area-shop .header-search { grid-row: 3; }
  .header-nav, .area-shop .header-nav { grid-row: 4; }
  .area-seller .brand, .area-staff .brand { flex-wrap: wrap; }
  .sell-steps { grid-template-columns: 1fr; gap: 8px; }
  .sell-steps li { padding: 16px; }
  .sell-start .btn { white-space: normal; }
}
/* Fieldsets otherwise keep the specification table's intrinsic width on phones. */
.form-card fieldset { min-width: 0; }
/* The narrowest phones: at 320 px the header's actions overflowed by 2 px (review finding,
   2026-10-02). The word "Cart" gives way below 401 px; at 340 px and narrower the sell link sheds
   its "+" and the gaps narrow, so the row fits at 320 px (checked in a browser), and it may wrap
   rather than overflow where a wider font would not fit. */
@media (max-width: 400px) {
  .header-cart { padding-inline: 10px; }
  .header-cart .cart-word { display: none; }
}
@media (max-width: 340px) {
  .header-actions { flex-wrap: wrap; }
  .header-actions .sell-stock-link { padding-inline: 10px; gap: 6px; }
  .header-actions .sell-stock-link span[aria-hidden="true"] { display: none; }
  .account summary { gap: 6px; }
}

/* ------------------------------------------------------------------ listing photos (roadmap gap G3)
   A photo sits in the same 4:3 box as the placeholder tile, so result cards stay aligned whatever
   the photo's own shape: on a card it fills the box (cover), on the listing page it is shown whole
   (contain). The gallery runs no script: one radio per photo, the chosen one's figure shown in the
   stage the gallery reserves; each thumbnail is the label of its radio. */
.photo-frame { border: 1px solid var(--line); }
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.product-card .photo-frame { border: 0; border-radius: 12px 12px 0 0; }
.product-card .photo-frame img { object-fit: cover; }
.gallery-single { margin: 0; }
.gallery-single figcaption, .gallery-photo figcaption { margin-top: 6px; }
.gallery { position: relative; }
.gallery-stage { aspect-ratio: 4 / 3; margin-bottom: 2.4em; }
.gallery-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.gallery-photo { display: none; position: absolute; top: 0; left: 0; right: 0; margin: 0; }
.gallery-choice:checked ~ .gallery-photo { display: block; }
.gallery-thumb { position: relative; display: block; width: 64px; height: 48px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-choice:checked + .gallery-thumb { border-color: var(--brand); }
.gallery-choice:focus-visible + .gallery-thumb { outline: 3px solid var(--brand); outline-offset: 2px; }
.photo-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.photo-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.photo-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.photo-meta p { margin: 0 0 4px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.photo-remove { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.photo-remove label { width: 100%; font-size: 0.82rem; color: var(--muted); }
.photo-remove input { flex: 1 1 180px; max-width: 280px; }
.photo-upload { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .photo-item { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ stock location (roadmap gap G2)
   A card's location sits under its seller, in the card's top block, so a place that wraps to a second
   line never moves the price and the stock rows, which align at the foot of every card. A stated place
   has a pin in the brand colour (a graphic, 5.6:1 on white); "Location not stated" is the muted words
   alone (muted on white, 5.84:1). On the listing page the line sits under the condition, in the
   body's colour; in the seller's table a cell not stated is muted. "Only this state" sits level with
   the controls of its row of the filter panel, below the labels of Near and City. */
.product-location { display: flex; align-items: flex-start; gap: 4px; margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.product-location .pin, .listing-location .pin, .seller-location .pin { flex: none; width: 1em; height: 1em; margin-top: .2em; color: var(--brand); }
.listing-location { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.listing-location.unstated, .location-cell.unstated { color: var(--muted); }
.inventory-primary .field.check { align-self: end; }
@media (max-width: 480px) { .product-location { font-size: .62rem; } }

/* ------------------------------------------------------------------ the seller page (roadmap gap G5)
   One macro (market/shop/_seller_page.html) on the buyer's page and in the seller's preview. Every
   text the seller wrote keeps its line breaks and its runs of spaces, shown as written (owner
   decision D-i): white-space pre-wrap, a tab four spaces wide, a long word broken rather than pushing
   the page sideways at phone width. The policies sit side by side where three fit at 240 px, one
   under the other on a phone. Colours are the pairs listed in this file's header (ink-2 on white
   9.40:1, muted on white 5.84:1). */
.seller-page { max-width: 960px; min-width: 0; }
.seller-head { margin: 0 0 20px; }
.seller-heading { overflow-wrap: anywhere; }
.seller-location { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; }
.seller-location.unstated { color: var(--muted); }
.seller-since { margin: 6px 0 0; color: var(--muted); }
.seller-listings { margin: 16px 0 0; }
/* overflow: hidden keeps a seller's text inside its own box: a long run of combining marks would
   otherwise paint over the rest of the page (review of G5, 2026-10-06). */
.seller-text { white-space: pre-wrap; tab-size: 4; overflow-wrap: anywhere; overflow: hidden; color: var(--ink-2); margin: 0; }
.seller-description { max-width: 72ch; margin: 0 0 24px; font-size: 1.05rem; }
.seller-policies { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.seller-policy { min-width: 0; overflow: hidden; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.seller-policy-title { font-size: 1.05rem; margin: 0 0 8px; }
.seller-policy .unstated { margin: 0; }
.seller-own-words { max-width: 72ch; margin: 16px 0 0; }
/* The profile screen: the form beside the preview from 1024 px (.split), one under the other below;
   each column as tall as its own content. */
.profile-layout { align-items: start; }
.seller-preview { min-width: 0; }
.seller-preview .seller-page { max-width: none; }
.seller-preview .seller-heading { font-size: 1.3rem; }
.seller-preview .seller-description { font-size: 1rem; }

/* ------------------------------------------------------------------ Add listings from a file
 * CSV-UI-01 (2026-10-13): the seller's choose and check pages (seller_listing_import.py), promoted
 * from the published prototype docs/prototypes/csv-preview/preview.css. Colours are this file's
 * tokens and the pairs listed in the header; the status word always carries the meaning.
 */
.format-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .format-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.format-list { margin: 0 0 12px; padding-left: 20px; }
.format-list li { margin-bottom: 6px; }
.column-name { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
.file-name { overflow-wrap: anywhere; }
.flash p { margin: 0 0 6px; }
.flash .format-list { margin: 0; }
.help code, .flash code, .muted code { overflow-wrap: anywhere; }
.field input[type="file"] { min-height: 44px; }

/* The counts of a check. Named csv-summary: .summary is the cart's sticky box. */
.csv-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.csv-summary li { flex: 1 1 160px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.csv-summary .count { display: block; font-size: 1.6rem; font-weight: 750; line-height: 1.1; }

/* Row results: the word carries the meaning, the colour repeats it. */
.status-ready { background: var(--ok-bg); color: var(--ok-ink); }
.status-problem { background: var(--bad-bg); color: var(--bad-ink); }
.status-skipped { background: #e5e7eb; color: #374151; }
.table tbody tr.row-problem th, .table tbody tr.row-problem td { background: #fef2f2; }
.table tbody tr.row-skipped th, .table tbody tr.row-skipped td { background: var(--surface-2); color: var(--muted); }
.table td.cell-problem { box-shadow: inset 0 -3px 0 #b91c1c; }
.table .problem-text { margin: 0; min-width: 260px; }
.table caption { text-align: left; padding: 14px 16px 6px; font-weight: 650; color: var(--ink-2); }
.preview-rows { min-width: 1240px; }
.preview-rows code { white-space: nowrap; }
.preview-rows td.num { white-space: nowrap; }
.preview-rows th[scope="row"]:focus { outline: 3px solid var(--brand); outline-offset: -3px; }

/* The problems to fix: one item per problem, its row and column first, a link to the row. */
.problem-list { margin: 0; padding: 0; list-style: none; }
.problem-list li { border-left: 4px solid #b91c1c; background: #fef2f2; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin-bottom: 8px; }
.problem-where { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--bad-ink); }
.problem-list .column-name { color: var(--ink); }

/* A focusable scroll region inside a flush card: the ring is drawn inside, where the card's
   overflow: hidden cannot clip it. */
.card.flush > .scroll-x:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* The tenant's codes, each with its name. */
.code-lists { display: grid; gap: 16px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .code-lists { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.code-list-title { font-size: 0.92rem; color: var(--ink-2); margin: 0 0 6px; }
.code-list { margin: 0; }
.code-list > div { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.code-list dt { margin: 0; }
.code-list dt code { overflow-wrap: anywhere; }
.code-list dd { margin: 0; color: var(--muted); }

/* ================================================================== visual direction (Block E)
 * 2026-10-15, owner-approved: the look of avera-prototype.netlify.app, measured, not eyeballed.
 * Values are the reference's own (its public stylesheet and the computed styles of its pages at
 * 1440, 1280, 390 and 375 px), in px as it states them, with two deliberate exceptions: every
 * control a finger uses keeps the 44 px minimum of this file (the reference draws 38 px), and a
 * text colour below 4.5:1 in the reference is raised (the banner search's state label). No
 * script, no request leaves the site (the fonts are self-hosted above). Placed last so it
 * restyles the rules above by source order; every colour pair is in the header list.
 */

/* ---------------------------------------------------------------- base */
body { font: 400 15px/1.55 var(--font); color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.12; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wrap { max-width: 1280px; padding-left: 24px; padding-right: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(52, 92, 255, .25); }
.btn {
  min-height: 46px; padding: 0 20px; gap: 8px; border: 1px solid transparent; border-radius: 999px;
  background: var(--brand); color: #fff; font-family: var(--display); font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 6px 18px rgba(52, 92, 255, .32); white-space: nowrap;
}
.btn:hover { background: var(--brand-dark); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(52, 92, 255, .42); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn.danger { box-shadow: none; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn.large { min-height: 52px; font-size: 15px; }
.text-link { color: var(--brand); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- banner, header */
.mockbar { background: var(--ink); color: #c9ced4; border: 0; padding: 7px 16px; font-size: 12.5px; line-height: 1.55; text-align: center; }
.mockbar .wrap { padding: 0; }
.mockbar strong { color: #fff; font-weight: 600; letter-spacing: normal; margin-right: 4px; }

.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(244, 243, 239, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .header-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav actions" "search search search";
  align-items: center; column-gap: 28px; row-gap: 0; min-height: 68px; padding-top: 0; padding-bottom: 0;
}
.site-header .brand { grid-area: brand; gap: 10px; }
.site-header .header-nav { grid-area: nav; border: 0; padding: 0; min-width: 0; }
.site-header .header-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-header .header-search { grid-area: search; margin: 0 0 12px; }
.brand-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.brand-word { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.brand-word small { display: block; margin-top: 3px; font-family: var(--font); font-size: 9.5px; font-weight: 400; line-height: 1.55; letter-spacing: .16em; color: var(--muted); }
.brand-area { border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 12px; }
.site-header .header-nav ul { flex-wrap: nowrap; gap: 4px; }
.site-header .header-nav .nav-about { margin-left: 0; }
.site-header .header-nav a {
  min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--muted); background: transparent;
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s;
}
.site-header .header-nav a:hover { color: var(--ink); background: transparent; }
.site-header .header-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.header-cart { min-height: 44px; gap: 7px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 600; }
.header-cart:hover, .header-cart[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--ink); }
.header-cart svg { width: 20px; height: 20px; }
.header-cart .cart-count { position: static; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }
.cart-icon { gap: 6px; align-items: center; }
.site-header .account summary {
  min-height: 44px; padding: 0 16px; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-family: var(--display); font-size: 14px; font-weight: 600;
}
.site-header .account[open] summary, .site-header .account summary:hover { background: var(--surface); border-color: var(--ink); }
.account-menu { width: 240px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); top: calc(100% + 10px); }
.account-name { padding: 10px 12px 0; }
.account-org { padding: 0 12px 12px; margin: 4px 0 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.account form { padding: 4px; }
.site-header .sell-stock-link { min-height: 44px; padding: 0 16px; gap: 8px; font-size: 14px; background: var(--brand); border-color: transparent; }
.site-header .sell-stock-link:hover { background: var(--brand-dark); border-color: transparent; }
.sell-plus { font-size: 18px; font-weight: 500; line-height: 1; }
.header-search { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px; }
.header-search:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.header-search input { min-height: 44px; padding: 0 14px 0 18px; font-size: 15px; }
.header-search .btn { min-height: 44px; border-radius: 999px; box-shadow: none; }

/* ---------------------------------------------------------------- the dark banner
   Full-bleed inside main: it takes back main's side padding with negative margins, so it spans the
   page up to 1280 px with no horizontal overflow; wider, its colour continues as a shadow that
   clip-path lets show at the sides (a shadow adds nothing to the scroll width). */
.avera-hero, .browse-hero {
  display: block; position: relative; isolation: isolate; overflow: hidden;
  margin: -28px -24px 0; padding: 64px 24px 56px; border: 0; border-radius: 0;
  background: var(--ink); color: #fff;
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax);
}
.flash + .avera-hero, .flash + .browse-hero { margin-top: 0; }
.avera-hero::before, .browse-hero::before {
  content: ""; position: absolute; z-index: -1; top: -40%; right: -10%; width: 900px; height: 900px;
  background: radial-gradient(closest-side, rgba(52, 92, 255, .55), rgba(52, 92, 255, 0) 70%),
              radial-gradient(closest-side at 30% 70%, rgba(167, 173, 180, .22), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.avera-hero::after, .browse-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .043) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .043) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%);
}
/* Motion, as the reference: the glow drifts (14 s, alternating) and the eyebrow's dot pulses (2 s).
   Only for a viewer who has not asked for reduced motion. */
@keyframes avera-drift { to { transform: translate(-80px, 60px) scale(1.08); } }
@keyframes avera-pulse { 50% { box-shadow: 0 0 0 8px rgba(52, 92, 255, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .avera-hero::before, .browse-hero::before { animation: avera-drift 14s ease-in-out infinite alternate; }
  .eyebrow-dot { animation: avera-pulse 2s infinite; }
}
.avera-hero .hero-text { max-width: none; }
.avera-hero .eyebrow, .browse-hero .eyebrow { color: #c9d3ff; margin: 0 0 18px; }
.avera-hero h1, .browse-hero h1 {
  max-width: 900px; margin: 0; color: #fff; font-size: clamp(38px, 6.4vw, 76px); font-weight: 800;
  line-height: .98; letter-spacing: -.045em;
}
.avera-hero h1 span {
  text-decoration: none; color: transparent;
  background: linear-gradient(92deg, #ffffff 0%, #9fb2ff 45%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.avera-hero .lead, .browse-hero .page-head .muted { max-width: 620px; margin: 20px 0 30px; color: #b9c0c8; font-size: 17px; line-height: 1.55; }
.browse-hero { padding-top: 40px; }
.browse-hero .crumbs { margin: 0 0 18px; color: #b9c0c8; font-size: 13px; }
.browse-hero .crumbs a { color: #fff; }
.browse-hero .page-head { margin: 0; }

/* The banner search: text, the Near state, the button. */
.hero-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; max-width: 920px; padding: 8px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.hero-search-q { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 8px 0 16px; border-radius: 14px; background: #fff; color: var(--ink); }
.hero-search-q:focus-within { outline: 2px solid #9fb2ff; outline-offset: 2px; }
.hero-search-icon { flex: none; color: var(--muted); }
.hero-search-q input { flex: 1; min-width: 0; height: 54px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 16px/1.55 var(--font); }
.hero-search-q input::placeholder { color: var(--muted); opacity: 1; }
.hero-search-near { position: relative; min-width: 160px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.hero-search-near:focus-within { outline: 2px solid #9fb2ff; outline-offset: 2px; }
/* The label sits over the top of the cell and the select fills it, so the whole 54 px cell is the
   select's target. */
.hero-search-near label { position: absolute; top: 8px; left: 14px; pointer-events: none; color: #b9c0c8; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.hero-search-near select {
  -webkit-appearance: none; appearance: none; width: 100%; height: 54px; min-height: 54px; padding: 22px 36px 6px 14px; border: 0; border-radius: 14px; outline: 0;
  color: #fff; font: 600 15px/1.3 var(--font); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.hero-search-near option { color: var(--ink); background: #fff; }
.hero-search-go { min-height: 54px; height: auto; padding: 0 26px; border-radius: 14px; font-size: 15px; }

/* The categories as quick links (the reference's "Try:" row), then the two ways in. */
.avera-hero .hero-inventory {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.avera-hero .inventory-caption { padding: 0; }
.avera-hero .inventory-caption .eyebrow { gap: 0; margin: 0 4px 0 0; color: #9aa3ad; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.avera-hero .inventory-caption .eyebrow::after { content: ":"; }
.avera-hero .hero-components { display: flex; flex-wrap: wrap; gap: 8px; }
.avera-hero .hero-components a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .04);
  color: #e3e7ec; font-size: 13px; font-weight: 400; text-decoration: none; transition: background .15s, border-color .15s;
}
.avera-hero .hero-components a:hover { background: rgba(52, 92, 255, .25); border-color: rgba(52, 92, 255, .7); color: #fff; }
.avera-hero .hero-components a > span { display: inline-flex; gap: 6px; padding: 0; }
.avera-hero .hero-components .thumb { width: 30px; height: 30px; aspect-ratio: 1; border: 0; border-radius: 999px; }
.avera-hero .hero-components .thumb-glyph { width: 70%; }
.avera-hero .hero-components .thumb-label { display: none; }
.avera-hero .inventory-foot { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 0 0 8px; padding: 0; border: 0; }
.avera-hero .inventory-foot .text-link { color: #c9d3ff; font-size: 13px; font-weight: 600; }
.avera-hero .inventory-foot .text-link:hover { color: #fff; }

/* The three promises, in the reference's stats band. */
.avera-hero .value-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 760px; margin: 44px 0 0; padding: 0;
  list-style: none; border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .1); overflow: hidden;
}
.avera-hero .value-strip li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: rgba(24, 28, 32, .75); border: 0; border-radius: 0; }
.avera-hero .value-strip strong { color: #fff; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.avera-hero .value-strip small { margin: 0; color: #9aa3ad; font-size: 12.5px; }

/* ---------------------------------------------------------------- the inventory browser */
.browse-section { margin-top: 0; padding-top: 28px; }
.search-heading + .inventory-browser, .browse-hero + .inventory-browser { padding-top: 28px; }
.inventory-browser { min-width: 0; }
.inventory-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0; margin: 0 0 20px; }
.inventory-toolbar > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.inventory-toolbar strong { color: var(--ink); font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.inventory-toolbar > div:first-child span { color: var(--muted); font-size: 13px; }
.inventory-sort { display: flex; align-items: center; gap: 10px; }
.inventory-sort label[for="inventory-sort"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inventory-sort select, .inventory-primary select, .inventory-more select {
  -webkit-appearance: none; appearance: none; min-height: 44px; height: 44px; padding: 0 34px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 500 14px/1.55 var(--font);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235D646C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  text-overflow: ellipsis;
}
.inventory-sort select { min-width: 170px; max-width: 240px; }
.sort-submit { min-height: 44px; }

.inventory-controls { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.inventory-controls form { padding: 0; }
.filters-toggle { display: none; }
.filters-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.filters-title { margin: 0; font-size: 17px; font-weight: 700; }
.filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin: 0; padding: 0 8px; border-radius: 999px; background: var(--brand); color: #fff; font: 700 11px/1 var(--font); }
.inventory-primary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.inventory-primary .field, .inventory-more .field { margin: 0; gap: 10px; }
.inventory-primary label, .inventory-more label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.inventory-primary select, .inventory-more select { width: 100%; border-radius: 10px; }
.inventory-primary input[type="text"], .inventory-more input, .inventory-query input {
  width: 100%; min-height: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 400 14px/1.55 var(--font);
}
.inventory-primary .field.check, .inventory-actions .field.check { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
.inventory-primary .field.check label, .inventory-actions .field.check label { color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.field.check input { width: 16px; height: 16px; min-height: 16px; accent-color: var(--brand); }
.inventory-advanced { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inventory-advanced > summary { min-height: 44px; display: flex; align-items: center; padding: 0; color: var(--brand-dark); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.inventory-advanced > summary > span { margin-left: auto; float: none; }
.inventory-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 0 0; }
.filter-help { margin: 12px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.inventory-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
.inventory-query { flex: none; }
.inventory-actions .btn { width: 100%; font-size: 15px; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink);
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.filter-chip:hover { background: #2a3038; border-color: #2a3038; color: #fff; }
.filter-chip span { font-size: 15px; }
.clear-filters { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--brand); font-size: 14px; font-weight: 600; }

/* Wide screens: the count heads both columns; the filters are a 270 px column. */
@media (min-width: 1101px) {
  .inventory-browser { display: grid; grid-template-columns: 270px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .inventory-browser > .inventory-toolbar { grid-column: 1 / -1; }
  .inventory-browser > .inventory-controls { grid-column: 1; grid-row: 2 / span 6; }
  .inventory-browser > :not(.inventory-toolbar):not(.inventory-controls) { grid-column: 2; }
}

/* ---------------------------------------------------------------- the result cards */
.inventory-grid, .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s cubic-bezier(.2, .7, .2, 1), border-color .22s;
}
.product-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow-lift); }
.product-inner { display: flex; flex-direction: column; flex: 1; height: auto; padding: 0; gap: 0; color: var(--ink); }
.product-card .thumb { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.product-card .photo-frame { background: #eceae4; }
.product-card .photo-frame img { object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.product-card:hover .photo-frame img { transform: scale(1.045); }
.product-link::after { border-radius: var(--radius); }
.product-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
.product-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 16px 16px; }
.product-kicker { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.product-category { margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-pn {
  max-width: 60%; margin: 0; padding: 2px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 500 11.5px/1.55 var(--mono);
}
.product-title {
  min-height: 0; margin: 0; font-family: var(--display); font-size: 16.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* The condition and the MOCK tag ride on the cover, top left, as the reference draws them; in the
   DOM they still follow the title, so a screen reader hears them there. */
.product-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.product-card .product-condition { display: inline-flex; margin: 0; }
.product-card .condition-tag, .mock-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.product-card .condition-tag { border: 0; background: rgba(255, 255, 255, .94); color: var(--brand-dark); }
.product-card .condition-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-card .condition-tag.unstated { color: var(--muted); }
.product-card .condition-tag.unstated::before { display: none; }
.mock-tag { border: 1px dashed #a7adb4; background: rgba(255, 255, 255, .94); color: var(--muted); font-weight: 500; letter-spacing: .02em; }
/* Price, then the seller's name where the reference prints its estimate line, then the dashed
   row of facts: lead time (cobalt, as the reference's "fast" fact), where the stock is, stock. */
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; }
.product-price .price { color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.55; white-space: nowrap; }
.product-price .per { color: var(--muted); font-size: 11.4px; font-weight: 500; }
.product-seller { margin: -8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.product-seller-link { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.product-seller-link:hover, .product-seller-link:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.product-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: auto 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.product-facts > * { display: inline-flex; align-items: center; gap: 5px; min-width: 0; margin: 0; }
.fact-icon { flex: none; width: 14px; height: 14px; }
.product-facts .fact-lead { color: var(--brand-dark); font-weight: 600; }
.product-facts .product-location { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.product-facts .product-location .pin { width: 14px; height: 14px; margin: 0; color: var(--muted); }
.product-facts .product-location .pin path { fill: currentColor; stroke: none; }
.product-facts .product-location .pin circle { fill: var(--surface); }
.inventory-end { padding-top: 28px; }

/* ---------------------------------------------------------------- below the browser, footer */
.empty-state { border: 1px dashed var(--line); border-radius: 18px; background: var(--surface); }
.side-note, .custom-note { border-color: var(--line); border-radius: var(--radius); }
.custom-banner { margin-top: 64px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.custom-banner .eyebrow { margin-bottom: 8px; }
.custom-banner h2 { font-size: 24px; }
.section-head h2 { font-size: 20px; }
.seller-item, .order-mini, .order-welcome { border-color: var(--line); border-radius: var(--radius); }
.seller-item:hover, .order-mini:hover { border-color: var(--ink); }
.seller-avatar { background: linear-gradient(135deg, var(--ink), #3a4250); font-family: var(--display); }

.site-footer { margin-top: 64px; border: 0; background: var(--ink); color: #9aa3ad; font-size: 13px; }
.site-footer .footer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-top: 40px; padding-bottom: 48px; font-size: 13px; }
.site-footer p { margin: 0; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-word small { color: #9aa3ad; }
.footer-text span { display: block; }
.site-footer strong { color: #fff; font-weight: 600; }
.site-footer .muted { color: #9aa3ad; }
.site-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
.site-footer a:hover { color: #fff; text-decoration-color: #fff; }

/* ---------------------------------------------------------------- 1100 px and narrower */
@media (max-width: 1100px) {
  .site-header .header-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand actions" "nav nav" "search search"; }
  .site-header .header-nav { padding: 0 0 8px; }
  .inventory-browser > .inventory-controls { margin-bottom: 18px; }
  .inventory-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .inventory-query { flex: 1 1 100%; }
  .inventory-actions .btn { width: auto; margin-left: auto; }
}

/* ---------------------------------------------------------------- phones: up to 767 px
   The filters start collapsed behind their toggle (owner approval E4); the applied-filter chips
   stay outside the panel, so they show while it is collapsed. */
@media (max-width: 767px) {
  .inventory-controls { padding: 0; border: 0; background: none; }
  .filters-head { display: none; }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    font-family: var(--display); font-size: 14px; font-weight: 600;
  }
  .filters-toggle:hover { border-color: var(--ink); }
  .filters-open:focus-visible + .filters-toggle { outline: 2px solid var(--brand); outline-offset: 2px; }
  .filters-open:checked + .filters-toggle { border-color: var(--ink); }
  .inventory-controls > form { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .inventory-browser > .inventory-controls { margin-bottom: 14px; }
  .inventory-sort .filters-toggle { flex: none; }
  .inventory-primary, .inventory-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}
@media (min-width: 768px) {
  .inventory-controls > form { display: block; }
}

/* ---------------------------------------------------------------- 760 px and narrower */
@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .site-header { position: relative; }
  .site-header .header-row { min-height: 60px; column-gap: 12px; }
  .brand-word small { display: none; }
  .site-header .header-nav a { padding: 0 10px; font-size: 14px; }
  .header-cart { padding: 0 7px; }
  .header-cart .cart-word { display: none; }
  .avera-hero, .browse-hero { margin-left: -16px; margin-right: -16px; padding: 40px 16px 36px; }
  .avera-hero .lead, .browse-hero .page-head .muted { font-size: 15.5px; }
  .hero-search { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .avera-hero .value-strip { margin-top: 28px; }
  .avera-hero .value-strip li { padding: 12px; }
  .avera-hero .value-strip strong { font-size: 14px; }
  .avera-hero .value-strip small { font-size: 11.5px; }
  .avera-hero .inventory-foot { margin-left: 0; }
  .inventory-toolbar { flex-direction: column; align-items: stretch; }
  .inventory-sort select { flex: 1; min-width: 150px; max-width: none; }
  .inventory-grid, .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
  .custom-banner { margin-top: 40px; padding: 24px; }
  .site-footer .footer-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* The narrowest phones: the account and sell controls keep their names but draw short. */
@media (max-width: 480px) {
  .page { padding-top: 20px; }
  .avera-hero, .browse-hero { margin-top: -20px; }
  .site-header .header-row { column-gap: 8px; }
  .site-header .header-actions { gap: 6px; }
  .site-header .account summary { padding: 0 12px; }
  .site-header .sell-stock-link { padding: 0 14px; }
  .sell-words { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .site-header .sell-stock-link::after { content: "Sell"; content: "Sell" / ""; }
}
/* At 400 px and narrower the brand shows its mark only; its name stays the link's accessible name.
   The actions may wrap rather than push the page sideways (checked at 320, 360, 375 and 390 px). */
@media (max-width: 400px) {
  .site-header .brand-word { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .site-header .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .site-header .header-nav ul { flex-wrap: wrap; gap: 0; }
  .site-header .header-nav a { padding: 0 8px; }
}

/* ================================================================== checkpoint 1c: closing the gaps
 * Measured against the reference at 1440, 1280, 390 and 375 px (evidence/cp1c/measurements.md).
 */

/* The header's one row is 68 px; the search row, where a page keeps it, adds below. */
.site-header .header-row { grid-template-rows: minmax(68px, auto) auto; align-content: start; min-height: 0; }
/* No count on an empty cart, as the reference; the link's name still says "Cart, 0 lines". */
.header-cart .cart-count[data-cart-count="0"] { display: none; }
.site-header .account summary { gap: 8px; letter-spacing: -.005em; }

/* Pills drawn inside a 44 px target (the reference draws 34-39 px pills). The control keeps its
   44 px box -- its click and focus area -- and the visible pill is its ::before, centred, at the
   reference's height. So the touch-target rule is met and the look matches. */
.site-header .header-nav a, .site-header .header-cart, .site-header .account summary, .site-header .sell-stock-link,
.avera-hero .hero-components a, .filter-chip, .filters-toggle, .sort-submit {
  position: relative; isolation: isolate; z-index: 0; min-height: 44px;
  background: transparent; border-color: transparent; box-shadow: none;
}
.site-header .header-nav a::before, .site-header .header-cart::before, .site-header .account summary::before, .site-header .sell-stock-link::before,
.avera-hero .hero-components a::before, .filter-chip::before, .filters-toggle::before, .sort-submit::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  border: 1px solid transparent; border-radius: 999px; background: transparent; pointer-events: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.site-header .header-nav a, .site-header .header-nav a:hover, .site-header .header-nav a[aria-current="page"] { background: transparent; box-shadow: none; }
.site-header .header-nav a::before { height: 39.25px; border: 0; }
.site-header .header-nav a[aria-current="page"]::before { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.site-header .header-cart, .site-header .header-cart:hover, .site-header .header-cart[aria-current="page"] { background: transparent; border-color: transparent; }
.site-header .header-cart::before { height: 38px; }
.site-header .header-cart:hover::before, .site-header .header-cart[aria-current="page"]::before { background: var(--surface); border-color: var(--line); }
.site-header .account summary, .site-header .account[open] summary, .site-header .account summary:hover { background: transparent; border-color: transparent; }
.site-header .account summary::before { height: 38px; background: var(--surface); border-color: var(--line); }
.site-header .account[open] summary::before, .site-header .account summary:hover::before { border-color: var(--ink); }
.site-header .sell-stock-link, .site-header .sell-stock-link:hover { background: transparent; border-color: transparent; box-shadow: none; }
.site-header .sell-stock-link::before { height: 38px; background: var(--brand); box-shadow: 0 6px 18px rgba(52, 92, 255, .32); }
.site-header .sell-stock-link:hover::before { background: var(--brand-dark); box-shadow: 0 8px 24px rgba(52, 92, 255, .42); }
.avera-hero .hero-components a, .avera-hero .hero-components a:hover { background: transparent; border-color: transparent; padding: 0 12px 0 6px; }
.avera-hero .hero-components a::before { height: 34.1px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
.avera-hero .hero-components a:hover::before { background: rgba(52, 92, 255, .25); border-color: rgba(52, 92, 255, .7); }
.avera-hero .hero-components .thumb { width: 22px; height: 22px; }
.filter-chip, .filter-chip:hover { background: transparent; border-color: transparent; color: #fff; }
.filter-chip::before { height: 36.9px; background: var(--ink); border-color: var(--ink); }
.filter-chip:hover::before { background: #2a3038; border-color: #2a3038; }
.filters-toggle, .filters-toggle:hover { background: transparent; border-color: transparent; }
.filters-toggle::before { height: 38px; background: var(--surface); border-color: var(--line); }
.filters-toggle:hover::before, .filters-open:checked + .filters-toggle::before { border-color: var(--ink); }
.filters-open:checked + .filters-toggle { border-color: transparent; }
.sort-submit, .sort-submit:hover { background: transparent; border-color: transparent; }
.sort-submit::before { height: 38px; background: var(--surface); border-color: var(--line); }
.sort-submit:hover::before { border-color: var(--ink); }

/* The banner: eyebrow at 12 px (an older .hero rule set 10.4 px); the Near cell 160 px wide. */
.avera-hero .eyebrow, .browse-hero .eyebrow { font-size: 12px; letter-spacing: .14em; }
.hero-search-near { width: 160px; min-width: 0; }
.hero-search-q input { border-radius: 0; }
/* The quick row sits 18 px under the search, measured to its pills; the stats band 44 px under them. */
.avera-hero .hero-inventory { margin-top: 13px; }
.avera-hero .value-strip, .browse-hero .value-strip { margin-top: 39px; }
.avera-hero .value-strip li, .browse-hero .value-strip li { gap: 0; padding: 16px 18px; }
.avera-hero .value-strip strong, .browse-hero .value-strip strong { font-size: 22px; line-height: 46.5px; }

/* Cards: the condition tag as tall as the MOCK tag (the reference stretches it in its flex row);
   the seller line one line tall, as the reference's estimate line. */
.product-card .condition-tag { border: 1px solid transparent; }
.product-seller { display: flex; }

/* Toolbar and footer. */
.inventory-sort select { width: 174px; min-width: 0; }
.page { padding-bottom: 64px; }
.site-footer { margin-top: 0; }
.footer-links a { display: block; line-height: 1.55; }

/* The same stats band in the search page's banner. */
.browse-hero .value-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 760px; padding: 0;
  list-style: none; border: 0; border-radius: var(--radius); background: rgba(255, 255, 255, .1); overflow: hidden;
}
.browse-hero .value-strip li { display: flex; flex-direction: column; background: rgba(24, 28, 32, .75); border: 0; border-radius: 0; }
.browse-hero .value-strip strong { color: #fff; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.browse-hero .value-strip small { margin: 0; color: #9aa3ad; font-size: 12.5px; }

/* The category chips flow beside "Browse:" as the reference's chips beside "Try:" (the wrapper
   keeps its markup; only its box goes); the 44 px chip boxes already leave ~10 px between pills. */
.avera-hero .hero-components { display: contents; }
.avera-hero .hero-inventory { column-gap: 8px; row-gap: 0; }

@media (max-width: 760px) {
  .site-header .header-row { grid-template-rows: minmax(60px, auto) auto auto; }
  .hero-search-near { width: auto; }
  .avera-hero .value-strip, .browse-hero .value-strip { grid-template-columns: minmax(0, 1fr); margin-top: 23px; }
  .avera-hero .value-strip li, .browse-hero .value-strip li { padding: 14px 18px; }
  .avera-hero .value-strip strong, .browse-hero .value-strip strong { font-size: 17px; line-height: 1.3; }
  .avera-hero .value-strip small, .browse-hero .value-strip small { font-size: 12.5px; }
}

/* Phones: the form is collapsed behind the toggle in the sort row; only where :has() is supported,
   so a browser without it shows the form open rather than hiding it for good. */
@supports selector(:has(*)) {
  @media (max-width: 767px) {
    .inventory-controls > form { display: none; }
    .inventory-browser:has(.filters-open:checked) .inventory-controls > form { display: block; }
    .inventory-browser:not(:has(.filters-open:checked)) > .inventory-controls { margin-bottom: 0; }
  }
}
@media (max-width: 767px) {
  .inventory-sort { gap: 8px; }
  .inventory-sort select { flex: 1 1 auto; width: auto; min-width: 0; }
  .filter-count { min-width: 20px; padding: 0 6px; }
}
.inventory-sort .filters-toggle { color: var(--ink); font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
@media (max-width: 760px) {
  /* The reference's phone "Deliver to" cell is 50 px tall; 50 is still above the 44 px rule. */
  .hero-search-near select { height: 50px; min-height: 50px; padding-top: 20px; padding-bottom: 4px; }
}

/* ---------------------------------------------------------------- the seller page (checkpoint 1c1)
   Derived from the approved direction's listing-page seller block (white card, ink gradient tile,
   name in the display face, muted place) and its card system; the reference has no seller page. */
.seller-page { max-width: none; }
.seller-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark eyebrow cta" "mark name cta" "mark place cta" "mark since cta";
  align-items: center; column-gap: 18px; margin: 0 0 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.seller-mark {
  grid-area: mark; align-self: start; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ink), #3a4250); color: #fff;
}
.seller-head .eyebrow { grid-area: eyebrow; margin: 0 0 6px; color: var(--brand-dark); }
.seller-heading { grid-area: name; margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.seller-head .seller-location { grid-area: place; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.seller-head .seller-location .pin { width: 14px; height: 14px; margin-top: .25em; color: var(--muted); }
.seller-head .seller-since { grid-area: since; margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.seller-head .seller-listings { grid-area: cta; margin: 0; align-self: center; }
.seller-description { max-width: 72ch; margin: 0 0 32px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.seller-policies { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.seller-policy { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.seller-policy-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.seller-policy .seller-text, .seller-policy .unstated { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.seller-own-words { max-width: 72ch; margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.seller-page + * { margin-top: 0; }
@media (max-width: 760px) {
  .seller-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark eyebrow" "mark name" "place place" "since since" "cta cta"; padding: 18px; column-gap: 14px; }
  .seller-mark { width: 48px; height: 48px; }
  .seller-head .seller-listings { margin-top: 16px; }
  .seller-head .seller-listings .btn { width: 100%; }
}
/* In the seller's own profile screen the preview is narrower: its header stacks. */
.seller-preview .seller-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark eyebrow" "mark name" "place place" "since since" "cta cta"; }
.seller-preview .seller-head .seller-listings { margin-top: 12px; }
/* Breadcrumbs as the reference's: 13 px, muted links, the current place in ink. */
.crumbs { gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs > span:last-child:not([aria-hidden]) { color: var(--ink); font-weight: 500; }
.seller-head .seller-location .pin path { fill: currentColor; stroke: none; }
.seller-head .seller-location .pin circle { fill: var(--surface); }

/* ---------------------------------------------------------------- review fixes (checkpoint 1c1)
   F1: the Filters checkbox is a control only where its label shows (up to 767 px); from 768 px it
   leaves the tab order, so keyboard focus never lands on an invisible stop that changes nothing.
   F2: the header's navigation may wrap at every width up to 767 px; its one-line rule had pushed
   the page sideways between 481 and 524 px (swept at 1 px steps from 320 to 767 px). */
@media (min-width: 768px) { .filters-open { display: none; } }
@media (max-width: 767px) { .site-header .header-nav ul { flex-wrap: wrap; } }

/* ================================================================== checkpoint 2: listing and cart
 * The listing page follows the reference's listing page (measured at 1280 and 375 px); the
 * reference has no cart, so the cart is derived from the accepted card, type and summary system.
 * The cart's quantity editor is CART-CAP's markup (Builder 2): it is styled through its
 * data-cart-* hooks only, with no class added inside it.
 */

/* ---------------------------------------------------------------- the listing page */
.product-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 40px; }
.product-media { gap: 12px; }
.product-media .photo-frame { border: 0; border-radius: 18px; background: #e9e7e1; }
.product-media .thumb-large { border-radius: 18px; }
.gallery-stage { border-radius: 18px; }
.gallery-choices { gap: 10px; }
.gallery-thumb { width: 104px; height: 78px; border: 2px solid transparent; border-radius: 12px; background: var(--surface); }
.gallery-choice:checked + .gallery-thumb { border-color: var(--brand); }
.product-info { min-width: 0; }
.detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--muted); letter-spacing: normal; text-transform: none; font-size: 11.5px; }
.detail-tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.detail-tag.mono { font-family: var(--mono); font-weight: 500; }
.detail-badges .mock-tag { box-shadow: none; background: var(--surface); }
.product-heading { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.product-info .product-condition { margin: 12px 0 0; }
.product-info .condition-tag { gap: 5px; padding: 3px 9px; border: 1px solid transparent; background: var(--brand-soft); color: var(--brand-dark); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.product-info .condition-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-info .condition-tag.unstated { background: var(--surface); color: var(--muted); border: 1px dashed #a7adb4; }
.product-info .condition-tag.unstated::before { display: none; }
.pn-box { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pn-label { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pn-box code { font-family: var(--mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.product-info .listing-location { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.product-info .listing-location .pin, .product-info .listing-location .pin { width: 14px; height: 14px; margin-top: .25em; color: var(--muted); }
.product-info .listing-location .pin path { fill: currentColor; stroke: none; }
.product-info .listing-location .pin circle { fill: var(--bg); }
.buy-box { margin: 22px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.buy-price .price.big { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.buy-price .per { color: var(--muted); font-size: 14px; font-weight: 500; }
.buy-box .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; }
.buy-box .facts div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.buy-box .facts dt { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.buy-box .facts dd { margin: 4px 0 0; color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 650; }
.buy-box .facts .fact-fast { background: var(--brand-soft); border-color: rgba(52, 92, 255, .25); }
.buy-box .facts .fact-fast dt, .buy-box .facts .fact-fast dd { color: var(--brand-dark); }
.add-form { margin: 0; }
.add-form .field { margin: 0 0 14px; }
.add-form .field label { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.add-form .field input { height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fcfcfb; font-size: 15px; }
.add-form .field input:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px rgba(52, 92, 255, .15); }
.add-form .help { color: var(--muted); font-size: 12.5px; }
.add-form .btn.large { min-height: 46px; font-size: 15px; }
[data-listing-unavailable] { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13.5px; font-weight: 600; }
.sold-by { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 20px 0 0; padding: 16px 16px 16px 78px; position: relative; min-height: 80px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); font-size: 14px; }
.sold-by::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 9.5 6 4.5h12l1.5 5M4.5 9.5h15M4.5 9.5c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5M6 12v7.5h12V12M10 19.5v-4.5h4v4.5' fill='none' stroke='%23FFFFFF' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 24px,
              linear-gradient(135deg, var(--ink), #3a4250);
}
.sold-by .seller-link { color: var(--ink); text-decoration: none; }
.sold-by .seller-link strong { font-weight: 650; }
.sold-by .seller-link:hover { text-decoration: underline; }
.detail-more { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 28px; margin-top: 56px; }
.detail-more h2 { margin: 0 0 14px; font-size: 20px; }
.detail-description .description { margin: 0; color: #353b42; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.spec-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.spec-card .card-title { margin: 0 0 14px; font-size: 20px; }
.spec-card .spec-list { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; }
.spec-card .spec-list div, .spec-card .spec-list div:first-child { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--line); }
.spec-card .spec-list div:last-child { border-bottom: 0; }
.spec-card .spec-list dt { padding: 10px 14px; background: #fbfaf8; color: var(--muted); font-weight: 500; }
.spec-card .spec-list dd { padding: 10px 14px; color: var(--ink); font-weight: 400; text-align: left; }
@media (min-width: 1101px) {
  .product-info { position: sticky; top: 92px; }
}
@media (max-width: 1100px) {
  .product-detail { grid-template-columns: minmax(0, 1fr); }
  .detail-more { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
}
@media (max-width: 760px) {
  .gallery-thumb { width: 84px; height: 63px; }
  .buy-box .facts { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- the cart (derived) */
.cart-layout { gap: 24px; }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.cart-groups { gap: 16px; }
.cart-group { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.cart-group .card-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
/* One line: the tile, the title and its facts, quantity and amount on the right; its notices on a
   row of their own, the full width of the line; then the quantity editor and Remove. The main
   column's box gives way (display: contents) so its children take the grid's cells, in DOM order. */
.cart-lines .cart-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto minmax(110px, auto);
  grid-template-areas: "thumb title qty amount" "thumb meta qty amount" "notes notes notes notes" ". edit edit remove";
  column-gap: 18px; row-gap: 6px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line);
}
.cart-lines .cart-line:first-child { border-top: 0; padding-top: 10px; }
.cart-line > .thumb { grid-area: thumb; flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 12px; }
.cart-line > .thumb .thumb-glyph { width: 46%; }
.cart-line .cart-line-main { display: contents; }
.cart-line .cart-line-title { grid-area: title; margin: 0; font-family: var(--display); font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cart-line .cart-line-title a { color: var(--ink); text-decoration: none; }
.cart-line .cart-line-title a:hover { color: var(--brand-dark); }
.cart-line .cart-line-meta { grid-area: meta; margin: 0; font-size: 13px; }
.cart-line .cart-line-notes { grid-area: notes; display: grid; gap: 6px; margin: 4px 0 0; }
.cart-line .cart-line-notes p { margin: 0; }
.cart-line [data-cart-qty-edit] { grid-area: edit; display: grid; gap: 8px; min-width: 0; }
.cart-line .cart-line-qty { grid-area: qty; align-self: start; color: var(--ink-2); font-size: 14px; text-align: right; }
.cart-line .cart-line-amount { grid-area: amount; align-self: start; min-width: 0; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 700; text-align: right; white-space: nowrap; }
.cart-line .cart-line-remove { grid-area: remove; align-self: center; justify-self: end; margin: 0; }
.cart-line-notes [data-cart-line-stock-note] { padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #8a5300; font-size: 13.5px; font-weight: 600; }
.cart-line-notes [data-cart-line-unavailable], .cart-line-notes [data-cart-line-reason] { padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13.5px; font-weight: 600; }
.cart-line-notes .muted.small { padding: 0 2px; font-size: 13px; }
/* The quantity editor (CART-CAP's markup, through its hooks). */
.cart-line [data-cart-qty-form] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.cart-line [data-cart-qty-decrease], .cart-line [data-cart-qty-increase] { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; }
.cart-line [data-cart-qty-field] { display: block; margin: 0; }
.cart-line [data-cart-qty-input] { width: 76px; min-height: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font); text-align: center; }
.cart-line [data-cart-qty-input]:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px rgba(52, 92, 255, .15); }
.cart-line [data-cart-qty-input][aria-invalid="true"] { border-color: #9b2c2c; box-shadow: 0 0 0 3px rgba(155, 44, 44, .15); }
.cart-line [data-cart-qty-update] { min-height: 44px; }
.cart-line [data-cart-qty-error] { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13.5px; font-weight: 600; }
.cart-line [data-cart-qty-adjusted] { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13.5px; font-weight: 600; }
/* The page's notices: stock changed at checkout, and the flash messages. */
[data-cart-stock-changed], .page > .flash { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius); font-size: 14.5px; }
/* The summary, as a card of the system. */
.summary { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
@media (min-width: 1024px) { .summary { position: sticky; top: 92px; } }
.summary .card-title { margin: 0 0 18px; font-size: 22px; font-weight: 700; }
.summary-list { margin: 0; }
.summary-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary-list dd { margin: 0; font-weight: 650; text-align: right; }
.summary-list .summary-total { align-items: start; margin: 0; padding: 16px 0 !important; border-top: 0; border-bottom: 0; font-size: 17px; }
.summary-list .summary-total dt { color: var(--ink); font-weight: 650; }
.summary-list .summary-total dd { color: var(--brand-dark); font-family: var(--display); font-size: 21px; font-weight: 700; }
.summary [data-cart-not-counted] { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13.5px; font-weight: 600; }
.summary > .muted.small { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.summary form { margin-top: 18px; }
.summary .btn.large { min-height: 52px; }
.summary .mock-note { margin-top: 14px; border-radius: 10px; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.02em; }
@media (max-width: 760px) {
  .cart-group { padding: 16px; }
  .cart-lines .cart-line {
    grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 12px;
    grid-template-areas: "thumb title title" "thumb meta meta" "notes notes notes" "edit edit edit" "qty qty amount" "remove remove remove";
  }
  .cart-line > .thumb { width: 72px; }
  .cart-line .cart-line-qty { text-align: left; align-self: center; }
  .cart-line .cart-line-amount { align-self: center; }
  .cart-line .cart-line-remove { justify-self: start; }
  .summary { padding: 20px; }
}

/* ================================================================== checkpoint 2b: Luis's logos
 * INTERIM assets derived from Luis's JPEGs (BRANDING.md): each PNG carries the background it was
 * supplied on, so it sits on that colour. The light lockup's #f4f3ef is the header's and the
 * page's colour; the header is therefore opaque #f4f3ef (it was #f4f3ef at 86 % over the page,
 * which over the dark hero, when scrolled, would show the lockup's box). The dark lockup's #181b20
 * on the footer's #181c20 differs by 1 level in green, not visible. Only heights are set: every
 * image keeps its own aspect ratio. When transparent SVGs arrive, the header can be translucent
 * again.
 */
.site-header { background: #f4f3ef; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand-lockup { display: block; width: auto; height: 28px; max-width: none; }
.brand-compact { display: none; width: auto; height: 28px; max-width: none; border-radius: 6px; }
.site-header .brand { gap: 10px; }
.footer-brand .brand-lockup { height: 28px; }
/* Checkpoint 2c: on the white sign-in and refusal cards the lockup's own light background (baked into
   the interim JPEG-derived file) is drawn as a deliberate rounded tile, padded so the mark never
   touches its edge; the image keeps its height and ratio. */
.signin-page .brand-lockup, .center-card .brand-lockup { box-sizing: content-box; padding: 4px 8px; border-radius: 8px; background: #f4f3ef; }
/* Narrow screens: the standalone mark (supplied-1.jpg) where the lockup does not fit beside the
   header's actions on one row (measured: it fits from 550 px). */
@media (max-width: 549px) {
  .site-header .brand-lockup { display: none; }
  .site-header .brand-compact { display: block; }
}