/*
 * Vrein — reglas específicas para el tema Woodmart.
 *
 * Extraídas de vrein-widget.css (que quedó solo con reglas genéricas,
 * válidas en cualquier tema). Este archivo se enqueuea condicionalmente
 * cuando vrein_detect_carousel_mode() === 'woodmart' (ver wc-vrein.php) —
 * en cualquier otro tema estas clases (.vrein-wd-swiper, .wd-*) nunca
 * llegan a existir en el DOM, así que separar el archivo no cambia ningún
 * comportamiento en Woodmart, solo evita bajar ~165 líneas muertas en
 * sitios que no son Woodmart.
 */

/* WoodMart Swiper — estilos del wrapper (antes inyectados via JS inline).
   .vrein-popup-body se agregó porque el swiper de adentro del popup nunca
   tiene un ancestro .vrein-slot-wrapper (usa .vrein-popup-block), así que
   sin esto dependía por completo de que el propio Woodmart cargara su CSS
   base de swiper — cosa que hace de forma distinta por página (confirmado:
   en Home carga, en PDP no). Con esta regla propia, siempre cargada por ser
   nuestro archivo, el popup deja de depender de eso. */
.vrein-slot-wrapper .vrein-wd-swiper,
.vrein-popup-body .vrein-wd-swiper {
    overflow: hidden;
    width: 100%;
}
.vrein-slot-wrapper .vrein-wd-swiper .swiper-wrapper,
.vrein-popup-body .vrein-wd-swiper .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide,
.vrein-popup-body .vrein-wd-swiper .swiper-slide {
    height: auto !important;
    box-sizing: border-box;
    flex-shrink: 0;
}
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide > .wd-product,
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide > li.product,
.vrein-popup-body .vrein-wd-swiper .swiper-slide > .wd-product,
.vrein-popup-body .vrein-wd-swiper .swiper-slide > li.product {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Bloque de descripción "hover fade" de WoodMart (.wd-product-card-hover) e imagen
   alternativa de hover (.wd-product-img-hover): dependen del CSS crítico que el
   tema genera por página, el cual no contempla el carrusel porque se inyecta vía
   AJAX después de esa generación. Sin ese CSS el bloque queda visible siempre y
   rompe la grilla (se ve como ficha de producto apilada). Se oculta a propósito
   solo dentro del carrusel de Vrein — imagen principal, título, precio y botón
   siguen heredando del tema sin tocar nada más. */
.vrein-scroll-track .wd-product-card-hover,
.vrein-scroll-track .wd-product-img-hover {
    display: none !important;
}

/* Mismo motivo que arriba: .product-labels (badge nativo de "-XX%" / envío
   gratis) depende del CSS crítico del tema para quedar superpuesto sobre la
   imagen (position:absolute, medido en grilla nativa: top/left 7px, z-index 1).
   Sin ese CSS queda en flujo normal (static) y empuja el título hacia abajo
   solo en las cards que tienen algún badge, desalineando el resto de la card
   respecto a las que no tienen ninguno. .wd-product-thumb ya trae
   position:relative desde el CSS base del tema, así que alcanza con fijar el
   absolute acá. El badge "¡OPORTUNIDAD!" (YITH) no tiene este problema: ya es
   absolute por su propio plugin, sin depender del crítico de Woodmart. */
.vrein-scroll-track .product-labels {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 1 !important;
}

/* Ícono del botón "Agregar al carrito" en hover: Woodmart lo dibuja vía
   content: var(--wd-btn-icon) en un ::before, pero esa custom property solo
   se define en clases que el tema agrega a sus propias plantillas de shop —
   WooCommerce (wc_get_template_part) nunca las agrega, así que el ::before
   nativo queda sin contenido.

   Probamos primero reusar los <span> del markup (.wd-action-icon/.wd-check-icon),
   pero Woodmart tiene esta regla propia: ".wd-add-btn-replace > a:hover span"
   que mueve CUALQUIER <span> hijo del botón fuera de vista al hacer hover sobre
   el botón mismo (pensada para su propio sistema, pero nos alcanzaba a nosotros
   también por ser también un <span>). Ganarle en especificidad no alcanzaba de
   forma confiable en producción.

   Por eso ahora usamos un pseudo-elemento (::before) propio en vez de un <span>:
   un selector "> a:hover span" JAMÁS puede alcanzar un ::before, porque no es
   un elemento real del DOM — así evitamos el conflicto de raíz, no lo parcheamos. */
.vrein-scroll-track .add_to_cart_button {
    position: relative !important;
}
.vrein-scroll-track .add_to_cart_button:hover .wd-action-text,
.vrein-scroll-track .add_to_cart_button:hover .wd-action-icon {
    opacity: 0 !important;
}
.vrein-scroll-track .add_to_cart_button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}
.vrein-scroll-track .add_to_cart_button:hover::before {
    opacity: 1 !important;
}

/* El <span class="wd-action-icon"> (ícono "check" que Woodmart dibuja dentro
   del botón) también depende del mismo CSS crítico ausente: sin él, queda
   visible siempre en vez de solo aparecer en su propio hover interno, y se
   pisa con el texto "Agregar al carrito". Como ya tenemos nuestro propio
   ícono vía ::before en hover (arriba), lo ocultamos del todo acá. */
.vrein-scroll-track .add_to_cart_button .wd-action-icon {
    display: none !important;
}

/* El link "Ver carrito" (.added_to_cart) que WooCommerce inyecta al lado del
   botón después de un add-to-cart AJAX tampoco tiene diseño propio en este
   carrusel (mismo motivo: sin el CSS crítico del tema) y queda pisado con
   "Agregar al carrito". A pedido, se oculta directamente. Movido acá al
   separar el archivo: en otros temas esto ocultaba sin necesidad el link
   nativo "Ver carrito" que WooCommerce sí sabe mostrar bien por su cuenta. */
.vrein-scroll-track .added_to_cart {
    display: none !important;
}

/* Woodmart dibuja cada card levemente encogida (scale(0.98)) y la vuelve a su
   tamaño normal (scale(1)) al hacer hover, vía su propia clase .state-hover
   agregada por JS. Es un efecto nativo del tema, no un bug — se anula acá
   solo dentro del carrusel de Vrein a pedido explícito. */
.vrein-scroll-track .wd-product-card-bg {
    transform: none !important;
}

/* ============================================================
   VREIN - ALINEACIÓN DE BOTONES AL FONDO (FLEX-GROW FIX) — mitad Woodmart
   (la mitad genérica, válida en cualquier tema, se quedó en vrein-widget.css)
   ============================================================ */

.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide > .wd-product,
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide > li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide .product-wrapper,
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide .wd-product-wrapper {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide .product-element-bottom {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide .wd-bottom-actions,
.vrein-slot-wrapper .vrein-wd-swiper .swiper-slide .wd-add-btn {
    margin-top: auto !important;
}