/* =============================================================
   Single‑Product Image Gallery – CSS  (v4)
   ▸ Smooth Scroll in .pg-wrapper (scroll-behavior: smooth)
   ▸ Bestehende Pill- & Layout‑Settings beibehalten
============================================================= */

/* ---------- Container ---------- */
.pg-container {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    max-height: 80vh;
    gap: 0;
    /* Bilder berühren sich */
}

/* ---------- Navigation ---------- */
.pg-nav {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
    z-index: 5;
}

.pg-arrow {
    all: unset;
    font-size: 12px;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: #fff;
    color: #333;
    transition: background .15s ease;
}

.pg-arrow:hover,
.pg-arrow:active,
.pg-arrow:focus {
    background: #fff;
    color: #333
}

/* ---------- Scroll‑Pill ---------- */
.pg-scroll {
    width: 2.5rem;
    /* Pill‑Breite */
    height: 160px;
    padding: 1rem 0;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);

    display: flex;
    align-items: center;
    justify-content: center;
    /* Track zentrieren */
}

.pg-track {
    width: 8px;
    /* 8 px */
    height: 100%;
    background: #e4e4e4;
    border-radius: 0.5rem;
    position: relative;
}

.pg-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    background: #333;
    border-radius: 0.5rem;
}

/* ---------- Bild‑Grid ---------- */
.pg-wrapper {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: auto;
    /*  ◄◄  Smooth Scroll  */
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-height: 700px;
}

.pg-wrapper::-webkit-scrollbar {
    display: none;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(1fr);
    margin: 64px 0px 64px 0px;
    gap: 150px;
    /* etwas Luft */
}

.pg-item {
    aspect-ratio: 1.5 / 1;
    overflow: hidden;
    margin: 0;
}

.pg-item.pg-span-2 {
    grid-column: 1/-1;
    aspect-ratio: 1.5 / 1;
}

.pg-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Responsive (<768 px) ---------- */
/* ---------- Responsive (<768 px) ---------- */
@media (max-width: 768px) {

    /* Grundlayout */
    .pg-container {
        display: block;
        overflow: hidden;
        max-height: none;
    }

    /* Pfeile & Scrollbar ausblenden */
    .pg-nav {
        display: none;
    }

    .pg-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Swipe-Wrapper */
    .pg-wrapper {
        display: flex;
        overflow-x: auto;
        overflow-y: auto;
        /* oder auto */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        touch-action: auto;
        /* = pan-x pan-y pinch-zoom */
        overscroll-behavior-x: contain;

        -webkit-user-drag: none;
        user-select: none;
    }


    /* Flex-Grid → horizontales Carousel */
    .pg-grid {
        display: flex;
        flex-wrap: nowrap;
        margin: 1rem 0 0rem 0;
    }

    .pg-item,
    .pg-item.pg-span-2 {
        flex: 0 0 100%;
        scroll-snap-align: center;
        aspect-ratio: unset;
    }

    /* Bild */
    .pg-item img {
        width: 100%;
        height: 275px;
        /* nicht stretchen */
        object-fit: contain;
        /* komplett sichtbar */
        object-position: center;
        cursor: auto;
        /* Zoom-Cursor weg */
    }

    /* Pagination-Pill */
    .pg-pagination {
        position: absolute;
        left: 50%;
        bottom: 1rem;
        transform: translateX(-50%);
        display: flex;
        gap: .4rem;
        padding: .5rem .75rem;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    }

    .pg-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #d0d0d0;
        transition: width .15s linear, background .15s linear;
    }

    .pg-dot.is-active {
        width: 18px;
        /* deutlicher */
        background: #333;
    }
}

.pg-wrapper {
    position: relative; /* wichtig für absolute Positionierung */
}



.pg-arrow.is-disabled {
    opacity: .6;
    pointer-events: none;
    /* kein Hover, kein Click */
}

/* PLUS – 32×32, weißer Kreis, dünnes Plus */
.pg-zoomable {
    cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
<circle cx='16' cy='16' r='16' fill='%23fff'/>\
<path d='M16 10v12 M10 16h12' stroke='%23333' stroke-width='1.2' stroke-linecap='round' fill='none'/>\
</svg>") 16 16, zoom-in;
}

/* MINUS */
.pg-zoomable.is-zoomed {
    cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'>\
<circle cx='16' cy='16' r='16' fill='%23fff'/>\
<path d='M10 16h12' stroke='%23333' stroke-width='1.2' stroke-linecap='round' fill='none'/>\
</svg>") 16 16, zoom-out;
}