/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


body, html{
	overflow-x: hidden;
}

#elementor-menu-cart__toggle_button{
	transition: transform .3s;
	&:hover{
		transform: scale(1.2);
	}
}

.menu-hover-grow ul li a:hover{
	transform: scale(1.05);
}

@media (max-width:767px){
	.eael-img-accordion{
		row-gap: 10px;
	}
	
	#eael-img-accordion-7bbfcbc > .eael-image-accordion-item.overlay-active > div > div{
		padding: 10px;
	}
}

nav.woocommerce-breadcrumb a{
	font-weight: 400;
}

.margin-top-auto{
	margin-top: auto;
}

.elementor-widget-button .elementor-button-text{
	text-transform: uppercase;
}

tr.woocommerce-shipping-totals.shipping > td > form > a{
	color: #FFD700 !important;
	background: #00335E !important;
	padding: 5px 10px;
	border-radius: 25px;
	transition: all .3s;
	&:hover{
		color: #FFF !important;
		background: #00335E !important;
	}
}

div.oferta-izquierda > div > div,
div.oferta-izquierda > div > div > div > div{
	height: 100%;
}

.mas-nuevo > div{
	padding-bottom: 0 !important;
}






/* Deshabilitar la opción de expandir (resize) para todos los campos de textarea */
textarea {
    resize: none !important;
}




/* QUITAR BORDER EL FOCUS EN FORMULARIOS clase CSS: no-focus-line*/
/* SOLO formularios con la clase no-focus-line */
.no-focus-line .elementor-form input:focus,
.no-focus-line .elementor-form textarea:focus,
.no-focus-line .elementor-form select:focus,
.no-focus-line .elementor-field-group input:focus,
.no-focus-line .elementor-field-group textarea:focus,
.no-focus-line .elementor-field-group select:focus {
  outline: none !important;
  box-shadow: none !important;
}






/* Oculta el título "Descripción" cuando el producto no tiene contenido */
body.no-prod-desc .pdesc-title {
  display: none !important;
}

/* Opcional: también oculta el bloque del editor para que no deje espacio */
body.no-prod-desc .pdesc-body {
  display: none !important;
}






/* ALINEACIÓN DE PRODUCTOS EN PÁGINA DE TIENDA/PRODUCTOS Y CATEGORIAS */
/* ALINEACIÓN DE PRODUCTOS EN PÁGINA DE TIENDA/PRODUCTOS Y CATEGORIAS */
/* =========================================
   Loop Grid: igualar alturas de textos + alinear botón
   Clase en el widget Loop Grid: loop-eq
   (Solo DESKTOP para no romper responsive)
========================================= */

@media (min-width: 1025px){

  /* 0) Cada item ocupa alto completo para poder “pegar” el botón abajo */
  .loop-eq .elementor-loop-container > [data-elementor-type="loop-item"]{
    height: 100%;
  }

  /* 1) Convertimos el “card” (la parte del item) en columna */
  .loop-eq .elementor-loop-container > [data-elementor-type="loop-item"] .e-con,
  .loop-eq .elementor-loop-container > [data-elementor-type="loop-item"] .e-container,
  .loop-eq .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-section{
    height: 100%;
  }

  /* 2) El contenedor que envuelve TEXTO + BOTÓN (no imagen) debe ser columna */
  .loop-eq .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 3) TÍTULO: reservamos espacio fijo (2 líneas) para alinear todo */
  .loop-eq .woocommerce-loop-product__title,
  .loop-eq .elementor-heading-title{
    line-height: 1.25;
    /* reserva aprox 2 líneas */
    min-height: calc(1.25em * 2);
    margin-bottom: 10px;

    /* opcional: evita que títulos enormes rompan el layout */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* 4) PRICE + DISPONIBILIDAD: mantenlos “en bloque” y consistentes */
  .loop-eq .price,
  .loop-eq .woocommerce-Price-amount,
  .loop-eq .stock,
  .loop-eq .woocommerce-stock-amount{
    display: block;
    margin-bottom: 10px;
  }

  /* 5) BOTÓN SIEMPRE ABAJO (lo empuja al fondo del card) */
  .loop-eq .elementor-button-wrapper,
  .loop-eq .woocommerce a.button,
  .loop-eq .add_to_cart_button,
  .loop-eq .product_type_simple{
    margin-top: auto !important;
  }

  /* 6) Si tu botón está dentro de un contenedor, aseguramos que ese contenedor pueda bajar */
  .loop-eq .elementor-widget-button{
    margin-top: auto !important;
  }

}








/* ALINEACIÓN Y ARREGLO DEL SELECT/SELECTOR DE PAGINA MIS FAVORITOS */
/* ============================
   Favoritos (TI Wishlist) - Barra de acciones
   Wrapper: .fav-wishlist (asignada en Elementor)
============================ */

.fav-wishlist .tinvwl-input-group.tinvwl-no-full{
  display: flex;
  align-items: center;
  justify-content: center; /* centra el select + botón */
  gap: 12px;
}

/* SELECT: centra el texto "Acciones" y deja espacio interno */
.fav-wishlist #tinvwl_product_actions{
  text-align: center;        /* centra el texto */
  text-align-last: center;   /* centra el item seleccionado (Chrome/Edge) */
  padding-left: 18px;
  padding-right: 44px;       /* espacio para la flecha */
  min-height: 44px;
  border-radius: 999px;      /* look tipo píldora como en tu screenshot */
  
  /* quitamos flecha nativa y ponemos una propia para moverla hacia la izquierda */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center; /* <- mueve la flecha hacia la izquierda */
  background-size: 14px 14px;
}

/* Opciones: normalmente se ven mejor alineadas a la izquierda al abrir el dropdown */
.fav-wishlist #tinvwl_product_actions option{
  text-align: left;
}

/* Botón "Aplicar Acción" alineado y con alto consistente */
.fav-wishlist .tinvwl-input-group-btn .button{
  min-height: 44px;
  border-radius: 999px;
}







/* ALINEACIÓN ARREGLO DE OFERTAS SEMANALES EN HOME */
/* =========================================
   OFERTAS SEMANALES (HOME)
   Desktop ONLY (>=1025px)
   Contenedor padre: .of-week
   Loop grid izq: .oferta-izquierda
   Loop grid der: .ofertas-r
========================================= */

@media (min-width: 1025px){

  /* Variables de tamaño (se sobreescriben por breakpoint) */
  .of-week{
    --of-gap: 20px;     /* separación entre las 2 cards derechas */
    --ofr-h: 320px;     /* alto de CADA card derecha */
  }

  /* Gap real del loop grid derecho (para que coincida con la fórmula) */
  .of-week .ofertas-r .elementor-loop-container.elementor-grid{
    gap: var(--of-gap) !important;
  }

  /* Quitar min-heights gigantes heredados (izq + der) */
  .of-week .e-loop-item .elementor-element-b73f5d9,
  .of-week .e-loop-item .elementor-element-2bfa2fd7{
    min-height: 0 !important;
  }

  /* ====== ALTURAS CLAVE ====== */

  /* Derecha: cada card con alto fijo (más pequeño) */
  .of-week .ofertas-r .e-loop-item .elementor-element-2bfa2fd7{
    height: var(--ofr-h) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden; /* por seguridad */
  }

  /* Izquierda: alto = 2 cards derechas + gap */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9{
    height: calc((var(--ofr-h) * 2) + var(--of-gap)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  /* ====== ESTRUCTURA INTERNA (izq + der) ====== */
  .of-week .e-loop-item .elementor-element-b73f5d9,
  .of-week .e-loop-item .elementor-element-2bfa2fd7{
    border-radius: 22px !important;
    padding: 16px !important; /* compacto */
  }

  /* Asegurar columna interna (izq tiene e-con-inner) */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9 > .e-con-inner{
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
  }

  /* Derecha usa contenedor intermedio (ec4b980) */
  .of-week .ofertas-r .e-loop-item .elementor-element-ec4b980{
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
  }

  /* Bloque texto */
  .of-week .e-loop-item .box-description{
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Botón: no empujar de más */
  .of-week .e-loop-item .anim-btn{
    margin-top: 6px !important;
  }
  .of-week .e-loop-item .anim-btn .elementor-button{
    border-radius: 999px !important;
  }

  /* ====== IMAGEN (sube y se hace proporcional) ====== */
  /* Contenedor de imagen: ocupa “lo que queda” y pega abajo */
  .of-week .e-loop-item .elementor-element-649f2af,
  .of-week .e-loop-item .elementor-element-4eb1446a{
    margin-top: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0 !important; /* IMPORTANTÍSIMO: deja que la altura la controle la card */
  }

  /* El template derecho trae margin-top negativo: lo anulamos */
  .of-week .e-loop-item .elementor-element-4eb1446a{
    margin-top: auto !important;
  }

  /* Centrado del widget de imagen + link */
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image,
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image a{
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  /* Imagen: límite de alto (para que realmente baje la card) */
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image img{
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto !important;
    max-width: 78% !important;
    max-height: 150px !important;  /* <-- clave: reduce alto visible */
  }

  /* ====== TIPOGRAFÍA / BOTÓN (proporcional) ====== */
  .of-week .e-loop-item .elementor-element-24bbd31 .elementor-heading-title,
  .of-week .e-loop-item .elementor-element-8680ba9 .elementor-heading-title{
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .of-week .e-loop-item .elementor-element-bb5cc99 .elementor-heading-title,
  .of-week .e-loop-item .elementor-element-64c99821 .elementor-heading-title{
    font-size: 19px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .of-week .e-loop-item .elementor-element-cc7c88b .elementor-heading-title,
  .of-week .e-loop-item .elementor-element-674a7ada .elementor-heading-title{
    font-size: 30px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }

  .of-week .e-loop-item .anim-btn .elementor-button{
    font-size: 19px !important;
    padding: 9px 46px !important;
  }

  /* =========================================
     BREAKPOINTS – ajustan SOLO los targets (alto + imagen + tipografía)
  ========================================= */

  /* Desktop grande */
  @media (min-width: 1200px){
    .of-week{
      --of-gap: 20px;
      --ofr-h: 300px;  /* más bajo aún */
    }
    .of-week .e-loop-item .elementor-widget-theme-post-featured-image img{
      max-height: 140px !important;
      max-width: 76% !important;
    }
  }

  /* Laptop/desktop estándar */
  @media (min-width: 1025px) and (max-width: 1199px){
    .of-week{
      --of-gap: 18px;
      --ofr-h: 310px;
    }
  }

  /* =========================================
     AJUSTE VISUAL: subir imágenes DERECHA + agrandar imágenes (izq y der)
     (Pegar al FINAL del CSS)
  ========================================= */

  /* 1) Agrandar TODAS las imágenes (sin deformar) */
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 86% !important;      /* antes 78% */
    max-height: 175px !important;   /* antes 150px */
  }

  /* 2) Derecha: subir MUCHO la imagen para quitar “aire amarillo” */
  .of-week .ofertas-r .e-loop-item .elementor-element-649f2af,
  .of-week .ofertas-r .e-loop-item .elementor-element-4eb1446a{
    align-items: center !important;      /* ya no pegada al fondo */
    padding-bottom: 20px !important;     /* micro ajuste */
  }

  /* subimos la imagen como tal (más agresivo) */
  .of-week .ofertas-r .e-loop-item .elementor-widget-theme-post-featured-image{
    transform: translateY(-50px) !important; /* <-- sube bastante */
  }

  /* Derecha: permitir que se vea más grande que el límite general */
  .of-week .ofertas-r .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 92% !important;
    max-height: 195px !important;
  }

  /* =========================================
     FIX FINAL: izquierda = mismo tamaño que derecha
     + derecha con menos aire abajo
     + izquierda centrada verticalmente (contenido + imagen)
  ========================================= */

  /* 1) IZQUIERDA: centrado vertical real (texto + imagen) */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9{
    justify-content: center !important; /* centra verticalmente todo */
  }

  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9 > .e-con-inner{
    justify-content: center !important; /* por si Elementor manda otra cosa */
  }

  /* evita que la imagen se vaya “hasta abajo” en izquierda */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-649f2af{
    margin-top: 50px !important;  /* separa del botón */
    flex: 0 0 auto !important;
  }

  /* 2) IZQUIERDA: imagen del MISMO tamaño que derecha */
  .of-week .oferta-izquierda .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 100% !important;
    max-height: 260px !important;
  }

  /* 3) DERECHA: menos aire abajo (sube imagen y reduce espacio extra) */
  .of-week .ofertas-r .e-loop-item .elementor-element-649f2af,
  .of-week .ofertas-r .e-loop-item .elementor-element-4eb1446a{
    padding-bottom: 6px !important;  /* antes 20px */
    align-items: flex-end !important;
  }

  /* sube, pero un poco menos agresivo para que no quede “flotando” */
  .of-week .ofertas-r .e-loop-item .elementor-widget-theme-post-featured-image{
    transform: translateY(-62px) !important;
  }

  /* y deja el tamaño grande como ya lo tenías */
  .of-week .ofertas-r .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 92% !important;
    max-height: 195px !important;
  }
}




/* =========================================
   OFERTAS SEMANALES – RESPONSIVE ONLY (<=1024px)
   Ajusta:
   - Card izquierda (arriba): más compacta + menos aire texto/imagen
   - Cards derecha: imagen centrada abajo
========================================= */
@media (max-width: 1024px){

  /* 1) Base: todas las cards más compactas (incluye izquierda y derecha) */
  .of-week .e-loop-item .elementor-element-b73f5d9,
  .of-week .e-loop-item .elementor-element-2bfa2fd7{
    padding: 14px !important;     /* reduce aire general */
    border-radius: 20px !important;
    min-height: 0 !important;
    height: auto !important;      /* en responsive NO forzamos alturas */
    overflow: hidden;
  }

  /* 2) Bloque texto: menos separación para que suba la imagen */
  .of-week .e-loop-item .box-description{
    gap: 8px !important;          /* antes 10 */
    padding: 0 !important;
  }

  /* 3) Botón: que no meta aire extra */
  .of-week .e-loop-item .anim-btn{
    margin-top: 4px !important;
  }

  /* 4) IMAGEN: que quede debajo, centrada y más cerca del texto */
  .of-week .e-loop-item .elementor-element-649f2af,
  .of-week .e-loop-item .elementor-element-4eb1446a{
    margin-top: 10px !important;  /* en vez de empujar hasta el fondo */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    min-height: 0 !important;
  }

  /* 5) Centrado real del widget de imagen + link */
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image,
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image a{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    text-align: center !important;
  }

  /* 6) Imagen: centrada y controlada para que no se salga del viewport */
  .of-week .e-loop-item .elementor-widget-theme-post-featured-image img{
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    max-width: 86% !important;    /* centrada y segura */
    max-height: 180px !important; /* evita recorte por abajo */
  }

  /* 7) MUY IMPORTANTE: en responsive quitamos transforms del lado derecho */
  .of-week .ofertas-r .e-loop-item .elementor-widget-theme-post-featured-image{
    transform: none !important;   /* elimina translateY desktop */
  }

  /* 8) IZQUIERDA específicamente: quitar aire arriba (se veía “muy vacía”) */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9{
    justify-content: flex-start !important; /* deja el contenido arriba */
  }
  .of-week .oferta-izquierda .e-loop-item .elementor-element-b73f5d9 > .e-con-inner{
    justify-content: flex-start !important;
  }

  /* 9) IZQUIERDA: acercar aún más imagen (reduce el “hueco” grande) */
  .of-week .oferta-izquierda .e-loop-item .elementor-element-649f2af{
    margin-top: 12px !important; /* antes lo separábamos muchísimo */
  }
}

/* Mobile fino (<=767): todavía más compacto */
@media (max-width: 767px){
  .of-week .e-loop-item .elementor-element-b73f5d9,
  .of-week .e-loop-item .elementor-element-2bfa2fd7{
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .of-week .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 88% !important;
    max-height: 170px !important;
  }

  .of-week .e-loop-item .box-description{
    gap: 7px !important;
  }
}




/* ALINEACIÓN 2 DE OFERTAS EN HOME ACTIVAS 3 cards horizontal*/
/* =========================================
   OFERTAS SEMANALES (HOME) - Loop Grid
   Clase en el widget Loop Grid: ofertas
========================================= */

/* ---------- GRID (gap) ---------- */
.ofertas .elementor-loop-container.elementor-grid{
  gap: 28px !important;
}
@media (max-width: 1024px){
  .ofertas .elementor-loop-container.elementor-grid{ gap: 18px !important; }
}
@media (max-width: 1024px) and (min-width: 768px){
  .ofertas .elementor-loop-container.elementor-grid{ gap: 16px !important; }
}
@media (max-width: 767px){
  .ofertas .elementor-loop-container.elementor-grid{ gap: 14px !important; }
}

/* Cada item puede estirarse parejo */
.ofertas .elementor-loop-container > [data-elementor-type="loop-item"]{
  height: 100%;
}

/* ---------- CARD AMARILLA (ambas plantillas) ---------- */
.ofertas .e-loop-item .elementor-element-b73f5d9,
.ofertas .e-loop-item .elementor-element-2bfa2fd7{
  min-height: 0 !important; /* mata el min-height gigante de la plantilla */
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

/* Inner full-height */
.ofertas .e-loop-item .elementor-element-b73f5d9 > .e-con-inner,
.ofertas .e-loop-item .elementor-element-2bfa2fd7 > .e-con-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- TEXTO (box-description) + alineación de botones ---------- */
.ofertas .e-loop-item .box-description{
  padding: 0 !important;
  flex: 0 0 auto;
  display: grid !important;              /* clave: mantiene filas consistentes */
  grid-template-rows: auto auto auto auto;
  row-gap: 10px;
}

/* Oferta */
.ofertas .e-loop-item .box-description .elementor-element-24bbd31 .elementor-heading-title,
.ofertas .e-loop-item .box-description .elementor-element-8680ba9 .elementor-heading-title{
  line-height: 1.1 !important;
}

/* Título producto (con recorte por líneas para alinear botones) */
.ofertas .e-loop-item .box-description .elementor-element-bb5cc99 .elementor-heading-title,
.ofertas .e-loop-item .box-description .elementor-element-64c99821 .elementor-heading-title{
  margin: 0 !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Precio */
.ofertas .e-loop-item .box-description .elementor-element-cc7c88b .elementor-heading-title,
.ofertas .e-loop-item .box-description .elementor-element-674a7ada .elementor-heading-title{
  line-height: 1.05 !important;
  margin-top: 4px !important;
}

/* Botón: sin márgenes raros del widget */
.ofertas .e-loop-item .anim-btn{
  margin-top: 0 !important;
}
.ofertas .e-loop-item .anim-btn .elementor-button-wrapper{
  margin: 0 !important;
}

/* ---------- IMAGEN (centrada) ---------- */
.ofertas .e-loop-item .elementor-element-649f2af,
.ofertas .e-loop-item .elementor-element-4eb1446a{
  margin-top: auto !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* Centrado real del widget + link wrapper */
.ofertas .e-loop-item .elementor-widget-theme-post-featured-image,
.ofertas .e-loop-item .elementor-widget-theme-post-featured-image a{
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  text-align: center !important;
}

/* Imagen */
.ofertas .e-loop-item .elementor-widget-theme-post-featured-image img{
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================
   BREAKPOINTS (tamaños finales)
========================================= */

/* ===== Desktop ===== */
@media (min-width: 1025px){

  .ofertas .e-loop-item .elementor-element-b73f5d9,
  .ofertas .e-loop-item .elementor-element-2bfa2fd7{
    padding: 18px !important;
    border-radius: 24px !important;
  }

  /* Tipografías */
  .ofertas .e-loop-item .box-description .elementor-element-24bbd31 .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-8680ba9 .elementor-heading-title{
    font-size: 16px !important;
  }
  .ofertas .e-loop-item .box-description .elementor-element-bb5cc99 .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-64c99821 .elementor-heading-title{
    font-size: 20px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .ofertas .e-loop-item .box-description .elementor-element-cc7c88b .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-674a7ada .elementor-heading-title{
    font-size: 34px !important;
  }

  /* Botón */
  .ofertas .e-loop-item .anim-btn .elementor-button{
    padding: 10px 52px !important;
    font-size: 20px !important;
    border-radius: 999px !important;
  }

  /* Zona imagen + tamaño */
  .ofertas .e-loop-item .elementor-element-649f2af,
  .ofertas .e-loop-item .elementor-element-4eb1446a{
    min-height: 200px !important;
  }
  .ofertas .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 78% !important;
    max-height: 190px !important;
  }
}

/* ===== Tablet ===== */
@media (max-width: 1024px) and (min-width: 768px){

  .ofertas .e-loop-item .elementor-element-b73f5d9,
  .ofertas .e-loop-item .elementor-element-2bfa2fd7{
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .ofertas .e-loop-item .box-description .elementor-element-bb5cc99 .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-64c99821 .elementor-heading-title{
    font-size: 18px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .ofertas .e-loop-item .box-description .elementor-element-cc7c88b .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-674a7ada .elementor-heading-title{
    font-size: 30px !important;
  }

  .ofertas .e-loop-item .elementor-element-649f2af,
  .ofertas .e-loop-item .elementor-element-4eb1446a{
    min-height: 180px !important;
  }
  .ofertas .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 80% !important;
    max-height: 180px !important;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px){

  .ofertas .e-loop-item .elementor-element-b73f5d9,
  .ofertas .e-loop-item .elementor-element-2bfa2fd7{
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .ofertas .e-loop-item .box-description .elementor-element-24bbd31 .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-8680ba9 .elementor-heading-title{
    font-size: 13px !important;
  }
  .ofertas .e-loop-item .box-description .elementor-element-bb5cc99 .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-64c99821 .elementor-heading-title{
    font-size: 17px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  .ofertas .e-loop-item .box-description .elementor-element-cc7c88b .elementor-heading-title,
  .ofertas .e-loop-item .box-description .elementor-element-674a7ada .elementor-heading-title{
    font-size: 26px !important;
  }

  .ofertas .e-loop-item .anim-btn .elementor-button{
    padding: 10px 44px !important;
    font-size: 18px !important;
  }

  .ofertas .e-loop-item .elementor-element-649f2af,
  .ofertas .e-loop-item .elementor-element-4eb1446a{
    min-height: 150px !important;
  }
  .ofertas .e-loop-item .elementor-widget-theme-post-featured-image img{
    max-width: 82% !important;
    max-height: 150px !important;
  }
}






/* MINIATURAS DEL CHECKOUT RESUMEN DE COPMRA */
/* Checkout: thumbs sin romper el ancho del texto */
body.woocommerce-checkout #order_review .cart_item td.product-name{
  position: relative;
  padding-left: 70px; /* 56px thumb + espacio */
  min-height: 56px;   /* asegura espacio para la imagen */
}

/* Thumbnail fijo a la izquierda */
body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  line-height: 0;
}

/* Imagen: no recortar */
body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb-img{
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Asegura que el bloque del nombre use todo el ancho disponible */
body.woocommerce-checkout #order_review .cart_item td.product-name .co-name{
  display: block;
  width: 100%;
}

/* Cantidad SIEMPRE alineada con el texto */
body.woocommerce-checkout #order_review .cart_item td.product-name .product-quantity{
  display: block;
  margin-top: -15px;
}

/* Por si el plugin de wishlist mete cosas raras de display */
body.woocommerce-checkout #order_review .cart_item td.product-name .wishlist-source-hidden{
  display: inline;
}


/* ===== Checkout order review: más aire y mejor centrado visual ===== */

/* 1) Más separación entre imagen y texto */
body.woocommerce-checkout #order_review .cart_item td.product-name{
  padding-left: 120px;   /* antes ~70px: más espacio para el texto */
  padding-right: 10px;  /* un poquito para que respire */
}

/* Thumb fijo */
body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb{
  left: 8px;            /* empuja la imagen un pelín hacia adentro */
  width: 56px;
  height: 56px;
}

/* 2) “Estirar” el contenido: que no se vea tan a la izquierda */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table{
  width: 100%;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td{
  padding-left: 28px;   /* corre todo a la derecha */
  padding-right: 28px;  /* balancea para que se vea centrado */
}




/* ===== Checkout: empujar la columna derecha (Subtotal) hacia la derecha ===== */

/* 1) La tabla ocupa el ancho y tiene padding interno equilibrado */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table{
  width: 100%;
  table-layout: fixed; /* clave: respeta anchos de columnas */
}

/* Padding lateral para TODAS las celdas (incluye subtotal/total) */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td{
  padding-left: 40px;
  padding-right: 40px;
}

/* 2) Forzamos proporción de columnas: Producto más ancha, Subtotal más angosta */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-name,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-name{
  width: 72%;
}

body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-total{
  width: 28%;
  text-align: right;   /* precios bien alineados a la derecha */
  white-space: nowrap; /* evita saltos en Q9,000.00 */
}

/* 3) Extra: la miniatura + texto con más aire (si quieres todavía más) */
body.woocommerce-checkout #order_review .cart_item td.product-name{
  padding-left: 104px; /* más separación imagen-texto */
}


/* ===== Ajuste: alinear encabezados y labels (Subtotal/Shipment/Total) con la miniatura ===== */

/* Encabezados (Producto / Subtotal) más a la izquierda */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th{
  padding-left: 18px !important;
  padding-right: 40px !important; /* conserva aire a la derecha */
}

/* Labels del resumen (Subtotal / Shipment 1 / Total) más a la izquierda */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot th{
  padding-left: 18px !important;
  padding-right: 20px !important;
}

/* Mantén valores (montos / envío) alineados a la derecha */
body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot td{
  padding-left: 20px !important;
  padding-right: 40px !important;
  text-align: right;
}



/* =========================================
   CHECKOUT RESUMEN - FIX RESPONSIVE
   (solo móvil/tablet)
========================================= */
@media (max-width: 767px){

  /* Tabla más flexible en móvil */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table{
    table-layout: auto !important; /* evita cortes raros */
  }

  /* Reduce padding general (esto es lo que se estaba “saliendo”) */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Encabezados y footer alineados en móvil con el mismo padding */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table thead th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot th,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot td{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Columnas: deja que el producto tenga más espacio */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-name,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-name{
    width: 78% !important;
  }

  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-total,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-total{
    width: 22% !important;
    white-space: normal !important; /* si no cabe, que rompa línea dentro del bloque */
  }

  /* Miniatura más pequeña y menos “sangría” */
  body.woocommerce-checkout #order_review .cart_item td.product-name{
    padding-left: 72px !important; /* en móvil NO puede ser 104px */
    min-height: 44px;
  }

  body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb{
    left: 12px;           /* dentro del padding general */
    width: 40px;
    height: 40px;
  }

  body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb-img{
    width: 40px;
    height: 40px;
  }

  /* Cantidad: sin margen negativo agresivo en móvil */
  body.woocommerce-checkout #order_review .cart_item td.product-name .product-quantity{
    margin-top: 2px !important;
  }
}





@media (max-width: 767px){

  /* 1) Centrado vertical real entre columnas (sin romper tabla) */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th{
    vertical-align: middle !important;
  }

  /* 2) El precio NO se corta ni se parte */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-total,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-total{
    text-align: right !important;
    white-space: nowrap !important;  /* una sola línea */
  }

  /* 3) Dale un poco más de espacio al precio en móvil */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-name,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-name{
    width: 74% !important; /* baja un poco */
  }
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table th.product-total,
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table td.product-total{
    width: 26% !important; /* sube un poco */
  }

  /* 4) Que el ajuste ocurra en el nombre (no en el precio) */
  body.woocommerce-checkout #order_review .cart_item td.product-name .co-name{
    font-size: 13px;       /* baja un poco el nombre */
    line-height: 1.25;
    overflow-wrap: anywhere; /* permite cortar palabras largas sin empujar el precio */
    word-break: break-word;
  }

  /* Cantidad un poco más compacta */
  body.woocommerce-checkout #order_review .cart_item td.product-name .product-quantity{
    margin-top: 2px !important;
    font-size: 13px;
  }

  /* 5) Asegura que el padding no “sume” ancho raro */
  body.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table{
    width: 100% !important;
    border-collapse: collapse;
  }
}



@media (max-width: 767px){

  /* 1) Más espacio entre imagen y texto */
  body.woocommerce-checkout #order_review .cart_item td.product-name{
    padding-left: 86px !important; /* antes 72px */
  }

  /* 2) Subir un poco la miniatura */
  body.woocommerce-checkout #order_review .cart_item td.product-name .co-thumb{
    top: 42% !important;           /* antes 50%: sube la imagen */
    transform: translateY(-50%) !important;
  }
}


/* CENTRAR TITULO TU PEDIDO EN RESUMEN DEL PEDIDO*/
/* Checkout: centrar "Tu pedido" solo en responsive */
@media (max-width: 767px){
  body.woocommerce-checkout #order_review_heading{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}








/* ALINEACIÓN DE LABELS EN FORMULARIO DE CHECKOUT */
/* ===== Checkout: labels alineados con el inicio del texto dentro del campo ===== */
body.woocommerce-checkout{
  --lbl-inset: 10px; /* AJUSTA: 18px / 20px / 24px según tu campo gris */
}

/* Labels (billing + shipping + notas) */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row > label,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row > label,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row > label{
  padding-left: var(--lbl-inset) !important;
}

/* Caso especial: cuando el "campo" es texto (ej. País/Región en envío con <strong>) */
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row .woocommerce-input-wrapper > strong{
  display: block;
  padding-left: var(--lbl-inset) !important;
}

/* Por consistencia: si hay <span class="optional"> o el asterisco, que siga alineado */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row > label .optional,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row > label .optional,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row > label .optional{
  margin-left: 6px;
}


/* CENTRAR EL SELECT DEL FORMULARIO CHECKOUT PAIS/CIUDAD */
/* ===== Checkout: centrar verticalmente texto Select2 SIN mover la flecha ===== */

/* Asegura un alto consistente del contenedor */
body.woocommerce-checkout #shipping_state_field .select2-container .select2-selection--single{
  height: 56px;                 /* ajusta a tu campo */
  padding-left: 22px !important;
}

/* Centrado real del texto */
body.woocommerce-checkout #shipping_state_field .select2-container .select2-selection__rendered{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1.2 !important;   /* normal */
  padding-left: 0 !important;
  padding-right: 44px !important; /* espacio para la flecha */
  margin: 0 !important;
}

/* Flecha: no tocamos posición, solo igualamos altura para que no “salte” */
body.woocommerce-checkout #shipping_state_field .select2-container .select2-selection__arrow{
  height: 56px !important;
}




/* OCULTAR FLECHAS DEL CAMPO NIT */
/* Checkout: ocultar flechas (spinner) en el campo NIT (type="number") */
body.woocommerce-checkout #billing_nit_facturacion{
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* Chrome, Edge, Safari */
body.woocommerce-checkout #billing_nit_facturacion::-webkit-outer-spin-button,
body.woocommerce-checkout #billing_nit_facturacion::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}