@media (max-width: 768px) {
    .woocommerce ul.products {
        display: flex;
        flex-direction: column;
    }

    .woocommerce ul.products li.product {
        width: 100%;
    }
}

/* Asegura overlay en todo tipo de grid */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template { position: relative; }

/* Badge "Nueva" a la IZQUIERDA (arriba) */
.vp-badge-new{
  position: absolute;
  top: .5rem; left: .5rem; right: auto;
  background: var(--vp-badge-new-bg, #D32F23); /* tu color */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: .45rem .65rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
  z-index: 20;
}

/* En la página individual, un poco más separada del borde */
.vp-badge-single{ top: 1rem; left: 1rem; right: auto; }

/* Mueve la burbuja de oferta al lado derecho para que no se superpongan */ .woocommerce span.onsale{ right: .5rem; left: auto; }



/* Badge "Nueva" bien arriba, pegado al borde */
.woocommerce .vp-badge-new{
  top: -0.5rem !important;
  right: rem !important;  /* si lo quieres arriba-derecha */
  left: auto !important;
  bottom: auto !important;
  z-index: 5;
}




/* ================================
   BADGE BLACK FRIDAY (FINAL)
   Astra + abajo izquierda
   ================================ */

/* Estilo del badge */
.vp-badge-bf{
  position: absolute !important;
  z-index: 9999 !important;
  background: #000;     /* negro */
  color: #fff;          /* letras blancas */
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px; /* pill */
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

/* =========================================
   FIX ASTRA: anclar badge a la miniatura
   ========================================= */

/* La miniatura debe ser el "padre" relativo */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position: relative !important;
  overflow: visible !important;
}

/* Evita que el wrapper del título sea referencia */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link{
  position: static !important;
}

/* =========================================
   POSICIÓN: ABAJO A LA IZQUIERDA
   ========================================= */

/* Tienda / categorías */
.woocommerce ul.products li.product .vp-badge-bf{
  top: auto !important;
  right: auto !important;
  bottom: 11px !important;
  left: -5px !important;
}

/* ============================
   SINGLE PRODUCT (FIX REAL)
   ============================ */

/* Hacemos relativos TODOS los posibles contenedores de imagen en single */
.single-product div.product,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .astra-woo-product-gallery,
.single-product .flex-viewport{
  position: relative !important;
  overflow: visible !important;
}

/* Forzamos el badge abajo izquierda en single,
   con selectores de respaldo por si cambia el DOM */
.single-product .vp-badge-bf,
.single-product .vp-badge-bf.vp-badge-single,
.single-product div.product .vp-badge-bf{
  top: auto !important;
  right: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  z-index: 9999 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Móvil en single */
@media (max-width: 768px){
  .single-product .vp-badge-bf,
  .single-product .vp-badge-bf.vp-badge-single{
    bottom: 6px !important;
    left: 6px !important;
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
}