.lg-object{
	max-width: 600px !important;
}
@media only screen and (max-width: 560px) {
	.lg-object{
		max-width: 100% !important;
	}
}

/* Estilos responsive para vinos - mantener columna única en móviles */
@media only screen and (max-width: 768px) {
    /* Vinos en columna única para móviles */
    .menu-wrapper.single-menu .hero-menu-item.vino-impar,
    .menu-wrapper.single-menu .hero-menu-item.vino-par {
        width: 100% !important;
        float: left !important;
        padding-right: 0 !important;
        padding-left: 20px !important;
        clear: none !important;
    }
    
    /* Mantener imagen a la izquierda para ambos */
    .menu-wrapper.single-menu .hero-menu-item.vino-par .hero-menu-item-img,
    .menu-wrapper.single-menu .hero-menu-item.vino-impar .hero-menu-item-img {
        left: 0 !important;
        position: relative !important;
        float: left !important;
    }
    
    /* Ajustar el contenedor de título */
    .menu-wrapper.single-menu .hero-menu-item .hero-menu-item-title {
        float: right !important;
        text-align: left !important;
        width: calc(100% - 90px) !important;
    }
}

/* Fix para usar clases específicas en lugar de nth-child */
/* Aplica tanto a vista por zonas como por subcategorías */

/* Excluir headers y separadores del layout de columnas */
.vista-subcategorias .subcategoria-header,
.vista-subcategorias .separador-subcategoria,
.vista-subcategorias .categoria-principal-header,
.vista-subcategorias .separador-categoria-principal,
.menu-wrapper-title.fl-wrap,
.menu-wrapper .menu-wrapper-title,
#menu-section-1 .menu-wrapper-title,
#menu-section-2 .menu-wrapper-title,
#menu-section-3 .menu-wrapper-title,
#menu-section-4 .menu-wrapper-title,
#menu-section-5 .menu-wrapper-title,
#menu-section-6 .menu-wrapper-title {
    clear: both;
    width: 100%;
    float: none;
    display: block;
}

/* Asegurar altura correcta para headers de subcategorías */
.vista-subcategorias .menu-wrapper-title {
    position: relative;
    overflow: hidden;
}

/* Propiedades base para todos los hero-menu-item */
.menu-wrapper.single-menu .hero-menu-item {
    width: 50%;
    float: left;
    margin-bottom: 20px;
}

/* Asegurar que solo los vinos participan en el layout de columnas */
.menu-wrapper.single-menu > *:not(.hero-menu-item) {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Vinos impares (columna izquierda) - comportamiento por defecto */
.menu-wrapper.single-menu .hero-menu-item.vino-impar {
    padding-right: 20px;
    padding-left: 90px;
    clear: left;
}

/* Vinos pares (columna derecha) - comportamiento de :nth-child(even) */
.menu-wrapper.single-menu .hero-menu-item.vino-par {
    padding-right: 0;
    padding-left: 100px;
}

/* Ajuste de posición de imagen para vinos pares */
.menu-wrapper.single-menu .hero-menu-item.vino-par .hero-menu-item-img {
    left: 0;
}

/* Círculo de subcategoría para vista por zonas */
.circulo-subcategoria {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 35px;
}

/* Cuando no hay botón de descripción, ajustar posición */
.circulo-subcategoria.sin-boton {
    right: 0;
}

/* Asegurar que el contenedor padre tenga position relative */
.hero-menu-item {
    position: relative;
}

/* Ajuste específico para vinos impares */
.hero-menu-item.vino-impar .circulo-subcategoria {
    right: 55px;
}

/* Ajuste para vinos impares sin botón */
.hero-menu-item.vino-impar .circulo-subcategoria.sin-boton {
    right: 20px;
}

/* En móviles, todos los círculos a la misma distancia */
@media only screen and (max-width: 768px) {
    .hero-menu-item.vino-impar .circulo-subcategoria,
    .hero-menu-item.vino-par .circulo-subcategoria {
        right: 35px;
    }
    
    .hero-menu-item.vino-impar .circulo-subcategoria.sin-boton,
    .hero-menu-item.vino-par .circulo-subcategoria.sin-boton {
        right: 0;
    }
}

/* ScrollNav para vista de subcategorías - mismos estilos que scroll-nav */
.scroll-nav-subcategorias {
    position: fixed !important;
    top: 35% !important;
    right: 20px !important;
    z-index: 20 !important;
    width: 6px !important;
}

.scroll-nav-subcategorias li {
    width: 6px;
    float: left;
    margin-bottom: 14px;
}

.scroll-nav-subcategorias li a {
    float: left;
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 50%;
    position: relative;
}

.scroll-nav-subcategorias li a span {
    position: absolute;
    right: 100%;
    margin-right: 20px;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    min-width: 150px;
    background: #292929;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease-in-out;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Tajawal', sans-serif;
    color: #ad9010;
    padding: 0 20px;
    text-align: center;
}

.scroll-nav-subcategorias li a:before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border-radius: 100%;
    border: 1px solid #ad9010;
    transform: scale(0.0);
    opacity: 0;
    transition: all .2s ease-in-out;
}

.scroll-nav-subcategorias li a.act-scrlink,
.scroll-nav-subcategorias li a:hover {
    background: #666;
}

.scroll-nav-subcategorias li a.act-scrlink:before {
    transform: scale(1.0);
    opacity: 1;
}

.scroll-nav-subcategorias li a:hover span {
    opacity: 1;
    visibility: visible;
}

/* Estilos adicionales para color y texto */
.scroll-nav-subcategorias li a:before {
    border-color: #ad9010 !important;
}

.scroll-nav-subcategorias li a.act-scrlink:before {
    border-color: #ad9010 !important;
}

/* Lista sin estilo */
.scroll-nav-subcategorias ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Forzar posicionamiento correcto */
.scroll-nav-subcategorias {
    right: 20px !important;
    position: fixed !important;
}

/* Botón reset filtros */
.reset-filters-btn {
    background-color: #fffbea; /* Mismo fondo amarillo claro que los selectores */
    color: #ad9010; /* Icono dorado */
    border: 1px solid #ad9010; /* Borde dorado */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400 !important; /* Forzar menos grosor para coherencia con bordes de selectores */
    transition: opacity 0.3s ease;
    vertical-align: middle;
}

.reset-filters-btn:active {
    opacity: 0.8;
}

/* Forzar font-weight específico para el icono Font Awesome dentro del botón */
.reset-filters-btn .fas,
.reset-filters-btn i {
    font-weight: 400 !important;
}

/* Alinear botón con los selectores */
.vista-selector-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Círculos de zona en vista por subcategorías */
.hero-menu-item .circulo-zona {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background-color: #ddd !important;
    color: #292929 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 35px !important;
    top: 35px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
}

.hero-menu-item .circulo-zona:hover {
    opacity: 0.8 !important;
}

/* Vinos PARES con botón */
.hero-menu-item.vino-par .circulo-zona {
    right: 35px !important;
}

/* Vinos PARES sin botón */
.hero-menu-item.vino-par .circulo-zona.sin-boton {
    right: 0 !important;
}

/* Vinos IMPARES con botón */
.hero-menu-item.vino-impar .circulo-zona {
    right: 36px !important;
}

/* Vinos IMPARES sin botón */
.hero-menu-item.vino-impar .circulo-zona.sin-boton {
    right: 5px !important;
}

/* En móviles, misma distancia para círculos de zona */
@media only screen and (max-width: 768px) {
    .hero-menu-item.vino-impar .circulo-zona,
    .hero-menu-item.vino-par .circulo-zona {
        right: 35px !important;
    }
    
    .hero-menu-item.vino-impar .circulo-zona.sin-boton,
    .hero-menu-item.vino-par .circulo-zona.sin-boton {
        right: 0 !important;
    }
}

/* Tooltip personalizado para círculos de subcategoría */
.tooltip-subcategoria {
    position: absolute;
    bottom: 45px; /* Posicionado arriba del círculo */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(5px);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Flecha del tooltip */
.tooltip-subcategoria::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Estado visible del tooltip */
.tooltip-subcategoria.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Variante del tooltip para cuando se posiciona abajo */
.tooltip-subcategoria.below {
    bottom: auto;
    top: 45px;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip-subcategoria.below.visible {
    transform: translateX(-50%) translateY(0);
}

.tooltip-subcategoria.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

/* Responsivo para móviles - tooltips más pequeños */
@media only screen and (max-width: 768px) {
    .tooltip-subcategoria {
        font-size: 12px;
        padding: 6px 10px;
        bottom: 40px;
    }
    
    .tooltip-subcategoria.below {
        top: 40px;
    }
}

/* Tooltip personalizado para círculos de zona */
.tooltip-zona {
    position: absolute;
    bottom: 45px; /* Posicionado arriba del círculo */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(5px);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Flecha del tooltip zona */
.tooltip-zona::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(40, 40, 40, 0.95);
}

/* Estado visible del tooltip zona */
.tooltip-zona.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Variante del tooltip zona para cuando se posiciona abajo */
.tooltip-zona.below {
    bottom: auto;
    top: 45px;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip-zona.below.visible {
    transform: translateX(-50%) translateY(0);
}

.tooltip-zona.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(40, 40, 40, 0.95);
}

/* Responsivo para móviles - tooltips zona más pequeños */
@media only screen and (max-width: 768px) {
    .tooltip-zona {
        font-size: 12px;
        padding: 6px 10px;
        bottom: 40px;
    }
    
    .tooltip-zona.below {
        top: 40px;
    }
}

/* Tooltip personalizado para botón Reset */
.tooltip-reset {
    position: absolute;
    bottom: 50px; /* Posicionado arriba del botón */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(173, 144, 16, 0.95); /* Color dorado como el botón */
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(5px);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(173, 144, 16, 0.3);
}

/* Flecha del tooltip reset */
.tooltip-reset::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(173, 144, 16, 0.95);
}

/* Estado visible del tooltip reset */
.tooltip-reset.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Variante del tooltip reset para cuando se posiciona abajo */
.tooltip-reset.below {
    bottom: auto;
    top: 50px;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip-reset.below.visible {
    transform: translateX(-50%) translateY(0);
}

.tooltip-reset.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(173, 144, 16, 0.95);
}

/* Necesitamos que el botón reset tenga position relative para el tooltip */
.reset-filters-btn {
    position: relative;
}

/* REDUCCIÓN ESPECÍFICA: -50px entre separador y header */

/* REDUCCIÓN MODERADA DE ALTURA DE HEADERS DE SUBCATEGORÍAS */
.vista-subcategorias .subcategoria-header .menu-wrapper-title {
    height: 80px !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}



/* Truncado CSS para títulos de vinos - NO interfiere con funcionalidad */
.hero-menu-item-title.fl-wrap h6 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 92% !important;
    display: block !important;
}

.vista-subcategorias .subcategoria-header .menu-wrapper-title-item {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.vista-subcategorias .subcategoria-header .menu-wrapper-title h4 {
    margin: 0 !important;
    padding: 3px 0 0 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
}