/*
 Theme Name:    LÁMPARAS IBELÁN
 Theme URI:     https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624
 Description:   This is the child theme of Electro
 Author:        Arantxa Abad
 Author URI:    https://madrasthemes.com/
 Template:      electro
 Version:       3.6.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 Tags:          light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:   electro-child
*/

/* product-variations-styles.css */

@media screen and (max-width: 767px) {
    /* ------------- INICIO DEL CSS PARA moviles ------------- */
    ul.ficha-tecnica-grid{
        display: none;
    }
    /* ESTILOS PARA LOS ACORDEONES MINIMALISTAS */

         .attribute-item-wrapper {
        width: 100%; /* Full width for a single column */
    }

    /* This is the main container that will be collapsed */
    .product-attributes-columns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        transition: max-height 0.5s ease-in-out;
        overflow: hidden; /* This is key to hiding content */
    }

    /* Class to apply for the collapsed state. You can adjust the height. */
    .product-attributes-columns.collapsed {
        max-height: 250px; /* Adjust this value to control the initial visible area */
    }


    .product-accordions-list {
        list-style: none; /* Quita los puntos de la lista */
        margin: 0;
        padding: 0;
        border-top: 1px solid #e5e7eb; /* borde superior, similar a colorBorder */
        margin-bottom: 20px;
    }

    .accordion-item {
        border-bottom: 1px solid #e5e7eb; /* borde inferior */
        padding-top: 8px; /* py-2 de tailwind */
        padding-bottom: 8px; /* py-2 de tailwind */
    }

    .accordion-title-wrapper {
        display: flex;
        gap: 20px; /* Separación entre icono y texto, y entre texto y flecha */
        font-size: 14px; /* text-sm de tailwind */
        justify-content: space-between; /* justify-between de tailwind */
        cursor: pointer;
        align-items: center; /* items-center de tailwind */
        padding: 0 0; /* Si necesitas padding aquí, ajusta. El py-2 ya está en li. */
    }

    .accordion-title-text {
        display: flex;
        align-items: center;
        gap: 8px; /* gap-2 de tailwind */
        font-weight: 500; /* font-medium de tailwind */
        margin: 0; /* Elimina márgenes por defecto de p */
    }

    .accordion-svg-icon {
        display: inline-block;
        width: 1em; /* w-[1em] de tailwind */
        height: 1em; /* h-[1em] de tailwind */
        font-size: 20px; /* text-xl de tailwind, para el tamaño del icono principal */
        stroke-width: 1.5; /* stroke-width de tailwind */
        color: currentColor; /* Usa el color del texto circundante */
    }

    .accordion-arrow-icon {
        display: inline-block;
        width: 20px; /* w-[1em] de tailwind */
        height: 20px; /* h-[1em] de tailwind */
        font-size: 18px; /* text-lg de tailwind */
        transition: transform 0.5s ease-in-out; /* duration-500 de tailwind, para la animación de la flecha */
        stroke: currentColor;
    }

    /* Rotar la flecha cuando el acordeón está activo */
    .accordion-item.active .accordion-arrow-icon {
        transform: rotate(180deg); /* Flecha hacia arriba */
    }

    /* Contenido del acordeón (animación con grid-template-rows) */
    .accordion-content-outer {
        overflow: hidden;
        font-size: 14px; /* text-sm de tailwind */
        display: grid; /* Importante para grid-template-rows */
        grid-template-rows: 0fr; /* Altura inicial 0 */
        transition: grid-template-rows 0.5s ease-in-out; /* Animación de altura */
        margin-top: 0; /* mt-0 de tailwind */
    }

    .accordion-item.active .accordion-content-outer {
        grid-template-rows: 1fr; /* Altura máxima para mostrar el contenido */
    }

    .accordion-content-inner {
        overflow: hidden; /* Necesario para que el contenido no se desborde al animar */
        padding-top: 0;
        padding-bottom: 0; /* Reinicia padding si necesitas controlarlo aquí */
        min-height: 0; /* Necesario para el grid-template-rows 0fr */
    }

    /* Ajustar el padding interno del contenido cuando el acordeón está activo */
    .accordion-item.active .accordion-content-inner {
        padding-top: 10px; /* Ajusta el padding superior si lo necesitas */
        padding-bottom: 10px; /* Ajusta el padding inferior si lo necesitas */
    }


    /* Estilos para el contenido de los acordeones (p, br, a, img) */
    .accordion-content-inner p {
        margin-bottom: 0.5em; /* Espacio entre párrafos dentro del acordeón */
        line-height: 1.5;
    }
    .accordion-content-inner br {
        content: "";
        display: block;
        margin-bottom: 1em; /* Espacio entre los br de ACF */
    }
    .accordion-content-inner a {
        color: #007bff; /* Color de enlace, similar a text-colorPrimary */
        text-decoration: underline;
    }
    .accordion-content-inner img {
        max-width: 100%;
        height: auto;
        display: block; /* Para que las imágenes no tengan espacio extra debajo */
    }
    /* Contenedor del acordeón */
    .pago-doble-acordeon {
        max-width: 100%;
    }

    /* Oculta el contenido por defecto */
    .pago-doble-acordeon .contenido {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        padding: 0 1rem;
    }

    .pago-doble-acordeon .contenido.active {
        max-height: 500px !important;
        padding: 1rem !important;
    }

    /* Estilo para el título del acordeón */
    .pago-doble-acordeon .titulo {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: bold;
        color: #000;
        width: 100% !important;
    }

    /* Estilo y tamaño del icono SVG */
    .pago-doble-acordeon .titulo .accordion-svg-icon {
        width: 24px !important; /* Fuerza el ancho */
        height: 24px !important; /* Fuerza el alto */
        min-width: 24px;
        transition: transform 0.3s ease-in-out;
    }

    /* Rota el icono cuando el título está activo */
    .pago-doble-acordeon .titulo.active .accordion-svg-icon {
        transform: rotate(90deg);
    }

    div.summary.entry-summary{
        margin-top: 2rem !important;
    }

/* ------------- Estilos específicos para móvil ------------- */

    /* Ajustes en el tamaño de la fuente para el título 
    .accesorios-titulo {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }*/

    /* Ajustes para el contenedor de productos 
    .product-item {
        flex-direction: column; /* Apila la imagen y los detalles verticalmente 
        align-items: flex-start;
        padding: 10px;
    }*/

    /* Ajustes para el contenido del producto 
    .product-content {
        flex-direction: column;
        align-items: flex-start;
    }*/

    /* Reducción del tamaño de la imagen 
    .product-item img {
        width: 50px;
        height: 50px;
        margin-right: 0;
        margin-bottom: 10px; /* Añade espacio debajo de la imagen 
    }*/

    /* Ajustes para el título y el precio 
    .product-item .woocommerce-loop-product__title {
        font-size: 0.8rem;
        white-space: normal; /* Permite que el título ocupe múltiples líneas 
    }

    .product-item .price {
        font-size: 0.9rem;
    }*/

    /* Muestra el botón de añadir al carrito debajo de los detalles 
    .add-to-cart-wrapper {
        margin-left: 0;
        margin-top: 10px; /* Añade espacio encima del botón 
        width: 100%;
    }*/

    /* Reducción del tamaño del botón 
    .add-to-cart-wrapper .button {
        padding: 6px 10px;
        font-size: 0.7rem;
        width: 100%; /* El botón ocupa todo el ancho 
        text-align: center;
    }*/

    .single-product.full-width .upsells ul.products > li.product .product-inner {
    padding: 1.071em;
    /*min-height: 500px !important;*/
    }


}

@media screen and (min-width: 768px) {
    /* ------------- INICIO DEL CSS PARA ESCRITORIO/TABLET ------------- */
    .ficha-tecnica {
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  padding: 16px 20px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.ficha-tecnica h3 {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.ficha-tecnica ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ficha-tecnica li {
  font-size: 0.95rem;
}

.ficha-tecnica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1.5rem;
  background: #fff;
}

.ficha-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #333;
}

.ficha-item img {
  width: 24px;
  height: 24px;
  opacity: 0.8;
}

.ficha-item div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ficha-label {
  font-size: 0.9rem;
  color: #555;
}

.ficha-value {
  font-weight: 500;
  color: #111;
}

@media (max-width: 1024px) {
  .ficha-tecnica-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ficha-tecnica-grid {
    grid-template-columns: 1fr;
  }
}
.ficha-tecnica-grid p {
  margin-bottom: 0;
}




/*
 * SOLUCIÓN STICKY FINAL. 
 * AJUSTA EL VALOR DE 'top' HASTA QUE SE PEGUE JUSTO DEBAJO DE LA CABECERA.
 */


/* 1. ANULACIÓN DE PROPIEDADES CONFLICTIVAS EN CONTENEDORES PADRES */

/* Abarcamos todos los contenedores principales de la plantilla y WooCommerce */
.site-main, 
.site-content, 
.content-area, 
.primary, 
.entry-content,
.woocommerce-tabs,
.woocommerce-tabs-wrapper {
    /* Mantenemos el overflow visible para evitar el fallo más común */
    overflow: visible !important;
    
    /* NEUTRALIZAMOS PROPIEDADES DE CONTEXTO DE APILAMIENTO */
    /* Estas propiedades (transform, perspective, filter) suelen anular el sticky. */
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    
    /* Aseguramos que se mantenga el flujo normal */
    position: static !important;
}

---

/* 2. ESTILO STICKY PARA LA BARRA DE PESTAÑAS */

.woocommerce-tabs .wc-tabs {
    /* La magia del sticky */
    position: sticky !important;
    
    /* La altura que tienes configurada */
    top: 95px !important; 
    
    /* La mantienes siempre visible */
    z-index: 9999 !important; 
    
    /* Estilos de apariencia */
    background-color: #f7f7f7 !important;
    border-bottom: 1px solid #ddd; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    display: flex;
    justify-content: center;
}

/* 3. LIMPIEZA VISUAL (Para que los botones se vean bien) */
.woocommerce-tabs .wc-tabs li {
    margin: 0 10px 0 0 !important;
    padding: 0 !important; 
    border: none !important;
    background: transparent !important;
}

.woocommerce-tabs .wc-tabs li a {
    padding: 10px 15px !important;
    display: block;
}

.woocommerce-tabs .wc-tabs li.active a {
    border-bottom: 3px solid #000000 !important; 
}

    .product_meta{
        margin: 15px 0px;
    }

     /* ESTILOS PARA LOS ACORDEONES MINIMALISTAS */

    .product-accordions-list {
        list-style: none; /* Quita los puntos de la lista */
        margin: 0;
        padding: 0;
        border-top: 1px solid #e5e7eb; /* borde superior, similar a colorBorder */
        margin-bottom: 20px;
    }

    .accordion-item {
        border-bottom: 1px solid #e5e7eb; /* borde inferior */
        padding-top: 8px; /* py-2 de tailwind */
        padding-bottom: 8px; /* py-2 de tailwind */
    }

    .accordion-title-wrapper {
        display: flex;
        gap: 20px; /* Separación entre icono y texto, y entre texto y flecha */
        font-size: 14px; /* text-sm de tailwind */
        justify-content: space-between; /* justify-between de tailwind */
        cursor: pointer;
        align-items: center; /* items-center de tailwind */
        padding: 0 0; /* Si necesitas padding aquí, ajusta. El py-2 ya está en li. */
    }

    .accordion-title-text {
        display: flex;
        align-items: center;
        gap: 8px; /* gap-2 de tailwind */
        font-weight: 500; /* font-medium de tailwind */
        margin: 0; /* Elimina márgenes por defecto de p */
    }

    .accordion-svg-icon {
        display: inline-block;
        width: 1em; /* w-[1em] de tailwind */
        height: 1em; /* h-[1em] de tailwind */
        font-size: 20px; /* text-xl de tailwind, para el tamaño del icono principal */
        stroke-width: 1.5; /* stroke-width de tailwind */
        color: currentColor; /* Usa el color del texto circundante */
    }

    .accordion-arrow-icon {
        display: inline-block;
        width: 20px; /* w-[1em] de tailwind */
        height: 20px; /* h-[1em] de tailwind */
        font-size: 18px; /* text-lg de tailwind */
        transition: transform 0.5s ease-in-out; /* duration-500 de tailwind, para la animación de la flecha */
        stroke: currentColor;
    }

    /* Rotar la flecha cuando el acordeón está activo */
    .accordion-item.active .accordion-arrow-icon {
        transform: rotate(180deg); /* Flecha hacia arriba */
    }

    /* Contenido del acordeón (animación con grid-template-rows) */
    .accordion-content-outer {
        overflow: hidden;
        font-size: 14px; /* text-sm de tailwind */
        display: grid; /* Importante para grid-template-rows */
        grid-template-rows: 0fr; /* Altura inicial 0 */
        transition: grid-template-rows 0.5s ease-in-out; /* Animación de altura */
        margin-top: 0; /* mt-0 de tailwind */
    }

    .accordion-item.active .accordion-content-outer {
        grid-template-rows: 1fr; /* Altura máxima para mostrar el contenido */
    }

    .accordion-content-inner {
        overflow: hidden; /* Necesario para que el contenido no se desborde al animar */
        padding-top: 0;
        padding-bottom: 0; /* Reinicia padding si necesitas controlarlo aquí */
        min-height: 0; /* Necesario para el grid-template-rows 0fr */
    }

    /* Ajustar el padding interno del contenido cuando el acordeón está activo */
    .accordion-item.active .accordion-content-inner {
        padding-top: 10px; /* Ajusta el padding superior si lo necesitas */
        padding-bottom: 10px; /* Ajusta el padding inferior si lo necesitas */
    }


    /* Estilos para el contenido de los acordeones (p, br, a, img) */
    .accordion-content-inner p {
        margin-bottom: 0.5em; /* Espacio entre párrafos dentro del acordeón */
        line-height: 1.5;
    }
    .accordion-content-inner br {
        content: "";
        display: block;
        margin-bottom: 1em; /* Espacio entre los br de ACF */
    }
    .accordion-content-inner a {
        color: #007bff; /* Color de enlace, similar a text-colorPrimary */
        text-decoration: underline;
    }
    .accordion-content-inner img {
        max-width: 100%;
        height: auto;
        display: block; /* Para que las imágenes no tengan espacio extra debajo */
    }
        .pago-doble-acordeon .contenido.active {
        max-height: auto !important;
        padding: 1rem !important;
    }

    /* Si tienes una clase text-colorPrimary en tu tema (Tailwind CSS), puedes usarla así: */
    /* .text-colorPrimary { color: #007bff; } */ /* Reemplaza #007bff con tu color principal */




    /* ESTILOS PARA LAS VARIACIONES DE COLOR (TUS ESTILOS MÁS RECIENTES) */

    /* 1. Contenedor principal de todas las variaciones (para apilar cada opción verticalmente) */
    .vi-wpvs-variation-wrap {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
        width: auto;
        align-self: flex-start;
    }

    /* 2. Contenedor de cada opción de color individual (el cuadrado + el nombre/tooltip) */
    .vi-wpvs-option-wrap {
        display: flex;
        align-items: center;
        gap: 10px;

        border: none;
        padding: 0;
        background-color: transparent;

        width: 100%; /* Mantenemos esto para que cada fila ocupe el ancho completo disponible */
        box-sizing: border-box;

        /* **** IMPORTANTE: ELIMINA O COMENTA ESTA LÍNEA **** */
        /* justify-content: center; */
    }

    /* Estilos para el cuadrado de color real */
    .vi-wpvs-option-wrap .vi-wpvs-option-color {
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 4px;
        border: 1px solid #ccc;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    /* 3. Estilos para el "tooltip" (el nombre del color) */
    .vi-wpvs-option-tooltip {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        margin: 0 !important;
        display: block !important;

        padding: 0;
        text-align: left;
        white-space: nowrap;
        flex-grow: 1;
    }

    /* 4. Estilos para el texto dentro del tooltip */
    .vi-wpvs-option-tooltip span {
        font-size: 14px;
        color: #333;
        vertical-align: middle;
        line-height: 1;
    }

    /* Reglas originales del plugin que se mantienen */
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option-tooltip-top{
        /* bottom: 5px; */
        /* left: 40px; */
        /* width: 200px; */
    }

    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-out-of-stock-attribute{
        display: flex !important;
    }

    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap-out-of-stock-attribute {
        overflow: visible;
    }

    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap:hover .vi-wpvs-option-tooltip-top{
        /* bottom: 0%; */
    }
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap{
        justify-content: initial !important;
    }

    /* Posible solución adicional para la alineación del bloque completo (si aplica a tu tema) */
    .summary.entry-summary {
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: flex-start; */
        /* padding-left: 20px; */
    }


    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap .vi-wpvs-option-tooltip{
        border: none !important;
    }
    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap .vi-wpvs-option-tooltip{
        text-align: left !important;
    }
    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap.vi-wpvs-option-wrap-default{
        box-shadow: none !important;
    }
    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap .vi-wpvs-option-tooltip::before,
    .vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_color_design .vi-wpvs-option-wrap .vi-wpvs-option-tooltip::after
    {
        border-width: 0px !important;
        border-style: none !important;
        margin-left: 0px !important;
        border-color: none !important;
    }
    .vi-wpvs-variation-wrap .vi-wpvs-option-wrap .vi-wpvs-option-tooltip::before {
        content: none !important;
    }
 

  .yith-wcwl-add-to-wishlist, .products > .product .hover-area {
    display: block;
    width: auto !important;
    margin-right: 0px !important;
    margin-top: 5%;
    background-color: #fff0 !important;
  }
    .yith-wcwl-add-to-wishlist span {
      display: inline !important; /* Oculta el texto */
      visibility: visible !important; /* Asegura que no ocupe espacio ni sea accesible */
  }
  .yith-wcwl-add-button {
    width: auto !important;
    height: auto !important;
    overflow: hidden;
    padding: 0;
    width: fit-content !important;
  }

  /*
   PRIMERO: IDENTIFICA Y MANTÉN LA REGLA QUE HACE QUE LA VARIACIÓN SEA VERTICAL EN LA PÁGINA DE PRODUCTO INDIVIDUAL.
   Esto es importante para que las variaciones del producto principal no cambien.
   Podría ser algo como esto (revisa tu CSS existente, quizás en el inspector del navegador):
*/
.single-product .vi-wpvs-variation-wrap-wrap { /* O un selector similar que tu tema/plugin use para la página individual */
    display: flex;
    flex-direction: column; /* Esto es lo que lo hace vertical en la página principal */
    /* Otros estilos que contribuyan a la verticalidad en la página principal */
}

/*
   SEGUNDO: AÑADE ESTAS REGLAS PARA HACER QUE LAS VARIACIONES EN PRODUCTOS RELACIONADOS SEAN HORIZONTALES.
   Estas reglas deben colocarse DESPUÉS de las reglas más generales o las del producto individual
   para que la especificidad CSS funcione correctamente.
*/

/* Contenedor principal de los swatches de color dentro de productos relacionados */
/* Apunta al div.vi-wpvs-variation-wrap-wrap DENTRO de un .product que esté DENTRO de un .products.products (la lista de relacionados) */
.products.products .product .vi-wpvs-variation-wrap-wrap {
    display: flex;
    flex-direction: row; /* ¡ESTA ES LA CLAVE PARA HACERLO HORIZONTAL! */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea si no hay espacio */
    justify-content: flex-start; /* Alinea los colores al inicio */
    align-items: center; /* Alinea verticalmente los colores */
    gap: 5px; /* Espacio entre los círculos de color, ajusta si es necesario */
}

/* El <td> que contiene el div.vi-wpvs-variation-wrap-wrap en los productos relacionados */
/* También lo hacemos flex horizontal para asegurar que el contenido dentro de él se alinee correctamente */
.products.products .product .variations td.value {
    display: flex;
    flex-direction: row; /* Fuerza la horizontalidad también en el td */
    flex-wrap: wrap;
    align-items: center;
    gap: 5px; /* Espacio entre el <select> (si es visible) y los swatches */
    padding: 0; /* Elimina cualquier padding que pueda estar apilando los elementos */
    line-height: 1; /* Puede ayudar con la alineación vertical */
}

/* Ocultar el desplegable <select> si el plugin lo muestra y solo quieres los swatches de color */
.products.products .product .vi-wpvs-select-attribute {
    display: none;
}

/* Ocultar el label "Color" (th.label) si aparece en los productos relacionados y no lo deseas */
.products.products .product .variations th.label {
    display: none;
}

/* Ajustes para cada opción de color individual (el círculo/cuadrado) */
.products.products .product .vi-wpvs-option-wrap {
    margin: 0 2px 2px 0; /* Pequeño margen entre los círculos de color */
    cursor: pointer;
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 50%; /* Asegura que sean círculos si el tema los hace cuadrados por defecto */
    width: 20px; /* Tamaño del círculo, ajusta según necesidad */
    height: 20px; /* Tamaño del círculo, ajusta según necesidad */
    box-sizing: border-box; /* Incluye padding/border en el tamaño total */
    display: flex; /* Para centrar el color si el span interno no ocupa todo el espacio */
    justify-content: center;
    align-items: center;
}

/* El span interno que define el color real */
.products.products .product .vi-wpvs-option-wrap .vi-wpvs-option-color {
    width: 100%;
    height: 100%;
    display: block; /* Asegura que el color se aplique correctamente */
    border-radius: 50%; /* Asegura que el color interno sea circular */
}

/* Estilo para el tooltip, para que no rompa el layout horizontal */
.products.products .product .vi-wpvs-option-tooltip {
    white-space: nowrap; /* Evita que el texto del tooltip salte de línea */
}

/*
   ESTILOS PARA LAS VARIACIONES EN PRODUCTOS RELACIONADOS, VENTAS CRUZADAS, PRODUCTOS COMPLEMENTARIOS
   (SECCIONES SECUNDARIAS DENTRO DE LA PÁGINA DE PRODUCTO INDIVIDUAL)
   Utilizamos 'section.related.products' para asegurar la máxima especificidad para esta sección.
*/

/* --- Productos Relacionados --- */
/* Contenedor principal de los swatches de color dentro de productos relacionados */
section.related.products .product .vi-wpvs-variation-wrap-wrap {
    display: flex;
    flex-direction: row; /* Horizontal */
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

/* El <td> que contiene el div.vi-wpvs-variation-wrap-wrap en los productos relacionados */
section.related.products .product .variations td.value {
    display: flex;
    flex-direction: row; /* Fuerza la horizontalidad también en el td */
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 0;
    line-height: 1;
}

/* Ocultar el desplegable <select> si el plugin lo muestra y solo quieres los swatches de color */
section.related.products .product .vi-wpvs-select-attribute {
    display: none;
}

/* Ocultar el label "Color" (th.label) si aparece en los productos relacionados y no lo deseas */
section.related.products .product .variations th.label {
    display: none;
}

/* Ajustes para cada opción de color individual (el círculo/cuadrado) */
section.related.products .product .vi-wpvs-option-wrap {
    margin: 0 2px 2px 0;
    cursor: pointer;
    border: 1px solid #ddd;
    /* border-radius: 50%; Asegura que sean círculos si el tema los hace cuadrados por defecto */
    /*width: 20px;  Tamaño del círculo, ajusta según necesidad */
  /*  height: 20px; Tamaño del círculo, ajusta según necesidad */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El span interno que define el color real */
section.related.products .product .vi-wpvs-option-wrap .vi-wpvs-option-color {
    width: 100%;
    height: 100%;
    display: block;
   /* border-radius: 50%;*/
}

/* Estilo para el tooltip, para que no rompa el layout horizontal */
section.related.products .product .vi-wpvs-option-tooltip {
    white-space: nowrap;
}

/*
   SOLUCIÓN PARA VARIACIONES HORIZONTALES EN PRODUCTOS RELACIONADOS.
   Esta regla anula la regla conflictiva y fuerza la horizontalidad.
*/

/* Ocultar la regla conflictiva específica del plugin si es necesario */
/* Esto intentará anular cualquier comportamiento vertical de ese selector específico en los relacionados */
section.related.products .vi_wpvs_loop_variation_slider.vi_wpvs_loop_variation_form_check .vi-wpvs-variation-wrap {
    display: flex !important; /* Asegura que el contenedor es flex */
    flex-direction: row !important; /* Fuerza la horizontalidad */
    max-height: none !important; /* Anula cualquier restricción de altura que pueda causar saltos de línea no deseados */
    flex-wrap: wrap !important; /* Permite que los elementos salten a la siguiente línea si no hay espacio */
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Las reglas que ya tenías para los elementos internos y ocultar el tooltip, combinadas y reforzadas: */

/* Contenedor principal de los swatches de color dentro de productos relacionados */
section.related.products .product .vi-wpvs-variation-wrap-wrap,
section.upsells.products .product .vi-wpvs-variation-wrap-wrap,
section.cross-sells.products .product .vi-wpvs-variation-wrap-wrap {
    display: flex !important;
    flex-direction: row !important; /* ¡FUERZA LA HORIZONTALIDAD! */
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 5px !important;
}

section.related.products .product .variations td.value,
section.upsells.products .product .variations td.value,
section.cross-sells.products .product .variations td.value {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Ocultar el desplegable <select> y el label "Color" */
section.related.products .product .vi-wpvs-select-attribute,
section.upsells.products .product .vi-wpvs-select-attribute,
section.cross-sells.products .product .vi-wpvs-select-attribute,
section.related.products .product .variations th.label,
section.upsells.products .product .variations th.label,
section.cross-sells.products .product .variations th.label {
    display: none !important;
}

/* Ajustes para cada opción de color individual (el círculo/cuadrado) */
section.related.products .product .vi-wpvs-option-wrap,
section.upsells.products .product .vi-wpvs-option-wrap,
section.cross-sells.products .product .vi-wpvs-option-wrap {
    margin: 0 2px 2px 0 !important;
    cursor: pointer;
    border: 1px solid #ddd !important;
    /*border-radius: 50% !important;*/
    /*width: 20px !important;*/
    /*height: 20px !important;*/
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* El span interno que define el color real */
section.related.products .product .vi-wpvs-option-wrap .vi-wpvs-option-color,
section.upsells.products .product .vi-wpvs-option-wrap .vi-wpvs-option-color,
section.cross-sells.products .product .vi-wpvs-option-wrap .vi-wpvs-option-color {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    /*border-radius: 50% !important;*/
}

/* Ocultar el tooltip */
section.related.products .product .vi-wpvs-option-tooltip,
section.upsells.products .product .vi-wpvs-option-tooltip,
section.cross-sells.products .product .vi-wpvs-option-tooltip {
    display: none !important;
}


/*
   ASEGÚRATE DE QUE LA VARIACIÓN DEL PRODUCTO PRINCIPAL SIGA SIENDO VERTICAL.
   Esta regla es para el producto principal y no debe tener !important en las propiedades de flex-direction
   a menos que sea absolutamente necesario para anular otros estilos de tu tema/plugin.
   Idealmente, el tema o el plugin ya manejan la verticalidad del producto principal.
*/
.single-product .summary .variations .vi-wpvs-variation-wrap-wrap {
    display: flex;
    flex-direction: column; /* Vertical (sin !important aquí para no entrar en guerra con las reglas de arriba) */
    /* Otros estilos que tu tema/plugin use para la disposición vertical aquí */
}

.single-product .summary .variations td.value {
    display: block; /* O flex con flex-direction: column si es necesario */
}


.pago-doble-acordeon {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pago-doble-acordeon .columna {
  flex: 1 1 45%;
  border-bottom: 1px solid #ccc;
  border-radius: 0px;
  overflow: hidden;
}

.pago-doble-acordeon .titulo {
  padding: 10px 15px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  justify-content: space-between;
  align-items: center;
}

.pago-doble-acordeon .contenido {
  display: none;
  padding: 10px 15px;
  background: #fff;
}

.pago-doble-acordeon .titulo.active .chevron {
  transform: rotate(90deg);
}

svg.accordion-arrow-iconn {
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
}


/* ------------- parte accesorios ------------- */
/* Contenedor principal para la lista de accesorios */
.accesorios-lista-container {
    padding-top: 15px; /* Reducido */
    margin-top: 15px; /* Reducido */
}

/* Título de la sección */
.accesorios-titulo {
    font-size: 1.25rem; /* Reducido */
    font-weight: 700;
    margin-bottom: 1rem; /* Reducido */
}

/* Contenedor de la lista de productos */
.accesorios-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reducido */
}

/* Contenedor del producto */
.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* Aseguramos que la altura se base en el contenido (imagen) */
    height: auto;
}

/* Contenedor de la imagen y los detalles */
.product-content {
    display: flex;
    align-items: flex-start; /* Alinea los elementos en la parte superior del contenedor */
    flex: 1;
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
}

/* La imagen del producto, actúa como referencia de altura */
.product-item img {
    width: 60px; /* Tamaño fijo de la imagen */
    height: 60px; /* Altura fija para que el contenido se ajuste */
    margin-right: 1rem;
    border-radius: 4px;
    object-fit: contain; /* Asegura que la imagen se ajuste dentro de las dimensiones */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Detalles del producto (título y precio) */
.product-details {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    /* height: 60px; Limita la altura del contenedor de texto al de la imagen */
    overflow: hidden; /* Oculta texto que se desborda */
}

.product-item .woocommerce-loop-product__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    /* Opcional: para evitar que los títulos largos se desborden */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* Precio del producto */
.product-item .price {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin-top: 5px;
}
.single-product .price{
    margin-bottom: 0px !important;
}
/* Contenedor del botón */
.add-to-cart-wrapper {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

/* Estilos del botón */
.add-to-cart-wrapper .button {
    background: #333 !important;
    color: #fff !important;
    border: none;
    border-radius: 4px; /* Reducido */
    padding: 8px 12px; /* Reducido */
    font-size: 0.8rem; /* Reducido */
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-to-cart-wrapper .button:hover {
    background: #555 !important;
}

.add-to-cart-wrapper .button .dashicons {
    font-size: 1.1rem; /* Reducido */
    line-height: 1;
}
  section.up-sells.upsells.products{
    display: none !important;
  }
    /* ------------- FIN DEL CSS PARA ESCRITORIO/TABLET ------------- */
}