/* ==========================================================
   1. FILTROS CATALOGO — CORREGIDO
========================================================== */

.catalogo-filtros {
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 20px 0 10px 0; /* Añadimos espacio arriba para que no choque con el header */
    background: #fff;
    z-index: 10; 
}

/* Evita que los dropdowns se corten */
.catalogo-filtros, 
.catalogo-filtros .container,
.catalogo-filtros .d-lg-flex {
    overflow: visible !important;
}

/* Scroll horizontal en móvil */
.filtros-mobile-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px 15px 15px 15px; /* Padding lateral para que los chips no toquen el borde */
    margin: 0; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
}

.filtros-mobile-scroll::-webkit-scrollbar {
    display: none;
}

/* Estilo de los chips en móvil */
.filtros-mobile-scroll .filtro-btn-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #f4f4f4; 
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 14px;
    color: #333;
}

/* ==========================================================
   2. DROPDOWN FILTROS (REGLAS DE LISTA LIMPIAS)
========================================================== */

.dropdown-desktop {
    position: relative; 
}

.dropdown-menu-desktop {
    display: block !important; 
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 8px); 
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ddd;
    
    /* ELIMINAR PUNTOS Y RELLENO NATIVO */
    list-style: none !important; 
    padding: 0 !important;      
    margin: 0 !important;       
    
    z-index: 99999 !important; 
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Forzar eliminación de viñetas en los elementos de lista */
.dropdown-menu-desktop li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-menu-desktop.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu-desktop a {
    display: block;
    padding: 12px 20px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #f8f8f8;
    transition: background .2s ease;
}

.dropdown-menu-desktop li:last-child a {
    border-bottom: none;
}

.dropdown-menu-desktop a:hover {
    background: #f9f9f9;
    color: #000;
}

/* ==========================================================
   3. ORDENAR SELECT
========================================================== */

.ordenar-select-wrapper {
    position: relative;
    display: inline-block;
}

.ordenar-select-wrapper select {
    appearance: none;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 6px 35px 6px 18px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

/* ==========================================================
   4. GALERÍA PRODUCTO
========================================================== */

.gallery-wrapper {
    display: flex;
    gap: 20px;
}

.thumbs-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.thumb-item {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
}

.thumb-item.active {
    border-color: #000;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-image-container {
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.main-image-container img {
    width: 100%;
    display: block;
}

/* 1. Modificamos la descripción para que no se deje aplastar */
.product-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000000 !important;
    
    /* ESTO EVITA EL CORTE */
    height: auto !important;
    min-height: min-content !important; 
    flex-shrink: 0 !important;   /* Obliga a Bootstrap a no encoger este div */
    flex-grow: 1 !important;     /* Le permite tomar el espacio que necesite */
    overflow: visible !important; /* Asegura que si sale algo, sea vea */
    
    margin-bottom: 20px !important;
}

/* 2. Liberamos al padre (Summary) para que pueda crecer hacia abajo */
.product-summary {
    height: auto !important;      /* Anula el h-100 que lo corta */
    min-height: 100% !important;  /* Mantiene el mínimo, pero permite crecer */
    max-height: none !important;  /* Elimina cualquier tope de altura */
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Ajustamos el bloque de botones para que no tape el texto */
.actions-bottom {
    flex-shrink: 0 !important;    /* Los botones mantienen su tamaño */
    margin-top: auto !important;  /* Se mantienen al fondo si hay espacio, sino empujan */
}

/* ==========================================================
   5. TABS / CARACTERÍSTICAS (MEJORADO)
========================================================== */

#resumen-producto {
    border-top: 1px solid #eee;
    background: #fff;
    margin-top: 30px;
}

.selector-resumen-producto {
    border-bottom: 1px solid #eee;
}

.envoltura-resumen-producto {
    display: flex;
    justify-content: center; /* Centrado en desktop */
    align-items: center;
    overflow-x: auto; /* Permite scroll en móvil si es necesario */
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.envoltura-resumen-producto::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
}

.envoltura-producto {
    padding: 20px 30px;
    cursor: pointer;
    position: relative;
    white-space: nowrap; /* Evita que el texto salte de línea */
}

.envoltura-producto h5 {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    margin: 0;
    letter-spacing: 1px;
    transition: color .3s ease;
}

/* Línea indicadora inferior */
.envoltura-producto::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #000;
    transition: width 0.3s ease;
}

/* Estado activo */
.envoltura-producto.active h5 {
    color: #000;
    font-weight: 700;
}

.envoltura-producto.active::after {
    width: 100%;
}

@media (max-width: 991px) {
    .envoltura-resumen-producto {
        justify-content: flex-start; /* Alineado a la izquierda en móvil para el scroll */
        padding: 0 15px;
    }
    .envoltura-producto {
        padding: 15px 20px;
    }
    .envoltura-producto h5 {
        font-size: 12px;
    }
}

/* ==========================================================
   6. CONTENIDO DE LAS TABS (SIN SALTOS)
========================================================== */
.custom-tabs {
    /* Esto evita que el resto de la web se mueva al cambiar de pestaña */
    min-height: 250px; 
    position: relative;
    background: #fff;
	 border-bottom: 1px solid #eee;
}

.tabs-contenido {
    padding: 20px 0 60px;
}

.tab-content-item {
    display: none;
    opacity: 0;
}

.tab-content-item.active {
    display: block !important;
    opacity: 1 !important;
    /* Eliminamos cualquier animación que use transform o translateY */
    animation: simpleFade 0.2s ease-in;
}

@keyframes simpleFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ocultar definitivamente lo de WooCommerce para no duplicar */
.woocommerce-tabs, .wc-tabs, .woocommerce-Tabs-panel, .product-description {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.titulo-seccion {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}
/* ==========================================================
   7. LISTADO DE PRODUCTOS (JERARQUÍA)
========================================================== */

.catalogo-lista {
    position: relative;
    z-index: 1; 
}

.woocommerce .woocommerce-ordering {
    margin: 0!important;
}

/* ==========================================================
   8. PRODUCTOS RELACIONADOS (ESTILO APP - SCROLL HORIZONTAL)
========================================================== */

/* Contenedor principal de la sección relacionados */
.related.products {
    padding: 40px 0;
    overflow: hidden; /* Evita scrolls extraños fuera del área */
}

/* Ocultar el título nativo de WooCommerce por si el PHP falla */
.related.products > h2 {
    display: none !important;
}

/* Forzar el listado a ser una fila horizontal */
.related.products ul.products {
    display: flex !important;
    flex-wrap: nowrap !important; /* Mantiene todo en una sola línea */
    overflow-x: auto !important; /* Habilita el movimiento con el dedo */
    scroll-snap-type: x mandatory; /* Hace que los productos encajen al soltar el dedo */
    gap: 15px; /* Espaciado entre tarjetas */
    padding: 10px 5px 30px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch; /* Suavidad total en iPhone */
    scrollbar-width: none; /* Oculta scrollbar en Firefox */
}

/* Ocultar barra de scroll en Chrome y Safari */
.related.products ul.products::-webkit-scrollbar {
    display: none;
}

/* Ajuste de cada tarjeta de producto (Estilo óptico limpio) */
.related.products ul.products li.product {
    flex: 0 0 240px !important; /* Ancho fijo en escritorio */
    width: 240px !important;
    scroll-snap-align: start; /* El producto se alinea al inicio al scrollear */
    margin: 0 !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px !important;
    transition: transform 0.2s ease;
    list-style: none !important;
}

.related.products ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Ajustes para Celulares (Estilo Facebook App) */
@media (max-width: 768px) {
    /* 1. Forzamos al contenedor a no romper línea y permitir scroll */
    .related.products ul.products {
        display: flex !important;
        flex-wrap: nowrap !important; /* Evita que se vayan hacia abajo */
        overflow-x: auto !important; /* Habilita el scroll lateral */
        scroll-snap-type: x mandatory; /* Hace que el producto se "pegue" al centro al soltarlo */
        -webkit-overflow-scrolling: touch; /* Suavidad extrema en iPhone */
        padding-bottom: 15px !important; /* Espacio para que no se corte la sombra */
        gap: 10px; /* Espacio entre productos sin usar márgenes raros */
    }

    /* 2. Tu código mejorado */
    .related.products ul.products li.product {
        flex: 0 0 180px !important; 
        width: 180px !important;
        scroll-snap-align: start; /* El producto se alinea al inicio al scrollear */
        list-style: none; /* Quita puntos si los hay */
    }

    .related.products {
        margin: 0 !important; /* Limpieza total de márgenes */
        padding: 0 15px !important; /* Margen interno para que el primer producto no toque el borde del vidrio */
    }
}

/* Limpieza de floats nativos de WooCommerce que rompen el diseño */
.related.products ul.products::before,
.related.products ul.products::after {
    display: none !important;
}
/* Esto elimina cualquier bloque de resumen que aparezca en la columna de datos */
.col-lg-7 .woocommerce-checkout-review-order, 
.col-lg-7 #order_review_heading,
.col-lg-7 .shop_table {
    display: none !important;
}

/* Si los datos de facturación salen dobles, oculta el segundo bloque */
.col-lg-7 .checkout-section + .checkout-section .woocommerce-billing-fields {
    display: none !important;
}
/* Matar el bloque moderno nativo */
/* .wp-block-woocommerce-checkout,
.wc-block-checkout__container,
.wc-block-components-sidebar {
    display: none !important;
} */



/* Asegurar que tu contenedor de Bootstrap sea visible */
#checkout.checkout.section {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================
   9. PANEL FILTROS MOBILE (BOTTOM SHEET)
========================================================== */

/* 9. PANEL FILTROS MOBILE - FIX FONDO ESTÁTICO */
#dropdown-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* El fondo oscuro se aplica aquí y no se mueve */
    background: rgba(0, 0, 0, 0); 
    z-index: 10000;
    visibility: hidden;
    transition: background 0.3s ease;
    /* IMPORTANTE: Bloqueamos cualquier transformación en el padre */
    transform: none !important;
}

#dropdown-mobile-panel.active {
    visibility: visible;
    background: rgba(0, 0, 0, 0.6); /* Oscurece toda la pantalla */
}

.dropdown-mobile-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 40px 20px 20px;
    max-height: 85vh;
    overflow-y: auto;
    
    /* TRUCO: Un sombreado blanco gigante hacia abajo para que al 
       deslizar no se vea hueco debajo de la tarjeta */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1), 0 600px 0 0 #fff;

    /* Solo esta parte tendrá el movimiento */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Solo movemos la parte blanca cuando el panel se activa */
#dropdown-mobile-panel.active .dropdown-mobile-inner {
    transform: translateY(0);
}

.dropdown-handle {
    width: 50px;
    height: 6px;
    background: #ccc;
    border-radius: 10px;
    position: absolute;
    top: 15px; /* Bajamos la barra para que se vea sobre el blanco */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    cursor: grab;
}

/* Estilo para los títulos dentro del panel móvil */
/* Ajuste en el título del panel móvil */
.dropdown-mobile-inner h5 {
    font-size: 18px;
    font-weight: 700;
    margin: 15px 0 20px 0; /* Añadimos margen superior para alejarlo del handle */
    color: #000;
    text-align: center;
}

/* Estilo para los links dentro del panel móvil */
.dropdown-mobile-inner ul li a {
    font-size: 16px;
    color: #333;
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
}

.dropdown-mobile-inner ul li:last-child a {
    border-bottom: none;
}

/* Estilo personalizado del botón */
.btn-carrito-optica {
    background-color: #1B2447 !important; /* Tu azul marino principal */
    color: #ffffff !important;            /* Texto blanco siempre */
    border: none !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 15px;                    /* Refuerza el tamaño del btn-sm */
    transition: all 0.3s ease-in-out;
}

/* Efecto Hover */
.btn-carrito-optica:hover {
    background-color: #1E85BE !important; /* Tu azul de hover */
    color: #ffffff !important;
    transform: translateY(-2px);          /* Pequeña elevación */
    box-shadow: 0 4px 10px rgba(30, 133, 190, 0.3); /* Sombra suave del color de hover */
}

/* Ajuste del icono */
.btn-carrito-optica i {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* BOTONES SINGLE PRODUCT */
/* BOTÓN WHATSAPP */
.btn-wsp {
    background-color: transparent !important;
    color: #25D366 !important;
    border: 2px solid #25D366 !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

.btn-wsp:hover {
    background-color: #25D366 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* BOTÓN CONTINUAR COMPRA (SOBREESCRIBIENDO BTN-SECONDARY) */
.actions-bottom .btn-secondary {
    background-color: #1B2447 !important; /* Tu azul marino profundo */
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.actions-bottom .btn-secondary:hover {
    background-color: #1E85BE !important; /* Tu azul brillante de acción */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 133, 190, 0.3);
}

/* AJUSTE PARA MÓVIL: Que no queden pegados */
@media (max-width: 768px) {
    .actions-bottom .btn {
        margin-bottom: 5px;
        padding: 12px 10px; /* Un poco más de área de toque en móvil */
    }
}
/* Ajuste específico para celulares */
@media (max-width: 576px) {
    .btn-carrito-optica {
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* 1. Reducimos un poco la fuente */
        font-size: 0.75rem !important; 
        
        /* 2. Reducimos el espacio lateral interno para que quepa el texto */
        padding: 8px 4px !important; 
        
        /* 3. Evitamos que el texto salte de línea */
        white-space: nowrap !important; 
        
        /* 4. Reducimos el espacio entre el icono y el texto */
        gap: 5px; 
    }

    .btn-carrito-optica i {
        margin-right: 0 !important; /* Quitamos el margin de Bootstrap */
        font-size: 1rem; /* Icono un poco más pequeño */
    }
}

@media (min-width: 992px) {
    .order-summary.sticky-top {
        /* Varía este número según tu diseño */
        top: 100px !important; 
        /* Asegura que esté sobre otros elementos del cuerpo */
        z-index: 99; 
    }
}

/* En móviles, normalmente es mejor quitar el sticky para que no tape la pantalla */
@media (max-width: 991px) {
    .order-summary.sticky-top {
        position: relative !important;
        top: 0 !important;
    }
}

/* Contenedor principal de métodos */
.woocommerce-checkout-payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cada opción de pago (ej. Transbank, Transferencia) */
.woocommerce-checkout-payment ul.payment_methods li {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Resaltar cuando el radio está seleccionado (opcional con JS) */
.woocommerce-checkout-payment ul.payment_methods li:hover {
    background-color: #f8f9fa;
}

/* Estilo para los nombres de los métodos y logos */
.woocommerce-checkout-payment ul.payment_methods li label {
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.woocommerce-checkout-payment ul.payment_methods li img {
    max-height: 30px; /* Ajusta los logos de tarjetas/bancos */
    width: auto;
}

/* La caja de descripción que aparece al seleccionar un método */
.woocommerce-checkout-payment div.payment_box {
    background: #e9ecef;
    padding: 15px;
    margin-top: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #495057;
}