/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/style.css ***!
  \*****************************************************************/
/* 1) Haupt-Thumbnail Play-Button (24×24) */
.wc-vgbe-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  cursor: pointer;
}
.wc-vgbe-play-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #fff;
}

/* 2) Nav-Thumbnail Play-Button (16×16) */
.wc-vgbe-nav-play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  cursor: pointer;
}
.wc-vgbe-nav-play-button:before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #fff;
}

/* 3) Overlay & Modal */
.wc-vgbe-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.wc-vgbe-frame {
  width: 80%; height: 80%;
  max-width: 960px; max-height: 540px;
}
.wc-vgbe-close {
  position: absolute; top: 20px; right: 20px;
  font-size: 30px; color: #fff;
  background: none; border: none; cursor: pointer;
}

.wc-vgbe-thumb {
    position: relative;
}

.woocommerce-product-gallery.woocommerce-product-gallery--with-images ol.flex-control-thumbs img {
    height: 100% !important;
    object-fit: cover !important;
}

/* Video-Pfeile für YouTube-Thumbnails - rein CSS-Lösung */
.flex-control-thumbs li {
    position: relative;
}

/* YouTube-Thumbnails über src-Attribut erkennen */
.flex-control-thumbs li img[src*="img.youtube.com"] {
    position: relative;
}

/* Video-Pfeil über YouTube-Thumbnails */
.flex-control-thumbs li img[src*="img.youtube.com"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 15px solid rgba(255, 255, 255, 0.9);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    z-index: 10;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Runder Hintergrund für den Pfeil */
.flex-control-thumbs li img[src*="img.youtube.com"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    z-index: 9;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Hover-Effekte auf das parent <li> */
.flex-control-thumbs li:hover img[src*="img.youtube.com"]::before {
    border-left-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.flex-control-thumbs li:hover img[src*="img.youtube.com"]::after {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* Auch für Vimeo */
.flex-control-thumbs li img[src*="vimeocdn.com"]::before,
.flex-control-thumbs li img[src*="i.vimeocdn.com"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 15px solid rgba(255, 255, 255, 0.9);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    z-index: 10;
    pointer-events: none;
    transition: all 0.3s ease;
}

.flex-control-thumbs li img[src*="vimeocdn.com"]::after,
.flex-control-thumbs li img[src*="i.vimeocdn.com"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    z-index: 9;
    pointer-events: none;
    transition: all 0.3s ease;
}

.flex-control-thumbs li:hover img[src*="vimeocdn.com"]::before,
.flex-control-thumbs li:hover img[src*="i.vimeocdn.com"]::before {
    border-left-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.flex-control-thumbs li:hover img[src*="vimeocdn.com"]::after,
.flex-control-thumbs li:hover img[src*="i.vimeocdn.com"]::after {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* Video-Pfeile für YouTube-Thumbnails - Fallback-Lösung */
.flex-control-thumbs li {
    position: relative;
}

/* Für Browser mit :has() Support */
@supports selector(:has(*)) {
    .flex-control-thumbs li:has(img[src*="img.youtube.com"])::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-left: 15px solid rgba(255, 255, 255, 0.9);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        z-index: 10;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .flex-control-thumbs li:has(img[src*="img.youtube.com"])::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        z-index: 9;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .flex-control-thumbs li:has(img[src*="img.youtube.com"]):hover::before {
        border-left-color: rgba(255, 255, 255, 1);
        transform: translate(-50%, -50%) scale(1.1);
    }

    .flex-control-thumbs li:has(img[src*="img.youtube.com"]):hover::after {
        background: rgba(0, 0, 0, 0.8);
        transform: translate(-50%, -50%) scale(1.05);
    }

    /* Auch für Vimeo */
    .flex-control-thumbs li:has(img[src*="vimeocdn.com"])::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-left: 15px solid rgba(255, 255, 255, 0.9);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        z-index: 10;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .flex-control-thumbs li:has(img[src*="vimeocdn.com"])::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        z-index: 9;
        pointer-events: none;
        transition: all 0.3s ease;
    }
}

/* Fallback für Browser ohne :has() Support - JavaScript erforderlich */
@supports not (selector(:has(*))) {
    .flex-control-thumbs li.has-video-thumb::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-left: 15px solid rgba(255, 255, 255, 0.9);
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        z-index: 10;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .flex-control-thumbs li.has-video-thumb::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        z-index: 9;
        pointer-events: none;
        transition: all 0.3s ease;
    }
}

/* Cursor für Video-Thumbnails */
.flex-control-thumbs li:has(img[src*="img.youtube.com"]),
.flex-control-thumbs li:has(img[src*="vimeocdn.com"]),
.flex-control-thumbs li.has-video-thumb {
    cursor: pointer;
}

/*# sourceMappingURL=style.min.css.map*/