/**
 * TGD Product Badges — Estilos del Frontend
 *
 * Etiqueta tipo banner en esquina superior izquierda sobre la imagen del producto.
 * Compatible con WooCommerce + Hello Elementor + JetEngine.
 *
 * @package TGD_Product_Badges
 * @since   1.0.0
 * @updated 1.1.0 — Tamaño aumentado para igualar etiqueta nativa de WooCommerce;
 *                   ocultación de la etiqueta nativa de "¡Oferta!".
 * @updated 1.2.0 — Soporte para listados construidos con JetEngine (Listing Grid).
 * @updated 1.3.0 — Rediseño: banner rojo esquina superior izquierda;
 *                   soporte universal (Elementor, widgets, shortcodes);
 *                   ordenamiento automático de productos con etiqueta.
 * @updated 1.4.1 — Fix: badge contenido dentro de la tarjeta del producto;
 *                   z-index reducido para no solapar header/navegación;
 *                   overflow: hidden en contenedores de imagen.
 * @updated 1.4.2 — Fix: overflow:hidden en jet-listing-grid__item para evitar
 *                   que badges de overlay (jedv) sobresalgan al hacer scroll;
 *                   z-index reducido a 1 en badges.
 */

/* ── Contenedor de la galería — necesita position relativa ── */
.woocommerce div.product div.images,
.woocommerce-product-gallery {
    position: relative;
    overflow: hidden;
}

/* ── Etiqueta principal — Banner esquina superior izquierda ── */
.tgd-product-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    padding: 10px 28px;
    border-radius: 0;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Animación de entrada sutil */
    animation: tgdBadgeFadeIn 0.4s ease-out;
}

/* ── Animación de entrada ── */
@keyframes tgdBadgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive: Tablets ── */
@media (max-width: 768px) {
    .tgd-product-badge {
        padding: 8px 20px;
        font-size: 15px;
        letter-spacing: 0.8px;
    }
}

/* ── Responsive: Móviles ── */
@media (max-width: 480px) {
    .tgd-product-badge {
        padding: 7px 14px;
        font-size: 14px;
        letter-spacing: 0.6px;
    }
}

/* ── Compatibilidad con Hello Elementor / Elementor Pro ── */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
    position: relative;
    overflow: hidden;
}

/* Contenedores internos de la galería */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
 * v1.1.0 — Ocultar la etiqueta nativa de "¡Oferta!" de WooCommerce
 * Se gestiona desde el plugin para que el cliente pueda añadir
 * sus propias etiquetas de oferta personalizadas.
 * ══════════════════════════════════════════════════════════════ */
.woocommerce span.onsale,
span.onsale {
    display: none !important;
}

/* ── Etiqueta en listados de productos (tienda / categoría) ── */
.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .tgd-product-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    border-radius: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Contenedores de imagen en listados — overflow visible ── */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
 * v1.2.0 — Soporte para listados construidos con JetEngine
 * ══════════════════════════════════════════════════════════════ */

/* ── Contenedor del item de JetEngine — posición relativa + overflow hidden ── */
/* overflow:hidden evita que los badges de overlay (jedv-enabled) sobresalgan
   del card al hacer scroll detrás del header sticky/fixed */
.jet-listing-grid__item {
    position: relative;
    overflow: hidden;
}

/* ── Overlay wrap de JetEngine — también necesita overflow hidden ── */
.jet-engine-listing-overlay-wrap {
    overflow: hidden;
}

/* ── Contenedores de imagen dentro de JetEngine ── */
.jet-listing-grid__item .jet-listing-dynamic-image,
.jet-listing-grid__item .jet-woo-builder-archive-product-image {
    position: relative;
    overflow: hidden;
}

/* ── Contenedor de imagen Elementor dentro de JetEngine ── */
.jet-listing-grid__item .elementor-widget-image {
    position: relative;
    overflow: hidden;
}

/* ── Badge inyectado dinámicamente en JetEngine ── */
.jet-listing-grid__item .tgd-product-badge-jet {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: tgdBadgeFadeIn 0.4s ease-out;
}

/* ── Responsive: Tablets — JetEngine ── */
@media (max-width: 768px) {
    .jet-listing-grid__item .tgd-product-badge-jet {
        padding: 6px 14px;
        font-size: 12px;
        letter-spacing: 0.7px;
    }
}

/* ── Responsive: Móviles — JetEngine ── */
@media (max-width: 480px) {
    .jet-listing-grid__item .tgd-product-badge-jet {
        padding: 5px 10px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }
}

/* ══════════════════════════════════════════════════════════════
 * v1.3.0 — Soporte universal: Elementor widgets, shortcodes, etc.
 * ══════════════════════════════════════════════════════════════ */

/* ── Elementor Products widget ── */
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-wc-products ul.products li.product,
.elementor-widget-woocommerce-product-related ul.products li.product {
    position: relative;
}

/* ── WooCommerce shortcode products ── */
.woocommerce.columns-1 li.product,
.woocommerce.columns-2 li.product,
.woocommerce.columns-3 li.product,
.woocommerce.columns-4 li.product,
.woocommerce.columns-5 li.product,
.woocommerce.columns-6 li.product {
    position: relative;
}

/* ── Productos relacionados y upsells ── */
.woocommerce .related.products ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
    position: relative;
}

/* ── Widgets de WooCommerce ── */
.widget_products .product_list_widget li,
.widget_recently_viewed_products .product_list_widget li,
.widget_top_rated_products .product_list_widget li {
    position: relative;
}

.widget_products .product_list_widget li .tgd-product-badge,
.widget_recently_viewed_products .product_list_widget li .tgd-product-badge,
.widget_top_rated_products .product_list_widget li .tgd-product-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    border-radius: 0;
}