/* Original 640 × 640 Gocher Steintor catalogue photographs.
 * These manually traced CSS silhouettes hide the blue catalogue background and
 * white sticker outline. Original product pixels and lettering are untouched.
 * Apply each class directly to its matching image, using a square image box
 * (640:640); the parent frame controls size and placement independently.
 */

.product-cutout--kraeuter {
  clip-path: polygon(
    43.125% 8.438%, 44.219% 7.656%, 46.094% 7.188%, 48.281% 7.188%,
    50.781% 7.500%, 52.188% 8.125%, 52.812% 8.906%, 53.125% 10.469%,
    52.812% 11.250%, 53.125% 12.812%, 52.812% 14.531%, 52.188% 15.312%,
    52.344% 19.219%, 52.812% 21.250%, 53.906% 22.344%, 57.188% 23.594%,
    60.156% 25.156%, 62.031% 27.344%, 63.281% 30.000%, 63.906% 32.656%,
    64.062% 36.406%, 64.062% 89.688%, 63.750% 92.656%, 62.969% 94.062%,
    61.562% 94.844%, 58.906% 95.312%, 35.625% 95.312%, 33.594% 94.844%,
    32.344% 93.906%, 31.719% 92.656%, 31.406% 90.469%, 31.406% 33.594%,
    31.875% 30.312%, 32.969% 27.656%, 34.375% 25.781%, 36.562% 24.219%,
    39.062% 23.125%, 41.406% 22.500%, 42.656% 21.250%, 43.125% 17.656%,
    43.125% 15.469%, 42.656% 14.375%, 42.969% 12.969%, 42.656% 12.188%,
    42.969% 10.938%, 42.969% 9.531%
  );
}

.product-cutout--kirsch {
  clip-path: polygon(
    42.188% 7.344%, 43.438% 6.719%, 45.625% 6.406%, 47.656% 6.719%,
    49.062% 7.188%, 49.531% 7.969%, 49.531% 10.781%, 49.062% 12.500%,
    49.375% 16.250%, 49.531% 22.031%, 49.375% 25.938%, 49.688% 31.094%,
    51.406% 32.500%, 52.812% 34.375%, 53.750% 36.562%, 54.219% 38.750%,
    54.219% 88.750%, 54.219% 90.625%, 53.281% 92.188%, 51.719% 93.125%,
    49.219% 93.750%, 44.375% 93.750%, 40.938% 93.125%, 39.219% 92.188%,
    38.281% 91.094%, 37.969% 89.062%, 37.969% 39.062%, 38.281% 36.719%,
    39.219% 34.688%, 40.469% 33.125%, 41.875% 31.875%, 42.344% 30.625%,
    42.500% 25.156%, 42.344% 22.344%, 42.344% 16.094%, 42.656% 12.656%,
    42.188% 11.875%, 42.188% 10.000%, 42.031% 8.438%
  );
}

.product-cutout--glas {
  clip-path: polygon(
    33.281% 12.500%, 34.062% 11.406%, 35.938% 10.469%, 39.062% 9.844%,
    42.812% 9.375%, 46.875% 9.375%, 50.938% 9.688%, 54.531% 10.312%,
    57.344% 11.250%, 58.906% 12.188%, 59.375% 13.438%, 59.219% 33.906%,
    59.219% 67.812%, 58.906% 85.625%, 58.594% 87.344%, 57.500% 88.750%,
    55.312% 89.688%, 52.656% 90.312%, 48.906% 90.781%, 45.156% 90.938%,
    41.406% 90.469%, 38.594% 89.844%, 36.406% 89.062%, 35.000% 87.969%,
    34.062% 86.250%, 33.906% 83.906%, 33.750% 68.125%, 33.594% 47.969%,
    33.438% 28.594%, 33.281% 15.000%
  );
}

/* Shared by the Solero editorial stage, catalogue and product detail. */
.product-cutout--solero,
.solero-feature__bottle {
  clip-path: polygon(
    45.3% 2%, 46.2% 1.9%, 53.8% 1.9%, 54.5% 2.2%,
    54.9% 3%, 54.9% 18%, 55.2% 21%, 55.8% 23%,
    57.3% 25%, 59.8% 27%, 61.8% 28.8%, 62.9% 30.6%,
    63.4% 32%, 63.5% 92%, 63.3% 93.8%, 63% 94.6%,
    61% 95.3%, 39% 95.3%, 37.1% 95%, 36.6% 94.6%,
    36.4% 93.5%, 36.5% 33%, 36.8% 31.4%, 37.3% 30%,
    38.7% 28.4%, 41% 26.8%, 43% 25%, 44% 24%,
    44.8% 21.5%, 45% 20%, 45% 3%
  );
}

/* Only the three original bottle images use these calm, square stages. */
.original-product-stage {
  --product-center: 50%;
  --product-glow: #b06a3e3d;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1;
  overflow: clip;
  background: radial-gradient(ellipse at 50% 55%, var(--product-glow), #15111033 45%, transparent 72%);
}

.original-product-stage--kraeuter { --product-center: 48%; --product-glow: #80582d42; }
.original-product-stage--kirsch { --product-center: 46%; --product-glow: #a12e5940; }
.original-product-stage--detail { max-width: 610px; margin: 0 auto; }
.original-product-stage--catalog { flex-shrink: 0; }

.reference-content .original-product-stage > :is(img,.regional-motion-trigger) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  aspect-ratio: 1;
  object-fit: contain;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  transform: translate(calc(-1 * var(--product-center)), -50%);
}
