/* 2026-07-21: compact SUPBRO FLEX orbital rail + fluorescent commerce prices. */

@media (min-width: 861px) {
  body .section-panel.flex-system > .flex-gallery-shell {
    width: calc(100% + clamp(28px, 6vw, 96px) * 2) !important;
    max-width: none !important;
    margin-right: calc(0px - clamp(28px, 6vw, 96px)) !important;
    margin-left: calc(0px - clamp(28px, 6vw, 96px)) !important;
    transform: none !important;
  }
}

body .section-panel.flex-system .flex-gallery-viewport {
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse 70% 85% at 50% 48%, rgba(157, 72, 255, 0.15), transparent 62%),
    linear-gradient(90deg, rgba(8, 3, 15, 0.42), transparent 13% 87%, rgba(8, 3, 15, 0.42)) !important;
  box-shadow: none !important;
  perspective: 1200px;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery {
  grid-auto-columns: clamp(205px, 17.5vw, 270px) !important;
  align-items: center !important;
  gap: clamp(14px, 1.35vw, 22px) !important;
  padding: 18px clamp(54px, 7vw, 112px) 30px !important;
  scroll-padding-inline: clamp(54px, 7vw, 112px) !important;
  perspective: 1200px;
  transform-style: preserve-3d;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure,
body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure:nth-child(n + 5) {
  --orbit-scale: 0.78;
  --orbit-y: 24px;
  --orbit-rotate: 0deg;
  --orbit-opacity: 0.58;
  --orbit-brightness: 0.74;
  --orbit-z: 1;
  position: relative !important;
  z-index: var(--orbit-z) !important;
  border-color: rgba(221, 177, 255, 0.14) !important;
  border-radius: 20px !important;
  opacity: var(--orbit-opacity) !important;
  filter: brightness(var(--orbit-brightness)) saturate(0.96) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important;
  transform:
    translate3d(
      var(--float-x, 0px),
      calc(var(--orbit-y) + var(--float-y, 0px) - var(--pointer-lift, 0px)),
      0
    )
    rotateY(var(--orbit-rotate))
    scale(var(--orbit-scale)) !important;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition:
    transform 170ms cubic-bezier(0.2, 0.72, 0.2, 1),
    opacity 170ms ease,
    filter 170ms ease,
    border-color 170ms ease,
    box-shadow 190ms ease !important;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure.is-orbit-near {
  will-change: transform, opacity, filter;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure.is-orbit-center {
  border-color: rgba(201, 125, 255, 0.74) !important;
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(244, 255, 47, 0.22),
    0 0 24px rgba(181, 86, 255, 0.42),
    0 0 48px rgba(115, 36, 255, 0.22) !important;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure:not(.is-orbit-center) > .rb-border-stream {
  opacity: 0.28 !important;
}

body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure.is-orbit-center > .rb-border-stream,
body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure:focus-within > .rb-border-stream {
  opacity: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 0 14px rgba(225, 148, 255, 0.6),
    0 0 30px rgba(146, 61, 255, 0.38) !important;
}

body .section-panel.flex-system .flex-gallery-arrow {
  width: 48px;
  height: 48px;
  border-color: rgba(244, 255, 47, 0.46);
  background: rgba(21, 9, 31, 0.82);
  color: #f4ff2f;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(206, 255, 47, 0.16);
}

body .section-panel.flex-system .flex-gallery-arrow-prev {
  left: clamp(8px, 1.8vw, 28px);
}

body .section-panel.flex-system .flex-gallery-arrow-next {
  right: clamp(8px, 1.8vw, 28px);
}

html body .commerce-price-stack > strong.commerce-price-base {
  display: inline-block;
  color: #c8ff38 !important;
  font-size: clamp(29px, 2.2vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow:
    0 0 4px rgba(210, 255, 76, 0.95),
    0 0 12px rgba(180, 255, 42, 0.72),
    0 0 28px rgba(129, 255, 23, 0.42) !important;
  filter: drop-shadow(0 0 7px rgba(184, 255, 47, 0.52));
}

html body .commerce-related-card .commerce-price-stack > strong.commerce-price-base,
html body .commerce-cart-line .commerce-price-stack > strong.commerce-price-base {
  font-size: clamp(23px, 1.5vw, 30px) !important;
}

html body .commerce-product-dialog .commerce-price-stack > strong.commerce-price-base {
  font-size: clamp(34px, 3vw, 50px) !important;
}

@media (max-width: 760px) {
  body .section-panel.flex-system .flex-gallery-shell .flex-gallery {
    grid-auto-columns: min(70vw, 280px) !important;
    gap: 12px !important;
    padding: 12px 42px 24px !important;
    scroll-padding-inline: 42px !important;
  }

  body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure,
  body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure:nth-child(n + 5) {
    border-radius: 17px !important;
    transition-duration: 150ms !important;
  }

  body .section-panel.flex-system .flex-gallery-arrow {
    width: 42px;
    height: 42px;
  }

  html body .commerce-price-stack > strong.commerce-price-base {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure,
  body .section-panel.flex-system .flex-gallery-shell .flex-gallery > figure:nth-child(n + 5) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}