/* ============================================================
   SGRO MERCH – Produktseiten (shirt.html / hoodie.html)
   ============================================================ */
.pd{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;
  padding:34px clamp(20px,4vw,48px) 0;
}
.pd-back{
  display:inline-block;color:var(--grey-dark);text-decoration:none;
  font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:26px;transition:color .2s;
}
.pd-back:hover,.pd-back:focus-visible{color:var(--blue)}
.pd-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}

/* Galerie */
.pd-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pd-gallery figure{margin:0;overflow:hidden;background:#0a0a0a;position:relative}
.pd-gallery figure img{width:100%;height:100%;object-fit:cover;display:block}
.pd-gallery figure.l{grid-column:1/-1;aspect-ratio:3/2}
.pd-gallery figure.p{aspect-ratio:2/3}
.pd-gallery figure.p.solo{grid-column:1/-1;aspect-ratio:4/5}
.pd-gallery figure.p.solo img{object-position:50% 25%}
.pd-gallery .photo-credit{grid-column:1/-1;padding:4px 2px 0;text-align:right}

/* Kauf-Panel */
.pd-buy{
  position:sticky;top:96px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;
}
.pd-eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  color:var(--grey-dark);font-weight:700;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;
}
.pd-eyebrow::before{content:"";width:7px;height:7px;background:var(--blue)}
.pd-name{
  margin-top:16px;
  font-family:'Syncopate',sans-serif;font-weight:700;line-height:1.3;
  font-size:clamp(15px,1.8vw,22px);letter-spacing:0;text-transform:uppercase;
}
.pd-subtitle{margin-top:8px;color:var(--grey-dark);font-size:13.5px;font-weight:600;letter-spacing:.08em}
.pd-price{margin-top:18px;font-weight:800;font-size:26px}
.pd-price .vat{font-size:11.5px;color:var(--grey-dark);font-weight:500;margin-left:10px}
.pd-buy .fit-tag{align-self:flex-start}
.pd-buy .sizes{margin-top:22px}
.pd-cta{margin-top:18px}
.pd-cta .btn-blue{width:100%;padding:17px 0;font-size:15px;letter-spacing:.08em}
.pd-cta .soldout{display:block;text-align:center}
.pd-msg{min-height:18px;margin-top:10px;color:#ff7a7a;font-size:13px;font-weight:600}

.pd-models{
  margin-top:28px;border-left:2.5px solid var(--blue);
  background:rgba(61,139,253,.05);padding:18px 20px;
}
.pd-models h2,.pd-details h2{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.pd-models ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.pd-models li{
  display:flex;align-items:baseline;gap:11px;
  color:#e4e4e4;font-size:14px;font-weight:500;
}
.pd-models li::before{content:"";width:6px;height:6px;background:var(--blue);flex:0 0 auto;align-self:center}
.pd-models li b{font-weight:800;color:#fff}
.pd-models p{margin-top:12px;color:var(--grey);font-size:12.5px;font-weight:500;line-height:1.7}

.pd-details{margin-top:26px}
.pd-details .dt-list{margin-top:12px}
.pd-partner{
  margin-top:12px;color:var(--grey-dark);
  font-size:12.5px;font-weight:500;line-height:1.7;
}
.pd-partner a{color:var(--grey);text-decoration:none;border-bottom:1.5px solid var(--blue);transition:color .2s}
.pd-partner a:hover,.pd-partner a:focus-visible{color:var(--blue)}

.pd-usps{
  list-style:none;margin-top:26px;display:grid;gap:10px;
  padding-top:22px;border-top:1px solid var(--line);
}
.pd-usps li{
  display:flex;align-items:center;gap:11px;
  color:#9a9a9a;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.pd-usps li::before{content:"";width:6px;height:6px;background:var(--blue);flex:0 0 auto}

.pd-cross{
  margin-top:26px;align-self:flex-start;
  color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--blue);padding-bottom:6px;
  transition:color .2s;
}
.pd-cross:hover,.pd-cross:focus-visible{color:var(--blue)}

.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;vertical-align:-3px;margin-right:10px;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* Mobil-Hero: erstes Produktfoto sofort sichtbar, Galerie folgt nach dem Kauf-Panel */
.pd-mhero{display:none}
@media(max-width:960px){
  .pd-grid{grid-template-columns:1fr}
  .pd-mhero{
    display:block;order:-2;margin:0;overflow:hidden;
    background:#0a0a0a;aspect-ratio:4/5;
  }
  .pd-mhero img{width:100%;height:100%;object-fit:cover}
  .pd-buy{position:static;order:-1}
  .pd-gallery figure.p.solo{aspect-ratio:3/4}
  /* Duplikat des Mobil-Heros in der Galerie ausblenden */
  .pd-gallery figure.hide-m{display:none}
  .pd-gallery figure.p.full-m{grid-column:1/-1;aspect-ratio:4/5}
  .pd-gallery figure.p.full-m img{object-position:50% 30%}
}
@media(max-width:640px){
  .pd{padding-top:22px}
  .pd-gallery{gap:10px}
  .pd-buy{padding:22px 18px}
}