.product--marker .matbox {
  scroll-margin-top: var(--marker-anchor-gap, 140px);
}
.marker-material-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.marker-photo-trigger { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.marker-photo-trigger:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
html.marker-photo-open { overflow: hidden; }
.marker-viewer {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; border: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color: #fff;
  background: #211e1c;
}
.marker-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
.marker-viewer::backdrop { background: #211e1c; }
.marker-viewer__close { justify-self: end; }
.marker-viewer__stage {
  display: grid; min-height: 0; min-width: 0;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  touch-action: pan-y pinch-zoom;
}
.marker-viewer__stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marker-viewer__controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-variant-numeric: tabular-nums;
}
.marker-viewer button {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid #b0a6a0; border-radius: 24px;
  color: #fff; background: #332e2b; cursor: pointer; font: inherit;
}
.marker-viewer__controls button { font-size: 23px; }
.marker-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }