/* Component overrides that don't belong in inline Tailwind utilities. */

/* Embed mode (?embed=1): host page supplies heading + spacing. */
body.embedded header {
  display: none;
}
body.embedded > div {
  padding: 0;
  max-width: none;
}
body.embedded {
  background: transparent;
}

model-viewer {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #ffffff 0%, #f1f1ef 100%);
  --poster-color: transparent;
}

/* Top-of-viewport progress bar driven by viewer.js. */
.progress-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: opacity 200ms ease-out;
  pointer-events: none;
  z-index: 5;
}

.progress-fill {
  height: 100%;
  width: 100%;
  background: #111827;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 120ms linear;
}

/* Hide the built-in model-viewer progress bar (we have our own). */
model-viewer::part(default-progress-bar) {
  display: none;
}

/* Added-to-pinboard state. */
#pinboard-btn[aria-pressed="true"] {
  background: #111827;
  color: #fff;
}

/* Action buttons (Shop Online / View in Catalogue). */
.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  border-radius: 0.625rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;
}
.viewer-btn:active {
  transform: translateY(1px);
}
.viewer-btn--primary {
  background: #111827;
  color: #fff;
  border: 1px solid #111827;
}
.viewer-btn--primary:hover {
  background: #000;
}
.viewer-btn--secondary {
  background: #fff;
  color: #111827;
  border: 1px solid #d4d4d4;
}
.viewer-btn--secondary:hover {
  border-color: #111827;
}

/* Rounded, modern QR presentation. */
.qr-box {
  background: #fff;
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  line-height: 0;
}
.qr-box canvas,
.qr-box svg {
  display: block;
  border-radius: 8px;
}

/* ───── Options panel controls ───── */

.opt-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 0.625rem;
}

/* Variant-style selectors: clickable text chips that wrap. */
.opt-values-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opt-text {
  appearance: none;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #1c1c1c;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.2;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}
.opt-text:hover:not(:disabled) {
  border-color: #a3a3a3;
}
.opt-text.is-selected {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

/* Colour-style selectors: swatch dot + label, stacked rows. */
.opt-values-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.opt-swatch {
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: #1c1c1c;
  text-align: left;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}
.opt-swatch:hover:not(:disabled) {
  border-color: #a3a3a3;
}
.opt-swatch.is-selected {
  border-color: #111827;
  box-shadow: 0 0 0 1px #111827 inset;
}
.opt-swatch-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background-position: center;
}
.opt-swatch-label {
  flex: 1 1 auto;
}

/* Disabled (unavailable) option values across both styles. */
.opt-text:disabled,
.opt-swatch:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  text-decoration: line-through;
}

/* ── Embed mode: let the options panel show in full (no inner scroll) ──
   In an iframe the whole block is one fixed-height box, so instead of
   locking the model to 64vh and scrolling the panel, we let the card grow
   to the panel's natural height and give the model a sensible floor.
   Scoped to .embedded so the standalone viewer is unaffected. */
@media (min-width: 768px) {
  .embedded #viewer-stage {
    height: auto !important;
    align-self: stretch;
    min-height: 440px;
  }
  .embedded #options-panel {
    height: auto !important;
    overflow: visible !important;
    /* More breathing room between the viewer and the options/info. The panel
       is a fixed-width column, so this insets its content without shrinking
       the 3D viewer. */
    padding-left: 2.25rem;
    padding-right: 1.75rem;
  }
}

/* ── Open Sans across the viewer ── */
body {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* ── Hide the pinboard (+) button in embedded product pages ──
   The pinboard is only useful in the standalone catalogue view. */
.embedded #pinboard-btn {
  display: none !important;
}