/*
 * Estilos para la integración de WooCommerce - L'oricay Theme
 */

/* Solución al problema del footer:
   Aseguramos que el contenedor principal de WooCommerce no cree un nuevo contexto de apilamiento
   que interfiera con los cálculos de los bloques de ancho completo. */
.woocommerce-page div[id*="product-"] {
    position: static;
}

/* ========= INICIO: NUEVO BLOQUE PARALLAX PARA PÁGINA DE PRODUCTO ========= */
.parallax-product-intro {
    height: 270px;
    margin-top: 80px; /* Espacio para separar del contenido del producto de arriba */
    margin-bottom: -20px; /* Corregido: Margen negativo para pegarse al footer */
    /* Anulamos la imagen de fondo del elemento para aplicarla en un pseudo-elemento con opacidad */
    background-image: none;
    overflow: hidden; /* Buena práctica para contener pseudo-elementos */
    z-index: 0; /* Aseguramos un contexto de apilamiento para que el ::before quede detrás */
    /* Nuevos estilos para centrar el contenido de texto */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.parallax-product-intro::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('assets/images/bannertienda.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Mantenemos el efecto parallax */
    opacity: 0.7; /* Aplicamos la opacidad solicitada */
    z-index: -1; /* Colocamos el fondo detrás de cualquier contenido futuro */
}

/* Estilos para el texto animado dentro del parallax */
.product-animated-text-container {
    display: flex;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 2.2em;
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.product-animated-text-box {
    white-space: nowrap;
}

.product-animated-text-box:first-child > span {
    padding-right: 0.25em;
}

#product-word-container {
    width: 0; /* Comienza contraído */
    overflow: hidden;
    transition: width 0.5s ease-in-out;
}

#product-word-content {
    font-weight: 600; /* Destaca la palabra animada */
}
/* ========= FIN: NUEVO BLOQUE PARALLAX ========= */

/* Layout principal de la página de producto, usando la nueva estructura de Grid */
.woocommerce div.product.layout {
    display: grid;
    grid-template-areas:
        "galeria titulo_productos"
        "galeria precio_boton"
        "galeria informacion_producto";
    grid-template-columns: 32% 1fr; /* Aumentamos el ancho de la galería un 20% */
    grid-template-rows: auto auto 1fr; /* Filas para título, precio/botón, y el resto de la info */
    gap: 10px 40px; /* Espacio entre filas y columnas */
    /* Hacemos el layout un poco más estrecho que su contenedor y lo centramos.
       Esto crea "aire" a los lados, permitiendo que el panel del acordeón se expanda
       sin ser recortado por los límites de la página. */
    width: 95%;
    margin: 100px auto 0;
    align-items: start; /* Alinea los items al inicio de su celda por defecto */
}

/* --- Áreas del Grid --- */
.woocommerce .layout .galeria {
    grid-area: galeria;
    place-self: center; /* Centra la galería en su columna */
}

.woocommerce .layout .titulo_productos {
    grid-area: titulo_productos;
    align-self: end; /* Empuja el título hacia el final de su celda (abajo) */
    margin-top: 20px;
}

.woocommerce .layout .precio_boton {
    grid-area: precio_boton;
    align-self: start; /* Alinea el precio/botón al inicio de su celda (arriba) */
    margin-top: 100px; /* Desplaza el bloque 50px hacia abajo en escritorio */
}

.woocommerce .layout .informacion_producto {
    grid-area: informacion_producto;
    align-self: start; /* Alinea la info al inicio de su celda (arriba) */
    background-color: rgba(53, 118, 50, 0.4); /* Verde corporativo (#357632) con opacidad */
    color: #1c3b29; /* Texto oscuro para contraste sobre el nuevo fondo claro */
    padding: 0; /* Eliminamos el padding para que los botones se integren */
    border-radius: 8px;
    border: 1px solid rgba(53, 118, 50, 0.6); /* Borde sutil para definir el contenedor */
    /* Dividimos el contenedor en dos columnas */
    display: block; /* Este ya no es el grid container principal. */
    /* Solución: Evita que el contenedor se expanda por el contenido del carrusel. */
    min-width: 0;
}

/* Hacemos que el contenedor .product_meta (que ahora contiene nuestro acordeón
   y el nuevo div .product-meta-details) sea el grid de dos columnas. */
.woocommerce .layout .informacion_producto .product_meta {
    /* Eliminamos el layout de dos columnas. El acordeón ahora ocupará todo el ancho. */
    display: block;
}

/* Ocultamos la información de meta (SKU, categorías) que ahora son hijos directos de .product_meta */
.woocommerce .layout .informacion_producto .product_meta > span {
    display: none;
}

/* --- Estilos para el nuevo componente de Acordeón (Efecto "Burbuja" Independiente) --- */
.product-accordion {
    width: 100%;
    /* Crea el contexto de posicionamiento para el panel flotante. */
    position: relative;
}

.accordion-titles {
    display: flex;
    flex-direction: row; /* Pone los botones en línea */
    gap: 5px; /* Espacio entre botones */
    flex-wrap: wrap; /* Permite que los botones se ajusten en pantallas pequeñas */
}

.accordion-title {
    flex-grow: 1; /* Hace que los botones compartan el espacio disponible */
    flex-basis: 0; /* CLAVE: Asegura que todos los botones tengan exactamente el mismo ancho inicial. */
    /* Añadimos flexbox para centrar el contenido y asegurar una altura uniforme */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Hacemos los botones transparentes */
    color: #1c3b29; /* Texto oscuro para que contraste */
    border: none; /* Eliminamos todos los bordes por defecto */
    border-bottom: 1px solid rgba(53, 118, 50, 0.6); /* Borde inferior sutil */
    border-radius: 0; /* Sin bordes redondeados para un look de 'tabs' */
    padding: 15px 20px; /* Aumentado para botones más grandes y altos */
    text-align: center; /* Mantenemos por si flexbox no es soportado */
    font-size: 1.03em; /* Corregido: 1.03 es el final */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    font-family: 'Cinzel', serif;
}

.accordion-title:hover,
.accordion-title.active {
    background-color: rgba(53, 118, 50, 0.2); /* Un fondo verde muy sutil al interactuar */
    border-bottom-color: #357632; /* El borde inferior se vuelve verde sólido */
}

/* Contenedor de los paneles. Se posiciona debajo de los títulos. */
.accordion-contents {
    position: absolute;
    bottom: 100%; /* Ancla el contenedor justo ENCIMA de los títulos. */
    left: 50%; /* Lo centra horizontalmente respecto al .product-accordion */
    transform: translateX(-50%);
    width: calc(100% + 40px); /* Lo hace 40px más ancho que el contenedor de títulos. */
    z-index: 20; /* Un z-index alto para asegurar que flote sobre todo. */
    margin-bottom: 10px; /* Crea el espacio/separación visual. */
    pointer-events: none; /* El contenedor es invisible, solo los paneles son interactivos. */
}

/* Cada panel individual. Se comporta como la "burbuja". */
.accordion-content {
    position: absolute;
    /* Todos los paneles se apilan en la misma posición (arriba a la izquierda)
       dentro de su contenedor padre (.accordion-contents).
       Se anclan a la base para que crezcan hacia arriba. */
    bottom: 0;
    left: 0;
    width: 100%; /* Ocupa el 100% del ancho de .accordion-contents. */
    
    /* Estilos visuales de la burbuja */
    background-color: #2a2a2a;
    color: #f0f0f0; /* Texto blanco para contraste sobre el fondo oscuro */
    border: 1px solid #444;
    border-radius: 8px; /* Bordes más redondeados para el efecto burbuja. */
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35); /* Sombra más pronunciada para el efecto flotante. */
    pointer-events: auto; /* El panel sí es interactivo. */

    /* Animación de aparición */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Comienza 10px ABAJO de su posición final y se anima hacia arriba. */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

.accordion-content a {
    color: #a0d0a0; /* Verde claro para los enlaces, asegurando contraste */
}

.accordion-content.active {
    /* Estado visible para la animación */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
}

.accordion-content > * {
    padding: 0; /* El padding ahora está en el padre .accordion-content */
}

.accordion-content p {
    margin-bottom: 15px; /* Espaciado entre párrafos en el acordeón */
}

.accordion-content p:last-child {
    margin-bottom: 0; /* Sin margen en el último párrafo */
}

/* --- Estilos para el Mini Carrusel de Reseñas en el Acordeón --- */
.mini-reviews-carousel {
    position: relative;
    padding: 0 30px; /* Espacio para los botones de navegación */
    box-sizing: border-box;
    height: 100%; /* Paso 1: Ocupa toda la altura del panel (180px) */
    display: flex; /* Paso 3: Para centrar verticalmente el contenedor de tarjetas */
    align-items: center; /* Paso 3: Centrado vertical */
}

#product-reviews-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 5px 0; /* Espacio vertical reducido para las tarjetas */
    
    /* Ocultamos la barra de scroll para un look más limpio */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

#product-reviews-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Estilo para el mensaje de "Cargando..." */
#product-reviews-container p {
    color: #ccc;
    width: 100%;
    text-align: center;
}

/* Estilo para cada tarjeta de reseña dentro del mini carrusel */
.mini-review-card {
    flex: 0 0 280px; /* No crece, no se encoge, ancho base de 280px */
    scroll-snap-align: start;
    background-color: #3a3a3a; /* Un gris un poco más claro que el fondo del acordeón */
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    color: #e0e0e0;
    font-size: 0.9em;
    max-height: 180px; /* Altura MÁXIMA para la tarjeta, permitiendo que sea más pequeña si el contenido es corto */
    display: flex; /* Para controlar el layout interno */
    flex-direction: column; /* Apila el header y el texto verticalmente */
}

.mini-review-card .review-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0; /* Evita que el header se encoja */
}

.mini-review-card .review-header img {
    border-radius: 50%;
    width: 35px; /* Paso 1: Foto de perfil más pequeña */
    height: 35px;
    margin-right: 10px;
}

/* Paso 2: Contenedor para el nombre y las estrellas */
.mini-review-card .review-header > div {
    display: flex;
    align-items: center; /* Alinea verticalmente el nombre y las estrellas */
    gap: 10px; /* Espacio entre el nombre y las estrellas */
    flex-wrap: wrap; /* Permite que se ajuste si no hay espacio */
}

.mini-review-card .review-author {
    font-weight: bold;
    color: #fff;
}

.mini-review-card .review-rating {
    color: #fbbc05; /* Color dorado de las estrellas de Google */
    font-size: 1.1em;
}

/* Paso 2: Hacer el texto de la reseña desplazable */
.mini-review-card p {
    line-height: 1.5;
    color: #ccc; /* Un gris más claro para el texto del cuerpo */
    flex-grow: 1; /* Ocupa el espacio restante en la tarjeta */
    overflow-y: auto; /* Añade scroll si el texto es muy largo */
    padding-right: 10px; /* Espacio para la barra de scroll */
    margin: 0; /* Reseteamos cualquier margen del párrafo */
}

/* Estilos para la barra de scroll interna de la tarjeta */
.mini-review-card p::-webkit-scrollbar {
    width: 8px;
}
.mini-review-card p::-webkit-scrollbar-track {
    background: transparent;
}
.mini-review-card p::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
    border: 2px solid #3a3a3a;
}

/* Botones de navegación para el mini carrusel */
.mini-reviews-carousel .review-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #444;
    border: 1px solid #666;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 1.8em;
    color: #f0f0f0;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#product-review-prev { left: -5px; }
#product-review-next { right: -5px; }

/* Aseguramos que los enlaces dentro del cuadro (como las categorías) también sean claros */
.woocommerce .layout .informacion_producto a {
    color: #a0d0a0; /* Un verde claro para que los enlaces destaquen */
}

/* Estilos para la galería que genera WooCommerce DENTRO de nuestro contenedor */
.woocommerce .layout .woocommerce-product-gallery {
    width: 100% !important; /* Ocupa todo el ancho de su columna del grid, !important para anular defaults */
    float: none !important; /* Anulamos cualquier float por defecto de WooCommerce */
    margin: 0; /* Reseteamos cualquier margen */
}

/* Imagen principal */
.woocommerce .layout .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Contenedor de las miniaturas */
.woocommerce .layout .flex-control-nav.flex-control-thumbs {
    display: grid;
    /* Volvemos a 4 columnas, pero con un tamaño fijo para poder centrarlas */
    grid-template-columns: repeat(4, 64px); /* Aumentamos el tamaño de las miniaturas un 20% */
    justify-content: center; /* Centra el grid de miniaturas horizontalmente */
    gap: 10px;
    margin-top: 30px !important; /* Aumentamos el espacio con la imagen principal */
    padding: 0;
    list-style: none;
}

.woocommerce .layout .flex-control-nav.flex-control-thumbs li {
    /* El script de WooCommerce puede añadir anchos, nos aseguramos de anularlos */
    width: auto !important;
}

.woocommerce .layout .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

/* Título del producto */
.woocommerce div.product .product_title {
    font-family: 'Cinzel', serif;
    color: #336633; /* Cambiado al verde solicitado */
    font-size: 2.5em; /* Reducido un 10% */
    line-height: 1.2;
}

/* Precio del producto */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    display: flex; /* Para alinear el precio y el texto del IVA */
    align-items: baseline; /* Alinea los textos en su base */
    color: #3a3838; /* Cambiado a un gris claro */
    font-size: 2em;
    font-weight: bold;
}

/* Texto "*IVA INCLUÍDO" a la derecha del precio */
.woocommerce div.product p.price::after {
    content: "*IVA INCLUÍDO";
    color: #1b1a1a; /* Negro/gris oscuro */
    font-size: 0.5em; /* Texto más pequeño */
    font-weight: normal; /* Quitamos el bold heredado */
    margin-left: 10px; /* Espacio entre el precio y el texto */
}

/* Añadimos " COP" al final del precio */
.woocommerce div.product p.price .woocommerce-Price-amount::after {
    content: " COP";
    font-size: 0.6em; /* Más pequeño que el precio, pero legible */
    font-weight: 500; /* Un peso medio, no tan bold como el precio */
    margin-left: 0.25em; /* Un pequeño espacio */
}

/* Botón "Añadir al carrito" */
.woocommerce div.product .single_add_to_cart_button {
    position: relative; /* Necesario para posicionar los pseudo-elementos de estado */
    /* Reutilizamos el estilo del botón principal de nuestro tema */
    background-color: #336633;
    color: white !important; /* !important para sobrescribir los estilos por defecto de WC */
    padding: 12px 24px; /* Aumentado para un botón más grande */
    border: none;
    border-radius: 5px;
    font-size: 1.2em; /* Reducido para un look más equilibrado */
    /* Transición más completa para los cambios de estado */
    font-family: 'Cinzel', serif; /* Aplicamos la fuente Cinzel */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background-color: #2a522a;
}

/* Estilos para el formulario de "Añadir al carrito", ahora usando el nativo de WC para replicar el layout anterior. */
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px; /* Aumentamos el espacio superior para separarlo del precio. */
    margin-bottom: 1em;
}

/* Selector de cantidad */
.woocommerce .quantity {
    display: inline-flex; /* Usamos inline-flex para que se alinee bien con el botón de añadir */
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* Para que los bordes redondeados se apliquen a los hijos */
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
    /* Hacemos los botones cuadrados */
    width: 36px; /* Reducido para un look más compacto */
    height: 36px; /* Reducido para un look más compacto */
    background-color: #f5f5f5;
    border: none;
    font-size: 1.3em; /* Reducido para que quepa en el nuevo tamaño */
    color: #555;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0; /* Anulamos el padding por defecto */
    font-family: 'Cinzel', serif; /* Aplicamos la fuente Cinzel */
    line-height: 36px; /* Centramos el + y - verticalmente */
}

.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover {
    background-color: #e9e9e9;
}

/* Este es el nuevo contenedor que se ve como un input */
.woocommerce .quantity .qty-anim-container {
    width: 40px; /* Reducido para un look más compacto */
    height: 36px; /* Reducido para un look más compacto */
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    overflow: hidden; /* Esencial para que la animación funcione bien */
    position: relative; /* Necesario para el posicionamiento de los spans */
}

.woocommerce .quantity .qty-text-anim {
    font-size: 1.2em;
    color: #333;
}

.woocommerce .quantity .input-text.qty::-webkit-outer-spin-button,
.woocommerce .quantity .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Responsive para móvil --- */
@media (max-width: 768px) {
    .woocommerce div.product.layout {
        /* Usamos flexbox para reordenar los elementos en móvil. */
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio uniforme entre los bloques apilados. */
        padding: 0 20px; /* Aumentado en 5px por lado para hacer la columna más angosta */
        margin-top: 30px;
    }

    .woocommerce div.product form.cart {
        /* Usamos grid para un control preciso del layout en móvil. */
        display: grid;
        /* Definimos 2 columnas: la primera se ajusta al contenido (quantity), la segunda toma el resto del espacio (botón). */
        grid-template-columns: auto 1fr;
        /* Definimos las áreas para una asignación clara. El botón de checkout ocupará toda la segunda fila. */
        grid-template-areas:
            "quantity-selector add-to-cart-button"
            "checkout-button   checkout-button";
        align-items: center; /* Centra los elementos verticalmente en su fila. */
        gap: 10px 15px; /* 10px de espacio vertical, 15px horizontal. */
        margin-top: 20px; /* Añadimos espacio con el precio en la vista móvil. */
    }

    /* --- Adaptación del Acordeón de Producto en Móvil --- */
    .woocommerce .layout .informacion_producto {
        /* Aseguramos que el panel de contenido, al expandirse, no sea cortado. */
        overflow: visible;
    }

    /* Reset completo del contenedor del acordeón en móvil */
    .product-accordion {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        position: relative; /* Mantiene el contexto para los paneles */
    }

    .accordion-content {
        /* Hacemos que el panel ocupe el ancho completo del contenedor oscuro,
           rompiendo el padding interno de .informacion_producto (que es de 25px por lado) */
        width: calc(100% + 50px);
        left: -25px; /* Lo movemos a la izquierda para compensar */
        border-radius: 8px 8px 0 0; /* Ajustamos el borde para que coincida con la parte superior del contenedor padre */
    }

    /* Botones del acordeón optimizados para grid 2x2 en móvil */
    .accordion-title {
        font-size: 0.8em; /* Reducido para mejor ajuste */
        height: 65px !important; /* Altura fija FORZADA para perfecta uniformidad */
        min-height: 65px !important; /* Altura mínima forzada */
        max-height: 65px !important; /* Altura máxima forzada */
        padding: 8px 5px !important; /* Padding equilibrado FORZADO */
        line-height: 1.2; /* Interlineado consistente */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 !important; /* Sin márgenes externos */
        box-sizing: border-box; /* Include padding in height calculation */
        vertical-align: top !important; /* Alineación vertical forzada */
        
        /* Líneas de separación lindas - SIN FONDO */
        border: 1px solid rgba(53, 118, 50, 0.3) !important; /* Borde verde sutil */
        border-bottom: 2px solid rgba(53, 118, 50, 0.6) !important; /* Borde inferior más marcado */
        background-color: transparent !important; /* Sin fondo */
        transition: all 0.3s ease;
    }

    /* Líneas de separación específicas para cada posición */
    .accordion-title:nth-child(1) { /* Arriba izquierda */
        border-right: none !important; /* Sin borde derecho */
        border-bottom: none !important; /* Sin borde inferior */
        border-top-left-radius: 8px;
    }
    
    .accordion-title:nth-child(2) { /* Arriba derecha */
        border-left: none !important; /* Sin borde izquierdo */
        border-bottom: none !important; /* Sin borde inferior */
        border-top-right-radius: 8px;
    }
    
    .accordion-title:nth-child(3) { /* Abajo izquierda */
        border-right: none !important; /* Sin borde derecho */
        border-top: none !important; /* Sin borde superior */
        border-bottom-left-radius: 8px;
    }
    
    .accordion-title:nth-child(4) { /* Abajo derecha */
        border-left: none !important; /* Sin borde izquierdo */
        border-top: none !important; /* Sin borde superior */
        border-bottom-right-radius: 8px;
    }
    
    /* Línea vertical central */
    .accordion-titles::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(53, 118, 50, 0.6);
        z-index: 1;
    }
    
    /* Línea horizontal central */
    .accordion-titles::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(53, 118, 50, 0.6);
        z-index: 1;
    }

    /* Grid perfecto 2x2 para los botones del acordeón en móvil */
    .accordion-titles {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columnas exactamente iguales */
        grid-template-rows: 65px 65px; /* 2 filas con altura fija exacta */
        gap: 0; /* Sin gap para que las líneas se conecten perfectamente */
        width: 90%; /* Ancho controlado para centrado perfecto */
        max-width: 350px; /* Ancho máximo para pantallas muy anchas */
        align-items: stretch; /* Fuerza que todos los elementos ocupen la altura asignada */
        justify-content: center; /* Centrado horizontal perfecto */
        margin: 20px auto !important; /* Centrado del contenedor completo con margen vertical */
        padding: 0; /* Sin padding interno */
        position: relative; /* Vuelve al flujo normal */
    }

    /* Asignamos los elementos del formulario a sus áreas del grid. */
    .woocommerce div.product form.cart .quantity {
        grid-area: quantity-selector;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        grid-area: add-to-cart-button;
        width: 100%; /* Hacemos que el botón ocupe todo el espacio de su celda. */
    }

    /* Reordenamos los bloques para que el título aparezca primero en móvil. */
    .woocommerce .layout .titulo_productos {
        order: 1;
        text-align: left; /* Alineamos el título a la izquierda en móvil. */
    }

    .woocommerce .layout .galeria {
        order: 2;
    }

    .woocommerce .layout .precio_boton {
        order: 3;
        margin-top: 0; /* Anulamos el margen de escritorio en la vista móvil */
    }

    .woocommerce .layout .informacion_producto {
        order: 4;
    }

    /* Ajustamos la tipografía para móvil */
    .woocommerce div.product .product_title {
        /* Reducimos el tamaño de la fuente en 3pt (aprox. de 2em a 1.75em) para un mejor ajuste. */
        font-size: 1.75em;
    }

    .woocommerce div.product p.price {
        font-size: 1.6em;
    }

    /* --- Adaptación del bloque Parallax de la página de producto --- */
    .parallax-product-intro {
        height: 200px; /* Altura reducida para móviles */
        margin-top: 40px; /* Menos espacio superior en móviles */
    }

    .parallax-product-intro::before {
        background-attachment: scroll; /* Desactiva el efecto parallax para mejor rendimiento */
    }

    .product-animated-text-container {
        font-size: 1.4em; /* Reducido 2 puntos más para mejor ajuste en móviles */
        text-align: center; /* Asegura el centrado en caso de que el texto se rompa */
        white-space: normal; /* Permite que el texto se divida en varias líneas si es necesario */
    }

    /* Forzamos al botón de checkout a ocupar su propia línea en móvil */
    .woocommerce div.product .checkout-button {
        /* Asignamos el botón a su área, que ya está definida para ocupar toda la fila. */
        grid-area: checkout-button;
        margin-top: 10px; /* Espacio con la fila de arriba */
        margin-left: 0; /* Anulamos el margen de escritorio */
         /* Centrado robusto con Flexbox para asegurar alineación perfecta */
         display: flex;
         justify-content: center; /* Centra el texto horizontalmente */
         align-items: center;     /* Centra el texto verticalmente (útil si se parte en dos líneas) */
        font-size: 1em; /* Reducimos el tamaño del texto para que quepa mejor en móvil */
        white-space: normal; /* Permitimos que el texto del botón se divida en dos líneas si es necesario */
        padding: 12px 10px; /* Ajustamos el padding para el texto que puede envolverse */
    }
}

/* --- Animaciones para el selector de cantidad --- */

@keyframes pop-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    25% {
        transform: translateY(-50%);
        opacity: 0;
    }
    50% {
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pop-down {
    0% { transform: translateY(0); opacity: 1; }
    25% { transform: translateY(50%); opacity: 0; }
    50% { transform: translateY(-50%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.woocommerce .quantity .qty-text-anim.anim-pop-up {
    animation: pop-up 0.4s ease-in-out;
}

.woocommerce .quantity .qty-text-anim.anim-pop-down {
    animation: pop-down 0.4s ease-in-out;
}

/* --- Estilos para el botón "Finalizar Compra" --- */

/* Clase de utilidad para ocultar elementos */
.hidden {
    display: none !important;
}

/* Estilo del botón "Continuar con el envío" */
.woocommerce div.product .checkout-button {
    background-color: transparent; /* Fondo transparente */
    color: #336633 !important; /* Texto en color verde principal */
    border: 2px solid #336633; /* Borde verde */
    margin-left: 10px; /* Espacio para separarlo del botón de añadir */
    font-size: 1.2em; /* Reducido para coincidir con el botón principal */
    font-family: 'Cinzel', serif;
    /* Ajustamos el padding para que el tamaño total (padding + borde) sea consistente
       con el botón de "Añadir al carrito", asegurando que se adapte al texto. */
    padding: 10px 22px; /* Padding ajustado para mantener la proporción */
    white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
}

.woocommerce div.product .checkout-button:hover {
    background-color: #e0ffe0; /* Un verde muy claro al pasar el ratón */
    color: #2a522a !important;
    border-color: #2a522a;
}
/* --- Fin de estilos para el selector de cantidad --- */

/* --- INICIO: Estilos para el botón "Añadir al carrito" con AJAX --- */

/* Ocultamos el texto original cuando el botón está en un estado especial */
.woocommerce div.product .single_add_to_cart_button.loading,
.woocommerce div.product .single_add_to_cart_button.added {
    color: transparent !important; /* Oculta el texto original del botón */
}

/* Pseudo-elemento genérico para el texto de estado (Añadiendo..., ¡Añadido!, etc.) */
.woocommerce div.product .single_add_to_cart_button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Evita que el texto intercepte clics */
}

/* --- Estado de Carga (.loading) --- */
.woocommerce div.product .single_add_to_cart_button.loading {
    background-color: #2a522a; /* Verde oscuro para indicar actividad */
    cursor: wait;
}

/* El texto "Añadiendo..." que se mostrará */
.woocommerce div.product .single_add_to_cart_button.loading::after {
    content: 'Añadiendo...';
    opacity: 1;
}

/* El icono de spinner que se mostrará a la izquierda del texto */
.woocommerce div.product .single_add_to_cart_button.loading::before {
    content: "\f110"; /* Icono fa-spinner de Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    display: inline-block;
    animation: fa-spin 1.5s infinite linear;
    margin-right: 10px; /* Espacio entre el spinner y el texto "Añadiendo..." */
}

/* --- Estado de Éxito (.added) --- */
.woocommerce div.product .single_add_to_cart_button.added {
    background-color: #357632; /* Un verde más brillante para el éxito */
    border-color: #357632;
    cursor: default;
}

/* El texto "¡Añadido!" que se mostrará */
.woocommerce div.product .single_add_to_cart_button.added::after {
    content: '¡Añadido!';
    opacity: 1;
}

/* El icono de check que se mostrará */
.woocommerce div.product .single_add_to_cart_button.added::before {
    content: "\f00c"; /* Icono fa-check de Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    display: inline-block;
    margin-right: 10px;
}
/* --- FIN: Estilos para el botón "Añadir al carrito" con AJAX --- */

/* --- INICIO: Estilos para mensajes de error AJAX en la página de producto --- */

/* Este será el contenedor para los mensajes de error que se mostrarán encima del formulario */
.woocommerce-product-ajax-error {
    background-color: #d9534f; /* Un rojo claro pero visible para errores */
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 1.5em; /* Espacio antes del formulario de "Añadir al carrito" */
    display: flex; /* Para alinear el icono y el texto */
    align-items: center;
    font-size: 0.95em;
    line-height: 1.4;
}

.woocommerce-product-ajax-error::before {
    content: "\f071"; /* Icono fa-exclamation-triangle de Font Awesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2em;
    margin-right: 15px; /* Espacio entre el icono y el texto */
}
/* --- FIN: Estilos para mensajes de error AJAX --- */