/* Bag count on the product photo: every bag is always in the DOM and moves
   between slots, so changing weight rearranges them instead of swapping images.
   Rows stop at 76% so bags clear the thumbnails overlaid on the classic photo. */
.pd-pack{position:absolute;inset:0}
.pd-pack.pd-pack img{position:absolute;right:auto;bottom:auto;left:var(--x,30%);top:var(--y,30%);width:var(--w,40%);height:var(--h,40%);
  padding:0;box-sizing:border-box;object-fit:contain;object-position:var(--a,center);opacity:var(--o,0);filter:drop-shadow(0 10px 14px rgba(0,0,0,.42))}
.pd-pack.ready img{transition:left .45s cubic-bezier(.3,.9,.3,1),top .45s cubic-bezier(.3,.9,.3,1),width .45s cubic-bezier(.3,.9,.3,1),height .45s cubic-bezier(.3,.9,.3,1),opacity .3s,transform .6s}
.pd-pack.ready img:nth-child(2){transition-delay:.04s}
.pd-pack.ready img:nth-child(3){transition-delay:.08s}
.pd-pack.ready img:nth-child(4){transition-delay:.12s}

.pd-pack[data-bags="1"] img:nth-child(1){--x:4%;--y:4%;--w:92%;--h:92%;--o:1}

/* Each image is anchored toward the centre of the group (--a), so bags stand
   side by side whatever the photo's proportions. */
.pd-pack[data-bags="2"] img:nth-child(1){--x:5%;--y:12%;--w:44.5%;--h:64%;--o:1;--a:right center}
.pd-pack[data-bags="2"] img:nth-child(2){--x:50.5%;--y:12%;--w:44.5%;--h:64%;--o:1;--a:left center}

.pd-pack[data-bags="4"] img:nth-child(1){--x:5%;--y:44.5%;--w:44.5%;--h:31.5%;--o:1;--a:right top}
.pd-pack[data-bags="4"] img:nth-child(2){--x:50.5%;--y:44.5%;--w:44.5%;--h:31.5%;--o:1;--a:left top}
.pd-pack[data-bags="4"] img:nth-child(3){--x:5%;--y:12%;--w:44.5%;--h:31.5%;--o:1;--a:right bottom}
.pd-pack[data-bags="4"] img:nth-child(4){--x:50.5%;--y:12%;--w:44.5%;--h:31.5%;--o:1;--a:left bottom}

/* Cropped cut-outs are tall and tight: stand them on one baseline, clear of the
   thumbnails, and put all four in one row where they stay largest. */
.pd-pack.cut[data-bags="1"] img:nth-child(1){--x:10%;--y:7%;--w:80%;--h:69%}
.pd-pack.cut[data-bags="2"] img:nth-child(n){--y:13%;--h:63%;--a:left bottom}
.pd-pack.cut[data-bags="2"] img:nth-child(1){--a:right bottom}
.pd-pack.cut[data-bags="4"] img:nth-child(n){--y:17%;--w:21.5%;--h:59%;--a:center bottom}
.pd-pack.cut[data-bags="4"] img:nth-child(1){--x:6%}
.pd-pack.cut[data-bags="4"] img:nth-child(2){--x:28%}
.pd-pack.cut[data-bags="4"] img:nth-child(3){--x:50.5%}
.pd-pack.cut[data-bags="4"] img:nth-child(4){--x:72.5%}

/* The lab photo is a wide strip with nothing overlaid: all four bags fit in a row. */
.lp-main .pd-pack[data-bags="1"] img:nth-child(1){--y:6%;--h:88%}
.lp-main .pd-pack[data-bags="2"] img:nth-child(n){--y:17%;--h:78%}
.lp-main .pd-pack[data-bags="4"] img:nth-child(n){--y:17%;--w:18%;--h:78%;--a:center}
.lp-main .pd-pack[data-bags="4"] img:nth-child(1){--x:13%}
.lp-main .pd-pack[data-bags="4"] img:nth-child(2){--x:32%}
.lp-main .pd-pack[data-bags="4"] img:nth-child(3){--x:51%}
.lp-main .pd-pack[data-bags="4"] img:nth-child(4){--x:70%}

/* Store cards are small and tall, so four bags stay largest as a 2×2 block. */
.pic .pd-pack[data-bags="1"] img:nth-child(1),.rl-pic .pd-pack[data-bags="1"] img:nth-child(1){--x:6%;--y:5%;--w:88%;--h:90%}
.pic .pd-pack[data-bags="2"] img:nth-child(n),.rl-pic .pd-pack[data-bags="2"] img:nth-child(n){--y:16%;--h:68%}
.pic .pd-pack[data-bags="4"] img:nth-child(n),.rl-pic .pd-pack[data-bags="4"] img:nth-child(n){--w:44.5%;--h:42%}
.pic .pd-pack[data-bags="4"] img:nth-child(1),.rl-pic .pd-pack[data-bags="4"] img:nth-child(1){--x:5%;--y:51%;--a:right top}
.pic .pd-pack[data-bags="4"] img:nth-child(2),.rl-pic .pd-pack[data-bags="4"] img:nth-child(2){--x:50.5%;--y:51%;--a:left top}
.pic .pd-pack[data-bags="4"] img:nth-child(3),.rl-pic .pd-pack[data-bags="4"] img:nth-child(3){--x:5%;--y:7%;--a:right bottom}
.pic .pd-pack[data-bags="4"] img:nth-child(4),.rl-pic .pd-pack[data-bags="4"] img:nth-child(4){--x:50.5%;--y:7%;--a:left bottom}
/* Cards already name the weight beside the price, and the price stamp fills this corner. */
.pic .pd-pack-note{display:none}
.rl-pic .pd-pack-note{top:auto;bottom:8px;padding:2px 8px;font-size:.68rem}

.pd-pack-note{position:absolute;z-index:1;top:14px;left:50%;transform:translate(-50%,-6px);padding:4px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(20,10,5,.78);color:#fff;font-size:.82rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.pd-pack-note.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  /* On small cards the price stamp would cover the bags. */
  .pic:has(.pd-pack[data-bags="2"],.pd-pack[data-bags="4"]) .stamp{transform:scale(.68)}
  .pd-pack-note{top:12px;padding:3px 8px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .pd-pack.ready img,.pd-pack-note{transition:none}
}