/*
Theme Name:   Kadence Child
Theme URI:    https://www.kadencewp.com/kadence-theme/
Description:  Tema hijo para Profe 3D
Author:       Profe 3D
Template:     kadence
Version:      1.0.0
*/

/*
He reorganizado tus colores para que las variables tengan sentido semántico (Acción, Texto, Fondo):
--global-palette1 (Acción Principal): #0e7c7b (Tu Color 2 - El verde fuerte).
--global-palette2 (Acción Hover): #095a59 (Un pelín más oscuro para cuando pasas el ratón).
--global-palette3 (Texto Principal): #1a2626 (El gris oscuro que creamos, para títulos).
--global-palette4 (Texto Secundario): #0e7c7b o un gris medio.
--global-palette7 (Bordes/Fondos suaves): #bdd8d3 (Tu Color 3).
--global-palette9 (Fondo Web): #ffffff (Tu Color 1).
*/

/* A partir de aquí puedes escribir tu CSS personalizado */

/* =========================================
   ARREGLO PARA VISTA MÓVIL DE PRODUCTOS
   (Para solucionar el texto superpuesto)
   ========================================= */

/* Aplicamos esto SOLO en pantallas de móvil (menores de 767px) */
@media (max-width: 767px) {

    /* 1. Título del producto más pequeño y compacto */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important; /* Reducimos el tamaño de la letra del título */
        line-height: 1.2 !important; /* Menos espacio entre las líneas del título */
        margin-bottom: 5px !important; /* Menos margen debajo del título */
        word-wrap: break-word; /* Evita que palabras largas rompan el diseño */
    }

    /* 2. Ajuste del precio para darle aire */
    .woocommerce ul.products li.product .price {
        font-size: 14px !important; /* Precio legible pero contenido */
        margin-top: 8px !important; /* Separamos el precio del título */
        display: block !important; /* Que ocupe su propia línea */
        clear: both !important; /* Que nada se le pegue a los lados */
    }

    /* 3. EL ARREGLO PRINCIPAL: El botón "Seleccionar opciones" */
    .woocommerce ul.products li.product .button {
        font-size: 12px !important; /* Texto del botón más pequeño */
        padding: 6px 10px !important; /* Botón menos "gordo" */
        margin-top: 10px !important; /* Espacio entre el precio y el botón */
        
        /* Esto es lo vital: quitamos la posición "flotante" que hace que se monte encima */
        position: relative !important; 
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        
        width: 100% !important; /* Que ocupe el ancho disponible para que sea fácil de pulsar */
        display: block !important; /* Que se comporte como un bloque sólido debajo del precio */
    }
    
    /* 4. Ajustamos el contenedor blanco para que no sobre espacio */
    .woocommerce ul.products li.product .kadence-product-content-wrap {
        padding: 10px !important; /* Menos relleno interno */
        min-height: 0 !important; /* Eliminamos cualquier altura mínima forzada */
    }

    /* Opcional: Ocultar el precio "tachado" en móvil si molesta mucho */
    /* .woocommerce ul.products li.product .price del { display: none !important; } */
}

/* =========================================
   ESTILO TARJETA PARA PRODUCTOS
   ========================================= */

/* Esto afecta a toda la "caja" del producto (foto + textos) */
.woocommerce ul.products li.product {
    border: 2px solid #e5e5e5; /* Borde gris suave */
    border-radius: 15px;       /* Bordes redondeados */
    overflow: hidden;          /* IMPORTANTE: Hace que la imagen respete las esquinas redondas */
    background-color: #ffffff; /* Fondo blanco para limpiar */
    padding-bottom: 10px;      /* Un poco de aire abajo del todo */
    transition: all 0.3s ease; /* Suavidad al pasar el ratón */
}

/* Efecto al pasar el ratón por encima de la tarjeta */
.woocommerce ul.products li.product:hover {
    border-color: var(--global-palette1);  /* Cambia al color de tu marca (Instagram Blue aprox) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Sombrita elevadora */
    transform: translateY(-5px); /* Se levanta un poquito */
}

/* Ajuste para que la caja de texto no se pegue a los bordes */
.woocommerce ul.products li.product .kadence-product-content-wrap {
    padding: 10px 15px; /* Relleno a los lados del texto */
}

/* 1. CAJA DE TEXTO (Estado Normal) */
.woocommerce ul.products li.product .entry-content-wrap {
    background-color: #ffffff;
    border: 1px solid transparent; /* Borde invisible */
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
    position: relative; 
    z-index: 20;
    transition: all 0.3s ease;
    
    /* Aseguramos que nada se corte si crece */
    overflow: visible !important; 
}

/* 2. CAJA DE TEXTO (Estado HOVER) */
.woocommerce ul.products li.product:hover .entry-content-wrap {
    /* El borde de la caja del precio */
    /*border-color: var(--global-palette1);*/
    
    /* Efecto de elevación */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
    
    /* Tiramos del margen para que no descuadre la rejilla de productos */
    /* margin-bottom: -30px; */
}
/* Quitar hueco entre precio y botón*/
.product-action-wrap{
    padding: 0px !important;
    margin: 0px;
}

.woocommerce ul.products li.product .product-action-wrap a.button {
    width: 100% !important;       /* Ocupar el 100% del espacio */
    display: block !important;    /* Comportarse como bloque */
    text-align: center;           /* Texto centrado */
    box-sizing: border-box;       /* Que el padding no rompa el ancho */
    margin-left: 0;
    margin-right: 0;
    
    /* Opcional: Si quieres evitar que se rompa en 2 líneas (como en la foto 1) */
    white-space: nowrap; 
    text-overflow: ellipsis;
}

/* 3. ASEGURAR QUE EL BOTÓN SE VEA BIEN */
.woocommerce ul.products li.product .kadence-product-add-to-cart,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    /* Aseguramos que el botón esté encima del fondo blanco y dentro del borde */
    position: relative; 
    z-index: 30;
    margin-top: 10px; /* Un poco de aire respecto al precio */
}

/*
----------------------------------------------------------------
*/

/* =========================================
   ESTILO PARA SLIDER DE FOTOS PRODUCTOS
   ========================================= */

/* Contenedor del slider: necesario para posicionar las flechas */
.product-image-slider {
    position: relative;
    overflow: hidden;
    /* Ajusta esta altura si ves que baila, o déjalo automático */
}

/* Todas las imágenes ocupan el mismo sitio */
.slider-img {
    display: none; /* Ocultas por defecto */
    width: 100%;
    transition: opacity 0.3s ease; /* Transición suave opcional */
}

/* La imagen activa es la única que se ve */
.slider-img.active {
    display: block;
    animation: fadeIn 0.4s;
}

/* Flechas de navegación */
.profe3d-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer; /* Fuerza el icono de la manita */
    font-weight: bold;
    z-index: 100; /* CRÍTICO: Debe ser más alto que el enlace del producto (que suele ser 10) */
    opacity: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Forzar que las flechas sean clicables incluso si hay un enlace encima */
.product-image-slider .profe3d-nav {
    pointer-events: auto; 
}

.profe3d-nav:hover {
    background: var(--global-palette1);  /* Tu color principal de la paleta */
    color: white;
}

.profe3d-nav.prev { left: 10px; }
.profe3d-nav.next { right: 10px; }

/* Mostrar flechas solo al pasar el ratón por la tarjeta del producto */
.product-image-slider:hover .profe3d-nav {
    opacity: 1;
    
}

/* Pequeña animación de aparición */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}
/*
----------------------------------------------------------------
*/

/* PUNTITOS DE LOS PRODUCTOS. INDICAR CUANTAS FOTOS HAY */
/* Contenedor de los puntos: Abajo y centrado */
.slider-dots {
    position: absolute;
    bottom: 10px; /* Separación del borde inferior */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 30; /* Por encima de la imagen */
    line-height: 0; /* Para que no tengan altura extra */
    pointer-events: none; /* Para que no molesten al scroll si tocas entre puntos */
}

/* El punto individual */
.slider-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5); /* Semitransparente */
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto; /* Reactivamos el clic solo en el punto */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Sombra para que se vea sobre fotos blancas */
}

/* El punto activo (foto actual) */
.slider-dot.active {
    /* Mágia: Esto coge el color nº3 de tu paleta global (suele ser el principal/botones) */
    background-color: var(--global-palette1); 
    
    transform: scale(1.3); /* Un pelín más grande */
}
/*
----------------------------------------------------------------
*/

/*
SEPARAR CATEGORÍAS DE LOS PRODUCTOS EN EL CATÁLOGO DE PRODUCTOS
*/

/* Sección de Categorías Arriba */
.profe3d-categorias-top {
    margin-bottom: 40px;
}

.profe3d-cat-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--global-palette5); /* Un toque de color (opcional) */
    display: inline-block;
}

/* El Separador */
.profe3d-separator {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0; /* Línea gris suave */
    text-align: center;
    clear: both; /* Fuerza a que ocupe su propia línea */
}

.profe3d-separator h2 {
    font-size: 1.8rem;
    color: #333;
}

/*
----------------------------------------------------------------
*/

/*
PONER BIEN EL PRECIO Y EL TITULO EN LOS PRODUCTOS RELACIONADOS
*/

/* Dar aire al texto en Productos Relacionados */
.related.products .product .woocommerce-loop-product__title,
.related.products .product .price {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Opcional: Si ves que el título queda muy pegado al borde superior de la tarjeta */
.related.products .product .woocommerce-loop-product__title {
    padding-top: 10px;
}

/*
------------------------------------------------------------------
*/

/*
Poner las secciones sin foto, como si fueran botones
*/
/* --- DISEÑO FINAL: Botones Categoría (Uniformes y Alineados) --- */

/* 1. Limpiamos el contenedor */
.profe3d-categorias-top ul.products li.product-category {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
}

/* 2. EL BOTÓN (Estructura Fija) */
.profe3d-categorias-top ul.products li.product-category a {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50px !important;
    
    /* --- AQUÍ ESTÁ EL TRUCO DE LA UNIFORMIDAD --- */
    min-height: 65px !important; /* Altura fija para que quepan 2 líneas */
    padding: 0 20px !important;  /* Relleno lateral solo */
    
    /* Centrado Flexbox Perfecto */
    display: flex !important;
    justify-content: center;     /* Centrado Horizontal */
    align-items: center;         /* Centrado Vertical */
    text-align: center;          /* Alineación del texto */
    
    /* Estética */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transform: translateY(0);
}

/* 3. FIX ANTI-CAJA BLANCA (Nuclear) */
.profe3d-categorias-top ul.products li.product-category a * {
    background-color: transparent !important; 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important; 
    padding: 0 !important;
}

/* 4. TEXTO (Ajustado para 2 líneas) */
.profe3d-categorias-top .woocommerce-loop-category__title {
    font-size: 1rem !important;   
    font-weight: 600 !important;     
    color: #444 !important;          
    line-height: 1.2 !important;      /* Líneas más juntas para que quede bonito si hay 2 */
    width: 100% !important;           /* Que use todo el ancho disponible */
}

/* 5. HOVER (Interacción) */
.profe3d-categorias-top ul.products li.product-category a:hover {
    background-color: var(--global-palette1) !important; /*2c3e50*/
    
    border-color: var(--global-palette1) !important;
    transform: translateY(-3px) !important; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
}

.profe3d-categorias-top ul.products li.product-category a:hover .woocommerce-loop-category__title {
    color: #ffffff !important;
}

/* 6. Limpieza */
.profe3d-categorias-top .product-category img,
.profe3d-categorias-top .count,
.profe3d-categorias-top .kadence-product-cat-image-wrap {
    display: none !important;
}

/*
----------------------------------------------------------------------------
*/

/* --- Quitar estilo colores con redondeles del color y 
FORZAR ESTILO BOTÓN SOLO PARA EL PACK --- */

/* 1. Atacamos al contenedor específico del atributo 'pack' */
ul.variable-items-wrapper[data-attribute_name="attribute_pack"] .variable-item {
    
    /* Rompemos el círculo */
    width: auto !important;           /* Que se ensanche según el texto */
    height: auto !important;          /* Que la altura se adapte */
    min-width: 40px !important;       /* Un ancho mínimo por si acaso */
    
    /* Le damos forma de botón */
    border-radius: 4px !important;    /* Bordes ligeramente redondeados, no círculos */
    padding: 8px 16px !important;     /* Espacio para que el texto respire */
    
    /* Aseguramos que se vea el texto */
    text-indent: 0 !important;
    display: inline-block !important;
    margin: 0 5px 5px 0 !important;   /* Separación entre botones */
}

/* 2. Ajuste fino para el texto dentro del botón */
ul.variable-items-wrapper[data-attribute_name="attribute_pack"] .variable-item span {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-size: 14px !important;       /* Ajusta este tamaño si lo ves grande/pequeño */
    line-height: normal !important;
}
/* --- PASO 2: ARREGLAR EL TEXTO DENTRO DEL BOTÓN --- */

/* Quitamos el recorte ovalado del span interno */
ul.variable-items-wrapper[data-attribute_name="attribute_pack"] .variable-item span {
    border-radius: 0 !important;      /* Adiós óvalo, hola rectángulo */
    box-shadow: none !important;      /* Quitamos sombras internas raras */
    background: transparent !important; /* Fondo transparente para ver bien */
    
    /* Ajustes para que el texto se lea perfecto */
    position: relative !important;
    width: auto !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    overflow: visible !important;     /* ¡Clave! Deja que el texto se vea entero */
}

/* Un extra por si el plugin usa ::before para el efecto brillo */
ul.variable-items-wrapper[data-attribute_name="attribute_pack"] .variable-item::before,
ul.variable-items-wrapper[data-attribute_name="attribute_pack"] .variable-item::after {
    display: none !important;         /* Ocultamos decoraciones extrañas */
}

/* =========================================
   MIGAS DE PAN - DISEÑO FINAL RESTAURADO
   ========================================= */

/* --- 1. ESTILO BASE (ESCRITORIO) --- */

/* Contenedor Principal */
.breadcrumbs, 
.kadence-breadcrumbs, 
.woocommerce-breadcrumb, 
.rank-math-breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 0 !important; 
    line-height: 0 !important;
}

/* Los Botones (Enlaces) - Diseño "Cápsula" */
.breadcrumbs a, 
.kadence-breadcrumbs a, 
.woocommerce-breadcrumb a {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    
    /* Fondo gris suave y borde sutil */
    background-color: rgba(0, 0, 0, 0.05) !important; 
    border: 1px solid rgba(0,0,0,0.1) !important;
    
    /* Tu variable de color original */
    color: var(--global-palette1) !important;
    
    padding: 5px 14px !important;
    border-radius: 50px !important; /* Bordes redondos */
    text-decoration: none !important;
    position: relative !important;
    margin-right: 20px !important; /* Hueco para la flecha */
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important; /* Suavidad animada */
    overflow: visible !important;
}

/* La Flechita (›) */
.breadcrumbs a::after, 
.kadence-breadcrumbs a::after, 
.woocommerce-breadcrumb a::after {
    content: "›" !important; 
    font-size: 22px !important; 
    color: var(--global-palette1) !important;
    opacity: 0.8 !important;
    
    position: absolute !important;
    right: -18px !important; 
    
    /* Centrado Vertical */
    top: 50% !important;           
    transform: translateY(-50%) !important; 
    line-height: 1 !important;     
    padding-bottom: 2px !important; 
    
    pointer-events: none;
    border: none !important;
    display: block !important; 
}

/* EFECTO HOVER (Lo que te gustaba) */
.breadcrumbs a:hover, 
.kadence-breadcrumbs a:hover, 
.woocommerce-breadcrumb a:hover {
    background-color: var(--global-palette1) !important; /* Fondo se vuelve del color principal */
    color: #fff !important; /* Texto blanco */
    border-color: var(--global-palette1) !important;
    transform: translateY(-2px); /* Se eleva un poquito */
}

/* Texto de la página actual (sin enlace) */
.breadcrumbs span,
.woocommerce-breadcrumb span:last-child {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: var(--global-palette1) !important;
    font-weight: 700 !important; /* Negrita */
}

/* Limpieza de separadores antiguos */
.woocommerce-breadcrumb::after, .separator { display: none !important; }


/* --- 2. VERSIÓN MÓVIL (CARRUSEL "SPOTIFY") --- */
@media (max-width: 768px) {
    
    .breadcrumbs, 
    .kadence-breadcrumbs, 
    .woocommerce-breadcrumb, 
    .rank-math-breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        white-space: nowrap !important;
        padding: 10px 0px !important;
        width: 100% !important;
        
        /* Efecto desvanecido a la derecha */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
    }
    
    /* Ocultar barra de scroll */
    .breadcrumbs::-webkit-scrollbar, .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }

    /* Margen inicial para que no se pegue al borde */
    .breadcrumbs a:first-child, .woocommerce-breadcrumb a:first-child {
        margin-left: 20px !important;
    }
    
    /* Espacio final para poder leer el último texto */
    .breadcrumbs span:last-child, .woocommerce-breadcrumb span:last-child {
        padding-right: 40px !important;
    }
}