/*
 * Oncology Product Page — Patient-Focused Template
 * BEM-ish class prefix: oncp-
 *
 * Design language: cancer support / patient charity
 * Warm teal primary, soft backgrounds, generous whitespace, readable 18px body
 *
 * Mobile-first. Breakpoints: 600 px (sm), 768 px (md), 1024 px (lg)
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --oncp-primary:       #0E7C7B;   /* teal */
  --oncp-primary-dark:  #085C5B;
  --oncp-primary-light: #E6F4F4;
  --oncp-accent:        #F2994A;   /* warm amber */
  --oncp-accent-light:  #FEF3E9;
  --oncp-danger:        #B91C1C;
  --oncp-danger-light:  #FEF2F2;
  --oncp-warn:          #92400E;
  --oncp-warn-light:    #FFFBEB;
  --oncp-text:          #1F2937;
  --oncp-muted:         #6B7280;
  --oncp-border:        #E5E7EB;
  --oncp-bg:            #F9FAFB;
  --oncp-white:         #FFFFFF;
  --oncp-radius:        0.75rem;
  --oncp-radius-sm:     0.5rem;
  --oncp-shadow:        0 2px 12px rgba(0,0,0,.08);
  --oncp-shadow-md:     0 4px 24px rgba(0,0,0,.12);
  --oncp-max-width:     1140px;
  --oncp-section-gap:   3rem;
  --oncp-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.oncp-wrap *,
.oncp-wrap *::before,
.oncp-wrap *::after {
  box-sizing: border-box;
}

.oncp-wrap {
  width:        100%;
  min-width:    0;
  overflow-x:   hidden;
  font-family:  var(--oncp-font);
  color:        var(--oncp-text);
  font-size:    1rem;
  line-height:  1.7;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.oncp-skip-link {
  position:   absolute;
  top:        -9999px;
  left:       1rem;
  padding:    0.5rem 1rem;
  background: var(--oncp-primary);
  color:      var(--oncp-white);
  border-radius: var(--oncp-radius-sm);
  z-index:    9999;
  font-size:  0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.oncp-skip-link:focus { top: 1rem; }

/* ── WC notices ─────────────────────────────────────────────────────────── */
.oncp-wc-notices {
  max-width: var(--oncp-max-width);
  margin:    0 auto;
  padding:   0 1rem;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.oncp-breadcrumb {
  background: var(--oncp-bg);
  border-bottom: 1px solid var(--oncp-border);
  font-size: 0.8125rem;
  color:     var(--oncp-muted);
}
.oncp-breadcrumb-inner {
  max-width: var(--oncp-max-width);
  margin:    0 auto;
  padding:   0.625rem 1.25rem;
  display:   flex;
  flex-wrap: wrap;
  gap:       0.375rem;
  align-items: center;
}
.oncp-breadcrumb a {
  color:           var(--oncp-primary);
  text-decoration: none;
}
.oncp-breadcrumb a:hover { text-decoration: underline; }
.oncp-breadcrumb span[aria-hidden] { color: var(--oncp-muted); }
.oncp-breadcrumb span[aria-current] { color: var(--oncp-text); font-weight: 500; }

/* ── Page layout ────────────────────────────────────────────────────────── */
.oncp-page-wrap {
  max-width: var(--oncp-max-width);
  margin:    0 auto;
  padding:   0 1.25rem;
}
.oncp-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--oncp-section-gap);
  padding:        2rem 0 4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-hero {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  padding:        1.5rem 0 0;
}

/* Gallery column */
.oncp-gallery-col { flex: 0 0 auto; }

.oncp-gallery-main {
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  overflow:      hidden;
  aspect-ratio:  1;
  max-width:     400px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.oncp-gallery-main img {
  width:        100%;
  height:       100%;
  object-fit:   contain;
  display:      block;
}
.oncp-gallery-placeholder {
  width:      100%;
  aspect-ratio: 1;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:        0.5rem;
  background: linear-gradient(135deg, var(--oncp-primary-light), #d4eded);
  color:      var(--oncp-primary);
  text-align: center;
  padding:    2rem;
}
.oncp-placeholder-brand {
  font-size:   1.25rem;
  font-weight: 700;
}
.oncp-placeholder-form {
  font-size:  0.875rem;
  color:      var(--oncp-primary-dark);
}
.oncp-gallery-placeholder .bi {
  font-size: 3rem;
  opacity:   0.4;
  margin-top: 0.5rem;
}

.oncp-gallery-thumbs {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  margin-top: 0.75rem;
  max-width:  400px;
}
.oncp-gallery-thumb {
  width:         60px;
  height:        60px;
  border:        2px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  overflow:      hidden;
  cursor:        pointer;
  transition:    border-color 0.2s;
  flex-shrink:   0;
}
.oncp-gallery-thumb:hover,
.oncp-gallery-thumb.active { border-color: var(--oncp-primary); }
.oncp-gallery-thumb img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

/* Info column */
.oncp-info-col { flex: 1 1 auto; }

.oncp-rx-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.3rem;
  background:    var(--oncp-warn-light);
  color:         var(--oncp-warn);
  border:        1px solid #D97706;
  border-radius: 2rem;
  font-size:     0.75rem;
  font-weight:   600;
  padding:       0.25rem 0.75rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.oncp-hero-title {
  font-size:     clamp(1.5rem, 4vw, 2.25rem);
  font-weight:   800;
  line-height:   1.2;
  color:         var(--oncp-text);
  margin:        0 0 0.5rem;
}
.oncp-hero-subtitle {
  font-size:   1.0625rem;
  color:       var(--oncp-muted);
  margin:      0 0 0.5rem;
}
.oncp-hero-generic {
  font-style: italic;
  font-size:  0.9375rem;
}
.oncp-hero-tagline {
  font-size:   1.0625rem;
  line-height: 1.6;
  color:       var(--oncp-text);
  margin:      0 0 1.25rem;
}

/* Key facts */
.oncp-key-facts {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.625rem;
  margin:                0 0 1.5rem;
}
.oncp-fact {
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  padding:       0.625rem 0.875rem;
}
.oncp-fact-label {
  display:     block;
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--oncp-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}
.oncp-fact-value {
  display:     block;
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--oncp-text);
}

/* CTA zone */
.oncp-enquiry-zone {
  background:    var(--oncp-primary-light);
  border:        1px solid #A7D4D3;
  border-radius: var(--oncp-radius);
  padding:       1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
}
.oncp-btn-enquiry {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  width:           100%;
  background:      var(--oncp-primary);
  color:           var(--oncp-white);
  border:          none;
  border-radius:   var(--oncp-radius-sm);
  font-size:       1.0625rem;
  font-weight:     700;
  padding:         0.875rem 1.75rem;
  cursor:          pointer;
  transition:      background 0.2s, transform 0.15s;
  text-decoration: none;
  letter-spacing:  0.01em;
}
.oncp-btn-enquiry:hover {
  background: var(--oncp-primary-dark);
  transform:  translateY(-1px);
}
.oncp-btn-enquiry:active  { transform: translateY(0); }
.oncp-btn-enquiry:focus-visible {
  outline:        3px solid var(--oncp-accent);
  outline-offset: 2px;
}
.oncp-btn-enquiry .bi { font-size: 1.125rem; }

.oncp-price-signal {
  display:     flex;
  align-items: flex-start;
  gap:         0.4rem;
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--oncp-primary-dark);
  margin:      0.75rem 0 0;
}
.oncp-price-signal .bi {
  flex-shrink: 0;
  margin-top:  0.15rem;
  color:       var(--oncp-accent);
}

.oncp-enquiry-note {
  display:     flex;
  align-items: flex-start;
  gap:         0.4rem;
  font-size:   0.8125rem;
  color:       var(--oncp-muted);
  margin-top:  0.625rem;
  line-height: 1.5;
}
.oncp-enquiry-note .bi { flex-shrink: 0; margin-top: 0.1rem; }

/* Trust micro bar */
.oncp-trust-micro {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem 1rem;
  font-size: 0.8125rem;
  color:     var(--oncp-muted);
}
.oncp-trust-micro-item {
  display:     flex;
  align-items: center;
  gap:         0.3rem;
}
.oncp-trust-micro-item .bi { color: var(--oncp-primary); }
.oncp-trust-micro-item a {
  color:           var(--oncp-primary);
  text-decoration: none;
}
.oncp-trust-micro-item a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
 * TRUST BAR
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-trust-bar {
  background:    var(--oncp-primary);
  border-radius: var(--oncp-radius);
  padding:       1.5rem 1.25rem;
}
.oncp-trust-tiles {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}
.oncp-trust-tile {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  color:       var(--oncp-white);
}
.oncp-trust-tile .bi {
  font-size:  1.5rem;
  flex-shrink: 0;
  opacity:    0.85;
  margin-top: 0.1rem;
}
.oncp-trust-tile strong {
  display:     block;
  font-size:   0.9375rem;
  font-weight: 700;
  margin-bottom: 0.125rem;
}
.oncp-trust-tile span {
  font-size: 0.8125rem;
  opacity:   0.85;
}
.oncp-trust-tile a {
  color:           rgba(255,255,255,0.9);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SHARED SECTION STYLES
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-section {
  scroll-margin-top: 80px;
}
.oncp-eyebrow {
  font-size:       0.75rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--oncp-primary);
  margin-bottom:   0.375rem;
}
.oncp-h2 {
  font-size:     clamp(1.375rem, 3.5vw, 1.875rem);
  font-weight:   800;
  line-height:   1.25;
  color:         var(--oncp-text);
  margin:        0 0 1rem;
}
.oncp-h3 {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--oncp-text);
  margin:      0 0 0.75rem;
}
.oncp-lead {
  font-size:   1.0625rem;
  color:       var(--oncp-muted);
  line-height: 1.65;
  margin:      0 0 1.25rem;
}
.oncp-body-text p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.75;
}
.oncp-body-text p:last-child { margin-bottom: 0; }
.oncp-notice {
  display:       flex;
  align-items:   flex-start;
  gap:           0.5rem;
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  padding:       0.75rem 1rem;
  font-size:     0.875rem;
  color:         var(--oncp-muted);
  margin-top:    1.25rem;
  line-height:   1.55;
}
.oncp-notice .bi { flex-shrink: 0; margin-top: 0.1rem; color: var(--oncp-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
 * MECHANISM STEPS
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-steps {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-top:     1.25rem;
}
.oncp-step {
  display:       flex;
  gap:           1rem;
  align-items:   flex-start;
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  padding:       1rem 1.125rem;
}
.oncp-step-num {
  flex-shrink:   0;
  width:         2rem;
  height:        2rem;
  border-radius: 50%;
  background:    var(--oncp-primary);
  color:         var(--oncp-white);
  font-size:     0.875rem;
  font-weight:   800;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-top:    0.1rem;
}
.oncp-step-body strong {
  display:     block;
  font-size:   0.9375rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.oncp-step-body p {
  margin:    0;
  font-size: 0.9375rem;
  color:     var(--oncp-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INDICATIONS
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-indication-list {
  display:        flex;
  flex-direction: column;
  gap:            0.875rem;
  margin-bottom:  1rem;
}
.oncp-indication-item {
  display:       flex;
  gap:           0.875rem;
  align-items:   flex-start;
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-left:   4px solid var(--oncp-primary);
  border-radius: var(--oncp-radius-sm);
  padding:       0.875rem 1rem;
}
.oncp-indication-icon {
  flex-shrink: 0;
  color:       var(--oncp-primary);
  font-size:   0.5rem;
  margin-top:  0.45rem;
}
.oncp-indication-body strong {
  display:     block;
  font-size:   0.9375rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.oncp-indication-body p {
  margin:    0 0 0.5rem;
  font-size: 0.9rem;
  color:     var(--oncp-muted);
}
.oncp-approval-badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.375rem;
  margin-top: 0.375rem;
}
.oncp-approval-badge {
  font-size:     0.6875rem;
  font-weight:   700;
  padding:       0.15rem 0.55rem;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oncp-approval-badge--approved {
  background: #D1FAE5;
  color:      #065F46;
}
.oncp-approval-badge--offlabel {
  background: #FEF3C7;
  color:      #92400E;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DOSAGE CARD
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-dosage-card {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  align-items:    flex-start;
  background:     var(--oncp-primary-light);
  border:         1px solid #A7D4D3;
  border-radius:  var(--oncp-radius);
  padding:        1.5rem;
}
.oncp-dosage-icon {
  flex-shrink: 0;
  font-size:   2rem;
  color:       var(--oncp-primary);
  margin-top:  0.1rem;
}
.oncp-dosage-card-body p {
  margin:    0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.oncp-dosage-card-body p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * SAFETY SECTION
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Boxed warning — softened */
.oncp-warning-card {
  background:    var(--oncp-warn-light);
  border:        1px solid #D97706;
  border-left:   5px solid #D97706;
  border-radius: var(--oncp-radius-sm);
  padding:       1rem 1.25rem;
  margin-bottom: 1rem;
}
.oncp-warning-card-header {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--oncp-warn);
  margin-bottom: 0.5rem;
}
.oncp-warning-card-header .bi { font-size: 1.125rem; }
.oncp-warning-card-body {
  font-size:   0.9375rem;
  color:       var(--oncp-text);
  line-height: 1.6;
  margin:      0;
}

/* Common SE — simple list */
.oncp-se-simple {
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  padding:       1.25rem 1.5rem;
  margin:        1.25rem 0;
}
.oncp-se-intro {
  font-size:   0.9375rem;
  color:       var(--oncp-muted);
  margin:      0 0 0.75rem;
}
.oncp-se-list {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.375rem 1.5rem;
  list-style:            none;
  padding:               0;
  margin:                0;
  font-size:             0.9375rem;
}
.oncp-se-list li::before {
  content: "· ";
  color:   var(--oncp-primary);
  font-weight: 700;
}

/* Urgent / serious SE card */
.oncp-urgent-card {
  background:    var(--oncp-danger-light);
  border:        1px solid #FCA5A5;
  border-left:   5px solid var(--oncp-danger);
  border-radius: var(--oncp-radius-sm);
  padding:       1.125rem 1.25rem;
  margin:        1.25rem 0;
}
.oncp-urgent-card h3 {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--oncp-danger);
  margin:      0 0 0.75rem;
}
.oncp-urgent-card h3 .bi { flex-shrink: 0; }
.oncp-urgent-card ul {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
}
.oncp-urgent-card li {
  font-size:  0.9375rem;
  line-height: 1.5;
}
.oncp-urgent-card li strong { display: block; color: var(--oncp-danger); }
.oncp-urgent-card li span   { display: block; color: var(--oncp-muted); font-size: 0.875rem; }

/* Interactions brief */
.oncp-interactions-brief {
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  padding:       1.25rem 1.5rem;
  margin:        1.25rem 0;
}
.oncp-interactions-brief p {
  font-size:   0.9375rem;
  color:       var(--oncp-muted);
  margin:      0 0 1rem;
}
.oncp-ix-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.875rem;
}
.oncp-ix-list li {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         0.375rem;
  font-size:   0.9375rem;
  line-height: 1.5;
}
.oncp-ix-list li strong { font-weight: 700; }
.oncp-ix-list li p {
  flex:        0 0 100%;
  margin:      0.125rem 0 0;
  font-size:   0.875rem;
  color:       var(--oncp-muted);
}
.oncp-ix-badge {
  font-size:     0.6875rem;
  font-weight:   700;
  padding:       0.15rem 0.6rem;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oncp-ix-badge-critical { background: #FEE2E2; color: var(--oncp-danger); }
.oncp-ix-badge-major    { background: var(--oncp-warn-light); color: var(--oncp-warn); }

/* Pregnancy brief */
.oncp-pregnancy-brief {
  display:       flex;
  gap:           0.875rem;
  align-items:   flex-start;
  background:    var(--oncp-accent-light);
  border:        1px solid #FED7AA;
  border-radius: var(--oncp-radius-sm);
  padding:       1rem 1.25rem;
  margin:        1.25rem 0;
}
.oncp-pregnancy-brief > .bi {
  flex-shrink: 0;
  font-size:   1.25rem;
  color:       var(--oncp-accent);
  margin-top:  0.1rem;
}
.oncp-pregnancy-brief div { flex: 1; }
.oncp-pregnancy-brief strong {
  display:     block;
  font-size:   0.9375rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.oncp-pregnancy-brief p {
  margin:    0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.oncp-pregnancy-brief p:last-child { margin-bottom: 0; }

.oncp-safety-footer {
  font-size:  0.875rem;
  color:      var(--oncp-muted);
  margin-top: 1.25rem;
}
.oncp-safety-footer a { color: var(--oncp-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
 * STORAGE GRID
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-storage-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.875rem;
}
.oncp-storage-card {
  display:       flex;
  gap:           0.75rem;
  align-items:   flex-start;
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  padding:       0.875rem 1rem;
}
.oncp-storage-card > .bi {
  flex-shrink: 0;
  font-size:   1.25rem;
  color:       var(--oncp-primary);
  margin-top:  0.1rem;
}
.oncp-storage-card div { flex: 1; }
.oncp-storage-card strong {
  display:     block;
  font-size:   0.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.oncp-storage-card p {
  margin:    0;
  font-size: 0.875rem;
  color:     var(--oncp-muted);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REVIEWER / AUTHOR CARD
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-author-card {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  align-items:    center;
  text-align:     center;
  background:     var(--oncp-bg);
  border:         1px solid var(--oncp-border);
  border-radius:  var(--oncp-radius);
  padding:        1.5rem;
}
.oncp-author-avi {
  flex-shrink: 0;
  width:       80px;
  height:      80px;
  border-radius: 50%;
  overflow:    hidden;
  background:  var(--oncp-primary-light);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   2rem;
  color:       var(--oncp-primary);
  border:      2px solid #A7D4D3;
}
.oncp-author-avi img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}
.oncp-author-info { flex: 1; }
.oncp-author-info h4 {
  font-size:   1rem;
  font-weight: 700;
  margin:      0 0 0.25rem;
}
.oncp-author-cred {
  font-size:    0.875rem;
  color:        var(--oncp-muted);
  margin-bottom: 0.625rem;
}
.oncp-author-info p {
  font-size:   0.9rem;
  color:       var(--oncp-muted);
  line-height: 1.6;
  margin:      0 0 0.625rem;
}
.oncp-author-dates {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             0.5rem 1.25rem;
  font-size:       0.8125rem;
  color:           var(--oncp-muted);
}
.oncp-author-dates span {
  display:     flex;
  align-items: center;
  gap:         0.3rem;
}
.oncp-author-dates .bi { color: var(--oncp-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
 * PROMISE TILES
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-why-tiles {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.875rem;
  margin-top:            0.5rem;
}
.oncp-why-tile {
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  padding:       1.125rem 1.25rem;
  transition:    box-shadow 0.2s;
}
.oncp-why-tile:hover { box-shadow: var(--oncp-shadow); }
.oncp-why-tile .bi {
  font-size:     1.5rem;
  color:         var(--oncp-primary);
  display:       block;
  margin-bottom: 0.625rem;
}
.oncp-why-tile h4 {
  font-size:   0.9375rem;
  font-weight: 700;
  margin:      0 0 0.375rem;
}
.oncp-why-tile p {
  margin:    0;
  font-size: 0.875rem;
  color:     var(--oncp-muted);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FAQ CARD GRID
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-faq-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
  margin-top:            1.5rem;
}
.oncp-faq-card {
  background:    var(--oncp-white);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius);
  padding:       18px 20px;
  cursor:        pointer;
  transition:    border-color .2s;
}
.oncp-faq-card:hover { border-color: var(--oncp-primary); }
.oncp-faq-card.open  { border-color: var(--oncp-primary); background: var(--oncp-primary-light); }
.oncp-faq-q {
  font-size:       14px;
  font-weight:     700;
  color:           var(--oncp-text);
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             12px;
}
.oncp-faq-toggle { color: var(--oncp-primary); font-size: 18px; flex-shrink: 0; transition: transform .2s; }
.oncp-faq-card.open .oncp-faq-toggle { transform: rotate(45deg); }
.oncp-faq-a {
  display:     none;
  margin-top:  12px;
  font-size:   13px;
  line-height: 1.8;
  color:       var(--oncp-muted);
  border-top:  1px solid var(--oncp-border);
  padding-top: 12px;
}
.oncp-faq-card.open .oncp-faq-a { display: block; }
.oncp-faq-a p { margin: 0 0 0.75rem; }
.oncp-faq-a p:last-child { margin-bottom: 0; }
.oncp-faq-ref {
  font-size:  0.8125rem;
  color:      var(--oncp-muted);
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RELATED PRODUCTS
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-related-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.75rem;
  margin-top:            0.5rem;
}
.oncp-related-card {
  display:         flex;
  gap:             1rem;
  align-items:     center;
  background:      var(--oncp-bg);
  border:          1px solid var(--oncp-border);
  border-radius:   var(--oncp-radius-sm);
  padding:         0.875rem 1rem;
  text-decoration: none;
  color:           var(--oncp-text);
  transition:      box-shadow 0.2s, border-color 0.2s;
}
.oncp-related-card:hover {
  box-shadow:   var(--oncp-shadow);
  border-color: var(--oncp-primary);
}
.oncp-related-img {
  flex-shrink:   0;
  width:         60px;
  height:        60px;
  border-radius: var(--oncp-radius-sm);
  object-fit:    cover;
  background:    var(--oncp-primary-light);
}
.oncp-related-img--placeholder {
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1.5rem;
  color:       var(--oncp-primary);
}
.oncp-related-name {
  font-size:   0.9375rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.oncp-related-generic {
  font-size:  0.8125rem;
  color:      var(--oncp-muted);
  margin-bottom: 0.25rem;
}
.oncp-related-link {
  font-size:  0.8125rem;
  color:      var(--oncp-primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REFERENCES
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-references-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        0.625rem;
}
.oncp-references-list li {
  display:     flex;
  gap:         0.625rem;
  font-size:   0.875rem;
  color:       var(--oncp-muted);
  line-height: 1.55;
}
.oncp-ref-num {
  flex-shrink: 0;
  font-weight: 700;
  color:       var(--oncp-primary);
}
.oncp-references-list a {
  color:      var(--oncp-primary);
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DISCLAIMER
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-disclaimer-section {
  border-top:  1px solid var(--oncp-border);
  padding-top: 2rem;
}
.oncp-disclaimer {
  display:       flex;
  gap:           0.875rem;
  align-items:   flex-start;
  background:    var(--oncp-bg);
  border:        1px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  padding:       1rem 1.25rem;
  font-size:     0.875rem;
  color:         var(--oncp-muted);
  line-height:   1.6;
  margin-bottom: 1rem;
}
.oncp-disclaimer .bi {
  flex-shrink: 0;
  font-size:   1.125rem;
  color:       var(--oncp-primary);
  margin-top:  0.1rem;
}
.oncp-compliance-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem 1.25rem;
  font-size: 0.875rem;
  color:     var(--oncp-muted);
}
.oncp-compliance-row a {
  color:           var(--oncp-primary);
  text-decoration: none;
}
.oncp-compliance-row a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
 * STICKY CTA
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-sticky-enquiry {
  position:    fixed;
  bottom:      0;
  left:        0;
  right:       0;
  z-index:     800;
  background:  var(--oncp-white);
  border-top:  1px solid var(--oncp-border);
  box-shadow:  0 -4px 16px rgba(0,0,0,.10);
  padding:     0.625rem 1.25rem;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1rem;
  transform:   translateY(100%);
  transition:  transform 0.3s ease;
}
.oncp-sticky-enquiry.is-visible { transform: translateY(0); }

.oncp-sticky-name {
  font-size:     0.9375rem;
  font-weight:   700;
  color:         var(--oncp-text);
  flex:          1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.oncp-sticky-cta-btn {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  gap:             0.4rem;
  background:      var(--oncp-primary);
  color:           var(--oncp-white);
  border:          none;
  border-radius:   var(--oncp-radius-sm);
  font-size:       0.9375rem;
  font-weight:     700;
  padding:         0.625rem 1.25rem;
  cursor:          pointer;
  transition:      background 0.2s;
  white-space:     nowrap;
}
.oncp-sticky-cta-btn:hover { background: var(--oncp-primary-dark); }
.oncp-sticky-cta-btn:focus-visible {
  outline:        3px solid var(--oncp-accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MODAL
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-modal {
  position:  fixed;
  inset:     0;
  z-index:   1000;
  display:   flex;
  align-items: center;
  justify-content: center;
  padding:   1rem;
}
.oncp-modal[hidden] { display: none; }

.oncp-modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(2px);
  cursor:     pointer;
}

.oncp-modal-box {
  position:      relative;
  z-index:       1;
  background:    var(--oncp-white);
  border-radius: var(--oncp-radius);
  box-shadow:    var(--oncp-shadow-md);
  width:         100%;
  max-width:     520px;
  max-height:    90dvh;
  overflow-y:    auto;
  padding:       2rem 1.75rem 1.75rem;
  outline:       none;
}

.oncp-modal-box::-webkit-scrollbar { width: 6px; }
.oncp-modal-box::-webkit-scrollbar-track { background: var(--oncp-bg); }
.oncp-modal-box::-webkit-scrollbar-thumb { background: var(--oncp-border); border-radius: 3px; }

.oncp-modal-close {
  position:      absolute;
  top:           0.75rem;
  right:         0.75rem;
  background:    none;
  border:        1px solid var(--oncp-border);
  border-radius: 50%;
  width:         2.75rem;
  height:        2.75rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  color:         var(--oncp-muted);
  font-size:     1rem;
  transition:    background 0.15s, color 0.15s;
}
.oncp-modal-close:hover { background: var(--oncp-bg); color: var(--oncp-text); }
.oncp-modal-close:focus-visible {
  outline:        3px solid var(--oncp-primary);
  outline-offset: 2px;
}

.oncp-modal-icon {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       3rem;
  height:      3rem;
  border-radius: 50%;
  background:  var(--oncp-primary-light);
  color:       var(--oncp-primary);
  font-size:   1.375rem;
  margin:      0 auto 1rem;
}
.oncp-modal-title {
  font-size:   1.25rem;
  font-weight: 800;
  color:       var(--oncp-text);
  text-align:  center;
  margin:      0 0 0.5rem;
  line-height: 1.3;
}
.oncp-modal-subtitle {
  font-size:   0.9375rem;
  color:       var(--oncp-muted);
  text-align:  center;
  margin:      0 0 1.5rem;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ENQUIRY FORM
 * ═══════════════════════════════════════════════════════════════════════════ */
.oncp-modal-form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}
.oncp-form-group {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}
.oncp-form-label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--oncp-text);
}
.oncp-form-label span { color: var(--oncp-danger); }
.oncp-form-input {
  width:         100%;
  border:        1.5px solid var(--oncp-border);
  border-radius: var(--oncp-radius-sm);
  padding:       0.625rem 0.875rem;
  font-size:     1rem;
  font-family:   var(--oncp-font);
  color:         var(--oncp-text);
  background:    var(--oncp-white);
  transition:    border-color 0.15s, box-shadow 0.15s;
  outline:       none;
  -webkit-appearance: none;
}
.oncp-form-input:focus {
  border-color: var(--oncp-primary);
  box-shadow:   0 0 0 3px rgba(14,124,123,.15);
}
.oncp-form-input::placeholder { color: #9CA3AF; }
.oncp-form-textarea {
  resize:     vertical;
  min-height: 80px;
}
.oncp-phone-row {
  display: flex;
  gap: 6px;
}
.oncp-phone-row .oncp-phone-code {
  width: 130px;
  flex-shrink: 0;
}
.oncp-phone-row input[type="tel"] {
  flex: 1;
  min-width: 0;
}

.oncp-form-submit {
  width:         100%;
  background:    var(--oncp-primary);
  color:         var(--oncp-white);
  border:        none;
  border-radius: var(--oncp-radius-sm);
  font-size:     1rem;
  font-weight:   700;
  padding:       0.875rem;
  cursor:        pointer;
  transition:    background 0.2s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5rem;
  margin-top:    0.25rem;
}
.oncp-form-submit:hover:not(:disabled) { background: var(--oncp-primary-dark); }
.oncp-form-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.oncp-form-submit:focus-visible {
  outline:        3px solid var(--oncp-accent);
  outline-offset: 2px;
}

.oncp-submit-spinner {
  width:        1.125rem;
  height:       1.125rem;
  border:       2.5px solid rgba(255,255,255,.35);
  border-top-color: var(--oncp-white);
  border-radius: 50%;
  animation:    oncp-spin 0.7s linear infinite;
  flex-shrink:  0;
}
@keyframes oncp-spin { to { transform: rotate(360deg); } }

.oncp-form-message {
  padding:       0.75rem 1rem;
  border-radius: var(--oncp-radius-sm);
  font-size:     0.9375rem;
  line-height:   1.55;
}
.oncp-form-success {
  background: #D1FAE5;
  color:      #065F46;
  border:     1px solid #6EE7B7;
}
.oncp-form-error {
  background: var(--oncp-danger-light);
  color:      var(--oncp-danger);
  border:     1px solid #FCA5A5;
}

/* Thank-you success panel */
.oncp-thankyou {
  text-align:  center;
  padding:     1.5rem 1rem;
}
.oncp-thankyou__icon {
  font-size:   3rem;
  color:       var(--oncp-primary);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.oncp-thankyou__heading {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--oncp-text);
  margin:      0 0 0.5rem;
}
.oncp-thankyou__msg {
  font-size:  0.9375rem;
  color:      var(--oncp-muted);
  margin:     0;
  line-height: 1.55;
}

.oncp-form-privacy {
  display:     flex;
  align-items: flex-start;
  gap:         0.4rem;
  font-size:   0.8125rem;
  color:       var(--oncp-muted);
  line-height: 1.5;
  margin:      0;
}
.oncp-form-privacy .bi { flex-shrink: 0; margin-top: 0.1rem; color: var(--oncp-primary); }
.oncp-form-privacy a {
  color:           var(--oncp-primary);
  text-decoration: none;
}
.oncp-form-privacy a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE — xs (≥ 480px) — restore 2-col grids collapsed at narrow base
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .oncp-key-facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .oncp-se-list {
    grid-template-columns: 1fr 1fr;
  }
  .oncp-storage-grid {
    grid-template-columns: 1fr 1fr;
  }
  .oncp-why-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .oncp-dosage-card {
    flex-direction: row;
    gap:            1.25rem;
    align-items:    flex-start;
  }
  .oncp-author-card {
    flex-direction: row;
    gap:            1.25rem;
    align-items:    flex-start;
    text-align:     left;
  }
  .oncp-author-dates {
    justify-content: flex-start;
  }
  .oncp-form-input {
    font-size: 0.9375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE — sm (≥ 600px)
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .oncp-trust-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .oncp-storage-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .oncp-se-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .oncp-related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .oncp-why-tiles {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .oncp-faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE — md (≥ 768px)
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .oncp-hero {
    flex-direction: row;
    gap:            2.5rem;
    padding-top:    2rem;
  }
  .oncp-gallery-col {
    flex: 0 0 380px;
    max-width: 380px;
  }
  .oncp-info-col {
    flex: 1 1 0;
    min-width: 0;
  }
  .oncp-key-facts {
    grid-template-columns: repeat(3, 1fr);
  }
  .oncp-trust-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
  .oncp-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .oncp-modal-box {
    padding: 2.25rem 2.25rem 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE — lg (≥ 1024px)
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .oncp-gallery-col {
    flex: 0 0 440px;
    max-width: 440px;
  }
  .oncp-why-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Hero CTA is in view on desktop — sticky bar not needed */
  .oncp-sticky-enquiry {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRINT
 * ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .oncp-sticky-enquiry,
  .oncp-modal,
  .oncp-enquiry-zone { display: none !important; }
  .oncp-hero { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .oncp-sticky-enquiry,
  .oncp-btn-enquiry,
  .oncp-faq-toggle,
  .oncp-submit-spinner {
    transition: none;
    animation:  none;
  }
}