/* ══════════════════════════════════════════════════════════════════════════
   The tray (§5) — the one object every product in the store appears in.

   WHY IT IS ITS OWN FILE. It used to live in 70-product-card.css, which was
   defensible while only the archive and the PDP rendered a packshot. It stopped
   being defensible the moment the cart, the mini-cart, the checkout review and
   the order confirmation started rendering one: inc/checkout.php drops the card
   stylesheet on the cart and the checkout — deliberately, and correctly, since
   those surfaces show no cards and the card is 14 KB against a 70 KB per-page
   budget (G7). The tray went with it, and the cart's 72px trays rendered as
   unstyled 72px images with no white, no containment and no contact line.

   §5.2 is a table of SIX surfaces. A primitive used on six surfaces cannot be
   a section of the file belonging to one of them.

   The card's own relationship to the tray — the hover lift — stays in the card
   file, because that is a card behaviour that happens to involve a tray.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-tray {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    /* #FFFFFF exactly, and never "warmed". Fourteen SKUs ship an opaque white
       studio ground; on a cream tray each would render as a visible white
       rectangle, and at #FFFCF6 the #FEFEFE / #FDFFFD strays produce a seam.
       The tray is white because the catalogue is white. */
    background-color: var(--rtv-tray);
    border-radius: var(--r-2);
    /* The frame is often LARGER than the tray, and must be. A pack whose ink
       fills only 55% of its supplier frame needs a frame 1.32x the tray for
       its ink to reach the 0.72 constant — the Amix creatine tub measures
       exactly that. What hangs outside is studio ground and nothing else: the
       placement keeps the ink inside 12%-84% vertically and inside 76%
       horizontally, by construction. Clipping it is what stops an opaque white
       ground painting a rectangle past the tray's rounded corners.
       tests/primitives asserts the ink stays inside, so this clip can never
       quietly start cutting a product. */
    overflow: hidden;
    /* No border. No shadow. No filter. A drop-shadow around a failed
       background cut draws a soft shadow around a RECTANGLE (§5.3.2). */
  }

  .rtv-tray--sm { border-radius: var(--r-1); }

  /* ── the six sizes of the one tray (§5.2) ──────────────────────────────────
     The table in §5.2 is the whole specification: one object, six sizes, one
     occupancy constant. Two of them are fluid because their container decides
     (the shelf cell, and the PDP stage, which product.css sizes); the four
     small ones are fixed, because a 64px tray next to a 72px tray on the same
     journey is the defect, not the variety.

     `flex: none` because three of the four fixed sizes live in a flex or grid
     row next to a name that wants the rest of the space, and a shrunk tray is
     the one failure mode §7.2 photographs. */
  .rtv-tray--line,
  .rtv-tray--mini,
  .rtv-tray--thumb {
    flex: none;
    border-radius: var(--r-1);
  }

  .rtv-tray--line  { inline-size: 72px; }
  .rtv-tray--mini  { inline-size: 64px; }
  .rtv-tray--thumb { inline-size: 48px; }

  /* ── the pack, placed from its own measured ink (§5.2) ─────────────────────
     ONE occupancy constant, everywhere, so a tall tub and a wide pouch read as
     equally weighted. Eyeballing per-card scale is the F10 fault and a review
     rejection — and so, it turns out, is applying one honest constant to the
     wrong quantity. §5.2's 0.72 is INK height over tray height, and a supplier
     packshot is a product floating in a frame of studio white. Scaling the
     FRAME to 0.72 scaled the ink to between 0.39 and 0.71, measured across
     fourteen rendered trays on the running store.

     --pack-h and --pack-b are per-image data, measured once by
     inc/packshot.php and delivered inline. They already carry the 12% inset
     and the ink offset, so this rule spends them and computes nothing:

       --pack-h   frame height, as a % of the tray, that puts the INK at 0.72
       --pack-b   where the frame's bottom edge goes, so the ink's BASE lands
                  on the contact line rather than floating 7-44px above it
       --pack-max the §5.2 no-upscaling cap, in px of frame height

     The fallbacks are the pre-measurement behaviour: 72% of the frame,
     centred-ish. An unmeasurable image is then imprecise, which is visible,
     rather than missing, which is not recoverable. */
  .rtv-tray__pack {
    position: absolute;
    inset-block-end: var(--pack-b, 14%);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    block-size: var(--pack-h, calc(var(--pack-occupancy) * 100%));
    /* The cap is a maximum on the FRAME, so it binds correctly on a fluid tray
       whose pixel size no stylesheet knows. §5.2 works out that it never binds
       in the current catalogue; tests/primitives asserts that rather than
       trusting it. */
    max-block-size: var(--pack-max, none);
    inline-size: auto;
    /* contain, never cover: the three 370×480 packs and the one 788×917
       letterbox inside the square and nothing is ever cropped. With an explicit
       block-size and an auto inline-size the box already matches the image's
       aspect, so contain is the guarantee rather than the mechanism. */
    object-fit: contain;
    object-position: center;
  }

  /* Woo's placeholder is not a packshot and has no ink to stand on. It is
     centred, and says so. */
  .rtv-tray__pack--placeholder {
    inset-block-end: 14%;
    block-size: calc(var(--pack-occupancy) * 100%);
    max-inline-size: 76%;
  }

  /* Mark 2 — the contact line. 12% up from the tray's base, behind the pack. */
  .rtv-tray__contact {
    position: absolute;
    inset-inline: 12%;
    inset-block-end: 12%;
    block-size: 6px;
    color: var(--rtv-rule);
    pointer-events: none;
  }

  /* At ledger scale a 6px bow on a 72px tray is a smudge, and on a 48px thumb
     it is noise. The mark keeps its proportion instead of its pixel height. */
  .rtv-tray--line .rtv-tray__contact,
  .rtv-tray--mini .rtv-tray__contact,
  .rtv-tray--thumb .rtv-tray__contact {
    block-size: 3px;
  }
}