/* ============================================================
   PATRISSA GALLERY — galeria produktu z wideo
   Namespace: .psg  (nie koliduje ze stylami motywu)
   ============================================================ */

.psg{
  --psg-accent:#BBA293;
  --psg-accent-strong:#A58C73;
  --psg-bg-soft:#F6F2EC;
  --psg-border:#E7DED2;
  --psg-white:#FFFFFF;
  --psg-radius:16px;
  --psg-gap:14px;
  --psg-thumb:84px;

  position:relative;
  width:100%;
  margin:0 0 24px;
}
.psg,.psg *,.psg *::before,.psg *::after{box-sizing:border-box;}

/* ---------- układ ----------
   Grid + bardzo specyficzny selektor, bo motyw (Rey) narzuca własne
   reguły display/flex kontenerowi .woocommerce-product-gallery. */
body .psg.psg--thumbs-left.woocommerce-product-gallery.images{
  display:grid !important;
  grid-template-columns:var(--psg-thumb) minmax(0,1fr) !important;
  grid-template-rows:auto !important;
  gap:var(--psg-gap) !important;
  align-items:start !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
}
body .psg.psg--thumbs-bottom.woocommerce-product-gallery.images{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:var(--psg-gap) !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
}

body .psg .psg__stage{
  position:relative !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

body .psg .psg__thumbs{
  min-width:0 !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}
body .psg--thumbs-left .psg__thumbs{
  width:var(--psg-thumb) !important;
  align-self:stretch;
}

.psg__viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--psg-radius) !important;
  background:var(--psg-bg-soft);
}

.psg__track{
  display:flex;
  align-items:flex-start;
  width:100%;
  will-change:transform;
  transition:transform .5s cubic-bezier(.22,.72,.24,1);
}
.psg__track.is-dragging{transition:none;}

.psg__slide{
  flex:0 0 100%;
  width:100%;
  line-height:0;
  position:relative;
}

/* Wszystkie kadry mają identyczne proporcje — dzięki temu wysokość galerii
   nie skacze między slajdami. Proporcje ustawiasz w:
   WooCommerce → Galeria produktu → „Proporcje kadru". */
.psg__img,
.psg__video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--psg-radius) !important;
}
.psg:not(.psg--ratio-natural) .psg__img,
.psg:not(.psg--ratio-natural) .psg__video{
  aspect-ratio:var(--psg-ratio,1/1);
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* wideo ma zachowywać się jak zdjęcie */
.psg__video{
  pointer-events:none;
  background:#111;
}
.psg__video::-webkit-media-controls,
.psg__video::-webkit-media-controls-enclosure,
.psg__video::-webkit-media-controls-panel,
.psg__video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none !important;
}

/* ---------- strzałki ---------- */
.psg__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid var(--psg-border);
  border-radius:50% !important;
  background:rgba(255,255,255,.94);
  color:#171717;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  box-shadow:0 4px 16px rgba(110,88,68,.14);
  opacity:0;
  transition:opacity .25s ease,background .2s ease,color .2s ease;
}
.psg__stage:hover .psg__nav{opacity:1;}
.psg__nav:hover{background:var(--psg-accent-strong);border-color:var(--psg-accent-strong);color:#fff;}
.psg__nav svg{width:19px;height:19px;display:block;}
.psg__nav--prev{left:12px;}
.psg__nav--next{right:12px;}
.psg__nav[disabled]{opacity:0 !important;pointer-events:none;}

/* ---------- lupka ---------- */
.psg__zoom{
  position:absolute;
  right:12px;bottom:12px;
  z-index:3;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid var(--psg-border);
  border-radius:50% !important;
  background:rgba(255,255,255,.94);
  color:#171717;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  box-shadow:0 4px 16px rgba(110,88,68,.14);
  transition:background .2s ease,color .2s ease;
}
.psg__zoom:hover{background:var(--psg-accent-strong);border-color:var(--psg-accent-strong);color:#fff;}
.psg__zoom svg{width:18px;height:18px;display:block;}
/* lupka chowa się, gdy na slajdzie jest wideo */
.psg.is-video-active .psg__zoom{display:none;}

/* ---------- miniatury ---------- */
.psg__thumbs-inner{
  display:flex;
  gap:10px;
  scrollbar-width:none;
}
.psg__thumbs-inner::-webkit-scrollbar{display:none;}

.psg--thumbs-left .psg__thumbs-inner{
  flex-direction:column;
  max-height:100%;
  overflow-y:auto;
}
.psg--thumbs-bottom .psg__thumbs-inner{
  flex-direction:row;
  overflow-x:auto;
  padding-bottom:2px;
}

.psg__thumb{
  position:relative;
  flex:0 0 auto;
  width:var(--psg-thumb);
  height:var(--psg-thumb);
  padding:0;
  border:1px solid var(--psg-border);
  border-radius:12px !important;
  background:var(--psg-bg-soft);
  overflow:hidden;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  opacity:.72;
  transition:opacity .2s ease,border-color .2s ease;
}
.psg__thumb img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.psg__thumb-fallback{
  display:block;width:100%;height:100%;
  background:#111;
}
.psg__thumb:hover{opacity:1;}
.psg__thumb.is-active{
  opacity:1;
  border-color:var(--psg-accent-strong);
  box-shadow:0 0 0 1px var(--psg-accent-strong);
}
.psg__thumb-badge{
  position:absolute;
  right:5px;bottom:5px;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  pointer-events:none;
}
.psg__thumb-badge svg{width:11px;height:11px;display:block;}

/* ---------- powiększenie ---------- */
.psg-lb{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(17,17,17,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:psg-fade .2s ease both;
}
.psg-lb[hidden]{display:none;}
.psg-lb__box{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  max-width:96vw;max-height:92svh;
}
.psg-lb__box img{
  display:block;
  max-width:96vw;max-height:92svh;
  width:auto;height:auto;
  border-radius:10px;
}
.psg-lb__close{
  position:absolute;
  top:clamp(10px,2.4vw,26px);
  right:clamp(10px,2.4vw,26px);
  z-index:2;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50% !important;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:background .2s ease;
}
.psg-lb__close:hover{background:rgba(255,255,255,.26);}
.psg-lb__close svg{width:22px;height:22px;display:block;}
@keyframes psg-fade{from{opacity:0}to{opacity:1}}

/* ---------- pusta galeria ---------- */
.psg--empty img{
  display:block;width:100%;height:auto;
  border-radius:var(--psg-radius) !important;
}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:1024px){
  .psg{--psg-thumb:72px;}
}

@media (max-width:767px){
  .psg{
    --psg-radius:14px;
    --psg-thumb:62px;
    --psg-gap:10px;
  }
  /* jedna kolumna, miniatury pod galerią */
  body .psg.psg--thumbs-left.woocommerce-product-gallery.images,
  body .psg.psg--thumbs-bottom.woocommerce-product-gallery.images{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .psg--thumbs-left .psg__stage{order:1;}
  body .psg--thumbs-left .psg__thumbs{
    order:2;
    width:auto !important;
    align-self:auto;
  }
  .psg--thumbs-left .psg__thumbs-inner{
    flex-direction:row;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .psg__nav{opacity:1;width:36px;height:36px;}
  .psg__nav--prev{left:8px;}
  .psg__nav--next{right:8px;}
  .psg__zoom{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .psg__track{transition:none;}
}