/* ===========================================================================
   Card variant picker.

   A small centred dialog opened from a product card's "Add to Cart". It reuses DP's
   panel language — 30px radius, #FAF8F5→white ground, ink type — so it reads as part of
   the site rather than a generic modal.

   It scales up from 0.96 with the same easing the sticky bar uses. No spring here: this
   is a utility panel, not the hero moment the sticky ATC is.
   =========================================================================== */

.dp-pick {
  position: fixed;
  inset: 0;
  z-index: 1200;                 /* above the drawer scrim (1000) — it can open over it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dp-s-9);
}
.dp-pick[hidden] { display: none; }

.dp-pick__scrim {
  position: absolute;
  inset: 0;
  background: var(--dpx-bg-a414676p38, rgba(46, 36, 30, .38));
  /* Blur everything behind the open picker, like the mobile menu's scrim. */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .24s var(--dp-ease-cta);
}
.dp-pick.is-open .dp-pick__scrim { opacity: 1; }

.dp-pick__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--dp-s-10);
  border-radius: var(--dp-r-md);
  background: linear-gradient(var(--dpx-bg-255255255, rgb(255, 255, 255)) 0%, var(--dpx-bg-250250250, rgb(250, 250, 250)) 100%);
  box-shadow: 0 24px 60px var(--dpx-shadow-a414676p22, rgba(46, 36, 30, .22));
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .24s var(--dp-ease-cta), transform .24s var(--dp-ease-cta);
}
.dp-pick.is-open .dp-pick__panel { opacity: 1; transform: none; }
.dp-pick__panel:focus { outline: none; }

.dp-pick__x {
  position: absolute;
  top: var(--dp-s-5);
  right: var(--dp-s-5);
  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 .2s var(--dp-ease-cta), color .2s var(--dp-ease-cta);
}
.dp-pick__x:hover { background: var(--dp-surface-mute); color: var(--dp-ink); }
.dp-pick__x:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }

/* --- Head ---------------------------------------------------------------- */
.dp-pick__head {
  display: flex;
  align-items: center;
  gap: var(--dp-s-6);
  padding-right: 36px;           /* clear of the close button */
}
.dp-pick__img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface-card);
  overflow: hidden;
}
.dp-pick__img img { width: 100%; height: 100%; object-fit: contain; }
.dp-pick__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-pick__name {
  font-size: var(--dp-fs-h4);
  font-weight: var(--dp-fw-semi);
  color: var(--dp-ink);
  line-height: 22px;
  letter-spacing: -.5px;
}
/* aria-live would be wrong here — the price changing is feedback on the customer's own
   press, and announcing it competes with the option they just chose. */
.dp-pick__price {
  font-size: var(--dp-fs-lg);
  font-weight: var(--dp-fw-medium);
  color: var(--dp-ink-60);
  line-height: 20px;
  letter-spacing: -.32px;
}

/* --- Option rows --------------------------------------------------------- */
.dp-pick__body { margin-top: var(--dp-s-9); display: grid; gap: var(--dp-s-7); }
.dp-pick__body:empty { margin-top: 0; }

.dp-pick__label {
  display: block;
  margin-bottom: var(--dp-s-3);
  font-size: var(--dp-fs-sm);
  font-weight: var(--dp-fw-semi);
  color: var(--dp-ink-50);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dp-pick__opts { display: flex; flex-wrap: wrap; gap: var(--dp-s-3); }

.dp-pick__opt {
  min-height: 44px;              /* tap target — the chips are the whole point of the dialog */
  padding: 0 var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-pill);
  background: var(--dp-surface);
  color: var(--dp-ink);
  font-family: inherit;
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-medium);
  letter-spacing: -.28px;
  cursor: pointer;
  transition: border-color .2s var(--dp-ease-cta), background .2s var(--dp-ease-cta), color .2s var(--dp-ease-cta);
}
.dp-pick__opt:hover { border-color: var(--dp-ink-50); }
.dp-pick__opt:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-pick__opt.is-active {
  border-color: var(--dpx-fg-blue, var(--dp-blue));
  background: var(--dp-blue);
  color: var(--dp-on-dark);
}

/* --- Add ----------------------------------------------------------------- */
.dp-pick__add {
  margin-top: var(--dp-s-9);
  width: 100%;
  height: 52px;
  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-lg);
  font-weight: var(--dp-fw-semi);
  letter-spacing: -.32px;
  cursor: pointer;
  transition: background var(--dp-t-cta) var(--dp-ease-cta), opacity .2s linear;
}
.dp-pick__add:hover:not(:disabled) { background: var(--dpx-bg-ink, var(--dp-ink)); }
.dp-pick__add:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
/* Disabled is the DEFAULT state on a variable product: nothing is chosen yet. It has to
   look deliberately inert, not broken. */
.dp-pick__add:disabled { background: var(--dp-surface-mute); color: var(--dp-muted); cursor: not-allowed; }
.dp-pick__add.is-busy { opacity: .6; pointer-events: none; }

.dp-pick__note {
  margin-top: var(--dp-s-3);
  min-height: 18px;
  font-size: var(--dp-fs-sm);
  color: var(--dp-alert);
  text-align: center;
}

@media (max-width: 599px) {
  .dp-pick { padding: var(--dp-s-5); align-items: flex-end; }
  .dp-pick__panel { width: 100%; padding: var(--dp-s-9) var(--dp-s-7) var(--dp-s-7); }
  /* From the bottom on a phone — the thumb is already down there, and it matches how the
     drawer arrives. */
  .dp-pick__panel { transform: translateY(24px) scale(1); }
  .dp-pick.is-open .dp-pick__panel { transform: none; }
}

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

/* --- Quantity tiers ------------------------------------------------------
   The 1/2/3 ladder from the product page, so a card popup is not a worse deal than the PDP
   for the same goods.

   Three across rather than the wrapping pill row the attributes use: these are comparable
   options read side by side — the whole point is seeing $99 / $192.06 / $282.15 at once —
   and a wrapped third pill breaks that comparison. Same border, radius and active colours
   as .dp-pick__opt so they still read as the same kind of control. */
.dp-pick__qty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-3); }

.dp-pick__qtyOpt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-height: 62px;              /* comfortably over the 44px tap target with three lines in it */
  padding: var(--dp-s-3) var(--dp-s-2);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  color: var(--dp-ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s var(--dp-ease-cta), background .2s var(--dp-ease-cta), color .2s var(--dp-ease-cta);
}
.dp-pick__qtyOpt:hover { border-color: var(--dp-ink-50); }
.dp-pick__qtyOpt:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-pick__qtyOpt.is-active { border-color: var(--dpx-fg-blue, var(--dp-blue)); background: var(--dp-blue); color: var(--dp-on-dark); }

.dp-pick__qtyN { font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium); color: var(--dp-ink-50); }
.dp-pick__qtyP { font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); letter-spacing: -.32px; }
/* The saving line is EMPTY on the 1-vial tile and still rendered, so all three tiles keep
   the same height and their prices sit on one baseline. */
.dp-pick__qtyS { min-height: 14px; font-size: 11px; font-weight: var(--dp-fw-semi); line-height: 14px; color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-pick__qtyOpt.is-active .dp-pick__qtyN,
.dp-pick__qtyOpt.is-active .dp-pick__qtyS { color: var(--dp-on-dark); }

/* --- Quantity stepper -----------------------------------------------------
   Sits under the tier tiles. The tiles are three fixed jumps; this is how somebody asks for
   4 or 7, which the tiles cannot express at all. */
/* Label left, stepper right, tiles beneath — one group, one label. */
.dp-pick__qtyHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dp-s-5); margin-bottom: var(--dp-s-4);
}
.dp-pick__row--qty .dp-pick__label { margin-bottom: 0; }
.dp-pick__step {
  display: inline-flex; align-items: center;
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-pill);
  background: var(--dp-surface); overflow: hidden;
}
.dp-pick__stepBtn {
  width: 44px; height: 44px;                 /* the dialog's whole job is tapping */
  border: 0; background: transparent;
  font-family: inherit; font-size: 18px; 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);
}
/* hover sticks after a tap on touch, leaving the button looking half-pressed. */
@media (hover: hover) {
  .dp-pick__stepBtn:hover { background: var(--dpx-bg-eaf1fc, #FAEFEC); color: var(--dpx-fg-blue, var(--dp-blue)); }
}
.dp-pick__stepBtn:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: -2px; }
.dp-pick__stepN {
  min-width: 40px; text-align: center;
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--dp-hairline);
  align-self: stretch; display: flex; align-items: center; justify-content: center;
}

/* --- Fill slider (dose) -----------------------------------------------------
   The same "Fill" control the product page uses, in place of the strength
   chips: one notch per carried strength, a rolling mg readout, magnetic snap.
   Classes match pdp.css on purpose — on pages that load both, the rules are
   identical. */
.dp-fill { --p: 0; position: relative; padding: 2px 0 24px; outline: none; touch-action: none; cursor: pointer; }
/* The track is inset from the container so the thumb never sits at the screen edge —
   a drag starting there triggers the browser back-swipe on phones. */
.dp-fill__track, .dp-fill__ticks { margin-inline: clamp(28px, 10%, 64px); }
.dp-fill:focus-visible .dp-fill__thumb { outline: 3px solid var(--dpx-border-a1126255p35, rgba(220, 73, 32, .35)); outline-offset: 2px; }
.dp-fill__read { display: flex; align-items: baseline; gap: 3px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.dp-fill__num { font-size: 22px; font-weight: var(--dp-fw-bold); line-height: 1; letter-spacing: -.02em; color: var(--dp-ink); }
.dp-fill__unit { font-size: 12.5px; font-weight: var(--dp-fw-semi); color: var(--dp-muted); }
.dp-fill__track { position: relative; height: 26px; }
.dp-fill__rail, .dp-fill__bar {
  position: absolute; left: 0; top: 50%; height: 3px;
  transform: translateY(-50%); border-radius: 2px;
}
.dp-fill__rail { right: 0; background: var(--dp-hairline); }
.dp-fill__bar { width: calc(var(--p) * 100%); background: var(--dpx-bg-017eff, var(--dp-blue)); }
.dp-fill__notch {
  position: absolute; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--dp-surface);
  border: 2px solid var(--dp-hairline);
  transition: border-color .15s, background-color .15s;
}
.dp-fill__notch.is-passed { border-color: var(--dpx-border-017eff, var(--dp-blue)); background: var(--dpx-bg-017eff, var(--dp-blue)); }
.dp-fill__thumb {
  position: absolute; top: 50%; left: calc(var(--p) * 100%);
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--dp-surface);
  border: 2px solid var(--dpx-border-017eff, var(--dp-blue));
  box-shadow: 0 4px 12px -4px var(--dpx-shadow-a1126255p6, rgba(220, 73, 32, .6));
  transition: box-shadow .15s;
}
.dp-fill.is-dragging .dp-fill__thumb { box-shadow: 0 0 0 7px var(--dpx-shadow-a1126255p15, rgba(220, 73, 32, .15)); }
.dp-fill__ticks { position: relative; height: 14px; margin-top: 4px; }
.dp-fill__tick {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .03em;
  color: var(--dp-muted); white-space: nowrap;
  transition: color .15s;
}
.dp-fill__tick:first-child { transform: none; }
.dp-fill__tick:last-child { transform: translateX(-100%); }
.dp-fill__tick.is-active { color: var(--dpx-fg-blue, var(--dp-blue)); font-weight: var(--dp-fw-bold); }
/* Inside the sheet the row label sits above the readout. */
.dp-pick__row--fill .dp-pick__label { display: block; margin-bottom: 6px; }

/* --- Box-of-ten stepper ------------------------------------------------------
   When the pack supply is chosen the stepper stays, counting whole boxes but
   reading in vials so the number visibly climbs 10, 20, 30… */
.dp-pick__stepN--pack { min-width: 86px; white-space: nowrap; padding-inline: 10px; font-variant-numeric: tabular-nums; }
.dp-pick__packNote {
  margin: 8px 2px 0;
  font-size: 11.5px; font-weight: var(--dp-fw-medium);
  color: var(--dp-muted);
}

/* ============================================================================
   Spec-sheet register (2026-11-02) — the quick-add sheet matches the PDP's
   compact buy column: mono tabular figures, uppercase micro-labels, hairlines.
   ============================================================================ */
.dp-pick__label {
  font-family: var(--dp-mono);
  font-size: 10px; font-weight: var(--dp-fw-semi); line-height: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dp-muted);
}
.dp-pick__qty { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.dp-pick__qtyOpt { min-height: 52px; padding: 7px 4px 6px; }
.dp-pick__qtyN {
  font-family: var(--dp-mono);
  font-size: 9.5px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.dp-pick__qtyP {
  font-family: var(--dp-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: var(--dp-fw-bold); letter-spacing: -.2px;
}
.dp-pick__qtyS { min-height: 13px; font-size: 9.5px; line-height: 13px; }
.dp-pick__price {
  font-family: var(--dp-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--dp-fw-bold); letter-spacing: -.2px;
}
/* The Box-of-10 row the conversion plugin adds rides the same line. */
.dp-pick__boxTitle { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi); }
.dp-pick__boxMeta  { font-family: var(--dp-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.dp-pick__boxBadge { font-family: var(--dp-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; }