/*
Theme Name: Gala importaciones HE
Theme URI: 
Template: hello-elementor
Author: Kruger media
Version: 1.0.5
*/
/* Abajo coloca todos tus estilos */
.woocommerce-loop-product__title {
	color: #000;
}
.elementor-menu-cart__product-name a{
	color: #000;
}

.wc-block-components-product-name{
	color: #000;
}

/* Cambios woocommerce por defecto*/

.wc-block-cart__submit-container a:hover{
	color: #F6A016;
}


/* MARCA INGCO */

/* Estilo para el botón de la marca INGCO */
.categoria-producto-ingco .add_to_cart_button {
    background-color: #F6A016 !important;
    color: #000000 !important;  
}

/* Estilo para el botón de INGCO al pasar el mouse (hover) */
.categoria-producto-ingco .add_to_cart_button:hover {
    background-color: black !important; /* Naranja un poco más oscuro */
    color: white !important;
}


/* MARCA WADFOW */

/* Estilo para el botón de la marca WADFOW */
.categoria-producto-wadfow .add_to_cart_button {
    background-color: #0030A4 !important; /* Color de fondo Azul WADFOW */
    color: #FFFFFF !important;          
}

/* Estilo para el botón de WADFOW al pasar el mouse (hover) */
.categoria-producto-wadfow .add_to_cart_button:hover {
    background-color: black !important; /* Azul un poco más oscuro */
    color: #FFFFFF !important;
}


/* --- Estilos adicionales --- */

/* Estilo general para el título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	  font-weight: 600;
}

/* Estilo general para el precio del producto */
.woocommerce ul.products li.product .price {
    font-size: 28px !important;
    color: #000000 !important;
	  font-weight: 500;
}

/* --- Estilos para unificar el diseño de los productos --- */

/* 1. Estilo base para cada tarjeta de producto */
.woocommerce ul.products li.product {
    background-color: #FFFFFF; 
    border-radius: 25px;       
    padding: 20px;            
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); 
    transition: transform 0.3s ease, box-shadow 0.1s ease; 
    display: flex;
    flex-direction: column; 
    position: relative; /* necesario para posicionar el badge absolute en la tarjeta */
}

/* Efecto al pasar el ratón sobre el producto */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}
/* 2 Botón general */
.add_to_cart_button {
  border-radius: 15px !important;
	padding: 20px 20px 20px 20px !important;
	text-align: center;
}
/* 3. Asegurar que el contenido principal (imagen, título, precio) crezca */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    flex-grow: 1; /* Hace que esta sección ocupe todo el espacio vertical disponible */
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Quita el subrayado del enlace */
}

/* 4. Asegurar que el título también sea flexible para empujar el precio hacia abajo */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    flex-grow: 1;
}

/* 5. Asegurar que el botón "Añadir al carrito" se quede al final */
.woocommerce ul.products li.product .button {
    margin-top: auto; /* Empuja el botón a la parte inferior de la tarjeta */
}

/* --- Estilos para el texto "Precio normal" --- */

/* Estilo general para el texto antes del precio */
.woocommerce ul.products li.product .price::before {
    content: "Precio normal";      /* El texto que se mostrará */
    display: block;                /* Lo pone en una línea separada */
    font-size: 14px;               /* El tamaño de fuente que pediste */
    font-weight: 500;              /* Un grosor de fuente normal */
    margin-top: 10px;            /* Espacio entre el texto y el precio */
}

/* Color del texto para la marca INGCO */
.woocommerce ul.products li.product.categoria-producto-ingco .price::before {
    color: #F6A016; /* Color Naranja INGCO */
}

/* Color del texto para la marca WADFOW */
.woocommerce ul.products li.product.categoria-producto-wadfow .price::before {
    color: #0030A4; /* Color Azul WADFOW */
}

/* --- Estilos para textos adicionales en el precio --- */

/* 1. Añade el texto "USD" junto al precio */
.woocommerce ul.products li.product .price .woocommerce-Price-amount.amount bdi::after {
    content: " USD"; /* Añade el texto USD después del número */
    font-size: 16px;   /* Tamaño de 16px */
    color: #000000;   /* Color negro */
    font-weight: normal; /* Asegura que no esté en negrita */
    padding-left: 5px; /* Pequeño espacio para separarlo del número */
}

/* 2. Añade el texto "El precio no incluye IVA" debajo del precio */
.woocommerce ul.products li.product .price::after {
    content: "El precio no incluye IVA"; /* El texto que se mostrará */
    display: block;                      /* Lo pone en una línea separada debajo */
    font-size: 14px;                     /* Tamaño de 14px */
    color: #000000;                     /* Color negro */
    font-weight: normal;                 /* Asegura que no esté en negrita */
    margin-top: 5px;                     /* Espacio para separarlo del precio */
}



/* --- Estilos para unificar altura de imágenes y truncar títulos --- */

/* 1. Unificar altura de imágenes y mantener proporción */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
    height: 150px; 
    width: auto !important;   
    object-fit: contain; 
}

/* 2. Limitar el título del producto a 3 líneas (CORREGIDO) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Número máximo de líneas a mostrar */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em; 
    height: 4.6em; 
}



    .tienda-buscador ul.products.columns-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr); 
    }

    .tienda-buscador ul.products.columns-4::before {
            display: none;
    }


.label-redonda{
	border-radius: 0 0 10px 0;
}

/* Estilos para el badge de oferta personalizado */
.onsale{
    background-color: #FF3B30 !important; /* fondo solicitado */
    color: #ffffff !important;
    padding: 6px 12px !important; /* ajustar tamaño del rectángulo */
    border-radius: 0 0 20px 0 !important; /* solo esquina inferior derecha */
    font-weight: 700;
    line-height: 1;
    text-transform: none;
}

/* Para asegurar que el badge se vea rectangular y no como un círculo en temas que fuerzan height/width */
.woocommerce ul.products li.product .onsale,
.woocommerce .onsale{
    min-width: 44px;
    height: auto;
    white-space: nowrap;
}

/* Cuando el listado de productos esté en grid (columns-4) mostrar el badge a la izquierda */
.tienda-buscador ul.products.columns-4 li.product .onsale,
.woocommerce ul.products.columns-4 li.product .onsale {
    right: -13px !important; /* mover a la izquierda */
    top: -13px !important;
    border-radius: 0 0 0 20px !important; /* solo esquina inferior derecha */
}

/* generales */
.site-main{
	margin-top: 25px;
}

.dos-lineas-title .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* estilos carrito vacio bloques */

.wc-block-grid__product {
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: left !important;
    padding: 30px !important;
    max-width: 24% !important;
}

.wc-block-grid__product-title {
    color: black !important;
    list-style: none !important;
    text-decoration: none !important;
}

.wc-block-grid__product a{
    text-decoration: none !important;
}

.wc-block-grid__product-price {
    color: black;
    font-size: 28px;
    font-weight: 600;
}

.wc-block-grid__product-price::after {
    content: "USD"; /* Añade el texto USD después del número */
    font-size: 16px;   /* Tamaño de 16px */
    color: #000000;   /* Color negro */
    font-weight: normal; /* Asegura que no esté en negrita */
    padding-left: 5px; /* Pequeño espacio para separarlo del número */
}



.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    color: #F6A016;
}

.wc-block-grid__products {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.wc-block-grid__product-image img {
    height: 200px !important;
    object-fit: cover;
    width: 100%;
}

/* MARCA INGCO - Botón Rojo */
.wc-block-grid__product-add-to-cart a[aria-label*="INGCO"] {
    background-color: #F6A016 !important;
    color: black !important;
    font-size: 16px !important;
}

.wc-block-grid__product-add-to-cart a:hover {
    background-color: black !important;
    color: white !important;
}

/* MARCA WADFOW - Botón Azul */
.wc-block-grid__product-add-to-cart a[aria-label*="WADFOW"] {
    background-color: #0030A4;
    color: white !important;
    font-size: 16px !important;
}

.wp-block-woocommerce-cart {
        margin: auto;
    }

@media (max-width: 1024px) {
    .tienda-buscador ul.products.columns-4 {
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
    }

    .tienda-buscador ul.products.columns-4::before {
            display: none;
    }
    .wc-block-grid__product {
    max-width: 48% !important;
    }
}

@media (max-width: 480px) {
    .tienda-buscador ul.products.columns-4 {
            display: grid;
            grid-template-columns: repeat(1, 1fr); 
    }

    .tienda-buscador ul.products.columns-4::before {
            display: none;
    }
    .wc-block-grid__product {
    max-width: 100% !important;
    }
}



/* Eliminar cualquier tachado/line-through en los precios (listado y ficha) */
.woocommerce .price del,
.woocommerce .price .woocommerce-Price-amount del,
.woocommerce .price del span,
.woocommerce .price .amount del,
.woocommerce .price strike,
.woocommerce .price .woocommerce-Price-amount.amount strike {
    
    font-size: 18px !important;
}

/* Asegurar que el precio rebajado no aparezca con línea inferior ni tachado */
.woocommerce .price .amount,
.woocommerce .price .woocommerce-Price-amount.amount,
.price ins,
.price ins .amount {
    text-decoration: none !important;
}

/* Estilos para el botón de finalizar compra */
.wc-proceed-to-checkout .checkout-button,
.checkout-button.button.alt.wc-forward {
    background-color: black !important;
    color: white !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
.checkout-button.button.alt.wc-forward:hover {
    color: #F6A016 !important;
    background-color: black !important; /* Mantener fondo negro en hover */
}

/* Ajuste visual para campo de cantidad en carrito WooCommerce */
.woocommerce .quantity input.input-text.qty {
  width: 8ch !important;           /* Espacio suficiente para 3 dígitos */
  padding: 0.4rem 0.6rem !important;
}

/* Responsive para móviles */
@media (max-width: 480px) {
  .woocommerce .quantity input.input-text.qty {
    width: 9ch !important;
  }
}

/* Cambia el color del nombre del producto en el carrito */
.woocommerce-cart .product-name a {
  color: #000000; /* negro */
}

.woocommerce-table__product-name a {
  color: #0030A4; /* Cambia este valor por el color que prefieras */
}

/*
 * Centrar verticalmente el texto en los campos de búsqueda de WooCommerce (Select2)
 */
.woocommerce-checkout .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: 44px !important; /* Ajustar si es necesario para que coincida con otros campos */
}

/*
 * Corregir color de texto en opciones de Select2 al pasar el mouse.
 * Asegura que el texto sea blanco cuando una opción está resaltada (hover),
 * incluso si ya estaba seleccionada.
 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    color: #ffffff !important;
}

/* Estilo para el enlace 'Ver carrito' (added_to_cart wc-forward) */
a.added_to_cart.wc-forward,
.added_to_cart.wc-forward {
    color: #000000 !important; /* color negro por defecto */
    padding: 15px !important;    /* padding solicitado */
    text-decoration: none !important; /* sin subrayado por defecto */
    display: inline-block; /* para que el padding afecte correctamente */
    transition: box-shadow .12s ease, color .12s ease; /* transición suave */
}

/* Al pasar el ratón: mostrar una línea en la parte inferior (sin cambiar layout) */
a.added_to_cart.wc-forward:hover,
.added_to_cart.wc-forward:hover {
    color: #000000 !important;
    text-decoration: none !important;
    /* usar box-shadow inset para simular una línea inferior sin mover elementos */
    box-shadow: inset 0 -2px 0 #000000;
}

/* Responsive fixes: evitar que elementos se salgan de la pantalla en móvil */
/* Usar box-sizing border-box global para evitar cálculos de ancho que desborden */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Asegurar que las imágenes no excedan su contenedor */
.woocommerce img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product img {
    max-width: 100%;
    height: auto; /* mantener proporción */
}

/* Evitar overflow horizontal en bloques principales del carrito */
.wp-block-woocommerce-cart,
.wc-block-grid__products,
.woocommerce ul.products {
    max-width: 100%;
    overflow-x: hidden;
}

/* Reducir paddings y tamaños en pantallas pequeñas para evitar que se salgan */
@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        padding: 12px; /* menos padding en tarjetas */
    }
    .wc-block-grid__product {
        padding: 12px !important;
        max-width: 48% !important;
    }
    a.added_to_cart.wc-forward,
    .added_to_cart.wc-forward {
        padding: 8px !important;
    }
    /* Evitar que el badge "onsale" sobresalga y provoque overflow en móviles */
    .woocommerce ul.products li.product .onsale,
    .woocommerce ul.products.columns-4 li.product .onsale {
        right: 0 !important;
        left: auto !important;
        top: 8px !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products li.product {
        padding: 10px;
    }
    .wc-block-grid__product {
        padding: 10px !important;
        max-width: 100% !important;
    }
    /* Asegurar que el contenedor del carrito utilice scroll interno si algo excede */
    .wp-block-woocommerce-cart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix: evitar que el bloque "alignwide" de WooCommerce desborde en responsive */
.woocommerce.wp-block-group.alignwide,
.wp-block-group.alignwide.woocommerce {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto; /* permitir scroll si algo sobrepasa */
}

/* Asegurar que las notificaciones no provoquen overflow */
.woocommerce-notices-wrapper,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
    max-width: 100%;
    word-break: break-word;
    white-space: normal;
}

/* Hacer la tabla del carrito responsiva: permitir scroll horizontal y que las celdas puedan ajustar el texto */
.woocommerce .shop_table_responsive,
.woocommerce .woocommerce-cart-form .shop_table,
.woocommerce table.shop_table {
    width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    white-space: normal;
    word-break: break-word;
}

/* Reducir thumbnails en móvil para evitar que empujen la tabla */
@media (max-width: 768px) {
    .woocommerce .product-thumbnail img,
    .woocommerce table.shop_table img {
        max-width: 80px;
        height: auto;
    }

    .woocommerce .product-name a {
        font-size: 14px;
    }

    /* Ajustes de anchura de columnas para mejorar el flujo */
    .woocommerce .shop_table_responsive .product-remove,
    .woocommerce .shop_table_responsive .product-thumbnail {
       
        white-space: nowrap;
    }
    .woocommerce .shop_table_responsive .product-name {
        width: auto;
    }
    .woocommerce .product-remove {
        width: 50px;
    }
}

/* --- Fix específico: evitar que el contenido interno de .page-content se desplace a la izquierda --- */
/* Centrar y forzar límites en el bloque alignwide de WooCommerce dentro de .page-content */
.page-content > .woocommerce.wp-block-group.alignwide,
.page-content .wp-block-group.alignwide.woocommerce {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important; /* ocupar todo el ancho disponible */
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    min-width: 0 !important; /* permitir que los hijos puedan reducir su ancho */
}

/* Permitir que los elementos hijos dentro del bloque reduzcan su ancho (evita overflow por flex) */
.page-content .woocommerce.wp-block-group.alignwide * {
    min-width: 0 !important;
}

/* Asegurar que la tabla del carrito ocupe 100% del ancho disponible */
.woocommerce .shop_table,
.woocommerce .shop_table_responsive,
.woocommerce table.shop_table {
    min-width: 0 !important;
    width: 100% !important;
    display: table !important; /* asegurar que la tabla respete su ancho */
    table-layout: auto !important;
}

/* Forzar que el formulario del carrito ocupe todo el ancho disponible en vista de escritorio */
.page-content .woocommerce-cart-form,
.page-content .wp-block-woocommerce-cart,
.page-content .woocommerce.wp-block-group.alignwide .woocommerce-cart-form,
.page-content > .wp-block-woocommerce-cart,
.page-content > .woocommerce.wp-block-group.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Forzar centrar el bloque de carrito inmediato como último recurso */
.page-content > .wp-block-woocommerce-cart,
.page-content > .woocommerce.wp-block-group.alignwide {
    display: block !important;
    margin: 0 auto !important;
}

/* Notas: si esto no resuelve completamente, puedo añadir un pequeño script que
   en la carga del carrito haga `container.scrollLeft = 0;` sobre el bloque con overflow.
   Prefiero una solución CSS; avísame si quieres el fallback JS. */