.product-detail {
  position: fixed;
  top: calc(62 * var(--u));
  right: calc(80 * var(--u));
  z-index: 4;
  width: calc(475 * var(--u));
  /* 18u shorter than before to keep a 16u gap above the taller dotted slider. */
  height: calc(678 * var(--u));
  padding: calc(24 * var(--u));
  overflow: visible;
  border-radius: calc(16 * var(--u));
  background-image: linear-gradient(
    120deg,
    rgba(0, 70, 115, 0.5) 0%,
    rgba(0, 120, 195, 0.5) 103%
  );
  backdrop-filter: blur(calc(25 * var(--u)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(32 * var(--u)));
  transition:
    opacity 440ms ease,
    transform 560ms var(--zoom-ease),
    visibility 0s linear 560ms;
}

.experience.is-product-open .product-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.product-detail__close {
  position: absolute;
  top: calc(-24 * var(--u));
  right: calc(-24 * var(--u));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

.product-detail__close img {
  display: block;
  width: calc(28.6 * var(--u));
  height: calc(28.6 * var(--u));
  transform: rotate(45deg);
}

.product-detail__gallery {
  position: relative;
  width: calc(427 * var(--u));
  height: calc(349 * var(--u));
  margin: 0;
  overflow: hidden;
  border-radius: calc(8 * var(--u));
  background: #f1f1f1;
}

.product-detail__hero {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: calc(310 * var(--u));
  height: calc(315 * var(--u));
  object-fit: contain;
  /* Hidden by default so a new src can never paint at full opacity/size first. */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  cursor: zoom-in;
  user-select: none;
  transition:
    opacity 180ms ease,
    transform 280ms ease;
}

.product-detail__hero.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.product-detail__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hager-blue);
  transform: translateY(-50%);
  cursor: pointer;
}

.product-detail__arrow[hidden],
.product-detail__dots[hidden] {
  display: none;
}

.product-detail__arrow--previous {
  left: calc(16 * var(--u));
}

.product-detail__arrow--next {
  right: calc(16 * var(--u));
}

.product-detail__arrow--next img {
  transform: rotate(180deg);
}

.product-detail__arrow img {
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.product-detail__dots {
  position: absolute;
  bottom: calc(24 * var(--u));
  left: 50%;
  display: flex;
  gap: calc(4 * var(--u));
  transform: translateX(-50%);
}

.product-detail__gallery-dot {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(165, 165, 165, 0.6);
  cursor: pointer;
}

.product-detail__gallery-dot.is-active {
  background: var(--hager-blue);
}

.product-detail__copy {
  display: flex;
  flex-direction: column;
  width: calc(427 * var(--u));
  height: calc(273 * var(--u));
  margin-top: calc(8 * var(--u));
  padding: calc(16 * var(--u));
  overflow: hidden;
  border-radius: calc(8 * var(--u));
  background: #ffffff;
  color: var(--hager-grey);
}

.product-detail__copy h2 {
  flex: 0 0 auto;
  margin: 0 0 calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: calc(32 * var(--u));
}

.product-detail__text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.product-detail__copy p,
.product-detail__text p {
  margin: 0 0 calc(16 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: calc(20 * var(--u));
}

.product-detail__text li {
  margin: 0 0 calc(4 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 300;
  line-height: calc(20 * var(--u));
}

.product-detail__text h1,
.product-detail__text h2,
.product-detail__text h3,
.product-detail__text h4,
.product-detail__text h5,
.product-detail__text h6 {
  margin: calc(12 * var(--u)) 0 calc(8 * var(--u));
  font-weight: 500;
  line-height: 1.25;
}

.product-detail__text h1 {
  font-size: calc(22 * var(--u));
}

.product-detail__text h2 {
  font-size: calc(20 * var(--u));
}

.product-detail__text h3 {
  font-size: calc(18 * var(--u));
}

.product-detail__text h4 {
  font-size: calc(16 * var(--u));
}

.product-detail__text h5 {
  font-size: calc(15 * var(--u));
}

.product-detail__text h6 {
  font-size: calc(14 * var(--u));
}

.product-detail__text h1:first-child,
.product-detail__text h2:first-child,
.product-detail__text h3:first-child,
.product-detail__text h4:first-child,
.product-detail__text h5:first-child,
.product-detail__text h6:first-child {
  margin-top: 0;
}

.product-detail__text ul,
.product-detail__text ol {
  margin: 0 0 calc(8 * var(--u));
  padding-left: calc(20 * var(--u));
}

.product-detail__text ul {
  list-style: disc;
}

.product-detail__text ol {
  list-style: decimal;
}

.product-detail__text li:last-child,
.product-detail__text p:last-child,
.product-detail__text ul:last-child,
.product-detail__text ol:last-child {
  margin-bottom: 0;
}