/*
Theme Name: Nooni Child
Theme URI: https://demo.theme-sky.com/nooni/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: nooni
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: nooni-child
*/
/* style.css de tu tema hijo */

/* INICIO DE ESTILOS PARA EL CARRUSEL DE REVIEWS EN PÁGINAS DE CATEGORÍA */



/* Estilos para el contenedor principal del carrusel en páginas de categoría (ubicación final) */

.carrusel-reviews-categoria-final-wrap {

    width: 100%; /* Del jdgm-carousel-wrapper */

    margin: 0px auto; /* Para centrar el bloque y asegurar 0 margen arriba/abajo/lados */

    padding: 40px 0px; /* Del jdgm-carousel-wrapper */

    background-color: #fff; /* Blanco, del jdgm-carousel-wrapper */

    border-radius: 0; /* Si no tiene bordes redondeados en la página de producto */

    box-shadow: none; /* Si no tiene sombra en la página de producto */

    text-align: center; /* Para centrar el contenido (como el título) dentro del contenedor */

    box-sizing: border-box; /* Asegura que padding no aumente el ancho total */

}



/* Estilos para el título del carrusel dentro de la sección de categorías */

.carrusel-reviews-categoria-final-wrap h2 {

    font-size: 2.2em; /* Puedes ajustar este tamaño si quieres que sea diferente */

    color: #333; /* Un color oscuro estándar, puedes ajustar */

    margin-bottom: 40px; /* Espacio debajo del título */

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    text-align: center; /* Asegúrate de que el título esté centrado */

}



/* Opcional: Ajustes para el contenido interno del carrusel si el tema padre tiene contenedores que lo limitan */

/* Basado en la estructura del carrusel de Judge.me y temas comunes */

.carrusel-reviews-categoria-final-wrap .jdgm-carousel-wrapper {

    /* A veces, el shortcode crea su propio wrapper interno.

       Si el jdgm-carousel-wrapper en la página de producto tiene un ancho máximo,

       replicamos aquí para centrar el contenido real del carrusel. */

    max-width: 1170px; /* Reemplaza con el valor exacto si encuentras uno al inspeccionar */

    margin-left: auto;

    margin-right: auto;

    padding: 0 15px; /* Pequeño padding horizontal si es necesario */

}



/* FIN DE ESTILOS PARA EL CARRUSEL DE REVIEWS EN PÁGINAS DE CATEGORÍA */

/* Asegura el ancho y centrado para la sección de productos relacionados en categorías */
.woocommerce section.related.products {
    max-width: 1279px; /* Ajusta este valor si es diferente en tu tema. Tu inspección mostró 1279px. */
    margin: 0 auto 80px auto !important; /* Centra y da margen inferior */
}

/* Ajuste para evitar márgenes negativos o problemas de espaciado con Swiper */
.woocommerce section.related.products .products,
.woocommerce section.related.products .swiper-wrapper {
    margin: 0 !important; /* Resetea márgenes */
}

/* También puedes considerar ajustar el margen del carrusel de reviews si es necesario */
.jdgm-product-reviews-carousel-wrapper {
    margin-bottom: 50px; /* Ejemplo, ajusta según tu gusto */
}

/* Contenedor principal de la cabecera (la barra superior) */
.header-top {
    overflow: hidden; /* Esto es CRUCIAL: oculta cualquier contenido que se desborde */
    /* Asegúrate de que el 'height' o 'line-height' de .header-top sea suficiente para contener el texto sin cortarlo verticalmente. */
    /* No es necesario white-space: nowrap; aquí si el .header-store-notice ya lo tiene y es el que se anima. */
}

/* El elemento que contiene el mensaje "ENVÍOS Y DEVOLUCIONES GRATIS" */
.header-store-notice {
    display: inline-block; /* Permite aplicar transformaciones CSS */
    white-space: nowrap; /* Evita que el texto se envuelva a la siguiente línea */
    padding-left: 100%; /* El texto comienza 100% fuera del ancho del contenedor padre (a la derecha) */
    animation: scroll-text 15s linear infinite; /* Aplica la animación */
    /* Ajusta el tiempo (15s) para cambiar la velocidad. */
    /* Puedes añadir margin-right si necesitas un espacio entre repeticiones del texto */
    /* margin-right: 20px; */
}

/* Definición de la animación de desplazamiento */
@keyframes scroll-text {
    0% {
        transform: translate3d(0, 0, 0); /* Posición inicial (el texto ya está fuera a la derecha por el padding-left) */
    }
    100% {
        /* Mueve el texto a la izquierda. Ajusta el -X% si el texto no desaparece completamente o hay un salto brusco. */
        /* Un -100% movería solo su propio ancho. -200% es un buen punto de partida para que salga completamente y vuelva a entrar. */
        transform: translate3d(-200%, 0, 0); 
    }
}
/*
 * Estilos definitivos y forzados para el botón "Seguir comprando"
 * en la página del carrito.
 */

/* Estilos para el botón en general (móvil por defecto) */
.woocommerce-cart .button-continue {
    background-color: #fff !important; /* Fondo blanco */
    color: #000 !important; /* Texto negro */
    border: 1px solid #000 !important; /* Borde negro */
    text-align: center !important;
    width: 100% !important; /* Ancho completo para móviles */
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

/* Hover: cuando el cursor está sobre el botón */
.woocommerce-cart .button-continue:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* Estilos para pantallas de escritorio */
@media (min-width: 768px) {
    .woocommerce-cart .button-continue {
        position: relative !important;
        top: 20px !important;
        left: 0 !important;
        width: 250px !important; /* Ajustar si es necesario */
        order: -1 !important;
    }
}