/* Product-page presentation. Original vial artwork stays unchanged. */
:root{
  --vial-key:color-mix(in srgb,var(--surface) 92%,transparent);
  --vial-fill:color-mix(in srgb,var(--paper-3) 42%,transparent);
  --vial-contact:color-mix(in srgb,var(--inverse-bg) 26%,transparent);
  --vial-cast:color-mix(in srgb,var(--inverse-bg) 12%,transparent);
  --vial-rim:color-mix(in srgb,var(--surface) 20%,transparent);
}
@media(prefers-color-scheme:dark){
  :root{
    --vial-key:color-mix(in srgb,var(--line-2) 72%,transparent);
    --vial-fill:color-mix(in srgb,var(--paper-3) 40%,transparent);
    --vial-contact:color-mix(in srgb,var(--inverse-bg) 70%,transparent);
    --vial-cast:color-mix(in srgb,var(--inverse-bg) 64%,transparent);
    --vial-rim:color-mix(in srgb,var(--ink) 32%,transparent);
  }
}
.pdp__stage,.skeleton-pdp__media{aspect-ratio:5/6;border:0;border-radius:0;box-shadow:none}
.pdp__stage{isolation:isolate;overflow:visible;background:transparent}
.pdp__stage::before,.pdp__stage::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.pdp__stage::before{inset:0;background:radial-gradient(ellipse closest-side at 44% 34%,var(--vial-key),var(--vial-fill) 55%,transparent)}
.pdp__stage::after{left:50%;bottom:7.5%;width:30%;height:3%;transform:translateX(-50%);background:radial-gradient(ellipse,var(--vial-contact),transparent 70%);filter:blur(3px)}
.pdp__stage .pmedia{inset:8% 0 auto;height:84%;padding:0;filter:drop-shadow(-1px -1px 1px var(--vial-rim)) drop-shadow(8px 12px 12px var(--vial-cast))}
.pdp__origin{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pdp__origin img{display:block;width:20px;height:auto}
@media(max-width:900px){
  .pdp__stage,.skeleton-pdp__media{aspect-ratio:auto;height:clamp(280px,46svh,420px);max-height:none}
  .pdp__stage .pmedia{inset:10% 0 auto;height:80%;transform:translateY(-16px)}
  .pdp__stage::after{bottom:calc(9.5% + 16px)}
  .pdp__origin{left:8px;top:8px}
}
@media(max-width:640px){
  .pdp{row-gap:0}
  .pdp__info{margin-top:-6px}
  .pdp__stage .pmedia{transform:none}
  .pdp__stage::after{bottom:9.5%}
  .pdp__origin{padding:6px 0;font-size:14px}
  .pdp__origin img{width:24px}
}
.dispatch-preview--product{margin-top:-6px;margin-bottom:4px}
#pdp-dispatch:not([hidden]) ~ #pdp-msg:empty{display:none}
#pdp-dispatch:not([hidden]) ~ .pdp__section{margin-top:20px}
.dose__opt{font-size:14px;min-width:88px;min-height:44px;padding:8px 14px}
.dose__opt span{font-size:12px}
.dose__opt.active span{color:inherit}
.pdp__price .amt{font-size:2.35rem}
.pdp__info{min-width:0}
.pdp__heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:4px}
.pdp__heading h1{min-width:0;margin:0;overflow-wrap:anywhere}
.pdp__heading #pdp-rank-badge{flex:none;font-size:10px;letter-spacing:.12em;padding:5px 9px;line-height:1.3;white-space:nowrap}
.pdp__sub{margin-top:16px}
.pdp__availability{margin:0;min-height:24px;font-weight:400}
/* Released COA links keep a full tap area without enlarging the proof row. */
.pdp__coa-link{position:relative;min-height:0}
.pdp__coa-link::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
.dose{margin:16px 0 0}
.pdp__price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-variant-numeric:tabular-nums}
.pdp__unit-price{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.pdp__original{font-size:1rem;color:var(--muted)}
.pdp__each{font-size:12px;color:var(--ink-3);white-space:nowrap}
.pdp__price .qty button:disabled{color:var(--muted);opacity:.55;cursor:not-allowed;background:transparent}
.pdp__price{flex-direction:row;align-items:center;justify-content:space-between;margin:20px 0 14px;gap:16px}
.pdp__price .qty{flex:none;padding:0}
.pdp__price .qty button{width:44px;height:46px}
.pdp__price .qty span{min-width:28px;font-size:16px;font-variant-numeric:tabular-nums}
.pdp__buy .btn{width:100%;justify-content:center}
.pdp__assurance{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 16px;margin-top:4px;color:var(--sage);font-size:12px}
.pdp__assurance > span,.pdp__protection{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.pdp__assurance svg{width:16px;height:16px;flex:none}
.pdp__protection{padding:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.pdp__protection:hover{color:var(--ink)}
.pdp__protection:active{transform:translateY(1px)}
.pdp__protection:focus-visible,.pdp__price .qty button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pdp__protection-tip{position:fixed;inset:auto;margin:0;width:min(300px,calc(100vw - 32px));padding:16px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper);color:var(--ink-2);font-size:13px;line-height:1.6}
.pdp__protection-tip p{margin:0}
.pdp__payment-marks{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 16px}
.pdp__payment-marks span{display:flex;align-items:center;justify-content:center;min-width:36px;height:32px}
.pdp__payment-marks img{display:block;width:36px;height:25px;object-fit:contain}
.pdp-bundle{margin:0}
.pdp-bundle + .pdp__buy{margin-top:18px}
.pdp-bundle h2{font-family:var(--font-sans);font-size:12px;font-weight:600;line-height:1.4;margin:0 0 16px}
.pdp-bundle__choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pdp-bundle__option{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:86px;padding:12px 4px 4px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--font-sans);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .15s var(--ease)}
.pdp-bundle__option.is-on{border-color:var(--ink);background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--ink)}
@media(hover:hover){.pdp-bundle__option:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}}
.pdp-bundle__option:active:not(:disabled){transform:translateY(1px)}
.pdp-bundle__option:disabled{cursor:not-allowed;color:var(--muted);background:var(--paper-2)}
.pdp-bundle__option:disabled .pdp-bundle__art{opacity:.45}
.pdp-bundle__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:1;width:max-content;max-width:calc(100% + 12px);padding:3px 4px;border-radius:100px;background:var(--ink);color:var(--paper);font-size:9px;font-weight:600;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-bundle__badge:empty{display:none}
.pdp-bundle__option[data-bundle-qty="2"] .pdp-bundle__badge{background:var(--sage)}
.pdp-bundle__quantity{font-size:12px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.pdp-bundle__saving{font-size:10px;line-height:1.4;color:var(--ink-3);overflow-wrap:anywhere}
.pdp-bundle__art{position:relative;display:block;width:54px;max-width:100%;height:36px;flex:none;margin:0 auto 2px;pointer-events:none}
/* The thumbnails reuse the untouched vial files without inheriting the
   full-stage positioning, padding or lighting. Three vials represent 10+. */
.pdp-bundle__art .pmedia{position:absolute;inset:auto;bottom:0;left:50%;width:auto;height:36px;max-width:none;max-height:none;padding:0;object-fit:contain;transform:translateX(-50%);filter:none}
.pdp-bundle__art[data-vials="2"]>.pmedia:first-child,.pdp-bundle__art[data-vials="2"]>picture:first-child>.pmedia{left:35%;height:32px}
.pdp-bundle__art[data-vials="2"]>.pmedia:last-child,.pdp-bundle__art[data-vials="2"]>picture:last-child>.pmedia{left:63%}
.pdp-bundle__art[data-vials="3"]>.pmedia:first-child,.pdp-bundle__art[data-vials="3"]>picture:first-child>.pmedia{left:25%;height:31px}
.pdp-bundle__art[data-vials="3"]>.pmedia:nth-child(2),.pdp-bundle__art[data-vials="3"]>picture:nth-child(2)>.pmedia{left:75%;height:31px}
.pdp-bundle__art[data-vials="3"]>.pmedia:last-child,.pdp-bundle__art[data-vials="3"]>picture:last-child>.pmedia{left:50%}
.pdp-bundle__option:focus-visible,.pdp-bar--purchase button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pdp-bar__qty button:active:not(:disabled){transform:translateY(1px)}
.coa-rail__track{gap:24px}
.coa-rail__track > article{flex:0 0 clamp(280px,44%,480px);min-width:0}
.coa-rail__track > :not(article){flex:1 0 100%}
.rail--coa .rail__btn{top:50%}
.rail--coa .rail__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pdp-bar--purchase{display:none}
@media(max-width:640px){
  .pdp__heading{column-gap:12px}
  .pdp__heading #pdp-rank-badge{font-size:9px}
  .dose__label,.seo-dose-list>p{display:none}
  .dose{margin-top:16px}
  .pdp__price{margin-top:18px;gap:8px}
  .pdp__price-row{display:grid;gap:4px}
  .pdp__unit-price{gap:6px}
  .pdp__price .amt{font-size:clamp(1.75rem,8.5vw,2rem)}
  .pdp__original{font-size:12px;line-height:1.2}
  .pdp__each{font-size:11px;line-height:1.2}
  .pdp{padding-bottom:112px}
  body:has(.pdp-bar--purchase){padding-bottom:var(--pdp-bar-space,240px)}
  .pdp-bundle__choices{gap:6px}
  .pdp-bar--purchase{display:grid;gap:8px;padding:12px max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--paper);box-shadow:none;opacity:1;transform:translateY(0);transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .pdp-bar--purchase.is-hidden{opacity:0;transform:translateY(100%);pointer-events:none;transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .pdp-bar__summary{display:grid;gap:4px;min-width:0}
  .pdp-bar__price-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pdp-bar__price{display:grid;grid-template-columns:max-content max-content;align-items:baseline;gap:0 6px;min-width:0;font-variant-numeric:tabular-nums}
  .pdp-bar__each{font-size:11px;color:var(--ink-3)}
  .pdp-bar__original{grid-column:1/-1;font-size:11px;line-height:1.2;color:var(--muted)}
  .pdp-bar--purchase .pdp-bar__amt{font-family:var(--font-display);font-size:20px;font-weight:400;white-space:nowrap;line-height:1.2;letter-spacing:-.014em;font-variant-numeric:tabular-nums}
  .pdp-bar--purchase.is-saving .pdp-bar__amt{color:var(--accent-ink)}
  .pdp-bar__controls{display:grid;gap:8px;min-width:0}
  .pdp-bar__doses{display:flex;grid-column:1/-1;gap:8px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:4px;margin:-4px;scroll-padding:4px}
  .pdp-bar__qty{flex:none;padding:0;font-variant-numeric:tabular-nums}
  .pdp-bar__qty button{width:44px;height:46px}
  .pdp-bar__qty span{min-width:28px;font-size:16px}
  .pdp-bar__qty button:disabled{background:transparent;color:var(--muted);cursor:not-allowed}
  .pdp-bar__mass{flex:1 0 auto;min-width:52px;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink-2);font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
  .pdp-bar__mass.is-on{background:var(--paper-3);border-color:var(--ink-3);color:var(--ink)}
  .pdp-bar__mass.is-oos{text-decoration:line-through;text-decoration-thickness:1px}
  .pdp-bar__mass:hover{border-color:var(--ink)}
  .pdp-bar__mass:active{transform:translateY(1px)}
  .pdp-bar--purchase .btn{width:100%;min-height:48px;padding:8px 16px;gap:8px;font-size:14px}
  .pdp-bar--purchase .btn svg{width:18px;height:18px;flex:none}
}
@media(prefers-reduced-motion:reduce){
  .pdp-bundle__option,.pdp-bar--purchase,.pdp-bar--purchase.is-hidden,.pdp-bar__mass{transition:none}
  .pdp-bundle__option:hover:not(:disabled),.pdp-bundle__option:active:not(:disabled),.pdp-bar__mass:active,.pdp-bar__qty button:active:not(:disabled),.pdp__protection:active{transform:none}
}
/* Purchase-column information uses the existing native FAQ controls. */
.pdp-information{margin-top:24px}
.pdp-why{border-top:1px solid var(--line);padding-top:24px}
.pdp-why h2{font-size:20px;font-weight:500;line-height:1.2;margin:0 0 24px}
.pdp-why__reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.pdp-why__reason{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pdp-why__icon{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;color:var(--sage)}
.pdp-why__icon svg{width:22px;height:22px}
.pdp-why__icon img{display:block;max-width:100%;height:auto;border-radius:2px}
.pdp-why h3{font-family:var(--font-sans);font-size:14px;line-height:1.5;font-weight:600;margin:0 0 4px}
.pdp-why p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;text-wrap:pretty}
.pdp-disclosures{margin-top:24px;border-top:1px solid var(--line)}
.pdp-disclosures summary{padding:16px 0;font-family:var(--font-sans);font-size:16px;gap:16px}
.pdp-disclosures summary .ic{width:24px;height:24px;border:0}
.pdp-disclosures summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pdp-disclosures summary:active .ic{transform:scale(.94)}
.pdp-disclosures .ans{padding-bottom:20px;font-size:15px;line-height:1.7}
.pdp-disclosures .ans>p>a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:3px}
.pdp-guide-links a{white-space:nowrap}
.pdp-faq h3{font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);margin:0 0 4px;text-wrap:pretty}
.pdp-faq p{margin:0 0 16px;text-wrap:pretty}
.pdp-faq p:last-child{margin-bottom:0}
.pdp-faq .nw{white-space:nowrap}
.pdp-disclosures .spectable{table-layout:fixed}
.pdp-disclosures .spectable th,.pdp-disclosures .spectable td{padding:12px 0;vertical-align:top;overflow-wrap:anywhere;font-style:normal;font-size:14px}
.pdp-disclosures .spectable th{padding-right:12px}
.pdp-specs-notices{margin-top:20px}
.pdp-specs-notices h3{font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.5;color:var(--ink);margin:16px 0 4px}
.pdp-specs-notices p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0;text-wrap:pretty}
.pdp-disclosures .product-research-list{max-width:none;margin:0;padding-left:20px;gap:12px;font-size:14px;line-height:1.6}
@media(max-width:640px){.pdp-why__reasons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pdp-disclosures summary:active .ic{transform:none}}
/* Server-rendered Add waits a moment for js/product-purchase.js (data-await-cart). Draw it as the live button so enabling it never flashes. */
.btn[data-await-cart]:disabled{background:var(--bg);color:var(--fg);border-color:var(--bd);cursor:default}

/* A quiet closing note keeps research-use context visible when disclosures are closed. */
.pdp-research-notice{margin:16px 0 0;max-width:48ch;font-family:var(--font-sans);font-size:14px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}

/* Sign-in gate (js/sign-in-gate.js): a product marked Sign-in required, seen signed out. The page stays in place, blurred, desaturated (so its terracotta buy button never competes with the card) and inert, under a card that rides the viewport while the visitor scrolls the product and stops where it ends, so the header and footer stay usable. Each section carries its own blur, which every engine paints; the overlay's lighter backdrop blur, where painted, smooths the seams between them. */
.is-sign-in-gated #main-content{position:relative}
.is-sign-in-gated #main-content>:not(.sign-in-gate){filter:blur(12px) saturate(.5);pointer-events:none;user-select:none;-webkit-user-select:none}
.is-sign-in-gated .sign-in-gate{display:block;position:absolute;inset:0;z-index:20;background:color-mix(in srgb,var(--paper) 40%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* The fixed purchase bar is hidden under the gate, so its reserved space below the footer goes too (js/product-purchase.js sets it inline). */
.is-sign-in-gated .pdp-bar{visibility:hidden}
.is-sign-in-gated body:has(.pdp-bar--purchase){padding-bottom:0!important}
.sign-in-gate__stage{position:sticky;top:var(--header-h);display:grid;place-items:center;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));max-height:100%;padding:24px var(--gutter)}
.sign-in-gate__card{width:min(460px,100%);max-height:100%;overflow-y:auto;padding:clamp(28px,5vw,44px);border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);text-align:center;animation:sign-in-gate-in .32s var(--ease) both}
.sign-in-gate__eyebrow{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sign-in-gate__title{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(26px,4.4vw,34px);font-weight:500;line-height:1.15;text-wrap:balance}
.sign-in-gate__body{margin:0 auto;max-width:36ch;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
.sign-in-gate__actions{display:grid;gap:10px;margin-top:26px}
.sign-in-gate__actions .btn{width:100%;min-height:48px;margin:0;justify-content:center}
@keyframes sign-in-gate-in{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.sign-in-gate__card{animation:none}}