/* product.css: product detail templates (clinical precision) */

.detail,.upcoming-detail{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:var(--s-8);padding-top:var(--s-5);padding-bottom:var(--s-8)}
.gallery{position:sticky;top:var(--s-5)}

/* Photograph plate */
.image-zoom{display:block;position:relative;width:100%;padding:0;background:var(--plate);border:1px solid var(--line);border-radius:var(--r);cursor:zoom-in;overflow:hidden}
.detail-image{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:0;background:var(--plate)}
.image-zoom{transition:border-color var(--t) var(--ease)}
.image-zoom:hover{border-color:var(--line-strong)}
.zoom-label{position:absolute;right:var(--s-4);top:var(--s-4);background:rgba(255,255,255,.94);border:1px solid var(--line);padding:6px 10px;border-radius:var(--r-xs);font-size:var(--fs-fine);font-weight:500;letter-spacing:.01em;color:var(--ink-2)}
.image-caption{font-size:.8125rem;line-height:1.6;color:var(--muted);margin:var(--s-3) 0 0}

/* Title block */
.research-badge{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:var(--ink);padding:6px 10px;border:0;border-radius:var(--r-xs);background:var(--paper-2)}
.research-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.detail .eyebrow,.upcoming-detail .eyebrow{margin:var(--s-4) 0 var(--s-2)}
.detail h1,.upcoming-detail h1{font-size:clamp(2.25rem,3.6vw,3.25rem);letter-spacing:-.028em;line-height:1.04;margin:0 0 var(--s-3);overflow-wrap:anywhere}
.detail-copy,.upcoming-lead,.upcoming-note{color:var(--muted);line-height:1.7;margin:0}
.detail-amount{font-family:var(--mono);font-size:1.25rem;color:var(--blue);margin:0 0 var(--s-5)}
.upcoming-note{margin-top:var(--s-5);font-size:.8125rem}

/* Option pickers */
.option-heading{font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2);margin:var(--s-5) 0 var(--s-2)}
.options{display:flex;gap:var(--s-2)}
.option{border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s-3) var(--s-4);min-width:96px;text-align:center;background:var(--paper);font-size:.9375rem}
.option small{display:block;font-family:var(--mono);font-size:var(--fs-fine);margin-top:4px;color:var(--muted)}
.option.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-tint);color:var(--blue)}

/* Launch panel (legacy) */
.launch-panel{margin:var(--s-5) 0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5)}
.launch-panel strong{font-weight:500}
.launch-panel p{font-size:var(--fs-small);line-height:1.6;color:var(--muted);margin:var(--s-2) 0 0}
.full-button{display:flex;justify-content:center;width:100%;margin-top:var(--s-4)}

/* Facts: a three-cell spec strip */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:var(--s-6) 0 0;padding:0}
.facts span{padding:var(--s-4) var(--s-4) var(--s-4) 0;font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.facts span+span{padding-left:var(--s-4);border-left:1px solid var(--line)}
.facts strong{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin-bottom:2px;font-variant-numeric:tabular-nums}

/* Accordions */
.accordions details{border-bottom:1px solid var(--line)}
.accordions summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;font-size:.9375rem;font-weight:500;transition:color var(--t) var(--ease)}
.accordions summary:hover{color:var(--blue)}
.accordions summary::-webkit-details-marker{display:none}
.accordions summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:1rem;color:var(--blue);width:16px;text-align:center}
.accordions details[open]>summary::after{content:"\2212"}
.accordions p{color:var(--muted);font-size:.9375rem;line-height:1.7;margin:0 0 var(--s-4)}
.accordions .specs{margin:0 0 var(--s-4)}

/* Related */
.related{padding-top:var(--s-7);padding-bottom:var(--s-8);border-top:1px solid var(--line)}
.related h2{font-size:1.75rem;margin-bottom:var(--s-5)}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.related-card{display:block}
.related-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--plate);border-radius:var(--r)}
.related-card h3{font-size:1rem;margin-top:var(--s-3)}
.related-card p{font-family:var(--mono);font-size:var(--fs-fine);color:var(--blue);margin:var(--s-1) 0}
.related-card span{font-size:var(--fs-fine);color:var(--muted)}

/* Enlarged image dialog */
dialog{border:1px solid var(--line);border-radius:var(--r);padding:52px var(--s-3) var(--s-3);max-width:92vw;max-height:92vh;background:var(--paper)}
dialog::backdrop{background:rgba(15,26,48,.72)}
dialog img{display:block;max-width:80vw;max-height:75vh;width:auto;height:auto}
dialog button{position:absolute;right:var(--s-3);top:var(--s-2);min-height:36px;border:1px solid var(--line-strong);background:var(--paper);padding:0 var(--s-3);border-radius:var(--r-xs);cursor:pointer;color:var(--ink);font-size:.8125rem;font-weight:500}

@media(max-width:700px){
  .detail,.upcoming-detail{grid-template-columns:1fr;gap:var(--s-5);padding-top:var(--s-4);padding-bottom:var(--s-6)}
  .gallery{position:static}
  .detail .eyebrow,.upcoming-detail .eyebrow{margin:var(--s-4) 0 var(--s-2)}
  .detail h1,.upcoming-detail h1{font-size:2.125rem;margin-bottom:var(--s-3)}
  .detail-copy,.upcoming-lead{font-size:.9375rem;line-height:1.65}
  .image-caption{font-size:var(--fs-fine)}
  .facts{margin-top:var(--s-5)}
  .facts span{padding:var(--s-3) var(--s-2) var(--s-3) 0;letter-spacing:.04em}
  .facts span+span{padding-left:var(--s-3)}
  .facts strong{font-size:.875rem}
  .accordions summary{padding:var(--s-4) 0;min-height:48px}
  .related{padding-top:var(--s-6);padding-bottom:var(--s-6)}
  .related h2{font-size:1.5rem;margin-bottom:var(--s-4)}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
  .related-card:last-child{display:none}
  dialog button{min-height:44px;min-width:44px}
}

/* Vial size selector: reads like a spec picker */
.vial-options{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.vial-options .variant-choice{flex:0 1 auto;min-width:76px;min-height:48px;padding:0 var(--s-4);white-space:nowrap;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease)}
.vial-options .variant-choice:hover{border-color:var(--ink-2);color:var(--ink)}
.vial-options .variant-choice.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-tint);color:var(--blue)}
.variant-status{font-family:var(--sans);font-size:var(--fs-fine);font-weight:450;letter-spacing:.01em;text-transform:none;color:var(--muted);margin:var(--s-2) 0 0}
@media(max-width:700px){
  .vial-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
  .vial-options .variant-choice{min-width:0;padding:0 var(--s-2);font-size:.875rem}
}

/* Tablet (701–1024px): give the purchase column the room it needs so the
   CTA, variant chips and spec strip never wrap awkwardly. */
@media(min-width:701px) and (max-width:1024px){
  .detail,.upcoming-detail{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:var(--s-6)}
  .vial-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
  .vial-options .variant-choice{min-width:0;padding:0 var(--s-2)}
  .purchase-actions>.shop-primary{white-space:nowrap}
  .facts span{padding:var(--s-4) var(--s-3) var(--s-4) 0;font-family:var(--sans);font-size:.8125rem;letter-spacing:.005em;text-transform:none}
  .facts span+span{padding-left:var(--s-3)}
  .facts strong{white-space:nowrap}
}

/* White seamless product photography. */
.image-zoom,.detail-image{background:#fff}
.image-zoom{border-color:transparent}