/* Aspect V3 - COA library grid (markup v3/coa-lib.mjs, behaviour v3/coa-lib.js).
   Each card is a specimen of the hero: the real newest certificate, one vial, the printed purity,
   every lot as a dot on the 99-100% scale. Neutral surfaces only; blue is the reading, green the lab.
   Motion: scroll reveal (rise 18px, 600ms, 70ms stagger per batch); hover = paper straightens and
   lifts, beam sweeps once to the printed purity (fine pointers only); reduced motion = static. */
.lx { padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); background: #f3f5f9; color: #0b1531; }
.lx [hidden], .cx-search[hidden] { display: none !important; }
.lx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.lx-eyebrow { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1561dc; }
.lx-h2 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.lx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-f { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #d3dae6; background: #fff; color: #3d475f; font: 500 13px var(--font-sans); cursor: pointer; transition: background-color 180ms, color 180ms, border-color 180ms; }
.lx-f.is-on { background: #0b1531; border-color: #0b1531; color: #fff; }
.lx-sort { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid #d3dae6; background: #fff; font: 500 13px var(--font-sans); color: #3d475f; }
.lx-sort span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #5a647d; }
.lx-sort select { border: 0; background: transparent; font: 600 13px var(--font-sans); color: #0b1531; padding: 6px 4px; cursor: pointer; }
.lx-status { margin: 22px 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5a647d; }

.lx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1099px) { .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lx-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- card ---------- */
.lx-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; overflow: clip;
  box-shadow: 0 0 0 1px rgba(11, 21, 49, .06), 0 1px 2px rgba(11, 21, 49, .04), 0 14px 30px -22px rgba(11, 21, 49, .28);
  transition: box-shadow 300ms cubic-bezier(.2, .7, .2, 1), translate 300ms cubic-bezier(.2, .7, .2, 1); scroll-margin-top: 120px; }
.lx-media { position: relative; height: 232px; overflow: clip; isolation: isolate;
  background: radial-gradient(70% 90% at 30% 20%, #fff 0%, #f4f6fb 55%, #eaeef6 100%); border-bottom: 1px solid #edf0f5; }
.lx-media::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: radial-gradient(circle, rgba(21, 97, 220, .16) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 60%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 60%, #000, transparent 75%); }
.lx-doc { position: absolute; left: 11%; top: 26px; width: 136px; padding: 0; border: 0; background: none; cursor: zoom-in; rotate: -5deg;
  transition: rotate 420ms cubic-bezier(.2, .7, .2, 1), translate 420ms cubic-bezier(.2, .7, .2, 1), scale 420ms cubic-bezier(.2, .7, .2, 1); }
.lx-paper { position: relative; display: block; aspect-ratio: 612 / 792; border-radius: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 21, 49, .08), 0 16px 26px -14px rgba(11, 21, 49, .42); }
.lx-paper img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3px; }
.lx-paper.is-stack::before, .lx-paper.is-stack::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 49, .08), 0 8px 18px -12px rgba(11, 21, 49, .35); }
.lx-paper.is-stack::before { translate: 7px 5px; rotate: 4deg; }
.lx-paper.is-stack::after { translate: 13px 9px; rotate: 8deg; background: #f8f9fc; }
.lx-hl { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
  border-radius: 2px; box-shadow: 0 0 0 1.5px #1561dc, 0 0 10px 2px rgba(21, 97, 220, .4); background: rgba(21, 97, 220, .1); opacity: 0; scale: 1.6; transition: opacity 240ms, scale 320ms cubic-bezier(.2, .7, .2, 1); }
.lx-beam { position: absolute; left: -4%; right: -4%; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #1561dc 20%, #8cc0ff 50%, #1561dc 80%, transparent); box-shadow: 0 0 12px 2px rgba(21, 97, 220, .55); }
.lx-vial { position: absolute; right: 9%; bottom: -6px; width: auto; height: 214px; pointer-events: none;
  filter: drop-shadow(0 22px 18px rgba(11, 21, 49, .22)); transition: translate 420ms cubic-bezier(.2, .7, .2, 1); }
.lx-chip { position: absolute; left: 14px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(11, 21, 49, .08);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #3d475f; backdrop-filter: blur(6px); }

.lx-body { display: flex; flex-direction: column; padding: 16px 20px 20px; }
.lx-lab { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #0b7f4f; font-weight: 600; }
.lx-lab img { height: 22px; width: auto; flex: none; }
.lx-lab span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lab time { margin-left: auto; flex: none; color: #5a647d; font-weight: 500; letter-spacing: .06em; }
.lx-name { margin: 12px 0 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.lx-sub { margin: 4px 0 0; font-size: 13px; color: #5a647d; line-height: 1.4; }
.lx-read { display: flex; align-items: flex-end; gap: 12px; margin: 16px 0 0; }
.lx-pur { font-size: 2.5rem; font-weight: 600; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.lx-unit { padding-bottom: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #1561dc; line-height: 1.45; }

.lx-strip { margin-top: 16px; }
.lx-track { position: relative; display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #f3f5f9, #e8f0ff); box-shadow: inset 0 0 0 1px #e1e6ef; }
.lx-track i { position: absolute; top: 50%; left: clamp(7px, var(--x), calc(100% - 7px)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(11, 21, 49, .32); }
.lx-track i.is-new { z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #1561dc; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(21, 97, 220, .45); }
.lx-ax { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: #5a647d; }
.lx-ax i { font-style: normal; } .lx-ax b { font-weight: 500; color: #3d475f; }

.lx-acts { display: flex; gap: 8px; margin-top: 18px; }
.lx-view, .lx-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; font: 600 14px var(--font-sans); cursor: pointer; transition: background-color 180ms, border-color 180ms, color 180ms; }
.lx-view { flex: 1 1 auto; padding: 0 18px; border: 0; background: #0b1531; color: #fff; }
.lx-more { flex: none; padding: 0 14px 0 16px; border: 1px solid #d3dae6; background: #fff; color: #0b1531; }
.lx-view svg, .lx-more svg, .lx-lot-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-more svg { transition: rotate 260ms cubic-bezier(.2, .7, .2, 1); }
.lx-card.is-open .lx-more svg { rotate: 180deg; }

.lx-lots { list-style: none; margin: 16px -20px -20px; padding: 4px 0 8px; border-top: 1px solid #edf0f5; background: #f8f9fc; }
.lx-lot { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 14px 9px 20px; font-size: 13px; border-bottom: 1px solid #edf0f5; transition: background-color 200ms; }
.lx-lot:last-child { border-bottom: 0; }
.lx-lot.is-hit { background: #e8f0ff; box-shadow: inset 3px 0 0 #1561dc; }
.lx-lot-id { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lot-z { color: #5a647d; font-size: 12px; white-space: nowrap; }
.lx-lot-d { font-family: var(--font-mono); font-size: 11px; color: #5a647d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lot-d i { font-style: normal; }
.lx-lot-p { font-family: var(--font-mono); font-weight: 600; color: #0b7f4f; white-space: nowrap; }
.lx-lot-go { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid #d3dae6; background: #fff; color: #1561dc; font: 600 12px var(--font-sans); cursor: pointer; }
.lx-lot-go svg { width: 14px; height: 14px; }
.lx-lot-all { padding: 10px 20px 4px; }
.lx-showall { border: 0; background: none; padding: 4px 0; color: #1561dc; font: 600 13px var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) and (max-width: 1399px) { .lx-lot-d i { display: none; } }
@media (max-width: 420px) { .lx-lot { grid-template-columns: minmax(0, 1fr) auto auto; } .lx-lot-z, .lx-lot-d { display: none; } }

/* "coming soon" card (coa-lib.mjs COA_PENDING, copied from eonpeptides.com 2026-11-03): a ruled blank
   sheet where the certificate will go, and a note instead of the purity reading */
.lx-doc.is-soon { cursor: default; }
.lx-paper.is-soon { overflow: hidden; background: #fff repeating-linear-gradient(180deg, transparent 0 13px, #eef1f6 13px 14px) 0 34px / 100% calc(100% - 50px) no-repeat; }
.lx-soon-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -8deg; padding: 6px 8px; border: 1.5px solid #1561dc; border-radius: 4px; background: rgba(255, 255, 255, .92);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1.35; text-align: center; text-transform: uppercase; color: #1561dc; white-space: nowrap; }
.lx-lab-soon { color: #1561dc; }
.lx-soon { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: #3d475f; }
a.lx-view { text-decoration: none; }

/* water certificate (benzyl alcohol + heavy metals, no HPLC purity scale) */
.lx-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid #edf0f5; }
.lx-spec div { min-width: 0; }
.lx-spec dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #5a647d; }
.lx-spec dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #0b1531; overflow-wrap: anywhere; }

/* solo (QR) card: one compound, laid out wide */
.lx-grid:has(.is-solo) { grid-template-columns: minmax(0, 860px); }
@media (min-width: 760px) {
  .lx-card.is-solo { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .lx-card.is-solo .lx-media { height: auto; min-height: 340px; border-bottom: 0; border-right: 1px solid #edf0f5; }
  .lx-card.is-solo .lx-lots { margin-right: -20px; }
}

.lx-empty { padding: 40px 28px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(11, 21, 49, .06); color: #44506b; }
.lx-empty-h { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; color: #0b1531; letter-spacing: -.02em; }
.lx-empty a { color: #1561dc; }
.lx-clear { margin-top: 14px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid #d3dae6; background: #fff; font: 600 13px var(--font-sans); color: #0b1531; cursor: pointer; }
.lx-pending { margin: 22px 0 0; font-size: 13px; color: #5a647d; }
.lx-pending a { color: #1561dc; }
.lx-single { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lx-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid #d3dae6; background: #fff; color: #0b1531; font: 600 14px var(--font-sans); text-decoration: none; }
.lx-pill-dark { background: #0b1531; border-color: #0b1531; color: #fff; }

/* focus: the art direction's blue ring */
.lx :is(button, a, select):focus-visible, .lx-doc:focus-visible .lx-paper { outline: 2px solid #1561dc; outline-offset: 3px; }
.lx-sort:focus-within { border-color: #1561dc; box-shadow: 0 0 0 3px rgba(21, 97, 220, .16); }
.lx-sort select:focus-visible { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .lx-f:hover:not(.is-on) { border-color: #96a0b3; color: #0b1531; }
  .lx-view:hover { background: #0a3fa3; }
  .lx-more:hover, .lx-lot-go:hover, .lx-clear:hover, .lx-pill:not(.lx-pill-dark):hover { border-color: #1561dc; color: #1561dc; }
  .lx-lot:hover { background: #fff; }
  .lx-card:hover { box-shadow: 0 0 0 1px rgba(21, 97, 220, .18), 0 2px 4px rgba(11, 21, 49, .05), 0 28px 50px -30px rgba(11, 21, 49, .45); }
}
@media (prefers-reduced-motion: no-preference) {
  .lx-arm .lx-card { opacity: 0; translate: 0 18px; }
  .lx-arm .lx-card.is-in { opacity: 1; translate: 0 0; transition: opacity 600ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate 600ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), box-shadow 300ms; }
  @media (hover: hover) and (pointer: fine) {
    .lx-card:hover .lx-doc, .lx-doc:focus-visible { rotate: 0deg; translate: 0 -8px; scale: 1.04; }
    .lx-card:hover .lx-vial { translate: 8px 0; }
    .lx-card:hover .lx-beam { animation: lx-beam 900ms cubic-bezier(.45, 0, .2, 1) 80ms both; }
    .lx-card:hover .lx-hl { opacity: 1; scale: 1; transition-delay: 620ms; }
  }
}
@keyframes lx-beam { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { top: calc((var(--by, .32)) * 100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lx-card:hover .lx-hl { opacity: 1; scale: 1; } }
.lx-vial { bottom: 14px; height: 200px; }
@media (max-width: 639px) {
  .lx-tools { width: 100%; flex-wrap: nowrap; }
  .lx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -4px; padding: 4px; flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lx-chips::-webkit-scrollbar { display: none; }
  .lx-f { flex: none; }
  .lx-sort span { display: none; }
  .lx-sort { flex: none; padding-left: 10px; }
}
.lx-pending a, .lx-empty a { text-decoration: underline; text-underline-offset: 3px; }
.lx-lot-p { color: #086640; }
/* phones + tablets: the vial is a clean transparent cutout, no drop-shadow (owner 10-17); desktop keeps it */
@media (max-width: 1023px), (hover: none) { .lx-vial { filter: none; } }
/* search hint under the hero search box (coa-lib.js): match count + jump to results */
.ch-jump { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(140, 192, 255, .12); box-shadow: inset 0 0 0 1px rgba(140, 192, 255, .28); color: #c9d4ea; font: 500 14px var(--font-sans); text-align: left; cursor: pointer; }
.ch-jump[hidden] { display: none !important; }
.ch-jump b { color: #fff; font-weight: 600; }
.ch-jump span { color: #8cc0ff; font-weight: 600; }
.ch-jump i { font-style: normal; color: #8cc0ff; }
.ch-jump:disabled { cursor: default; background: rgba(255, 255, 255, .05); }
.ch-jump:disabled span { color: #93a1bd; font-weight: 500; }
.ch-jump:focus-visible { outline: 2px solid #8cc0ff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ch-jump:not(:disabled):hover { background: rgba(140, 192, 255, .2); } }