/* ==========================================================
   YELOMYTH LABS — PRODUKTSEITEN (Eclipse, Reverie, Complete Pack)
   Angleichung an die Startseite: setzt css/site.css und
   Design/original-prism.css voraus (gleiche Schrift, Farben,
   Navigation, Containerbreite, Karten und Footer).
   Hier stehen nur die produktspezifischen Ergänzungen.
   ========================================================== */

/* Gleiche Außenkanten wie Startseite (Prism: 1840 px / 4 %). */
@media(min-width:1001px){
  .bundle-hero{max-width:1840px;padding-left:4%;padding-right:4%}
}

/* Bereichslabels wie auf der Startseite. */
.bundle-intro .eyebrow,
.gallery-section .eyebrow,
.cross-section .eyebrow,
.included-section .eyebrow{font-size:15px;font-weight:700}
.gallery-section .eyebrow + .section-title,
.included-section .eyebrow + .section-title{margin-top:22px}

/* Hero-Bild im Kartenrahmen der Startseite. */
.bundle-hero-media{
  border-radius:24px;
  border-color:rgba(164,139,192,.16);
  background:#100d18;
}

/* Produkttitel mit dem Flieder-Verlauf der Startseiten-Headline. */
.bundle-title{
  color:#d4c3e5;
  background:linear-gradient(90deg,#d4c3e5 0%,#c3aed8 40%,#a389bd 72%,#b7a0d1 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}

.bundle-intro .resolution-note{padding-left:0}

/* Kaufkarte im Stil der Desktop-Produktkarten. */
.buy-card{
  background:#17121f;
  border:1px solid rgba(164,139,192,.38);
  border-radius:24px;
  padding:34px 32px;
}
.buy-card .price-note{color:#aaa0b7}
.spec-list{border-top-color:rgba(164,139,192,.12)}
.spec-list li{border-bottom-color:rgba(164,139,192,.08)}
.spec-list li span{color:#aaa0b7}
.buy-btn[aria-disabled="true"]{
  border-color:rgba(164,139,192,.22);
  background:#1c1728;
  color:#aaa0b7;
}
.buy-hint{color:#aaa0b7}

/* Galerie: tonale Rahmen wie Karten und Statistikfläche. */
.shot-frame{
  border-color:rgba(164,139,192,.12);
  border-radius:16px;
  background:#100d18;
}
.shot-frame:hover{
  border-color:rgba(164,139,192,.42);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}

/* Cross-Selling in der dunklen Fläche des Desktop-Bereichs der Startseite. */
.cross-section .cross-grid{
  background:#100d18;
  padding:28px;
  gap:22px;
  border-radius:26px;
}
@media(min-width:769px){
  .cross-section .cross-grid .media-duo{aspect-ratio:24/9}
}

/* Complete Pack: enthaltene Bundles als eigenständige dunkle Fläche
   (auf der Startseite hängt dieselbe Fläche unter dem Desktop-Kopf). */
.included-section .bundle-grid{padding:28px;border-radius:26px}
.gallery-group-head{border-bottom-color:rgba(164,139,192,.12)}
.gallery-group-head a:hover{color:var(--accent-soft)}
.gallery-group-head{flex-wrap:wrap}
.gallery-group-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 26px;margin-left:auto}

/* Galerie etwas näher an den Produktbereich (vorher 90 px / mobil 60 px aus css/site.css). */
.gallery-section{padding-top:40px}

/* Einzelnes letztes Galerie-Bild (25.) mittig in der letzten Zeile – auf Eclipse,
   Reverie und in beiden Galerie-Gruppen von complete.html. Breite = eine Spalte
   des 2er-Grids; einspaltig (≤768 px) greift die Regel nicht. */
@media(min-width:769px){
  .gallery > .shot:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 22px) / 2);
  }
}

/* Desktop: Produktbereich unter dem Hero 40 px tiefer (Intro 50 -> 90 px).
   Ausgleich darunter, damit der folgende Bereich (Galerie bzw. „Enthaltene
   Bundles“) nicht nach unten wandert: Hero-Unterkante 30 -> 0 px,
   folgender Abstand -10 px. Tablet/Mobil (gestapeltes Layout) unverändert. */
@media(min-width:1001px){
  .bundle-intro{margin-top:90px}
  .bundle-hero{padding-bottom:0}
  .bundle-hero + .gallery-section{padding-top:30px}
  .bundle-hero + .included-section{padding-top:60px}
}

/* Desktop: zusätzlicher Abstand zwischen „Yelomyth Ultrawide · Desktop“ und
   Produktname (14 -> 106 px, +92 px). Label und Preiskarte bleiben; der linke
   Block bleibt kürzer als die Karte, daher keine Auswirkung auf die Galerie. */
@media(min-width:1001px){
  .bundle-intro .eyebrow + .bundle-title{margin-top:106px}
}

/* Complete Pack: EIN gemeinsamer Hero im Format von Eclipse/Reverie (32:9,
   gleicher Rahmen und Radius), darin Eclipse | Reverie exakt 50/50 ohne Lücke.
   Gilt auf allen Breiten (überschreibt die gestapelte Variante aus site.css). */
.duo-hero{
  grid-template-columns:1fr 1fr;
  gap:0;
  aspect-ratio:32/9;
  overflow:hidden;
  border:1px solid rgba(164,139,192,.16);
  border-radius:24px;
  background:#100d18;
}
.duo-hero .bundle-hero-media{
  aspect-ratio:auto;
  height:100%;
  border:0;
  border-radius:0;
}
/* Mitte: 1 px, sehr dezente Abdunklung */
.duo-hero .bundle-hero-media:last-child{box-shadow:inset 1px 0 0 rgba(0,0,0,.55)}
.duo-hero .bundle-hero-media:first-child img{object-position:22% 50%}
.duo-hero .bundle-hero-media:last-child img{object-position:62% 50%}
@media(max-width:1000px){
  .duo-hero{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .duo-hero{border-radius:16px}
  .duo-hero figcaption{left:10px;bottom:8px;font-size:10px;letter-spacing:1.6px}
}

/* Complete Pack (Desktop): Preiskarte ist 76 px höher als bei Eclipse/Reverie –
   nur die Karte 60 px nach oben versetzen. transform ändert das Layout nicht,
   linker Textblock und folgende Bereiche bleiben an ihrer Position. */
@media(min-width:1001px){
  .duo-hero ~ .bundle-intro .buy-card{transform:translateY(-60px)}
}

/* Lightbox-Navigation (nur Seiten mit .lightbox-nav: Eclipse, Reverie). */
.lightbox .lightbox-nav{
  top:50%;
  right:auto;
  width:56px;
  height:56px;
  margin-top:-28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(164,139,192,.22);
  background:rgba(23,18,31,.72);
  color:#cbb8e1;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s, color .2s;
}
.lightbox .lightbox-prev{left:22px}
.lightbox .lightbox-next{left:auto;right:22px}
.lightbox .lightbox-nav:hover{background:rgba(41,32,54,.9);border-color:rgba(164,139,192,.5);color:#ebe6f1}
.lightbox .lightbox-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lightbox:has(.lightbox-nav) img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}

@media(max-width:768px){
  .buy-card{padding:26px 22px;border-radius:20px}
  .bundle-hero-media{border-radius:16px}
  .cross-section .cross-grid,
  .included-section .bundle-grid{padding:12px;gap:14px;border-radius:20px}
  .shot-frame{border-radius:12px}
  .gallery-section{padding-top:30px}
  .lightbox .lightbox-nav{width:44px;height:44px;margin-top:-22px;top:auto;bottom:calc(4vh + 2px)}
  .lightbox .lightbox-prev{left:16px}
  .lightbox .lightbox-next{right:16px}
}