/* WebPies — Product page styles.
   Compiled from scss/sections/product.scss. */

/* ===== Gallery slider + cursor hover-zoom ===== */
.pg-stage{ cursor: crosshair; background: var(--cream-2); }
.pg-main-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: center; will-change: transform;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.pg-stage.pg-zooming .pg-main-img{ transition: transform .12s ease-out, opacity .3s ease; }
.pg-main-img.pg-fade{ opacity: 0; }

.pg-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(245,241,234,.86); color: var(--ink); border: 1px solid var(--line);
  cursor: pointer; z-index: 3; opacity: 0;
  transition: opacity .25s ease, background .2s ease, color .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pg-stage:hover .pg-nav{ opacity: 1; }
.pg-nav.pg-prev{ left: 14px; }
.pg-nav.pg-next{ right: 14px; }
.pg-nav:hover{ background: var(--ink); color: var(--cream); }
.pg-nav:active{ transform: translateY(-50%) scale(.92); }

.pg-count{
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em;
  background: rgba(13,15,18,.7); color: #f5f1ea; padding: 5px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pg-hint{
  position: absolute; bottom: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(13,15,18,.7); color: #f5f1ea; padding: 5px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 1; transition: opacity .25s ease;
}
.pg-stage.pg-zooming .pg-hint{ opacity: 0; }
@media (hover: none){ .pg-hint{ display: none; } }

.pg-thumb{
  aspect-ratio: 1 / 1; border-radius: 12px; position: relative; overflow: hidden;
  cursor: pointer; border: 1px solid var(--line); background: var(--cream-2); padding: 0;
}
.pg-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.pg-thumb:hover img{ transform: scale(1.07); }
.pg-thumb.active{ outline: 2px solid var(--ink); outline-offset: 2px; }
html.theme-dark .pg-thumb.active{ outline-color: var(--lime); }
html.theme-dark .pg-nav{ background: rgba(16,19,21,.86); }