/* Madformat 3D — structure only; colours come from the theme's tokens. */

.mf-3d {
  grid-column: 1 / -1;
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mf-rule, rgba(20, 21, 24, 0.12));
}

.mf-3d__head {
  max-width: 60ch;
}

.mf-3d__title {
  margin: 0 0 0.5rem;
}

.mf-3d__lead {
  margin: 0 0 1.25rem;
  color: var(--mf-text-muted, #666);
}

.mf-3d__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 560px;
  display: grid;
  place-items: center;
  border-radius: var(--mf-radius-card, 8px);
  background: var(--mf-paper, #f1eeea);
  overflow: hidden;
}

.mf-3d__stage .mf-3d__note {
  position: absolute;
  bottom: 1rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--mf-text-muted, #666);
}

.mf-3d.is-open .mf-3d__note {
  display: none;
}

.mf-3d__viewer {
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
}

.mf-3d__ar {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.mf-3d__heights {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mf-3d__height {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--mf-line, #c9c5be);
  border-radius: var(--mf-radius-control, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mf-3d__height[aria-pressed="true"] {
  background: var(--mf-ink, #1c1c1c);
  color: var(--mf-paper, #fff);
  border-color: var(--mf-ink, #1c1c1c);
}

.mf-3d__status {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--mf-text-muted, #666);
}

@media (max-width: 860px) {
  .mf-3d__stage {
    aspect-ratio: 1 / 1;
  }
}

/* ---------------------------------------------------------------------------
   The two views: straight down, or turn it around.

   Same shape as the height switch below it, because they are the same kind of
   control. Found by data attribute in the script, never by their words.
   ------------------------------------------------------------------------ */

.mf-3d__views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
}

.mf-3d__views button {
  min-height: 44px;
  padding: 0 1em;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  color: inherit;
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
}

.mf-3d__views button[aria-pressed='true'] {
  background: var(--ink, #1a1a1a);
  border-color: var(--ink, #1a1a1a);
  color: #fff;
  font-weight: 600;
}

.mf-3d__views button:focus-visible {
  outline: 2px solid var(--carmine, #9d2235);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Electric desks: a link switch between the two models, and a fine-print line.
   The links go to the other model's page; nothing in the cart changes.
   ------------------------------------------------------------------------ */

.mf-3d__models {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
}

.mf-3d__models-label {
  margin-right: 0.4rem;
  font-size: 0.9em;
  color: var(--mf-text-muted, #666);
}

.mf-3d__model {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1em;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  color: inherit;
  font-size: 0.9em;
  text-decoration: none;
}

.mf-3d__model[aria-current='page'] {
  background: var(--ink, #1a1a1a);
  border-color: var(--ink, #1a1a1a);
  color: #fff;
  font-weight: 600;
}

.mf-3d__model:focus-visible {
  outline: 2px solid var(--carmine, #9d2235);
  outline-offset: 2px;
}

.mf-3d__fineprint {
  margin: 0.8rem 0 0;
  max-width: 60ch;
  font-size: 0.8125rem;
  color: var(--mf-text-muted, #666);
}