/* Component: pack-shot — design-reference/canvas/PackShot.dc.html.
   Drawn on a fixed 280×320 stage and scaled with --mx-pack-s, so every size keeps the
   design's proportions. Colours: packaging tokens only. */

.mx-pack {
	--mx-pack-s: 0.72;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: calc(280px * var(--mx-pack-s));
	height: calc(320px * var(--mx-pack-s));
	overflow: hidden;
}
.mx-pack--xs { --mx-pack-s: 0.24; }
.mx-pack--sm { --mx-pack-s: 0.42; }
.mx-pack--md { --mx-pack-s: 0.72; }
.mx-pack--lg { --mx-pack-s: 0.8; }
.mx-pack--xl { --mx-pack-s: 1.55; }
@media (max-width: 720px) {
	.mx-pack--xl { --mx-pack-s: 1.05; }
	.mx-pack--lg { --mx-pack-s: 0.62; }
}

.mx-pack__stage {
	position: absolute;
	left: 0;
	top: 0;
	width: 280px;
	height: 320px;
	transform: scale(var(--mx-pack-s));
	transform-origin: 0 0;
}
.mx-pack__stage > span { position: absolute; display: block; }
.mx-pack__shadow {
	left: 50px; right: 50px; bottom: 14px; height: 14px;
	border-radius: 50%;
	background: var(--mx-pack-shadow);
	filter: blur(6px);
}
.mx-pack__body { box-sizing: border-box; }
.mx-pack__body > span { position: absolute; display: block; }

/* Pouch — kraft stand-up pouch */
.mx-pack--pouch .mx-pack__body {
	left: 56px; top: 52px; width: 168px; height: 236px;
	border-radius: 18px 18px 10px 10px;
	background: linear-gradient(90deg, var(--mx-kraft-dark) 0%, var(--mx-kraft-light) 28%, var(--mx-kraft) 70%, var(--mx-kraft-dark) 100%);
}
.mx-pack--pouch .mx-pack__zip { left: 0; right: 0; top: 20px; height: 5px; background: var(--mx-kraft-seam); }
.mx-pack--pouch .mx-pack__gusset { left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 10px 10px; background: var(--mx-kraft-gusset); }
.mx-pack--pouch .mx-label { --mx-u: 1.36px; left: 16px; top: 60px; width: 136px; height: 116px; }

/* Jar — white PET with dark lid */
.mx-pack--jar .mx-pack__lid { left: 66px; top: 74px; width: 148px; height: 38px; border-radius: 8px 8px 4px 4px; background: var(--mx-lid); }
.mx-pack--jar .mx-pack__lid-band { left: 70px; top: 108px; width: 140px; height: 8px; background: var(--mx-lid-band); }
.mx-pack--jar .mx-pack__body {
	left: 54px; top: 114px; width: 172px; height: 178px;
	border-radius: 24px;
	border: 1px solid var(--mx-jar-edge);
	background: linear-gradient(90deg, var(--mx-jar-shade) 0%, var(--mx-jar-light) 30%, var(--mx-jar) 75%, var(--mx-jar-shade) 100%);
}
.mx-pack--jar .mx-label { --mx-u: 1.35px; left: 9px; top: 30px; width: 152px; height: 108px; }

/* Bottle — amber glass */
.mx-pack--bottle .mx-pack__cap { left: 118px; top: 36px; width: 44px; height: 44px; border-radius: 6px 6px 3px 3px; background: var(--mx-cap); }
.mx-pack--bottle .mx-pack__neck { left: 116px; top: 78px; width: 48px; height: 22px; background: var(--mx-amber-neck); }
.mx-pack--bottle .mx-pack__body {
	left: 72px; top: 98px; width: 136px; height: 194px;
	border-radius: 34px 34px 16px 16px;
	background: linear-gradient(90deg, var(--mx-amber-dark) 0%, var(--mx-amber-light) 30%, var(--mx-amber) 70%, var(--mx-amber-dark) 100%);
}
.mx-pack--bottle .mx-label { --mx-u: 1.16px; left: 10px; top: 54px; width: 116px; height: 104px; }

/* Sack — 25 kg woven */
.mx-pack--sack .mx-pack__body {
	left: 38px; top: 40px; width: 204px; height: 252px;
	border-radius: 6px 6px 10px 10px;
	border: 1px solid var(--mx-sack-edge);
	background: repeating-linear-gradient(0deg, var(--mx-sack) 0, var(--mx-sack) 3px, var(--mx-sack-weave) 3px, var(--mx-sack-weave) 4px);
}
.mx-pack--sack .mx-pack__stitch { left: 6px; right: 6px; top: 12px; border-top: 3px dashed var(--mx-sack-stitch); }
.mx-pack--sack .mx-label { --mx-u: 1.5px; left: 27px; top: 58px; width: 150px; height: 128px; }

.mx-product-photo { display: block; width: 100%; height: 100%; object-fit: contain; }