@media (hover: hover) and (pointer: fine) {
  [data-product-media],
  .detail-media {
    position: relative;
  }

  .gallery-nav-button {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    color: #155e77;
    box-shadow: 0 5px 16px rgba(25,55,70,.12);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: opacity .16s ease, background .16s ease, transform .16s ease;
  }

  .gallery-nav-button::before {
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 700;
  }

  .gallery-nav-button.previous {
    left: 12px;
  }

  .gallery-nav-button.previous::before {
    content: "‹";
  }

  .gallery-nav-button.next {
    right: 12px;
  }

  .gallery-nav-button.next::before {
    content: "›";
  }

  [data-product-media]:hover .gallery-nav-button,
  [data-product-media]:focus-within .gallery-nav-button,
  .detail-media:hover .gallery-nav-button,
  .detail-media:focus-within .gallery-nav-button {
    opacity: .82;
    pointer-events: auto;
  }

  .gallery-nav-button:hover:not(:disabled),
  .gallery-nav-button:focus-visible:not(:disabled) {
    background: rgba(255,255,255,.82);
    opacity: 1;
    outline: none;
    transform: translateY(-50%) scale(1.06);
  }

  .gallery-nav-button:disabled {
    opacity: .2 !important;
    cursor: default;
    pointer-events: none !important;
  }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .gallery-nav-button {
    display: none !important;
  }
}