* {
  box-sizing: border-box;
}


:root {
  /* v43.30: Vollbild-Bildviewer. Overlay weniger dunkel, restliches Layout unverändert. */
  --sg-dcube-lightbox-backdrop-rgb: 0, 0, 0;
  --sg-dcube-lightbox-backdrop-alpha: 0.82;
  --sg-dcube-lightbox-backdrop-blur: 24px;
  --sg-dcube-lightbox-padding: clamp(14px, 2vw, 34px);
  --sg-dcube-lightbox-width: calc(100vw - (var(--sg-dcube-lightbox-padding) * 2));
  --sg-dcube-lightbox-height: calc(100vh - (var(--sg-dcube-lightbox-padding) * 2));
  --sg-dcube-lightbox-radius: 18px;
  --sg-dcube-lightbox-bg: #020302;
  --sg-dcube-lightbox-shadow: 0 18px 60px rgba(0, 0, 0, 0.44);
  --sg-dcube-lightbox-close-size: 50px;
  --sg-dcube-lightbox-close-offset: 18px;
  --sg-dcube-lightbox-transition: 220ms;
}

/*
  v43
  - Geometrie des einzelnen Würfels bleibt so nah wie möglich an v41.
  - Drei separate Würfel werden nur über zusätzliche Wrapper/Slots angeordnet.
  - Zoom bleibt auf .sg-dcube-zoom-shell.
  - .sg-dcube selbst enthält nur translateZ / rotateX / rotateY / rotateZ.
*/
#sg-dcube-widget.sg-dcube-widget {
  --sg-dcube-text: #1f2b1b;
  --sg-dcube-muted: #596851;
  --sg-dcube-accent: #6f8f45;

  /* v43.31: Einbau-Version ohne zusätzliche Modul-Abstände oben/unten. */
  --sg-dcube-page-min-height: 0px;
  --sg-dcube-page-padding: 0px;

  --sg-dcube-min-size: 150px;
  --sg-dcube-max-size: 460px;
  --sg-dcube-safe-scale: 1.76;
  --sg-dcube-safe-ratio: 0.5682;
  --sg-dcube-viewport-padding: 28px;

  --sg-dcube-size: clamp(
    var(--sg-dcube-min-size),
    calc((100vw - var(--sg-dcube-viewport-padding)) * var(--sg-dcube-safe-ratio)),
    var(--sg-dcube-max-size)
  );
  --sg-dcube-half: calc(var(--sg-dcube-size) / 2);
  --sg-dcube-safe-size: calc(var(--sg-dcube-size) * var(--sg-dcube-safe-scale));

  /* Szene: Breite/Höhe getrennt steuerbar. */
  --sg-dcube-scene-width-factor: 2.70;
  --sg-dcube-scene-height-factor: 0.98;
  --sg-dcube-scene-width: calc(var(--sg-dcube-safe-size) * var(--sg-dcube-scene-width-factor));
  --sg-dcube-scene-height: calc(var(--sg-dcube-safe-size) * var(--sg-dcube-scene-height-factor));

  /* Slots: Front, Hintergrund links, Hintergrund rechts. */
  --sg-dcube-front-scale: 1;
  --sg-dcube-back-1-scale: 0.68;
  --sg-dcube-back-2-scale: 0.54;

  --sg-dcube-back-1-blur: 2px;
  --sg-dcube-back-2-blur: 5px;

  --sg-dcube-back-1-opacity: 0.80;
  --sg-dcube-back-2-opacity: 0.58;

  --sg-dcube-front-x: 0%;
  --sg-dcube-front-y: -2%;
  --sg-dcube-back-1-x: -62%;
  --sg-dcube-back-1-y: 9%;
  --sg-dcube-back-2-x: 66%;
  --sg-dcube-back-2-y: 15%;

  /* Zufallsoffset der Hintergrundwürfel per JS. */
  --sg-dcube-random-x-min: 14;
  --sg-dcube-random-x-max: 42;
  --sg-dcube-random-y-min: -10;
  --sg-dcube-random-y-max: 18;

  /*
    Mobil-Layout: Ab kleiner Ansicht können die Hintergrundwürfel unter den
    aktiven Würfel wandern. Werte stehen bewusst als Variablen hier.
  */
  --sg-dcube-mobile-scene-width-factor: 1.44;
  --sg-dcube-mobile-scene-height-factor: 1.36;
  --sg-dcube-mobile-front-y: -17%;
  --sg-dcube-mobile-back-1-x: -28%;
  --sg-dcube-mobile-back-1-y: 34%;
  --sg-dcube-mobile-back-2-x: 32%;
  --sg-dcube-mobile-back-2-y: 42%;
  --sg-dcube-mobile-back-1-scale: 0.50;
  --sg-dcube-mobile-back-2-scale: 0.42;
  --sg-dcube-mobile-back-1-opacity: 0.74;
  --sg-dcube-mobile-back-2-opacity: 0.58;

  --sg-dcube-inactive-hover-scale: 1.08;
  --sg-dcube-inactive-hover-blur: 0px;
  --sg-dcube-inactive-hover-opacity: 0.96;

  --sg-dcube-active-peer-hover-blur: 0px;
  --sg-dcube-active-peer-hover-opacity: 1;

  --sg-dcube-slot-random-x: 0px;
  --sg-dcube-slot-random-y: 0px;

  --sg-dcube-slot-transition-duration: 1650ms;
  --sg-dcube-slot-spin-ms: 1650;
  --sg-dcube-slot-transition-ease: cubic-bezier(.16,.82,.18,1);

  --sg-dcube-face-padding: 0px;
  --sg-dcube-pad: clamp(22px, calc(var(--sg-dcube-size) * 0.13), 54px);
  --sg-dcube-face-radius: 0px;
  --sg-dcube-face-gap: 0px;

  --sg-dcube-image-radius: 0px;
  --sg-dcube-image-fit: cover;
  --sg-dcube-icons-fit: contain;
  --sg-dcube-icons-padding: var(--sg-dcube-pad);
  --sg-dcube-image-bg: rgba(214, 229, 184, 0.16);
  --sg-dcube-image-light-sync: 1;

  --sg-dcube-face-border-width: 2px;
  --sg-dcube-face-border-color: rgba(214, 245, 182, 0.95);
  --sg-dcube-face-border-show: 1;

  --sg-dcube-green-base: 136, 170, 63;
  --sg-dcube-green-core: 80, 102, 35;

  --sg-dcube-brightness-global: 1;
  --sg-dcube-brightness-front: 1.2;
  --sg-dcube-brightness-side: 0.82;
  --sg-dcube-brightness-rear-side: 0.58;
  --sg-dcube-brightness-back: 0.44;
  --sg-dcube-brightness-top-boost: 1.18;

  /*
    v43.22: Schatten vertikal dünner, näher am Würfel, ovaler und weicher.
    Zusätzlich sind nun auch die Verlaufs-Stopps als Variablen steuerbar.
  */
  --sg-dcube-shadow-opacity: 0.56;
  --sg-dcube-shadow-back-opacity-factor: 0.78;
  --sg-dcube-shadow-y-factor: 0.61;
  --sg-dcube-shadow-width-factor: 1.26;
  --sg-dcube-shadow-height-factor: 0.26;
  --sg-dcube-shadow-blur-factor: 0.032;
  --sg-dcube-shadow-scale-y: 0.72;
  --sg-dcube-shadow-color-rgb: 24, 39, 8;
  --sg-dcube-shadow-core-alpha: 0.28;
  --sg-dcube-shadow-mid-alpha: 0.18;
  --sg-dcube-shadow-edge-alpha: 0.08;
  --sg-dcube-shadow-core-stop: 0%;
  --sg-dcube-shadow-mid-stop: 38%;
  --sg-dcube-shadow-edge-stop: 68%;
  --sg-dcube-shadow-fade-stop: 100%;

  /*
    v43.15: stabilisiert nur die obere sichtbare Schrägfläche.
    0.6844 entspricht dem v43.9-Startwert: rear-side 0.58 * top-boost 1.18.
    Front, normale Seiten, Bottom und globale Bildfilter bleiben unverändert.
  */
  --sg-dcube-upper-slant-min-brightness: 0.6844;
  --sg-dcube-inactive-upper-slant-min-brightness: 0.6844;
  --sg-dcube-upper-slant-y-threshold: -0.08;
  --sg-dcube-upper-slant-z-threshold: -0.20;

  --sg-dcube-image-filter-brightness: 0.96;
  --sg-dcube-image-filter-contrast: 0.96;
  --sg-dcube-image-filter-saturation: 0.88;

  --sg-dcube-rotation-duration: 850ms;
  --sg-dcube-rotation-ease: cubic-bezier(.16,.82,.18,1);

  --sg-dcube-rx: -18deg;
  --sg-dcube-ry: -28deg;
  --sg-dcube-rz: 0deg;
  --sg-dcube-hover-x: 0deg;
  --sg-dcube-hover-y: 0deg;
  --sg-dcube-hover-rotate-y-factor: 10;
  --sg-dcube-hover-rotate-x-factor: -7;
  --sg-dcube-hover-scale: 1.13;
  --sg-dcube-zoom-smoothing: 0.115;
  --sg-dcube-current-scale: 1;

  /*
    Automatischer Wechsel zwischen den 3 Würfeln:
    - 1 = an
    - 0 = aus
    Die Zeit wird zufällig zwischen min/max Sekunden gewählt.
  */
  --sg-dcube-random-start-enabled: 1;

  --sg-dcube-auto-swap-enabled: 1;
  --sg-dcube-auto-swap-min-seconds: 15;
  --sg-dcube-auto-swap-max-seconds: 30;

  /* v43.29: Die Big-View-Variablen liegen auf :root, weil der Viewer an body gehängt wird. */
}

/* Konflikt-Schutz:
   - Nur eine ID: #sg-dcube-widget.
   - Alle Klassen bleiben im sg-dcube-Namespace.
   - Keine globalen .cube/.face/.stage-Klassen.
*/
.sg-dcube-page {
  min-height: var(--sg-dcube-page-min-height);
  display: block;
  padding: var(--sg-dcube-page-padding);
  margin: 0;
  background: transparent;
  overflow: visible;
}

.sg-dcube-widget {
  width: min(var(--sg-dcube-scene-width), 100%);
  height: var(--sg-dcube-scene-height);
  display: block;
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  max-width: 100%;
  isolation: isolate;
}

.sg-dcube-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
}

.sg-dcube-copy {
  display: none;
}

.sg-dcube-item {
  --sg-dcube-slot-scale: var(--sg-dcube-front-scale);
  --sg-dcube-slot-hover-scale: 1;
  --sg-dcube-slot-x: var(--sg-dcube-front-x);
  --sg-dcube-slot-y: var(--sg-dcube-front-y);
  --sg-dcube-slot-blur: 0px;
  --sg-dcube-slot-opacity: 1;

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sg-dcube-safe-size);
  height: var(--sg-dcube-safe-size);
  display: grid;
  place-items: center;
  overflow: visible;
  opacity: var(--sg-dcube-slot-opacity);
  filter: none;
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--sg-dcube-slot-x) + var(--sg-dcube-slot-random-x)),
      calc(var(--sg-dcube-slot-y) + var(--sg-dcube-slot-random-y))
    )
    scale(calc(var(--sg-dcube-slot-scale) * var(--sg-dcube-slot-hover-scale)));
  transform-origin: 50% 50%;
  transition:
    transform var(--sg-dcube-slot-transition-duration) var(--sg-dcube-slot-transition-ease),
    filter var(--sg-dcube-slot-transition-duration) var(--sg-dcube-slot-transition-ease),
    opacity var(--sg-dcube-slot-transition-duration) var(--sg-dcube-slot-transition-ease);
  will-change: transform, filter, opacity;
  user-select: none;
  background: transparent;
  outline: 0;
  pointer-events: none;
  transition: filter 260ms ease, transform 260ms ease;
}

.sg-dcube-item[data-slot="front"] {
  --sg-dcube-slot-scale: var(--sg-dcube-front-scale);
  --sg-dcube-slot-x: var(--sg-dcube-front-x);
  --sg-dcube-slot-y: var(--sg-dcube-front-y);
  --sg-dcube-slot-blur: 0px;
  --sg-dcube-slot-opacity: 1;
  z-index: 30;
}

.sg-dcube-item[data-slot="back-left"] {
  --sg-dcube-slot-scale: var(--sg-dcube-back-1-scale);
  --sg-dcube-slot-x: var(--sg-dcube-back-1-x);
  --sg-dcube-slot-y: var(--sg-dcube-back-1-y);
  --sg-dcube-slot-blur: var(--sg-dcube-back-1-blur);
  --sg-dcube-slot-opacity: var(--sg-dcube-back-1-opacity);
  z-index: 20;
}

.sg-dcube-item[data-slot="back-right"] {
  --sg-dcube-slot-scale: var(--sg-dcube-back-2-scale);
  --sg-dcube-slot-x: var(--sg-dcube-back-2-x);
  --sg-dcube-slot-y: var(--sg-dcube-back-2-y);
  --sg-dcube-slot-blur: var(--sg-dcube-back-2-blur);
  --sg-dcube-slot-opacity: var(--sg-dcube-back-2-opacity);
  z-index: 10;
}

/* Deaktivierte Würfel: Hover-Vorschau ohne aktive Steuerung. */
.sg-dcube-item:not([data-slot="front"]):hover,
.sg-dcube-item:not([data-slot="front"]):focus-visible {
  --sg-dcube-slot-hover-scale: var(--sg-dcube-inactive-hover-scale);
  --sg-dcube-slot-blur: var(--sg-dcube-inactive-hover-blur);
  --sg-dcube-slot-opacity: var(--sg-dcube-inactive-hover-opacity);
}

.sg-dcube-item:not([data-slot="front"]) {
  --sg-dcube-face-border-show: 0;
  --sg-dcube-face-border-width: 0px;
  --sg-dcube-face-gap: 0px;
}

/* Wenn ein deaktivierter Würfel im Hover ist, bleibt der aktive Würfel unverändert scharf. */
#sg-dcube-widget:has(.sg-dcube-item:not([data-slot="front"]):hover) .sg-dcube-item[data-slot="front"],
#sg-dcube-widget.sg-dcube-has-inactive-hover .sg-dcube-item[data-slot="front"] {
  filter: blur(var(--sg-dcube-active-peer-hover-blur));
  opacity: var(--sg-dcube-active-peer-hover-opacity);
}

/*
  Deaktivierte Würfel:
  Keine Face-Border, kein Face-Overscan, kein farbiger Kern.
  Der sichtbare Blur liegt nur auf den Bildern, nicht auf dem ganzen 3D-Würfel.
  So werden keine weißen/grünen Kanten in den Cube hineingezogen.
*/
.sg-dcube-item:not([data-slot="front"]) .sg-dcube-face {
  border: 0;
  outline: 0;
  box-shadow: none;
  clip-path: inset(0.6px);
  background-clip: border-box;
}

/* Aktiver Würfel: Klick öffnet die Big-View des primären Vorderseitenbildes. */
.sg-dcube-item[data-slot="front"] .sg-dcube {
  cursor: zoom-in;
}

.sg-dcube-face img {
  transform: scale(1.012);
  transform-origin: 50% 50%;
}

.sg-dcube-item:focus-visible {
  outline: 2px solid rgba(111, 143, 69, 0.72);
  outline-offset: 8px;
  border-radius: 18px;
}

.sg-dcube-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  user-select: none;
  background: transparent;
  pointer-events: none;
}

.sg-dcube-zoom-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: calc(var(--sg-dcube-size) * 3.08);
  perspective-origin: 50% 47%;
  transform: scale(var(--sg-dcube-current-scale));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: visible;
  background: transparent;
}

.sg-dcube-shadow {
  position: absolute;
  z-index: 0;
  width: calc(var(--sg-dcube-size) * var(--sg-dcube-shadow-width-factor));
  height: calc(var(--sg-dcube-size) * var(--sg-dcube-shadow-height-factor));
  top: calc(50% + var(--sg-dcube-size) * var(--sg-dcube-shadow-y-factor));
  left: 50%;
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--sg-dcube-shadow-color-rgb), var(--sg-dcube-shadow-core-alpha)) var(--sg-dcube-shadow-core-stop),
      rgba(var(--sg-dcube-shadow-color-rgb), var(--sg-dcube-shadow-mid-alpha)) var(--sg-dcube-shadow-mid-stop),
      rgba(var(--sg-dcube-shadow-color-rgb), var(--sg-dcube-shadow-edge-alpha)) var(--sg-dcube-shadow-edge-stop),
      rgba(var(--sg-dcube-shadow-color-rgb), 0) var(--sg-dcube-shadow-fade-stop)
    );
  opacity: var(--sg-dcube-shadow-opacity);
  filter: blur(clamp(12px, calc(var(--sg-dcube-size) * var(--sg-dcube-shadow-blur-factor)), 28px));
  transform:
    translateX(-50%)
    scaleY(var(--sg-dcube-shadow-scale-y));
  transform-origin: 50% 50%;
  transform-style: flat;
  pointer-events: none;
}

.sg-dcube-item[data-slot="back-left"] .sg-dcube-shadow,
.sg-dcube-item[data-slot="back-right"] .sg-dcube-shadow {
  opacity: calc(var(--sg-dcube-shadow-opacity) * var(--sg-dcube-shadow-back-opacity-factor));
}

.sg-dcube {
  position: relative;
  z-index: 2;
  width: var(--sg-dcube-size);
  height: var(--sg-dcube-size);
  background: transparent;
  border-radius: 0;
  transform-style: preserve-3d;
  transform:
    translateZ(calc(var(--sg-dcube-half) * -1))
    rotateX(calc(var(--sg-dcube-rx) + var(--sg-dcube-hover-y)))
    rotateY(calc(var(--sg-dcube-ry) + var(--sg-dcube-hover-x)))
    rotateZ(var(--sg-dcube-rz));
  transition: none;
  will-change: transform;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.sg-dcube-item[data-slot="front"] .sg-dcube,
.sg-dcube-item[data-slot="front"] .sg-dcube.is-hovering {
  cursor: zoom-in;
  touch-action: manipulation;
}

.sg-dcube-face {
  --sg-dcube-face-r: 136;
  --sg-dcube-face-g: 170;
  --sg-dcube-face-b: 63;
  --sg-dcube-face-brightness: 1;

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: var(--sg-dcube-face-padding);
  border-radius: var(--sg-dcube-face-radius);
  display: grid;
  place-items: stretch;
  border: calc(var(--sg-dcube-face-border-width) * var(--sg-dcube-face-border-show)) solid var(--sg-dcube-face-border-color);
  background: rgb(var(--sg-dcube-face-r), var(--sg-dcube-face-g), var(--sg-dcube-face-b));
  background-clip: padding-box;
  visibility: visible;
  opacity: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: none;
  outline: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform-style: flat;
  contain: paint;
  clip-path: inset(0);
}

.sg-dcube-face--front {
  --sg-dcube-face-r: 141;
  --sg-dcube-face-g: 176;
  --sg-dcube-face-b: 65;
}

.sg-dcube-face--right {
  --sg-dcube-face-r: 88;
  --sg-dcube-face-g: 110;
  --sg-dcube-face-b: 41;
}

.sg-dcube-face--top {
  --sg-dcube-face-r: 68;
  --sg-dcube-face-g: 85;
  --sg-dcube-face-b: 31;
}

.sg-dcube-face--left,
.sg-dcube-face--back,
.sg-dcube-face--bottom {
  --sg-dcube-face-r: 54;
  --sg-dcube-face-g: 68;
  --sg-dcube-face-b: 25;
}

.sg-pad {
  --sg-dcube-face-padding: var(--sg-dcube-pad);
}

.sg-dcube-face--with-padding,
.sg-dcube-face--mit-innenabstand {
  --sg-dcube-face-padding: var(--sg-dcube-pad);
}

.sg-dcube-face::before,
.sg-dcube-face::after {
  content: none;
  display: none;
}

.sg-dcube-face img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: var(--sg-dcube-image-fit);
  object-position: center;
  border-radius: var(--sg-dcube-image-radius);
  background: var(--sg-dcube-image-bg);
  filter:
    brightness(calc(var(--sg-dcube-image-filter-brightness) * (1 + ((var(--sg-dcube-face-brightness) - 1) * var(--sg-dcube-image-light-sync)))))
    contrast(var(--sg-dcube-image-filter-contrast))
    saturate(var(--sg-dcube-image-filter-saturation));
  pointer-events: none;
}

.sg-dcube-face img.sg-icons {
  object-fit: var(--sg-dcube-icons-fit);
  padding: var(--sg-dcube-icons-padding);
}

.sg-dcube-face--front  { transform: rotateY(0deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }
.sg-dcube-face--right  { transform: rotateY(90deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }
.sg-dcube-face--back   { transform: rotateY(180deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }
.sg-dcube-face--left   { transform: rotateY(-90deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }
.sg-dcube-face--top    { transform: rotateX(90deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }
.sg-dcube-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--sg-dcube-half) + var(--sg-dcube-face-gap))); }


/* Blur nur auf Bildinhalt der deaktivierten Würfel, nicht auf der 3D-Geometrie. */
.sg-dcube-item:not([data-slot="front"]) .sg-dcube-face img {
  filter:
    blur(var(--sg-dcube-slot-blur))
    brightness(calc(var(--sg-dcube-image-filter-brightness) * (1 + ((var(--sg-dcube-face-brightness) - 1) * var(--sg-dcube-image-light-sync)))))
    contrast(var(--sg-dcube-image-filter-contrast))
    saturate(var(--sg-dcube-image-filter-saturation));
}

.sg-dcube-item:not([data-slot="front"]):hover .sg-dcube-face img,
.sg-dcube-item:not([data-slot="front"]):focus-visible .sg-dcube-face img {
  filter:
    blur(var(--sg-dcube-inactive-hover-blur))
    brightness(calc(var(--sg-dcube-image-filter-brightness) * (1 + ((var(--sg-dcube-face-brightness) - 1) * var(--sg-dcube-image-light-sync)))))
    contrast(var(--sg-dcube-image-filter-contrast))
    saturate(var(--sg-dcube-image-filter-saturation));
}



.sg-dcube-lightbox[hidden] {
  display: none;
}

.sg-dcube-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sg-dcube-lightbox-padding);
  background: rgba(var(--sg-dcube-lightbox-backdrop-rgb), var(--sg-dcube-lightbox-backdrop-alpha));
  -webkit-backdrop-filter: blur(var(--sg-dcube-lightbox-backdrop-blur));
  backdrop-filter: blur(var(--sg-dcube-lightbox-backdrop-blur));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sg-dcube-lightbox-transition) ease,
    visibility var(--sg-dcube-lightbox-transition) ease;
}

.sg-dcube-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sg-dcube-lightbox__frame {
  position: relative;
  z-index: 2147483001;
  width: min(var(--sg-dcube-lightbox-width), 1920px);
  height: min(var(--sg-dcube-lightbox-height), 1080px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--sg-dcube-lightbox-radius);
  background: var(--sg-dcube-lightbox-bg);
  box-shadow: var(--sg-dcube-lightbox-shadow);
  transform: scale(0.988);
  transform-origin: 50% 50%;
  transition: transform var(--sg-dcube-lightbox-transition) ease;
}

.sg-dcube-lightbox.is-open .sg-dcube-lightbox__frame {
  transform: scale(1);
}

.sg-dcube-lightbox__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  cursor: zoom-out;
  user-select: none;
  -webkit-user-drag: none;
}

.sg-dcube-lightbox__close {
  position: fixed;
  top: var(--sg-dcube-lightbox-close-offset);
  right: var(--sg-dcube-lightbox-close-offset);
  left: auto;
  bottom: auto;
  z-index: 2147483002;
  width: var(--sg-dcube-lightbox-close-size);
  height: var(--sg-dcube-lightbox-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  color: #1f2b1b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.56);
  transform: none;
}

.sg-dcube-lightbox__close:hover,
.sg-dcube-lightbox__close:focus-visible {
  background: #ffffff;
  outline: 2px solid rgba(111, 143, 69, 0.72);
  outline-offset: 3px;
}

body.sg-dcube-lightbox-open {
  overflow: hidden;
}


@media (max-width: 780px) {
  #sg-dcube-widget.sg-dcube-widget {
    --sg-dcube-min-size: 136px;
    --sg-dcube-max-size: 320px;
    --sg-dcube-safe-scale: 1.80;
    --sg-dcube-safe-ratio: 0.5556;
    --sg-dcube-viewport-padding: 24px;

    --sg-dcube-scene-width-factor: 2.36;
    --sg-dcube-scene-height-factor: 1.02;

    --sg-dcube-back-1-scale: 0.62;
    --sg-dcube-back-2-scale: 0.49;
    --sg-dcube-back-1-x: -48%;
    --sg-dcube-back-1-y: 9%;
    --sg-dcube-back-2-x: 52%;
    --sg-dcube-back-2-y: 14%;
  }
}


@media (max-width: 560px) {
  #sg-dcube-widget.sg-dcube-widget {
    --sg-dcube-scene-width-factor: var(--sg-dcube-mobile-scene-width-factor);
    --sg-dcube-scene-height-factor: var(--sg-dcube-mobile-scene-height-factor);

    --sg-dcube-front-y: var(--sg-dcube-mobile-front-y);
    --sg-dcube-back-1-x: var(--sg-dcube-mobile-back-1-x);
    --sg-dcube-back-1-y: var(--sg-dcube-mobile-back-1-y);
    --sg-dcube-back-2-x: var(--sg-dcube-mobile-back-2-x);
    --sg-dcube-back-2-y: var(--sg-dcube-mobile-back-2-y);
    --sg-dcube-back-1-scale: var(--sg-dcube-mobile-back-1-scale);
    --sg-dcube-back-2-scale: var(--sg-dcube-mobile-back-2-scale);
    --sg-dcube-back-1-opacity: var(--sg-dcube-mobile-back-1-opacity);
    --sg-dcube-back-2-opacity: var(--sg-dcube-mobile-back-2-opacity);
    --sg-dcube-random-x-min: 4;
    --sg-dcube-random-x-max: 12;
    --sg-dcube-random-y-min: -3;
    --sg-dcube-random-y-max: 4;
  }
}

@media (max-width: 430px) {
  #sg-dcube-widget.sg-dcube-widget {
    --sg-dcube-min-size: 118px;
    --sg-dcube-max-size: 270px;
    --sg-dcube-safe-scale: 1.84;
    --sg-dcube-safe-ratio: 0.5435;
    --sg-dcube-viewport-padding: 18px;

    --sg-dcube-scene-width-factor: var(--sg-dcube-mobile-scene-width-factor);
    --sg-dcube-scene-height-factor: var(--sg-dcube-mobile-scene-height-factor);

    --sg-dcube-front-y: var(--sg-dcube-mobile-front-y);
    --sg-dcube-back-1-scale: var(--sg-dcube-mobile-back-1-scale);
    --sg-dcube-back-2-scale: var(--sg-dcube-mobile-back-2-scale);
    --sg-dcube-back-1-blur: 2.4px;
    --sg-dcube-back-2-blur: 4.6px;
    --sg-dcube-back-1-opacity: var(--sg-dcube-mobile-back-1-opacity);
    --sg-dcube-back-2-opacity: var(--sg-dcube-mobile-back-2-opacity);
    --sg-dcube-back-1-x: var(--sg-dcube-mobile-back-1-x);
    --sg-dcube-back-1-y: var(--sg-dcube-mobile-back-1-y);
    --sg-dcube-back-2-x: var(--sg-dcube-mobile-back-2-x);
    --sg-dcube-back-2-y: var(--sg-dcube-mobile-back-2-y);
  }

  .sg-dcube-shadow {
    opacity: var(--sg-dcube-shadow-opacity);
  }
}

@media (max-width: 340px) {
  #sg-dcube-widget.sg-dcube-widget {
    --sg-dcube-min-size: 96px;
    --sg-dcube-max-size: 230px;
    --sg-dcube-safe-scale: 1.88;
    --sg-dcube-safe-ratio: 0.5319;
    --sg-dcube-viewport-padding: 14px;

    --sg-dcube-scene-width-factor: 1.38;
    --sg-dcube-scene-height-factor: 1.42;

    --sg-dcube-mobile-front-y: -18%;
    --sg-dcube-mobile-back-1-scale: 0.46;
    --sg-dcube-mobile-back-2-scale: 0.36;
    --sg-dcube-mobile-back-1-x: -24%;
    --sg-dcube-mobile-back-2-x: 27%;
    --sg-dcube-mobile-back-1-y: 36%;
    --sg-dcube-mobile-back-2-y: 44%;
    --sg-dcube-back-1-scale: var(--sg-dcube-mobile-back-1-scale);
    --sg-dcube-back-2-scale: var(--sg-dcube-mobile-back-2-scale);
    --sg-dcube-back-1-x: var(--sg-dcube-mobile-back-1-x);
    --sg-dcube-back-2-x: var(--sg-dcube-mobile-back-2-x);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-dcube-item,
  .sg-dcube,
  .sg-dcube-face {
    transition: none;
  }
}