/* mv-side.css — put the 3D viewer beside its text, not across the whole page.
 *
 * The viewer was a full-bleed block: 93% of viewport width, 64% of height, with
 * the heading stacked above it. Two problems with that:
 *   1. It reads as a demo, not as part of the story — the copy is out of sight
 *      the moment the object fills the screen.
 *   2. It is a wall. Even with the click-gate (mv-gate.js) making it inert, a
 *      full-width object still means every downward scroll passes over it.
 *
 * Side-by-side fixes both: the text stays visible while the object turns, the
 * object is smaller so there is always page either side of it, and the section
 * reads as an editorial spread rather than an embedded widget.
 *
 * Loaded on every PDP that carries a model-viewer. Scoped to `.turn` so nothing
 * else on the page is touched.
 */

@media (min-width: 900px) {
  /* One grid: copy left, object right. 1fr/1.35fr keeps the object dominant
     without letting it run the full width. */
  .sec.turn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(32px, 4vw, 68px);
    align-items: center;
  }

  /* The heading block stops being a full-width banner and becomes the left column. */
  .sec.turn .shead {
    display: block;
    grid-column: 1;
    margin-bottom: 0;
    align-self: center;
  }
  .sec.turn .shead h2 {
    font-size: clamp(32px, 3.4vw, 58px);
    margin-top: 0;
  }
  .sec.turn .shead p {
    max-width: 38ch;
    margin-top: 18px;
  }

  /* Both markup variants: .mvwrap on seven products, .turn-stage on Sora. */
  .sec.turn .mvwrap,
  .sec.turn .turn-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: clamp(400px, 52vh, 620px);
    margin: 0;
  }

  /* The format line belongs under the copy, not stranded under the object. */
  .sec.turn .fmt,
  .sec.turn .lbl.fmt {
    grid-column: 1;
    align-self: start;
    margin-top: 22px;
  }
}

/* Below 900px the two columns would each be too narrow to read or to see the
   piece properly, so it returns to stacked — text first, object beneath. */
@media (max-width: 899px) {
  .sec.turn .mvwrap,
  .sec.turn .turn-stage {
    height: clamp(340px, 46vh, 480px);
  }
}

/* ---------------------------------------------------------------------------
   Let the object sit on the page, not in a box.

   The stage painted its own panel — #e9e6dd on Sora, a white-to-panel radial
   gradient on the other seven — plus a hairline border. Against the paper
   that reads as an embedded widget: a grey rectangle with a product inside it,
   the one element on the page that looks like a component rather than a page.
   Every other section on these PDPs sits directly on the paper.
   
   The canvas itself was already `background:transparent`, so only the wrapper
   needed to stop painting. No skybox-image is set on any product, so the GLB
   composites straight onto the page. The real contact shadow renders on a
   transparent ground plane, so it survives and now falls on the paper itself —
   which is exactly why the fake CSS ellipse had to go first.
   --------------------------------------------------------------------------- */
.sec.turn .mvwrap,
.sec.turn .turn-stage {
  background: none;
  border: 0;
}

/* Keep the canvas transparent regardless of which rule set won before. */
.sec.turn .mvwrap model-viewer,
.sec.turn .turn-stage model-viewer {
  background: transparent;
  --poster-color: transparent;
}