/* ---------------------------------------------------------------
   Shop - the "t.b.a." holding page.

   There is no shop yet and none has been specified, so this page is
   exactly what the owner drew: the illustration, the shared nav and
   footer, and the hand-lettered butterfly in the middle. No product
   grid, no placeholder cards, nothing that implies a shop is there.

   Geometry, fitted to references/shop-page-desktop-tba-mockup.png and
   references/shop-page-mobile-tba-mockup.png. The butterfly's painted
   area was isolated in both by matching its two flat pink fills
   (254,181,224 and 255,198,231), which the background art never uses:

     desktop @1920x875   pink 408 x 482, centred on the stage
                         (x 756..1163, y 197..678 -> cx 959.5, cy 437.5)
     mobile  @375x812    pink 279 x 330, centred on the stage
                         (x  48..326, y 241..570 -> cx 187.0, cy 405.5)

   page_assets/shop-tba.png is 1000x1000 with the paint inset to
   x 88..912, y 12..987 - so the drawn box is 825/976 of the file and
   the whole image is 408 * (1000/825) = 494px wide on desktop and
   279 * (1000/825) = 338px on mobile. Both come out square, which is
   the check that the two independent measurements agree.

   Those two came out 0.6% small when the render was measured back
   against the mockups at their own resolution (3840x1750 and 375x812
   at dsf 3, so neither reference is resampled). The inset above is an
   alpha>12 threshold and the mockup carries the soft edge too, so the
   full image is a little wider than 1000/825 of the painted box.
   Corrected to 497px desktop / 340px mobile, which lands both within
   1px an edge with the centres exact.

   Both are dead centre on the stage, which is worth saying out loud:
   the Home panel deliberately sits off-centre because the artwork puts
   it there, and this one deliberately does not.
   --------------------------------------------------------------- */

.shoptba {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;

  /* 497/1920 wide, capped at 497/875 of the height so a short viewport
     shrinks the whole thing rather than letting it run under the footer.
     At the 1920x875 reference both terms are 497px. */
  width: min(25.885vw, 56.800vh);
}

.shoptba__art {
  display: block;
  width: 100%;
  height: auto;
  /* The mockup lays the butterfly flat on the art - no shadow, no glow. */
}

@media (max-width: 760px) {
  .shoptba {
    /* 340/375 wide, capped at 340/812 of the height. Both are 340px at the
       375x812 reference, and on a shorter phone the height term binds first
       so the butterfly keeps clear of the hamburger and the footer. */
    width: min(90.667vw, 41.872vh);
  }
}