/* System font stack only. Webfonts would mean either an external request (which
   the client has ruled out) or shipping font files we do not have licences for.
   The constraint is real, so the type has to work without them. */

:root {
  --ink: #16181c;
  --ink-soft: #5b6068;
  --rule: #dfe1e5;
  --page: #ffffff;
  --stage: #e9eef6;   /* the cool grey-blue of their existing 3D block */
  --ember: #d7342b;   /* their CTA red */
  --ember-dark: #b32a22;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- gallery ---------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
}

.model-card {
  position: relative;
  background: var(--stage);
  border-radius: 10px;
  padding: 1rem 1rem 1.25rem;
}

/* --- the viewer --------------------------------------------------------------- */

model-viewer {
  display: block;
  width: 100%;
  height: clamp(280px, 42vh, 460px);
  background: transparent;
  --poster-color: transparent;
}

.ar-button {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ember);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 22, 26, 0.22);
}

.ar-button:hover { background: var(--ember-dark); }
.ar-button[hidden] { display: none; }

.progress {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--ember);
  transition: width 0.2s;
}

/* --- material swatches -------------------------------------------------------- */

.materials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.swatches { display: flex; gap: 0.5rem; }

.swatch {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.swatch:focus-visible,
.ar-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sku-label {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* --- origin audit --------------------------------------------------------- */

.audit {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
  border-top: 1px solid var(--rule);
}

.audit h2 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }

.audit ul {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.audit li { padding: 0.2rem 0; }
.audit-note { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}