/* Product detail page styles */

.pd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.pd-img {
  aspect-ratio: 1/1;
  border-radius: 20px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pd-vial {
  width: 35%;
  height: 72%;
  background: linear-gradient(to bottom, #f4f4f4, #e5e5e5 15%, #fafafa 18%, #fff 100%);
  border: 1px solid rgba(13,15,26,.08);
  border-radius: 12px 12px 26px 26px;
  position: relative;
  box-shadow: 0 20px 50px rgba(13,15,26,.15);
}
.pd-vial::before {
  content:""; position: absolute; top: -14px; left: 20%; right: 20%; height: 16px;
  background: linear-gradient(to bottom, #c4c4c4, #8a8a8a);
  border-radius: 3px;
}
.pd-vial::after {
  content:""; position: absolute; left: 12%; right: 12%; top: 18%; bottom: 8%;
  background: rgba(255,255,255,.25);
  border-radius: 4px;
}
.pd-vial-label {
  position: absolute; inset: 22% 12% 12%;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 6px; padding: 12px 8px;
  z-index: 1;
}
.pd-brand { font-size: 12px; font-weight: 600; color: var(--ink); }
.pd-product { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.pd-variant { display:inline-block; align-self:flex-start; font-size: 9px; background: var(--ink); color: #fff; padding: 2px 8px; border-radius: 100px; margin-top: 2px; }
.pd-purity { font-size: 9px; color: var(--muted); margin-top: auto; }
.pd-ruo { font-size: 8px; color: var(--muted); }

.pd-info {
  padding: 4px 0;
}
.pd-subtitle {
  font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 4px;
}
.pd-title {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.05;
}
.pd-aliases { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-alias {
  font-size: 12px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 100px;
  color: var(--ink);
}
.pd-blurb {
  font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; max-width: 520px;
}
.pd-points {
  list-style: none; margin: 18px 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 14px; max-width: 540px;
}
.pd-pt { display: flex; align-items: center; gap: 14px; }
.pd-pt-ic { flex-shrink: 0; display: flex; line-height: 0; }
.pd-pt-text { font-size: 17px; color: var(--ink); line-height: 1.35; }

/* ===== Description + RUO + detail accordions (under the buy box) ===== */
.pd-details { margin-top: 26px; }
.pd-desc {
  font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0;
}
.pd-ruo-line {
  font-size: 15px; font-weight: 700; color: var(--ink); margin: 16px 0 6px;
}
.pd-acc { margin-top: 14px; border-top: 1px solid var(--border); }
.pd-acc-item { border-bottom: 1px solid var(--border); }
.pd-acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 17px 2px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); text-align: left;
}
.pd-acc-q:hover { color: var(--accent); }
.pd-acc-ic { flex-shrink: 0; display: flex; color: var(--muted); transition: transform .2s ease; }
.pd-acc-ic .pd-acc-v { transform-origin: center; transition: opacity .2s ease; }
.pd-acc-ic.on { transform: rotate(180deg); }
.pd-acc-ic.on .pd-acc-v { opacity: 0; }
.pd-acc-a {
  padding: 0 2px 18px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 620px;
}

.pd-buy {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.pd-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.pd-row label {
  font-weight: 500; font-size: 14px;
}
.pd-variants { display: flex; gap: 8px; }
.pd-var {
  padding: 10px 22px;
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; font-weight: 500;
  background: #fff;
  transition: all .15s ease;
}
.pd-var:hover { border-color: var(--ink); }
.pd-var.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pd-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 100px;
  padding: 4px;
  gap: 4px;
}
.pd-qty button {
  width: 32px; height: 32px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.pd-qty button:hover { background: var(--off); }
.pd-qty input {
  width: 44px; text-align: center; border: 0; background: none; font: inherit; font-weight: 500;
  -moz-appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-price { text-align: right; }
.pd-price .from { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pd-price .val { font-size: 28px; font-weight: 700; }

/* Dosage + Quantity wrapper (rows stack on desktop, side-by-side on mobile) */
.pd-priceline {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
  margin-bottom: 16px;
}
.pd-priceline .val { font-size: 28px; font-weight: 700; }
.pd-priceline .pd-price-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }

.pd-cta-row {
  display: flex; gap: 8px; margin-top: 12px; margin-bottom: 24px;
}
.pd-coa-chip {
  border: 1px solid var(--border); border-radius: 100px;
  padding: 0 20px; height: 56px;
  font-size: 13px; font-weight: 500;
}
.pd-coa-chip:hover { background: var(--off); }
.pd-add { flex: 1; height: 56px; }

.pd-badges {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--off);
  margin-bottom: 16px;
}
/* Country-specific shipping panel — sibling of .pd-badges, same treatment */
.pd-ship { border: 1px solid var(--border); border-radius: 12px; background: var(--off); margin-bottom: 16px; overflow: hidden; }
.pd-ship-hd { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.pd-ship-hd svg:first-child { flex-shrink: 0; }
.pd-ship-headtx { display: flex; flex-direction: column; min-width: 0; }
.pd-ship-t { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pd-ship-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pd-ship-chev { margin-left: auto; flex-shrink: 0; color: var(--muted); transition: transform .16s ease; }
.pd-ship.on .pd-ship-chev { transform: rotate(180deg); }
.pd-ship-bd { padding: 2px 14px 12px; }
.pd-ship-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.pd-ship-row:first-child { border-top: 0; }
.pd-ship-row svg { align-self: center; flex-shrink: 0; }
.pd-ship-c { font-size: 12.5px; color: var(--muted); }
.pd-ship-d { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pd-ship-p { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; white-space: nowrap; }
.pd-ship-p--free { color: var(--green); }
.pd-ship-row--fact .pd-ship-c { margin-right: auto; }

/* Delivery timeline: ordered · dispatched · delivered, as dates. Tokens only; logical properties so /ar/ mirrors itself. */
.pd-timeline { list-style: none; margin: 0; padding: 10px 14px 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 1px solid var(--border); position: relative; }
.pd-tl-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; padding-inline-end: 8px; }
.pd-tl-dot { width: 9px; height: 9px; border-radius: 100px; background: var(--border); border: 2px solid var(--off); box-shadow: 0 0 0 1px var(--border); margin-bottom: 3px; position: relative; z-index: 1; }
.pd-tl-step.is-now .pd-tl-dot { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pd-tl-step::after { content: ""; position: absolute; top: 4px; inset-inline-start: 12px; inset-inline-end: 0; height: 1px; background: var(--border); }
.pd-tl-step:last-child::after { display: none; }
.pd-tl-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* THE DATE IS THE ANSWER — it may never be clipped (round 4 task 2f). `white-space: nowrap` with an
   ellipsis truncated the DELIVERED value to "Fri 18 Sep to Mon 21 S…": the customer was shown the
   question and half the answer. It wraps instead; the row is a grid column that can grow a line. */
.pd-tl-d { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: normal; overflow-wrap: break-word; hyphens: none; }
.pd-tl-cutoff { margin: 0; padding: 4px 14px 12px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 640px) {
  .pd-tl-d { font-size: 12px; white-space: normal; }   /* unchanged: the phone always wrapped */
}
.pd-ship-row--fact .pd-ship-d { margin-left: 0; }
.pd-ship-row--x { align-items: flex-start; }
.pd-ship-row--x svg { align-self: flex-start; margin-top: 2px; }

/* Research kit — pre-checked-by-default transparency kit */
.pd-kit-why { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: -2px 0 10px; }
.pd-kit-item { cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.pd-kit-item:hover { border-color: var(--border-strong, #ccd2dd); }
.pd-kit-item.on:hover { border-color: var(--ink); }
.pd-kit-item.on:hover .pd-kit-check { opacity: .75; }
.pd-kit-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-kit-item.na { cursor: default; opacity: .55; }
.pd-kit-item.na:hover { border-color: var(--border); }
.pd-kit-na { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 100px; padding: 3px 8px; white-space: nowrap; }
.pd-kit-sum { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.pd-kit-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px; color: var(--muted); }
.pd-kit-sum-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-kit-sum-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 7px; font-size: 12.5px; }
.pd-kit-sum-total span { color: var(--ink); font-weight: 600; }
.pd-kit-sum-total b { font-weight: 700; }
.pd-add, .pd-add-total { white-space: nowrap; }

/* Consolidated delivery + guarantee block: 4 items in a 2×2 grid on desktop */
.pd-badges--quad { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.pd-badge { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.pd-badge svg { margin-top: 2px; flex-shrink: 0; }
.pd-badge-t { font-weight: 500; color: var(--ink); font-size: 12px; line-height: 1.3; }
.pd-badge-s { color: var(--muted); font-size: 11px; margin-top: 2px; }

.pd-pay {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  font-size: 12px; color: var(--muted);
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.pd-pay-ssl { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--accent); }
.pd-pay-ssl svg { stroke: var(--accent); }
/* (the "Reserve / Invoice / SEPA" chips are gone — a hardcoded method list; the row shows the marks the
 * config derives, or the SSL words alone: template-parts/components/secure-row.php, 15 Sep 2026) */

/* Section headings with icon */
.pd-secthd {
  display: flex; gap: 14px; align-items: center; margin-bottom: 28px;
}
.pd-ic {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* CoA cards */
.coa-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.coa-card {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 20px;
  position: relative;
}
.coa-latest {
  display: inline-block;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 100px;
  margin-bottom: 14px;
}
.coa-purity {
  color: var(--green);
  font-size: 44px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 10px;
}
.coa-purity span {
  color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em;
}
.coa-table {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 14px;
  margin-bottom: 4px;
}
.coa-table > div {
  display: flex; justify-content: space-between; font-size: 13px;
}
.coa-table span { color: var(--muted); }
.coa-table b { font-weight: 500; }

/* Compound info */
.ci-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.ci-card {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 28px;
}
.ci-head {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
}
.ci-head .eyebrow { margin: 0; }
.ci-table {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  background: var(--off); border-radius: 12px;
}
.ci-table > div {
  display: flex; justify-content: space-between; font-size: 13px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ci-table > div:last-child { border: 0; padding-bottom: 0; }
.ci-table span { color: var(--muted); }
.ci-table b { font-weight: 500; text-align: right; }

/* Merged Compound Information card: quick-stat strip on top, then a two-column
   Molecular Profile | Storage layout split by a vertical divider. */
.ci-merged .pd-quick { margin-bottom: 24px; }
.ci-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.ci-col { min-width: 0; }
.ci-col--storage { border-left: 1px solid var(--border); padding-left: 36px; }

.pd-chips { display: flex; flex-direction: column; gap: 6px; }
.pd-chip {
  padding: 7px 12px; background: var(--off); border-radius: 8px;
  font-size: 12px; font-weight: 500;
}
.storage-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
}
.storage-ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Sources */
.src-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.src-card {
  padding: 20px;
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.src-journal {
  font-size: 11px; font-weight: 600; color: var(--green);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.src-title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.src-meta {
  display: flex; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.src-auth {
  font-size: 12px; color: var(--muted); font-style: italic;
}
.src-link {
  font-size: 13px; color: var(--green); font-weight: 500; margin-top: auto;
}

/* RUO notice */
.ruo {
  background: linear-gradient(135deg, #fef2f2 0%, #fef9f2 100%);
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 28px 32px;
}
.ruo-head {
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
}
.ruo p {
  font-size: 13px; color: var(--ink); margin-bottom: 10px; line-height: 1.6;
}
.ruo p b { font-weight: 600; }
.ruo p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .pd-grid { grid-template-columns: 1fr; }
  .coa-grid { grid-template-columns: 1fr 1fr; }
  .ci-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .src-grid { grid-template-columns: 1fr 1fr; }
  .pd-badges { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pd-title { font-size: 36px; }
  .pd-row { grid-template-columns: 1fr; gap: 8px; }
  /* Dosage + Quantity on the same row */
  .pd-dq { display: flex; gap: 12px; align-items: flex-start; }
  .pd-dq .pd-row { flex: 1; margin-bottom: 12px !important; }
  .pd-priceline { margin-bottom: 14px; }
  .coa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .src-grid { grid-template-columns: 1fr; }

  /* Tighten the buy column so add-to-cart is reachable sooner */
  .pd-info { padding: 8px 0; }
  .pd-title { font-size: 30px !important; margin-bottom: 10px !important; }
  .pd-subtitle { margin-bottom: 4px; }
  .pd-points { gap: 11px; margin: 14px 0 14px !important; }
  .pd-pt { gap: 11px; }
  .pd-pt-ic svg { width: 30px; height: 30px; }
  .pd-pt-text { font-size: 14.5px; }
  .pd-details { margin-top: 20px; }
  .pd-desc { font-size: 14px; }
  .pd-ruo-line { font-size: 14px; }
  .pd-acc-q { font-size: 15px; padding: 15px 2px; }
  .pd-acc-a { font-size: 13.5px; padding-bottom: 15px; }
  .pd-aliases { margin-bottom: 12px !important; gap: 6px; }
  .pd-alias { padding: 6px 12px; font-size: 12.5px; }
  .pd-blurb {
    font-size: 13.5px; line-height: 1.5; margin-bottom: 16px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pd-buy { padding-top: 14px !important; }
  .pd-countdown {
    padding: 9px 11px !important; font-size: 12px !important; gap: 8px !important;
    margin-bottom: 10px !important; border-radius: 10px;
  }
  .pd-lot { padding: 10px 12px !important; gap: 6px !important; margin-bottom: 12px !important; border-radius: 10px; }
  .pd-lot-info { font-size: 12px; }
  .pd-lot-remaining { font-size: 10.5px; }
  .pd-row { margin-bottom: 10px !important; }
  .pd-row label { margin-bottom: 5px; font-size: 12.5px !important; }

  /* Smaller dosage pills */
  .pd-variants { gap: 7px; }
  .pd-var { padding: 8px 16px; font-size: 13px; border-radius: 10px; }

  /* Compact quantity stepper — fills column symmetrically */
  .pd-qty { display: flex; width: 100%; padding: 3px; gap: 2px; justify-content: space-between; box-sizing: border-box; }
  .pd-qty button { width: 34px; height: 34px; flex: 0 0 34px; font-size: 16px; }
  .pd-qty input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 14px; }

  /* Smaller price */
  .pd-price .val { font-size: 23px; }
  .pd-price-was { font-size: 12px; }

  /* Tighter active-lot bar */
  .pd-lot-label { font-size: 11px; }
  .pd-lot-num, .pd-lot-purity { font-size: 11.5px; }
  .pd-lot-bar { height: 5px; }
}

/* ===== Bundle / case vial cut-out visuals (all viewports) ===== */
.pd-tier-vis {
  display: flex; gap: 1px; align-items: flex-end; justify-content: center;
  height: 46px; width: auto; overflow: visible;
}
.pd-tier-vial-img {
  height: 46px; width: auto; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 2px 3px rgba(13,15,26,.16));
}
.pd-case-vials { position: relative; width: 70px; height: 44px; flex-shrink: 0; }
.pd-case-vial-img {
  position: absolute; bottom: 0; height: 44px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(13,15,26,.16));
}
.pd-quick { margin-bottom: 22px; }

/* =====================================================================
   MOBILE PDP — compact, less scroll, no big white gaps
   ===================================================================== */
@media (max-width: 640px) {
  /* Tighter section rhythm everywhere on the PDP */
  .pdp section { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* Smaller hero CARD on mobile (narrower → shorter) so title + points show; image still fills it */
  .pdp .pd-img { width: 66%; margin-left: auto; margin-right: auto; }
  .pdp .pd-secthd { margin-bottom: 16px; gap: 10px; }
  .pdp .pd-secthd h2 { font-size: 22px !important; }
  .pdp .pd-secthd p { font-size: 12.5px; }
  .pdp .pd-ic { width: 34px; height: 34px; border-radius: 9px; }
  .pdp .pd-ic svg { width: 16px; height: 16px; }

  /* Bundle tiers: 3 across, icon stacked over text */
  .pd-bundle { margin: 14px 0; }
  .pd-bundle-label, .pd-sub .pd-bundle-label { margin-bottom: 8px; }
  .pd-tier { flex-direction: column; gap: 5px; padding: 13px 5px 9px; text-align: center; border-radius: 11px; }
  .pd-tier-vis { height: 38px; }
  .pd-tier-vial-img { height: 38px; }
  .pd-tier-badge { font-size: 8px !important; padding: 2px 6px !important; top: -8px; }
  .pd-tier-text { align-items: center; }
  .pd-tier-label { font-size: 10.5px; }
  .pd-tier-off { font-size: 10.5px; }

  /* Purchase type: keep 2 across, compact column cards */
  .pd-sub { margin: 12px 0; }
  .pd-sub-grid { gap: 8px; }
  .pd-sub-opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 12px; border-radius: 11px; }
  .pd-sub-icon { width: 26px; height: 26px; }
  .pd-sub-name { font-size: 12.5px; gap: 6px; }
  .pd-sub-sub { font-size: 10.5px; }
  .pd-sub-pct { font-size: 9px; padding: 1px 6px; }

  /* CTA / badges compact */
  .pd-cta-row { margin-top: 10px; margin-bottom: 14px; }
  .pd-coa-chip { height: 50px; padding: 0 16px; }
  .pd-add { height: 50px; }
  .pd-badges { padding: 12px; margin-bottom: 12px; gap: 8px; }
  .pd-ship { margin-bottom: 12px; }
  .pd-ship-hd { padding: 11px 12px; }
  .pd-ship-bd { padding: 2px 12px 10px; }
  .pd-pay { margin-top: 12px; padding-top: 12px; }

  /* Quick facts strip */
  .pd-quick { margin-bottom: 16px; }
  .pd-quick-item { padding: 10px 12px; }

  /* CoA cards — 2 per row, compact */
  .coa-card { padding: 13px; border-radius: 13px; }
  .coa-latest { font-size: 8.5px; padding: 3px 8px; margin-bottom: 10px; }
  .coa-purity { font-size: 26px; margin-bottom: 10px; gap: 5px; }
  .coa-purity span { font-size: 8.5px; letter-spacing: .08em; }
  .coa-table { gap: 6px; padding-top: 10px; }
  .coa-table > div { font-size: 11px; }
  .coa-card .btn { height: 40px; font-size: 12.5px; margin-top: 10px !important; padding: 0 12px; }

  /* Compound information — merged card, compact */
  .ci-card { padding: 14px; border-radius: 12px; }
  .ci-cols { grid-template-columns: 1fr; gap: 16px; }
  .ci-col--storage { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 16px; }
  .ci-merged .pd-quick { margin-bottom: 16px; }
  .ci-head { margin-bottom: 6px; gap: 5px; }
  .ci-head .eyebrow { font-size: 9px !important; letter-spacing: .06em !important; }
  .ci-head svg { width: 13px; height: 13px; }
  .ci-card h3 { font-size: 14px !important; margin-bottom: 10px !important; }
  .ci-table { padding: 11px; gap: 7px; border-radius: 10px; }
  .ci-research { margin-top: 16px; padding-top: 14px; }
  .ci-research-p { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
  .ci-table > div { font-size: 10.5px; padding-bottom: 7px; gap: 6px; }
  .ci-table b { font-size: 10.5px; }
  .storage-row { padding: 9px 10px; font-size: 11px; gap: 8px; border-radius: 9px; }
  .storage-row svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Sources: two small cards per row */
  .src-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .src-card { padding: 12px; gap: 5px; border-radius: 10px; }
  .src-journal { font-size: 9.5px; }
  .src-title { font-size: 12px; line-height: 1.3; }
  .src-meta { font-size: 10px; }
  .src-auth { font-size: 10px; }
  .src-link { font-size: 11.5px; }

  /* Important research notice — smaller */
  .ruo { padding: 16px; border-radius: 12px; }
  .ruo-head { margin-bottom: 10px; }
  .ruo p { font-size: 11.5px; margin-bottom: 8px; line-height: 1.5; }

  /* Reviews → horizontal carousel */
  .pd-reviews-head { margin-bottom: 20px; }
  .pd-reviews-grid {
    display: flex !important; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 6px;
  }
  .pd-reviews-grid::-webkit-scrollbar { display: none; }
  .pd-review { flex: 0 0 84%; scroll-snap-align: start; padding: 18px; }

  /* Cross-sell related cards — smaller */
  .pd-related-card { flex: 0 0 168px !important; }
  .pd-related-meta { padding: 12px !important; }
  .pd-related-name { font-size: 13px !important; }
  .pd-related-type { font-size: 11px !important; }
  /* Stack price over the link so "View details" can't collide/wrap on the narrow card */
  .pd-related-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pd-related-price { font-size: 14px !important; }
  .pd-related-link { font-size: 12.5px !important; white-space: nowrap; }
}

/* ===== Buy-box add-ons (Complete your research kit) ===== */
.pd-kit { margin-top: 22px; }
.pd-kit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ===== Dosage selector with price-per-mg — connected card ===== */
.pd-dose { margin-bottom: 16px; }
.pd-dose-list {
  display: flex; flex-direction: column; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: #fff;
}
.pd-dose-opt {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 10px 16px 10px 12px;
  border: 0; border-bottom: 1px solid var(--border); background: #fff;
  cursor: pointer; text-align: left;
  font-family: inherit; position: relative; overflow: hidden;
  transition: background .15s ease;
}
.pd-dose-opt:last-child { border-bottom: 0; }
.pd-dose-opt:hover { background: var(--off); }
.pd-dose-opt.on { background: var(--off); }
.pd-dose-opt.on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
}
.pd-dose-badge {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--off); color: var(--muted);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  transition: all .15s ease;
}
.pd-dose-opt.on .pd-dose-badge { background: var(--accent); color: #fff; }
.pd-dose-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-dose-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.pd-dose-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 100px;
  white-space: nowrap;
}
.pd-dose-sub { font-size: 12px; color: var(--muted); }
.pd-dose-opt.on .pd-dose-sub { color: var(--green); font-weight: 500; }
.pd-dose-price { text-align: right; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.pd-dose-amt { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pd-dose-permg { font-size: 11px; color: var(--muted); }

/* ===== Quantity bar — full-width card, label + stepper (My Peptides Lab style) ===== */
.pd-qtybar {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 10px 10px 18px; margin-bottom: 16px; background: #fff;
}
.pd-qtybar-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.pd-qtybar .pd-qty {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 100px; padding: 3px; background: var(--off);
}
.pd-qtybar .pd-qty button {
  width: 38px; height: 38px; border-radius: 100px; flex: 0 0 38px;
  font-size: 20px; font-weight: 500; color: var(--ink); background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(13,15,26,.06); transition: background .12s ease;
}
.pd-qtybar .pd-qty button:hover { background: var(--off); }
.pd-qtybar .pd-qty input {
  width: 44px; text-align: center; border: 0; background: none; font: inherit;
  font-size: 16px; font-weight: 600; color: var(--ink); -moz-appearance: textfield;
}
.pd-qtybar .pd-qty input::-webkit-outer-spin-button,
.pd-qtybar .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* add-on image placeholders */
.pd-kit-img { width: 54px; height: 54px; flex-shrink: 0; display: block; }
.pd-kit-photo {
  width: 76px; height: 76px; object-fit: contain;
  margin: -14px 2px -14px -4px;
  background: none; border: 0; padding: 0;
}
.pd-kit-photo-syringes { width: 58px; height: 58px; margin: -5px 11px -5px 5px; }
.pd-kit-img::part(empty) { padding: 0; gap: 0; }
.pd-kit-img::part(cap),
.pd-kit-img::part(sub) { display: none; }
.pd-kit-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .15s ease, background .15s ease;
}
.pd-kit-item:hover { border-color: var(--ink); }
.pd-kit-item.on { border-color: var(--green); background: var(--green-soft); }
.pd-kit-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--border-strong, #ccd2dd); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all .15s ease;
}
.pd-kit-check svg { opacity: 0; transition: opacity .12s ease; }
.pd-kit-item.on .pd-kit-check { background: var(--green); border-color: var(--green); }
.pd-kit-item.on .pd-kit-check svg { opacity: 1; }
.pd-kit-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-kit-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.pd-kit-sub { font-size: 12px; color: var(--muted); }
.pd-kit-sel {
  margin-top: 6px; align-self: flex-start;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 5px 28px 5px 10px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink); background: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.pd-kit-price { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pd-add-total { margin-left: 8px; font-weight: 500; opacity: .8; }

/* Compact dosage + kit cards on phone (placed after base defs so it wins) */
@media (max-width: 640px) {
  .pd-dose { margin-bottom: 13px; }
  .pd-dose-list { margin-top: 7px; }
  .pd-dose-opt { gap: 11px; padding: 8px 14px 8px 10px; }
  .pd-dose-badge { width: 38px; height: 38px; border-radius: 9px; font-size: 14px; }
  .pd-dose-name { font-size: 14px; gap: 7px; }
  .pd-dose-tag { font-size: 8px; padding: 2px 6px; }
  .pd-dose-sub { font-size: 11.5px; }
  .pd-dose-amt { font-size: 15px; }
  .pd-dose-permg { font-size: 10.5px; }

  .pd-qtybar { padding: 8px 8px 8px 16px; margin-bottom: 13px; }
  .pd-qtybar-label { font-size: 12px; }
  .pd-qtybar .pd-qty button { width: 34px; height: 34px; flex: 0 0 34px; font-size: 18px; }
  .pd-qtybar .pd-qty input { width: 38px; font-size: 15px; }

  .pd-kit { margin-top: 16px; }
  .pd-kit-list { gap: 8px; }
  .pd-kit-item { gap: 11px; padding: 10px 12px; border-radius: 12px; }
  .pd-kit-check { width: 20px; height: 20px; border-radius: 6px; }
  .pd-kit-img { width: 44px; height: 44px; }
  .pd-kit-photo { width: 64px; height: 64px; margin: -12px 0 -12px -4px; }
  .pd-kit-photo-syringes { width: 50px; height: 50px; margin: -4px 9px -4px 4px; }
  .pd-kit-name { font-size: 13.5px; }
  .pd-kit-sub { font-size: 11.5px; }
  .pd-kit-price { font-size: 13.5px; }
  .pd-kit-sel { font-size: 12px; padding: 4px 26px 4px 9px; }
}

/* ===== Reconstitution calculator ===== */
.recon-grid {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px;
  align-items: stretch; margin-top: 36px;
}
.recon-inputs {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 26px;
}
.recon-field-top {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.recon-field-top label { font-size: 14px; font-weight: 500; color: var(--ink); }
.recon-field-val { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.recon-field-val small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.recon-field-input { display: inline-flex; align-items: baseline; gap: 4px; }
.recon-field-input input {
  width: 84px; text-align: right; border: 1px solid var(--border); border-radius: 9px;
  padding: 5px 9px; font: inherit; font-size: 20px; font-weight: 600; color: var(--ink);
  background: #fff; -moz-appearance: textfield; transition: border-color .15s ease;
}
.recon-field-input input:focus { outline: none; border-color: var(--accent); }
.recon-field-input input::-webkit-outer-spin-button,
.recon-field-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.recon-field-input small { font-size: 13px; font-weight: 500; color: var(--muted); }
/* ── P4: the slider you can actually catch with a thumb, at no layout cost ───
   The control was 6px tall, because the 6px is the TRACK — the visible line. The element's box is
   what a finger has to land in, so "drag the sliders", which the page says in its own copy, meant
   hitting a 6-pixel band.

   The element is now 28px of hit area drawing the same 6px line as its track. The negative block
   margins pull its contribution back to 6px, so it occupies exactly the space it did before while
   accepting a touch anywhere in 28px.

   That second part is not tidiness. Growing the box to 28px added 22px per field, three fields
   deep, inside a column that stacks under the output panel on mobile — and pushed everything
   below it down by 66px. The oracle measured the cost precisely: calculator mobile went 0.22% →
   13.56%, and it carried into every page that embeds the calculator (both stacks pages 1.3% →
   7.1%, all four PDPs up by ~1%). With the margins, all of them return to their previous numbers
   and the touch target is still 4.7× larger. */
.recon-field input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px;
  background: transparent; border-radius: 0; outline: none; cursor: pointer;
  accent-color: var(--green); padding: 0;
  margin: -11px 0;
  position: relative; z-index: 1;
}
.recon-field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 100px; background: var(--off);
}
.recon-field input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 100px; background: var(--off);
}
.recon-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 100px; background: var(--green); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(13,15,26,.25); cursor: pointer;
  /* Once a track is declared, WebKit and Blink stop centring the thumb on it and align it to the
     track's top edge instead — so it is nudged back by half its overhang: (6 - 22) / 2. */
  margin-top: -8px;
}
.recon-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 100px; background: var(--green);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(13,15,26,.25); cursor: pointer;
}
.recon-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }

.recon-output {
  background: var(--ink); border-radius: 18px; padding: 30px;
  display: flex; flex-direction: column; gap: 28px; color: #fff;
}
/* The syringe's part widths live here as tokens so the scale below can align to the BARREL rather
   than guess where it starts and ends. The plunger overlaps by 2px (`margin-left: -2px`), so the
   barrel's right edge is `--pl-w - 2`. */
.recon-syringe-wrap { padding: 8px 0 4px; --nd-w: 46px; --tip-w: 10px; --pl-w: 16px; }
.recon-syringe { display: flex; align-items: center; height: 56px; }
.recon-needle { width: var(--nd-w); height: 2px; background: rgba(255,255,255,.55); flex-shrink: 0; }
.recon-tip {
  width: var(--tip-w); height: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.55);
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
}
.recon-barrel {
  flex: 1; position: relative; height: 38px;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 4px 8px 8px 4px; overflow: hidden;
}
.recon-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(34,197,94,.55), var(--green));
  border-right: 2px solid #4ade80;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.recon-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; }
.recon-tick { width: 1px; height: 8px; align-self: flex-start; background: rgba(255,255,255,.35); }
.recon-tick.major { height: 14px; width: 1.5px; background: rgba(255,255,255,.6); }
.recon-plunger {
  width: var(--pl-w); height: 30px; flex-shrink: 0; margin-left: -2px;
  background: rgba(255,255,255,.85); border-radius: 0 4px 4px 0;
  position: relative;
}
.recon-plunger::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 20px; height: 6px; background: rgba(255,255,255,.5); border-radius: 0 3px 3px 0;
}
/* Positioned, not distributed: each number sits at its own percentage of the barrel, so the marks
   and the numbers describe the same scale. The row spans exactly the barrel — from the end of the
   needle+tip to the start of the plunger. */
.recon-scale {
  position: relative; height: 14px;
  margin: 8px calc(var(--pl-w) - 2px) 0 calc(var(--nd-w) + var(--tip-w));
  font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .04em;
}
.recon-scale-n {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
/* The first and last are pulled inside the barrel's edges rather than straddling them. */
.recon-scale-n--start { transform: none; }
.recon-scale-n--end { transform: translateX(-100%); }

.recon-readout { display: flex; flex-direction: column; gap: 22px; }
.recon-big { display: flex; flex-direction: column; gap: 2px; }
.recon-big-num { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #4ade80; }
.recon-big-unit { font-size: 16px; font-weight: 500; color: #fff; margin-top: 6px; }
.recon-big-cap { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
.recon-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.12); border-radius: 12px; overflow: hidden;
}
.recon-stat {
  background: var(--ink); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.recon-stat span { font-size: 12px; color: rgba(255,255,255,.55); }
.recon-stat b { font-size: 17px; font-weight: 600; color: #fff; }

@media (max-width: 860px) {
  .recon-grid { grid-template-columns: 1fr; gap: 16px; }
  .recon-inputs, .recon-output { padding: 22px; }
  .recon-big-num { font-size: 46px; }
}

/* Compact so the whole calculator fits one mobile screen (PDP inline + standalone page) */
@media (max-width: 640px) {
  .calc-hd { padding: 16px 0 2px !important; text-align: left; }
  .calc-hd .eyebrow { font-size: 11px; }
  .calc-hd h1 { font-size: 24px !important; margin-top: 6px !important; margin-bottom: 0 !important; }
  .calc-hd p { display: none; }
  .recon-section { padding-top: 4px !important; padding-bottom: 16px !important; }
  .recon-grid { gap: 8px; margin-top: 12px; }
  .recon-inputs { padding: 13px 16px; gap: 9px; }
  .recon-field-top { margin-bottom: 7px; }
  .recon-field-top label { font-size: 13px; }
  .recon-field-input input { width: 70px; font-size: 16px; padding: 3px 7px; }
  .recon-note { font-size: 11px; line-height: 1.4; }
  .recon-output { padding: 14px 16px; gap: 10px; }
  .recon-syringe-wrap { padding: 2px 0; --nd-w: 30px; }
  .recon-syringe { height: 34px; }
  /* All six numbers fit: six labels are ~84px of text under a 268px barrel at 390px. */
  .recon-scale { margin-top: 5px; font-size: 10px; }
  .recon-readout { gap: 10px; }
  .recon-big-num { font-size: 34px; }
  .recon-big-unit { font-size: 13px; margin-top: 2px; }
  .recon-big-cap { font-size: 11px; }
  .recon-stat { padding: 7px 12px; }
  .recon-stat span { font-size: 11px; }
  .recon-stat b { font-size: 15px; }
}

/* ===== FAQ head (reference: "Important questions answered by professionals") ===== */
.pd-faq-title {
  font-size: clamp(34px, 4vw, 50px); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.pd-faq-accent { color: var(--accent); }
.pd-faq-people { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.pd-faq-avatars { display: flex; }
.pd-faq-av {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--off, #f4f5f7); margin-left: -12px;
  box-shadow: 0 1px 3px rgba(13,15,26,.12);
  object-fit: cover; display: block;
}
.pd-faq-av:first-child { margin-left: 0; }
.pd-faq-people-cap { font-size: 13.5px; color: var(--muted); max-width: 320px; line-height: 1.5; }
@media (max-width: 640px) {
  .pd-faq-title { font-size: 23px !important; line-height: 1.08; }
  .pd-faq-av { width: 34px; height: 34px; }
  .pd-faq-people { margin-top: 16px; gap: 8px; }
  .pd-faq-people-cap { font-size: 12px; }
  .pd-faq-grid { gap: 18px !important; }
  .pd-faq-list { padding: 2px 16px; }
  .pd-faq-list details { padding: 13px 0; }
  .pd-faq-list summary { font-size: 14.5px; gap: 12px; }
  .pd-faq-list p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
}

/* ===== Supply PDP specs ===== */
.supply-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; margin-top: 26px;
}
.supply-spec {
  background: #fff; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.supply-spec-k { font-size: 13.5px; color: var(--muted); }
.supply-spec-v { font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: right; }
@media (max-width: 640px) {
  .supply-specs { grid-template-columns: 1fr; }
  .supply-spec { padding: 13px 16px; }
}

/* ===== PDP tool cards (Calculator + CoA) — under the details accordions ===== */
.pd-tools { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.pd-tools-eyebrow {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 12px;
}
.pd-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-tool {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px; text-align: left; width: 100%;
  border: 1px solid var(--border); border-radius: 14px;
  background: #fff; cursor: pointer; font: inherit;
  position: relative; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.pd-tool:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); box-shadow: 0 8px 22px rgba(13,15,26,.08); transform: translateY(-2px); }
.pd-tool:active { transform: translateY(0); }
.pd-tool-ic {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft, #eef2fb); color: var(--accent);
}
.pd-tool-ic svg { width: 21px; height: 21px; }
.pd-tool-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-tool-k { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pd-tool-v { font-size: 14.5px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-tool-s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-tool-arw {
  flex: none; color: var(--muted); display: flex; align-items: center;
  transition: transform .18s ease, color .18s ease;
}
.pd-tool-arw svg { width: 18px; height: 18px; }
.pd-tool:hover .pd-tool-arw { transform: translateX(3px); color: var(--accent); }

/* CoA card — premium navy, white content, light gleam sweep */
.pd-tool--coa { background: var(--ink); border-color: var(--ink); }
.pd-tool--coa:hover { border-color: var(--ink); box-shadow: 0 12px 30px rgba(13,15,26,.28); }
.pd-tool--coa .pd-tool-ic { background: rgba(255,255,255,.12); color: #fff; }
.pd-tool--coa .pd-tool-k { color: color-mix(in oklab, var(--accent) 55%, #fff); }
.pd-tool--coa .pd-tool-v { color: #fff; }
.pd-tool--coa .pd-tool-s { color: rgba(255,255,255,.6); }
.pd-tool--coa .pd-tool-arw { color: rgba(255,255,255,.7); }
.pd-tool--coa:hover .pd-tool-arw { color: #fff; }
.pd-tool--coa > *:not(.pd-tool-shine) { position: relative; z-index: 2; }
/* the sweep — a soft diagonal band of the button's own light, glancing across */
.pd-tool-shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.05) 66%, transparent 100%);
  transform: translateX(-190%) skewX(-16deg);
  animation: pdToolSheen 7s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
/* Auto-repeats: a slow ~2.4s sweep that lingers as it crosses, then a pause off-screen, looping. */
@keyframes pdToolSheen {
  0% { transform: translateX(-190%) skewX(-16deg); }
  34% { transform: translateX(320%) skewX(-16deg); }
  100% { transform: translateX(320%) skewX(-16deg); }
}
/* Hover sweep — a fresh, slightly brighter gleam fires each time the mouse enters,
   independent of where the auto-repeat happens to be. Sits below the text (z-index 1). */
.pd-tool--coa::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.06) 66%, transparent 100%);
  transform: translateX(-190%) skewX(-16deg);
}
.pd-tool--coa:hover::after { animation: pdToolSheenHover .75s cubic-bezier(.4,0,.2,1); }
@keyframes pdToolSheenHover {
  from { transform: translateX(-190%) skewX(-16deg); }
  to   { transform: translateX(320%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pd-tool-shine { animation: none; }
  .pd-tool--coa:hover::after { animation: none; }
  .pd-tool:hover { transform: none; }
}
@media (max-width: 640px) {
  .pd-tools-grid { grid-template-columns: 1fr; }
}

/* Coming-soon CoA card (products without a lab report yet) — neutral, not navy */
.pd-tool--coa.pd-tool--soon { background: var(--off); border-color: var(--border); }
.pd-tool--coa.pd-tool--soon:hover { border-color: var(--border); box-shadow: none; transform: translateY(-2px); }
.pd-tool--soon::after { display: none !important; }
.pd-tool--soon .pd-tool-ic { background: rgba(13,15,26,.06); color: var(--muted); }
.pd-tool--soon .pd-tool-k { color: var(--muted); }
.pd-tool--soon .pd-tool-v { color: var(--ink); }
.pd-tool--soon .pd-tool-s { color: var(--muted); transition: color .2s ease; }
.pd-tool--soon .pd-tool-arw { color: var(--muted); }
.pd-tool--soon:hover .pd-tool-arw { transform: none; color: var(--muted); }
.pd-tool--soon.is-soon { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); box-shadow: 0 8px 22px rgba(13,15,26,.08); }
.pd-tool--soon.is-soon .pd-tool-s { color: var(--accent); font-weight: 600; }
.pd-tool--soon.is-soon .pd-tool-ic { background: var(--accent-soft, #eef2fb); color: var(--accent); }

/* ===== Certificate of Analysis modal ===== */
.coa-ov {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13,15,26,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  /* clear the floating navbar (top) + floating ATC (bottom) so both stay visible */
  padding: 104px 20px 104px; overflow-y: auto;
  animation: coaFade .18s ease;
}
@keyframes coaFade { from { opacity: 0; } to { opacity: 1; } }
.coa-modal {
  width: 100%; max-width: 600px; background: #fff;
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 100%;
  box-shadow: 0 30px 80px rgba(13,15,26,.34);
  animation: coaPop .22s cubic-bezier(.2,.7,.3,1);
}
/* Keep the floating chrome above the CoA popup + its blur while it's open */
body.coa-open .hdr { z-index: 120; }
body.coa-open .sticky-buy { z-index: 120; }
@keyframes coaPop { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.coa-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.coa-head-t { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.coa-x {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.coa-x:hover { color: var(--ink); border-color: var(--ink); }
.coa-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.coa-stat { padding: 14px 18px; border-right: 1px solid var(--border); }
.coa-stat:last-child { border-right: 0; }
.coa-stat-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.coa-stat-v { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.coa-vtabs { display: flex; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.coa-vtab {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 100px;
  background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.coa-vtab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.coa-holder { height: 560px; padding: 18px; background: #f6f7f9; }
.coa-holder image-slot { width: 100% !important; height: 100% !important; display: block; }
/* Official-document panel — honest placeholder, links to the real PDF (production embeds it inline) */
/* The card and the viewer scroll TOGETHER inside .coa-body; neither scrolls on its own. */
.coa-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.coa-holder--doc { height: auto; flex: 0 0 auto; overflow: visible; padding: 20px; }

/* ── The document viewer: certificate + tested vial ──────────────────────────
   STACKED at both viewports, not tabbed. The brief allowed either; stacked wins because a tab
   hides one of the two documents behind a control, and the point of putting them in the modal is
   that a customer sees BOTH without doing anything. It also removes a state to get wrong on a
   phone.

   The two images have very different shapes — the certificate is a tall portrait page (~2:3) and
   the vial photo is square — so they are not forced into a shared frame height. Each frame caps
   its height in viewport units and scrolls internally when the image is taller, which is what
   keeps a 2000px-tall certificate from turning the modal into a mile of scrolling.

   Desktop gives the vial a smaller ceiling: it is secondary, and at full modal width a square
   photo of one vial is a lot of nothing. */
.coa-viewer {
  padding: 14px 14px 16px;
  background: var(--off);
  display: flex; flex-direction: column; gap: 14px;
}
/* With documents present the viewer IS the popup's content, so it gets the room: no section
   heading above it, tighter padding, and the frames size to the modal rather than to a share of
   the viewport. The customer opens the popup and the certificate is simply there. */
.coa-viewer--docs { padding: 12px; gap: 12px; }
.coa-viewer--docs .coa-slot-frame { max-height: none; }
.coa-viewer--docs .coa-slot--vial .coa-slot-frame { max-height: none; }
.coa-viewer-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coa-viewer-ttl {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.coa-viewer-hint { font-size: 11px; color: var(--muted); }

.coa-slot { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.coa-slot-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coa-slot-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.coa-slot-sub { font-size: 11px; color: var(--muted); }
.coa-slot-frame {
  display: block; background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
/* Spelled out, and specific enough to beat the site-wide `a[href] { touch-action: manipulation }`
   from P1 (polish.css loads after this file). `manipulation` already permits pinch-zoom — it only
   drops double-tap-zoom — so this changes nothing today. It is here so that a future edit to that
   shared control list cannot quietly take pinch-zoom off the one surface where reading fine print
   on a phone is the entire point. */
.coa-viewer .coa-slot-frame { touch-action: pan-x pan-y pinch-zoom; }
.coa-slot--vial .coa-slot-frame { max-height: 34vh; }
.coa-slot-img {
  display: block; width: 100%; height: auto;
  /* Never reveal an unpainted box: the image starts transparent and is faded in only once it has
     actually decoded (see preview.js). The frame's own white surface is what shows meanwhile, so
     there is no grey rectangle pretending to be a document. */
  opacity: 0; transition: opacity .28s ease;
}
.coa-slot-img.is-ready { opacity: 1; }
@media (min-width: 641px) {
  /* The vial stays secondary — capped so a square photo does not out-shout the certificate. */
  .coa-viewer--docs .coa-slot--vial .coa-slot-frame { max-width: 340px; }
}

/* ── The waiting state ───────────────────────────────────────────────────────
   Deliberately looks like NOTHING but itself. No blurred mock-up, no skeleton, no grey rectangle
   shaped like a page: a placeholder that imitates the thing it stands in for tells the customer a
   document exists when none does, and this is the one modal on the site whose entire job is
   proving what is in a vial. An outline, one sentence, and the action that does work today. */
.coa-pending {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 26px 18px 22px;
  background: #fff; border: 1px dashed var(--border); border-radius: 12px;
}
.coa-pending-ic { color: var(--muted); opacity: .55; line-height: 0; }
.coa-pending-txt { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 34ch; margin: 0; }
.coa-pending-btn { margin-top: 2px; }
@media (max-width: 640px) {
  .coa-pending { padding: 22px 14px 18px; }
  .coa-pending-txt { font-size: 12.5px; }
}

/* ── C4: the certificate itself, inside the popup ────────────────────────────
   The embed is the tall element in the modal, so it is the one that scrolls and the one that
   shrinks: `min-height: 0` lets it give way rather than pushing the head and the action bar off a
   short screen (a phone in landscape is ~390px tall in total). A scan is shown at its natural
   width and scrolled, never squashed to fit — an unreadable certificate proves nothing. */
.coa-holder--embed {
  flex: 1 1 auto; min-height: 0; height: auto; padding: 0;
  background: #eef0f4; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center;
}
.coa-doc-link { display: block; width: 100%; }
.coa-doc-img { display: block; width: 100%; height: auto; }
.coa-doc-frame { width: 100%; height: 62vh; min-height: 320px; border: 0; display: block; }
/* A short window (a laptop in a split view, a phone turned sideways) cannot spare 320px for a
   frame; the minimum has to give way or it pushes the close button off the screen. */
@media (max-height: 620px) {
  .coa-doc-frame { height: 46vh; min-height: 150px; }
  /* The overlay reserves 104px top and bottom to clear the floating header and buy bar. In a
     390px-tall landscape window that is 208px of 390 spent on padding, leaving the certificate
     182px to live in. Both bars are shorter here, so the reservation shrinks with them. */
  .coa-ov { padding: 64px 12px 68px; }
}
.coa-doc-nope { padding: 24px; text-align: center; font-size: 13px; color: var(--muted); }
.coa-doc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--border); background: #fff;
}
.coa-doc-ref { font-size: 11.5px; color: var(--muted); }
.coa-doc-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coa-doc-act { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.coa-doc-act:hover { text-decoration: underline; }
/* With the real document above it, the descriptive card is a footnote — the JS restores it if the
   frame turns out to be undisplayable on this device. */
.coa-holder--doc[data-coa-card-secondary] { display: none; }

/* ── C4: the analytical results, when there is no file to show yet ───────────
   Real findings from the report, so the popup says something on a phone today. */
.coa-results { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 12.5px; }
.coa-results th, .coa-results td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.coa-results th { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.coa-results td:last-child, .coa-results th:last-child { text-align: right; white-space: nowrap; }
.coa-official {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 32px 28px; max-width: 420px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.coa-official-ic {
  width: 58px; height: 58px; border-radius: 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, #fff);
  color: var(--accent);
}
.coa-official-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.coa-official-ttl { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-top: 6px; }
.coa-official-sub { font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.coa-official-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 16px 0 20px; max-width: 320px; }
.coa-official-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
.coa-official-btn {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border-radius: 10px; border: 1px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.coa-official-btn:hover { border-color: var(--ink); }
.coa-official-btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.coa-official-btn--primary:hover { background: color-mix(in oklab, var(--ink) 88%, #fff); }
.coa-foot-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.coa-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--border); background: #fff;
}
.coa-foot-key { display: flex; align-items: center; gap: 11px; }
.coa-foot-key > svg { flex: none; color: var(--green, #1f8a5b); }
.coa-foot-k { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.coa-foot-v { display: block; font-size: 13px; font-weight: 700; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.coa-foot-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.coa-foot-link:hover { text-decoration: underline; }
.coa-foot-soon { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* Coming-soon placeholder (prototype — the real signed PDF embeds here in production) */
.coa-holder--doc { display: flex; align-items: center; justify-content: center; }
.coa-soon { padding: 36px 28px; }
.coa-soon-ic {
  width: 60px; height: 60px; border-radius: 16px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, #fff); color: var(--accent);
}
.coa-soon-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, #fff);
  padding: 5px 11px; border-radius: 100px; margin-bottom: 12px;
}
@media (max-width: 640px) {
  .pd-tools { grid-template-columns: 1fr; }
  /* Contained popup: clear the floating navbar (top) + floating ATC bar (bottom) */
  .coa-ov { padding: 84px 12px 92px; }
  .coa-modal { max-width: 100%; border-radius: 16px; }
  .coa-holder { height: 44vh; }
  .coa-holder--doc { height: auto; padding: 14px; }
  .coa-official { padding: 24px 18px; }
  .coa-stat { padding: 12px 14px; }
  .coa-stat-v { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME-ONLY additions — NOT in design-source/v3/preview/product.css.
   Everything above is that file, ported verbatim (v9). These exist because the
   theme renders REAL markup the preview mocks:
     · .pd-notify*      the sold-out NotifyStock card (STATES.md §3 requires it)
     · .sticky-buy-*     kit reflection in the floating buy bar
     · .pd-dose-opt--static  single-dose label (not a one-option dropdown)
     · .pd-dose-opt--soldout  a dose that is out of stock (C8 — the source has no
                              per-dose sold-out state, only a whole-product one)
   Re-append after ANY future verbatim port of product.css, or the sold-out PDP
   loses its entire restock card.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-dose-opt--static { cursor: default; }

/* ── C8: a dose that cannot be bought must not look like one that can ────────
   The row already carried `disabled`, which stops the click and changes nothing else — so it read
   as a normal, affordable option that silently ignored you. This is the catalog card's sold-out
   grammar applied to a row: the label in dark, the price struck and faded, the whole row dimmed,
   and no hover response, because a hover that lights up is an invitation. */
.pd-dose-opt--soldout { cursor: not-allowed; background: var(--off); }
.pd-dose-opt--soldout:hover { background: var(--off); }
.pd-dose-opt--soldout .pd-dose-badge { background: #e6e9ef; color: var(--muted); }
.pd-dose-opt--soldout .pd-dose-name { color: var(--muted); }
.pd-dose-opt--soldout .pd-dose-amt { text-decoration: line-through; opacity: .5; }
.pd-dose-opt--soldout .pd-dose-permg { opacity: .45; }
.pd-dose-opt--soldout .pd-dose-sub { color: var(--muted); font-weight: 600; }
.pd-dose-tag--out { background: var(--ink); color: #fff; }

/* sticky-bar kit reflection */
.sticky-buy-thumbs { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; }

.sticky-buy-thumbs .sticky-buy-thumb { position: relative; }

.sticky-buy-thumbs.has-kit .sticky-buy-thumb { box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(13,15,26,.16); }

.sticky-buy-thumbs.has-kit .sticky-buy-thumb:first-child { z-index: 4; }

.sticky-buy-thumb--kit {
  width: 44px; height: 44px; border-radius: 10px; margin-left: -14px;
  background: #f4f5f7; z-index: 3;
  animation: kitThumbIn .28s cubic-bezier(.2,.8,.3,1) both;
}

.sticky-buy-thumb--kit:nth-of-type(3) { z-index: 2; }

.sticky-buy-thumb--kit:nth-of-type(4) { z-index: 1; }

.sticky-buy-thumb--kit img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

@keyframes kitThumbIn { from { opacity: 0; } to { opacity: 1; } }

.sticky-buy-kit { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--green, #1f8a5b); font-size: 11.5px; font-weight: 600; animation: kitThumbIn .28s ease both; }

.sticky-buy-kit-ic { flex: none; }

.sticky-buy-kit-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

.sticky-buy-kit-cap { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }

.sticky-buy-price-row { display: flex; align-items: baseline; gap: 8px; }

.pd-notify {
  border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(180deg, #fff, var(--off));
  padding: 20px; margin-top: 4px;
  box-shadow: 0 1px 2px rgba(13,15,26,.04), 0 10px 30px rgba(13,15,26,.06);
}

.pd-notify-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }

.pd-notify-bell {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, #fff); color: var(--accent);
}

.pd-notify-bell svg { width: 22px; height: 22px; }

.pd-notify-headtx { min-width: 0; padding-top: 1px; }

.pd-notify-head .pd-notify-t {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2;
}

.pd-notify-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 100px; line-height: 1.4;
}

.pd-notify-lead { font-size: 13.5px; color: var(--muted); font-weight: 400; margin-top: 5px; line-height: 1.5; }

.pd-notify-form { display: flex; flex-direction: column; gap: 9px; }

.pd-notify-form input {
  width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 12px;
  padding: 0 16px; height: 52px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pd-notify-form input::placeholder { color: color-mix(in oklab, var(--muted) 75%, #fff); }

.pd-notify-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }

.pd-notify-form .btn { width: 100%; white-space: nowrap; }

.pd-notify-fine {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12px; color: var(--muted);
}

.pd-notify-fine svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }

.pd-notify--done { display: flex; align-items: center; gap: 13px; }

.pd-notify-ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 100px;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
}

.pd-notify-ic svg { width: 20px; height: 20px; }

.pd-notify--done .pd-notify-t { font-size: 15px; font-weight: 600; color: var(--ink); }

.pd-notify-s { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

@media (max-width: 480px) {
  .pd-notify { padding: 17px; }
  .pd-notify-head { gap: 11px; margin-bottom: 14px; }
  .pd-notify-bell { width: 40px; height: 40px; }
  .pd-notify-head .pd-notify-t { font-size: 15px; }
  .pd-notify-form input { height: 50px; }
}
/* "What it is being studied for" — a full-width prose row inside the Compound Information card.
 * Separated from the columns above by the same hairline the card uses elsewhere, so it reads as
 * another part of that card rather than a bolted-on block. Prose, so the measure is capped: a
 * 28px-padded card at 1440 is far wider than anyone wants to read a paragraph across. */
.ci-research {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
}
.ci-research-p {
  max-width: 74ch; font-size: 14.5px; line-height: 1.65; color: var(--ink);
  margin: 0 0 12px;
}
.ci-research-p:last-child { margin-bottom: 0; }