/* merch: full-bleed mockups, one at a time (client tokens only) */
.mx{ position:absolute; inset:0; overflow:clip; }
.mx-item{ position:absolute; inset:0; opacity:0; transform:scale(1.04);
  transition:opacity .7s var(--ease), transform 1.4s var(--ease); }
.mx-item.is-on{ opacity:1; transform:none; }
.mx-item > .ph{ position:absolute; inset:0; }
@media (prefers-reduced-motion: reduce){ .mx-item{ transform:none; transition:opacity .2s; } }

/* the studio placeholder: a lit backdrop in the client's colours, the form centred in the view */
.mx-studio{ position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at calc(var(--vx) + var(--vw) / 2) 38%, color-mix(in srgb, var(--c-brand-5) 80%, #fff), var(--c-brand-4) 62%, color-mix(in srgb, var(--c-brand-3) 70%, #000)); }
.mx-view{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; transition:left .7s var(--ease), width .7s var(--ease); }
.mx-obj{ position:absolute; left:50%; top:47%; transform:translate(-50%, -50%); background:var(--o); color:var(--o-on);
  display:grid; place-items:center; container-type:size; isolation:isolate;
  box-shadow:0 40px 60px -30px rgba(0,0,0,.5), inset 0 -40px 60px -40px rgba(0,0,0,.25), inset 0 30px 50px -40px rgba(255,255,255,.25); }
.mx--round{ height:38%; aspect-ratio:1; border-radius:50%; }
.mx--square{ height:46%; aspect-ratio:.86; border-radius:6px 6px 14px 14px; }
.mx--tall{ height:54%; aspect-ratio:.36; border-radius:40px 40px 28px 28px; }
.mx--wide{ height:32%; aspect-ratio:1.6; border-radius:4px; }
.mx--card{ height:26%; aspect-ratio:1.586; border-radius:18px; transform:translate(-50%, -50%) rotate(-6deg); }
.mx-print{ width:52%; height:40%; display:grid; place-items:center; }
.mx--tall .mx-print{ width:62%; height:22%; }
.mx-print .lg{ width:100%; height:100%; }
.mx-line{ margin:0; font:800 11cqmin/.95 var(--c-display); letter-spacing:-.04em; text-align:center; text-wrap:balance; }
.mx-obj::after{ content:""; position:absolute; left:8%; right:8%; top:calc(100% + 18px); height:22px; border-radius:50%; background:rgba(0,0,0,.26); filter:blur(12px); z-index:-1; }   /* the floor shadow, under any form */
.mx-label{ left:auto; right:33px; bottom:33px; font-size:11px; }

/* a pair (then / now): two halves on the frame, 8px apart, then on the left */
.mx-pair{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  transition:left .7s var(--ease); }
.has-switcher .mx-pair{ bottom:calc(33px + 40px * var(--ui, 1) + 24px); }
.mx-half{ position:relative; min-width:0; border-radius:14px; overflow:clip; }
.mx-half > .ph{ position:absolute; inset:0; }

/* a finished mockup shown whole: on the frame, 14px radius, never cropped under the rail */
.mx-whole{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:grid; place-items:center; transition:left .7s var(--ease); }
.has-switcher .mx-whole{ bottom:calc(33px + 40px * var(--ui, 1) + 24px); }
.mx-whole > .ph{ position:relative; inset:auto; width:100%; height:100%; background:none; }
.mx-whole > .ph img{ object-fit:contain; border-radius:14px; }

/* a lookbook: three 4:5 portraits, uncropped, sized from the frame (an ancestor container) */
.mx-trio{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; container-type:size; display:grid; place-items:center; }
.has-switcher .mx-trio{ bottom:calc(33px + 40px * var(--ui, 1) + 24px); }
.mx-trio-row{ display:grid; gap:8px; grid-template-columns:repeat(3, min(calc((100cqw - 16px) / 3), calc(100cqh * 4 / 5))); }
.mx-trio .mx-half{ aspect-ratio:4 / 5; }
.mx-trio .mx-half img{ width:100%; height:100%; object-fit:cover; }
.mx-trio .mx-half{ background:#e4e4e4; }
.mx-trio .mx-half img{ object-fit:contain; }   /* photos fill their 4:5 exactly; cut-outs on a soft ground */

/* a studio shot set into its own backdrop colour, full height, no frame */
.mx-studio{ position:absolute; inset:0; }
.mx-whole--studio{ top:0; bottom:0; }
.has-switcher .mx-whole--studio{ bottom:0; }
.mx-whole--studio > .ph img{ border-radius:0; }