/* Bundle pricing.
   Loaded by public/index.html and the compound pages. Each page has its own
   design tokens, so these read the storefront's first, then the compound
   page's, then a plain fallback. */
:root {
  --sp-accent: var(--accent, var(--blue, #1A6DB5));
  --sp-ink: var(--text, var(--ink, #1B2A3D));
  --sp-muted: var(--text-muted, var(--mute, #546478));
  --sp-border: var(--border, var(--rule-strong, #D6DDE6));
  --sp-card: #fffdf8;
  --sp-page: var(--bg, var(--paper, #f3efe6));
  --sp-deep: #071e38;
  --sp-pale: #8fc4ff;
  --sp-ok: var(--success, #2EAD6B);
  --sp-danger: var(--danger, #D94040);
  --sp-radius: 14px;
  --sp-font: var(--font-body, var(--sans, 'Inter', -apple-system, sans-serif));
  --sp-mono: 'Alegreya SC', Georgia, serif;
  --sp-price: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- 1A: homepage suites ---------- */
.sp-section .section-header p { color: var(--sp-muted); margin-top: 0.35rem; }
/* Same space above the heading (from the line over it) as below (to the cards). */
.popular-tests.sp-section { margin-top: 44px; }
.popular-tests.sp-section .section-header { margin-bottom: 44px; }
.sp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1100px) { .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sp-cards { grid-template-columns: minmax(0, 1fr); } }

.sp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 20px;
}
.sp-card.is-chosen { border: 2px solid var(--sp-accent); padding: 19px; }
.sp-card h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.25; margin: 0; }
.sp-card-price { margin: 12px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sp-card-price span { font-family: var(--sp-price); font-weight: 700; font-size: 1.6rem; color: var(--sp-accent); }
.sp-card-price small { font-size: 0.82rem; color: var(--sp-muted); font-weight: 600; }
.sp-was { color: var(--sp-muted); font-weight: 500; font-size: 0.75em; margin-right: 2px; }
.sp-incl { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-incl li { display: flex; gap: 8px; font-size: 0.92rem; }
.sp-incl li::before { content: '✓'; color: var(--sp-accent); font-weight: 700; }
.sp-card-note { margin: auto 0 0; padding-top: 14px; font-size: 0.84rem; color: var(--sp-muted); line-height: 1.45; }
.sp-card-btn { margin-top: 14px; min-height: 44px; padding: 0.7rem 1rem; }

.sp-mid {
  margin: 14px 0 0;
  border: 1px solid rgba(26,109,181,0.35);
  background: rgba(26,109,181,0.07);
  border-radius: 12px;
  padding: 10px 14px 12px;
  min-width: 0;
}
.sp-mid.has-error { border-color: var(--sp-danger); }
.sp-mid legend { font-size: 0.8rem; font-weight: 700; color: var(--sp-accent); padding: 0 6px; }
.sp-radio { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.sp-radio input, .sp-option input, .sp-extra input { width: 18px; height: 18px; flex: none; accent-color: var(--sp-accent); margin: 0; }

.sp-error { display: block; color: var(--sp-danger); font-size: 0.84rem; font-weight: 600; margin-top: 6px; }
.sp-hint { font-size: 0.82rem; color: var(--sp-muted); margin: 6px 0 0; line-height: 1.45; }
.sp-link { background: none; border: 0; padding: 0; font: inherit; color: var(--sp-accent); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sp-compare { margin-top: 20px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-card); }
.sp-compare-title { margin: 0; padding: 16px 18px 6px; font-size: 1rem; font-weight: 700; color: var(--sp-ink); }
.sp-table-wrap { overflow-x: auto; padding: 0 18px 16px; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sp-table caption { caption-side: bottom; text-align: left; color: var(--sp-muted); font-size: 0.8rem; padding-top: 10px; }
.sp-table th, .sp-table td { padding: 10px 8px; border-bottom: 1px solid var(--sp-border); text-align: center; }
.sp-table th[scope="row"] { text-align: left; font-weight: 600; }
.sp-table thead th { font-size: 0.8rem; }
/* The test-name column header lines up with the test names below it. */
.sp-table thead th:first-child { text-align: left; }
.sp-compare .sp-table { min-width: 560px; table-layout: fixed; }
/* Test names need less room than the four bundle columns. */
.sp-compare .sp-table thead th:first-child { width: 26%; }
.sp-table-price td { font-family: var(--sp-price); font-weight: 700; color: var(--sp-accent); }
.sp-services { margin-top: 12px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-card); padding: 0 18px; }
.sp-services summary { cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; color: var(--sp-accent); list-style: none; }
.sp-services summary::-webkit-details-marker { display: none; }
/* Chevron that points down when closed and flips up when open. */
.sp-services summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 2px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.sp-services[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .sp-services summary::after { transition: none; } }
.sp-services[open] { padding-bottom: 14px; }
.sp-services p { color: var(--sp-muted); font-size: 0.9rem; margin: 0 0 4px; }
.sp-services .sp-services-table { max-width: 640px; }
.sp-services-table td { text-align: right; font-family: var(--sp-price); font-weight: 700; color: var(--sp-accent); white-space: nowrap; }
.sp-services-table small { color: var(--sp-muted); font-weight: 500; }


.product-price .sp-from { font-size: 0.8rem; color: var(--sp-muted); font-weight: 500; }
/* Price on one line, then a full-width button, so nothing wraps on narrow cards. */
.product-footer.sp-product-footer { flex-direction: column; align-items: stretch; gap: 10px; }
.sp-product-footer .product-price { white-space: nowrap; }
.sp-choose-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--sp-accent); background: transparent; color: var(--sp-accent);
  font: 700 0.95rem/1 var(--sp-font); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sp-choose-btn::after { content: "\2192"; transition: transform .15s ease; }
.sp-choose-btn:hover, .product-card.clickable:hover .sp-choose-btn { background: var(--sp-accent); color: #fff; }
.sp-choose-btn:hover::after { transform: translateX(3px); }
.sp-choose-btn:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 2px; }

/* ---------- 1C: configurator ---------- */
.sp-cfg { margin-top: 28px; text-align: left; }
.sp-cfg-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.9fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .sp-cfg-grid { grid-template-columns: minmax(0, 1fr); } }

.sp-cfg-main { background: var(--sp-card); border: 1px solid var(--sp-border); border-radius: 16px; overflow: hidden; min-width: 0; }
.sp-step { padding: 18px 20px; border-bottom: 1px solid var(--sp-border); }
.sp-step:last-child { border-bottom: 0; }
.sp-step-title { display: flex; align-items: center; margin: 0 0 10px; font-family: var(--sp-font); font-size: 1rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--sp-ink); }
.sp-step-title small { color: var(--sp-muted); margin-left: 0.3em; font-family: var(--sp-font); letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 0.8rem; }

.sp-options { display: flex; flex-direction: column; gap: 9px; }
.sp-option {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 15px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--sp-border);
}
.sp-option.is-on { border: 2px solid var(--sp-accent); padding: 11px 14px; background: rgba(26,109,181,0.06); }
.sp-option-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sp-option-text strong { font-size: 0.98rem; }
.sp-option-text small { font-size: 0.82rem; color: var(--sp-muted); }
.sp-option-price { font-family: var(--sp-price); font-weight: 700; color: var(--sp-accent); white-space: nowrap; }
.sp-option-wrap .sp-mid { margin-top: 9px; }

.sp-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.sp-extra {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 10px 13px; border-radius: 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--sp-border);
}
.sp-extra.is-on { border: 2px solid var(--sp-accent); padding: 9px 12px; }
.sp-extra-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.92rem; }
.sp-extra-price { font-family: var(--sp-price); font-weight: 700; font-size: 0.85rem; color: var(--sp-accent); white-space: nowrap; text-align: right; }
.sp-extra-price small { display: block; font-family: var(--sp-font); font-weight: 500; font-size: 0.72rem; color: var(--sp-muted); }

.sp-stepper { display: flex; align-items: center; gap: 10px; }
.sp-stepper .qty-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid var(--sp-border); color: var(--sp-ink);
  font-size: 1.2rem; font-weight: 700; cursor: pointer;
}
.sp-stepper .qty-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-stepper input {
  width: 84px; height: 44px; text-align: center; border-radius: 10px;
  border: 1px solid var(--sp-border); background: #fff; color: var(--sp-ink);
  font-family: var(--sp-mono); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: lining-nums;
}
.sp-vials {
  margin: 12px 0 0; font-size: 0.9rem; font-weight: 700;
  background: rgba(26,109,181,0.07); border-left: 3px solid var(--sp-accent);
  padding: 10px 12px; border-radius: 0 8px 8px 0;
}

.sp-summary { position: sticky; top: var(--sp-sticky-top, 90px); background: var(--sp-deep); color: #fff; border-radius: 16px; padding: 22px; min-width: 0; }
.sp-summary-kicker { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sp-pale); font-weight: 700; }
.sp-summary-name { margin: 10px 0 0; font-size: 1.15rem; font-weight: 800; }
.sp-summary-suite { margin: 2px 0 0; color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.sp-summary-incl { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.7); }
.sp-summary-lines { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 6px; }
.sp-summary-lines div, .sp-summary-total div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; }
.sp-summary-lines span:first-child, .sp-summary-total span { color: rgba(255,255,255,0.78); }
.sp-summary-lines span:last-child { font-family: var(--sp-price); font-weight: 700; }
.sp-summary .sp-was { color: rgba(255,255,255,0.55); }
.sp-summary-discount { margin: 10px 0 0; font-size: 0.82rem; color: var(--sp-pale); font-weight: 600; }
.sp-summary-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 6px; }
.sp-summary-total strong { font-family: var(--sp-price); font-size: 1rem; }
.sp-summary-grand { align-items: baseline; }
.sp-summary-grand strong { font-size: 1.35rem; color: var(--sp-pale); }
.sp-add { width: 100%; min-height: 48px; background: #fff; color: var(--sp-deep); border: 0; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: var(--sp-font); }
.sp-add:disabled, .sp-add[aria-disabled="true"] { opacity: 0.5; cursor: pointer; }
.sp-summary .sp-hint { color: rgba(255,255,255,0.7); }
.sp-added { margin: 10px 0 0; font-size: 0.88rem; font-weight: 600; color: #1a7a4a; }
.sp-added:empty { display: none; }
.sp-summary .sp-added { color: #9fe3bf; }

/* The line being built, inside the Your order panel */
.sp-building { margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.sp-building.is-editing { border-color: var(--sp-pale); background: rgba(143,196,255,0.12); }
.sp-building .sp-summary-name { margin-top: 0; }
.sp-building-actions { display: flex; gap: 8px; margin-top: 14px; }
.sp-building-actions .sp-add { flex: 1 1 auto; }
.sp-cancel { min-height: 48px; padding: 0 18px; border-radius: 999px; font: 600 0.95rem var(--sp-font); cursor: pointer; background: transparent; color: inherit; border: 1px solid currentColor; }
.sp-summary .sp-cancel { color: #fff; border-color: rgba(255,255,255,0.45); }

/* Lines already in the order: light by default, dark inside the panel */
.sp-order { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16); }
.sp-order-head { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.92rem; }
.sp-order-head span { font-weight: 500; font-size: 0.8rem; opacity: 0.7; }
.sp-order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-order-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sp-border); }
.sp-order-line:last-child { border-bottom: 0; }
.sp-order-line.is-editing { opacity: 0.6; }
.sp-order-line-main { min-width: 0; }
.sp-order-line-name { margin: 0; font-weight: 700; font-size: 0.92rem; }
.sp-order-line-meta { margin: 2px 0 0; font-size: 0.8rem; color: var(--sp-muted); line-height: 1.4; }
.sp-order-tag { font: 700 0.97rem/1 var(--sp-mono); letter-spacing: 0.05em; text-transform: lowercase; padding: 3px 6px; border-radius: 999px; background: var(--sp-accent); color: #fff; vertical-align: middle; }
.sp-order-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.sp-order-line-side strong { font-family: var(--sp-price); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.sp-order-actions { display: flex; gap: 12px; }
.sp-order-actions .sp-link { min-height: 32px; font-size: 0.8rem; }
.sp-order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sp-border); font-weight: 600; }
.sp-order-total strong { font-family: var(--sp-price); font-size: 1.2rem; color: var(--sp-accent); font-variant-numeric: tabular-nums; }
.sp-order-ship { margin: 2px 0 0; font-size: 0.8rem; color: var(--sp-muted); }
/* Checkout in the dark order panel: full width, pale blue so it reads apart
   from the white Add to order button above it. */
.sp-review {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; margin-top: 14px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sp-pale); color: var(--sp-deep);
  font: 700 1.02rem/1 var(--sp-font); letter-spacing: 0.01em;
  box-shadow: 0 10px 24px -14px rgba(143,196,255,0.9);
  transition: background-color .15s ease, transform .15s ease;
}
.sp-review::after { content: "\2192"; font-size: 1.1rem; transition: transform .15s ease; }
.sp-review:hover { background: #b3d8ff; }
.sp-review:hover::after { transform: translateX(3px); }
.sp-review:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.sp-summary .sp-order-line { border-bottom-color: rgba(255,255,255,0.14); }
.sp-summary .sp-order-line-meta, .sp-summary .sp-order-ship { color: rgba(255,255,255,0.7); }
.sp-summary .sp-order-total { border-top-color: rgba(255,255,255,0.16); }
.sp-summary .sp-order-total strong { color: var(--sp-pale); }
.sp-summary .sp-link { color: var(--sp-pale); }
.sp-summary .sp-order-tag { background: var(--sp-pale); color: var(--sp-deep); }

/* Slide-out order */
.sp-drawer-backdrop { position: fixed; inset: 0; z-index: 9500; background: rgba(7,30,56,0.4); display: flex; justify-content: flex-end; }
.sp-drawer-backdrop[hidden] { display: none; }
.sp-drawer { width: min(420px, 100vw); height: 100%; overflow-y: auto; background: var(--sp-card); color: var(--sp-ink); font-family: var(--sp-font); box-shadow: -24px 0 48px -24px rgba(7,30,56,0.45); padding: 20px 22px 28px; display: flex; flex-direction: column; animation: sp-drawer-in .22s ease-out; }
.sp-drawer * { box-sizing: border-box; }
@keyframes sp-drawer-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sp-drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--sp-border); margin-bottom: 4px; }
.sp-drawer-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.sp-drawer-close { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.1rem; color: var(--sp-muted); cursor: pointer; border-radius: 8px; }
.sp-drawer-close:hover { color: var(--sp-ink); background: rgba(7,30,56,0.06); }
.sp-drawer-empty { color: var(--sp-muted); margin: 16px 0 0; }
.sp-drawer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sp-drawer .sp-drawer-review {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sp-accent); color: #fff; font: 700 1.02rem/1 var(--sp-font);
  box-shadow: 0 10px 24px -14px rgba(26,109,181,0.9);
}
.sp-drawer .sp-drawer-review::after { content: "\2192"; font-size: 1.1rem; }
.sp-drawer .sp-drawer-review:hover { filter: brightness(1.08); }
.sp-drawer .sp-drawer-review:focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
.sp-drawer .sp-cancel { color: var(--sp-ink); border-color: var(--sp-border); }
body.sp-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sp-drawer { animation: none; } }

/* Cart page: change a line without removing it */
.sp-cart-line-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 0.4rem; border-top: 1px solid var(--sp-border); }
.sp-cart-line-foot .cart-item-subtotal { border-top: 0; padding-top: 0; }
.sp-fine { margin: 12px 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.6); line-height: 1.45; }

/* Storefront modal wrapper for compounds without their own page */
.modal.sp-modal { --sp-modal-pad: 2rem; padding: var(--sp-modal-pad); max-width: 1040px; width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
.sp-modal .sp-cfg { margin-top: 12px; }
/* Keep Your order in view while the customer scrolls the choices beside it. */
.sp-modal .sp-summary { position: sticky; top: var(--sp-sticky-top, 0px); }
@media (max-width: 860px) { .sp-modal .sp-summary { position: static; max-height: none; } }

/* Cart lines */
.sp-cart-suite { font-size: 0.9rem; color: var(--sp-accent); font-weight: 600; margin-top: 2px; }
.sp-cart-detail { font-size: 0.82rem; color: var(--sp-muted); margin-top: 0.4rem; }
.sp-cart-detail strong { color: var(--sp-ink); font-weight: 600; }
.sp-cart-lot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.sp-cart-lot span { color: var(--sp-ink); font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.sp-cart-lot > span:first-child, .sp-cart-lot label > span { min-width: 7.4rem; }
.sp-cart-lot em { font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--sp-muted); }
.sp-cart-lot input, .sp-cart-amount select {
  flex: 1 1 200px; min-width: 0; max-width: min(280px, 100%); box-sizing: border-box; min-height: 36px; padding: 0 0.7rem;
  font: 500 0.88rem var(--sp-font); color: var(--sp-ink);
  background: #fff; border: 1px solid var(--sp-border); border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-cart-lot input::placeholder { color: var(--sp-muted); opacity: 0.75; font-weight: 400; }
.sp-cart-lot input:focus { outline: none; border-color: var(--sp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 18%, transparent); }
.sp-cart-lot .sp-cart-amount-fields { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.4rem; flex: 1 1 200px; min-width: 0; max-width: min(280px, 100%); font-weight: 400; }
.sp-cart-amount input { flex: 1 1 auto; min-width: 0; max-width: none; }
.sp-cart-amount select { flex: 0 0 84px; max-width: 84px; padding: 0 0.5rem; }
.sp-cart-amount-error { display: none; flex: 1 0 100%; color: #b42318; font-size: 0.78rem; font-weight: 500; }
.sp-cart-amount:has(input[aria-invalid="true"]) .sp-cart-amount-error { display: block; }
.sp-cart-amount input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 2px #b4231820; }
.sp-cart-note { margin-top: 1rem; }

/* Compound page: variant picker for pages that cover more than one product */
.sp-compound { margin-top: 34px; }
.sp-variant { display: flex; flex-direction: column; max-width: 360px; margin-bottom: 4px; }
.sp-variant select { min-height: 44px; font: inherit; font-size: 1rem; padding: 0 12px; border-radius: 10px; border: 1px solid var(--sp-border); background: #fff; color: var(--sp-ink); }
.sp-compound { scroll-margin-top: 96px; }

/* Storefront configurator: compound row above the suite choice */
.sp-compound-pick, .sp-compound-chosen { margin-top: 16px; }
.sp-compound-chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 4px 16px; border: 1px solid var(--sp-border); border-radius: 12px; background: rgba(26,109,181,0.06); }
.sp-compound-chosen .sp-step-title { margin: 0; }
.sp-compound-chosen strong { font-size: 1rem; }
.sp-compound-search { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sp-border); background: #fff; color: var(--sp-ink); font: inherit; font-size: 1rem; }
.sp-compound-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp-compound-results > li { min-width: 0; }
.sp-compound-option { width: 100%; height: 100%; min-height: 56px; text-align: left; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--sp-border); background: #fff; color: var(--sp-ink); font: inherit; cursor: pointer; }
.sp-compound-option:hover, .sp-compound-option:focus-visible { border-color: var(--sp-accent); }
.sp-compound-option strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.sp-compound-option small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; color: var(--sp-muted); font-size: 0.78rem; }

/* Section numbers: 1. Compound, 2. Suite, 3. Additional tests, 4. Number of samples */
.sp-step-num {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 6px; padding: 0 4px;
  border-radius: 999px; background: var(--sp-accent); color: #fff;
  font: 700 0.78rem/1 var(--sp-mono); letter-spacing: 0; vertical-align: middle;
  font-variant-numeric: lining-nums;
}

/* After adding a line: confirmation above the compound search and a soft pulse
   around it, so the next step is obvious. */
.sp-next-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: 10px; background: rgba(46,173,107,0.12); border: 1px solid rgba(46,173,107,0.35);
  font-size: 0.9rem; font-weight: 600; color: var(--sp-ink);
}
.sp-next-note span { color: var(--sp-ok); font-weight: 800; }
#suiteCompoundPick.sp-next-pulse { animation: sp-next-pulse 1.5s ease-out; }
@keyframes sp-next-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26,109,181,0.45); background-color: rgba(26,109,181,0.10); }
  60% { box-shadow: 0 0 0 10px rgba(26,109,181,0); background-color: rgba(26,109,181,0.05); }
  100% { box-shadow: 0 0 0 0 rgba(26,109,181,0); background-color: transparent; }
}

/* ---------- phones and tablets ---------- */

/* Dialog header stays at the top while the dialog scrolls, so Close is always in reach. */
.sp-modal-head {
  position: sticky; top: calc(-1 * var(--sp-modal-pad, 2rem)); z-index: 6;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin: calc(-1 * var(--sp-modal-pad, 2rem)) calc(-1 * var(--sp-modal-pad, 2rem)) 0;
  padding: var(--sp-modal-pad, 2rem) var(--sp-modal-pad, 2rem) 12px;
  background: var(--bg-card, var(--sp-page)); border-bottom: 1px solid transparent;
}
.sp-compound-more { grid-column: 1 / -1; margin: 2px 0 0; }

/* Bottom bar on phones and upright iPads: the line total, Add to order, and the
   order, pinned in reach because Your order sits below the choices there. */
.sp-quickbar { display: none; }
@media (max-width: 860px) { .sp-compound-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-quickbar { display: block; } }
.sp-quickbar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 16px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--sp-deep); color: #fff; border-radius: 14px;
  box-shadow: 0 -14px 28px -18px rgba(7,30,56,0.7);
}
.sp-modal .sp-quickbar { bottom: calc(-1 * var(--sp-modal-pad, 2rem) + 8px); }
.sp-quickbar-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.sp-quickbar-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-quickbar-line strong { font-family: var(--sp-price); font-size: 1.1rem; color: var(--sp-pale); white-space: nowrap; }
.sp-quickbar-actions { display: flex; gap: 8px; margin-top: 8px; }
.sp-quickbar-actions .sp-add { flex: 1 1 50%; min-height: 46px; font-size: 0.95rem; }
.sp-quickbar-order {
  flex: 1 1 50%; min-height: 46px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45);
  font: 600 0.85rem/1.2 var(--sp-font);
}

/* Order line links big enough to tap. */
@media (max-width: 860px), (pointer: coarse) {
  .sp-order-actions { gap: 4px; }
  .sp-order-actions .sp-link { min-height: 44px; padding: 0 8px; font-size: 0.85rem; }
}

@media (max-width: 600px) {
  /* The dialog fills the phone screen. */
  #suiteConfigModal { padding: 0; align-items: stretch; }
  .modal.sp-modal {
    --sp-modal-pad: 16px;
    width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-radius: 0;
  }
  .sp-modal-head h2 { font-size: 1.25rem; }
  .sp-modal .sp-cfg-main .sp-step { padding: 16px 14px; }
  .sp-modal .sp-summary { padding: 16px; }
}



.sp-drawer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* Compound pages: their phone CSS sets overflow-x: hidden on html and body,
   which stops the bottom bar from pinning. clip hides sideways overflow the
   same way without breaking sticky. The page's own sticky CTA would sit on top
   of the bottom bar, and the configurator is already on the page. */
@media (max-width: 860px) {
  html.sp-compound-page, html.sp-compound-page body { overflow-x: clip; }
  html.sp-compound-page .stickybar { display: none; }
}




/* Compare table marks */
.sp-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 0.8rem/1 var(--sp-font); color: #fff; }
.sp-mark-yes { background: #2EAD6B; }
.sp-mark-no { background: #D94040; }
.sp-mark-choose { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(26,109,181,0.1); color: var(--sp-accent); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

/* Ordering is paused: a small callout with one clear next step. */
.sp-ordering-notice {
  margin: 14px 0 0; padding: 14px 16px; border-radius: 14px;
  background: var(--sp-card, #fff); color: var(--sp-ink, #071e38);
  border: 1px solid rgba(7,30,56,0.12);
  font: 400 .88rem/1.45 var(--sp-font); text-align: left;
}
.sp-ordering-notice p { margin: 0; }
.sp-ordering-notice .sp-ordering-title { margin-bottom: 4px; font-weight: 700; font-size: .95rem; }
.sp-ordering-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: 12px; padding: 0 18px;
  border-radius: 999px; background: var(--sp-deep, #071e38); color: #fff;
  font: 700 .95rem/1 var(--sp-font); text-decoration: none;
}
.sp-ordering-cta:hover { background: #0d3563; color: #fff; }
.sp-ordering-cta:focus-visible { outline: 3px solid var(--sp-pale, #8fc4ff); outline-offset: 3px; }
.sp-summary .sp-ordering-notice { border-color: transparent; }

.sp-section, .sp-cfg { font-family: var(--sp-font); color: var(--sp-ink); }
.sp-section *, .sp-cfg * { box-sizing: border-box; }

/* Keep the initial catalog price load from flashing committed defaults. */
.bundle-prices-loading .sp-table-price,
.bundle-prices-loading .sp-option-price,
.bundle-prices-loading .sp-extra-price,
.bundle-prices-loading .sp-summary-total,
.bundle-prices-loading .sp-order-total,
.bundle-prices-loading .sp-card-price,
.bundle-prices-loading .sp-total,
.bundle-prices-loading .sp-comparison,
.bundle-prices-loading .product-price { visibility: hidden; }