/* Borderless image navigation. Load after the interface and legacy image styles. */
#product-dialog :is(#dialog-previous, #dialog-next),
#visit .consultation-image-navigation > button {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #e5e8df;
  text-align: center;
  cursor: pointer;
  isolation: isolate;
  touch-action: manipulation;
  transform: none;
  transition: opacity 420ms cubic-bezier(.22,1,.36,1), color 280ms;
}

#product-dialog :is(#dialog-previous, #dialog-next) {
  position: absolute;
  z-index: 4;
  top: 50%;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
#product-dialog #dialog-previous { left: max(4px, var(--dialog-nav-inset, 4px)); }
#product-dialog #dialog-next { right: max(4px, var(--dialog-nav-inset, 4px)); }
#product-dialog[data-view='glaze'] #dialog-previous { left: calc(72px + clamp(18px, 3%, 28px)); }
#product-dialog[data-view='glaze'] #dialog-next { right: calc(72px + clamp(18px, 3%, 28px)); }

#visit .consultation-image-navigation {
  --photo49-edge: clamp(16px, 2.4vw, 38px);
  left: var(--photo49-edge);
  right: auto;
  width: calc(67% - var(--photo49-edge) - 16px);
  height: 64px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 420ms cubic-bezier(.22,1,.36,1);
}
#visit .consultation-image-navigation > button { pointer-events: none; }

/* A broad fading shadow supplies contrast without drawing a button silhouette. */
#product-dialog :is(#dialog-previous, #dialog-next)::before,
#visit .consultation-image-navigation > button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -24px -30px;
  background: radial-gradient(ellipse at center, rgb(3 8 5 / 30%) 0%, rgb(3 8 5 / 12%) 42%, transparent 74%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms;
}

/* Keyboard focus uses a small stroke, rather than a surrounding geometric frame. */
#product-dialog :is(#dialog-previous, #dialog-next)::after,
#visit .consultation-image-navigation > button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% + 16px);
  width: 18px;
  height: 1px;
  margin: 0;
  border: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 220ms;
}

#product-dialog :is(#dialog-previous, #dialog-next) > svg,
#visit .consultation-image-navigation > button > svg {
  display: block;
  order: 0;
  flex: 0 0 32px;
  width: 32px;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transform: none;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
#product-dialog :is(#dialog-previous, #dialog-next) > span {
  position: absolute;
  left: auto;
  top: auto;
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 1;
  transform: none;
  pointer-events: none;
  transition: none;
}
#product-dialog :is(#dialog-previous, #dialog-next) > span > small { display: none !important; }

#product-dialog :is(#dialog-previous, #dialog-next):is(:hover, :active, :focus-visible),
#visit .consultation-image-navigation > button:is(:hover, :active, :focus-visible) {
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #f1f3ea;
}
#product-dialog :is(#dialog-previous, #dialog-next):is(:hover, :active, :focus-visible)::before,
#visit .consultation-image-navigation > button:is(:hover, :active, :focus-visible)::before { opacity: 1; }
#product-dialog :is(#dialog-previous, #dialog-next):focus-visible::after,
#visit .consultation-image-navigation > button:focus-visible::after { opacity: .9; }
#product-dialog :is(#dialog-previous, #dialog-next):focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
#visit .consultation-image-navigation > button:is(:hover, :active, :focus-visible) { transform: none; }
#product-dialog #dialog-previous:hover > svg,
#visit .consultation-image-navigation > button:first-child:hover > svg { transform: translateX(-3px); }
#product-dialog #dialog-next:hover > svg,
#visit .consultation-image-navigation > button:last-child:hover > svg { transform: translateX(3px); }
#product-dialog :is(#dialog-previous, #dialog-next):disabled,
#visit .consultation-image-navigation > button:disabled { opacity: .25; cursor: default; pointer-events: none; }

#visit .consultation-stage:is(.is-image-hover, .is-image-controls-visible) .consultation-image-navigation,
#visit .consultation-image-navigation:focus-within {
  opacity: var(--consult-controls, 1);
  transform: translateY(-50%);
}
#visit .consultation-stage:is(.is-image-hover, .is-image-controls-visible) .consultation-image-navigation > button,
#visit .consultation-image-navigation:focus-within > button { pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
  #product-dialog :is(#dialog-previous, #dialog-next) { opacity: 0; pointer-events: none; }
  #product-dialog .dialog-stage:is(:hover, :focus-visible) :is(#dialog-previous, #dialog-next),
  #product-dialog .dialog-stage:has(:focus-visible) :is(#dialog-previous, #dialog-next) { opacity: 1; pointer-events: auto; }
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  #product-dialog :is(#dialog-previous, #dialog-next),
  #visit .consultation-image-navigation > button {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  #product-dialog :is(#dialog-previous, #dialog-next) { opacity: 1; pointer-events: auto; }
  #product-dialog :is(#dialog-previous, #dialog-next) > svg,
  #visit .consultation-image-navigation > button > svg { width: 28px; height: 22px; flex-basis: 28px; }
  #visit .consultation-image-navigation { opacity: var(--consult-controls, 1); }
  #visit .consultation-image-navigation > button { pointer-events: auto; }
  #product-dialog :is(#dialog-previous, #dialog-next)::before,
  #visit .consultation-image-navigation > button::before { inset: -18px -22px; opacity: .55; }
}

@media (max-width: 760px) {
  #product-dialog #dialog-previous { left: max(0px, var(--dialog-nav-inset, 0px)); }
  #product-dialog #dialog-next { right: max(0px, var(--dialog-nav-inset, 0px)); }
  #product-dialog[data-view='glaze'] #dialog-previous { left: 0; }
  #product-dialog[data-view='glaze'] #dialog-next { right: 0; }
  #visit .consultation-image-navigation {
    left: 10px;
    right: 10px;
    width: auto;
    height: 44px;
    top: calc(clamp(190px, 29svh, 280px) * .46);
  }
}

@media (max-width: 1100px) and (max-height: 500px) {
  #product-dialog :is(#dialog-previous, #dialog-next) { width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; }
  #product-dialog #dialog-previous { left: max(0px, var(--dialog-nav-inset, 0px)); }
  #product-dialog #dialog-next { right: max(0px, var(--dialog-nav-inset, 0px)); }
  #product-dialog[data-view='glaze'] #dialog-previous { left: 0; }
  #product-dialog[data-view='glaze'] #dialog-next { right: 0; }
}
@media (min-width: 600px) and (max-height: 550px) and (orientation: landscape) {
  #visit .consultation-image-navigation { left: 10px; right: auto; width: calc(60% - 20px); height: 44px; top: calc((100svh - var(--consult-header)) * .43); }
}

@media (prefers-reduced-motion: reduce) {
  #product-dialog :is(#dialog-previous, #dialog-next),
  #product-dialog :is(#dialog-previous, #dialog-next) > svg,
  #product-dialog :is(#dialog-previous, #dialog-next)::before,
  #product-dialog :is(#dialog-previous, #dialog-next)::after,
  #visit .consultation-image-navigation,
  #visit .consultation-image-navigation > button,
  #visit .consultation-image-navigation > button > svg,
  #visit .consultation-image-navigation > button::before,
  #visit .consultation-image-navigation > button::after { transition: none; }
  #product-dialog #dialog-previous:hover > svg,
  #product-dialog #dialog-next:hover > svg,
  #visit .consultation-image-navigation > button:hover > svg { transform: none; }
}