/* ============================================
   WC Product Badges - CSS FINAL
   Versión: 1.3.1
   Fix: Galería funcionando correctamente
   ============================================ */

/* =======================================
   PARTE 1: ESTILOS BASE DEL BADGE
   ======================================= */

.wcpb-badge {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
}

/* Tamaños */
.wcpb-badge.wcpb-size-small { 
    padding: 4px 8px; 
    font-size: 10px; 
}

.wcpb-badge.wcpb-size-medium { 
    padding: 6px 12px; 
    font-size: 12px; 
}

.wcpb-badge.wcpb-size-large { 
    padding: 8px 16px; 
    font-size: 14px; 
}

/* Posiciones */
.wcpb-badge.wcpb-position-top-left { 
    top: 10px; 
    left: 10px; 
}

.wcpb-badge.wcpb-position-top-right { 
    top: 10px; 
    right: 10px; 
}

.wcpb-badge.wcpb-position-bottom-left { 
    bottom: 10px; 
    left: 10px; 
}

.wcpb-badge.wcpb-position-bottom-right { 
    bottom: 10px; 
    right: 10px; 
}

/* Formas */
.wcpb-badge.wcpb-shape-rounded { 
    border-radius: 4px; 
}

.wcpb-badge.wcpb-shape-square { 
    border-radius: 0; 
}

.wcpb-badge.wcpb-shape-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.wcpb-badge.wcpb-shape-ribbon {
    padding-right: 15px;
    border-radius: 0 4px 4px 0;
}

.wcpb-badge.wcpb-shape-ribbon::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid;
    border-left-color: inherit;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    filter: brightness(0.8);
}

.wcpb-badge.wcpb-shape-flag {
    border-radius: 0 0 4px 0;
    padding: 8px 12px;
}

.wcpb-badge.wcpb-shape-flag::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 20px solid transparent;
    border-top: 8px solid;
    border-top-color: inherit;
    filter: brightness(0.7);
}

/* =======================================
   PARTE 2: PÁGINA DE TIENDA
   ======================================= */

/* Contenedor del producto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

/* ShopEngine */
.shopengine-product-item,
.shopengine-grid-item,
.shopengine-product-list-item {
    position: relative;
}

/* Link de imagen - primer link del producto */
.woocommerce ul.products li.product > a:first-child,
.shopengine-product-item > a:first-child,
.shopengine-grid-item > a:first-child {
    position: relative !important;
    display: inline-block !important;
}

/* Contenedor específico de thumbnail */
.shopengine-product-item .product-thumb,
.shopengine-grid-item .product-thumb {
    position: relative;
}

/* Imagen dentro del link */
.woocommerce ul.products li.product a img {
    display: block;
}

/* =======================================
   PARTE 3: SINGLE PRODUCT
   ======================================= */

/* Galería debe tener position relative para badges */
.single-product .woocommerce-product-gallery {
    position: relative;
}

/* Badge que se inserta como hermano de galería */
.single-product .woocommerce-product-gallery + .wcpb-badge,
.single-product .woocommerce-product-gallery .wcpb-badge,
.single-product .shopengine-single-product-image .wcpb-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
}

/* NO tocar nada más de la galería */
/* La galería de WooCommerce maneja su propio CSS */

/* =======================================
   PARTE 4: OCULTAR EN CART Y CHECKOUT
   ======================================= */

/* Ocultar badges en cart */
.woocommerce-cart .wcpb-badge,
.woocommerce-checkout .wcpb-badge,
.cart_item .wcpb-badge,
.mini_cart_item .wcpb-badge,
.widget_shopping_cart .wcpb-badge,
.woocommerce-mini-cart .wcpb-badge {
    display: none !important;
}

/* =======================================
   PARTE 5: HOVER
   ======================================= */

.woocommerce ul.products li.product:hover .wcpb-badge,
.shopengine-product-item:hover .wcpb-badge {
    z-index: 1000;
    opacity: 1;
}

/* =======================================
   PARTE 6: RESPONSIVE
   ======================================= */

@media (max-width: 768px) {
    .wcpb-badge {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .wcpb-badge.wcpb-position-top-right,
    .wcpb-badge.wcpb-position-top-left {
        top: 5px;
    }
    
    .wcpb-badge.wcpb-position-top-right,
    .wcpb-badge.wcpb-position-bottom-right {
        right: 5px;
    }
    
    .wcpb-badge.wcpb-position-top-left,
    .wcpb-badge.wcpb-position-bottom-left {
        left: 5px;
    }
}

@media (max-width: 480px) {
    .wcpb-badge.wcpb-shape-ribbon::after,
    .wcpb-badge.wcpb-shape-flag::before {
        display: none;
    }
    
    .wcpb-badge.wcpb-shape-ribbon,
    .wcpb-badge.wcpb-shape-flag {
        border-radius: 4px;
    }
}

/* =======================================
   PARTE 6: PRODUCTOS RELACIONADOS / WIDGETS
   ======================================= */

/* Widgets de productos en single product */
.single-product .products li.product,
.single-product .elementor-widget-woocommerce-products li.product,
.single-product ul.products li.product {
    position: relative;
}

.single-product .products li.product > a:first-child,
.single-product .elementor-widget-woocommerce-products li.product > a:first-child {
    position: relative;
    display: block;
}

/* Badge en productos relacionados */
.single-product .products .wcpb-badge,
.single-product .elementor-widget-woocommerce-products .wcpb-badge {
    position: absolute;
    z-index: 999;
}