/* ============================================================================
   Certificate of Analysis.
   Geometry measured on DP at 1440: title y130, search bar y229, rows on a 154px
   pitch, lot chips at x880/x1060, "View all Lots" at x1212.
   ============================================================================ */

/* .dp-sr used to be defined here. It has moved to site.css — this file only loads on the COA
   page, so every other template using the class rendered its "hidden" labels as visible text. */

.dp-coa {
  background: var(--dp-surface);
  padding: var(--dp-s-12) 0 64px;
}
.dp-coa__in {
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
}

/* --- Head ---------------------------------------------------------------- */
.dp-coa__title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--dp-fw-semi);
  line-height: 36px;
  letter-spacing: -.9px;              /* measured on /coa specifically */
  color: var(--dp-ink);
}
/* Measured: 20/500 at 24px leading in pure black — noticeably larger and darker than
   the muted sub-heads used elsewhere on the site. */
.dp-coa__sub {
  margin: var(--dp-s-2) 0 0;
  font-size: var(--dp-fs-h3);
  font-weight: var(--dp-fw-medium);
  line-height: 24px;
  letter-spacing: -.05px;
  color: var(--dpx-fg-000, #000);
}

/* --- Search + validate --------------------------------------------------- */
.dp-coa__bar {
  display: flex; align-items: center; gap: var(--dp-s-7);
  margin-top: var(--dp-s-10);
}
.dp-coa__search {
  position: relative;
  flex: 1 1 auto;
  display: flex; align-items: center;
}
.dp-coa__mag {
  position: absolute; left: 16px;
  color: var(--dp-ink-50);
  pointer-events: none;
}
.dp-coa__q {
  width: 100%;
  padding: 13px var(--dp-s-7) 13px 42px;
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  font: inherit;
  font-size: var(--dp-fs-base);
  letter-spacing: -.28px;
  color: var(--dp-ink);
}
.dp-coa__q::placeholder { color: var(--dp-ink-50); }
.dp-coa__q:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -1px; border-color: transparent; }
/* Safari paints its own clear affordance on type=search; it does not match. */
.dp-coa__q::-webkit-search-decoration,
.dp-coa__q::-webkit-search-cancel-button { -webkit-appearance: none; }

.dp-coa__validate {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--dp-s-3);
  padding: 12px var(--dp-s-6) 12px var(--dp-s-9);
  border-radius: var(--dp-r-pill);
  background: var(--dpx-bg-ink, var(--dp-ink));
  color: var(--dp-on-dark);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.28px;
  white-space: nowrap;
  transition: background-color .2s var(--dp-ease-cta);
}
.dp-coa__validate:hover { background: var(--dpx-bg-1d2138, #352720); color: var(--dp-on-dark); }
.dp-coa__validate:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-coa__validateIco {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--dpx-bg-a255255255p18, rgba(255, 255, 255, .18));
}

/* --- Rows ---------------------------------------------------------------- */
.dp-coa__list { margin-top: var(--dp-s-9); display: grid; gap: var(--dp-s-5); }

/* 24px top and bottom puts the row on DP's measured 154px pitch (142 + 12 gap). */
.dp-coa__row {
  padding: 24px 40px;
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface-alt);
}
.dp-coa__row[hidden] { display: none; }

.dp-coa__badges { display: flex; flex-wrap: wrap; gap: var(--dp-s-3); }
/* These are CONTROLS now, not labels: they switch which certificate type the lot list below
   is showing. The selected one is blue and the alternative sits back in grey — so the styling
   hangs off .is-active rather than :first-child, which described a static badge row and would
   leave the blue stuck on "Purity" no matter what was chosen. */
.dp-coa__badge,
.dp-coa__chip {
  border: 1px solid var(--dpx-border-a414676p18, rgba(46, 36, 30, .18));
  border-radius: var(--dp-r-pill);
  background: var(--dp-surface);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta), background-color .16s var(--dp-ease-cta);
}
.dp-coa__badge {
  padding: 3px var(--dp-s-4);
  font-size: 11px;
  font-weight: var(--dp-fw-medium);
  letter-spacing: -.1px;
  color: var(--dpx-fg-878787, #878787);
}
.dp-coa__badge:hover,
.dp-coa__chip:hover { border-color: var(--dpx-border-a1126255p45, rgba(220, 73, 32, .45)); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-coa__badge:focus-visible,
.dp-coa__chip:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-coa__badge.is-active {
  border-color: var(--dpx-border-a1126255p35, rgba(220, 73, 32, .35));
  background: var(--dpx-bg-a1126255p06, rgba(220, 73, 32, .06));
  color: var(--dpx-fg-blue, var(--dp-blue));
}

.dp-coa__body {
  display: grid;
  grid-template-columns: 63px 294px 363px 332px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: var(--dp-s-5);
}

.dp-coa__thumb {
  width: 56px; height: 56px;
  border-radius: var(--dp-r-4xs);
  background: var(--dp-surface);
  overflow: hidden;
}
.dp-coa__thumb img { width: 100%; height: 100%; object-fit: contain; }

.dp-coa__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-coa__label {
  font-size: 10px;
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.1px;
  color: var(--dp-ink-50);
}
.dp-coa__name {
  font-size: var(--dp-fs-md);          /* 15, not 16 */
  font-weight: var(--dp-fw-bold);      /* 700, not 600 */
  line-height: 20px;
  letter-spacing: 0;                   /* the one place DP does NOT track in */
  color: var(--dp-ink);
}
.dp-coa__name:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }

.dp-coa__chips, .dp-coa__lots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Same as the badges: the CHOSEN dose is blue, the others sit back. Also .is-active, not
   :first-child — these pick which dose's lots are listed. */
.dp-coa__chip {
  padding: 3px var(--dp-s-4);
  font-size: 11px;
  font-weight: var(--dp-fw-medium);
  letter-spacing: -.2px;
  color: var(--dpx-fg-878787, #878787);
}
.dp-coa__chip.is-active {
  border-color: var(--dpx-border-a1126255p35, rgba(220, 73, 32, .35));
  color: var(--dpx-fg-blue, var(--dp-blue));
}

/* Each lot is a LINK to its certificate PDF, opening in a new tab. */
.dp-coa__lot {
  padding: 5px var(--dp-s-6);
  border-radius: var(--dp-r-pill);
  background: var(--dp-blue);
  color: var(--dp-on-dark);
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-medium);
  line-height: 14.4px;
  letter-spacing: -.2px;
  white-space: nowrap;
  transition: filter .16s var(--dp-ease-cta);
}
.dp-coa__lot:hover { filter: brightness(1.08); color: var(--dp-on-dark); }
.dp-coa__lot:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-coa__lot[hidden] { display: none; }

.dp-coa__empty { font-size: var(--dp-fs-sm); color: var(--dp-muted); letter-spacing: -.2px; }
.dp-coa__empty[hidden] { display: none; }

.dp-coa__field--dose .dp-coa__label { font-size: 11px; font-weight: var(--dp-fw-medium); }

/* A button now — it expands this row's lot list in place rather than navigating away. */
.dp-coa__all {
  justify-self: end;
  padding: 5px var(--dp-s-6);
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-pill);
  background: var(--dp-surface);
  font-family: inherit;
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.2px;
  color: var(--dpx-fg-999, #999);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
.dp-coa__all:hover { border-color: var(--dpx-border-a1126255p45, rgba(220, 73, 32, .45)); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-coa__all:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-coa__all[hidden] { display: none; }

.dp-coa__none {
  margin-top: var(--dp-s-10);
  font-size: var(--dp-fs-base);
  color: var(--dp-ink-50);
}
.dp-coa__none[hidden] { display: none; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1439px) {
  .dp-coa__body { grid-template-columns: 63px minmax(140px, 1.1fr) minmax(110px, 1.2fr) minmax(180px, 1.2fr) auto; }
  .dp-coa__row { padding-inline: var(--dp-s-9); }
}
@media (max-width: 1199px) {
  .dp-coa__body { grid-template-columns: 63px minmax(140px, 1fr) auto; row-gap: var(--dp-s-6); column-gap: var(--dp-s-7); }
  .dp-coa__field--lots { grid-column: 1 / -1; }
  .dp-coa__all { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 809px) {
  .dp-coa { padding-top: var(--dp-s-9); }
  .dp-coa__title { font-size: 26px; line-height: 30px; letter-spacing: -.8px; }
  .dp-coa__sub { font-size: var(--dp-fs-base); }
  .dp-coa__bar { flex-direction: column; align-items: stretch; gap: var(--dp-s-5); }
  .dp-coa__validate { justify-content: center; }
  .dp-coa__body { grid-template-columns: 48px minmax(0, 1fr); }
  .dp-coa__thumb { width: 48px; height: 48px; }
  .dp-coa__field--dose,
  .dp-coa__field--lots,
  .dp-coa__all { grid-column: 1 / -1; }
}

/* ===========================================================================
   Certificate viewer.

   A certificate is a reference document, not a destination — sending someone to a raw PDF tab
   loses the list they were searching and, on a phone, often hands them a download rather than a
   page. This shows it in place, over the row it came from.

   The header carries the lot, the TEST and the dose. That last part is not decoration: a lot
   usually has both a purity and an endotoxin certificate under the same number, so the type
   toggle changes the document while leaving the visible lot numbers alone.
   =========================================================================== */
.dp-lb {
  position: fixed;
  inset: 0;
  z-index: 1300;                 /* above the drawer (1000) and the card picker (1200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dp-s-9);
}
.dp-lb[hidden] { display: none; }

.dp-lb__scrim {
  position: absolute; inset: 0;
  background: var(--dpx-bg-a414676p55, rgba(46, 36, 30, .55));
  opacity: 0;
  transition: opacity .22s var(--dp-ease-cta);
  /* Every popup blurs the page behind it, like the picker and mobile menu. */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.dp-lb.is-open .dp-lb__scrim { opacity: 1; }

.dp-lb__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  height: min(88vh, 1100px);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
  box-shadow: 0 30px 70px var(--dpx-shadow-a414676p3, rgba(46, 36, 30, .3));
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .22s var(--dp-ease-cta), transform .22s var(--dp-ease-cta);
}
.dp-lb.is-open .dp-lb__panel { opacity: 1; transform: none; }
.dp-lb__panel:focus { outline: none; }

.dp-lb__head {
  display: flex;
  align-items: center;
  gap: var(--dp-s-5);
  padding: var(--dp-s-6) var(--dp-s-7);
  border-bottom: 1px solid var(--dp-hair-panel);
}
.dp-lb__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.dp-lb__title {
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  letter-spacing: -.32px; color: var(--dp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-lb__meta { font-size: var(--dp-fs-sm); color: var(--dp-muted); letter-spacing: -.2px; }

.dp-lb__act {
  flex: 0 0 auto;
  padding: 6px var(--dp-s-6);
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-pill);
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium);
  letter-spacing: -.2px; color: var(--dp-ink);
  white-space: nowrap;
  transition: border-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
.dp-lb__act:hover { border-color: var(--dpx-border-a1126255p45, rgba(220, 73, 32, .45)); color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-lb__act:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }

.dp-lb__x {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--dp-ink-50);
  cursor: pointer;
  transition: background-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
.dp-lb__x:hover { background: var(--dp-surface-card); color: var(--dp-ink); }
.dp-lb__x:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }

.dp-lb__body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--dp-surface-card); }
.dp-lb__frame { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
/* Sits UNDER the frame rather than being toggled: a browser that cannot render the PDF leaves
   the iframe transparent and this shows through, with no capability sniffing to get wrong. */
.dp-lb__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--dp-s-9);
  font-size: var(--dp-fs-base); color: var(--dp-muted); text-align: center;
}

@media (max-width: 809px) {
  /* Still a floating card, not a takeover: the blurred page stays visible
     around it on phones and fold widths alike. */
  .dp-lb { padding: 14px; }
  .dp-lb__panel { width: 100%; height: min(86vh, 900px); height: min(86dvh, 900px); border-radius: var(--dp-r-2xs); }
  /* Two rows: the title with the close button at its right, then the actions. The close
     control belongs beside what it closes — wrapping it to the head of the action row put an
     X in front of "Open in a new tab", which reads as cancelling that rather than the panel. */
  .dp-lb__head { flex-wrap: wrap; gap: var(--dp-s-3) var(--dp-s-5); }
  .dp-lb__txt { flex: 1 1 60%; order: -2; margin-right: 0; }
  .dp-lb__x { order: -1; }
  .dp-lb__act { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-lb__scrim, .dp-lb__panel { transition: none; }
}

/* --- Buy bar inside the certificate viewer --------------------------------
   The sticky add-to-cart's language, brought to the certificate: name and shipping on the
   left, the size and pack controls in the middle, price and button on the right. Outlined
   chips rather than the sticky bar's pill-in-pill segment, so the controls read the same as
   the ones on the product page the visitor may have just come from. */
.dp-lb__buy {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: var(--dp-s-5) var(--dp-s-7);
  padding: var(--dp-s-6) var(--dp-s-7);
  border-top: 1px solid var(--dp-hair-panel);
  background: var(--dp-surface-alt);
}
.dp-lb__buy[hidden] { display: none; }

.dp-lb__buyThumb {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--dp-r-4xs);
  background: var(--dp-surface);
  overflow: hidden;
}
.dp-lb__buyThumb img { width: 100%; height: 100%; object-fit: contain; }

.dp-lb__buyTxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dp-lb__buyName {
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  letter-spacing: -.32px; color: var(--dp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-lb__buyName:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-lb__buyShips { font-size: var(--dp-fs-sm); color: var(--dp-muted); letter-spacing: -.2px; }

.dp-lb__opts { display: flex; align-items: center; gap: var(--dp-s-7); flex-wrap: wrap; }
.dp-lb__opt { display: flex; flex-direction: column; gap: 4px; }
.dp-lb__optLabel { font-size: 10px; font-weight: var(--dp-fw-semi); letter-spacing: -.1px; color: var(--dp-ink-50); }
.dp-lb__optChips { display: flex; gap: 6px; flex-wrap: wrap; }
/* The Fill slider row (built by coa.js; the slider itself is styled by picker.css). */
.dp-lb__opt--fill { flex: 1 1 100%; max-width: 440px; }
.dp-lb__opt--fill .dp-fill { width: 100%; }

/* Same outlined chip as the product page: 2px, radius 8, blue when chosen. */
.dp-lb__chip {
  height: 30px;
  padding: 0 var(--dp-s-6);
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD);
  border-radius: 8px;
  background: var(--dp-surface);
  font-family: inherit;
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-medium);
  letter-spacing: -.2px;
  color: var(--dp-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
.dp-lb__chip:hover { border-color: var(--dpx-border-a1126255p5, rgba(220, 73, 32, .5)); }
.dp-lb__chip:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-lb__chip.is-active { border-color: var(--dpx-fg-blue, var(--dp-blue)); color: var(--dpx-fg-blue, var(--dp-blue)); cursor: default; }

.dp-lb__buyRight { display: flex; align-items: center; gap: var(--dp-s-6); }
.dp-lb__price {
  font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi);
  letter-spacing: -.4px; color: var(--dp-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dp-lb__add {
  height: 42px;
  padding: 0 var(--dp-s-9);
  border: 0; border-radius: var(--dp-r-2xl);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-family: inherit;
  font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi);
  letter-spacing: -.28px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dp-t-cta) var(--dp-ease-cta), opacity .2s linear;
}
.dp-lb__add:hover:not(:disabled) { background: var(--dpx-bg-ink, var(--dp-ink)); }
.dp-lb__add:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-lb__add:disabled { background: var(--dp-surface-mute); color: var(--dp-muted); cursor: not-allowed; }
.dp-lb__add.is-busy { opacity: .6; pointer-events: none; }

.dp-lb__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--dp-fs-sm);
  color: var(--dp-alert);
}
.dp-lb__note:empty { display: none; }

@media (max-width: 809px) {
  /* Stacked, and the button goes full width — the bar is the primary action down here. */
  .dp-lb__buy { grid-template-columns: 44px minmax(0, 1fr); gap: var(--dp-s-5); }
  .dp-lb__opts { grid-column: 1 / -1; gap: var(--dp-s-6); }
  .dp-lb__buyRight { grid-column: 1 / -1; justify-content: space-between; }
  .dp-lb__add { flex: 1 1 auto; }
  /* The viewer is full-screen on a phone, so the certificate keeps whatever is left. */
  .dp-lb__body { min-height: 200px; }
}

/* ===========================================================================
   All-lots panel.

   Sits BELOW the certificate viewer (1250 against 1300) so opening a document from here leaves
   the list behind it — closing the certificate returns to the batch history rather than to the
   top of the page.
   =========================================================================== */
.dp-lots {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dp-s-9);
}
.dp-lots[hidden] { display: none; }

.dp-lots__scrim {
  position: absolute; inset: 0;
  background: var(--dpx-bg-a414676p45, rgba(46, 36, 30, .45));
  opacity: 0;
  transition: opacity .22s var(--dp-ease-cta);
  /* Every popup blurs the page behind it, like the picker and mobile menu. */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.dp-lots.is-open .dp-lots__scrim { opacity: 1; }

.dp-lots__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(80vh, 860px);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
  box-shadow: 0 26px 60px var(--dpx-shadow-a414676p26, rgba(46, 36, 30, .26));
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .22s var(--dp-ease-cta), transform .22s var(--dp-ease-cta);
}
.dp-lots.is-open .dp-lots__panel { opacity: 1; transform: none; }
.dp-lots__panel:focus { outline: none; }

.dp-lots__head {
  display: flex; align-items: center; gap: var(--dp-s-5);
  padding: var(--dp-s-7);
  border-bottom: 1px solid var(--dp-hair-panel);
}
.dp-lots__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.dp-lots__title {
  font-size: var(--dp-fs-h4); font-weight: var(--dp-fw-semi);
  letter-spacing: -.5px; color: var(--dp-ink);
}
.dp-lots__meta { font-size: var(--dp-fs-sm); color: var(--dp-muted); letter-spacing: -.2px; }
.dp-lots__x {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--dp-ink-50);
  cursor: pointer;
  transition: background-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
.dp-lots__x:hover { background: var(--dp-surface-card); color: var(--dp-ink); }
.dp-lots__x:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }

.dp-lots__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--dp-s-5) var(--dp-s-7) var(--dp-s-7); }

.dp-lots__group + .dp-lots__group { margin-top: var(--dp-s-7); }
/* Sticky so the dose stays legible while scrolling a long batch history. */
.dp-lots__dose {
  position: sticky; top: 0;
  z-index: 1;
  display: flex; align-items: baseline; gap: var(--dp-s-4);
  margin: 0;
  padding: var(--dp-s-4) 0;
  background: var(--dp-surface);
  font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi);
  letter-spacing: -.28px; color: var(--dp-ink);
}
.dp-lots__count { font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-regular); color: var(--dp-muted); }

.dp-lots__list { list-style: none; margin: 0; padding: 0; display: grid; }
.dp-lots__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s-5);
  padding: var(--dp-s-4) 0;
  border-top: 1px solid var(--dp-hair-row);
}
.dp-lots__lot {
  font-size: var(--dp-fs-base); font-weight: var(--dp-fw-medium);
  letter-spacing: -.28px; color: var(--dp-ink);
  font-variant-numeric: tabular-nums;
}
.dp-lots__certs { display: flex; gap: 6px; flex-wrap: wrap; }

.dp-lots__cert {
  padding: 5px var(--dp-s-6);
  border: 0; border-radius: var(--dp-r-pill);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-family: inherit;
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium);
  letter-spacing: -.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .16s var(--dp-ease-cta);
}
.dp-lots__cert:hover { filter: brightness(1.08); }
.dp-lots__cert:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
/* A lot without one of the two tests: shown, but plainly not a control. */
.dp-lots__none {
  padding: 5px var(--dp-s-6);
  border: 1px dashed var(--dp-hair-row);
  border-radius: var(--dp-r-pill);
  font-size: var(--dp-fs-sm);
  letter-spacing: -.2px;
  color: var(--dp-muted);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .dp-lots { padding: 0; align-items: flex-end; }
  .dp-lots__panel { width: 100%; max-height: 88vh; border-radius: var(--dp-r-2xs) var(--dp-r-2xs) 0 0; }
  .dp-lots__row { flex-direction: column; align-items: flex-start; gap: var(--dp-s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-lots__scrim, .dp-lots__panel { transition: none; }
}

/* --- Quantity tiers in the certificate buy bar ----------------------------
   The same 1/2/3 ladder the product page offers. Someone who has just read the certificate
   for a lot is at the point of deciding how much to buy, and sending them to the product
   page to find the bundle price would undo the reason this bar exists.

   The chip keeps .dp-lb__chip so it inherits the border, radius and active state of the
   size and pack chips beside it — one visual language for "a thing you tap to choose" —
   and only adds the internal stacking the extra two lines need. */
.dp-lb__qtyChip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  height: auto; min-height: 44px;
  padding: var(--dp-s-2) var(--dp-s-5);
  line-height: 1.15;
}
.dp-lb__qtyN { font-size: 10px; font-weight: var(--dp-fw-medium); color: var(--dp-ink-50); }
.dp-lb__qtyChip.is-active .dp-lb__qtyN { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-lb__qtyP { font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-semi); letter-spacing: -.2px; }
.dp-lb__qtyS { font-size: 9px; font-weight: var(--dp-fw-semi); color: var(--dpx-fg-blue, var(--dp-blue)); }

@media (max-width: 809px) {
  /* The bar is already tight on a phone; the tiers wrap onto their own line rather than
     squeezing the size chips down beside them. */
  .dp-lb__opt--qty { width: 100%; }
  .dp-lb__qtyChip { flex: 1 1 0; padding-inline: var(--dp-s-3); }
}

/* --- Quantity stepper in the certificate buy bar --------------------------
   Same reach-anything role as the picker's: the tier chips beside it are three fixed jumps. */
.dp-lb__step {
  display: inline-flex; align-items: center;
  height: 44px;
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD); border-radius: 8px;
  background: var(--dp-surface); overflow: hidden;
}
.dp-lb__stepBtn {
  width: 34px; height: 100%;
  border: 0; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: var(--dp-fw-medium); line-height: 1;
  color: var(--dp-ink); cursor: pointer;
  transition: background-color .16s var(--dp-ease-cta), color .16s var(--dp-ease-cta);
}
@media (hover: hover) {
  .dp-lb__stepBtn:hover { background: var(--dpx-bg-eaf1fc, #FAEFEC); color: var(--dpx-fg-blue, var(--dp-blue)); }
}
.dp-lb__stepBtn:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -2px; }
.dp-lb__stepN {
  min-width: 34px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-inline: 2px solid var(--dpx-border-c3c5cd, #C3C5CD);
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-semi);
  font-variant-numeric: tabular-nums;
}
/* The stepper is the last item in the chip group, so it needs the same wrap behaviour. */
.dp-lb__optChips .dp-lb__step { flex: 0 0 auto; }

/* ============================================================================
   Spec-sheet register (2026-11-02) — the viewer's buy footer matches the PDP:
   mono tabular figures, uppercase micro-labels.
   ============================================================================ */
.dp-lb__optLabel {
  font-family: var(--dp-mono);
  font-size: 9.5px; line-height: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dp-muted);
}
.dp-lb__qtyN { font-family: var(--dp-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.dp-lb__qtyP { font-family: var(--dp-mono); font-variant-numeric: tabular-nums; font-weight: var(--dp-fw-bold); letter-spacing: -.2px; }
.dp-lb__price { font-family: var(--dp-mono); font-variant-numeric: tabular-nums; font-weight: var(--dp-fw-bold); letter-spacing: -.2px; }