/* prodottiDetail.css - vorher <style>-Block in prodottiDetail.php (mitten im <body>).
   Inhalt unveraendert; wird per <link> geladen, damit die Reihenfolge der CSS-Kaskade
   exakt gleich bleibt und die (unbegrenzten) Selektoren nur auf der Produktseite wirken. */
.acc-summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; background:#fafafa; border-left:2px solid #a32d2d; border-radius:0 6px 6px 0; padding:12px 16px; transition:background 0.15s ease; }
.acc-summary:hover { background:#f2f2f2; }
.acc-summary::-webkit-details-marker { display:none; }
.acc-summary .titlesmall { margin:0; }
.acc-summary .arrow { flex-shrink:0; color:#a32d2d; transition:transform 0.2s ease; margin-left:12px; }
details[open] > .acc-summary { background:#f2f2f2; }
details[open] > .acc-summary .arrow { transform:rotate(180deg); }

/* ============================================================
   PRODUKT-GALERIE: Bilder direkt auf der Seite umschalten statt
   in eigenem Popup-Fenster. Der Rahmen kalibriert sich per JS
   einmalig auf das Seitenverhältnis des ERSTEN Bilds DIESES
   Produkts (siehe Script weiter unten) und bleibt dann fix,
   damit die Seite beim Durchklicken nicht "hüpft". Jedes Bild
   wird per object-fit:contain vollständig eingepasst, nie
   zugeschnitten oder verzerrt.
   ============================================================ */
.pd-gallery-main { position:relative; margin-bottom:12px; }
.pd-gallery-frame {
    width:100%;
    max-width:600px;
    max-height:500px;
    aspect-ratio:4/3;
    margin:0 auto;
    background:#f7f7f7;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.pd-gallery-frame img { width:100%; height:100%; object-fit:contain; display:block; }
.pd-gallery-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.9); color:#dc0a09;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.18);
    transition:background-color 0.15s ease, color 0.15s ease;
}
.pd-gallery-nav:hover { background:#dc0a09; color:#fff; }
.pd-gallery-prev { left:12px; }
.pd-gallery-next { right:12px; }
.pd-gallery-nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; }
.pd-gallery-zoom {
    position:absolute; right:14px; bottom:14px;
    width:46px; height:46px; border-radius:50%; border:none;
    background:#dc0a09; color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 3px 10px rgba(220,10,9,0.4);
    transition:background-color 0.15s ease, transform 0.15s ease;
}
.pd-gallery-zoom:hover { background:#a80808; transform:scale(1.06); }
.pd-gallery-zoom svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; }
.pd-gallery-thumbs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pd-gallery-thumb {
    border:2px solid transparent; border-radius:8px; padding:0;
    background:none; cursor:pointer; overflow:hidden;
    width:68px; height:68px;
    transition:border-color 0.15s ease, transform 0.15s ease;
}
.pd-gallery-thumb { background:#f7f7f7; }
.pd-gallery-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.pd-gallery-thumb:hover { transform:translateY(-2px); }
.pd-gallery-thumb.is-active { border-color:#dc0a09; }

/* Lightbox-Overlay für die Großansicht - bleibt auf derselben
   Seite, kein neues Fenster/Popup mehr nötig. */
.pd-lightbox {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85);
    z-index:9999; align-items:center; justify-content:center;
}
.pd-lightbox.is-open { display:flex; }
.pd-lightbox img { max-width:90vw; max-height:88vh; object-fit:contain; display:block; }
.pd-lightbox-close {
    position:absolute; top:20px; right:24px;
    width:40px; height:40px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.15); color:#fff; font-size:22px; line-height:1;
    cursor:pointer; transition:background-color 0.15s ease;
}
.pd-lightbox-close:hover { background:rgba(255,255,255,0.3); }
.pd-lightbox-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.15); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background-color 0.15s ease;
}
.pd-lightbox-nav:hover { background:rgba(255,255,255,0.3); }
.pd-lightbox-nav svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }
.pd-lightbox-prev { left:20px; }
.pd-lightbox-next { right:20px; }

@media print {
    details > *:not(summary) { display:block !important; }
    .acc-summary { background:none !important; }
    .acc-summary .arrow { display:none !important; }
    .pd-gallery-nav, .pd-gallery-zoom { display:none !important; }
}