/*
 * RT Reserve — storefront theme.
 *
 * Structure follows a conventional research-supplier layout: utility strip,
 * masthead, a rounded inset shell holding the content, then alternating
 * split (text-left / detail-right) sections. Palette and type carry over from
 * the sibling RT Reserve properties so they all read as one
 * operator.
 *
 * Self-contained on purpose. This folder serves standalone under serve.mjs and
 * must not reach into a sibling site's assets.
 */

:root {
  --page: #050d18;
  --shell: #12314c;
  --shell-2: #0f2a42;
  --panel: #173b5a;
  --panel-2: #1b4467;
  --bar: #071726;

  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.07);

  --teal: #8fd3e8;
  --teal-dim: #5fb4d0;
  --teal-deep: #2f7f9e;
  --mint: #7fd1b9;
  --amber: #e8c87d;

  --bone: #f5f9fc;
  --slate-200: #cfdeea;
  --slate-400: #93aec3;
  --slate-500: #6d8ba4;

  --r-lg: 20px;
  --r: 13px;
  --r-sm: 9px;
  --shadow: 0 26px 64px rgba(2, 8, 18, 0.5);
  --wrap: 1240px;

  --font: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

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

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

a { color: var(--teal); text-decoration: none; }
a:hover { color: #b9e6f4; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

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

h1, h2, h3, h4 { line-height: 1.13; margin: 0 0 0.55em; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.center { text-align: center; }

/* A two-tone heading: second line drops to teal. */
.h-alt { color: var(--teal-dim); display: block; }

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-400);
  margin: 0 0 0.8rem;
}

.muted { color: var(--slate-400); }
.small { font-size: 0.85rem; }
.lede { color: var(--slate-200); max-width: 52ch; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1.35rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--teal-deep); color: #eaf7fc; }
.btn-primary:hover { filter: brightness(1.15); color: #fff; }

.btn-outline {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--slate-200);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.09); color: var(--bone); }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.3rem 0 0; }

/* -------------------------------------------------------- utility + header */

.utility {
  background: var(--bar);
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  text-transform: uppercase;
}
.utility .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.utility strong { color: var(--slate-200); font-weight: 700; }

.masthead { background: var(--bar); }
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  margin-right: auto;
}
.brand:hover { color: var(--bone); }
.brand b { font-weight: 800; }
.brand span { font-weight: 400; color: var(--slate-400); }

nav.main { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.86rem; font-weight: 600; }
nav.main a { color: var(--slate-200); }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--teal); }

/* ------------------------------------------------------------------ shell */

/* The content sits in a rounded panel inset from the page edge. */
.shell {
  background: var(--shell);
  border-radius: var(--r-lg);
  margin: 0 auto;
  max-width: calc(var(--wrap) + 48px);
  overflow: hidden;
}
@media (max-width: 720px) { .shell { border-radius: 0; } }

.shell-pad { padding: clamp(2rem, 5vw, 3.4rem) 0; }

.band { background: var(--shell-2); }

/* ------------------------------------------------------------------- hero */

.hero { padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(1.8rem, 4vw, 2.8rem); }
.hero h1 { margin-bottom: 1.6rem; }

.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}
@media (max-width: 780px) { .hero-cards { grid-template-columns: 1fr; } }

.hero-card {
  position: relative;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--panel) 0%, var(--shell-2) 100%);
  color: var(--bone);
}
.hero-card:hover { border-color: rgba(143, 211, 232, 0.4); color: var(--bone); }
.hero-card h2 { font-size: 1.25rem; margin: 0; max-width: 12ch; }
.hero-card .go { font-size: 0.86rem; font-weight: 700; color: var(--teal); }

.prop-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 860px) { .prop-row { grid-template-columns: 1fr; } }

.prop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}
.prop h3 { font-size: 0.95rem; margin: 0 0 0.2rem; }
.prop p { margin: 0; font-size: 0.82rem; color: var(--slate-400); }
.prop svg { width: 22px; height: 22px; color: var(--teal-dim); flex: none; }

/* --------------------------------------------------------- product catalog */

.catalog-head { margin-bottom: 1.6rem; }
.catalog-head p { margin: 0; max-width: 54ch; }

.catalog {
  display: grid;
  /* Six listings now, so the row is sized by minimum tile width rather than a
     fixed count — a hard 5 left the sixth stranded on its own row. */
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1rem;
}
@media (max-width: 1180px) { .catalog { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .catalog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .catalog { grid-template-columns: 1fr; } }

.item {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--shell-2);
  overflow: hidden;
}
.item:hover { border-color: rgba(143, 211, 232, 0.4); }

.item .shot {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: #eef1f4;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.item .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Products without a photo keep the drawn flask, which needs the dark ground. */
.item .shot:has(svg) {
  background: radial-gradient(200px 140px at 50% 30%, rgba(143, 211, 232, 0.14), transparent 70%), var(--panel);
}
.item .shot svg { width: 52px; height: 52px; color: var(--teal); opacity: 0.9; }

.item .info { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; gap: 0.5rem; }
.item .name { font-size: 0.95rem; font-weight: 700; margin: 0; }
.item .size { font-size: 0.78rem; color: var(--slate-500); margin: 0; }
.item .cost { font-size: 1.05rem; font-weight: 800; margin: auto 0 0; font-variant-numeric: tabular-nums; }
.item .btn { padding: 0.55rem 0.9rem; font-size: 0.82rem; }

.tag {
  align-self: flex-start;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--slate-400);
}
.tag.ok { color: var(--mint); border-color: rgba(127, 209, 185, 0.4); }
.tag.wait { color: var(--amber); border-color: rgba(232, 200, 125, 0.4); }

.catalog-note { font-size: 0.76rem; color: var(--slate-500); margin: 1.1rem 0 1rem; max-width: 92ch; }

/* ------------------------------------------------------------ split layout */

/* Text column left, detail column right — the spine of the page. */
.split {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .col-text p { color: var(--slate-400); font-size: 0.92rem; max-width: 44ch; }

/* Where the right column is a single card, let it match the text column's height
   instead of leaving a well of empty space beside it. */
.split.stretch { align-items: stretch; }

/* 2x2 numbered cards */
.stepgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .stepgrid { grid-template-columns: 1fr; } }

.stepcard {
  padding: 1.2rem 1.3rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
}
.stepcard .n {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--teal-dim);
  display: block;
  margin-bottom: 0.5rem;
}
.stepcard h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.stepcard p { margin: 0; font-size: 0.84rem; color: var(--slate-400); }

/* ------------------------------------------------------------ quality block */

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 1.2rem 0;
}
.figure .v { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.figure .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate-500); }

.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.pills .pill {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--slate-400);
  background: rgba(255, 255, 255, 0.03);
}
.pills .pill[aria-current="true"] { background: var(--teal-deep); color: #eaf7fc; border-color: transparent; }

.detail-panel {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--shell-2);
  padding: 1.1rem 1.2rem;
}
.detail-panel .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.detail-panel h3 { margin: 0; font-size: 0.98rem; }
.detail-panel .kicker { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-dim); font-weight: 700; }
.detail-panel > p { font-size: 0.86rem; color: var(--slate-400); margin: 0 0 0.8rem; }

.why {
  border-left: 3px solid var(--mint);
  padding: 0.6rem 0 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.why b { font-size: 0.84rem; display: block; margin-bottom: 0.15rem; }
.why p { margin: 0; font-size: 0.84rem; color: var(--slate-400); }

/* Right-hand showcase card with an overlaid badge and a footer bar. */
.showcase {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #5e9fb8 0%, #2c6b88 55%, #1d4d66 100%);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.showcase .art { flex: 1; display: grid; place-items: center; padding: 2rem 1rem 1rem; }
.showcase .art svg { width: 120px; height: 120px; color: rgba(255, 255, 255, 0.92); }

.showcase .badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  color: #12314c;
  border-radius: var(--r-sm);
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: right;
}
.showcase .badge span { display: block; font-weight: 600; color: #4a6b83; font-size: 0.66rem; }

.showcase .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.94);
  color: #12314c;
}
.showcase .bar b { display: block; font-size: 0.88rem; }
.showcase .bar small { color: #4a6b83; font-size: 0.76rem; }
.showcase .bar:hover { background: #fff; color: #12314c; }

/* --------------------------------------------------------------------- faq */

.faq-list { display: flex; flex-direction: column; gap: 0.55rem; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--shell-2);
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "\25BE"; color: var(--teal-dim); flex: none; font-size: 0.8rem; }
.faq-list details[open] summary::after { content: "\25B4"; }
.faq-list .a { padding: 0 1.1rem 1rem; font-size: 0.86rem; color: var(--slate-400); }
.faq-list .a p:last-child { margin-bottom: 0; }

.contact-card {
  border-radius: var(--r);
  background: var(--bar);
  border: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
  margin-top: 1.3rem;
}
.contact-card h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.contact-card p { font-size: 0.84rem; color: var(--slate-400); margin: 0 0 0.7rem; }
.contact-card .mail { font-size: 0.86rem; font-weight: 700; }
.contact-card .hours { font-size: 0.78rem; color: var(--slate-500); margin: 0.35rem 0 0; }

/* ------------------------------------------------------------- newsletter */

.newsbar {
  border-radius: var(--r);
  background: linear-gradient(120deg, var(--panel-2) 0%, var(--teal-deep) 100%);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.4rem;
  align-items: center;
}
@media (max-width: 820px) { .newsbar { grid-template-columns: 1fr; } }
.newsbar h2 { margin: 0 0 0.3rem; font-size: 1.5rem; }
.newsbar p { margin: 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); }
.newsbar form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.newsbar input[type="email"] {
  flex: 1 1 240px;
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  color: #12314c;
  font: inherit;
  font-size: 0.9rem;
}
.newsbar input[type="email"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.newsbar .btn-primary { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); }
.newsbar .btn-primary:hover { background: rgba(255, 255, 255, 0.26); }
.newsbar .msg { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; color: #fff; min-height: 1.2em; }

/* ------------------------------------------------------------------ footer */

footer.site { background: var(--bar); padding: clamp(2rem, 5vw, 3rem) 0 1.6rem; margin-top: 0; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.7rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.foot-grid li { margin-bottom: 0.4rem; }
.foot-grid a { color: var(--slate-200); }
.foot-grid a:hover { color: var(--teal); }
.foot-grid p { color: var(--slate-400); font-size: 0.84rem; max-width: 34ch; }

.foot-disclaimer {
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.foot-disclaimer h4 {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.45rem;
}
.foot-disclaimer p { margin: 0; font-size: 0.79rem; color: var(--slate-400); max-width: 110ch; }

.copyright { text-align: center; font-size: 0.78rem; color: var(--slate-500); }

/* --------------------------------------------------------------- age gate */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 10, 18, 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}
.gate[hidden] { display: none; }

.gate-card {
  width: min(430px, 100%);
  background: #fff;
  color: #16344e;
  border-radius: var(--r);
  padding: 1.6rem 1.7rem;
  text-align: center;
  box-shadow: var(--shadow);
  max-height: 92vh;
  overflow-y: auto;
}
.gate-card .mark {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #4a6b83;
  margin: 0 0 0.5rem;
}
.gate-card h2 { font-size: 1.2rem; margin: 0 0 0.6rem; color: #16344e; }
.gate-card .intro { font-size: 0.84rem; color: #4a6b83; margin: 0 0 1.1rem; }

.gate-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #d5e2ec;
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.gate-check input { margin-top: 0.15rem; flex: none; width: 15px; height: 15px; accent-color: #2f7f9e; }
.gate-check b { font-weight: 700; }

/* Names the outstanding confirmation rather than leaving a dead button. */
.gate-hint {
  margin: 0 0 0.5rem;
  min-height: 1.1em;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b4451f;
}

/* The box still to be ticked, so the eye is sent to it. */
.gate-check.needed {
  border-color: #b4451f;
  background: #fff6f2;
}

.gate-card button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: #2f7f9e;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.gate-card button:disabled { background: #a8c8d6; cursor: not-allowed; }
.gate-card .fine { font-size: 0.71rem; color: #6b8599; margin: 0.9rem 0 0; line-height: 1.5; }

/* -------------------------------------------------------------- utilities */

.prose { max-width: 760px; }
.prose h2 { margin-top: 2rem; }
.prose p, .prose li { color: var(--slate-200); font-size: 0.95rem; }
.prose li { margin-bottom: 0.45rem; }

.notice {
  border: 1px solid rgba(232, 200, 125, 0.35);
  background: rgba(232, 200, 125, 0.07);
  border-radius: var(--r-sm);
  padding: 0.9rem 1.1rem;
  margin: 1.3rem 0;
}
.notice p { margin: 0; font-size: 0.88rem; color: var(--slate-200); }

.datatable { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 0 1rem; }
.datatable th, .datatable td { text-align: left; padding: 0.62rem 0; border-bottom: 1px solid var(--line-soft); }
.datatable th { color: var(--slate-400); font-weight: 600; width: 44%; }
.datatable td { font-weight: 700; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------- promotional sale */

/* List price shown struck through beside the sale price. Not colour alone:
   the strikethrough carries the meaning for anyone who cannot see the red. */
.was {
  text-decoration: line-through;
  color: var(--slate-500);
  font-weight: 600;
  margin-right: 0.4rem;
  font-size: 0.85em;
}
.now { color: var(--mint); }

.sale-flag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: var(--mint);
  color: #06281f;
}

/*
 * The strip follows the reader.
 *
 * It carries the only two time-bound facts on the page -- what the discount is
 * and how long it lasts -- and both were previously visible for about one
 * screen before scrolling past. Sticky keeps the countdown in view while
 * someone is actually reading product copy, which is when it can still change
 * a decision.
 *
 * z-index sits above cards and the sticky section headers but below the cart
 * drawer and the age gate, which must be able to cover it.
 */
.sale-strip {
  position: sticky;
  top: 0;
  z-index: 60;

  background: var(--mint);
  color: #06281f;
  text-align: center;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.15rem;
}

.sale-strip .claim {
  padding-top: 0.1rem;
}

/*
 * The code itself, set apart from the sentence around it.
 *
 * A discount code is the one thing in this strip a reader has to carry in their
 * head to the next page, so it is boxed and monospaced rather than left as
 * another word in a line of uppercase. Letter-spacing is reset because the
 * strip tracks at 0.12em and a code is read character by character.
 */
.promo-code {
  font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 0.95em;
  letter-spacing: 0.04em;
  background: #06281f;
  color: var(--mint);
  border-radius: 5px;
  padding: 0.12em 0.42em;
  margin-left: 0.15em;
}

.promo-clock {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  letter-spacing: 0;
}

.promo-clock .u {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* Fixed width so the row does not jog sideways as digits change. */
  min-width: 2.05ch;
}

.promo-clock b {
  font-size: 1.6rem;
  line-height: 0.92;
  font-weight: 800;
  /* Equal-width digits: without this the seconds column shivers every tick. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.promo-clock i {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.62;
  margin-top: 0.28rem;
}

.promo-clock .sep {
  font-size: 1.35rem;
  line-height: 0.98;
  opacity: 0.4;
}

@media (max-width: 560px) {
  .sale-strip {
    gap: 0.3rem 0.75rem;
    font-size: 0.7rem;
  }

  .promo-clock b {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing animates, but the seconds column is the one thing on the page
     that never sits still; drop to a calmer size rather than hiding it. */
  .promo-clock b {
    font-size: 1.35rem;
  }
}

/* ------------------------------------------------- product photography */

.product .thumb {
  background: #eef1f4;
  overflow: hidden;
}
.product .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product .thumb:has(svg) {
  background:
    radial-gradient(320px 180px at 50% 20%, rgba(143, 211, 232, 0.14), transparent 70%),
    var(--panel);
}

/* The carton is now a photograph on marble rather than a flat cutout, so it
   fills the panel instead of floating on the gradient. A light rectangle
   centred inside a teal panel reads as a pasted screenshot; edge to edge it
   reads as the panel itself. The badge and bar are both white chips, so they
   stay legible over the marble without a scrim. */
#packaging .showcase .art {
  position: absolute;
  inset: 0;
  padding: 0;
  /* Matches the photograph's own backdrop, sampled from its edges. With this
     behind it, `contain` letterboxes into a colour continuous with the image
     rather than into the teal gradient, so the whole carton shows — base and
     reflection included — without the frame reading as a pasted rectangle.
     `cover` was clipping the base, which is the geometry this image exists to
     get right. */
  background: #d6d2d0;
}
#packaging .showcase .art img {
  width: 100%;
  height: 100%;
  /* The art is a grid container, and a grid item's automatic minimum size is
     its intrinsic height — 1044px for this portrait photograph at the panel's
     width. That silently overrode `height: 100%` and the image overflowed the
     panel, clipping the carton's base. */
  min-height: 0;
  max-height: none;
  object-fit: contain;
}
/* The art is absolutely positioned and comes after the badge in the DOM, so
   without this it paints over it. */
#packaging .showcase .badge { z-index: 2; }

/* Below 900px .split stacks and the panel goes roughly square, which put the
   bar across the carton's base. Reserve the bar's band and give the panel
   height to stand the carton in. */
@media (max-width: 900px) {
  #packaging .showcase { min-height: 520px; }
  #packaging .showcase .art { inset: 0 0 5.75rem 0; }
}
/* The art is out of flow, so the bar is pushed down rather than relying on
   the panel's space-between. */
#packaging .showcase .bar { position: relative; z-index: 1; margin-top: auto; }

/* Hero showcase carries the reference vial at full bleed. */
.showcase .art { padding: 0; }
.showcase .art img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}

/* ==========================================================================
   Sub-page chrome
   --------------------------------------------------------------------------
   The homepage was rebuilt onto .utility / .masthead / .shell, but the shop,
   CoA, FAQ, ambassadors, account and legal pages still carry the earlier
   markup. Rewriting eight files risked more than it gained, so the classes
   they use are defined here against the same tokens: one design, two
   vocabularies.
   ========================================================================== */

.announce {
  background: var(--bar);
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.announce .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.announce strong { color: var(--slate-200); font-weight: 700; }

header.site { background: var(--bar); }
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
header.site .brand svg { width: 22px; height: 22px; }
.tld { color: var(--slate-400); font-weight: 400; }

.section { padding: clamp(2rem, 5vw, 3.4rem) 0; }
.section.alt { background: var(--shell-2); }
.section-head { margin-bottom: 1.8rem; }
.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
.section-head p { margin-bottom: 0; }

.ruo { font-size: 0.76rem; color: var(--slate-500); margin: 0.6rem 0 0; }

/* ---------------------------------------------------------- product cards */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
}
.product {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--shell-2);
  overflow: hidden;
}
.product:hover { border-color: rgba(143, 211, 232, 0.4); }

/*
 * Deep links. Every card carries its sku as an id so a QR or a shared link can
 * point at one product (`/shop/#gl-rt`) even though the catalogue is a single
 * page. The scroll margin keeps the card clear of the announce bar, and the
 * :target ring says which of six cards was asked for -- without it the page
 * just looks to have scrolled somewhere arbitrary.
 */
.product[id] { scroll-margin-top: 96px; }
/*
 * The certificate row a vial's QR points at. A scan drops the reader into a
 * thirteen-row table; without this they are looking at a wall of numbers with
 * no idea which line is the vial in their hand.
 */
tr[id] { scroll-margin-top: 110px; }
tr[id]:target > td {
  background: rgba(143, 211, 232, 0.16);
  box-shadow: inset 0 1px 0 var(--teal), inset 0 -1px 0 var(--teal);
}

.product:target {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(143, 211, 232, 0.22);
}
.product .body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product h3 { margin-bottom: 0.15rem; font-size: 1rem; }
.product .sub { font-size: 0.78rem; color: var(--slate-500); margin: 0 0 0.7rem; }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--slate-400);
}
.badge.ok { color: var(--mint); border-color: rgba(127, 209, 185, 0.4); }
.badge.pending { color: var(--amber); border-color: rgba(232, 200, 125, 0.4); }

.variants { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.9rem; }
.variants label {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--slate-200);
  cursor: pointer;
}
.variants label:hover { border-color: rgba(143, 211, 232, 0.5); }
.variants input { position: absolute; opacity: 0; pointer-events: none; }
.variants input:checked + span {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.variants s { color: var(--slate-500); }

/*
 * A fill weight that is out of stock. Shown rather than removed: a buyer who
 * came for the 30 mg should be told it is empty, not left wondering whether
 * they misremembered the catalogue. The input is disabled, so it can never be
 * the checked radio productOf() reads.
 */
.variants label.gone {
  color: var(--slate-500);
  border-style: dashed;
  cursor: not-allowed;
}
.variants label.gone:hover { border-color: var(--line); }

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.price { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.price .per { font-size: 0.74rem; font-weight: 600; color: var(--slate-500); }
.price-row .btn { padding: 0.5rem 0.85rem; font-size: 0.8rem; }

/*
 * Quantity stepper on a listing card.
 *
 * Sits beside the price rather than beside the button, and the button goes
 * full width underneath: a card can be 250px wide, and price + stepper + button
 * on one row is where that breaks. The checkout has its own copy of these rules
 * inline for the cart table; this one is for the cards.
 *
 * The minus is disabled at one rather than removing the line, which is what the
 * checkout's stepper does. A card is where an order is built, not edited.
 */
.qty { display: inline-flex; align-items: center; gap: 0.3rem; }
.qty button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--bone);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.qty button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.qty button:disabled { opacity: 0.35; cursor: default; }
.qty b {
  min-width: 2ch;
  text-align: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Homepage cards: the price and the stepper share a line. */
.cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
}
.cost-row .cost { margin: 0; }

/* -------------------------------------------------------------- info cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}
.card {
  background: var(--shell-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.3rem;
}
.card h3 { margin-bottom: 0.35rem; font-size: 1rem; }
.card p { margin: 0; color: var(--slate-400); font-size: 0.9rem; }
.card .ico { width: 26px; height: 26px; color: var(--teal-dim); margin-bottom: 0.7rem; }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.metric {
  text-align: center;
  padding: 1.1rem 0.8rem;
  background: var(--shell-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.metric .n {
  display: block;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--teal);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric .l {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 700;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.pillar h3 { color: var(--teal); font-size: 0.98rem; margin-bottom: 0.35rem; }
.pillar p { color: var(--slate-400); font-size: 0.9rem; margin: 0; }

/* ------------------------------------------------------------ tables + faq */

.assay-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 0 1rem; }
.assay-table th,
.assay-table td {
  text-align: left;
  padding: 0.6rem 0.5rem 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.assay-table thead th {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.assay-table tbody th { color: var(--slate-400); font-weight: 600; width: 44%; }
.assay-table td { font-weight: 700; font-variant-numeric: tabular-nums; }

.keyline {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  overflow-x: auto;
  margin: 0 0 1rem;
}

.faq { max-width: 820px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--shell-2);
  margin-bottom: 0.55rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal-dim); font-size: 1.1rem; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.1rem 1rem; font-size: 0.88rem; color: var(--slate-400); }
.faq .answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- newsletter */

.newsletter {
  background: linear-gradient(120deg, var(--panel-2) 0%, var(--teal-deep) 100%);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
}
.newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem auto 0.7rem;
  max-width: 520px;
}
.newsletter input[type="email"] {
  flex: 1 1 240px;
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  color: #12314c;
  font: inherit;
}
.newsletter .msg { font-size: 0.86rem; color: #fff; margin: 0; min-height: 1.2em; }

/* ------------------------------------------------------------------ footer */

.legal {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.3rem;
  color: var(--slate-500);
  font-size: 0.79rem;
}
.legal p { max-width: 100ch; margin: 0 0 0.6rem; }
.rou { color: var(--slate-200); font-weight: 700; }

/* btn-ghost is the earlier name for btn-outline. */
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--slate-200);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); color: var(--bone); }

/* ------------------------------------------------------ clickable listings */

/* The tiles fired a tracking event on click but looked inert — no pointer, no
   hover movement, nowhere to go. A card that responds to a click has to look
   like it will. */

.item { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.item:hover {
  border-color: rgba(143, 211, 232, 0.55);
  transform: translateY(-2px);
}
.item:hover .shot img { filter: brightness(1.04); }
.item:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }

/* On the shop page the whole card is not a link — every variant is already
   listed — so only the photo and title invite a click. */
.product .thumb,
.product h3 { cursor: pointer; }
.product .thumb img { transition: filter .15s ease; }
.product .thumb:hover img { filter: brightness(1.05); }

/* Momentary confirmation that a click landed, since nothing navigates. */
.product.tapped,
.item.tapped { border-color: var(--teal); }

/* ------------------------------------------------------------ detail sheet */

/* Opens on a listing click. Deliberately shows what a buyer needs to decide —
   the photo, the sizes, the price and the certificate — and nothing more. */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(4, 10, 18, 0.78);
  backdrop-filter: blur(4px);
}
.sheet[hidden] { display: none; }

.sheet-card {
  position: relative;
  width: min(760px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}
@media (max-width: 700px) { .sheet-card { grid-template-columns: 1fr; } }

.sheet-shot {
  background: #eef1f4;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sheet-shot img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .sheet-shot { max-height: 260px; } }

.sheet-body { padding: clamp(1.3rem, 3vw, 2rem); }
.sheet-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.2rem; }
.sheet-sub { font-size: 0.8rem; color: var(--slate-500); margin: 0 0 1rem; }

.sheet-price { font-size: 1.6rem; font-weight: 800; margin: 0 0 1.2rem; }
.sheet-price .was { font-size: 0.6em; }

.sheet-sizes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.3rem; }
.sheet-sizes button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--slate-200);
  cursor: pointer;
}
.sheet-sizes button[aria-pressed="true"] {
  border-color: var(--teal);
  color: var(--bone);
  background: rgba(143, 211, 232, 0.12);
}

.sheet-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sheet-actions .btn { flex: 1 1 160px; }

.sheet-note {
  margin: 1.2rem 0 0;
  font-size: 0.78rem;
  color: var(--slate-500);
  line-height: 1.5;
}

.sheet-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(8, 19, 37, 0.75);
  color: var(--bone);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.sheet-close:hover { background: rgba(8, 19, 37, 0.95); }

/* ---------------------------------------------------------------- add toast */
/*
 * Adding to the order used to flip the button label to "Added" for 900ms, which
 * is easy to miss entirely — people clicked twice, or assumed nothing happened
 * and left. This says what went in, what it costs, what the order now totals,
 * and gives one obvious way onward to payment.
 */
.rt-toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 90;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 14px;
  width: min(440px, calc(100vw - 24px));
  padding: 14px 16px;
  background: var(--panel); color: var(--bone);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  text-align: left; font: inherit; cursor: pointer;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s;
  opacity: 0;
}
.rt-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.rt-toast .tick {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--mint); color: #06251c;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.rt-toast .body { flex: 1 1 auto; min-width: 0; }
.rt-toast .eyebrow {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint); margin: 0 0 2px;
}
.rt-toast .what {
  margin: 0; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-toast .sum { margin: 2px 0 0; font-size: 12.5px; color: var(--slate-200); }
.rt-toast .go {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--teal);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .rt-toast { gap: 10px; padding: 12px 13px; }
  .rt-toast .go { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-toast { transition: opacity .2s; transform: translate(-50%, 0); }
}

/*
 * Per-product certificate link, on the home tiles and the shop cards.
 *
 * Mint rather than the teal used for navigation: this is the one link on a
 * product card that leads to evidence rather than to another part of the
 * shop, and it should not read as just another item in the card's furniture.
 * Underlined from rest, because a dotted or bare link inside a card full of
 * buttons gets scanned as a label instead of something clickable.
 */
.coa-link {
  display: inline-block;
  margin: 0.15rem 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(127, 209, 185, 0.45);
}

.coa-link::after {
  /* Signals the new tab without a separate icon file to load. */
  content: " \2197";
  font-size: 0.9em;
  opacity: 0.75;
}

.coa-link:hover,
.coa-link:focus-visible {
  color: var(--bone);
  text-decoration-color: currentColor;
}

.coa-link[hidden] { display: none; }