/* Nocturne — the retail face of Marvel Peptide USA.

   Tokens and component classes from the designer's handoff (styles.css, the
   Nocturne system), plus the page-level rules the prototype carried inline,
   lifted into classes so the templates stay readable. Colours are variables:
   the front-page designer in Settings writes the four that may change
   (ground, surface, text, accent) into :root on the page, and everything here
   reads from them.

   Rules worth keeping when editing:
   - the accent is a line and a glow, never a flood; primary buttons are an
     accent OUTLINE, not a fill;
   - body copy in the accent uses --color-accent-300, not the base accent;
   - elevation is an edge plus ambient darkness — never stack heavy shadows;
   - headings stay at weight 500; hierarchy is size and space. */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* The one saturated ground: the announcement bar and the wholesale band. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* A refusal or a problem, on the dark ground. */
  --color-danger: #f3d6d6;
  --color-danger-line: #7a4a4a;
  --color-danger-bg: rgba(120, 60, 60, 0.28);
  --color-danger-tag: rgba(120, 60, 60, 0.4);

  /* Tints laid over a surface for hover and press. */
  --tint-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
  --tint-press: color-mix(in srgb, var(--color-text) 14%, transparent);
  --tint-accent: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --tint-accent-strong: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --tint-bar: color-mix(in srgb, var(--color-bg) 92%, transparent);

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);

  /* Muted text, by rank. Expressed once so the page reads consistently. */
  --text-88: color-mix(in srgb, var(--color-text) 88%, transparent);
  --text-80: color-mix(in srgb, var(--color-text) 80%, transparent);
  --text-76: color-mix(in srgb, var(--color-text) 76%, transparent);
  --text-74: color-mix(in srgb, var(--color-text) 74%, transparent);
  --text-72: color-mix(in srgb, var(--color-text) 72%, transparent);
  --text-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --text-66: color-mix(in srgb, var(--color-text) 66%, transparent);
  --text-62: color-mix(in srgb, var(--color-text) 62%, transparent);
  --text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --text-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --text-52: color-mix(in srgb, var(--color-text) 52%, transparent);
  --text-50: color-mix(in srgb, var(--color-text) 50%, transparent);
  --text-45: color-mix(in srgb, var(--color-text) 45%, transparent);

  --page-x: clamp(18px, 5vw, 56px);
  --section-y: clamp(48px, 9vh, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-400); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: var(--text-55); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

@keyframes drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:hover { text-decoration: none; color: var(--color-text); }
.btn svg { display: block; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary, .btn.gold { color: var(--color-accent); border-color: var(--color-accent); background: transparent; }
.btn-primary:hover, .btn.gold:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.btn-primary:active, .btn.gold:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary, .btn.ghost { border-color: var(--color-divider); background: transparent; color: var(--color-text); }
.btn-secondary:hover, .btn.ghost:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active, .btn.ghost:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.btn-lg { padding: 11px 20px; font-size: 15px; white-space: nowrap; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px; font-weight: 400;
  color: var(--text-70);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--text-45); }
.input:hover { border-color: var(--text-45); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer; margin: 0; color: var(--color-text);
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-50); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.lift { transition: box-shadow .3s ease, transform .3s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 400;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: var(--radius-xs);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 400; color: var(--text-60);
  padding: var(--space-2); border-bottom: 1px solid transparent;
}
.table td { padding: var(--space-2); border-bottom: 1px solid transparent; vertical-align: middle; }
.table thead tr {
  background: linear-gradient(to right, transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover td { background: transparent; }
.table .right { text-align: right; }

/* — images — */
.lighten { mix-blend-mode: lighten; background-color: transparent; }

/* — flash messages — */
.flash {
  padding: 10px 14px; border-radius: var(--radius-md); margin: 0 0 12px; font-size: 14px;
  background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text);
  border: 1px solid var(--color-divider);
}
.flash.success { border-color: var(--color-accent-700); color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.flash.error { border-color: var(--color-danger-line); color: var(--color-danger); background: var(--color-danger-bg); }
.flash.warning { border-color: var(--color-accent-2-700); color: var(--color-accent-2-200); background: color-mix(in srgb, var(--color-accent-2) 12%, transparent); }

/* — scroll reveals —
   Elements are authored visible. The script adds .rv only when it can also
   remove it, and never under prefers-reduced-motion, so nothing is ever left
   invisible when the observer does not fire. */
.rv { opacity: 0; transform: translateY(18px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* --------------------------------------------------------------------------
The shell: announcement bar, header, footer
   ------------------------------------------------------------------------ */
.sf-wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--page-x); padding-right: var(--page-x); }

.announce { background: var(--color-section); border-bottom: 1px solid var(--color-divider); }
.announce .sf-wrap {
  padding-top: 7px; padding-bottom: 7px; display: flex; align-items: center; justify-content: center;
  gap: 9px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-88); text-align: center;
}
.announce svg { flex: none; fill: var(--color-accent-300); }

.sf-header { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.sf-header .sf-wrap { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sf-brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.sf-brand img { height: 38px; width: auto; }
.sf-burger { display: none; width: 44px; height: 44px; flex: none; }
/* The back arrow, same size as the menu button but shown at every width. */
.sf-back { width: 44px; height: 44px; flex: none; order: -1; }
.sf-back[hidden] { display: none; }
.sf-nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 26px); font-size: 14px; }
.sf-nav a { color: inherit; text-decoration: none; opacity: 0.8; padding: 9px 0; white-space: nowrap; }
.sf-nav a:hover, .sf-nav a[aria-current="page"] { opacity: 1; color: var(--color-accent); }
.sf-nav a.btn { opacity: 1; padding: var(--space-2) calc(var(--space-3) * 1.2); }
.sf-nav a.btn:hover { color: var(--color-accent); }
.sf-nav .cartn { color: var(--color-accent); }
@media (max-width: 860px) {
  .sf-burger { display: inline-flex; }
  .sf-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; padding: 14px 0 6px; border-top: 1px solid var(--color-divider); gap: 0; }
  .sf-nav.open { display: flex; }
  .sf-nav a { padding: 9px 0; min-height: 44px; display: flex; align-items: center; }
  .sf-nav a.btn { justify-content: center; margin-top: 8px; }
}

.sf-footer { border-top: 1px solid var(--color-divider); }
.sf-footer .sf-wrap { padding-top: 28px; padding-bottom: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.sf-footer img { height: 46px; width: auto; }
.sf-footer div { font-size: 12px; color: var(--text-60); }
/* The copyright line and the policy links, under the footer proper. */
.sf-footer .sf-legal { padding-top: 0; padding-bottom: 28px; margin-top: -18px; }
.sf-legal nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.sf-legal nav a { color: var(--text-60); text-decoration: none; padding: 6px 0; }
.sf-legal nav a:hover { color: var(--color-accent); }

.sf-flashes { padding-top: 12px; }

/* --------------------------------------------------------------------------
Home
   ------------------------------------------------------------------------ */
.glow-wrap { position: relative; overflow: hidden; }
.glow {
  position: absolute; pointer-events: none; filter: blur(30px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 70%);
}
.hero .glow { inset: -20% -10% auto -30%; height: 620px; animation: drift 22s ease-in-out infinite; }
.hero .sf-wrap { position: relative; padding-top: clamp(56px, 11vh, 128px); padding-bottom: clamp(40px, 7vh, 80px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.eyebrow .tag { white-space: nowrap; flex: none; }
.eyebrow span:not(.tag) { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-52); }
.hero h1 { font-size: clamp(38px, 7.2vw, 76px); line-height: 1.02; letter-spacing: -0.03em; max-width: 15ch; margin: 0 0 22px; }
.hero .lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; max-width: 46ch; color: var(--text-76); margin: 0 0 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.stats { border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.stats .sf-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-cell { padding: 26px 0; border-right: 1px solid var(--color-divider); }
.stat-cell + .stat-cell { padding-left: clamp(0px, 3vw, 28px); }
.stat-cell:last-child { border-right: 0; }
.stat-cell .t { font-family: var(--font-heading); font-size: 21px; margin-bottom: 4px; }
.stat-cell .s { font-size: 13px; color: var(--text-60); }
@media (max-width: 720px) { .stat-cell { border-right: 0; border-bottom: 1px solid var(--color-divider); padding-left: 0 !important; } .stat-cell:last-child { border-bottom: 0; } }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-rule { border-top: 1px solid var(--color-divider); }
.kicker { color: var(--color-accent); margin: 0 0 14px; }
.h2 { font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -0.02em; margin: 0 0 14px; }
.h2.wide { max-width: 22ch; margin-bottom: 38px; }
.copy { font-size: 15px; line-height: 1.6; color: var(--text-72); }

.why-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.why-card { padding: 22px; gap: 10px; }
.why-card .mark { width: 30px; height: 2px; background: var(--color-accent); margin-bottom: 8px; }
.why-card .card-title { font-size: 19px; }
.why-card .card-body { font-size: 14px; opacity: 0.72; }

.two { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.two.top { align-items: start; gap: clamp(26px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.teaser-box { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; filter: blur(4px); opacity: 0.5; background: var(--color-divider); }
.teaser-grid div { background: var(--color-surface); padding: 20px 18px; }
.teaser-grid .lot { font-size: 10px; letter-spacing: 0.12em; color: var(--color-accent); }
.teaser-grid .nm { font-family: var(--font-heading); font-size: 18px; margin: 8px 0 4px; }
.teaser-grid .ln { font-size: 12px; opacity: 0.6; }
/* The same four cards, legible: real products, each one a link. */
.teaser-grid.live { filter: none; opacity: 1; }
.teaser-grid.live a { display: block; text-decoration: none; color: inherit; transition: background var(--t-fast, .15s) ease; }
.teaser-grid.live a:hover { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.teaser-grid.live .lot { text-transform: uppercase; }
.teaser-grid.live .nm { margin-bottom: 6px; }
.teaser-grid.live .pp { margin-top: 8px; font-family: var(--font-heading); font-size: 16px; }
.teaser-all:hover { color: var(--color-accent); }

/* The basket in the shop's header: a link with a count on it. */
.sf-nav .sf-basket { display: inline-flex; align-items: center; gap: 7px; }
.sf-nav .sf-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-xs);
  font-size: 11px; background: var(--color-accent);
  color: var(--color-accent-ink, var(--color-bg));
}
.teaser-all { display: block; padding: 12px 18px; font-size: 13px; text-decoration: none;
  background: var(--color-surface); border-top: 1px solid var(--color-divider); }
.teaser-all:hover { color: var(--color-accent); }
.teaser-lock { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.teaser-lock span {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-xs);
  border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent);
}

.coa-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.coa-form .field { flex: 1; min-width: 180px; }
.coa-hit { margin-top: 14px; padding: 16px 18px; gap: 8px; }
.coa-hit .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.coa-hit .nm { font-family: var(--font-heading); font-size: 18px; }
.coa-hit .ln { font-size: 13px; color: var(--text-66); }
.coa-hit .btn { align-self: flex-start; margin-top: 4px; }
.coa-miss { margin-top: 12px; font-size: 13px; color: var(--color-neutral-400); }
.coa-panel { display: grid; place-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.coa-panel .in { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; justify-content: center; }
.coa-photo { width: 180px; height: 240px; flex: none; border-radius: 10px; overflow: hidden; }
.coa-photo img { width: 100%; height: 100%; object-fit: cover; }
.coa-note { max-width: 20ch; }
.coa-note .t { font-family: var(--font-heading); font-size: 16px; margin-bottom: 6px; }
.coa-note .s { font-size: 13px; line-height: 1.55; color: var(--text-62); }

.wholesale { background: var(--color-section); border-top: 1px solid var(--color-divider); }
.wholesale .sf-wrap { padding-top: clamp(46px, 9vh, 88px); padding-bottom: clamp(46px, 9vh, 88px); }
.wholesale .two { gap: clamp(24px, 5vw, 48px); }
.wholesale .kicker { color: var(--color-accent-300); }
.wholesale .copy { color: var(--text-80); max-width: 44ch; margin: 0 0 20px; }
.wholesale .btn-primary { border-color: var(--color-accent-300); color: var(--color-accent-100); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.reviews-head .h2 { margin: 0; }
.rating { display: flex; align-items: baseline; gap: 10px; }
.rating .stars { color: #f5b301; display: inline-flex; gap: 2px; }
.rating .num { font-family: var(--font-heading); font-size: 22px; }
.rating .cnt { font-size: 13px; color: var(--text-66); }
.review-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.review { margin: 0; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.review p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.review footer { font-size: 13px; color: var(--text-66); }
.review footer::before { content: "— "; }
.reviews-more { margin: 22px 0 0; }
.perks { display: grid; gap: 10px; }
.perk { display: flex; gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.perk .k { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.08em; color: var(--color-accent-300); flex: none; text-transform: uppercase; }
.perk .v { font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 82%, transparent); }

/* The storefront's "how it works" grid only. Unscoped, it also matched the
   checkout's step indicator (portal/_steps.html) and drew a divider band
   behind the gaps between its steps. */
.sf-wrap .steps { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.step { background: var(--color-bg); padding: 24px 22px 30px; transition: background .3s ease; }
.step:hover { background: var(--color-surface); }
.step .n { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 18px; }
.step .t { font-family: var(--font-heading); font-size: 18px; margin-bottom: 8px; }
.step .s { font-size: 13.5px; line-height: 1.55; color: var(--text-66); }

/* Measures and spacing the front door's markup used to carry inline. */
.sf-wrap.teaser-wrap { padding-top: clamp(48px, 9vh, 88px); padding-bottom: clamp(48px, 9vh, 88px); }
.h2.teaser-title { font-size: clamp(25px, 3.2vw, 34px); }
.h2.measure-20 { max-width: 20ch; }
.h2.how-title { max-width: 24ch; margin-bottom: 40px; }
.copy.measure-40 { max-width: 40ch; }
.copy.coa-copy { max-width: 44ch; color: var(--text-74); margin-bottom: 18px; }
.btn.teaser-cta { margin-top: 8px; }
.btn.coa-button { padding: 9px 18px; }
.btn.close-cta { padding: 12px 22px; }
.close-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kicker.acct-kicker { margin-bottom: 12px; }
.seg.seg-wrap { flex-wrap: wrap; }
.btn.align-start { align-self: flex-start; }
.wblock.wblock-last { border-bottom: 0; padding-bottom: 0; }
.text-muted.hint { font-size: 12px; }

.close-band .glow { inset: auto -20% -60% 20%; height: 420px; animation: drift 26s ease-in-out infinite; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%); }
.close-band .sf-wrap { position: relative; padding-top: clamp(56px, 11vh, 110px); padding-bottom: clamp(56px, 11vh, 110px); }
.close-band h2 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.025em; margin: 0 0 12px; }
.close-band p { font-size: 16px; color: var(--text-72); margin: 0 0 24px; }

/* --------------------------------------------------------------------------
Catalog
   ------------------------------------------------------------------------ */
.cat-main { padding-top: clamp(30px, 6vh, 56px); padding-bottom: 90px; }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.cat-head h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.025em; margin: 0; }
.cat-head .kicker { margin-bottom: 10px; }
.cat-note { font-size: 14px; color: var(--text-62); max-width: 56ch; margin: 0 0 26px; }
.promo { margin: 0 0 18px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-accent-700); color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 10%, transparent); font-size: 14px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--color-divider); margin-bottom: 22px; }
.toolbar .input { max-width: 260px; }
.toolbar .cats { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.toolbar .cats .btn { border-color: var(--color-divider); color: var(--color-text); font-size: 13px; padding: 5px 12px; }
.toolbar .cats .btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.toolbar .cats .btn.on { border-color: var(--color-accent); color: var(--color-accent); }
.toolbar .stockf { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar .stockf .btn { border-color: var(--color-divider); font-size: 13px; padding: 5px 12px; }
.toolbar .stockf .btn.on { border-color: var(--color-accent); color: var(--color-accent); }
.count { font-size: 12px; color: var(--text-60); white-space: nowrap; }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.pcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; margin: 0;
  background: var(--color-surface); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm);
  transition: box-shadow .28s ease, transform .28s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
.pcard[hidden] { display: none; }
.pcard .pic { display: block; margin: -18px -18px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; aspect-ratio: 16/9; background: var(--color-neutral-900); }
.pcard .pic img { width: 100%; height: 100%; object-fit: contain; }
.pcard .pic .labelpic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px; }
.pcard .pic .labelpic svg { max-width: 100%; max-height: 100%; }
.pcard .top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.pcard .top .c { color: var(--text-66); }
/* The batch, under the size and purity: the category leads the card. */
.pcard .lot { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-60); margin: -12px 0 16px; }
.pcard .lower { text-transform: lowercase; }
.pcard .nm { font-family: var(--font-heading); font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -0.02em; line-height: 1.1; margin: 16px 0 4px; }
.pcard .nm a { color: inherit; text-decoration: none; }
.pcard .ln { display: flex; gap: 10px; font-size: 13px; color: var(--text-66); margin-bottom: 20px; }
.pcard .ln .sl { opacity: 0.4; }
.pcard .foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--color-divider); margin-top: auto; }
.pcard .price { font-size: 12px; color: var(--color-accent); }
.pcard .addrow { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.pcard .addrow .qty { width: 58px; text-align: center; min-height: 34px; padding: 4px; }
.pcard .addrow > .btn { flex: 1; white-space: nowrap; padding: 7px 10px; font-size: 13px; }
.pcard .addrow .qbtn { width: 32px; min-height: 34px; padding: 0; border-color: var(--color-divider); }
.stock { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.stock .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.6s ease-in-out infinite; flex: none; }
.stock.in { color: var(--color-accent-400); }
.stock.low { color: var(--color-accent-2-400); }
.stock.back, .stock.out, .stock.soon { color: var(--color-neutral-500); }
.cat-table tbody tr { cursor: pointer; }
.cat-table tbody tr[hidden] { display: none; }
.cat-table .nm { font-family: var(--font-heading); font-size: 15px; }
.cat-table .lot { font-size: 12px; color: var(--text-55); }
.cat-table .price { color: var(--color-accent); }
.cat-table .qty { width: 72px; text-align: center; min-height: 32px; padding: 4px; }
.tablefoot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tablefoot .run { font-size: 14px; color: var(--text-66); }
.tablefoot .run b { color: var(--color-text); font-weight: 500; }
.footnote { margin-top: 26px; font-size: 12px; color: var(--text-60); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
Product
   ------------------------------------------------------------------------ */
.prod-main { padding-top: clamp(24px, 5vh, 42px); padding-bottom: 90px; }
.prod-main .back { margin-bottom: 22px; white-space: nowrap; }
.prod { display: grid; gap: clamp(24px, 5vw, 56px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.prod .crumb { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; }
.prod h1 { font-size: clamp(34px, 5.5vw, 60px); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 14px; }
.prod .blurb { font-size: 16px; line-height: 1.6; color: var(--text-74); max-width: 44ch; margin: 0 0 26px; white-space: pre-line; }
.prod .stockrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.prod .stockrow .stock { font-size: 14px; }
.prod .stockrow .stock .dot { width: 8px; height: 8px; }
.prod .stockrow .note { font-size: 13px; color: var(--text-66); }
.prod .bar { height: 4px; border-radius: 999px; background: var(--color-neutral-900); overflow: hidden; max-width: 320px; margin-bottom: 30px; }
.prod .bar i { display: block; height: 100%; width: 0; background: currentColor; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.prod .buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.prod .buy .qty { width: 64px; text-align: center; min-height: 40px; padding: 4px; }
.prod .buy .qbtn { width: 36px; min-height: 40px; padding: 0; border-color: var(--color-divider); }
.prod .pricebig { font-family: var(--font-heading); font-size: 28px; letter-spacing: -0.02em; margin-bottom: 4px; }
.prod .priceunit { font-size: 13px; color: var(--text-62); margin-bottom: 22px; }
.prod .photo { margin: 0 0 22px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-900); max-width: 420px; }
.prod .photo img { width: 100%; height: auto; }
.specs { padding: 22px; gap: 0; }
.specs .h { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-55); margin-bottom: 14px; }
.specs .r { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.specs .r .k { color: var(--text-62); }
.specs .r .v { font-family: var(--font-heading); text-align: right; }
.specs .fn { font-size: 12px; line-height: 1.5; color: var(--text-60); margin: 16px 0 0; }
.related { margin-top: clamp(46px, 8vh, 80px); }
.related .kicker { margin-bottom: 18px; }
.related .cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rcard { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow .28s ease, transform .28s ease; }
.rcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.rcard .c { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.rcard .nm { font-family: var(--font-heading); font-size: 20px; letter-spacing: -0.02em; margin: 10px 0 4px; }
.rcard .ln { font-size: 12.5px; color: var(--text-60); }

/* --------------------------------------------------------------------------
Request an account
   ------------------------------------------------------------------------ */
.acct-main { max-width: 760px; padding-top: clamp(34px, 7vh, 72px); padding-bottom: 100px; }
.acct-main h1 { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -0.025em; margin: 0 0 12px; }
.acct-main .intro { font-size: 15px; color: var(--text-70); max-width: 48ch; margin: 0 0 28px; }
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.progress i { flex: 1; height: 2px; background: var(--color-divider); transition: background .4s ease; }
.progress i.on { background: var(--color-accent); }
.steplabels { display: flex; gap: 20px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 26px; }
.steplabels span { color: var(--text-45); }
.steplabels span.on { color: var(--color-accent); }
.stepcard { padding: clamp(20px, 4vw, 30px); gap: 16px; }
.frow { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.frow.tight { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.frow.addr { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wblock { display: grid; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-divider); }
.wblock .h { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.ack { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); cursor: pointer; font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--color-text); font-weight: 400; }
.ack:hover { border-color: var(--color-accent); }
.ack input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--color-accent); flex: none; }
.done { padding-top: clamp(20px, 6vh, 60px); }
.done .tick { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); display: grid; place-items: center; margin-bottom: 22px; }
.done h1 { font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -0.025em; margin: 0 0 12px; }
.done p { font-size: 15px; color: var(--text-72); max-width: 44ch; margin: 0 0 24px; }
.honeypot { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
The signed-in shop, on the app's own components.
   Cart, shipping, orders and invoices are built on app.css; when the retail
   shell is on, this maps its variables onto Nocturne so those pages wear the
   same face without a second copy of each.
   ------------------------------------------------------------------------ */
body.nocturne {
  --bg: var(--color-bg); --card: var(--color-surface); --ink: var(--color-text);
  --muted: var(--text-60); --line: var(--color-divider);
  --navy: var(--color-accent); --navy2: var(--color-accent-400);
  --gold: var(--color-accent); --gold2: var(--color-accent-400);
  --ok: var(--color-accent-300); --okbg: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --err: var(--color-danger); --errbg: var(--color-danger-bg);
  --warn: var(--color-accent-2-200); --warnbg: color-mix(in srgb, var(--color-accent-2) 12%, transparent);
  --info: var(--color-accent-200); --infobg: var(--tint-accent);
  --hover: var(--tint-hover); --shadow-bar: var(--shadow-md);
  --topbar-h: 63px;
}
.nocturne .wrap { margin: 0 auto; padding: 18px var(--page-x) 60px; }
/* The retail portal is a shop being browsed, so it keeps the design's centred
   column, the same measure as the storefront above. */
.nocturne.retail-shell .wrap { max-width: 1120px; }
/* The back office is worked, not browsed. A reading column left a third of a
   wide monitor empty while the tables inside it scrolled sideways — the
   dashboard's shipping table had its last columns off the edge of a card with
   room to spare on both sides. Every office screen takes the window. */
.nocturne.office .wrap { max-width: none; }
.nocturne .page-title { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.nocturne .page-title h1 { font-size: 24px; letter-spacing: -0.02em; }
.nocturne .card { background: var(--color-surface); border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }
.nocturne .card h2 { font-size: 16px; }
.nocturne .stat { background: var(--color-surface); border: 0; box-shadow: var(--shadow-sm); }
.nocturne table { font-size: 14px; }
.nocturne th, .nocturne td { border-bottom: 1px solid var(--color-divider); }
.nocturne th { color: var(--text-60); font-weight: 400; letter-spacing: 0.08em; }
.nocturne tr:hover td { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* The app's own buttons, as Nocturne secondary buttons. Primary, ghost, gold
   and danger buttons are left to their own rules: this rule used to reach
   them too, and a .btn-primary in the retail shell lost its accent outline
   and read as one more neutral button. */
.nocturne .btn:not(.btn-primary):not(.btn-ghost):not(.gold):not(.danger) { background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); font-weight: var(--font-heading-weight); }
.nocturne .btn:not(.btn-primary):not(.btn-ghost):not(.gold):not(.danger):hover { background: var(--tint-hover); color: var(--color-text); }
.nocturne .btn.gold { color: var(--color-accent); border-color: var(--color-accent); }
.nocturne .btn.gold:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.nocturne .btn.danger { color: var(--err); border: 1px solid var(--color-danger-line); background: transparent; }
.nocturne label { color: var(--text-70); font-weight: 400; font-size: 12px; }
.nocturne input, .nocturne select, .nocturne textarea {
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); caret-color: var(--color-accent);
}
.nocturne input::placeholder { color: var(--text-45); }
.nocturne input:focus, .nocturne select:focus, .nocturne textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }
.nocturne input[type=checkbox], .nocturne input[type=radio] { accent-color: var(--color-accent); }
.nocturne .tag { font-weight: 400; }
.nocturne .tag.gray { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.nocturne .tag.green { background: var(--color-accent-800); color: var(--color-accent-100); }
.nocturne .tag.gold { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.nocturne .tag.blue { background: var(--color-neutral-800); color: var(--color-accent-200); }
.nocturne .tag.red { background: var(--color-danger-tag); color: var(--color-danger); }
.nocturne .banner { border-color: var(--color-accent-2-700); }
.nocturne .empty { color: var(--text-55); }
.nocturne hr { border: 0; border-top: 1px solid var(--color-divider); }
.nocturne .wrap a { color: var(--color-accent); }
/* A product's name is text, not a link colour, even though it links. */
.nocturne .wrap .pcard .nm a, .nocturne .wrap .rcard, .nocturne .wrap .pcard .pic { color: inherit; }
.nocturne .muted { color: var(--text-60); }
/* The current checkout step's number. app.css fills its box with --gold and
   sets the number in --navy; here both are the accent, so the number was the
   colour of its own box and could not be seen. The accent is a line, never a
   flood: the box is outlined in it and the number takes the text colour, which
   stays legible whichever accent the storefront designer picks. */
.nocturne .steps li.now .n { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* --------------------------------------------------------------------------
   The back office, on the same tokens. Its navigation, cards, tables and
   forms are app.css's; only the colours, the type and the button style
   change, so every screen keeps its layout and gains the design's look.
   ------------------------------------------------------------------------ */
.nocturne.office h1, .nocturne.office h2, .nocturne.office h3, .nocturne.office h4 { letter-spacing: -0.015em; }
.nocturne.office h1 { font-size: 24px; }
.nocturne.office h2 { font-size: 18px; }
.nocturne.office h3 { font-size: 16px; }
.nocturne.office .topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); color: var(--color-text); }
.nocturne.office .topbar .brand { color: var(--color-text); font-family: var(--font-heading); font-weight: 500; }
.nocturne.office .topbar .brand b { color: var(--color-accent); }
.nocturne.office .topbar nav a, .nocturne.office .navgroup > summary { color: var(--text-80); font-weight: 400; }
.nocturne.office .topbar nav a:hover, .nocturne.office .navgroup > summary:hover,
.nocturne.office .navgroup[open] > summary { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.nocturne.office .topbar nav a.active, .nocturne.office .navgroup > summary.active,
.nocturne.office .navgroup[open] > summary.active { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 500; }
.nocturne.office .navgroup > summary:focus-visible { outline-color: var(--color-accent); }
.nocturne.office .navmenu { background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); }
.nocturne.office .navmenu a { color: var(--text-80); }
.nocturne.office .navmenu a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.nocturne.office .navmenu a.here { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 500; }
.nocturne.office .navhead { color: var(--text-50); }
.nocturne.office .topbar .right { color: var(--text-60); }
.nocturne.office .topbar .right a[style] { color: var(--color-accent) !important; }
.nocturne.office .topbar .right .langswitch a { color: var(--text-60) !important; }
.nocturne.office .navtoggle { color: var(--color-text); }
.nocturne.office .navtoggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nocturne.office .topbar #globalscan { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider) !important; }
.nocturne.office .topbar #globalscan::placeholder { color: var(--text-45); }
@media (max-width: 860px) {
  .nocturne.office.navopen .topbar .brand, .nocturne.office.navopen .topbar .navtoggle { background: var(--color-surface); }
  .nocturne.office .navmenu { border: 0; border-left: 2px solid var(--color-accent-700); box-shadow: none; background: transparent; }
  .nocturne.office .navmenu a:hover, .nocturne.office .navmenu a.here { box-shadow: none; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
}
.nocturne .choice { background: var(--color-surface); border-color: var(--color-divider); }
.nocturne .choice:hover { border-color: var(--color-accent-600); }
.nocturne .choice:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.nocturne .login-card { background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); }
.nocturne .login-card .logo { color: var(--color-text); font-weight: 500; }
.nocturne .login-card .logo b { color: var(--color-accent); }
.nocturne .stat .n { color: var(--color-text); font-weight: 500; }
.nocturne .stat .l { color: var(--text-60); }
.nocturne .page-title { border-bottom-color: var(--color-divider); }
.nocturne .banner { color: var(--warn); border-color: var(--color-accent-2-700); background: var(--warnbg); }
.nocturne .banner.error { color: var(--color-danger); border-color: var(--color-danger-line); background: var(--color-danger-bg); }
.nocturne .banner.info { color: var(--color-accent-200); border-color: var(--color-accent-700); background: var(--tint-accent); }
/* A handful of screens paint a box a pale colour inline — a warning tint, a
   preview sheet. On the dark ground the text would vanish into it, so a
   white box keeps dark text (a label preview must stay white) and the pale
   tints become their dark equivalents. */
.nocturne [style*="background:#fff"], .nocturne [style*="background: #fff"] { color: #1c2430; }
.nocturne [style*="background:#fff"] .muted, .nocturne [style*="background:#fff"] a { color: #4a5568; }
.nocturne [style*="background:#fff5f5"], .nocturne [style*="background:#fdeaea"], .nocturne [style*="background:#fbe9e7"] {
  background: rgba(120, 60, 60, 0.28) !important; color: var(--color-text) !important; }
.nocturne [style*="background:#fff8e6"], .nocturne [style*="background:#fffbeb"], .nocturne [style*="background:#fff7ea"] {
  background: var(--warnbg) !important; color: var(--color-text) !important; }
.nocturne [style*="background:#f5f7f9"], .nocturne [style*="background:#f2f5f9"], .nocturne [style*="background:#eef4f9"],
.nocturne [style*="background:#eef2f6"] { background: color-mix(in srgb, var(--color-text) 6%, transparent) !important; color: var(--color-text) !important; }
@media print {
  body.nocturne { background: #fff; color: #000; --card: #fff; --ink: #000; --muted: #555; --line: #ccc; }
  .announce, .sf-header, .sf-footer { display: none !important; }
  .nocturne .card { background: #fff; color: #000; box-shadow: none; }
}

/* == checkout components ====================================================
   The store's cart bar, the header cart and sign-in, the stepper, the
   agreement, the phone toolbar, and motion for somebody who asked for less.
   Only named tokens below; colours live in :root and body.nocturne.
   ------------------------------------------------------------------------ */
.sf-cart { flex: none; min-height: 44px; white-space: nowrap; }
.sf-signin { display: none; flex: none; align-items: center; min-height: 44px; padding: 0 6px; color: inherit; text-decoration: none; font-size: 14px; }
.sf-signin:hover { color: var(--color-accent); }
@media (max-width: 860px) { .sf-signin { display: inline-flex; } }

.stepper { display: inline-flex; align-items: stretch; gap: 6px; }
.stepper .step-btn { width: 34px; min-width: 34px; min-height: 34px; padding: 0; border-color: var(--color-divider); }
.stepper .qty { width: 58px; min-height: 34px; padding: 4px; text-align: center; }
.pcard .addrow .stepper .btn { flex: none; }
/* A narrow card puts Add on its own row under the stepper, at its full width,
   rather than past the card's edge or squeezed narrower than its words. */
.pcard .addrow { flex-wrap: wrap; }
.pcard .addrow > .btn { flex: 1 1 auto; }
.prod .buy .stepper .step-btn, .prod .buy .stepper .qty { min-height: 40px; }
.cat-table .stepper .step-btn { width: 30px; min-width: 30px; min-height: 30px; }
.cat-table .stepper .qty { width: 48px; min-height: 30px; }
.cat-table .qty.unavailable { opacity: 0.45; }
.cat-table .qty-col { width: 150px; }
@media (max-width: 640px), (pointer: coarse) {
  .stepper .step-btn { width: 44px; min-width: 44px; min-height: 44px; }
  .stepper .qty, .pcard .addrow .qty { min-height: 44px; }
  .pcard .addrow > .btn, .prod .buy .btn { min-height: 44px; }
}

.pcard .addrow.blocked { flex-direction: column; align-items: flex-start; gap: 6px; }
.pcard .addrow.blocked .note { font-size: 12.5px; color: var(--text-66); }
.pcard .addrow.blocked .btn-ghost { padding: 6px 2px; font-size: 13px; }

.stock-select { max-width: 150px; }
.toolbar .cat-select { display: none; }
.svg-defs { position: absolute; width: 0; height: 0; }
@media (max-width: 640px) {
  .toolbar { gap: 8px; padding-bottom: 12px; margin-bottom: 16px; }
  .toolbar #f-search { flex: 1 1 55%; max-width: none; }
  .toolbar .stock-select { flex: 1 1 35%; max-width: none; }
  .toolbar .cats { display: none; }
  .toolbar .cat-select { display: block; flex: 1 1 55%; max-width: none; }
  .toolbar .count { order: 9; }
  .cat-head { margin-bottom: 4px; }
  .cat-note { margin-bottom: 14px; }
}

.cartbar { position: sticky; bottom: 0; z-index: 25; margin-top: 26px; background: var(--tint-bar);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-divider); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cartbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.cartbar-sum { font-size: 14px; color: var(--text-80); }
.cartbar-sum b { color: var(--color-text); font-weight: 500; }
.cartbar-sum .sep { color: var(--text-60); }
.cartbar-actions { display: flex; gap: 8px; align-items: center; }
.cartbar-actions form { margin: 0; }
@media (max-width: 640px) {
  .cartbar-actions { width: 100%; }
  .cartbar-actions > .btn, .cartbar-actions form { flex: 1 1 0; }
  .cartbar-actions .btn { width: 100%; min-height: 44px; }
}

.agreement-band { background: var(--color-section); color: var(--color-text); border-radius: var(--radius-xs); }
.agreement-band b { color: var(--color-accent-300); }
.agreement-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; margin: 10px 0 0;
  font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--color-text); }
.agreement-check input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--color-accent); }
.agreement-small { font-size: 12.5px; color: var(--text-66); margin: 8px 0 0; }
.agreement-card .agreement-band { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 10px; }
.agreement-card .agreement-band span { font-size: 13px; color: var(--text-80); }
.nocturne .agreement.checkout-section { border-left: 4px solid var(--color-accent); }
.nocturne .agreement-doc .head { border-bottom-color: var(--color-divider); }
.nocturne .confirm-panel { border-color: var(--color-accent-700); background: var(--tint-accent); }
.nocturne .confirm-panel h2 { color: var(--color-accent-200); }
.nocturne .steps .step-link:hover { color: var(--color-accent); }
.nocturne .checkout-bar { background: var(--color-bg); }
@media (min-width: 641px) { .nocturne .checkout-bar { background: transparent; } }

/* Less motion, when asked for: the stock dot stops pulsing, the hero glow
   stops drifting, cards stop lifting, the stock bar is drawn full at once,
   and nothing waits to scroll into view. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stock .dot { animation: none; }
  .hero .glow, .close-band .glow { animation: none; }
  .lift, .pcard, .rcard, .step { transition: none; }
  .lift:hover, .pcard:hover, .rcard:hover { transform: none; }
  .prod .bar i { transition: none; }
  .rv, .rv.rv-in { opacity: 1; transform: none; transition: none; }
}
/* == end checkout components ================================================ */

/* --------------------------------------------------------------------------
   Editing in place. An admin's Edit turns every word on the page into a field
   where it sits; the bar in the corner says what is happening.
   ------------------------------------------------------------------------ */
.sfedit { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md);
  font-size: 13px; color: var(--color-text); max-width: min(92vw, 520px); }
.sfedit-status { color: var(--text-66); }
.sfedit-status.bad { color: #f3d6d6; }
.sfedit a { color: var(--text-66); white-space: nowrap; }
body.sf-editing [data-sf] { outline: 1px dashed color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 3px; cursor: text; min-width: 1ch; border-radius: 2px; }
body.sf-editing [data-sf]:hover { outline-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
body.sf-editing [data-sf]:focus { outline: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
body.sf-editing [data-sf-image] { cursor: pointer; outline: 2px dashed color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 4px; }
body.sf-editing a, body.sf-editing button { cursor: text; }
body.sf-editing .teaser-grid { filter: none; opacity: 1; }