/* ============================================================================
   Peptide Portal — product detail page
   MEASURED at 1440: image x230 y98 437x437 · buy box x749 w461 · name 44/600
   · ATC x765 y353 429x43 · content column x773 w413.
   Columns are 609 + 20 + 461 = 1090, LEFT-ALIGNED inside the 1200 content
   column — that is what lands the buy box on x749.
   ============================================================================ */

.dp-pdp {
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding: var(--dp-s-10) var(--dp-gutter) var(--dp-s-12);
}
.dp-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 609px) 461px;
  gap: var(--dp-s-9);
  align-items: start;
}

/* --- Media ----------------------------------------------------------------
   MEASURED on DP: the shot is 437x437 sitting at x230 — that is NOT centred in the 609px
   media column, it is pushed toward the text, leaving 110px of air on the left and 62px on
   the right. Filling the column instead (520x520 at x120, which is what this was) made the
   image both too big and too far from the copy it belongs to, and opened a 130px trench down
   the middle of the page. Expressed as "end-justified, 62px in" so it survives the column
   flexing rather than hardcoding x230. */
/* The header strip + head are fixed and reach y=74. A sticky top smaller than that slides
   the image underneath them on scroll; 74 + 24 keeps the padding the WP original shows. */
.dp-pdp__media { position: sticky; top: calc(74px + var(--dp-s-10)); display: grid; justify-items: end; }
.dp-pdp__shot {
  display: grid; place-items: center;
  /* The 62px inset is part of the fit, not on top of it: `min(437px, 100%)` plus a fixed
     margin still overflows a column narrower than 499px, which is exactly what the 1200
     breakpoint produces. Subtracting it inside the min() makes the box self-correcting at
     every width. */
  width: min(437px, calc(100% - 62px));
  aspect-ratio: 1 / 1;
  margin-right: 62px;
  overflow: hidden;
}
.dp-pdp__shot img { width: 100%; height: 100%; object-fit: contain; }
.dp-pdp__thumbs { display: flex; gap: var(--dp-s-4); margin-top: var(--dp-s-5); }
.dp-pdp__thumb {
  width: 72px; height: 72px; padding: var(--dp-s-2);
  border: 1px solid var(--dp-hairline); border-radius: var(--dp-r-3xs);
  background: var(--dp-surface); cursor: pointer;
}
.dp-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dp-pdp__thumb.is-active { border-color: var(--dpx-fg-blue, var(--dp-blue)); }

/* --- Buy box -------------------------------------------------------------- */
/* MEASURED on DP: 44/600 at 48.4px leading and -0.1px tracking. The -.02em shorthand works
   out to -0.88px here, which is nearly a pixel tighter per character across a long compound
   name — visibly cramped against the real thing. */
.dp-pdp__name { font-size: var(--dp-fs-display); font-weight: var(--dp-fw-semi); line-height: 48.4px; letter-spacing: -.1px; }
/* MEASURED 16/500 at 19.2px leading. This was 12/400 — small print under the title, where DP
   sets it a size ABOVE the body. */
.dp-pdp__cas {
  margin-top: var(--dp-s-2);
  font-size: var(--dp-fs-lg);
  font-weight: var(--dp-fw-medium);
  line-height: 19.2px;
  letter-spacing: -.1px;
  color: var(--dp-muted);
}

/* WooCommerce's own variation form. The native selects stay in the DOM (moved
   off-screen, never display:none) because its JS reads and writes them — chips
   are only a facade over the real controls. */
.dp-pdp__buy form.cart { margin-top: var(--dp-s-9); }
.dp-pdp__buy .variations { display: none; }
.dp-pdp__buy .woocommerce-variation-price,
.dp-pdp__buy .woocommerce-variation-availability { display: none; }

/* NOT 1fr 1fr. Two equal 220px columns leave the Quantity pair 1px short of fitting once the
   chips carry DP's real 2px outline and 20px padding, so "Pack of 10" dropped to a second line
   — and a wrapped chip row is the single most awkward thing on the page.
   DP starts Quantity at x990 against a 749 column start; 200px lands it at 969, 21px off, which
   is the price of Inter running wider than the SF Pro DP renders in. Keeping the row intact is
   worth more than those 21px. */
.dp-opts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--dp-s-9); }
/* MEASURED 14/400 at 18.2px leading — the same size as the chips beneath them, not a size down. */
.dp-opt__label { font-size: var(--dp-fs-base); line-height: 18.2px; letter-spacing: -.1px; color: var(--dp-muted); }
.dp-opt__chips { display: flex; flex-wrap: wrap; gap: var(--dp-s-3); margin-top: var(--dp-s-2); }
/* DP OUTLINES every chip on white and turns the chosen one blue — it never fills them.
   Read off the rendered pixels, because the element inspector reports these as borderless
   transparent text: Framer carries the outline on a wrapper the ancestor-walk never reaches.
   At 2x device scale the border core sampled rgb(230,70,26) on the chosen chip and
   rgb(195,197,205) on the alternatives, 2px thick, chip box 71x33 for a 27px label.

   There were TWO .dp-chip blocks here. The second — filled grey pill, no border — was later in
   the file and therefore won, which is why the chosen chip rendered as a grey slab and the
   alternative rendered as bare text with no chip at all. One block only. */
.dp-chip {
  height: 33px;
  padding: 0 20px;                       /* 27px label + 40 + 4 border = the measured 71px */
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD);             /* measured; --dp-hair-row is far too light here */
  border-radius: 8px;                    /* measured — a rounded rect, not the 12px token */
  background: var(--dp-surface);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-regular);     /* measured 14/400, not 500 */
  line-height: 18.2px;                   /* measured; the default 20.3 sat the label low in the box */
  letter-spacing: -.1px;                 /* measured; -.28 is the site default, DP is looser here */
  color: var(--dp-ink);
  cursor: pointer;
  transition: border-color .18s var(--dp-ease-cta), color .18s var(--dp-ease-cta);
}
.dp-chip:hover { border-color: var(--dpx-border-a1126255p5, rgba(220, 73, 32, .5)); }
.dp-chip:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-chip.is-active { border-color: var(--dpx-fg-blue, var(--dp-blue)); color: var(--dpx-fg-blue, var(--dp-blue)); cursor: default; }
.dp-chip[disabled] { opacity: .4; cursor: not-allowed; }

/* --- Summary card + ATC --------------------------------------------------- */
/* MEASURED on DP: 461x136, radius 16, fill #F8F8F9, 16px inset. */
.dp-buycard {
  margin-top: var(--dp-s-9);
  padding: var(--dp-s-7);
  border-radius: var(--dp-r-2xs);
  background: var(--dpx-bg-f8f8f9, #F8F8F9);
}
.dp-buycard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dp-s-9); }
/* MEASURED on DP's price, and the name shares its line: 24/600 at 26.4px leading, -0.1px
   tracking. -1.2px was borrowed from the section headings and pulled this row noticeably tight. */
.dp-buycard__name { font-size: var(--dp-fs-h2); font-weight: var(--dp-fw-semi); line-height: 26.4px; letter-spacing: -.1px; }
/* MEASURED muted grey (#A19A93), not ink at 50% — the two read differently against #F8F8F9. */
.dp-buycard__ships,
.dp-buycard__eta { margin-top: var(--dp-s-1); font-size: var(--dp-fs-base); line-height: 18.2px; letter-spacing: -.1px; color: var(--dp-muted); }
.dp-buycard__right { text-align: right; }
.dp-buycard__price { font-size: var(--dp-fs-h2); font-weight: var(--dp-fw-semi); line-height: 26.4px; letter-spacing: -.1px; }
.dp-buycard__price .woocommerce-Price-amount { font-size: inherit; }

/* Selectors carry an extra class and the element DELIBERATELY. woo.css styles this button as
   `.woocommerce button.button` — (0,2,1) — which outranks a plain `.dp-pdp__buy .single_...`
   at (0,2,0) no matter which file loads last. That is why the button kept rendering at the
   14px body size instead of DP's measured 16, and why its padding came from the generic pill. */
.dp-pdp .dp-buycard button.single_add_to_cart_button,
.dp-pdp .dp-buycard button.dp-atc { width: 100%; height: 43px; border-radius: var(--dp-r-3xs); margin-top: var(--dp-s-6); }
.dp-pdp .dp-pdp__buy button.single_add_to_cart_button,
.dp-pdp .dp-pdp__buy button.dp-atc {
  display: flex; align-items: center; justify-content: center; gap: var(--dp-s-3);
  width: 100%; margin-top: var(--dp-s-6);
  padding: var(--dp-s-6) var(--dp-s-9);
  border: 0; border-radius: var(--dp-r-3xs);
  background: var(--dp-blue); color: var(--dp-on-dark);
  /* MEASURED 16/600 at 19.2px — a size up from the body, which is what gives DP's button its
     presence. At 14px it read as a secondary control. */
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  line-height: 19.2px; letter-spacing: -.1px;
  cursor: pointer; transition: filter .16s ease;
}
.dp-pdp .dp-pdp__buy button.single_add_to_cart_button:hover { filter: brightness(1.06); }
.dp-pdp .dp-pdp__buy button.single_add_to_cart_button.disabled,
.dp-pdp .dp-pdp__buy button.single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }
/* --- Quantity stepper ----------------------------------------------------
   DP has no stepper here; this is a deliberate departure, asked for directly. The rule that
   used to hide .quantity outright is gone — but the LABEL stays hidden, because "Quantity"
   printed above a −/+ control is noise, and the buttons carry their own aria-labels. */
.dp-pdp__buy .quantity { display: contents; }
.dp-pdp__buy .quantity label,
.dp-pdp__buy .quantity .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.dp-qty {
  display: inline-flex; align-items: center; gap: 0;
  height: 46px; margin-right: var(--dp-s-5);
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD); border-radius: 8px;
  background: var(--dp-surface);
  overflow: hidden; vertical-align: middle;
}
.dp-qty__step {
  width: 38px; height: 100%; flex: 0 0 38px;
  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: hover — on a touch screen :hover STICKS after a tap, so the + kept a blue tint
   long after the finger left it and the control read as half-pressed. */
@media (hover: hover) {
  .dp-qty__step:hover { background: var(--dpx-bg-eaf1fc, #FAEFEC); color: var(--dpx-fg-blue, var(--dp-blue)); }
}
.dp-qty__step:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -2px; }
.dp-qty__step[disabled] { opacity: .35; cursor: not-allowed; background: transparent; color: var(--dp-ink); }

/* The real WooCommerce field, restyled rather than replaced — it still carries the name the
   add-to-cart POST reads.

   SPECIFICITY: woo.css sets `.woocommerce .quantity input[type="number"]` at (0,2,1) with
   12px/16px padding and a 1px border. A plain `.dp-pdp__buy input.qty` is (0,2,0) and lost —
   the field kept 24px of vertical padding inside a 40px box, which left 16px for a 20px line
   and CLIPPED THE DIGIT. Prefixing .dp-pdp takes this to (0,3,1). */
.dp-pdp .dp-pdp__buy input.qty {
  width: 46px; height: 100%;
  padding: 0; border: 0; border-inline: 2px solid var(--dpx-border-c3c5cd, #C3C5CD);
  background: transparent; text-align: center;
  /* woo.css rounds this field; inside a bordered stepper that reads as a nested box rather
     than one control. */
  border-radius: 0;
  font-family: inherit; font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  color: var(--dp-ink);
  -moz-appearance: textfield;
}
.dp-pdp .dp-pdp__buy input.qty::-webkit-outer-spin-button,
.dp-pdp .dp-pdp__buy input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-pdp .dp-pdp__buy input.qty:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -2px; }

/* Stepper and button share one row inside the buy card. A flex row rather than the width
   arithmetic this used to do: calc(100% - 46px - 76px - gap) had to be restated at every
   breakpoint and was wrong the moment any of those numbers moved. */
.dp-buycard__row { display: flex; align-items: stretch; gap: var(--dp-s-5); margin-top: var(--dp-s-7); }
/* height:auto + stretch, NOT a fixed 46px. Both children carried their own height (44 and 43)
   so neither stretched, and the ATC button also kept a 14px margin-top from the (0,3,1) rule
   above — the stepper sat a a full 14px higher than the button beside it. */
.dp-buycard__row .dp-qty { margin-right: 0; flex: 0 0 auto; height: auto; align-self: stretch; }
.dp-pdp .dp-pdp__buy .dp-buycard__row button.single_add_to_cart_button { flex: 1 1 auto; width: auto; margin-top: 0; }
@media (max-width: 809px) {
  .dp-buycard__row { gap: var(--dp-s-4); }
  .dp-qty__step { width: 34px; flex-basis: 34px; }
  .dp-pdp .dp-pdp__buy input.qty { width: 42px; }
}

/* --- RUO + content -------------------------------------------------------- */
.dp-pdp__ruo {
  margin-top: var(--dp-s-9);
  padding: var(--dp-s-7);
  border: 1px solid var(--dp-hair-panel);
  border-radius: var(--dp-r-2xs);
  background: var(--dp-surface);
}
/* MEASURED 16/600 at 17.6px — a tight heading. The inherited 23.2px left it floating well
   above its own paragraph. */
.dp-pdp__ruo h2 { font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi); line-height: 17.6px; letter-spacing: -.1px; }
.dp-pdp__ruo p { margin-top: var(--dp-s-2); font-size: var(--dp-fs-base); color: var(--dp-muted); line-height: 18.2px; letter-spacing: -.1px; }

.dp-pdp__content { margin-top: var(--dp-s-10); padding-inline: var(--dp-s-10); }
.dp-pdp__block + .dp-pdp__block { margin-top: var(--dp-s-11); }
.dp-pdp__block h2 { font-size: 21px; font-weight: var(--dp-fw-semi); line-height: 28px; letter-spacing: -1.2px; }   /* measured 21/600/28/-1.2 */

/* MEASURED, and the reason this column read as washed out: DP sets the article copy in INK,
   not the muted grey. The grey belongs to the Research Use Only notice above it, which is
   supposed to recede — using it here dropped the main body of the page to the same weight as
   its small print.

   Size is calibrated against DP's own RUO paragraph rather than by nominal px, because Inter
   and SF Pro render a given font-size at different apparent sizes. The clone's RUO already
   matches DP's exactly at 14px (429x55 against 427x54), so DP's RUO is a ruler: its ink band
   measures 12.44px against 11.63px for its article copy, a ratio of 0.935 — hence 13px. */
.dp-pdp__block p {
  margin-top: var(--dp-s-5);
  font-size: 13px;
  line-height: 23px;                     /* measured 23.1px pitch */
  color: var(--dp-ink);
  letter-spacing: -.1px;
}

/* The reference, set apart from the prose as DP does — same size as the body, brand blue. Not
   an anchor: DP styles it like one, but there is no destination in the source copy and
   inventing a URL would be worse than a line that merely looks like a citation. */
/* Selector is two classes deep DELIBERATELY. `.dp-pdp__block p` above is (0,1,1) and a bare
   `.dp-pdp__cite` is (0,1,0), so the body rule wins the colour and the reference rendered in
   ink — styled, but indistinguishable from the prose it was meant to be set apart from. */
.dp-pdp__block p.dp-pdp__cite {
  margin-top: var(--dp-s-5);
  /* MEASURED 12/400 at 15.6px — a size DOWN from the copy it follows, not the same size. */
  font-size: var(--dp-fs-sm);
  line-height: 15.6px;
  letter-spacing: -.1px;
  color: var(--dpx-fg-blue, var(--dp-blue));
}

/* MEASURED on DP: each row is ONE line — "Molecular Formula: C165H269N47O46" — with the label
   and the value in the SAME 10/600 ink at 24px pitch. The two-column dl with a muted 14px label
   against an ink 14px value was a different component entirely: twice the size, half the weight,
   and split across a column gap that DP does not have. */
.dp-pdp__spec {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 4px;
  row-gap: 0;
  margin-top: var(--dp-s-5);
}
.dp-pdp__spec dt,
.dp-pdp__spec dd {
  margin: 0;
  font-size: 10px;
  font-weight: var(--dp-fw-semi);
  line-height: 24px;
  letter-spacing: -.5px;
  color: var(--dp-ink);
}

/* --- Responsive — DP's real breakpoints ----------------------------------- */
@media (max-width: 1199px) {
  .dp-pdp__grid { grid-template-columns: minmax(0, 1fr) 420px; }
  /* The buy column drops to 420 here, which leaves the fixed 200px Size column only 200 for
     Quantity — 29px short, so the pair wrapped again at 1024. Below the reference width DP's
     exact x990 start is not worth defending: size the Size column to its content and give
     Quantity everything left. */
  .dp-opts { grid-template-columns: max-content minmax(0, 1fr); }
}
/* 700-809: wide phones and small folds (iPhone Duo at ~703) have room for the
   desktop arrangement — image left, info right — just not for its fixed numbers.
   The media column loses its 62px end-inset (that was desktop air), the buy
   column narrows to roughly a phone card, and the display name steps down so it
   doesn't wrap every word in a ~320px column. The buy-card compaction below
   (34px steppers, tighter row gap) already covers this range. */
@media (min-width: 700px) and (max-width: 809px) {
  .dp-pdp { padding-block: var(--dp-s-7) var(--dp-s-10); }
  .dp-pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: var(--dp-s-7); }
  /* Header is 52px tall in this range (the ≤809 head rules), not 74. */
  .dp-pdp__media { justify-items: center; top: calc(52px + var(--dp-s-7)); }
  .dp-pdp__shot { width: min(360px, 100%); margin-right: 0; }
  .dp-pdp__name { font-size: 32px; line-height: 1.15; }
  /* One option group per row — the narrow buy column can't seat two. */
  .dp-opts { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s-5); }
}
@media (max-width: 699px) {
  .dp-pdp { padding-block: var(--dp-s-7) var(--dp-s-10); }
  .dp-pdp__grid { grid-template-columns: 1fr; gap: var(--dp-s-7); }
  /* Never let a full-height image push name, price and ATC off the first screen —
     the same failure VRL and Ideal GLPs both hit on mobile PDPs. */
  /* The desktop shot is a fixed 437px box end-justified with a 62px right margin. Both have
     to be undone here or a 390px viewport scrolls sideways by 125px — a fixed width plus a
     fixed margin cannot fit a narrower column, and max-width alone does not cancel the
     margin. */
  .dp-pdp__media { position: static; display: block; }
  .dp-pdp__shot {
    width: auto; margin-right: 0;
    /* The WHOLE square render, uncropped (the cap-to-pill crop is retired) —
       contained in a box short enough that name, price and ATC still make the
       first screen. */
    aspect-ratio: 1 / 1; height: auto; max-height: 44vh;
    /* An explicit width, centred. With width:auto the 44vh cap shrank the square through
       aspect-ratio and left it hugging one edge of the column instead of the middle. */
    width: min(80%, 44vh); margin-inline: auto;
    /* The renders carry ~15% empty canvas under the vial (room for its shadow). Pull the
       copy up into it so the name sits right under the product, not a screen-gap away. */
    margin-bottom: calc(min(80%, 44vh) * -0.12);
  }
  .dp-pdp__name { font-size: 30px; }
  /* Stacked, not side by side. Two columns on a 390 phone give each group ~179px, and the
     Quantity pair needs ~229 — so "Pack of 10" dropped below "Single Vial" and the row read
     as ragged. One group per row gives each the full measure and keeps its chips on one line. */
  .dp-opts { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s-5); }
  .dp-pdp__content { padding-inline: 0; }

  /* Single-column band: the structure block was tuned for the desktop side
     column and read lost out here — diagram stuck to the left edge of a
     full-width row, spec table at its 10px sidebar size, and sidebar-scale
     gaps between blocks. Centre the model, let the spec breathe, tighten the
     rhythm. */
  .dp-pdp__struct, .dp-pdp__struct3d { margin-inline: auto; }
  .dp-pdp__spec {
    max-width: 413px;
    margin-inline: auto;
    column-gap: 14px;
  }
  .dp-pdp__spec dt,
  .dp-pdp__spec dd { font-size: 12.5px; line-height: 30px; letter-spacing: -.2px; }
  .dp-pdp__block + .dp-pdp__block { margin-top: var(--dp-s-9); }
}

/* Structure diagram — measured 413x300 in DP's content column. */
.dp-pdp__struct { width: 100%; max-width: 413px; height: auto; margin-top: var(--dp-s-7); }

/* --- Interactive 3D structure --------------------------------------------
   Wraps the static diagram on products that ship an SDF. Until pdp-mol.js
   brings the model up (or when it can't), the flat image inside is all there
   is, so the wrapper itself must add nothing visible. Once live, the stage
   covers the image and the block becomes a quiet card: hairline border and a
   touch of surface so the model reads as an object you can pick up. */
.dp-pdp__struct3d { position: relative; width: 100%; max-width: 413px; margin-top: var(--dp-s-4); }
.dp-pdp__struct3d .dp-pdp__struct { margin-top: 0; }
/* No card around the live model: the monochrome molecule (white on dark,
   blue on light — set in pdp-mol.js) floats directly on the page. */
.dp-pdp__struct3d.is-live {
  /* Short stage: zoomTo() leaves generous air around flat molecules, and a
     340px-tall box plus that air pushed the spec list a screen away. */
  aspect-ratio: 413 / 280;
  overflow: hidden;
}
.dp-pdp__struct3d.is-live .dp-pdp__struct { display: none; }
.dp-pdp__molStage { position: absolute; inset: 0; cursor: grab; }
.dp-pdp__molStage:active { cursor: grabbing; }
/* 3Dmol sizes its canvas from the stage but positions it absolutely at the
   page origin unless the canvas is pinned back into the stage. */
.dp-pdp__molStage canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; background: transparent !important; }

.dp-pdp__molHint {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: var(--dp-r-pill);
  background: var(--dpx-bg-a414676p10, rgba(46, 36, 30, .08));
  font-size: var(--dp-fs-xs);
  font-weight: var(--dp-fw-medium);
  letter-spacing: .02em;
  color: var(--dp-muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--dp-ease-cta);
  white-space: nowrap;
}
.dp-pdp__struct3d.is-live .dp-pdp__molHint { opacity: 1; }
/* The hint has done its job the moment they grab the model. */
.dp-pdp__struct3d.is-held .dp-pdp__molHint { opacity: 0; }

/* ============================================================================
   Sticky add-to-cart — MEASURED on DP: desktop 915x90 at y799 (1440x900 viewport),
   mobile 359x164 at y663 (390x844). Appears on scroll, floats above the page.
   ============================================================================ */
/* ============================================================================
   Sticky add-to-cart — rebuilt from DP's rendered bar, not from an impression.

   MEASURED at 1440 (panel 915x90, radius 20, fill rgba(250,250,250,.7) over a
   10px backdrop blur, NO shadow), with everything positioned from the panel's
   own left edge:

     name        21/600 at +20,21   (186 wide)
     segment    122x30 r100 at +216,19 — a PILL CONTAINING TWO PILLS (55x22 r100,
                 4px inset, 5px apart); the selected one fills #E64519
     ships       14/400 at +20,53
     dose chip   70x34 RADIUS 8 (not a pill) at +444,28, 13/600, blue outline
     price       20/600 at +633,24   eta 15/400 at +699,49
     button     123x42 r90 at +772,24

   ANIMATION: this is a SCALE, not a slide. Solving the sampled matrix against
   the spring gives scale 0 -> 1 with y 100 -> 0 on one spring — reading only
   matrix index 5 previously made it look like a plain translate. Reversing the
   class runs the exit as the exact inverse, which is what DP does.
   ============================================================================ */
.dp-satc {
  position: fixed;
  left: 0; right: 0; bottom: 11px;
  z-index: 120;
  padding-inline: var(--dp-gutter);
  pointer-events: none;
}
.dp-satc[hidden] { display: block; }   /* animated, never display-toggled */

.dp-satc__in {
  display: flex;
  align-items: center;
  width: 100%; max-width: 915px; height: 90px;
  margin-inline: auto;
  padding: 0 20px;
  border-radius: var(--dp-r-xs);
  background: var(--dpx-bg-a250250250p7, rgba(250, 250, 250, .7));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: auto;
  transform: translateY(100px) scale(0);
  transition: transform .4s cubic-bezier(.22, 1.2, .36, 1);   /* fallback */
  transition: transform .4s linear(0, 0.0181, 0.0653, 0.1325, 0.2121, 0.2982, 0.3862, 0.4726, 0.5547, 0.6308, 0.7, 0.7615, 0.8153, 0.8616, 0.9006, 0.9329, 0.9592, 0.98, 0.9962, 1.0083, 1.0169, 1.0228, 1.0263, 1.028, 1.0283, 1.0276, 1.0261, 1.0241, 1.0218, 1.0193, 1.0168, 1.0144, 1.0121, 1.01, 1.0081, 1.0064, 1.0049, 1.0036, 1.0026, 1.0017, 1);
  will-change: transform;
}
.dp-satc.is-live .dp-satc__in { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .dp-satc__in { transition: transform .2s ease; transform: translateY(8px) scale(1); }
  .dp-satc.is-live .dp-satc__in { transform: none; }
}

.dp-satc__left { flex: 0 0 auto; min-width: 0; }
.dp-satc__row  { display: flex; align-items: center; gap: 10px; }
.dp-satc__name {
  font-size: 21px; font-weight: var(--dp-fw-semi);
  line-height: 26px; letter-spacing: -.6px;
  color: var(--dp-ink); white-space: nowrap;
}
.dp-satc__ships {
  display: block; margin-top: 4px;
  font-size: var(--dp-fs-base); line-height: 18px; letter-spacing: -.28px;
  color: var(--dp-ink-50);
}
.dp-satc__now { display: none; font-size: var(--dp-fs-sm); color: var(--dpx-fg-blue, var(--dp-blue)); font-weight: var(--dp-fw-medium); }

/* The pack choice: one pill holding two. */
.dp-satc__segChips {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 4px;
  border-radius: var(--dp-r-pill);
  background: var(--dpx-bg-a414676p06, rgba(46, 36, 30, .06));
}
.dp-satc__segChip {
  height: 22px; padding: 0 6px;          /* DP insets 6; its label sets 43 wide, ours ~57 */
  border: 0; border-radius: var(--dp-r-pill);
  background: none;
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium); letter-spacing: -.2px;
  color: var(--dp-ink-50); white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--dp-ease-cta), color .18s var(--dp-ease-cta);
}
.dp-satc__segChip:hover { color: var(--dp-ink); }
.dp-satc__segChip.is-active { background: var(--dpx-bg-0080ff, #E64519); color: var(--dp-on-dark); }
.dp-satc__segChip[disabled] { opacity: .4; cursor: not-allowed; }

/* The dose: an outlined ROUNDED RECT in the middle, not a pill. */
.dp-satc__dose { flex: 1 1 auto; display: flex; justify-content: center; }
.dp-satc__doseChips { display: inline-flex; align-items: center; gap: var(--dp-s-3); }
.dp-satc__doseChip {
  min-width: 70px; height: 34px; padding: 0 var(--dp-s-5);
  border: 1px solid var(--dpx-border-a1126255p45, rgba(220, 73, 32, .45));
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  font-size: 13px; font-weight: var(--dp-fw-semi); letter-spacing: -.2px;
  color: var(--dpx-fg-blue, var(--dp-blue)); white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--dp-ease-cta), border-color .18s var(--dp-ease-cta);
}
.dp-satc__doseChip:hover { background: var(--dpx-bg-f2f8ff, #FEF6F3); }
.dp-satc__doseChip.is-active { border-color: var(--dpx-fg-blue, var(--dp-blue)); background: var(--dpx-bg-f2f8ff, #FEF6F3); }
.dp-satc__doseChip[disabled] { opacity: .4; cursor: not-allowed; }

.dp-satc__buy { flex: 0 0 auto; display: flex; align-items: center; gap: 15px; }
.dp-satc__prices { display: flex; flex-direction: column; align-items: flex-end; }
.dp-satc__price {
  font-size: 20px; font-weight: var(--dp-fw-semi);
  line-height: 24px; letter-spacing: -.6px;
  color: var(--dp-ink); white-space: nowrap;
}
.dp-satc__eta {
  font-size: var(--dp-fs-md); line-height: 20px; letter-spacing: -.3px;
  color: var(--dp-ink-50); white-space: nowrap;
}
.dp-satc__btn {
  min-width: 123px; height: 42px; padding: 0 var(--dp-s-9);
  border: 0; border-radius: var(--dp-r-2xl);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi); letter-spacing: -.28px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--dp-ease-cta);
}
.dp-satc__btnPrice { display: none; }
.dp-satc__btn:hover { background: var(--dpx-bg-0067d1, #bc3915); }
.dp-satc__btn:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-satc__btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Mobile. MEASURED on DP at 390 (bar 359x164, i.e. 92% of the viewport) and again at
   430 (396x164, also 92%), so the bar is a PERCENTAGE of the screen, not a fixed inset.

   The layout is not the desktop one reflowed — it is a different arrangement:
     inner padding   16px  (desktop uses 20; this is most of what felt cramped)
     row 1  h78 at +16,16
        left column  segment 122x30 at the TOP, product name 21/600 under it at dy56,
                     "Order Now, Ships Today" 12/500 at dy79
        right        dose chip 50x30 RADIUS 6 at 11/600, right-aligned at dy16
     row 2  the button is FULL WIDTH, 42 tall, and carries the price inside it
   --------------------------------------------------------------------------- */
@media (max-width: 809px) {
  .dp-satc { bottom: 17px; padding-inline: 0; }

  /* The compact bar mirrors the buy card's arrangement so the two read as the
     same component: controls on top, name | price, ships | eta, then one
     full-width button. display:contents flattens the wrappers so the grid can
     place the leaves. */
  .dp-satc__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    column-gap: var(--dp-s-5);
    row-gap: 10px;
    width: 92%;
    max-width: 430px;
    height: auto;
    padding: 16px;
  }
  .dp-satc__left, .dp-satc__row, .dp-satc__buy, .dp-satc__prices { display: contents; }
  .dp-satc__seg   { grid-column: 1; grid-row: 1; justify-self: start; }
  .dp-satc__dose  { grid-column: 2; grid-row: 1; flex: none; justify-content: flex-end; align-self: center; }
  .dp-satc__doseChips { gap: 6px; }
  .dp-satc__doseChip {
    min-width: 50px; height: 30px; padding: 0 var(--dp-s-4);
    border-radius: 6px;
    font-size: 11px;
  }
  .dp-satc__name  { grid-column: 1; grid-row: 2; font-size: 21px; line-height: 22px; letter-spacing: -.6px; white-space: normal; }
  .dp-satc__price { grid-column: 2; grid-row: 2; justify-self: end; font-size: 21px; line-height: 22px; letter-spacing: -.6px; font-weight: var(--dp-fw-semi); }
  .dp-satc__ships { grid-column: 1; grid-row: 3; display: block; margin-top: -6px; font-size: var(--dp-fs-sm); }
  .dp-satc__eta   { grid-column: 2; grid-row: 3; justify-self: end; margin-top: -6px; font-size: var(--dp-fs-sm); }
  .dp-satc__now   { display: none; }
  .dp-satc__btn   {
    grid-column: 1 / -1; grid-row: 4;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-width: 0; height: 42px; padding: 0 var(--dp-s-7);
    font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi);
  }
  /* The price lives at the top right like the buy card, not inside the button. */
  .dp-satc__btnPrice { display: none; }
}

/* --- Quantity bundles ("Stock up & save") ---------------------------------
   Sits between the option chips and the Add to Cart button. The chips answer "which one",
   this answers "how many", and the button acts — so it belongs in that order and nowhere
   else. Hidden until JS has priced it (the [hidden] attribute), because an unpriced grid of
   three empty boxes is worse than no grid.

   The border weight and radius deliberately echo .dp-chip: this is the same KIND of control
   as the option chips — a choice you tap — and a shopper should not have to learn a second
   visual language halfway down the buy box. */
.dp-bundles { margin-top: var(--dp-s-9); }
.dp-bundles[hidden] { display: none; }

.dp-bundles__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--dp-s-4);
}
.dp-bundles__title {
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-semi);
  line-height: 20.8px; letter-spacing: -.32px; color: var(--dp-ink);
}
.dp-bundles__hint {
  font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-regular);
  line-height: 15.6px; color: var(--dp-muted);
}

.dp-bundles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-3); }

.dp-bundle {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* Top padding is larger than bottom to leave room for the "Most popular" tag, which is
     absolutely positioned across the border. Every tile carries the same padding so the
     three sit on one baseline whether or not they are tagged. */
  padding: var(--dp-s-7) var(--dp-s-3) var(--dp-s-5);
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD); border-radius: 8px;
  background: var(--dp-surface);
  cursor: pointer; text-align: center;
  transition: border-color var(--dp-t-cta) var(--dp-ease-cta),
              background-color var(--dp-t-cta) var(--dp-ease-cta);
}
.dp-bundle:hover { border-color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-bundle:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }

.dp-bundle--pop { border-color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-bundle__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 2px var(--dp-s-3);
  border-radius: var(--dp-r-pill);
  background: var(--dp-blue); color: var(--dp-on-dark);
  font-size: 10px; font-weight: var(--dp-fw-semi); line-height: 14px;
  letter-spacing: -.2px; white-space: nowrap;
}

.dp-bundle__qty   { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-medium); line-height: 18.2px; color: var(--dp-ink-60); }
.dp-bundle__price { font-size: var(--dp-fs-h4);   font-weight: var(--dp-fw-semi);   line-height: 24px; letter-spacing: -.4px; color: var(--dp-ink); }
.dp-bundle__was   { font-size: var(--dp-fs-sm);   line-height: 15.6px; color: var(--dp-muted); text-decoration: line-through; }
.dp-bundle__was[hidden] { display: none; }
.dp-bundle__save  { font-size: var(--dp-fs-sm);   font-weight: var(--dp-fw-semi); line-height: 15.6px; color: var(--dpx-fg-blue, var(--dp-blue)); }
/* The 1-vial tile has no saving to announce, so its label is a neutral descriptor and must
   not wear the blue that means "money off" on the other two. */
.dp-bundle:first-child .dp-bundle__save { color: var(--dp-muted); font-weight: var(--dp-fw-regular); }

/* --- Bulk row ------------------------------------------------------------- */
.dp-bulk {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s-4);
  width: 100%; margin-top: var(--dp-s-3);
  padding: var(--dp-s-5) var(--dp-s-7);
  border: 2px solid var(--dpx-border-c3c5cd, #C3C5CD); border-radius: 8px;
  background: var(--dp-surface-alt);
  cursor: pointer; text-align: left;
  transition: border-color var(--dp-t-cta) var(--dp-ease-cta);
}
.dp-bulk:hover { border-color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-bulk:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }
.dp-bulk[hidden] { display: none; }

.dp-bulk__l, .dp-bulk__r { display: flex; flex-direction: column; gap: 2px; }
.dp-bulk__r { align-items: flex-end; }
.dp-bulk__qty  { font-size: var(--dp-fs-lg);   font-weight: var(--dp-fw-semi); line-height: 20.8px; letter-spacing: -.32px; color: var(--dp-ink); }
.dp-bulk__save { font-size: var(--dp-fs-sm);   line-height: 15.6px; color: var(--dp-ink-60); }
.dp-bulk__best { font-size: 10px; font-weight: var(--dp-fw-semi); line-height: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-bulk__price{ font-size: var(--dp-fs-h4);   font-weight: var(--dp-fw-semi); line-height: 24px; letter-spacing: -.4px; color: var(--dp-ink); }
.dp-bulk__was  { font-size: var(--dp-fs-sm);   line-height: 15.6px; color: var(--dp-muted); text-decoration: line-through; }

@media (max-width: 809px) {
  /* Three tiles across a phone leaves ~105px each, which is enough for the price but not for
     "Save 5%" beside a struck-through figure — so the tiles keep three columns and the type
     steps down rather than the grid reflowing to one column, which would cost 200px of
     height right where the buy decision happens. */
  .dp-bundle { padding: var(--dp-s-6) var(--dp-s-2) var(--dp-s-4); }
  .dp-bundle__price { font-size: var(--dp-fs-lg); line-height: 22px; }
  .dp-bundle__qty, .dp-bundle__was, .dp-bundle__save { font-size: var(--dp-fs-xs); line-height: 15px; }
  .dp-bundle__tag { font-size: 9px; padding: 2px var(--dp-s-2); }
  .dp-bulk { padding: var(--dp-s-4) var(--dp-s-5); }
  .dp-bulk__qty { font-size: var(--dp-fs-base); }
  .dp-bulk__save { font-size: var(--dp-fs-xs); }
}

/* The tier matching the current quantity reads as SELECTED. Until the stepper existed the
   tiles were momentary buttons — you tapped one and it added — so none of them needed a
   resting selected state. Now the quantity persists on the page, and a tile that never looks
   chosen leaves the shopper unable to tell which price the button is about to charge.

   Distinct from --pop, which is an editorial label ("Most popular") and does not move. */
.dp-bundle.is-active {
  border-color: var(--dpx-fg-blue, var(--dp-blue));
  background: var(--dpx-bg-f2f8ff, #FEF6F3);
}
.dp-bundle.is-active .dp-bundle__qty { color: var(--dpx-fg-blue, var(--dp-blue)); font-weight: var(--dp-fw-semi); }

/* --- "Fill" slider (replaces the strength chips) ---------------------------
   One notch per carried strength; the thumb magnetizes to notches and the
   readout rolls through the in-between numbers while dragging. */
.dp-opt--fill { margin-top: 2px; }
.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); }

/* ============================================================================
   Spec-sheet register (2026-11-02) — the buy column, compact and researchy.

   One visual language for everything that takes money: 10px letterspaced
   uppercase micro-labels, monospace tabular figures, 1px hairlines instead of
   2px card borders, and roughly half the old padding. The selected state is
   the bulk sheet's inset ring, not a heavier border, so nothing shifts.
   Overrides the original consumer-sized rules above wholesale — tuning this
   block tunes the register everywhere on the page.
   ============================================================================ */
.dp-opt__label,
.dp-bundles__title {
  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-bundles { margin-top: var(--dp-s-7); }
.dp-bundles__head { margin-bottom: var(--dp-s-3); }
.dp-bundles__hint {
  font-family: var(--dp-mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dp-ink-50);
}
.dp-bundles__grid { gap: 6px; }
.dp-bundle {
  gap: 1px;
  padding: 9px 4px 7px;
  border-width: 1px; border-color: var(--dp-hair-panel, #E7E1D9);
  border-radius: var(--dp-r-3xs);
}
.dp-bundle__qty {
  font-family: var(--dp-mono);
  font-size: 9.5px; font-weight: var(--dp-fw-medium); line-height: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--dp-muted);
}
.dp-bundle__price {
  font-family: var(--dp-mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: var(--dp-fw-bold); line-height: 18px; letter-spacing: -.2px;
}
.dp-bundle__was {
  font-family: var(--dp-mono);
  font-size: 9.5px; line-height: 13px;
}
.dp-bundle__save { font-size: 10px; line-height: 14px; letter-spacing: 0; }
.dp-bundle__tag {
  padding: 1px 7px;
  font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 12px;
}
.dp-bundle.is-active {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dpx-border-017eff, var(--dp-blue));
  background: var(--dpx-bg-f2f8ff, #FEF6F3);
}
.dp-bundle--pop { border-color: var(--dpx-border-a1126255p45, rgba(220, 73, 32, .45)); }

.dp-bulk {
  margin-top: 6px;
  padding: 8px 12px;
  border-width: 1px; border-color: var(--dp-hair-panel, #E7E1D9);
  border-radius: var(--dp-r-3xs);
}
.dp-bulk__l, .dp-bulk__r { gap: 0; }
.dp-bulk__qty  { font-size: var(--dp-fs-base); font-weight: var(--dp-fw-semi); line-height: 18px; letter-spacing: -.1px; }
.dp-bulk__save { font-family: var(--dp-mono); font-size: 9.5px; line-height: 13px; letter-spacing: .04em; text-transform: uppercase; }
.dp-bulk__best { font-family: var(--dp-mono); font-size: 8.5px; line-height: 12px; letter-spacing: .08em; }
.dp-bulk__price{ font-family: var(--dp-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: var(--dp-fw-bold); line-height: 18px; letter-spacing: -.2px; }
.dp-bulk__was  { font-family: var(--dp-mono); font-size: 9.5px; line-height: 13px; }

.dp-buycard { margin-top: var(--dp-s-7); padding: var(--dp-s-6) var(--dp-s-7) var(--dp-s-7); }
.dp-buycard__name { font-size: var(--dp-fs-lg); line-height: 21px; }
.dp-buycard__price {
  font-family: var(--dp-mono); font-variant-numeric: tabular-nums;
  font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-bold); line-height: 21px; letter-spacing: -.2px;
}
.dp-buycard__ships,
.dp-buycard__eta {
  font-family: var(--dp-mono);
  font-size: 9.5px; line-height: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.dp-pdp .dp-buycard button.single_add_to_cart_button,
.dp-pdp .dp-buycard button.dp-atc { height: 40px; }
.dp-buycard__row { margin-top: var(--dp-s-5); }

@media (max-width: 809px) {
  .dp-bundle { padding: 8px 3px 6px; }
  .dp-bundle__price { font-size: 12.5px; }
  .dp-bundle__qty, .dp-bundle__was { font-size: 9px; }
  .dp-bundle__save { font-size: 9.5px; }
  .dp-bulk { padding: 7px 10px; }
}

/* The Buy-10 banner is the qty-10 tier tile now; it selects like one. */
.dp-bulk.is-active {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dpx-border-017eff, var(--dp-blue));
  background: var(--dpx-bg-f2f8ff, #FEF6F3);
}