#product-gallery {
  --ht-green: #76eb9b;
  --ht-white: #eef8f0;
  --ht-muted: #a7baad;
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: var(--ht-white);
  user-select: none;
  -webkit-user-select: none;
}
#product-gallery[hidden] {
  display: none;
}
#product-gallery::before {
  content: '';
  position: absolute;
  inset: 10% 4% 7%;
  border: 1px solid #a2c7ac14;
  pointer-events: none;
}
.product-heading {
  position: absolute;
  top: 12%;
  left: 7%;
  right: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#product-name {
  font-size: clamp(22px, 3vmin, 42px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
  color: var(--ht-white);
}
#product-status {
  display: none;
}
#product-viewport {
  position: absolute;
  top: 18%;
  left: 16%;
  width: 80%;
  height: 68%;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  border-radius: 12px;
}
#product-viewport:active {
  cursor: grabbing;
}
#product-viewport:focus-visible {
  outline: 1px solid #76eb9b66;
  outline-offset: -3px;
}
.browsing #product-viewport {
  left: 4%;
  top: 17%;
  width: 82%;
  height: 67%;
}
#product-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.browsing #product-ribbon {
  display: block;
}
#product-ribbon button {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
  color: transparent;
  border: 0;
  padding: 0;
  cursor: grab;
  border-radius: 10px;
}
#product-ribbon button:active {
  cursor: grabbing;
}
#product-ribbon button:focus-visible {
  outline: 2px solid var(--ht-green);
  outline-offset: -5px;
  background: #76eb9b0a;
}
.visually-hidden,
#product-ribbon button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#orbit-controls {
  position: absolute;
  right: 7%;
  top: 35%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2.4vmin;
  pointer-events: auto;
}
.browsing #orbit-controls {
  display: flex;
}
#orbit-enter {
  position: relative;
  width: 15vmin;
  min-width: 112px;
  max-width: 210px;
  height: 9vmin;
  min-height: 68px;
  border: 1px solid #76eb9b88;
  border-radius: 5px;
  background: #10271bbb;
  color: var(--ht-white);
  font: 500 clamp(18px, 2.5vmin, 33px) Arial;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.orbit-arrow {
  width: 7vmin;
  height: 7vmin;
  min-width: 54px;
  min-height: 54px;
  border-radius: 50%;
  border: 1px solid #9dc4aa55;
  background: #0b140fc9;
  color: #bfd7c7;
  font: 300 clamp(24px, 3.5vmin, 45px) Arial;
  cursor: pointer;
  line-height: 1;
}
.orbit-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #76eb9b16;
  overflow: hidden;
}
#orbit-progress {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ht-green);
  transform-origin: left;
  transform: scaleX(0);
}
.selection-holding #orbit-enter {
  border-color: var(--ht-green);
  background: #1c462ce8;
  box-shadow: 0 0 30px #49d87816;
}
#orbit-hint {
  position: absolute;
  bottom: 3.5%;
  left: 5%;
  right: 5%;
  margin: 0;
  text-align: center;
  color: var(--ht-muted);
  font-size: clamp(16px, 2.2vmin, 28px);
  font-weight: 400;
  display: none;
}
.browsing #orbit-hint {
  display: block;
}
.selection-holding #orbit-hint {
  color: var(--ht-green);
}
#product-actions {
  position: absolute;
  top: 45%;
  left: 6%;
  display: flex;
  align-items: center;
}
#product-explode {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1vmin;
  padding: 2vmin 2.4vmin;
  min-height: 64px;
  min-width: 138px;
  border: 1px solid #76eb9b99;
  border-radius: 4px;
  background: #10271beb;
  color: var(--ht-white);
  font-size: clamp(17px, 2.1vmin, 29px);
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
#product-explode[aria-pressed='true'] {
  background: #1c4229eb;
  border-color: var(--ht-green);
}
#product-explode svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#product-hint {
  position: fixed;
  left: 25%;
  right: 15%;
  bottom: 3.5%;
  text-align: center;
  font-size: clamp(14px, 1.9vmin, 25px);
  color: var(--ht-muted);
}
#product-menu,
#collection-back {
  position: absolute;
  left: 6%;
  bottom: 2.5%;
  border: 1px solid #8bb29a55;
  border-radius: 4px;
  background: #0c1810df;
  color: #c5d8ca;
  padding: 1.2vmin 1.7vmin;
  min-height: 44px;
  font-size: clamp(14px, 1.8vmin, 24px);
  pointer-events: auto;
  cursor: pointer;
}
#product-part {
  position: absolute;
  left: 56%;
  top: 85%;
  transform: translateX(-50%);
  color: #cbe6d2;
  font-size: clamp(11px, 1.4vmin, 20px);
  padding: 0.6vmin 1.2vmin;
  border-radius: 3px;
  background: #09150edf;
  border: 1px solid #63937444;
  white-space: nowrap;
}
.browsing #product-menu,
.browsing #product-actions,
.browsing #product-part {
  display: none;
}
#product-explode:hover,
#product-explode.hand-hover,
.orbit-arrow:hover,
.orbit-arrow.hand-hover,
#orbit-enter:hover,
#orbit-enter.hand-hover,
#product-menu:hover,
#product-menu.hand-hover,
#collection-back:hover,
#collection-back.hand-hover {
  border-color: var(--ht-green);
  background: #245d36;
  color: #f5fff8;
  box-shadow: 0 0 28px #5bdd8129;
}
#product-gallery button:focus-visible {
  outline: 2px solid var(--ht-green);
  outline-offset: 4px;
}
#product-gallery.avatar-selected .product-heading,
#product-gallery.avatar-selected #product-viewport,
#product-gallery.avatar-selected #product-actions,
#product-gallery.avatar-selected #product-part {
  display: none;
}
#product-gallery.video-selected #product-actions,
#product-gallery.single-part #product-explode {
  display: none;
}
.product-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}
#product-cursor {
  position: fixed;
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 10px #76eb9b66);
  pointer-events: none;
  z-index: 100;
}
#product-cursor svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
#product-cursor circle {
  fill: none;
  stroke: #9feaaf99;
  stroke-width: 2;
}
#product-gallery[data-intent='orienting'] #product-cursor circle:first-child,
#product-gallery[data-intent='scrolling'] #product-cursor circle:first-child {
  stroke-opacity: 0.25;
}
#product-progress {
  fill: none !important;
  stroke: #84ffa8 !important;
  stroke-width: 4 !important;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
}
#product-cursor > span {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #effff3;
  border-radius: 50%;
  left: 28px;
  top: 28px;
}
body.product-mode .atmosphere {
  background: radial-gradient(ellipse at 50% 49%, #59ae7210, transparent 65%);
  opacity: 1;
}
body.clean #product-gallery {
  visibility: hidden;
}
@media (max-width: 700px) {
  .product-heading {
    top: 13%;
  }
  #product-name {
    font-size: 21px;
  }
  .browsing #product-viewport {
    top: 20%;
    left: 3%;
    width: 94%;
    height: 51%;
  }
  #product-viewport {
    left: 5%;
    top: 21%;
    width: 92%;
    height: 51%;
  }
  .browsing #orbit-controls {
    top: 73%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 20px;
  }
  #orbit-enter {
    height: 58px;
    min-height: 58px;
    width: 120px;
    font-size: 19px;
  }
  .orbit-arrow {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 28px;
  }
  #product-actions {
    top: 77%;
    left: 50%;
    transform: translateX(-50%);
  }
  #product-explode {
    padding: 13px 24px;
    min-height: 54px;
    font-size: 18px;
  }
  #product-hint {
    bottom: 10%;
    left: 8%;
    right: 8%;
    font-size: 13px;
  }
  #product-menu,
  #collection-back {
    bottom: 2.5%;
    font-size: 13px;
    padding: 9px 13px;
  }
  #orbit-hint {
    bottom: 10%;
    font-size: 16px;
  }
  #product-part {
    top: 73%;
    left: 50%;
    max-width: 90%;
    font-size: 11px;
  }
  #product-gallery::before {
    inset: 10% 3% 7%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #product-gallery * {
    transition: none;
  }
}