/* ── Woo Product Gallery Widget ──────────────────────────────────────── */

.woo-pgw {
    --pgw-per-row:    4;
    --pgw-thumb-size: 80px;
    display:          flex;
    flex-direction:   column;
    gap:              0;
    width:            100%;
    user-select:      none;
}

/* Side-thumbnail layouts */
.woo-pgw--left  { flex-direction: row-reverse; gap: 8px; }
.woo-pgw--right { flex-direction: row;         gap: 8px; }

/* ── Main area ── */
.woo-pgw__main-area {
    flex:      1;
    min-width: 0;
    width:     100%;
}

.woo-pgw__main-wrap {
    position:   relative;
    width:      100%;
    height:     500px;
    overflow:   hidden;
    background: #0d0d0d;
}

/* ── Kill WooCommerce / theme default borders on slides ── */
.woo-pgw__slide,
.woo-pgw__slide a,
.woo-pgw__slide figure,
.woo-pgw__slide img,
.woo-pgw__main-img {
    border:          none !important;
    outline:         none !important;
    box-shadow:      none !important;
    margin:          0    !important;
    padding:         0    !important;
    text-decoration: none !important;
}

/* ── Slides ── */
.woo-pgw__slide {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .35s ease;
}

.woo-pgw__slide.is-active {
    opacity:        1;
    pointer-events: auto;
}

.woo-pgw__main-img {
    width:      100% !important;
    height:     100% !important;
    object-fit: contain;
    display:    block !important;
}

/* ── Navigation ── */
.woo-pgw__nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border:          none;
    cursor:          pointer;
    background:      rgba(0,0,0,.45);
    color:           #fff;
    border-radius:   2px;
    transition:      background .2s;
    padding:         0;
}

.woo-pgw__nav:hover { background: rgba(0,0,0,.75); }
.woo-pgw__nav:focus { outline: 2px solid #fff; }

.woo-pgw__nav--prev { left:  8px; }
.woo-pgw__nav--next { right: 8px; }

.woo-pgw--single .woo-pgw__nav { display: none; }

/* ── Zoom button ── */
.woo-pgw__zoom-btn {
    position:        absolute;
    top:             10px;
    right:           10px;
    z-index:         10;
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0,0,0,.45);
    border:          none;
    color:           #fff;
    cursor:          pointer;
    border-radius:   50%;
    transition:      background .2s;
    padding:         0;
}
.woo-pgw__zoom-btn:hover { background: rgba(0,0,0,.75); }

/* ── Thumbnails — bottom layout ── */
.woo-pgw__thumbs {
    display:               grid;
    grid-template-columns: repeat(var(--pgw-per-row), var(--pgw-thumb-size));
    gap:                   6px;
    margin-top:            8px;
}

/* Side-layout thumbnails */
.woo-pgw--left  .woo-pgw__thumbs,
.woo-pgw--right .woo-pgw__thumbs {
    display:               flex;
    flex-direction:        column;
    grid-template-columns: unset;
    margin-top:            0;
    width:                 var(--pgw-thumb-size);
    flex-shrink:           0;
    overflow-y:            auto;
    scrollbar-width:       thin;
}

/* ── Thumbnail item — always square ── */
.woo-pgw__thumb-item {
    width:           var(--pgw-thumb-size);
    aspect-ratio:    1 / 1;
    overflow:        hidden;
    cursor:          pointer;
    background:      #1a1a1a;
    border:          2px solid transparent !important;
    padding:         0    !important;
    margin:          0    !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      border-color .2s, opacity .2s;
    box-sizing:      border-box;
    border-radius:   0;
    outline:         none;
}

/* Kill theme/WC overrides on thumb images */
.woo-pgw__thumb-item img {
    width:      100%  !important;
    height:     100%  !important;
    object-fit: cover !important;
    display:    block !important;
    border:     none  !important;
    padding:    0     !important;
    margin:     0     !important;
    box-shadow: none  !important;
}

.woo-pgw__thumb-item:hover   { opacity: .8; }
.woo-pgw__thumb-item:focus   { outline: none; }

/* Active state — !important beats WooCommerce pink border */
.woo-pgw__thumb-item.is-active {
    border-color: #fff !important;
    opacity:      1;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .woo-pgw--left,
    .woo-pgw--right {
        flex-direction: column;
    }
    .woo-pgw--left  .woo-pgw__thumbs,
    .woo-pgw--right .woo-pgw__thumbs {
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
        margin-top:     8px;
    }
}

/* ── Elementor editor ── */
.elementor-editor-active .woo-pgw__main-wrap {
    min-height: 200px;
}