@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Archivo:wght@600;700&display=swap');

@font-face {
  font-family: 'Neuzeit Grotesk Bold';
  src: url('../assets/fonts/neuzeit-grotesk-bold.woff2') format('woff2'),
       url('../assets/fonts/neuzeit-grotesk-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #17191c;
  --ink-soft: #4a4d52;
  --line: #e2e0da;
  --paper: #faf9f6;
  --paper-raised: #ffffff;
  --stone: #f1efe9;
  --blue: #1a3fe4;
  --blue-deep: #122ea3;
  --blue-tint: #eef1fd;
  --accent2: #0369a1;
  --accent2-tint: #e5f2fb;
  --max: 1180px;
  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;
  /* Embedded via @font-face above — renders for every visitor. Archivo is the fallback
     if the font file is ever missing. */
  --logo-font: 'Neuzeit Grotesk Bold', 'Archivo', var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Compliance banner ---------- */
.compliance-bar {
  background: var(--ink);
  color: #e8e7e3;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 9px 16px;
  text-transform: uppercase;
}

/* ---------- Sale bar ---------- */
.sale-bar {
  background: var(--accent2-tint);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--ink);
}
.sale-bar strong { color: var(--accent2); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px; }

.was-price { font-size: 13px; color: var(--ink-soft); text-decoration: line-through; margin-right: 6px; }
.sale-price { font-family: var(--display); font-weight: 500; }
.price-stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.4; }
.price-stack.left-align { align-items: flex-start; }
.discount-tag {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent2); background: var(--accent2-tint); padding: 2px 6px; border-radius: 2px; margin-left: 8px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  font-family: var(--logo-font);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--blue); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
  position: relative;
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 2px;
  background: var(--blue);
}

.nav-actions { display: flex; align-items: center; gap: 6px; }

/* Icon buttons (cart + account) — clean, borderless, subtle hover */
.cart-link, .account-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-link:hover, .account-link:hover { background: var(--blue-tint); color: var(--blue); }
.nav-icon { width: 22px; height: 22px; display: block; }
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes cartCountPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }
  .cart-count.pulse { animation: cartCountPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
}

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 13px 28px;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 14px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 52px; line-height: 1.08; }
h2 { font-size: 34px; line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.3; }
p { color: var(--ink-soft); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--line);
}
.hero .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy p.lede { margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-stat .num { font-family: var(--display); font-size: 30px; color: var(--ink); }
.hero-stat .label { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

.hero-panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
}

/* Branded hero visual — banner image with the vials floating on top. The banner
   is scaled up and its edges are feathered away with a soft radial mask so it
   blends into the page instead of sitting in a hard rectangle. */
.hero-visual { position: relative; width: 100%; line-height: 0; }
.hero-visual-bg {
  width: 100%; height: auto; display: block;
  -webkit-mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
/* 3 vials, side by side over the banner's product area. Middle sits a bit
   higher; left/right tilt outward; all bob straight up/down (vertical, not along
   their tilt) at the same speed but offset phases so they aren't in sync. */
.hero-vials {
  position: absolute;
  left: 0; right: 0; bottom: 8%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
.hero-vial { width: 53%; flex: 0 0 auto; will-change: transform; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.24)); }
/* Heavy overlap on the (transparent) image margins so the vials sit close + big */
.hero-vial.vial-left  { margin-right: -15%; }
.hero-vial.vial-right { margin-left: -15%; }
.hero-vial.vial-mid   { margin: 0 -15%; z-index: 2; }

.hero-vial.vial-left  { animation: floatLeft  3.6s ease-in-out 0s     infinite; }
.hero-vial.vial-mid   { animation: floatMid   3.6s ease-in-out -1.2s  infinite; }
.hero-vial.vial-right { animation: floatRight 3.6s ease-in-out -2.4s  infinite; }

@keyframes floatLeft  { 0%, 100% { transform: translateY(0)     rotate(-6deg); } 50% { transform: translateY(-16px) rotate(-6deg); } }
@keyframes floatRight { 0%, 100% { transform: translateY(0)     rotate(6deg);  } 50% { transform: translateY(-16px) rotate(6deg);  } }
@keyframes floatMid   { 0%, 100% { transform: translateY(-18px);              } 50% { transform: translateY(-34px);              } }

@media (prefers-reduced-motion: reduce) {
  .hero-vial { animation: none !important; }
  .hero-vial.vial-left { transform: rotate(-6deg); }
  .hero-vial.vial-right { transform: rotate(6deg); }
  .hero-vial.vial-mid { transform: translateY(-18px); }
}

/* Facility Snapshot, now its own section below the hero */
.facility-section { padding: 0 0 20px; }
.facility-section .hero-panel { max-width: 720px; margin: 0 auto; }
.hero-panel .panel-title {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.spec-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.spec-row:last-child { border-bottom: none; }
.spec-row .k { color: var(--ink-soft); }
.spec-row .v { font-weight: 500; text-align: right; }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
section.tight { padding: 56px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 32px; }
.section-head h2 { max-width: 46ch; position: relative; padding-bottom: 14px; }
.section-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px;
  background: var(--blue); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.section-head.in-view h2::after { width: 48px; }
.bg-ink .section-head h2::after { background: var(--blue); }
.section-head p { max-width: 42ch; margin: 0; }

.bg-stone { background: var(--stone); }
.bg-ink { background: var(--ink); color: #e8e7e3; position: relative; overflow: hidden; }
.bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink p { color: #b7b8ba; }
.cta-glow {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 63, 228, 0.35) 0%, rgba(26, 63, 228, 0) 70%);
  filter: blur(10px);
  top: 50%; left: 50%;
  animation: ctaDrift 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaDrift {
  0%, 100% { transform: translate(-70%, -60%) scale(1); }
  50% { transform: translate(-30%, -40%) scale(1.15); }
}

/* ---------- Value grid ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value-card {
  background: var(--paper-raised); padding: 36px 32px; position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(23, 25, 28, 0.07); z-index: 1; }
.value-card .idx {
  font-family: var(--mono); color: var(--blue); font-size: 13px; margin-bottom: 18px; display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.value-card.in-view .idx { transform: scale(1); }
.value-card:not(.in-view) .idx { transform: scale(0.4); }
.value-card h3 { margin-bottom: 12px; position: relative; padding-bottom: 12px; }
.value-card h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--blue); transition: width 0.5s ease 0.2s;
}
.value-card.in-view h3::after { width: 26px; }
.value-card p { font-size: 14.5px; margin: 0; }

/* ---------- Kit cards ---------- */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kit-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(23, 25, 28, 0.08);
  border-color: var(--ink-soft);
}
.kit-card .kit-tag {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent2); background: var(--accent2-tint); display: inline-block; padding: 4px 9px; border-radius: 2px; margin-bottom: 16px; align-self: flex-start;
}
.kit-card h3 { margin-bottom: 10px; }
.kit-card .kit-desc { font-size: 14px; margin-bottom: 18px; flex-grow: 1; }
.kit-contents { list-style: none; margin: 0 0 22px; padding: 0; font-size: 13.5px; }
.kit-contents li { padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.kit-contents li:first-child { border-top: none; }
.kit-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.kit-price { font-family: var(--display); font-size: 28px; }
.kit-save { font-family: var(--mono); font-size: 11px; color: var(--blue); margin-bottom: 4px; }

/* ---------- Catalog product grid ---------- */
.catalog-category { margin-bottom: 56px; }
.section-lede { max-width: 42ch; margin: 0 0 32px; font-size: 16px; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ---------- Pinned horizontal filmstrip ----------
   The row pins in place while it pans left, like scrolling sideways through
   one strip of cards, before normal vertical scroll continues. The heading
   is independently sticky too (docked just below the site header), so it
   locks into view at the same time the filmstrip below it does — both stay
   on screen together the whole time the cards are panning. The filmstrip's
   own sticky offset is computed in JS from the heading's real height, so it
   always docks directly beneath it with no overlap. */
.pin-section-heading {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

/* Products sit in a horizontal filmstrip you swipe/scroll sideways through.
   Vertical page scrolling is completely normal — no scroll-jacking anywhere. */
.pin-reveal-track { position: relative; }
.pin-reveal-sticky { position: static; height: auto; display: block; }
.filmstrip-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
  width: 100%;
  padding: 8px 2px 22px;
}
.filmstrip-row {
  display: flex;
  gap: 22px;
  width: max-content;
  transform: none !important;
}
.filmstrip-row > * { scroll-snap-align: start; }
.filmstrip-row .product-tile { flex: 0 0 270px; width: 270px; }
.filmstrip-row .kit-card { flex: 0 0 340px; width: 340px; }

@media (prefers-reduced-motion: reduce) {
  .filmstrip-row { flex-wrap: wrap; width: auto; }
}
@media (max-width: 900px) {
  .filmstrip-row .product-tile { flex-basis: 220px; width: 220px; }
  .filmstrip-row .kit-card { flex-basis: 280px; width: 280px; }
}

/* Catalog product search */
.catalog-search-input { width: 100%; max-width: 540px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--sans); font-size: 15px; background: var(--paper-raised); }
.catalog-search-input:focus { outline: none; border-color: var(--blue); }
.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }

/* Checkout sign-in gate */
.checkout-gate { text-align: center; padding: 20px 10px; }
.checkout-gate h2 { margin-bottom: 12px; }
.checkout-gate p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }
.checkout-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.product-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-tile:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(23, 25, 28, 0.06);
}

.product-tile-visual {
  position: relative;
  background: var(--stone);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.product-tile-visual .monogram {
  font-family: var(--display);
  font-size: 34px;
  color: var(--ink);
  opacity: 0.8;
}
.product-tile-visual .discount-tag { position: absolute; top: 12px; left: 12px; margin-left: 0; }

.product-tile-body { padding: 18px 20px 22px; }
.product-tile-body .cat-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.product-tile-body h4 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 6px 0 8px; line-height: 1.25; }
.product-tile-body .tile-blurb { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; min-height: 39px; }
.product-tile-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.product-tile-price .was-price { font-size: 12.5px; margin-right: 0; }
.product-tile-price .sale-price { font-family: var(--display); font-size: 17px; }
.tile-unit { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 12px; }
.view-options {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--blue); display: inline-flex; align-items: center; gap: 5px;
}
.product-tile:hover .view-options { text-decoration: underline; }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.filter-chip {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 20px; background: transparent; cursor: pointer; color: var(--ink-soft);
}
.filter-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- FAQ / Accordion ---------- */
.faq-item { border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--display); font-size: 19px; padding: 26px 4px; display: flex; justify-content: space-between; align-items: center; color: var(--ink);
  transition: color 0.15s ease;
}
.faq-q:hover { color: var(--blue); }
.faq-q .plus { font-family: var(--mono); font-size: 20px; color: var(--blue); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p { padding-bottom: 24px; margin: 0; max-width: 68ch; }

/* ---------- Notice / disclaimer blocks ---------- */
.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: var(--blue-tint);
  padding: 20px 24px;
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice.in-view { animation: noticeGlow 3.2s ease-in-out 0.6s 2; }
@keyframes noticeGlow {
  0%, 100% { border-left-color: var(--blue); box-shadow: none; }
  50% { border-left-color: var(--blue-deep); box-shadow: -4px 0 16px -4px rgba(26, 63, 228, 0.45); }
}

/* ---------- Cart page ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: flex-start; }
.cart-line {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.cart-line .name { font-weight: 500; }
.cart-line .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.qty-control { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px; }
.qty-control button { background: none; border: none; width: 28px; height: 28px; cursor: pointer; font-size: 15px; }
.qty-control span { width: 26px; text-align: center; font-family: var(--mono); font-size: 13px; }
.remove-link { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ink-soft); background: none; border: none; cursor: pointer; text-decoration: underline; }
.cart-summary { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px; padding: 28px; position: sticky; top: 110px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14.5px; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; font-family: var(--display); font-size: 20px; }
.empty-cart { text-align: center; padding: 80px 0; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: flex-start; }
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 8px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--sans); font-size: 14.5px; background: var(--paper-raised); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
fieldset { border: 1px solid var(--line); border-radius: 4px; padding: 24px; margin: 0 0 28px; transition: border-color 0.2s ease; }
fieldset:focus-within { border-color: var(--blue); }
legend { font-family: var(--display); font-size: 18px; padding: 0 8px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-col h4 { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink-soft); text-decoration: none; padding: 5px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-logo { font-family: var(--logo-font); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.footer-fine { font-size: 13px; color: var(--ink-soft); max-width: 52ch; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; gap: 12px; }
.footer-bottom .legal-caps { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- About / misc content ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.stat-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 20px; }
.stat-block div { background: var(--paper-raised); padding: 26px; }
.stat-block .num { font-family: var(--display); font-size: 32px; display: block; }
.stat-block .label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--ink-soft); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-card {
  border: 1px solid var(--line); border-radius: 4px; padding: 28px; margin-bottom: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(23, 25, 28, 0.06); border-color: var(--ink-soft); }
.contact-card h3 { margin-bottom: 8px; }
.contact-card p { margin: 0; font-size: 14.5px; }

.page-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: 42px; }
.page-hero p.lede { margin-top: 18px; }

/* ---------- Page-wide scroll spine ---------- */
.scroll-spine {
  position: fixed;
  /* Floats in the margin outside the centered content column — grows further
     left on wide screens, and never sits close enough to collide with text. */
  left: clamp(5px, calc((100vw - 1180px) / 2 - 95px), 100px);
  /* top is set dynamically in JS to always clear the header stack, which is
     taller at the very top of the page (compliance + sale bars still in flow)
     than once scrolled past them (header alone, sticky). This is a fallback. */
  top: 164px;
  bottom: 100px;
  width: 20px;
  z-index: 40;
}
.spine-track {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}
.spine-fill {
  position: absolute;
  left: 50%; top: 0;
  width: 2px;
  height: 0%;
  background: var(--blue);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(26, 63, 228, 0.5);
  transition: height 0.1s linear;
}
.spine-node {
  position: absolute;
  left: 50%; top: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 2px solid var(--line);
  transform: translate(-50%, -50%);
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.spine-node:hover { border-color: var(--blue); transform: translate(-50%, -50%) scale(1.2); }
.spine-node.active {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 5px var(--blue-tint);
}
.spine-label {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--ink-soft); white-space: nowrap;
  opacity: 0.65; pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.spine-node:hover .spine-label, .spine-node.active .spine-label { opacity: 1; }
.spine-node.active .spine-label { color: var(--blue); font-weight: 600; }

/* Below this, there isn't reliably enough margin for label text to clear the
   content column without overlapping it — so the rail drops back to
   dots-only. The dots themselves (track + fill + nodes) stay visible and
   clickable at every width — there's no hide breakpoint at all. */
@media (max-width: 1260px) {
  .spine-label { display: none; }
}

/* ---------- Toast ---------- */
#cart-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  padding: 13px 22px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 200;
}
#cart-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile nav ---------- */
.nav-toggle {
  background: none; border: 1px solid var(--line); border-radius: 3px;
  width: 40px; height: 40px; cursor: pointer; font-size: 16px;
}
.main-nav.mobile-open {
  display: flex; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); flex-direction: column; align-items: flex-start;
  padding: 20px 32px; border-bottom: 1px solid var(--line); gap: 18px;
  box-shadow: 0 12px 24px rgba(20, 25, 45, 0.08);
}

/* ---------- Product detail page ---------- */
.product-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: flex-start; }
.product-visual {
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.product-visual .monogram {
  font-family: var(--display);
  font-size: 96px;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1;
}
.product-visual .code-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 18px;
  display: block;
  text-align: center;
}
.breadcrumb { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }

.variant-group { margin: 28px 0 20px; }
.variant-group-label { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 12px; display: block; }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-option {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13.5px;
  background: var(--paper-raised);
  transition: all 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.variant-option:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.variant-option.selected { border-color: var(--blue); background: var(--blue-tint); transform: scale(1.03); }
.variant-option .v-dosage { display: block; font-weight: 500; }
.variant-option .v-price { display: block; font-family: var(--display); font-size: 15px; margin-top: 2px; }

.buy-row { display: flex; align-items: center; gap: 16px; margin: 28px 0 8px; }
.buy-row .qty-control { height: 46px; }
.buy-row .qty-control button { width: 40px; height: 44px; font-size: 17px; }
.buy-row .qty-control span { width: 36px; font-size: 15px; }
.buy-row .btn-primary { flex-grow: 1; padding: 14px 28px; }
.buy-total { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin-bottom: 28px; }

.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related-card { border: 1px solid var(--line); border-radius: 4px; padding: 20px; text-decoration: none; color: var(--ink); display: block; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.related-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(23, 25, 28, 0.06); }
.related-card .r-name { font-weight: 500; font-size: 14.5px; margin-bottom: 6px; }
.related-card .r-price { font-family: var(--display); font-size: 17px; color: var(--blue); }
.related-card .r-unit { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- First-visit disclaimer gate ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 14, 30, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.age-gate.age-gate-in { opacity: 1; }
.age-gate.age-gate-hide { opacity: 0; }
.age-gate-card {
  width: 100%; max-width: 460px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px 30px;
  box-shadow: 0 30px 80px rgba(10, 14, 30, 0.45);
  text-align: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.age-gate.age-gate-in .age-gate-card { transform: translateY(0) scale(1); }
.age-gate-logo {
  font-family: var(--logo-font); font-weight: 700;
  font-size: 24px; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 22px;
}
.age-gate-logo span { color: var(--blue); }
.age-gate-card h2 { font-size: 26px; margin-bottom: 12px; }
.age-gate-lede { font-size: 15px; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.55; }
.age-gate-check {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--blue-tint); cursor: pointer; margin-bottom: 22px;
  transition: border-color 0.2s ease;
}
.age-gate-check:hover { border-color: var(--blue); }
.age-gate-check input {
  width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--blue); flex-shrink: 0; cursor: pointer;
}
.age-gate-check span { font-size: 14px; line-height: 1.5; color: var(--ink); }
#age-gate-enter[disabled] { opacity: 0.45; cursor: not-allowed; }
.age-gate-fine {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-soft); margin-top: 16px; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .age-gate, .age-gate-card { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .value-grid, .kit-grid { grid-template-columns: 1fr; }
  .split, .contact-grid, .cart-layout, .checkout-layout, .product-layout { grid-template-columns: 1fr; }
  .related-grid, .product-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 38px; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Pinned scrollytelling: process visual ---------- */
.scrollytell {
  position: relative;
  height: 480vh;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.scrollytell-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.scrollytell-inner .wrap {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: var(--max);
}

.process-steps { position: relative; display: flex; flex-direction: column; gap: 44px; padding-left: 28px; }
.process-line { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.process-line-fill {
  position: absolute; left: 0; top: 0; width: 2px; height: 0%;
  background: var(--blue); box-shadow: 0 0 8px rgba(26, 63, 228, 0.5);
}
.process-step { position: relative; opacity: 0.32; transition: opacity 0.4s ease; }
.process-step.active { opacity: 1; }
.step-dot {
  position: absolute; left: -28px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-raised); border: 2px solid var(--line);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.process-step.active .step-dot {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 6px var(--blue-tint);
  transform: scale(1.1);
}
.step-body {
  padding: 10px 16px;
  margin-left: -16px;
  border-radius: 8px;
  transition: background 0.4s ease, transform 0.4s ease;
  transform-origin: left center;
}
.process-step.active .step-body { background: var(--blue-tint); transform: scale(1.025); }
.process-step .step-num {
  font-family: var(--mono); font-size: 13px; color: var(--blue);
  display: block; margin-bottom: 12px; letter-spacing: 0.06em;
}
.process-step h3 { margin-bottom: 10px; font-size: 28px; }
.process-step p { font-size: 15.5px; margin: 0; max-width: 36ch; }

.chain-stage { position: relative; }
.scroll-glow {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 63, 228, 0.18) 0%, rgba(26, 63, 228, 0) 70%);
  filter: blur(8px);
  top: 50%; left: 30%;
  transform: translate(-50%, -50%);
  transition: left 0.2s linear, background 0.3s linear;
  pointer-events: none;
}

.chain-svg { width: 100%; height: auto; overflow: visible; position: relative; }
#chain-scene { transition: transform 0.15s linear; }
.chain-path {
  fill: none; stroke: var(--blue); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(26, 63, 228, 0.5));
  transition: stroke-dashoffset 0.12s linear;
}
.vial-liquid { fill: rgba(26, 63, 228, 0.13); transition: opacity 0.15s linear; }
.vial-detail { fill: none; stroke: var(--blue); stroke-width: 1.8; opacity: 0; transition: opacity 0.12s linear; }
.vial-label { fill: rgba(250, 249, 246, 0.72); stroke-width: 1.5; }
.chain-node circle:not(.node-halo) {
  fill: var(--paper-raised); stroke: var(--blue); stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(26, 63, 228, 0.4));
}
.node-halo {
  fill: none; stroke: var(--blue); stroke-width: 2;
  transform-origin: center; transform-box: fill-box;
}
.chain-node {
  opacity: 0; transform-origin: center; transform-box: fill-box;
  transition: opacity 0.12s linear, transform 0.12s linear;
}
.draw-tip { fill: var(--blue); transition: opacity 0.12s linear; }
.trail-dot { fill: var(--blue); transition: opacity 0.1s linear; }
.savings-counter {
  font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: 0.03em;
  fill: var(--blue); opacity: 0; transition: opacity 0.12s linear;
}
.kit-bracket {
  fill: none; stroke: var(--accent2); stroke-width: 2.5; stroke-linejoin: round;
  transition: opacity 0.12s linear;
}
.kit-bracket-label {
  font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  fill: var(--accent2); opacity: 0; transition: opacity 0.12s linear;
}
.ship-arrow { stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 8 6; fill: none; opacity: 0; transition: opacity 0.12s linear; }
.ship-pin circle { fill: var(--blue); }
.ship-pin .globe-icon { fill: none; stroke: #fff; stroke-width: 1.3; opacity: 0.85; }
.ship-pin .globe-outline { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.ship-pin { opacity: 0; transition: opacity 0.12s linear, transform 0.12s linear; }

/* Narrow / mobile: unpin the scroll-jacked story so the graphic doesn't
   get crushed into a sliver. Stack it — completed graphic on top, steps below. */
@media (max-width: 900px) {
  .scrollytell { height: auto; }
  .scrollytell-inner {
    position: static;
    height: auto;
    padding: 64px 0;
    overflow: visible;
  }
  .scrollytell-inner .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .chain-stage { order: -1; }
  .scrollytell-inner .chain-svg {
    max-width: min(88vw, 460px);
    margin: 0 auto;
    display: block;
  }
  .scroll-glow { display: none; }
  .process-steps { padding-left: 24px; gap: 30px; }
  .process-step { opacity: 1; }
  .process-step .step-dot { background: var(--blue); border-color: var(--blue); }
  .process-step h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollytell { height: auto; }
  .scrollytell-inner { position: static; height: auto; padding: 80px 0; }
  .notice.in-view { animation: none; }
  .cta-glow { display: none; }
}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  .reveal-1 { transition-delay: 0.08s; }
  .reveal-2 { transition-delay: 0.16s; }
  .reveal-3 { transition-delay: 0.24s; }
  .reveal-4 { transition-delay: 0.32s; }
  .reveal-5 { transition-delay: 0.4s; }
  .reveal-6 { transition-delay: 0.48s; }
}

/* ---------- Pop-in (for dynamically-rendered lists: cart lines, related
   products, order summary rows — plays automatically on insertion, no
   IntersectionObserver needed since these render straight into view) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes popIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .pop-in { animation: popIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

/* ---------- Header account slot ---------- */
/* .account-link is styled with .cart-link as a shared icon button near the top. */
.account-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
}

/* ---------- Auth page ---------- */
.auth-section {
  min-height: calc(100vh - 180px);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px 72px;
  background:
    radial-gradient(circle at 15% 20%, var(--blue-tint) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--accent2-tint) 0%, transparent 45%),
    var(--paper);
}
.auth-card {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  width: 100%; max-width: 940px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(23, 25, 28, 0.28);
}

/* Brand side */
.auth-brand {
  position: relative; overflow: hidden;
  background: var(--ink); color: #e8e7e3;
  padding: 48px 44px;
  display: flex; align-items: center;
}
.auth-brand-glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 63, 228, 0.45) 0%, rgba(26, 63, 228, 0) 68%);
  filter: blur(10px); top: -120px; left: -120px;
  animation: authGlowDrift 13s ease-in-out infinite;
}
.auth-brand-inner { position: relative; z-index: 1; }
.auth-brand-title { color: #fff; font-size: 32px; line-height: 1.12; margin: 6px 0 16px; }
.auth-brand-copy { color: #b7b8ba; font-size: 15px; max-width: 34ch; margin: 0 0 28px; }
.auth-perks { list-style: none; padding: 0; margin: 0; }
.auth-perks li {
  display: flex; align-items: center; gap: 11px;
  color: #d5d6d8; font-size: 14px; padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.auth-perks li:first-child { border-top: none; }
.perk-dot { width: 6px; height: 6px; border-radius: 50%; background: #8fa8ff; flex-shrink: 0; box-shadow: 0 0 8px rgba(143,168,255,0.7); }

/* Form side */
.auth-form-side { padding: 40px 44px; display: flex; flex-direction: column; }
.auth-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--stone); border-radius: 6px; padding: 4px; margin-bottom: 30px;
}
.auth-toggle-btn {
  position: relative; z-index: 1; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 10px; border-radius: 4px;
  color: var(--ink-soft); transition: color 0.25s ease;
}
.auth-toggle-btn.active { color: var(--ink); }
.auth-toggle-slider {
  position: absolute; z-index: 0; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--paper-raised); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(23,25,28,0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-forms { position: relative; }
.auth-form { display: none; }
.auth-form.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .auth-form.active { animation: authFormIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .auth-form.active .auth-field,
  .auth-form.active .auth-row,
  .auth-form.active .auth-consent,
  .auth-form.active .auth-submit,
  .auth-form.active .auth-alt-line {
    animation: authFieldIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .auth-form.active > *:nth-child(1) { animation-delay: 0.04s; }
  .auth-form.active > *:nth-child(2) { animation-delay: 0.09s; }
  .auth-form.active > *:nth-child(3) { animation-delay: 0.14s; }
  .auth-form.active > *:nth-child(4) { animation-delay: 0.19s; }
  .auth-form.active > *:nth-child(5) { animation-delay: 0.24s; }
  .auth-form.active > *:nth-child(6) { animation-delay: 0.29s; }
  .auth-form.active > *:nth-child(7) { animation-delay: 0.34s; }
}

.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 8px; }
.auth-field label .optional { text-transform: none; letter-spacing: 0; color: var(--ink-soft); opacity: 0.7; }
.auth-field.invalid input { border-color: #d94b4b; box-shadow: 0 0 0 3px rgba(217,75,75,0.12); }
.field-error { display: block; font-size: 12px; color: #d94b4b; margin-top: 6px; min-height: 0; }
.auth-field.shake, .auth-consent.shake { animation: authShake 0.4s ease; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 60px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--blue); padding: 6px;
}
.pw-meter { height: 4px; background: var(--stone); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.pw-meter-fill { display: block; height: 100%; width: 0%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }

.auth-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 13.5px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); cursor: pointer; text-transform: none; font-family: var(--sans); letter-spacing: 0; font-size: 13.5px; }
.checkbox-row input { width: auto; }
.auth-mini-link { color: var(--blue); text-decoration: none; }
.auth-mini-link:hover { text-decoration: underline; }
.auth-consent { align-items: flex-start; gap: 10px; margin-bottom: 22px; font-size: 13px; line-height: 1.45; }
.auth-consent input { margin-top: 3px; flex-shrink: 0; }
.auth-consent a { color: var(--blue); }

.auth-submit { margin-top: 4px; }
.auth-alt-line { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 18px 0 0; }
.auth-link-btn { background: none; border: none; cursor: pointer; color: var(--blue); font-family: var(--sans); font-size: 13.5px; font-weight: 500; padding: 0; }
.auth-link-btn:hover { text-decoration: underline; }
.auth-note { margin-top: auto; padding-top: 22px; font-size: 11.5px; color: var(--ink-soft); text-align: center; font-family: var(--mono); }

/* Brand text swap animation */
@media (prefers-reduced-motion: no-preference) {
  .swap { animation: authSwap 0.4s ease both; }
}

/* Success overlay */
.auth-success {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(250, 249, 246, 0.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.auth-success.show { opacity: 1; pointer-events: auto; }
.auth-success-inner { text-align: center; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.auth-success.show .auth-success-inner { transform: scale(1); }
.auth-success-check svg { width: 72px; height: 72px; margin-bottom: 18px; }
.check-circle { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; }
.check-mark { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }
.auth-success.show .check-circle { animation: checkCircle 0.5s ease forwards; }
.auth-success.show .check-mark { animation: checkMark 0.35s cubic-bezier(0.16,1,0.3,1) 0.4s forwards; }
.auth-success h3 { font-size: 26px; margin-bottom: 6px; }
.auth-success p { margin: 0; font-size: 14.5px; }

@keyframes authGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes authFormIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes authFieldIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes authSwap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes checkCircle { to { stroke-dashoffset: 0; } }
@keyframes checkMark { to { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .auth-card { grid-template-columns: 1fr; max-width: 460px; }
  .auth-brand { display: none; }
  .auth-form-side { padding: 32px 28px; }
}

/* ---------- Account page ---------- */
.account-hero-name { font-size: 40px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.account-tile {
  border: 1px solid var(--line); border-radius: 6px; padding: 26px;
  background: var(--paper-raised);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.account-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(23,25,28,0.07); border-color: var(--ink-soft); }
.account-tile .idx { font-family: var(--mono); color: var(--blue); font-size: 13px; display: block; margin-bottom: 14px; }
.account-tile h3 { margin-bottom: 8px; }
.account-tile p { font-size: 14px; margin: 0 0 16px; }
.account-detail-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.account-detail-row:last-child { border-bottom: none; }
.account-detail-row .k { color: var(--ink-soft); }
@media (max-width: 780px) { .account-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Affiliate program + owner admin
   ============================================================ */

/* Header portal links (Admin / Affiliate quick access) */
.portal-link {
  border: 1px solid var(--blue); color: var(--blue); border-radius: 4px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; margin-right: 4px;
}
.portal-link:hover { background: var(--blue); color: #fff; }

/* Generic shake reuse for inline field validation */
.shake { animation: authShake 0.4s ease; }

/* Steps on the public affiliates page */
.affiliate-steps { grid-template-columns: repeat(5, 1fr); }
.label-optional { text-transform: none; font-family: var(--sans); font-weight: 400; color: var(--ink-soft); font-size: 12px; letter-spacing: 0; }

/* Example referral value card */
.earnings-example {
  max-width: 720px; margin: 0 auto;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px;
  padding: 40px 48px; box-shadow: 0 12px 44px rgba(20, 25, 45, 0.05);
}
.earnings-example h3 { text-align: center; font-size: 26px; margin-bottom: 28px; }
.earn-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 18px; color: var(--ink-soft);
}
.earn-row span:last-child { font-family: var(--display); font-weight: 700; color: var(--ink); }
.earn-total { border-bottom: none; padding-bottom: 2px; }
.earn-total span:first-child { color: var(--ink); font-weight: 600; }
.earn-total span:last-child { color: var(--blue); font-size: 30px; }
.earn-fine { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 18px; }
@media (max-width: 560px) {
  .earnings-example { padding: 30px 24px; }
  .earn-row { font-size: 16px; }
  .earn-total span:last-child { font-size: 26px; }
}

/* Application form */
.affiliate-form { max-width: 720px; }
.affiliate-form textarea { resize: vertical; }
.form-fine { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; text-align: center; }

/* Application status panels (public affiliates page) */
.apply-status {
  max-width: 620px; border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 10px; padding: 28px 30px; background: var(--paper-raised);
}
.apply-status h3 { font-size: 22px; margin-bottom: 10px; }
.apply-status p { margin-bottom: 18px; }
.apply-status .btn { margin-top: 4px; }
.apply-status-pending { border-left-color: #e0a63c; }
.apply-status-approved { border-left-color: var(--blue); }
.apply-status-declined { border-left-color: #d94b4b; }

/* ---- Admin dashboard ---- */
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 30px; flex-wrap: wrap; }
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 12px 18px; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s ease, border-color 0.15s ease;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-badge {
  background: var(--blue); color: #fff; font-family: var(--mono); font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.metric-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px;
  background: var(--paper-raised); display: flex; flex-direction: column; gap: 6px;
}
.metric-card-accent { background: var(--blue-tint); border-color: rgba(26, 63, 228, 0.25); }
.metric-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.metric-value { font-family: var(--display); font-size: 32px; line-height: 1.1; color: var(--ink); }
.metric-card-accent .metric-value { color: var(--blue); }
.metric-sub { font-size: 13px; color: var(--ink-soft); }

.admin-note {
  margin-top: 24px; font-size: 14px; color: var(--ink-soft); line-height: 1.6;
  background: var(--blue-tint); border: 1px solid rgba(26, 63, 228, 0.18);
  border-radius: 10px; padding: 16px 20px;
}
.admin-note-block { background: var(--paper-raised); }
.admin-checklist { margin: 8px 0 0; padding-left: 20px; }
.admin-checklist li { margin-bottom: 6px; }

/* Applications review cards */
.application-card {
  display: flex; gap: 24px; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px;
  background: var(--paper-raised); margin-bottom: 16px;
}
.application-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.application-head h3 { font-size: 20px; margin: 0; }
.application-date { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.application-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.application-meta strong { color: var(--ink); font-weight: 600; }
.application-note { font-size: 14px; margin: 10px 0 0; color: var(--ink-soft); }
.application-note strong { color: var(--ink); }
.application-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

/* Affiliate table */
.affiliate-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.affiliate-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.affiliate-table th, .affiliate-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.affiliate-table th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: var(--blue-tint); }
.affiliate-table tr:last-child td { border-bottom: none; }
.cell-name { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--ink-soft); }
.cell-actions { display: flex; gap: 8px; white-space: nowrap; }
.code-pill { font-family: var(--mono); font-size: 12px; background: var(--blue-tint); color: var(--blue); padding: 4px 9px; border-radius: 5px; letter-spacing: 0.04em; }

.status-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; }
.status-approved { background: rgba(26, 63, 228, 0.12); color: var(--blue); }
.status-pending { background: rgba(224, 166, 60, 0.16); color: #b9791a; }
.status-declined { background: rgba(217, 75, 75, 0.14); color: #c0392b; }

.btn-xs { padding: 6px 11px; font-size: 12px; border-radius: 4px; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Affiliate dashboard share boxes */
.share-box { max-width: 640px; margin-bottom: 22px; }
.share-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.copy-row { display: flex; gap: 10px; }
.copy-row input { flex: 1; margin: 0; font-family: var(--mono); font-size: 14px; background: var(--paper-raised); }
.copy-row .btn { flex-shrink: 0; }

@media (max-width: 1080px) {
  .affiliate-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .affiliate-steps { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .application-card { flex-direction: column; gap: 16px; }
  .application-actions { flex-direction: row; width: 100%; }
  .application-actions .btn { flex: 1; }
}
@media (max-width: 560px) {
  .affiliate-steps { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .copy-row { flex-direction: column; }
}

/* ============================================================
   Customer profile: hero, orders, tracking, affiliate section
   ============================================================ */
.account-hero-row { display: flex; align-items: center; gap: 22px; }
.account-hero-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 28px; flex-shrink: 0;
}

/* Owner banner */
#admin-banner:empty { display: none; }
.owner-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--blue); color: #fff; border-radius: 14px; padding: 22px 28px; margin: 28px 0 -14px;
}
.owner-banner strong { display: block; font-size: 18px; }
.owner-banner span { font-size: 14px; opacity: 0.9; }
.owner-banner-tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.2); padding: 3px 8px; border-radius: 20px; margin-bottom: 8px;
}
.owner-banner .btn { flex-shrink: 0; background: #fff; color: var(--blue); border-color: #fff; }
.owner-banner .btn:hover { background: rgba(255, 255, 255, 0.9); }

/* Order cards + tracking timeline */
.order-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; background: var(--paper-raised); margin-bottom: 18px; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.order-id { font-family: var(--display); font-size: 18px; margin-right: 12px; }
.order-date { font-size: 13px; color: var(--ink-soft); }
.order-items { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.order-track { display: flex; justify-content: space-between; position: relative; margin: 4px 0 6px; }
.track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; text-align: center; }
.track-step::before {
  content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.track-step:first-child::before { display: none; }
.track-step.done::before { background: var(--blue); }
.track-dot {
  position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper-raised); border: 2px solid var(--line); transition: all 0.2s ease;
}
.track-step.done .track-dot { background: var(--blue); border-color: var(--blue); }
.track-step.current .track-dot { box-shadow: 0 0 0 5px var(--blue-tint); }
.track-label { font-size: 12px; color: var(--ink-soft); }
.track-step.done .track-label { color: var(--ink); font-weight: 500; }
.order-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.order-tracking code { font-family: var(--mono); font-size: 13px; background: var(--blue-tint); color: var(--blue); padding: 2px 7px; border-radius: 4px; }
.order-total { font-family: var(--display); font-size: 18px; }

/* Affiliate "become one" CTA + inline dashboard */
.affiliate-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 32px; max-width: 840px;
}
.affiliate-cta h3 { font-size: 22px; margin-bottom: 8px; }
.affiliate-cta p { margin: 0; max-width: 54ch; }
.affiliate-cta .btn { flex-shrink: 0; }
.affiliate-inline-stats { margin-bottom: 26px; }

/* Account details card + edit */
.account-details-card { max-width: 560px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px; padding: 8px 26px 22px; }
.account-detail-actions { padding-top: 18px; display: flex; gap: 10px; }

/* Checkout success state */
.checkout-success { text-align: center; padding: 30px 10px; }
.checkout-success-check { width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.checkout-success h2 { margin-bottom: 10px; }
.checkout-success-ref { color: var(--blue); font-weight: 500; }
.checkout-note-fine { font-size: 13px; color: var(--ink-soft); max-width: 46ch; margin: 14px auto 22px; }
.checkout-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
  .affiliate-cta { flex-direction: column; align-items: flex-start; }
  .owner-banner { flex-direction: column; align-items: flex-start; }
  .order-head { flex-wrap: wrap; }
  .track-label { font-size: 10.5px; }
}

/* ============================================================
   Payouts (affiliate) + checkout payment tabs / store credit
   ============================================================ */
/* Payout panel on the affiliate dashboard */
.payout-panel {
  display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px;
}
.payout-balance {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--blue-tint); border: 1px solid rgba(26, 63, 228, 0.2); border-radius: 12px; padding: 22px 24px;
}
.payout-balance-value { font-family: var(--display); font-size: 34px; color: var(--blue); line-height: 1; }
.payout-methods { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 18px; }
.payout-opt {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; font-size: 14.5px; font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payout-opt:hover { border-color: var(--blue); }
.payout-opt.selected { border-color: var(--blue); background: var(--blue-tint); }
.payout-opt input { width: auto; margin: 0; accent-color: var(--blue); }
.payout-note { font-size: 14px; color: var(--ink-soft); margin: 4px 0 16px; line-height: 1.55; }
.payout-saved { color: var(--blue); font-weight: 600; font-size: 14px; margin-left: 12px; }

/* Affiliate payout-request block */
.payout-request {
  margin-top: 20px; padding: 22px 26px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
}
.payout-request.ready { border-color: rgba(26, 63, 228, 0.35); background: var(--blue-tint); }
.payout-request.requested { border-color: rgba(224, 166, 60, 0.4); background: rgba(224, 166, 60, 0.1); }
.pr-title { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 6px; color: var(--ink); }
.payout-request p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }
.payout-request p:last-of-type { margin-bottom: 0; }
.payout-request .btn { margin-top: 4px; }
.payout-request .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Affiliate withdrawal-amount input */
.payout-amount-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; max-width: 380px; }
.payout-amount-prefix { font-family: var(--display); font-size: 22px; color: var(--ink-soft); }
.payout-amount-row input { margin: 0; font-family: var(--mono); font-size: 16px; flex: 1; background: var(--paper-raised); }
.payout-amount-row .btn { flex-shrink: 0; white-space: nowrap; }

/* Admin payout-request cards */
.request-method { font-weight: 600; text-transform: capitalize; color: var(--ink); }
.request-handle { font-family: var(--mono); font-size: 13.5px; background: var(--stone); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }

/* Checkout payment tabs */
.pay-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 8px 0 22px; flex-wrap: wrap; }
.pay-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 12px 18px; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; margin-bottom: -1px; transition: color 0.15s ease, border-color 0.15s ease;
}
.pay-tab:hover { color: var(--ink); }
.pay-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.credit-info .summary-row { font-size: 15px; }
.credit-line { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.credit-line strong { color: var(--ink); }
.summary-discount span:last-child { color: var(--blue); }

@media (max-width: 720px) {
  .payout-panel { grid-template-columns: 1fr; gap: 22px; }
}

/* Affiliate-credit insufficient-balance state at checkout */
.summary-short span { color: #c0392b; }
.credit-short { color: #b23b3b; }
.credit-short strong { color: #b23b3b; }

/* ============================================================
   Admin — order fulfillment
   ============================================================ */
.order-filter { display: flex; gap: 8px; margin-bottom: 22px; }
.order-filter-btn {
  background: none; border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 16px; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease;
}
.order-filter-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.order-filter-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.order-admin-card { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); margin-bottom: 14px; overflow: hidden; }
.order-admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
/* Collapsible admin order rows */
.order-admin-summary { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; cursor: pointer; padding: 16px 22px; text-align: left; font: inherit; color: inherit; }
.order-admin-summary:hover { background: var(--stone); }
.oa-sum-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oa-sum-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.oa-sum-total { font-family: var(--display); font-weight: 600; }
.order-admin-card .order-chevron { transition: transform 0.3s ease; color: var(--ink-soft); font-size: 18px; }
.order-admin-card.open .order-chevron { transform: rotate(180deg); }
.order-admin-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.order-admin-card.open .order-admin-body { max-height: 1600px; }
.order-admin-body-inner { padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.filter-count { font-family: var(--mono); font-size: 11px; opacity: 0.75; margin-left: 3px; }
/* Admin profit / cost breakdown */
.finance-card { margin-top: 22px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; max-width: 560px; }
.finance-head { font-family: var(--display); font-size: 15px; margin-bottom: 12px; }
.finance-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.finance-row span:last-child { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.finance-row.finance-profit { border-bottom: none; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 14px; font-family: var(--display); font-size: 18px; }
.finance-row.finance-profit span:last-child { color: var(--blue); }
.expense-log { margin-top: 20px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; max-width: 560px; }
.expense-entry { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 10px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.expense-entry:last-child { border-bottom: none; }
.exp-date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.exp-kind { color: var(--ink-soft); }
.exp-note { color: var(--ink); overflow-wrap: anywhere; }
.exp-amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.exp-amt.neg { color: #2b9e6b; }
@media (max-width: 560px) { .expense-entry { grid-template-columns: 1fr auto; } .expense-entry .exp-date, .expense-entry .exp-kind { grid-column: 1 / -1; } }

.order-search-input { width: 100%; margin: 0 0 18px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--sans); font-size: 14.5px; background: var(--paper-raised); }
.order-search-input:focus { outline: none; border-color: var(--blue); }
.order-codes { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.order-codes .order-tracking { font-size: 13px; color: var(--ink-soft); }
.order-codes code { font-family: var(--mono); font-size: 13px; background: var(--blue-tint); color: var(--blue); padding: 2px 7px; border-radius: 4px; }
.order-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; font-size: 14px; }
.order-admin-meta { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--ink-soft); }
.oa-addr a { color: var(--blue); }
.oa-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.oa-total { margin-top: 8px; font-weight: 600; }
.oa-addr { line-height: 1.5; color: var(--ink-soft); }
.order-admin-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); gap: 16px; flex-wrap: wrap; }
.order-ship-controls { display: flex; align-items: center; gap: 14px; }
.order-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.order-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.link-btn { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; font-family: var(--sans); }
@media (max-width: 640px) { .order-admin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Customer orders — collapsible accordion
   ============================================================ */
.order-card { overflow: hidden; padding: 0; }
.order-summary {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 24px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--ink); transition: background 0.15s ease;
}
.order-summary:hover { background: var(--blue-tint); }
.order-summary-main { display: flex; flex-direction: column; gap: 3px; }
.order-summary-right { display: flex; align-items: center; gap: 16px; }
.order-chevron { color: var(--ink-soft); transition: transform 0.25s ease; font-size: 15px; line-height: 1; }
.order-card.open .order-chevron { transform: rotate(180deg); }
.order-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.order-card.open .order-body { max-height: 600px; }
.order-body-inner { padding: 2px 24px 22px; border-top: 1px solid var(--line); }
.order-body-inner .order-items { margin-top: 16px; }

/* ============================================================
   Phone-level responsive pass (≤600px, and ≤400px fine-tuning)
   ============================================================ */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  section { padding: 52px 0; }
  section.tight { padding: 38px 0; }
  h1 { font-size: 31px; }
  h2 { font-size: 25px; }
  .lede { font-size: 16.5px; }
  .page-hero { padding: 38px 0 30px; }
  .page-hero h1 { font-size: 30px; }

  /* Stacked, full-width actions */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-stats { gap: 20px 30px; flex-wrap: wrap; padding-top: 22px; }

  /* Forms: never two fields side-by-side on a phone */
  .form-row { grid-template-columns: 1fr; }

  /* One-per-row for card grids that were still 2-up */
  .related-grid, .product-grid, .footer-grid { grid-template-columns: 1fr; }

  /* Tighter top bars */
  .compliance-bar { font-size: 10.5px; line-height: 1.4; padding: 7px 14px; }
  .sale-bar { font-size: 12px; }

  /* Section-heading blocks and buttons breathe less */
  .section-head { margin-bottom: 28px; }
}

@media (max-width: 400px) {
  .logo { font-size: 19px; }
  .nav-actions { gap: 2px; }
  h1 { font-size: 27px; }
  .page-hero h1 { font-size: 26px; }
}

/* ============================================================
   Mobile fixes: nav underline + kits filmstrip finger-swipe
   ============================================================ */
@media (max-width: 900px) {
  /* Active-link underline sits 28px below the text — hide it in the vertical
     dropdown so it doesn't draw a blue line across the next item. */
  .main-nav.mobile-open a.active::after { display: none; }

  /* The fixed scroll-progress rail is a desktop aid — on phones it's a floating
     element overlapping content, so hide it. */
  .scroll-spine { display: none !important; }

  /* Kits filmstrip: unpin the scroll-jack and make it a native, finger-
     swipeable horizontal scroller. Vertical scrolling stays normal. */
  .pin-reveal-track { height: auto !important; }
  .pin-reveal-sticky { position: static !important; top: auto !important; height: auto !important; }
  .filmstrip-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 18px;
    padding-bottom: 10px;
  }
  .filmstrip-row { transform: none !important; flex-wrap: nowrap; }
  .filmstrip-row > * { scroll-snap-align: start; }
}

/* Homepage marketing band + checkout delivery note */
.marketing-band { background: var(--blue); color: #fff; text-align: center; padding: 24px 0; }
.marketing-band p { color: #fff; font-size: 18px; font-weight: 500; line-height: 1.5; margin: 0 auto; max-width: 780px; }
.marketing-band strong { color: #fff; font-weight: 700; }
.delivery-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
@media (max-width: 600px) { .marketing-band { padding: 18px 0; } .marketing-band p { font-size: 15.5px; } }