/* Keep the original photographs intact; white merges into this light stage. */
:root { --photo-surface: #f3f4f1; }
/* Keep Safari's native image/link preview without tinting selected photographs. */
:is(.product-card-image, [data-gallery-main-link], .gallery-thumbnail, .photo-viewer-stage),
:is(.product-card-image, [data-gallery-main-link], .gallery-thumbnail, .photo-viewer-stage) * {
  -webkit-tap-highlight-color: transparent;
}
:is(.product-card-image, [data-gallery-main-link], .gallery-thumbnail, .photo-viewer-stage)::selection,
:is(.product-card-image, [data-gallery-main-link], .gallery-thumbnail, .photo-viewer-stage) *::selection {
  background: transparent;
  color: inherit;
}
.product-photo-variants { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 22px; font-size:13px; }
.product-photo-variants > span { margin-right:6px; color:var(--muted); }
.product-photo-variants > a { display:flex; align-items:center; min-height:44px; padding:10px 15px; border:1px solid var(--line); border-radius:5px; text-decoration:none; }
.product-photo-variants > a[aria-current] { color:#fff; background:var(--ink); border-color:var(--ink); box-shadow:inset 0 -2px var(--red); }
.product-card--with-image .product-card-image,
.catalogue-card--wide.product-card--with-image .product-card-image,
[data-gallery-main-link],
.gallery-thumbnail,
.photo-viewer-stage {
  background: var(--photo-surface);
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.product-card-image > img[data-studio-photo],
.gallery-main > img[data-studio-photo],
.gallery-thumbnail > img[data-studio-photo],
.photo-viewer-stage > img[data-studio-photo] {
  mix-blend-mode: multiply;
}
.product-card--with-image .product-card-image {
  aspect-ratio: 4 / 3;
}
.product-card--with-image .product-card-image > img,
.catalogue-card--wide.product-card--with-image .product-card-image > img {
  object-fit: contain;
  padding: 12px;
}
.product-gallery [data-gallery-main-link] {
  aspect-ratio: 5 / 4;
  border-color: #e1e4dd;
}
.product-gallery [data-gallery-main-link] > img {
  object-fit: contain;
  padding: 14px;
}
.gallery-thumbnails {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.gallery-thumbnail {
  border-color: #dde1d8;
  border-radius: 6px;
  padding: 6px;
}
.gallery-thumbnail > img {
  object-fit: contain;
  padding: 0;
}
.gallery-thumbnail[aria-current="true"] {
  border-color: var(--red);
  border-width: 1px;
  padding: 6px;
  box-shadow: 0 0 0 1px var(--red);
}
.product-card-image > img[data-photo-framed],
.catalogue-card--wide .product-card-image > img[data-photo-framed],
.product-card-link:hover .product-card-image > img[data-photo-framed],
[data-gallery-main-link] > img[data-photo-framed],
.gallery-thumbnail > img[data-photo-framed],
.photo-viewer-stage > img[data-photo-framed] {
  position: absolute;
  max-width: none;
  max-height: none;
  padding: 0;
  transform: none;
  transition: none;
}
.product-card--with-image .product-card-image-label,
.product-gallery-label {
  top: 8px;
  font-size: 8px;
  line-height: 1.2;
  color: #777e76;
  pointer-events: none;
}
@media (max-width: 600px) {
  .product-gallery [data-gallery-main-link] > img:not([data-photo-framed]) { padding: 10px; }
  .gallery-thumbnails { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
}

/* A native modal keeps the page in place and makes the background inert. */
html.photo-viewer-open { overflow: hidden; }
[data-gallery-main-link] { cursor: zoom-in; }
dialog.photo-viewer {
  width: min(1120px, calc(100% - 48px));
  max-width: none;
  height: min(820px, calc(100vh - 48px));
  height: min(820px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid #ffffff45;
  border-radius: 14px;
  overflow: auto;
  color: var(--ink);
  background: var(--photo-surface);
  box-shadow: 0 24px 100px #00000050;
}
dialog.photo-viewer:not([open]) { display: none; }
.photo-viewer::backdrop { background: #080c11c7; backdrop-filter: blur(5px); }
.photo-viewer-panel { display: flex; flex-direction: column; height: 100%; min-height: 240px; }
.photo-viewer-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid #dfe2da;
}
.photo-viewer-heading { min-width: 0; }
.photo-viewer-eyebrow {
  margin: 0 0 5px;
  color: #697267;
  font: 10px/1.3 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.photo-viewer-heading h2 {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.photo-viewer-stage { flex: 1 1 auto; min-height: 80px; }
.photo-viewer-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 24px;
  object-fit: contain;
}
.photo-viewer-stage > img:not([src]) { visibility: hidden; }
.photo-viewer-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 20px;
  border-top: 1px solid #dfe2da;
}
.photo-viewer-button {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d3d8cf;
  border-radius: 50%;
  color: #171c17;
  background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.photo-viewer-button:hover { background: #171c17; color: #fff; border-color: #171c17; }
.photo-viewer-button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.photo-viewer-button svg { display: block; pointer-events: none; }
.photo-viewer-counter { min-width: 62px; text-align: center; font: 13px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.photo-viewer-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 32px;
  background: var(--photo-surface);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}
.photo-viewer [hidden] { display: none !important; }
@media (max-width: 600px) {
  dialog.photo-viewer {
    width: calc(100% - 24px);
    height: min(740px, calc(100vh - 24px));
    height: min(740px, calc(100dvh - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 10px;
  }
  .photo-viewer-header { gap: 12px; padding: 12px; }
  .photo-viewer-heading h2 { font-size: 14px; }
  .photo-viewer-eyebrow { font-size: 9px; }
  .photo-viewer-controls { padding: 10px 12px; }
}
@media (max-height: 450px) {
  .photo-viewer-header { padding-block: 8px; }
  .photo-viewer-eyebrow { display: none; }
  .photo-viewer-controls { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-viewer-button { transition: none; }
}