/* ==========================================================================
   Product Viewer (.pv) — Interior Touch
   --------------------------------------------------------------------------
   Isolated gallery component: thumbnails, hover magnifier + side zoom panel,
   swipe carousel on touch, and a fullscreen lightbox.

   Reuses the site's existing design tokens only (--brand, --line, --radius,
   --ink, --cream, --shadow, --font-body). Adds no new colours or fonts.

   To disable completely: remove the pv.css / pv.js tags from a page. The
   markup then degrades to a plain responsive image grid (see "Base" below).
   ========================================================================== */

.pv {
  --pv-gap: 18px;
  --pv-r: var(--radius, 14px);
  --pv-ease: cubic-bezier(.4, 0, .2, 1);
  --pv-dur: 240ms;
}

/* ---------- Base: no JS / before init — plain grid, matches old gallery --- */
.pv-track {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pv-gap);
}
/* height:auto is required — the width/height attributes (there for CLS) would
   otherwise resolve as a definite height and defeat aspect-ratio. */
.pv-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--pv-r);
  display: block;
}
.pv-thumbs,
.pv-nav,
.pv-counter,
.pv-expand,
.pv-lens { display: none; }

@media (max-width: 760px) {
  .pv-track { grid-template-columns: 1fr; }
}

/* ---------- Enhanced: JS initialised ------------------------------------- */
.pv.is-ready {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--pv-gap);
  align-items: start;
}

/* --- Thumbnail rail (column 1) --- */
.pv.is-ready .pv-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pv-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 1.5px solid var(--line, #d2dee3);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: border-color var(--pv-dur) var(--pv-ease),
              transform var(--pv-dur) var(--pv-ease);
}
.pv-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.pv-thumb:hover { transform: translateY(-1px); border-color: var(--brand, #195073); }
.pv-thumb[aria-current="true"] {
  border-color: var(--brand, #195073);
  box-shadow: 0 0 0 1px var(--brand, #195073);
}
.pv-thumb:focus-visible {
  outline: 2px solid var(--brand-accent, #faa000);
  outline-offset: 2px;
}

/* --- Stage (column 2) --- */
.pv.is-ready .pv-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--pv-r);
  background: var(--cream, #f5f8fa);
  touch-action: pan-y;
}
.pv.is-ready .pv-track {
  display: flex;
  gap: 0;
  will-change: transform;
  transition: transform var(--pv-dur) var(--pv-ease);
}
.pv.is-ready .pv-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}
.pv.is-ready .pv-slide img {
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--pv-dur) var(--pv-ease);
}
.pv.is-ready .pv-slide img.is-loaded { opacity: 1; }

/* Skeleton shimmer behind an image that has not decoded yet */
.pv.is-ready .pv-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--cream, #f5f8fa) 30%, var(--cream-2, #e6edf2) 50%, var(--cream, #f5f8fa) 70%);
  background-size: 220% 100%;
  animation: pvShimmer 1.4s linear infinite;
}
.pv.is-ready .pv-slide.is-loaded::before { display: none; }
@keyframes pvShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.pv-stage.is-zoomable { cursor: zoom-in; }

/* --- Magnifier loupe: a round glass that shows the detail under the cursor --- */
.pv.is-ready .pv-lens {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pv-lens-size, 220px);
  height: var(--pv-lens-size, 220px);
  border-radius: 50%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: var(--cream, #f5f8fa);
  border: 3px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 0 0 1px rgba(29, 29, 31, .22),
    0 10px 28px rgba(29, 29, 31, .30),
    inset 0 0 22px rgba(29, 29, 31, .18);
  opacity: 0;
  /* `translate` is driven by JS every pointermove and must not be transitioned;
     `scale` handles the reveal. Separate properties keep them independent. */
  translate: 0 0;
  scale: .85;
  transition: opacity 200ms var(--pv-ease), scale 200ms var(--pv-ease);
  will-change: translate;
  z-index: 3;
}
/* Specificity deliberately above the resting rule above — never rely on
   source order alone for a state that must win. */
.pv.is-ready .pv-stage.is-zooming .pv-lens { opacity: 1; scale: 1; }

/* --- Overlay controls --- */
.pv.is-ready .pv-nav,
.pv.is-ready .pv-expand {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 4;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink, #1d1d1f);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms var(--pv-ease), background 200ms var(--pv-ease);
  box-shadow: 0 2px 10px rgba(29, 29, 31, .18);
}
.pv.is-ready .pv-nav { width: 40px; height: 40px; top: 50%; margin-top: -20px; }
.pv.is-ready .pv-prev { left: 12px; }
.pv.is-ready .pv-next { right: 12px; }
.pv.is-ready .pv-expand { width: 38px; height: 38px; right: 12px; bottom: 12px; }
.pv-stage:hover .pv-nav,
.pv-stage:hover .pv-expand,
.pv-stage:focus-within .pv-nav,
.pv-stage:focus-within .pv-expand { opacity: 1; }
.pv.is-ready .pv-nav:hover,
.pv.is-ready .pv-expand:hover { background: #fff; }
.pv.is-ready .pv-nav:focus-visible,
.pv.is-ready .pv-expand:focus-visible {
  opacity: 1;
  outline: 2px solid var(--brand-accent, #faa000);
  outline-offset: 2px;
}
.pv.is-ready .pv-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.pv-nav svg, .pv-expand svg { width: 18px; height: 18px; }

.pv.is-ready .pv-counter {
  display: block;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(29, 29, 31, .62);
  color: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- Tablet: thumbnails move below, no magnifier ------------------ */
@media (max-width: 1023px) {
  .pv.is-ready {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pv.is-ready .pv-thumbs {
    flex-direction: row;
    order: 2;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pv.is-ready .pv-thumbs::-webkit-scrollbar { display: none; }
  .pv-thumb { flex: 0 0 84px; }
  .pv.is-ready .pv-stage { order: 1; }
  .pv-stage.is-zoomable { cursor: default; }
}

/* ---------- Touch: native swipe with momentum + snap --------------------- */
@media (hover: none), (pointer: coarse) {
  .pv.is-ready .pv-stage { touch-action: pan-x pan-y; }
  .pv.is-ready .pv-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: none;
    /* No `transform: none` override here — pv.js clears the inline transform
       for this same media query. One source of truth, no !important war. */
  }
  .pv.is-ready .pv-track::-webkit-scrollbar { display: none; }
  .pv.is-ready .pv-slide { scroll-snap-align: center; }
  .pv.is-ready .pv-nav { display: none; }
  .pv.is-ready .pv-expand { opacity: 1; }
}

/* ==========================================================================
   Fullscreen lightbox
   ========================================================================== */
.pv-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(12, 14, 16, .96);
  font-family: var(--font-body, system-ui, sans-serif);
  /* An animation plays the moment the element becomes displayed, so the
     reveal never depends on a JS class toggle landing in the right frame. */
  animation: pvLbIn 240ms cubic-bezier(.4, 0, .2, 1) both;
}
.pv-lb.is-closing { animation: pvLbOut 200ms cubic-bezier(.4, 0, .2, 1) both; }
/* `display: grid` above beats the UA rule for [hidden] — restore it. */
.pv-lb[hidden] { display: none; }
@keyframes pvLbIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes pvLbOut { from { opacity: 1 } to { opacity: 0 } }

.pv-lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  color: #fff;
}
.pv-lb-count { font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .85; }
.pv-lb-tools { display: flex; align-items: center; gap: 8px; }

.pv-lb-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1);
}
.pv-lb-btn:hover { background: rgba(255, 255, 255, .24); }
.pv-lb-btn:focus-visible { outline: 2px solid var(--brand-accent, #faa000); outline-offset: 2px; }
.pv-lb-btn[disabled] { opacity: .3; pointer-events: none; }
.pv-lb-btn svg { width: 20px; height: 20px; }

.pv-lb-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
}
.pv-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  will-change: transform;
  transition: transform var(--pv-dur, 240ms) cubic-bezier(.4, 0, .2, 1);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.pv-lb-img.is-zoomed { cursor: grab; }
.pv-lb-img.is-panning { cursor: grabbing; transition: none; }

.pv-lb-nav {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
}
.pv-lb-prev { left: 16px; }
.pv-lb-next { right: 16px; }

.pv-lb-foot {
  padding: 12px 18px 20px;
  text-align: center;
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.5;
}
.pv-lb-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pv-lb-dot {
  width: 54px;
  height: 34px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .55;
  transition: opacity 180ms cubic-bezier(.4, 0, .2, 1), border-color 180ms cubic-bezier(.4, 0, .2, 1);
}
.pv-lb-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-lb-dot[aria-current="true"] { opacity: 1; border-color: #fff; }
.pv-lb-dot:hover { opacity: 1; }
.pv-lb-dot:focus-visible { outline: 2px solid var(--brand-accent, #faa000); outline-offset: 2px; }

body.pv-lb-open { overflow: hidden; }

@media (max-width: 640px) {
  .pv-lb-nav { display: none; }
  .pv-lb-foot { font-size: 12.5px; padding-bottom: 16px; }
  .pv-lb-dot { width: 44px; height: 28px; }
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pv.is-ready .pv-track,
  .pv-lb-img,
  .pv.is-ready .pv-lens,
  .pv.is-ready .pv-slide img { transition-duration: 1ms; }
  .pv-lb, .pv-lb.is-closing { animation-duration: 1ms; }
  .pv.is-ready .pv-slide::before { animation: none; }
}

/* ---------- Screen-reader-only ------------------------------------------ */
.pv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}