/* Precision Labs — single product page.
   Builds on base.css: .pl-wrap, .pl-panel, .pl-info, .pl-btn, .pl-chip,
   .pl-price and .pl-price--lg are used as they come and are never redefined
   here. Every colour is a token; every corner stays square.

   The image plate in the design is #DDE2E0, which is not one of the handoff's
   tokens. --pl-bd-light (#DCE0DE) is the token that colour rounds to, so it is
   used rather than introducing a value outside the palette. */

/* ── page grid ──────────────────────────────────── */
.pl-pdp__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  /* padding-block, not `padding: 34px 0 50px` — this element also carries
     .pl-wrap, and the shorthand would zero its horizontal gutter, pulling the
     whole product page 44px left of every other band. */
  padding-block: 34px 50px;
  align-items: start;
}

/* ── gallery ────────────────────────────────────── */
.pl-pdp__gallery { display: block; }

.pl-pdp__main {
  height: 500px;
  background: var(--pl-bd-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.pl-pdp__mainimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pl-pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  list-style: none;
}
.pl-pdp__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 104px;
  padding: 0;
  overflow: hidden;
  background: var(--pl-bd-light);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: border-color .16s;
}
.pl-pdp__thumb:hover { border-color: var(--pl-bd-strong); }
.pl-pdp__thumb.is-on { border-color: var(--pl-navy); }
.pl-pdp__thumbimg { width: 100%; height: 100%; object-fit: contain; }

/* ── summary column ─────────────────────────────── */
.pl-pdp__summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pl-pdp__eyebrow { letter-spacing: .22em; font-size: 11px; }

.pl-pdp__title {
  margin: 0;
  font-size: 52px;
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
}

.pl-pdp__desc {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--pl-t2);
  text-wrap: pretty;
}
.pl-pdp__desc p { margin: 0 0 .7em; }
.pl-pdp__desc p:last-child { margin-bottom: 0; }

/* ── "what it's studied for" ────────────────────── */
.pl-panel.pl-pdp__studied {
  padding: 20px;
  border-color: var(--pl-bd-light);
}
.pl-pdp__studied-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pl-navy);
}
.pl-pdp__studied-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pl-t2);
}

/* The research-use-only line. Never hidden, never smaller than this. */
.pl-pdp__disclaimer {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pl-faint);
  text-wrap: pretty;
}

/* ── bundle contents ────────────────────────────── */
.pl-pdp__box-label { margin: 0 0 9px; }
.pl-pdp__box-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--pl-t2);
}
.pl-pdp__box-list a { color: var(--pl-navy); font-weight: 600; }
.pl-pdp__box-list a:hover { color: var(--pl-ink); }
.pl-pdp__box-size,
.pl-pdp__box-qty { color: var(--pl-muted); }

/* ── size selector ──────────────────────────────── */
.pl-pdp__sizes-label { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .16em; }
.pl-pdp__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 9px;
}
.pl-pdp__size {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px;
  text-align: center;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .16s;
}
.pl-pdp__size:hover { border-color: var(--pl-navy); }
.pl-pdp__size.is-on { border-color: var(--pl-navy); }
.pl-pdp__size[disabled],
.pl-pdp__size.is-out { cursor: not-allowed; color: var(--pl-faint); }
.pl-pdp__size[disabled]:hover { border-color: var(--pl-bd-strong); }

.pl-pdp__size-name { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.pl-pdp__size-price { font-size: 12px; color: var(--pl-muted); }
.pl-pdp__size.is-on .pl-pdp__size-price { color: var(--pl-navy); }
.pl-pdp__size-best { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── quantity ─────────────────────────────────────────────────────────────
 *
 * A real, typeable field. The tier cards write to this same input, so there is
 * exactly one quantity in the form and "buy 7" is reachable — before this,
 * `quantity` was a hidden input and only the tier minimums could be chosen. */
/* Quantity and Add to cart share one row: the stepper modifies the action next
   to it rather than being a step above it. The button takes the remaining
   width; the stepper is fixed and never shrinks. */
.pl-buyrow { display: flex; align-items: stretch; gap: 10px; }
.pl-buyrow .pl-pdp__add { flex: 1 1 auto; min-width: 0; }

.pl-qty {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  border: 1px solid var(--pl-bd-strong);
  background: var(--pl-surface);
}
.pl-qty__btn {
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--pl-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.pl-qty__btn:hover { background: var(--pl-surface-alt); }
.pl-qty__btn:disabled { color: var(--pl-faint); cursor: not-allowed; background: none; }
.pl-qty__input {
  width: 58px;
  min-height: 44px;
  border: 0;
  border-left: 1px solid var(--pl-bd);
  border-right: 1px solid var(--pl-bd);
  background: none;
  text-align: center;
  font: inherit;
  /* 16px so iOS does not zoom the viewport when the field takes focus. */
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pl-ink);
  -moz-appearance: textfield;
}
/* The native spinners duplicate the buttons either side and crowd a 58px
   field; the buttons are the affordance. */
.pl-qty__input::-webkit-outer-spin-button,
.pl-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-qty__input:focus-visible { outline: 2px solid var(--pl-navy); outline-offset: -2px; }

/* Struck-through original, when a simple product is discounted. Order and
   spacing come from .pl-pdp__pricegroup; this only sets how it reads. */
.pl-price__was {
  font-size: 17px;
  font-weight: 500;
  color: var(--pl-faint);
  text-decoration: line-through;
  white-space: nowrap;
}

.pl-pdp__guestnote {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pl-muted);
}

/* ── volume tiers ─────────────────────────────────────────────────────────
 *
 * Markup: template-parts/product/tiers.php. The precision-labs-manager panel
 * that used to render here is opted out in inc/compat.php — it priced its cards
 * off the variable parent's stale _price meta and its JS drove selectors this
 * theme does not emit, so the cards showed pre-sale numbers and did nothing when
 * clicked. The .plr-tier-* overrides that used to live here went with it.
 */
.pl-tiers { margin: 0 0 18px; }
.pl-tiers__label { display: block; margin: 0 0 10px; }

.pl-tiers__list { display: flex; flex-direction: column; gap: 8px; }

.pl-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 13px 16px;
  text-align: left;
  font: inherit;
  color: var(--pl-ink);
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.pl-tier:hover { border-color: var(--pl-bd-strong); }
.pl-tier.is-on {
  border-color: var(--pl-navy);
  box-shadow: inset 0 0 0 1px var(--pl-navy);
}
.pl-tier:focus-visible { outline: 2px solid var(--pl-navy); outline-offset: 2px; }

.pl-tier__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-tier__row--sub { font-size: 12.5px; }

.pl-tier__qty  { font-size: 15px; font-weight: 700; }
.pl-tier__unit { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-tier__save { color: var(--pl-navy); font-weight: 700; }
.pl-tier__vs   { color: var(--pl-muted); }

/* The single-vial card is the way back down, not an offer — so it does not get
   the navy "you are saving" treatment. */
.pl-tier[data-pl-tier-rate="0"] .pl-tier__save { color: var(--pl-muted); font-weight: 500; }

.pl-tier__badge {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 3px 9px;
  background: var(--pl-navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pl-tiers__total {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--pl-muted);
}
.pl-tiers__total strong { color: var(--pl-ink); font-variant-numeric: tabular-nums; }

.pl-pdp__size-out {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-faint);
}

/* ── buy box ────────────────────────────────────── */
.pl-panel.pl-pdp__buy {
  padding: 22px;
  border-color: var(--pl-bd-light);
}
.pl-pdp__buyhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.pl-pdp__stockline {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pl-navy);
}
.pl-pdp__stockline.is-out { color: var(--pl-muted); }

/* Struck original and live price as one unit, baseline-aligned so the two
   numbers sit on the same line rather than the small one floating. */
.pl-pdp__pricegroup { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }

.pl-pdp__form { margin: 0; }
/* The margin belongs to the row now, not the button — the button is a flex
   item inside it and a margin here would offset it from the stepper. */
.pl-buyrow { margin-top: 16px; }
.pl-pdp__add { padding: 17px 26px; }
.pl-pdp__guest {
  margin-top: 10px;
  padding: 16px 26px;
  font-size: 11.5px;
  letter-spacing: .14em;
  font-weight: 600;
}
.pl-pdp__add[disabled] { cursor: not-allowed; filter: none; opacity: .55; }

.pl-pdp__unavailable {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pl-muted);
}

/* add-on row */
.pl-pdp__addon {
  margin-top: 16px;
  padding: 14px;
  background: var(--pl-chip);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pl-pdp__addon-thumb {
  flex: none;
  width: 50px;
  height: 50px;
  background: var(--pl-bd-light);
  overflow: hidden;
}
.pl-pdp__addon-img { width: 100%; height: 100%; object-fit: contain; }
.pl-pdp__addon-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pl-t3);
}
.pl-pdp__addon-price { color: var(--pl-navy); font-weight: 600; white-space: nowrap; }
.pl-pdp__addon-add { flex: none; }

/* ── lab panel + accordions ─────────────────────── */
.pl-pdp__stack { border-top: 1px solid var(--pl-bd-light); }

.pl-info.pl-pdp__lab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  flex-wrap: wrap;
}
.pl-pdp__lab-txt { flex: 1 1 240px; min-width: 0; }
.pl-pdp__lab-title { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.pl-pdp__lab-sum { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--pl-t2); }
.pl-pdp__lab-btn { flex: none; white-space: nowrap; }

.pl-acc { border-bottom: 1px solid var(--pl-bd-light); }
.pl-acc > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 2px;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.pl-acc > summary::-webkit-details-marker { display: none; }
.pl-acc > summary::marker { content: ''; }
.pl-acc > summary:hover { color: var(--pl-navy); }
.pl-acc__mark {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--pl-muted);
  transition: transform .18s;
}
.pl-acc[open] > summary .pl-acc__mark { transform: rotate(45deg); }

.pl-acc__body {
  padding: 0 2px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pl-t2);
}
.pl-pdp__notes,
.pl-pdp__studies {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-pdp__notes li { padding-left: 14px; position: relative; }
.pl-pdp__notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 1px;
  background: var(--pl-navy);
}
.pl-pdp__studies .pl-link { font-size: 14px; align-items: baseline; }
.pl-pdp__prose p { margin: 0 0 .8em; }
.pl-pdp__prose p:last-child { margin-bottom: 0; }
.pl-pdp__prose a { color: var(--pl-navy); font-weight: 600; }
.pl-pdp__prose ul, .pl-pdp__prose ol { padding-left: 18px; margin: 0 0 .8em; }
.pl-pdp__prose li { list-style: disc; }

/* ── cross-sell band ────────────────────────────── */
.pl-xsell {
  background: var(--pl-surface);
  border-top: 1px solid var(--pl-bd-light);
}
.pl-xsell__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 44px;
  align-items: center;
  /* padding-block: this element also carries .pl-wrap, and `padding: 40px 0`
     would delete that class's horizontal gutter — which is what put the
     "Complete the protocol" band 44px left of the rest of the product page. */
  padding-block: 40px;
}
.pl-xsell__h { margin: 12px 0 0; font-size: 30px; line-height: 1.12; }
.pl-xsell__sub {
  margin: 12px 0 0;
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}
.pl-xsell__media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.pl-xsell__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pl-xsell__thumb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  background: var(--pl-bd-light);
  overflow: hidden;
}
.pl-xsell__img { width: 100%; height: 100%; object-fit: contain; }
.pl-xsell__cta { flex: none; }

/* ── responsive ─────────────────────────────────── */
@media (max-width: 1199px) {
  .pl-pdp__cols { gap: 32px; }
  .pl-pdp__main { height: 420px; }
  .pl-pdp__title { font-size: 42px; }
  .pl-xsell__inner { gap: 32px; }
  .pl-xsell__h { font-size: 26px; }
}

@media (max-width: 991px) {
  /* Single column: gallery first, buy box below it, as specified. */
  .pl-pdp__cols { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .pl-xsell__inner { grid-template-columns: minmax(0, 1fr); }
  .pl-xsell__media { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .pl-pdp__cols { padding-top: 24px; }
  .pl-pdp__main { height: 320px; }
  .pl-pdp__thumb { height: 84px; }
  .pl-pdp__title { font-size: 32px; }
  .pl-pdp__desc { font-size: 15.5px; }
  .pl-pdp__sizes { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

  /* Hit targets stay at 44px or better on touch. */
  .pl-pdp__add,
  .pl-pdp__guest { padding: 18px 20px; }
  .pl-acc > summary { padding: 18px 2px; }

  .pl-pdp__addon { flex-wrap: wrap; }
  .pl-pdp__addon-txt { flex-basis: 100%; order: 3; }

  .pl-xsell__media { justify-content: space-between; }
  .pl-xsell__thumb { width: 104px; height: 104px; }
  .pl-xsell__cta { width: 100%; }
}

/* The research-use notice when it stands alone (no studied-for lines on file).
   It must still read as a deliberate legal statement rather than orphaned
   small print, so it keeps the panel's border and inset. */
.pl-pdp__disclaimer--solo {
  margin: 0;
  padding: 16px 18px;
  background: var(--pl-info-bg);
  border: 1px solid var(--pl-info-bd);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pl-t2);
}
/* ── left column: gallery + reference accordions ────
   Single-image products left this column ending level with the size selector
   while the right ran on for another two screens. The accordions now live here
   so the space carries content rather than air. */
.pl-pdp__left {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.pl-pdp__left .pl-pdp__accordions { margin-top: 0; }

/* On a short right column the reverse would happen, so the left column sticks
   rather than stretching — the image stays with the buy box while the reader
   scrolls the accordions. Only above the tablet breakpoint, where there are
   genuinely two columns. */
@media (min-width: 1000px) {
  .pl-pdp__left { position: sticky; top: 22px; }
}

@media (max-width: 999px) {
  .pl-pdp__cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pl-pdp__left { position: static; }
}