/* v2 media layer (loaded last). Photoreal renders (assets/img/product/v2/, 2:3, near-black #020408 studio)
   fill their frames; every frame gets the same near-black so edges never show. Older transparent art
   still works inside the same frames. */
/* Shop card: the whole card is the render colour (--studio, measured from assets/img/product/v2/*.webp edges) so the image has no seam. */
.pcard.pc,.pcard.pc:hover{background:var(--studio)}
.pcard.pc .pcard-media{background:var(--studio)}
.pcard.pc .pcard-media img[src*="/product/v2/"]{left:50%;top:-10%;width:auto;height:118%;aspect-ratio:2/3;max-width:none;object-fit:fill;transform:translateX(-50%)}
.pcard.pc:hover .pcard-media img[src*="/product/v2/"]{transform:translate(-50%,-4px)}
/* Product page gallery */
body.single-product .pd-media{background:var(--studio)}
body.single-product .pd-media img[src*="/product/v2/"]{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
body.single-product .pd-media:has(img[src*="/product/v2/"])::after{display:none}
/* Homepage tiles. Renders are drawn at 118% and lifted 10% so the vial fills more of the frame (owner, round 4); the crop only trims empty studio and the lower reflection. */
.v2-tile-media{background:var(--studio)}
.v2-tile-media img[src*="/product/v2/"]{height:118%;width:auto;aspect-ratio:2/3;object-fit:fill;top:-10%;bottom:auto}
/* Homepage categories: one render per card, centred */
.v2-cat-media{background:var(--studio)}
.v2-cat-media img[src*="/product/v2/"]{height:100%;width:auto;bottom:0;top:0}
.v2-cat-media img[src*="/product/v2/"].v2-cat-v0,.v2-cat-media img[src*="/product/v2/"].v2-cat-v2{display:none}
.v2-cat-media:has(img[src*="/product/v2/"])::after{display:none}
.v2-cat:hover .v2-cat-media img[src*="/product/v2/"].v2-cat-v1{transform:translate(-50%,-4px)}
/* Build-a-Pack builder thumbs and cart drawer thumbs */
.bap-card-media{background:var(--studio);border-radius:10px;overflow:hidden}
.bap-card-media img[src*="pack-thumb-v2"]{height:100%;width:auto}
.cartd-item-media{background:var(--studio)}
.cartd-item-media img[src*="/product/v2/"]{object-fit:cover;object-position:50% 40%}
/* Four renders (ipamorelin, kpv, tb-500, cjc-ipamorelin) carry reflection or glow right up to the file edge. The img box now IS the
   render (2:3), so feathering its outer edge (13% sides, 8% top, last 42% at the bottom) blends it into the card colour with no seam. */
.pcard.pc .pcard-media img[src*="/product/v2/"],.v2-tile-media img[src*="/product/v2/"]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 58%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 58%,transparent 100%);mask-composite:intersect}
@media (prefers-reduced-motion:reduce){.pcard.pc:hover .pcard-media img[src*="/product/v2/"]{transform:translateX(-50%)}.v2-tile:hover .v2-tile-media img,.v2-cat:hover .v2-cat-media img{transform:none}}
/* Case photos (ChatGPT studio shots, 2026-10-31): their black is not exactly --studio, so they fill the frame
   and fade out at the edges like the vial renders, leaving no visible square in the card or gallery. */
.pcard.pc .pcard-media img[src*="-case-"]{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.pcard.pc:hover .pcard-media img[src*="-case-"]{transform:translateY(-4px)}
body.single-product .pd-media img[src*="-case-"],.cartd-item-media img[src*="-case-"]{object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.pcard.pc:hover .pcard-media img[src*="-case-"]{transform:none}}
