/* === Sekcja produktów / nagłówki === */
.shop-section { margin: 18px auto; }
.shop-section.container { max-width: 680px; }
.shop-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.shop-subtitle { font-size: 12px; opacity: .75; margin: 0 0 10px; }
.shop-note { margin-top: 8px; font-size: 11px; opacity: .7; }

/* === Jedno zdjęcie + opis + strzałki (mobile-first) === */
.pv-wrap{ position: relative; display: block; margin-bottom: 10px; padding: 0 8px; }

/* Kadr 4:5 (stabilna wysokość) + pełne zdjęcie */
.pv-hero{
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden; background: #111;
  border: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
}
.pv-hero img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* Badge VIDEO w rogu */
.pv-badge{
  position: absolute; left: 10px; top: 10px;
  font-size: 11px; letter-spacing: .06em;
  background: rgba(0,0,0,.55); color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 3px 7px; border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* Overlay PLAY na środku */
.pv-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 0 0 rgba(255,255,255,.28);
  animation: pvPulse 2.4s ease-out infinite;
  color: #fff;
}
.pv-play__triangle{
  width: 0; height: 0; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  margin-left: 4px;
}
.pv-play__hint{
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  font-size: 12px; color: #fff; background: rgba(0,0,0,.45);
  padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  white-space: nowrap;
}
@keyframes pvPulse{
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.28); }
  70%{ box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Strzałki przewijania */
.pv-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; color: #fff; background: rgba(0,0,0,.45);
  cursor: pointer; display: grid; place-items: center;
  font-size: 22px; line-height: 1; z-index: 2;
  transition: transform .15s ease, opacity .15s ease;
}
.pv-arrow:hover{ transform: translateY(-50%) scale(1.04); }
.pv-prev{ left: 12px; }
.pv-next{ right: 12px; }
.pv-arrow:disabled{ opacity: .35; cursor: default; transform: translateY(-50%); }

/* Licznik */
.pv-count{
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  font-size: 12px; padding: 2px 6px; border-radius: 8px;
  background: rgba(0,0,0,.55); color: #fff;
}

/* Opis pod zdjęciem */
.pv-desc{
  margin: 0 8px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px;
}
.pv-title{ font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.pv-meta{ font-size: 12px; opacity: .85; margin-bottom: 8px; }
.pv-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-price{ font-weight: 900; font-size: 15px; }

.pv-actions{ display:flex; gap:8px; align-items:center; }
.pv-vidbtn{
  font-weight: 800; font-size: 12px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer;
}
.pv-vidbtn:hover{ background: rgba(255,255,255,.12); }

.pv-btn{
  font-weight: 800; font-size: 12px; padding: 6px 10px; border-radius: 10px;
  background: linear-gradient(135deg, #ff79c6 0%, #ff4fa3 50%, #ff2e93 100%);
  color:#fff; text-decoration:none; white-space:nowrap; display:inline-block;
}

/* --- ANIMACJA: fade + slide --- */
.pv-hero, .pv-desc { transition: opacity .35s ease, transform .35s ease; }
.pv-anim-out { opacity: 0; transform: translateX(-20px); }
.pv-anim-in  { opacity: 0; transform: translateX(20px); }
.pv-active   { opacity: 1 !important; transform: translateX(0) !important; }

/* Większe ekrany */
@media (min-width: 576px){
  .shop-section.container { max-width: 740px; }
  .pv-hero{ aspect-ratio: 3 / 4; }
}
@media (min-width: 992px){
  .shop-section.container { max-width: 820px; }
  .pv-hero{ aspect-ratio: 4 / 5; }
}

/* No-scroll gdy modal otwarty */
.no-scroll { overflow: hidden; }

/* Modal wideo */
.pv-modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.pv-modal.is-open{ display: block; }
.pv-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.pv-modal__dialog{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 860px); border-radius: 14px; overflow: hidden;
  background: #000; border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.pv-modal__dialog video{ display:block; width:100%; height:auto; max-height: 80vh; object-fit: contain; background:#000; }
.pv-modal__x{
  position: absolute; right: 8px; top: 8px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; border:0; cursor:pointer;
  background: rgba(255,255,255,.14); color:#fff; font-size:18px; line-height:1;
}
.pv-modal__x:hover{ background: rgba(255,255,255,.22); }

/* Prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .pv-arrow{ transition: none; }
}