/* Okno produktu (galeria + szczegóły). Korzysta ze zmiennych z style.css. */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* zdjęcie na karcie jest klikalne (kursor lupy, bez dodatkowych znaczków) */
.card .photo{cursor:zoom-in}

#pg{margin:auto;width:min(980px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);padding:0;overflow:auto;
  border:2px solid var(--ink);border-radius:1.8rem;background:var(--cream);color:var(--ink);font-family:var(--mono);
  scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
#pg::backdrop{background:rgba(58,31,163,.35)}
#pg[open]{animation:pg-in .25s ease both}
@keyframes pg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html:has(#pg[open]){overflow:hidden}

.pg-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding:2rem}
.pg-close{position:absolute;top:.8rem;right:.8rem;z-index:3;width:2.4rem;height:2.4rem;display:grid;place-items:center;
  font:inherit;font-size:1.6rem;line-height:1;color:inherit;background:var(--cream);border:2px solid var(--ink);
  border-radius:50%;cursor:pointer;padding:0 0 .15rem}
.pg-close:hover{background:var(--ink);color:var(--cream)}

/* galeria: przewijana palcem, strzałkami lub klawiszami */
.pg-gal{position:relative}
.pg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;
  border:2px solid var(--ink);border-radius:40% 40% 12px 12px / 22% 22% 12px 12px;background:var(--cream-2)}
.pg-track::-webkit-scrollbar{display:none}
.pg-slide{position:relative;flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center}
.pg-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pg-slide svg{width:38%;height:55%;color:var(--ink)}
.pg-nav{position:absolute;top:calc(50% - 1.3rem);z-index:2;width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border:2px solid var(--ink);border-radius:50%;background:var(--cream);color:inherit;font:inherit;font-size:1.6rem;
  line-height:1;cursor:pointer;padding:0 0 .2rem}
.pg-prev{left:.6rem}
.pg-next{right:.6rem}
.pg-nav:hover:not(:disabled){background:var(--ink);color:var(--cream)}
.pg-nav:disabled{opacity:.35;cursor:default}
.pg-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}
.pg-dots button{width:.7rem;height:.7rem;padding:0;border:1.5px solid var(--ink);border-radius:50%;background:none;cursor:pointer}
.pg-dots button[aria-current="true"]{background:var(--ink)}
#pg.single .pg-nav,#pg.single .pg-dots{display:none}

/* opis i szczegóły */
.pg-info{display:flex;flex-direction:column;gap:1.1rem;align-self:center;text-align:left}
.pg-name{font-family:"Great Vibes","Brush Script MT",cursive;font-size:clamp(2.4rem,4vw,3.2rem);font-weight:400;
  line-height:1.1;margin:0;padding-right:2.6rem}
.pg-swirl{display:block;width:110px;height:14px;color:var(--ink);margin:-.3rem 0 0}
.pg-price{font-size:1.5rem;margin:0}
.pg-text{display:flex;flex-direction:column;gap:1.5rem}
.pg-text > p{margin:0;font-size:1rem;line-height:1.7}
.pg-sub{margin:0 0 .4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.pg-specs{display:flex;flex-direction:column}
.pg-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.8rem 0;border-bottom:2px dashed var(--ink)}
.pg-sub + .pg-row{border-top:2px dashed var(--ink)}
.pg-row .k{flex:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.pg-row .v{text-align:right;font-size:.95rem;line-height:1.5}
.pg-buy{margin-top:.6rem}
.pg-buy .btn{margin:0}

@media (max-width:760px){
  .pg-in{grid-template-columns:1fr;gap:1.4rem;padding:1.2rem}
  .pg-track{aspect-ratio:1 / 1.05}
  .pg-name{font-size:2.4rem}
  .pg-row{flex-direction:column;align-items:flex-start;gap:.2rem}
  .pg-row .v{text-align:left}
}