/* ============================================================
   ZENITH LABS — page-level components
   Catalogue · PDP · cart · checkout · register · COA · account
   ============================================================ */

/* ---------------- breadcrumbs ---------------- */
.crumbs { background: var(--bone); border-bottom: 1px solid var(--bone-3); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: var(--maxw); margin-inline: auto;
  padding: 13px var(--gutter);
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-lo);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.crumbs a { color: var(--tx-mid); }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--tx-hi); }

/* ---------------- prose ---------------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--s-4); line-height: 1.72; color: var(--fg); }
.prose-h3 {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--fg-lo); margin-block: var(--s-6) var(--s-3);
}
.prose-ul { margin-bottom: var(--s-5); }
.prose-ul li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
  line-height: 1.65; color: var(--fg);
}
.prose-ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--red);
}
.prose .fld { display: block; margin-bottom: var(--s-4); }

/* ---------------- catalogue bar ---------------- */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.cat-sort { display: inline-flex; align-items: center; gap: 10px; }
.pcard__link { display: block; }
.pcard__name a { color: inherit; }
.pcard__name a:hover { color: var(--red); }

/* ---------------- PDP ---------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 980px) { .pdp { grid-template-columns: 1fr; } }

.pdp__media { position: sticky; top: 96px; }
@media (max-width: 980px) { .pdp__media { position: static; } }

.pdp__panel { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pdp__name {
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 0.94; letter-spacing: -0.045em;
}
.pdp__spec { margin-top: var(--s-2); }
.spec__note {
  display: block; margin-top: 5px;
  font-size: var(--fs-micro); color: var(--fg-lo); line-height: 1.5;
  letter-spacing: 0.02em; text-transform: none;
}

.pdp__buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding-block: var(--s-5); border-block: 1px solid var(--rule);
}
.pdp__price { min-width: 130px; }
.pdp__price-n {
  display: block; font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.pdp__price small {
  display: block; margin-top: 3px;
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-lo);
}
.qty--lg button { width: 40px; height: 40px; font-size: 17px; }
.qty--lg span { min-width: 40px; font-size: var(--fs-sm); }

.breaks { width: 100%; border-collapse: collapse; font-family: var(--ff-mono); font-size: var(--fs-xs); }
.breaks caption { text-align: left; padding-bottom: 10px; }
.breaks th, .breaks td {
  border: 1px solid var(--rule); padding: 9px 6px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.breaks th { color: var(--fg-lo); font-weight: 500; letter-spacing: 0.1em; }

.pdp__assure li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: var(--fs-sm); color: var(--fg-mid); line-height: 1.6;
}
.pdp__assure li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; background: var(--red);
}

.pdp__two {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .pdp__two { grid-template-columns: 1fr; } }
.pdp__chain { min-width: 0; }

/* ---------------- cart page ---------------- */
.cartpage {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
@media (max-width: 900px) { .cartpage { grid-template-columns: 1fr; } }

.cartline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 118px 90px 36px;
  gap: var(--s-4); align-items: center;
  padding-block: var(--s-4); border-bottom: 1px solid var(--rule);
}
.cartline--head { padding-block: 0 var(--s-3); border-bottom: 1px solid var(--rule); }
.cartline--head span:not(:first-child) { text-align: right; }
.cartline > .tnum { text-align: right; font-variant-numeric: tabular-nums; }
.cartline__p { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.cartline__thumb { flex: none; width: 46px; }
.cartline__thumb .vial { height: 62px; width: auto; }
.cartline__n { font-weight: 500; }
.cartline__n:hover { color: var(--red); }
.cartline__x {
  width: 32px; height: 32px; border-radius: var(--r-1);
  color: var(--fg-lo); font-size: 19px; line-height: 1;
  transition: color var(--t-fast), background var(--t-fast);
}
.cartline__x:hover { color: var(--red); background: var(--red-wash); }
@media (max-width: 700px) {
  .cartline { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .cartline--head { display: none; }
  .cartline > .tnum:first-of-type { display: none; }
}

.cartpage__sum, .checkout__sum {
  position: sticky; top: 96px;
  border: 1px solid var(--rule); border-radius: var(--r-2);
  padding: var(--s-5); background: var(--surface);
}
@media (max-width: 900px) { .cartpage__sum, .checkout__sum { position: static; } }

.sumrows {
  display: grid; grid-template-columns: 1fr auto;
  gap: 11px var(--s-4); margin-block: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
}
.sumrows dt { color: var(--fg-mid); }
.sumrows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sumrows .sumrows__t {
  padding-top: 11px; border-top: 1px solid var(--rule);
  font-weight: 600; font-size: 1.05rem; color: var(--fg);
}
.btn.is-off { opacity: 0.4; pointer-events: none; }

/* ---------------- checkout ---------------- */
.steps {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  border-top: 1px solid var(--rule); padding-top: var(--s-4);
}
.steps li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-lo);
}
.steps li span { color: var(--fg-lo); }
.steps li.is-on { color: var(--fg); }
.steps li.is-on span { color: var(--red); }

.checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }

.co-step { border: 0; padding: 0; margin: 0; max-width: 560px; }
.co-step h2 { margin-bottom: var(--s-5); }
.co-nav { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }

.fld { display: block; margin-bottom: var(--s-4); }
.fld span { display: block; margin-bottom: 7px; }
.fld-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-3); }
@media (max-width: 560px) { .fld-row { grid-template-columns: 1fr; } }
.field.is-bad { border-color: var(--red); }
textarea.field { resize: vertical; font-family: var(--ff-body); letter-spacing: 0; }

.chk {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--fg-mid); line-height: 1.6;
  margin-bottom: var(--s-4);
}
.chk input { margin-top: 3px; accent-color: var(--red); }

.coline {
  display: grid; grid-template-columns: 40px 1fr auto;
  gap: var(--s-3); align-items: center;
  padding-block: var(--s-3); border-bottom: 1px solid var(--rule);
}
.coline .vial { height: 54px; width: auto; }

/* ---------------- register ---------------- */
.register {
  width: 100%; border-collapse: collapse; margin-top: var(--s-7);
  font-family: var(--ff-mono); font-size: var(--fs-xs);
}
.register th, .register td {
  text-align: left; padding: 14px 10px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.register thead th {
  color: var(--fg-lo); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: var(--fs-micro);
}
.register tbody tr:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
@media (max-width: 760px) {
  .register thead { display: none; }
  .register tr { display: grid; grid-template-columns: 1fr 1fr; padding-block: var(--s-3); }
  .register td { border: 0; padding: 4px 0; }
}

/* ---------------- COA document ---------------- */
.coa {
  border: 1px solid var(--rule); border-radius: var(--r-2);
  background: var(--paper); padding: clamp(24px, 4vw, 52px);
  max-width: 980px;
}
.coa__head {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: space-between;
  padding-bottom: var(--s-5); border-bottom: 2px solid var(--ink);
}
.coa__brand { display: flex; align-items: center; gap: 11px; }
.coa__title h1 {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em;
}
.coa__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-6) clamp(24px, 4vw, 56px); margin-top: var(--s-6);
}
@media (max-width: 760px) { .coa__grid { grid-template-columns: 1fr; } }
.coa__grid caption {
  text-align: left; padding-bottom: 9px;
  border-bottom: 1px solid var(--rule); margin-bottom: 4px;
}
.coa__chroma { margin-top: var(--s-7); background: var(--bone); border-color: var(--bone-3); }
.coa__chroma .chroma__head, .coa__chroma .chroma__foot { border-color: var(--bone-3); }
.coa__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule);
}
@media (max-width: 560px) { .coa__foot { grid-template-columns: 1fr; } }
.coa__ruo {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--rule); color: var(--red); line-height: 1.7;
}
.coa__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }

@media print {
  .announce, .header, .crumbs, .coa__actions, footer, .grain, .drawer, .scrim, .toast, .gate { display: none !important; }
  .coa { border: 0; padding: 0; max-width: none; }
  body { background: #fff; }
  main { padding: 0 !important; }
}

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.tab {
  padding: 0 0 var(--s-3); position: relative;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-lo);
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}
.tab.is-on { color: var(--fg); }
.tab.is-on::after { transform: scaleX(1); }

.ordlines { margin-top: var(--s-4); }

/* ---------------- attestation gate ---------------- */
.gate {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(9, 11, 13, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gate[hidden] { display: none; }
.gate__box {
  width: min(560px, 100%); max-height: 90dvh; overflow-y: auto;
  background: var(--bone); color: var(--tx-hi);
  border-radius: var(--r-2); padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--sh-3);
}
.gate__list { margin-block: var(--s-5); }
.gate__list li { margin-bottom: var(--s-4); }
.gate__list label {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--tx-mid); cursor: pointer;
}
.gate__list input { margin-top: 3px; accent-color: var(--red); flex: none; }
.gate__list a { color: var(--tx-hi); }