/**
 * MEBAC Mega Menu - Estilos como WoodMart
 * Solo ajustes para scroll, el resto usa estilos nativos de WoodMart
 *
 * @package MEBAC_Mega_Menu
 */

/* ========================================
   SCROLL EN EL DROPDOWN
   ======================================== */

.sub-menu-dropdown {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Scrollbar Chrome/Safari/Edge */
.sub-menu-dropdown::-webkit-scrollbar {
    width: 6px;
}

.sub-menu-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sub-menu-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.sub-menu-dropdown::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Scrollbar Firefox */
.sub-menu-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ========================================
   RESET: Evitar que CSS de descripciones
   afecte las listas del mega menu
   ======================================== */

/* Reset para .wd-sub-menu (mega menu) */
ul.wd-sub-menu li,
ul.wd-sub-menu > li,
.wd-sub-menu li {
    position: static !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Reset para .sub-sub-menu (subcategorias) */
ul.sub-sub-menu li,
ul.sub-sub-menu > li,
.sub-sub-menu li {
    position: static !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Quitar el checkmark (tilde) de TODAS las listas del mega menu */
ul.wd-sub-menu li::before,
ul.wd-sub-menu > li::before,
.wd-sub-menu li::before,
ul.sub-sub-menu li::before,
ul.sub-sub-menu > li::before,
.sub-sub-menu li::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Reset hover */
ul.wd-sub-menu li:hover,
.wd-sub-menu li:hover,
ul.sub-sub-menu li:hover,
.sub-sub-menu li:hover {
    background: none !important;
    background-color: transparent !important;
}

/* ========================================
   VISTOS RECIENTEMENTE
   ========================================
   Clase .mebac-rv-carousel agregada via JS
   a carruseles con título "Vistos Recientemente"

   Estilos copiados del layout del plugin para
   uniformidad en toda la página.
   ======================================== */

/* Desktop: flechas ocultas por defecto, visibles en hover */
@media (min-width: 1025px) {
    .mebac-rv-carousel .wd-nav-arrows .wd-btn-arrow {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    .mebac-rv-carousel:hover .wd-nav-arrows .wd-btn-arrow {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Tablet/Mobile: flechas siempre visibles, sin animación */
@media (max-width: 1024px) {
    .mebac-rv-carousel .wd-nav-arrows .wd-btn-arrow {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }
}

/* Posicionar flechas en los bordes - misma distancia para ambas */
.mebac-rv-carousel .wd-btn-arrow.wd-prev,
.mebac-rv-carousel .wd-nav-arrows .wd-btn-arrow.wd-prev,
.mebac-rv-carousel .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-prev {
    left: -15px !important;
}

.mebac-rv-carousel .wd-btn-arrow.wd-next,
.mebac-rv-carousel .wd-nav-arrows .wd-btn-arrow.wd-next,
.mebac-rv-carousel .wd-nav-arrows.wd-pos-sep .wd-btn-arrow.wd-next {
    right: -15px !important;
}

/* ===== Tarjetas uniformes (como en el layout del plugin) ===== */
/* Producto ocupa todo el ancho del item */
.mebac-rv-carousel .wd-carousel .wd-product {
    width: 100% !important;
}

.mebac-rv-carousel .wd-carousel .product-wrapper {
    width: 100% !important;
    background-color: #ffffff !important;
    padding: 18px !important;
    border-radius: var(--wd-brd-radius, 10px) !important;
}

/* Fondo blanco para productos */
.mebac-rv-carousel .wd-products-with-bg,
.mebac-rv-carousel .wd-products-with-bg .wd-product {
    --wd-prod-bg: #ffffff !important;
    --wd-prod-bg-sp: 18px !important;
}

/* ===== Tarjeta clickeable con hover ===== */
.mebac-rv-carousel .product-wrapper {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mebac-rv-carousel .product-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Título: truncar con elipsis */
.mebac-rv-carousel .wd-entities-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 150px;
}

/* ========================================
   TARJETAS DE PRODUCTOS - ALTURA UNIFORME
   ========================================
   Aplica a tarjetas con botón "Añadir al carrito"
   (clase wd-hover-fw-button)

   NO aplica a:
   - Carruseles de Vistos Recientemente (usan wd-hover-small)
   - Carruseles de categorías (no tienen wd-hover-fw-button)
   ======================================== */

/* Producto con altura 100% */
.wd-product.wd-hover-fw-button {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product wrapper: flexbox columna para distribuir contenido */
.wd-product.wd-hover-fw-button > .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

/* Contenido inferior: expandir para llenar espacio */
.wd-product.wd-hover-fw-button .product-element-bottom {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Precio: empujar hacia abajo para alinearse con otras tarjetas */
.wd-product.wd-hover-fw-button .product-element-bottom .wd-product-price,
.wd-product.wd-hover-fw-button .product-element-bottom > .price {
    margin-top: auto !important;
}

/* Botón de agregar al carrito: sin margin-top auto (el precio ya lo hace) */
.wd-product.wd-hover-fw-button .wd-add-btn {
    margin-top: 0 !important;
}

/* ===== Carruseles con wd-hover-fw-button: altura uniforme ===== */
/* El item del carrusel necesita height 100% para que funcione el flexbox */
.wd-carousel-item:has(.wd-hover-fw-button) {
    display: flex !important;
}

/* Fallback para navegadores sin :has() - aplicar a todos los items */
@supports not selector(:has(*)) {
    .wd-carousel-item {
        display: flex !important;
    }
}

/* ========================================
   PRODUCTOS RESPONSIVE - 5 en PC, 4 en Mobile
   ========================================
   Aplica a:
   - [mebac_bestsellers] (home)
   - [mebac_archive_layout] (carruseles de categorias)

   NO aplica a:
   - Vistos Recientemente
   - Otros carruseles de WoodMart
   ======================================== */

/* Desktop (>=769px): ocultar del 6to en adelante (mostrar 5) */
@media (min-width: 769px) {
    .mebac-bestsellers-wrap .products > .product:nth-child(n+6),
    .mebac-layout-products .products > .product:nth-child(n+6),
    .mebac-layout-products .wd-products > .wd-product:nth-child(n+6) {
        display: none !important;
    }
}

/* Mobile (<769px): mostrar 4 productos */
@media (max-width: 768px) {
    /* Ocultar del 5to en adelante */
    .mebac-bestsellers-wrap .products > .product:nth-child(n+5),
    .mebac-layout-products .products > .product:nth-child(n+5),
    .mebac-layout-products .wd-products > .wd-product:nth-child(n+5) {
        display: none !important;
    }
}

/* ========================================
   BESTSELLERS - Estilo igual a layouts
   ========================================
   Replica el estilo de los carruseles de
   archive layouts: fondo blanco, espaciado,
   gap entre productos, etc.
   ======================================== */

/* Contenedor principal */
.mebac-bestsellers-wrap {
    margin-bottom: 40px;
}

/* Grilla de productos: mismo estilo que layouts */
.mebac-bestsellers-wrap .products {
    --wd-prod-bg: #ffffff !important;
    --wd-prod-bg-sp: 18px !important;
    --wd-gap-lg: 20px !important;
    --wd-gap-sm: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

/* Tablet: 3 columnas */
@media (max-width: 1024px) {
    .mebac-bestsellers-wrap .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: 2 columnas */
@media (max-width: 768px) {
    .mebac-bestsellers-wrap .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Producto individual: fondo blanco con padding */
.mebac-bestsellers-wrap .products .product .product-wrapper {
    background-color: #ffffff !important;
    padding: 18px !important;
    border-radius: var(--wd-brd-radius, 10px) !important;
}

/* Quitar estilos por defecto de WooCommerce que interfieren */
.mebac-bestsellers-wrap .products .product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ===== Altura uniforme (igual que layouts) ===== */
/* Producto con altura 100% del grid cell */
.mebac-bestsellers-wrap .products .product,
.mebac-bestsellers-wrap .products .wd-product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product wrapper: flexbox columna para distribuir contenido */
.mebac-bestsellers-wrap .products .product > .product-wrapper,
.mebac-bestsellers-wrap .products .wd-product > .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

/* Contenido inferior: expandir para llenar espacio */
.mebac-bestsellers-wrap .products .product .product-element-bottom,
.mebac-bestsellers-wrap .products .wd-product .product-element-bottom {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Precio: empujar hacia abajo */
.mebac-bestsellers-wrap .products .product .wd-product-price,
.mebac-bestsellers-wrap .products .wd-product .wd-product-price,
.mebac-bestsellers-wrap .products .product .price,
.mebac-bestsellers-wrap .products .wd-product .price {
    margin-top: auto !important;
}

/* Boton de agregar al carrito: sin margin-top auto (el precio ya lo hace) */
.mebac-bestsellers-wrap .products .product .wd-add-btn,
.mebac-bestsellers-wrap .products .wd-product .wd-add-btn {
    margin-top: 0 !important;
}

/* Variables WoodMart para productos con fondo */
.mebac-bestsellers-wrap .products.wd-products-with-bg,
.mebac-bestsellers-wrap .products.wd-products-with-bg .wd-product {
    --wd-prod-bg: #ffffff !important;
    --wd-prod-bg-sp: 18px !important;
}

/* ========================================
   NEW ARRIVALS - Últimos Ingresos
   ========================================
   Muestra productos nuevos + los que volvieron
   a tener stock. 4 columnas en desktop y mobile.
   ======================================== */

/* Contenedor principal */
.mebac-new-arrivals-wrap {
    margin-bottom: 40px;
}

/* Grilla de productos: 4 columnas */
.mebac-new-arrivals-wrap .products {
    --wd-prod-bg: #ffffff !important;
    --wd-prod-bg-sp: 18px !important;
    --wd-gap-lg: 20px !important;
    --wd-gap-sm: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

/* Tablet: 3 columnas */
@media (max-width: 1024px) {
    .mebac-new-arrivals-wrap .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: 2 columnas */
@media (max-width: 768px) {
    .mebac-new-arrivals-wrap .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Producto individual: fondo blanco con padding */
.mebac-new-arrivals-wrap .products .product .product-wrapper {
    background-color: #ffffff !important;
    padding: 18px !important;
    border-radius: var(--wd-brd-radius, 10px) !important;
}

/* Quitar estilos por defecto de WooCommerce que interfieren */
.mebac-new-arrivals-wrap .products .product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ===== Altura uniforme (igual que bestsellers) ===== */
/* Producto con altura 100% del grid cell */
.mebac-new-arrivals-wrap .products .product,
.mebac-new-arrivals-wrap .products .wd-product {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product wrapper: flexbox columna para distribuir contenido */
.mebac-new-arrivals-wrap .products .product > .product-wrapper,
.mebac-new-arrivals-wrap .products .wd-product > .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

/* Contenido inferior: expandir para llenar espacio */
.mebac-new-arrivals-wrap .products .product .product-element-bottom,
.mebac-new-arrivals-wrap .products .wd-product .product-element-bottom {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Precio: empujar hacia abajo */
.mebac-new-arrivals-wrap .products .product .wd-product-price,
.mebac-new-arrivals-wrap .products .wd-product .wd-product-price,
.mebac-new-arrivals-wrap .products .product .price,
.mebac-new-arrivals-wrap .products .wd-product .price {
    margin-top: auto !important;
}

/* Boton de agregar al carrito: sin margin-top auto (el precio ya lo hace) */
.mebac-new-arrivals-wrap .products .product .wd-add-btn,
.mebac-new-arrivals-wrap .products .wd-product .wd-add-btn {
    margin-top: 0 !important;
}

/* Variables WoodMart para productos con fondo */
.mebac-new-arrivals-wrap .products.wd-products-with-bg,
.mebac-new-arrivals-wrap .products.wd-products-with-bg .wd-product {
    --wd-prod-bg: #ffffff !important;
    --wd-prod-bg-sp: 18px !important;
}


/* ========================================
   PROMO BANNERS - Legibilidad del texto
   ========================================
   Gradient overlay oscuro sobre la imagen
   para garantizar contraste del texto sobre
   imágenes claras.

   Estructura HTML de WoodMart:
   .promo-banner-wrapper
     .promo-banner
       .main-wrapp-img > .banner-image > img
       .wrapper-content-banner.wd-fill
         .content-banner
           .banner-subtitle (texto directo)
           h4.banner-title (texto directo)
           .banner-btn-wrapper
   ======================================== */

/* Overlay gradient sobre la imagen - Desktop: izquierda a derecha */
.promo-banner-wrapper .main-wrapp-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.30) 35%,
        rgba(0, 0, 0, 0.08) 65%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Mobile: gradient de abajo hacia arriba (texto ocupa mas ancho) */
@media (max-width: 767px) {
    .promo-banner-wrapper .main-wrapp-img::after {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.35) 40%,
            rgba(0, 0, 0, 0.10) 70%,
            transparent 100%
        );
    }
}

/* Asegurar position relative en el contenedor de imagen */
.promo-banner-wrapper .main-wrapp-img {
    position: relative;
}

/* Título: blanco con sombra fuerte (legible sobre fondos claros) */
.promo-banner-wrapper .banner-title {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 0, 0, 0.5);
}

/* Subtítulo y contenido: blanco con sombra fuerte */
.promo-banner-wrapper .banner-subtitle,
.promo-banner-wrapper .banner-inner {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(0, 0, 0, 0.5);
}

/* Subtítulo: peso liviano */
.promo-banner-wrapper .banner-subtitle {
    font-weight: 400 !important;
}

/* Mobile: altura minima para banners con imagenes panoramicas/cortas */
@media (max-width: 767px) {
    .promo-banner-wrapper .main-wrapp-img .banner-image img {
        min-height: 200px;
        object-fit: cover;
    }
}