/* =====================================================================
   SANAN RELIEF - interactive components ported verbatim from the
   static reference (product filter, modal, format explorer,
   manufacturing stepper, legacy timeline, legal TOC, breadcrumbs).
   ===================================================================== */

/* ---------- BREADCRUMBS ---------- */
.sr-crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--sr-grey);
  margin-bottom:18px;font-weight:500;flex-wrap:wrap;}
.sr-crumbs a{color:var(--sr-slate);text-decoration:none;}
.sr-crumbs a:hover{color:var(--sr-teal-deep);}
.sr-crumbs span{color:var(--sr-red);}

/* ---------- FILTER CHIPS ---------- */
.sr-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:30px;}
.sr-chip{font-family:Poppins,sans-serif;font-weight:600;font-size:14px;padding:10px 18px;border-radius:30px;
  border:1.5px solid var(--sr-border);color:var(--sr-slate);background:#fff;cursor:pointer;
  transition:all .25s var(--sr-ease);}
.sr-chip:hover{border-color:var(--sr-teal-light);}
.sr-chip.is-active{background:var(--sr-teal-deep);border-color:var(--sr-teal-deep);color:#fff;}
.sr-chip.is-active[data-filter="rx"]{background:var(--sr-red);border-color:var(--sr-red);}

/* ---------- PRODUCT GRID ---------- */
.sr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px;}
.sr-pcard{background:#fff;border:1px solid var(--sr-border);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;transition:transform .3s var(--sr-ease),box-shadow .3s var(--sr-ease),border-color .3s var(--sr-ease);}
.sr-pcard:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(31,40,43,.10);border-color:var(--sr-teal-light);}
.sr-pcard.is-hidden{display:none;}
.sr-pmedia{aspect-ratio:4/3;border-radius:10px;margin-bottom:18px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--sr-teal-soft),var(--sr-teal-light));}
.sr-pcard[data-cat="rx"] .sr-pmedia{background:linear-gradient(160deg,var(--sr-red-soft),#F0D3D3);}
.sr-bottle{width:46px;height:96px;border-radius:8px 8px 6px 6px;position:relative;transition:transform .35s var(--sr-ease);
  background:linear-gradient(160deg,#4B9A99,#34706F);}
.sr-pcard[data-cat="rx"] .sr-bottle{background:linear-gradient(160deg,#B9762E,#7C4E1E);}
.sr-pcard:hover .sr-bottle{transform:translateY(-6px);}
.sr-bottle:before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:18px;height:12px;
  background:var(--sr-ink);border-radius:3px 3px 0 0;}
.sr-bottle i{position:absolute;inset:auto 5px 12px;height:40px;background:#fff;border-radius:3px;display:block;}
.sr-pfmt{font-size:13px;color:var(--sr-grey);font-weight:500;margin:12px 0 4px;letter-spacing:.02em;}
.sr-pcard h3{font-family:Poppins,sans-serif;font-size:18px;line-height:1.25;color:var(--sr-ink);margin:0 0 8px;}
.sr-pconc{font-family:Poppins,sans-serif;font-weight:600;color:var(--sr-teal-deep);font-size:14px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s var(--sr-ease),max-height .3s var(--sr-ease);}
.sr-pcard:hover .sr-pconc,.sr-pcard:focus-within .sr-pconc{opacity:1;max-height:32px;}
.sr-pcard p{color:var(--sr-slate);font-size:15px;line-height:1.6;flex-grow:1;margin:8px 0 18px;}
.sr-plink{font-family:Poppins,sans-serif;font-weight:600;font-size:14px;color:var(--sr-teal-deep);
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:none;border:0;cursor:pointer;padding:0;}
.sr-pcard[data-cat="rx"] .sr-plink{color:var(--sr-red);}
.sr-plink .arw{transition:transform .3s var(--sr-ease);}
.sr-pcard:hover .sr-plink .arw{transform:translateX(5px);}

/* ---------- MODAL ---------- */
.sr-modal-overlay{position:fixed;inset:0;background:rgba(31,40,43,.55);z-index:99990;display:none;
  align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s var(--sr-ease);}
.sr-modal-overlay.is-open{display:flex;opacity:1;}
.sr-modal{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;
  transform:translateY(16px);transition:transform .35s var(--sr-ease);}
.sr-modal-overlay.is-open .sr-modal{transform:translateY(0);}
.sr-modal-head{padding:28px 32px 18px;border-bottom:1px solid var(--sr-border);position:sticky;top:0;background:#fff;
  z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.sr-modal-head h3{font-family:Poppins,sans-serif;font-size:22px;margin:0;color:var(--sr-ink);line-height:1.2;}
.sr-modal-head .sr-sku{font-size:13px;color:var(--sr-grey);margin-top:6px;}
.sr-modal-close{width:40px;height:40px;border-radius:10px;background:var(--sr-grey-light);color:var(--sr-slate);
  display:grid;place-items:center;flex-shrink:0;border:0;cursor:pointer;font-size:16px;transition:background .2s;}
.sr-modal-close:hover{background:var(--sr-border);}
.sr-modal-body{padding:24px 32px 32px;}
.sr-kv{padding:14px 0;border-bottom:1px solid var(--sr-border);}
.sr-kv:last-of-type{border-bottom:none;}
.sr-kv b{font-family:Poppins,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sr-grey);display:block;margin-bottom:4px;}
.sr-kv span{color:var(--sr-ink);font-size:15px;}
.sr-modal-note{background:var(--sr-red-soft);color:var(--sr-red);font-size:14px;padding:14px 16px;border-radius:10px;
  margin:20px 0;display:flex;gap:10px;align-items:flex-start;}
.sr-modal .sr-cta{display:inline-flex;align-items:center;gap:8px;background:var(--sr-teal-deep);color:#fff;
  font-family:Poppins,sans-serif;font-weight:600;font-size:15px;padding:14px 24px;border-radius:10px;text-decoration:none;margin-top:10px;}
.sr-modal .sr-cta.is-rx{background:var(--sr-red);}

/* ---------- FORMAT EXPLORER ---------- */
.sr-fmt{display:grid;grid-template-columns:290px 1fr;gap:36px;align-items:start;}
.sr-fmt-list{display:flex;flex-direction:column;gap:8px;}
.sr-fmt-btn{display:flex;align-items:center;gap:14px;text-align:left;padding:15px 18px;border-radius:12px;
  border:1px solid var(--sr-border);background:#fff;cursor:pointer;transition:all .25s var(--sr-ease);
  font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:var(--sr-ink);}
.sr-fmt-btn .ic{width:38px;height:38px;border-radius:10px;background:var(--sr-teal-soft);color:var(--sr-teal);
  display:grid;place-items:center;flex-shrink:0;transition:all .25s var(--sr-ease);}
.sr-fmt-btn.is-active{border-color:var(--sr-teal);background:var(--sr-teal-soft);}
.sr-fmt-btn.is-active .ic{background:var(--sr-teal);color:#fff;}
.sr-fmt-panel{background:#fff;border:1px solid var(--sr-border);border-radius:14px;padding:36px;min-height:320px;}
.sr-fmt-inner{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  animation:srFade .45s var(--sr-ease);}
@keyframes srFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sr-fmt-visual{aspect-ratio:1/1;border-radius:14px;display:grid;place-items:center;color:var(--sr-teal-deep);
  background:linear-gradient(160deg,var(--sr-teal-soft),var(--sr-teal-light));}
.sr-fmt-visual svg{width:42%;height:42%;}
.sr-fmt-info h3{font-family:Poppins,sans-serif;font-size:24px;margin:10px 0 6px;color:var(--sr-ink);}
.sr-fmt-info p{color:var(--sr-slate);line-height:1.65;margin:0 0 14px;}
.sr-fmt-info .sr-kv{padding:12px 0;}
@media (max-width:900px){.sr-fmt{grid-template-columns:1fr}.sr-fmt-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .sr-fmt-btn{flex-direction:column;min-width:112px;text-align:center;gap:8px;font-size:13px}
  .sr-fmt-inner{grid-template-columns:1fr}}

/* ---------- MANUFACTURING STEPPER ---------- */
.sr-mfg{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start;}
.sr-mfg-steps{display:flex;flex-direction:column;gap:4px;}
.sr-mfg-step{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:12px;cursor:pointer;
  transition:all .3s var(--sr-ease);border:1px solid transparent;background:none;text-align:left;width:100%;}
.sr-mfg-step:hover{background:#fff;}
.sr-mfg-step.is-on{background:#fff;border-color:var(--sr-teal-light);box-shadow:0 2px 10px rgba(31,40,43,.05);}
.sr-mfg-step .n{width:34px;height:34px;border-radius:9px;background:var(--sr-grey-light);color:var(--sr-slate);
  font-family:Poppins,sans-serif;font-weight:700;font-size:14px;display:grid;place-items:center;flex-shrink:0;transition:all .3s var(--sr-ease);}
.sr-mfg-step.is-on .n{background:var(--sr-red);color:#fff;}
.sr-mfg-step span:last-child{font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:var(--sr-ink);}
.sr-mfg-panel{background:#fff;border:1px solid var(--sr-border);border-radius:14px;overflow:hidden;}
.sr-mfg-visual{aspect-ratio:16/10;display:grid;place-items:center;color:var(--sr-teal-deep);
  background:linear-gradient(160deg,var(--sr-teal-soft),var(--sr-teal-light));}
.sr-mfg-visual svg{width:28%;}
.sr-mfg-progress{height:3px;background:var(--sr-border);}
.sr-mfg-progress i{display:block;height:100%;background:var(--sr-teal);width:12.5%;transition:width .4s var(--sr-ease);}
.sr-mfg-desc{padding:26px 30px;}
.sr-mfg-desc .lbl{font-family:Poppins,sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sr-red);}
.sr-mfg-desc h3{font-family:Poppins,sans-serif;font-size:21px;margin:8px 0 10px;color:var(--sr-ink);}
.sr-mfg-desc p{color:var(--sr-slate);margin:0;line-height:1.65;}
@media (max-width:900px){.sr-mfg{grid-template-columns:1fr;gap:24px}}

/* ---------- LEGACY TIMELINE ---------- */
.sr-tl{position:relative;padding-left:34px;}
.sr-tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--sr-border);}
.sr-tl-fill{position:absolute;left:8px;top:6px;width:2px;background:linear-gradient(var(--sr-teal),var(--sr-red));height:0;}
.sr-tl-item{position:relative;padding:0 0 42px;}
.sr-tl-item:last-child{padding-bottom:0;}
.sr-tl-node{position:absolute;left:-34px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid var(--sr-grey);transition:all .35s var(--sr-ease);}
.sr-tl-item.is-on .sr-tl-node{border-color:var(--sr-red);box-shadow:0 0 0 6px var(--sr-red-soft);transform:scale(1.12);}
.sr-tl-yr{font-family:Poppins,sans-serif;font-weight:700;color:var(--sr-teal);font-size:17px;}
.sr-tl-item.is-on .sr-tl-yr{color:var(--sr-red);}
.sr-tl-item h3{font-family:Poppins,sans-serif;font-size:19px;margin:4px 0 8px;color:var(--sr-ink);}
.sr-tl-item p{color:var(--sr-slate);margin:0;line-height:1.65;max-width:62ch;}

/* ---------- GHOST YEAR ---------- */
.sr-ghost-year{position:absolute;right:-1%;bottom:-16%;font-family:Poppins,sans-serif;font-weight:700;
  font-size:clamp(9rem,20vw,18rem);color:var(--sr-teal-soft);line-height:.8;z-index:0;pointer-events:none;
  letter-spacing:-.03em;user-select:none;}
@media (max-width:767px){.sr-ghost-year{display:none}}

/* ---------- LEGAL TOC ---------- */
.sr-legal-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;}
.sr-toc{position:sticky;top:110px;align-self:start;}
.sr-toc h4{font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sr-grey);margin:0 0 14px;}
.sr-toc nav a{display:block;padding:7px 0 7px 14px;font-size:14px;color:var(--sr-slate);
  border-left:2px solid var(--sr-border);text-decoration:none;transition:all .2s var(--sr-ease);}
.sr-toc nav a:hover,.sr-toc nav a.is-current{color:var(--sr-teal-deep);border-color:var(--sr-teal);}
@media (max-width:900px){.sr-legal-grid{grid-template-columns:1fr;gap:24px}.sr-toc{position:static;display:none}}

/* ---------- ACCESS PILLS ---------- */
.sr-access{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 10px;border-radius:30px;margin-top:10px;}
.sr-access:before{content:"";width:6px;height:6px;border-radius:50%;}
.sr-access.public{background:var(--sr-teal-soft);color:var(--sr-teal-deep);}
.sr-access.public:before{background:var(--sr-teal);}
.sr-access.request{background:var(--sr-red-soft);color:var(--sr-red);}
.sr-access.request:before{background:var(--sr-red);}
.sr-access.hcp{background:var(--sr-grey-light);color:var(--sr-slate);}
.sr-access.hcp:before{background:var(--sr-slate);}

@media (prefers-reduced-motion:reduce){
  .sr-pcard,.sr-bottle,.sr-fmt-btn,.sr-mfg-step,.sr-tl-node,.sr-modal{transition:none;}
  .sr-pcard:hover{transform:none;box-shadow:none;}
  .sr-fmt-inner{animation:none;}
}

/* ---------- EVIDENCE LIBRARY (expandable cards) ---------- */
.sr-evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.sr-ev-card{background:#fff;border:1px solid var(--sr-border);border-radius:14px;overflow:hidden;
  transition:border-color .3s var(--sr-ease),box-shadow .3s var(--sr-ease);}
.sr-ev-card.is-open{border-color:var(--sr-teal-light);box-shadow:0 8px 22px rgba(31,40,43,.06);}
.sr-ev-head{display:flex;align-items:center;gap:12px;padding:20px 22px;cursor:pointer;width:100%;
  background:none;border:0;text-align:left;}
.sr-ev-head .ic{width:40px;height:40px;border-radius:10px;background:var(--sr-teal-soft);color:var(--sr-teal);
  display:grid;place-items:center;flex-shrink:0;}
.sr-ev-head h4{font-family:Poppins,sans-serif;font-size:15px;color:var(--sr-ink);margin:0;flex-grow:1;line-height:1.3;}
.sr-ev-head .chev{color:var(--sr-grey);transition:transform .3s var(--sr-ease);flex-shrink:0;}
.sr-ev-card.is-open .chev{transform:rotate(180deg);}
.sr-ev-body{max-height:0;overflow:hidden;transition:max-height .4s var(--sr-ease);}
.sr-ev-body-inner{padding:0 22px 22px;color:var(--sr-slate);font-size:14px;line-height:1.6;}
@media (prefers-reduced-motion:reduce){.sr-ev-body,.sr-ev-card,.sr-ev-head .chev{transition:none;}}