/* Main-page placement only. The phone material and motion are shared with the
   approved CSS study; the existing illustrations continue to own screen UI. */
#agency-site .phone-3d-host {
  position: relative;
  width: min(100%, 382px);
  aspect-ratio: 382 / 690;
  min-width: 0;
  margin-block: -15px;
  overflow: visible;
}

/* Anchor the subscription sticker to the phone's own responsive wrapper so it
   keeps the same relationship to the device instead of following the stage. */
#agency-site .taste-access .phone-3d-host > .taste-sticker {
  top: 13.2%;
  left: auto;
  right: -13%;
}

/* The host already reserves the space a tilted phone needs. Reuse the stage's
   old padding instead of adding a second set of gaps around the model. */
#agency-site .taste-access .taste-phone-stage:has(> .phone-3d-host),
#agency-site .taste-schedules .fd-stage:has(> .phone-3d-host) {
  padding-block: 0;
}

#agency-site .phone-3d-host ~ .sd-controls {
  margin-top: 8px;
}

/* Offset and bank only the mobile devices, keeping the stages and controls
   centred on the page. The outer scene preserves the existing scroll motion. */
@container (max-width: 600px) {
  #agency-site .taste-access .phone-3d-host {
    left: -24px;
  }

  #agency-site .taste-schedules .phone-3d-host {
    left: 24px;
  }

  #agency-site .taste-access .phone-3d-host > .c3d-scene,
  #agency-site .taste-access .phone-3d-host > .taste-phone {
    transform: rotate(-4deg);
  }

  #agency-site .taste-schedules .phone-3d-host > .c3d-scene,
  #agency-site .taste-schedules .phone-3d-host > .taste-phone {
    transform: rotate(4deg);
  }

  #agency-site .taste-access .phone-3d-host > .taste-sticker {
    right: -6%;
  }

  #agency-site .taste-schedules .fd-stage > .taste-sticker--fifo {
    /* Mirror the host-anchored sticker, accounting for its -15px block margins. */
    top: calc(13.2% - 11px);
    left: calc(24px - 6%);
    right: auto;
  }

  #agency-site .taste-access .sd-controls {
    justify-self: stretch;
  }
}

/* Keep both screens clear while retaining the 3D body's edge highlights. */
#agency-site .phone-3d-host .c3d-coat {
  display: none;
}

/* Keep a usable original phone if the 3D module cannot initialize. Once the
   renderer mounts, its fixed 284 x 600 screen gives both existing screen
   ResizeObservers the original layout dimensions, independent of 3D scale. */
#agency-site .phone-3d-host > .taste-phone {
  width: min(304px, 100%);
  margin-inline: auto;
}

#agency-site .phone-3d-host .c3d-front > .taste-screen.device-screen {
  width: 284px;
  height: 600px;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 284 / 600;
}

/* The FIFO key and its payment pulses stay visible on the front object. A
   negative stacking level would place them behind the new solid phone body.
   They remain decoration, so the checkout button still receives clicks. */
#agency-site .phone-3d-host .c3d-front > .fd-hardware {
  z-index: 2;
  right: -4px;
  pointer-events: none;
}