/* Shop-only optical sizing from the non-transparent bounds of the retained assets.
   Product artwork, labels, proportions, stock and shopping behaviour stay unchanged. */
body[data-page="shop"] .catalog-grid .product-image {
  aspect-ratio: 10 / 9;
  isolation: isolate;
}
body[data-page="shop"] .catalog-grid .product-image img[data-live-image] {
  position: absolute;
  left: 50%;
  top: 56%;
  width: var(--yn-catalog-width, 84%);
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  object-fit: contain;
  transform-origin: var(--yn-catalog-center-x, 50%) var(--yn-catalog-center-y, 50%);
  transform: translate(calc(0% - var(--yn-catalog-center-x, 50%)), calc(0% - var(--yn-catalog-center-y, 50%))) scale(1);
  filter: drop-shadow(0 14px 14px rgba(21, 21, 21, .14));
  transition: transform .35s ease, filter .35s ease;
}
/* high protein shake chocolate: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/high-protein-shake-chocolate-cutout.png"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/high-protein-shake-chocolate-cutout.png"] {
  --yn-catalog-width: 50.9297%;
  --yn-compass-width-factor: 0.565885;
  --yn-catalog-center-x: 50%;
  --yn-catalog-center-y: 49.2058%;
}
/* protein bar creme brulee: 86% visible width of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/protein-bar-creme-brulee-cutout.png"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/protein-bar-creme-brulee-cutout.png"] {
  --yn-catalog-width: 93.0836%;
  --yn-compass-width-factor: 2.094306;
  --yn-catalog-center-x: 50.0282%;
  --yn-catalog-center-y: 53.4386%;
}
/* premium core protein bar: 86% visible width of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/protein-bar-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/protein-bar-transparent.webp"] {
  --yn-catalog-width: 108.2896%;
  --yn-compass-width-factor: 2.582278;
  --yn-catalog-center-x: 50.625%;
  --yn-catalog-center-y: 51.9167%;
}
/* vitamin c + zink: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/vitamin-c-zink-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/vitamin-c-zink-transparent.webp"] {
  --yn-catalog-width: 84.5109%;
  --yn-compass-width-factor: 0.93901;
  --yn-catalog-center-x: 50%;
  --yn-catalog-center-y: 50.125%;
}
/* power load pre-workout booster: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/power-load-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/power-load-transparent.webp"] {
  --yn-catalog-width: 135%;
  --yn-compass-width-factor: 1.5;
  --yn-catalog-center-x: 49.1667%;
  --yn-catalog-center-y: 48.1481%;
}
/* vitamin d3 5000 ie: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/vitamin-d3-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/vitamin-d3-transparent.webp"] {
  --yn-catalog-width: 83.2443%;
  --yn-compass-width-factor: 0.924937;
  --yn-catalog-center-x: 50.8796%;
  --yn-catalog-center-y: 51.1111%;
}
/* eaa pulver: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/eaa-sour-cherry-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/eaa-sour-cherry-transparent.webp"] {
  --yn-catalog-width: 82.3113%;
  --yn-compass-width-factor: 0.91457;
  --yn-catalog-center-x: 58.9352%;
  --yn-catalog-center-y: 49.4907%;
}
/* premium protein pulver: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/your-nutrition-protein-pulver-vanille-creme-3d-v1.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/your-nutrition-protein-pulver-vanille-creme-3d-v1.webp"] {
  --yn-catalog-width: 47.9187%;
  --yn-compass-width-factor: 0.53243;
  --yn-catalog-center-x: 50.4144%;
  --yn-catalog-center-y: 49.8273%;
}
/* premium kollagen hydrolysat: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/kollagen-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/kollagen-transparent.webp"] {
  --yn-catalog-width: 82.7234%;
  --yn-compass-width-factor: 0.919149;
  --yn-catalog-center-x: 50.6944%;
  --yn-catalog-center-y: 50.3241%;
}
/* multi one vitamine & mineralstoffe: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/multi-one-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/multi-one-transparent.webp"] {
  --yn-catalog-width: 83.2443%;
  --yn-compass-width-factor: 0.924937;
  --yn-catalog-center-x: 51.8056%;
  --yn-catalog-center-y: 50.2778%;
}
/* omega 3 fischöl: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/omega-3-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/omega-3-transparent.webp"] {
  --yn-catalog-width: 80.1164%;
  --yn-compass-width-factor: 0.890182;
  --yn-catalog-center-x: 64.3056%;
  --yn-catalog-center-y: 51.3426%;
}
/* energy oat bar: 86% visible width of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/energy-oat-bar-vanilla-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/energy-oat-bar-vanilla-transparent.webp"] {
  --yn-catalog-width: 99.4433%;
  --yn-compass-width-factor: 1.836;
  --yn-catalog-center-x: 50.463%;
  --yn-catalog-center-y: 51.1111%;
}
/* premium creatin monohydrat: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/creatin-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/creatin-transparent.webp"] {
  --yn-catalog-width: 81.0994%;
  --yn-compass-width-factor: 0.901104;
  --yn-catalog-center-x: 50%;
  --yn-catalog-center-y: 49.3981%;
}
/* l-carnitin + grüntee: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/l-carnitin-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/l-carnitin-transparent.webp"] {
  --yn-catalog-width: 78.5922%;
  --yn-compass-width-factor: 0.873246;
  --yn-catalog-center-x: 64.6296%;
  --yn-catalog-center-y: 52.6389%;
}
/* l-glutamin pulver: 68% visible height of its stage. */
body[data-page="shop"] .catalog-grid .product-image img[src="/assets/l-glutamin-transparent.webp"],
body[data-page="home"] .yn-compass-product-image img[src="/assets/l-glutamin-transparent.webp"] {
  --yn-catalog-width: 81.0994%;
  --yn-compass-width-factor: 0.901104;
  --yn-catalog-center-x: 50%;
  --yn-catalog-center-y: 49.3056%;
}
@media (hover: hover) and (pointer: fine) {
  body[data-page="shop"] .catalog-grid .product-image:hover img[data-live-image],
  body[data-page="shop"] .catalog-grid .product-image:focus-visible img[data-live-image] {
    transform: translate(calc(0% - var(--yn-catalog-center-x, 50%)), calc(0% - var(--yn-catalog-center-y, 50%))) scale(1.035);
    filter: drop-shadow(0 17px 17px rgba(21, 21, 21, .18));
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="shop"] .catalog-grid .product-image img[data-live-image],
  body[data-page="shop"] .catalog-grid .product-image:hover img[data-live-image],
  body[data-page="shop"] .catalog-grid .product-image:focus-visible img[data-live-image] {
    transform: translate(calc(0% - var(--yn-catalog-center-x, 50%)), calc(0% - var(--yn-catalog-center-y, 50%))) scale(1);
    transition: none;
  }
}

/* The guide uses the same transparent artwork, without the Wix-image white mats. */
body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image {
  --yn-compass-stage-height: 164px;
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(var(--yn-compass-stage-height) * var(--yn-compass-width-factor, 1));
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  transform-origin: var(--yn-catalog-center-x, 50%) var(--yn-catalog-center-y, 50%);
  transform: translate(calc(0% - var(--yn-catalog-center-x, 50%)), calc(0% - var(--yn-catalog-center-y, 50%)));
  filter: drop-shadow(0 8px 8px rgba(21, 21, 21, .12));
}
body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image img[src="/assets/protein-bar-creme-brulee-cutout.png"],
body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image img[src="/assets/protein-bar-transparent.webp"],
body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image img[src="/assets/energy-oat-bar-vanilla-transparent.webp"] {
  width: min(var(--yn-catalog-width), calc(var(--yn-compass-stage-height) * var(--yn-compass-width-factor)));
}
@media (max-width: 960px) {
  body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image {
    --yn-compass-stage-height: 180px;
  }
}
@media (max-width: 600px) {
  body[data-page="home"] .yn-home-compass-premium .yn-compass-results .yn-compass-product-image {
    --yn-compass-stage-height: 150px;
  }
}