/* Pleasy Product Lightbox */
:root{
  --pplb-pink:#f24e7f;
  --pplb-peach:#f6e1d3;
  --pplb-ink:#1d171a;
}

body.pplb-lock{
  overflow:hidden!important;
  overscroll-behavior:none;
}

/* Hide Woo/PhotoSwipe layer only while our lightbox is active. */
body.pplb-open .pswp,
body.pplb-open .woocommerce-product-gallery__trigger + .pswp{
  visibility:hidden!important;
  pointer-events:none!important;
}

#pplb{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  width:100vw;
  height:100vh;
  height:100dvh;
  color:#fff;
  font-family:Montserrat,Arial,Helvetica,sans-serif;
}
#pplb.is-open{display:block}

.pplb__backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,16,18,.93);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

.pplb__dialog{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:64px minmax(0,1fr) 90px;
  min-width:0;
  min-height:0;
  outline:0;
}

.pplb__topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px 8px 22px;
  pointer-events:none;
}

.pplb__counter{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}

.pplb__close,
.pplb__arrow{
  appearance:none;
  border:0;
  cursor:pointer;
  color:var(--pplb-ink);
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .16s ease,background .16s ease,color .16s ease,opacity .16s ease;
}

.pplb__close{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:50%;
  pointer-events:auto;
}
.pplb__close:hover,
.pplb__close:focus-visible{
  background:var(--pplb-pink);
  color:#fff;
  transform:scale(1.04);
  outline:none;
}
.pplb__close svg{width:20px;height:20px}

.pplb__stage{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  padding:8px 96px 14px;
  overflow:hidden;
  touch-action:pan-y pinch-zoom;
}

.pplb__image-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

.pplb__image{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:min(1120px,100%)!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:10px;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.36);
  user-select:none;
  -webkit-user-drag:none;
}

.pplb__spinner{
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  margin:-16px 0 0 -16px;
  border:3px solid rgba(255,255,255,.2);
  border-top-color:var(--pplb-pink);
  border-radius:50%;
  animation:pplb-spin .7s linear infinite;
}
.pplb__spinner[hidden]{display:none}
@keyframes pplb-spin{to{transform:rotate(360deg)}}

.pplb__arrow{
  position:absolute;
  z-index:4;
  top:50%;
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  margin-top:-24px;
  border-radius:50%;
}
.pplb__arrow:hover,
.pplb__arrow:focus-visible{
  background:var(--pplb-pink);
  color:#fff;
  transform:scale(1.04);
  outline:none;
}
.pplb__arrow[hidden]{display:none}
.pplb__arrow--prev{left:22px}
.pplb__arrow--next{right:22px}
.pplb__arrow svg{width:21px;height:21px}

.pplb__thumbs-wrap{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:8px 18px 14px;
}
.pplb__thumbs{
  display:flex;
  max-width:min(820px,100%);
  gap:8px;
  padding:3px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.pplb__thumbs:empty{display:none}
.pplb__thumb{
  flex:0 0 62px;
  width:62px;
  height:62px;
  padding:3px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  opacity:.72;
  transition:opacity .16s ease,border-color .16s ease,transform .16s ease,background .16s ease;
}
.pplb__thumb:hover{opacity:1;transform:translateY(-1px)}
.pplb__thumb.is-active{
  border-color:var(--pplb-pink);
  background:#fff;
  opacity:1;
}
.pplb__thumb img{
  display:block;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  background:#fff;
  border-radius:6px;
}

.pplb__hint{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:none;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:rgba(255,255,255,.78);
  font-size:10px;
  white-space:nowrap;
  pointer-events:none;
}

/* Ensure the original gallery remains visually normal. */
.pplb-enabled.single-product .woocommerce-product-gallery__image a{
  cursor:zoom-in;
}

@media(max-width:820px){
  #pplb{background:#151114}
  .pplb__dialog{grid-template-rows:58px minmax(0,1fr) 78px}
  .pplb__topbar{padding:8px 10px 4px 13px}
  .pplb__counter{min-height:34px;padding:0 11px;font-size:11px}
  .pplb__close{width:42px;height:42px}
  .pplb__stage{padding:4px 12px 10px}
  .pplb__image{
    max-width:100%!important;
    max-height:100%!important;
    border-radius:8px;
  }
  .pplb__arrow{width:42px;height:42px;margin-top:-21px;background:rgba(255,255,255,.92)}
  .pplb__arrow--prev{left:8px}
  .pplb__arrow--next{right:8px}
  .pplb__thumbs-wrap{padding:6px 10px 10px}
  .pplb__thumbs{justify-content:flex-start;max-width:100%}
  .pplb__thumb{flex-basis:54px;width:54px;height:54px;border-radius:9px}
  .pplb__hint{display:block}
}

@media(max-width:480px){
  .pplb__dialog{grid-template-rows:56px minmax(0,1fr) 70px}
  .pplb__stage{padding:2px 8px 8px}
  .pplb__arrow{width:38px;height:38px;margin-top:-19px}
  .pplb__arrow svg{width:18px;height:18px}
  .pplb__thumb{flex-basis:48px;width:48px;height:48px}
}

@media(prefers-reduced-motion:reduce){
  .pplb__close,.pplb__arrow,.pplb__thumb{transition:none}
  .pplb__spinner{animation-duration:1.4s}
}


/* 1.1.0: desktop drag affordance */
@media (hover:hover) and (pointer:fine){
  .pplb__stage{cursor:grab}
  .pplb__stage.is-mouse-dragging{cursor:grabbing}
  .pplb__stage.is-mouse-dragging .pplb__image{pointer-events:none}
  .pplb__image{transition:transform .16s ease,opacity .16s ease}
  .pplb__arrow,.pplb__thumb,.pplb__close{cursor:pointer}
}
