/* Piece viewer · Figma 1450:15110 (Desktop 1280×832 / Mobile 390×844, Mode=Single / Gallery).
   Sits under the fixed site header (z 50 / 60), which stays visible as in the frames. */
.pv {
  --pad: max(var(--gutter), calc((100vw - var(--content)) / 2));
  /* gallery row: smaller tiles, centred in the space under the title (--below: where that space starts), so the
     margins above and below the row are equal */
  --below: 183px;   /* bottom of the "N pieces" line */
  --rowh: min(440px, calc((calc(100 * var(--svh)) - var(--below)) * 0.68));
  position: fixed; inset: 0; z-index: 45;
  background: #fff;
  overflow: hidden;
  animation: pv-in 260ms var(--ease) both;
}
.pv[hidden] { display: none; }
@keyframes pv-in { from { opacity: 0; } }

.pv__close {
  /* right edge of the content column, centred on the title line (title top 128 + half its 31px line − 22) */
  position: absolute; top: 121.5px; right: var(--pad); z-index: 2;
  width: 44px; height: 44px; border-radius: 22px;
  display: grid; place-items: center;
  background: #f2f2f2; color: #111;
  transition: background-color 160ms, transform 160ms var(--ease);
}
.pv__close svg { width: 44px; height: 44px; }
.pv__close:hover { background: #e8e8e8; }
.pv__close:active { transform: scale(0.94); }
/* Lottie-style motion, in SVG: on open the button pops in and the two strokes draw one after the other (replayed on
   every open and gallery ⇄ single switch via .is-drawn); hover spins the × a quarter turn with a springy overshoot */
.pv__x { transform-origin: 22px 22px; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.pv__x path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv__close.is-drawn { animation: pv-pop 420ms cubic-bezier(.34, 1.56, .64, 1) both; }
.pv__close.is-drawn .pv__x1 { animation: pv-draw 260ms cubic-bezier(.6, 0, .2, 1) 120ms both; }
.pv__close.is-drawn .pv__x2 { animation: pv-draw 260ms cubic-bezier(.6, 0, .2, 1) 240ms both; }
.pv__close.is-drawn .pv__x { animation: pv-twist 520ms cubic-bezier(.34, 1.56, .64, 1) 120ms both; }
@media (hover: hover) { .pv__close:hover .pv__x { transform: rotate(90deg); } }
.pv__close:active .pv__x { transform: rotate(90deg) scale(0.86); transition-duration: 160ms; }
@keyframes pv-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes pv-draw { from { stroke-dashoffset: 1; } }
@keyframes pv-twist { from { transform: rotate(-45deg); } }
.pv :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* Gallery */
.pv__gallery { position: absolute; inset: 0; }
.pv__gallery[hidden] { display: none; }
.pv__title {
  position: absolute; left: var(--pad); top: 128px;
  font-size: 28px; line-height: 31px; letter-spacing: 0; color: #000;
}
.pv__count {
  position: absolute; left: var(--pad); top: 165px;
  font-size: 12px; line-height: 18px; color: rgba(0, 0, 0, 0.5);
}
.pv__row {
  position: absolute; left: 0; right: 0; top: calc(var(--below) + (calc(100 * var(--svh)) - var(--below) - var(--rowh)) / 2);
  display: flex; gap: 24px;
  padding: 0 var(--pad);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.pv__row::-webkit-scrollbar { display: none; }
.pv__row > li { flex: none; }
.pv__piece {
  display: block;
  height: var(--rowh);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 220ms var(--ease);
}
.pv__piece img, .pv__piece video { display: block; height: 100%; width: auto; aspect-ratio: var(--ar); object-fit: cover; }
.pv__piece:hover { transform: translateY(-4px); }
.pv__piece:focus-visible { outline-offset: 4px; }

/* Single: native aspect, fitted inside the free area, never cropped */
.pv__single {
  position: absolute; left: 0; right: 0; top: 120px; bottom: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter);
}
.pv__single[hidden] { display: none; }
.pv__single img, .pv__single video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r, 22px);
  animation: pv-in 260ms var(--ease) both;
}

@media (max-width: 767px) {
  .pv { --below: 182px; --rowh: min(240px, calc((calc(100 * var(--svh)) - var(--below)) * 0.6)); }
  .pv__close { top: 126px; width: 40px; height: 40px; border-radius: 20px; }   /* centred on the 26px title line at 133 */
  .pv__x { transform-origin: 22px 22px; }
  .pv__close svg { width: 40px; height: 40px; }
  .pv__title { top: 133px; font-size: 24px; line-height: 26px; }
  .pv__count { top: 164px; }
  .pv__row { gap: 12px; }
  .pv__piece { border-radius: var(--rm); }
  .pv__single { top: 92px; bottom: 0; padding: 24px; }
  .pv__single img, .pv__single video { border-radius: var(--rm, 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .pv, .pv__single img, .pv__single video, .pv__close.is-drawn, .pv__close.is-drawn .pv__x, .pv__close.is-drawn path { animation: none; }
  .pv__x { transition: none; }
  .pv__piece:hover { transform: none; }
}
.pv__single [hidden] { display: none; }