.card-gallery { position: relative; overflow: hidden; }
.card-gallery .gallery-frame[hidden] { display: none; }
.card-gallery .gallery-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-gallery button, .card-gallery output {
  position: absolute; z-index: 2; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
}
.card-gallery button {
  top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
}
.card-gallery button:first-of-type { left: 6px; }
.card-gallery button[data-step="1"] { right: 6px; }
.card-gallery button svg { width: 18px; height: 18px; }
.card-gallery output { right: 8px; bottom: 8px; padding: 3px 8px; font-size: 12px; }
.project-examples { padding-top: 32px; }
.project-examples .product-art { aspect-ratio: 2 / 1; }

.card-gallery img[src$="project-0877.webp"], .card-gallery img[src$="project-0875.webp"] {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  transform: scale(1.65);
  transform-origin: center 60%;
}
.project-examples { text-align: center; }
.project-examples .product-art {
  width: min(100%, 800px);
  height: auto;
  margin: 16px auto 0;
  border-radius: 8px;
  overflow: hidden;
}
.project-examples .gallery-frame { position: absolute; inset: 0; }
.card-gallery .gallery-open {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 1;
  cursor: zoom-in;
}
.gallery-viewer {
  max-width: 96vw;
  max-height: 94vh;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--paper);
}
.gallery-viewer::backdrop { background: rgb(0 0 0 / 80%); }
.gallery-viewer img { display: block; max-width: 100%; max-height: 80vh; margin: auto; }
.gallery-viewer form { text-align: right; margin-bottom: 8px; }
.gallery-viewer button { cursor: pointer; font: inherit; padding: 6px 12px; }

/* Size portrait frames around the photo while keeping a stable gallery height. */
.project-examples .product-art {
  height: min(50vw, 400px);
  aspect-ratio: auto;
}
.project-examples .product-art:has(.gallery-photo[data-portrait]:not([hidden])) {
  width: min(100%, 260px);
}
.project-examples .gallery-photo[data-portrait] {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .project-examples .product-art { height: min(64vw, 340px); }
  .project-examples .product-art:has(.gallery-photo[data-portrait]:not([hidden])) {
    height: min(92vw, 340px);
  }
}

/* Tap any current carousel image to browse the entire gallery full-screen. */
.gallery-viewer[open] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #1e1c19;
}
.gallery-viewer::backdrop { background: #1e1c19; }
.gallery-viewer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
}
.gallery-viewer button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  background: rgb(20 19 17 / 58%);
  color: #fff;
  font: 36px/1 Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gallery-viewer button[hidden] { display: none; }
.gallery-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-viewer-close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); font-size: 30px !important; }
.gallery-viewer-prev { left: max(16px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.gallery-viewer-next { right: max(16px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.gallery-viewer-counter {
  position: absolute;
  z-index: 2;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 999px;
  background: rgb(20 19 17 / 58%);
  color: #fff;
  font-size: 13px;
}
@media (max-width: 600px) {
  .gallery-viewer button { width: 42px; height: 42px; font-size: 32px; }
  .gallery-viewer-prev { left: max(10px, env(safe-area-inset-left)); }
  .gallery-viewer-next { right: max(10px, env(safe-area-inset-right)); }
}