/* ==========================================================================
   components.css - buttons, nav, cards, badges, forms, widgets
   ========================================================================== */

/* ---- buttons ---- */
.btn {
  --bg: var(--ink-700);
  --fg: var(--text-hi);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); background: var(--bg);
  border-radius: var(--radius-s);
  border: 1px solid var(--line-2);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  --bg: var(--red-500); --fg: #fff; border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(226,59,46,.6);
}
.btn--primary:hover { --bg: var(--red-400); box-shadow: 0 16px 34px -10px rgba(226,59,46,.7); }
.btn--ghost { --bg: transparent; border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255,255,255,.05); border-color: var(--steel-400); }
.btn--light { --bg: var(--text-ink); --fg: var(--paper); border-color: transparent; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 10px 18px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .ico { width: 18px; height: 18px; }

/* ---- utility top bar ---- */
.utilbar {
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .03em; color: var(--text-mut);
}
.utilbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: 9px; }
.utilbar a, .utilbar__loc { display: inline-flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; }
.utilbar a:hover { color: var(--text-hi); }
.utilbar .ico { color: var(--steel-300); opacity: .85; flex: none; }
.utilbar__group { display: flex; align-items: center; }
.utilbar__group > * + * { border-left: 1px solid var(--line); padding-left: var(--s-4); margin-left: var(--s-4); }
.utilbar__tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; line-height: 1;
  color: var(--red-500); border: 1px solid rgba(226, 59, 46, .45);
  padding: 2.5px 5px 2px; border-radius: 3px;
}
.utilbar .pill-live { color: var(--green-500); }
@media (max-width: 700px){
  .utilbar { font-size: .7rem; }
  .utilbar__loc { display: none; }
  .utilbar a.utilbar__phone--sec { display: none; }   /* CA phone lives in contact + footer; keep top bar to US line + email */
  .utilbar__group > * + * { border-left: 0; padding-left: 0; margin-left: 0; }
  .utilbar__row { justify-content: space-between; gap: var(--s-4); }
}

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), backdrop-filter var(--dur-2);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8,10,13,.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 46px; height: auto; }
.brand__name { font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: uppercase; color: var(--text-hi); }
.brand__name small { display: block; font-size: .58em; letter-spacing: .34em; color: var(--text-faint); font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: var(--s-5); }
.nav__links a { font-size: .95rem; color: var(--text-mut); transition: color var(--dur-1); }
.nav__links a:hover { color: var(--text-hi); }
.nav__cta { display: flex; align-items: center; gap: var(--s-3); }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius-s); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content:""; display:block; width:20px; height:2px; background: var(--text-hi); position: relative; transition: transform var(--dur-1); }
.nav__toggle span::before { position:absolute; top:-6px; } .nav__toggle span::after { position:absolute; top:6px; }

@media (max-width: 1040px) {
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink-850); border-bottom: 1px solid var(--line);
    padding: var(--s-5) var(--gutter);
  }
}

/* ---- pills / badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--text);
}
.badge--patent { color: var(--amber-500); border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
.badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }

/* ---- cards ---- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.card__icon { width: 46px; height: 46px; color: var(--red-400); margin-bottom: var(--s-4); }
.card__title { font-size: 1.18rem; margin-bottom: var(--s-2); }
.card__text { color: var(--text-mut); font-size: .98rem; }

/* feature card with number */
.feature { display: flex; gap: var(--s-4); }
.feature__num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--red-500); }

/* step cards */
.step { counter-increment: step; }
.step__img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.step__n {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  color: var(--text-hi); border: 2px solid var(--red-500);
  margin-bottom: var(--s-4);
}
.step__n::before { content: counter(step); }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mut); }
.field .req { color: var(--red-400); }
.input, .select, .textarea {
  width: 100%; padding: 13px 15px;
  background: var(--ink-900); color: var(--text-hi);
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--steel-400); box-shadow: 0 0 0 3px rgba(91,125,168,.22); }
.textarea { resize: vertical; min-height: 130px; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--text-faint); }
.form-status { font-size: .95rem; border-radius: var(--radius-s); padding: 12px 16px; display: none; }
.form-status.is-ok { display:block; background: rgba(40,199,111,.12); border: 1px solid rgba(40,199,111,.4); color: #7fe3a9; }
.form-status.is-err { display:block; background: rgba(226,59,46,.12); border: 1px solid rgba(226,59,46,.4); color: #ff9088; }

/* ---- model-viewer / 3D stage ---- */
.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(91,125,168,.16), transparent 55%),
    linear-gradient(180deg, var(--ink-750), var(--ink-900));
  border: 1px solid var(--line);
  overflow: hidden;
  touch-action: none;
}
.stage canvas { width: 100% !important; height: 100% !important; display: block; }
.stage__loader {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-faint); font-family: var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; font-size: .8rem;
}
.stage__hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: .76rem; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none; transition: opacity var(--dur-2);
}
.viewer-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); color: var(--text);
  font-size: .9rem; transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1);
}
.chip:hover { border-color: var(--steel-400); }
.chip.is-active { background: var(--red-500); border-color: transparent; color: #fff; }
.chip .ico { width: 16px; height: 16px; }

/* hotspot labels rendered over the stage */
.hotspot {
  position: absolute; transform: translate(-50%,-50%);
  pointer-events: none; z-index: 3;
}
.hotspot__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 4px rgba(226,59,46,.25); }
.hotspot__label {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: .76rem; font-weight: 600;
  background: rgba(8,10,13,.85); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: var(--radius-s); color: var(--text-hi);
  backdrop-filter: blur(6px);
}

/* ---- calculator ---- */
.calc {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,56px);
  background: linear-gradient(180deg, var(--ink-750), var(--ink-800));
  border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(24px,3vw,48px);
}
.calc__out {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px,3vw,40px); text-align: center;
}
.calc__big { font-family: var(--font-display); font-weight: 800; line-height: 1; color: var(--red-400);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); }
.range { width: 100%; accent-color: var(--red-500); }
.range-row { display: flex; justify-content: space-between; align-items: baseline; }
.range-val { font-family: var(--font-mono); color: var(--text-hi); font-size: 1.05rem; }
@media (max-width: 820px){ .calc { grid-template-columns: 1fr; } }

/* ---- fitment ---- */
.fitment__result {
  margin-top: var(--s-4); padding: 16px 18px; border-radius: var(--radius-s);
  border: 1px dashed var(--line-2); color: var(--text-mut); font-size: .96rem;
}
.fitment__result.is-ok { border-style: solid; border-color: rgba(40,199,111,.5); background: rgba(40,199,111,.08); color: #9ce9bd; }
.fitment__result.is-maybe { border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.07); color: #f4c878; }
.fitment__result.is-no { border-style: solid; border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.08); color: #f1a3a6; }

/* ---- pricing ---- */
.price-card { display: flex; flex-direction: column; height: 100%; }
.price-card.is-featured { border-color: rgba(226,59,46,.5); box-shadow: 0 24px 60px -28px rgba(226,59,46,.5); }
.price-card__tag { align-self: flex-start; margin-bottom: var(--s-4); }
.price-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; }
.price-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-hi); margin-top: var(--s-2); }
.price-card__price small { font-size: .55em; color: var(--text-faint); letter-spacing: .04em; }
.price-card ul { margin: var(--s-5) 0; display: grid; gap: 12px; }
.price-card li { display: flex; gap: 10px; color: var(--text-mut); font-size: .96rem; }
.price-card li svg { flex: none; width: 18px; height: 18px; color: var(--green-500); margin-top: 3px; }
.price-card .btn { margin-top: auto; }

/* ---- stat strip ---- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,1.4rem+2.6vw,3.2rem); line-height: 1; color: var(--text-hi); }
.stat__lab { margin-top: 8px; font-size: .9rem; color: var(--text-mut); }

/* ---- footer ---- */
.footer { background: var(--ink-900); border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); }
.footer a { color: var(--text-mut); } .footer a:hover { color: var(--text-hi); }
.footer__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--text-faint); margin-bottom: var(--s-4); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: .82rem; color: var(--text-faint); }
@media (max-width: 760px){ .footer__grid { grid-template-columns: 1fr 1fr; } .footer__bottom { flex-direction: column; } }

/* ---- real-part gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.gallery figure {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4 / 3; background: #0e1116;
}
.gallery .gallery__wide { grid-column: span 2; aspect-ratio: 8 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* real-photo product showcase: big main shot + clickable angle thumbnails */
.showcase__main {
  position: relative; margin: 0; border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(91,125,168,.14), transparent 55%),
    linear-gradient(180deg, var(--ink-750), var(--ink-900));
}
.showcase__main img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity var(--dur-2) var(--ease-out);
}
.showcase__main img.is-swapping { opacity: 0; }
.showcase__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.showcase__thumb {
  margin: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line-2);
  aspect-ratio: 1 / 1; background: #0e1116; opacity: .68;
  transition: border-color var(--dur-1), opacity var(--dur-1), transform var(--dur-1);
}
.showcase__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__thumb:hover { opacity: 1; border-color: var(--steel-400); }
.showcase__thumb.is-active { opacity: 1; border-color: var(--red-500); }
.showcase__thumb:focus-visible { outline: 2px solid var(--steel-400); outline-offset: 2px; }
@media (max-width: 520px) { .showcase__thumbs { grid-template-columns: repeat(3, 1fr); } }

/* the procedural 3D, reframed as an honest anatomy schematic (not a photo twin) */
.schematic { margin-top: var(--s-9, 72px); }
.schematic .stage { max-width: 560px; margin-inline: auto; }
.viewer-controls--center { justify-content: center; }