/*.product-item .product-thumb .thumb-inner img {
  object-fit: contain;
  min-height: 160px;
  margin: auto;
}*/

.clear-left {
	clear: left;
}

/* Menú móvil: mismos colores que el header desktop (misma configuración de tema) */
.header-device-mobile {
	background-color: var(--background-color-header) !important;
}
.header-device-mobile a,
.header-device-mobile .mobile-navigation span,
.header-device-mobile .mobile-search-box > a,
.header-device-mobile .mobile-settings-box > a,
.header-device-mobile .menu-bar,
.header-device-mobile .icon-search svg {
	color: var(--text-color-header) !important;
}
.header-device-mobile .mobile-navigation,
.header-device-mobile .mobile-search-box > a,
.header-device-mobile .mobile-settings-box > a {
	color: var(--text-color-header) !important;
}

/* Barra fija móvil (Inicio / Carrito / Pagar): por encima del FAB de WhatsApp para no bloquear “Pagar” */
@media (max-width: 767px) {
	.footer-device-mobile {
		z-index: 10050 !important;
	}
}

/* Bloques desplegables en barra móvil (buscador, etc.): mismos colores que header */
.header-device-mobile .item .block-sub {
	background-color: var(--background-color-header) !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
}
.header-device-mobile .item .block-sub .close,
.header-device-mobile .item .block-sub,
.header-device-mobile .block-item-title {
	color: var(--text-color-header) !important;
}
.header-device-mobile .item .block-sub a:hover {
	color: var(--accent-color, var(--primary-color)) !important;
}

/* Botón Buscar (panel lupa): el bloque fuerza text-color-header; texto e icono deben usar text-on-primary */
.header-device-mobile .item .block-sub .mobile-search-theme button.submit.button.mobile-search-submit,
.header-device-mobile .item .block-sub .mobile-search-theme button.submit.button.mobile-search-submit .mobile-search-submit-text {
	color: var(--text-on-primary, #ffffff) !important;
	-webkit-text-fill-color: var(--text-on-primary, #ffffff) !important;
}
.header-device-mobile .item .block-sub .mobile-search-theme button.submit.button.mobile-search-submit:hover,
.header-device-mobile .item .block-sub .mobile-search-theme button.submit.button.mobile-search-submit:hover .mobile-search-submit-text {
	color: var(--text-on-primary, #ffffff) !important;
	-webkit-text-fill-color: var(--text-on-primary, #ffffff) !important;
}

/* Theme legacy (styles.css): .product-item:hover .product-info { opacity: 0 } ocultaba título y precio */
.product-item:hover .product-info {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Tarjetas listado: nombre y precio legibles (default commerce / masonry) */
.product-item .product-info h5.product-name,
.product-item .product-info h5.product-name.product_title,
.product-item .product-name.product_title {
	font-size: 1.3125rem !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
}
.product-item .product-info .group-info .price,
.product-item .product-info .price,
.product-item .product-info .price ins,
.product-item .product-info .discount {
	font-size: 1.3125rem !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
}
.product-item .product-info .price del {
	font-size: 1.1875rem !important;
	font-weight: 500 !important;
}

/* QA Fase 8.2: evita overflow horizontal por imágenes con ancho intrínseco grande. */
.product-item .product-thumb,
.product-item .product-thumb .thumb-inner,
.product-item .product-thumb .thumb-inner-wrap {
	width: 100%;
	max-width: 100%;
}
.product-item .product-thumb .thumb-inner-wrap {
	display: block;
}
.product-item .product-thumb .thumb-inner-wrap img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Premium retail cards: mantener imagen contenida dentro del grid. */
.template-premium-retail-product-card {
	width: 100%;
	max-width: 100%;
}
.template-premium-retail-product-card .product-card-retail__image-wrap {
	width: 100%;
	max-width: 100%;
}
.template-premium-retail-product-card .product-card-retail__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.product-item .product-info h5.product-name,
	.product-item .product-info h5.product-name.product_title,
	.product-item .product-name.product_title {
		font-size: 1.375rem !important;
	}
	.product-item .product-info .price,
	.product-item .product-info .price ins,
	.product-item .product-info .discount {
		font-size: 1.375rem !important;
	}
	.product-item .product-info .price del {
		font-size: 1.25rem !important;
	}
}

.pagination>li:last-child>a, .pagination>li:first-child>a {
  border-radius: 50% !important;
}

.pagination>li>a, .pagination>li>span {
  float: none !important;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { 
  background-color: #85B839;
  border-color: transparent transparent transparent;
}

.pagination .page-numbers, .pagination .page-numbers:first-child, .pagination .page-numbers:last-child {
  margin-left: 2px !important;
}

.pagination>li>a, .pagination>li>span {
  padding: 0px !important;
}

.select-box {
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-family: 'Open Sans', 'Helvetica Neue', 'Segoe UI', 'Calibri', 'Arial', sans-serif;
  font-size: 18px;
  color: #60666d;
  
  
  @media (min-width: 768px) {
    width: 70%;
  }
  
  @media (min-width: 992px) {
    width: 50%;
  }
  
  @media (min-width: 1200px) {
    width: 30%;
  }  
  
}

.button-order {
  background-color: green !important;
  color: #fff !important;   
}

.button-container {
  display: flex;
  justify-content: space-between; /* Espacio entre los elementos para alinear a los extremos */
}

.left-button {
  flex-grow: 1; /* El botón ocupa todo el espacio disponible a la izquierda */
  text-align: left; /* Alinea el botón a la izquierda */
}

.right-link {
  flex-grow: 1; /* El enlace ocupa todo el espacio disponible a la derecha */
  text-align: right; /* Alinea el enlace a la derecha */
}

.message-container {
  display: flex;
  flex-direction: column; /* Alinea los mensajes verticalmente */
  align-items: flex-start; /* Alinea a la izquierda */
}

.loading-message,
.success-message,
.alert-message {
  border-radius: 10px; /* Bordes redondeados */
  margin-top: 10px; /* Margen superior de 10px entre mensajes */
  padding: 10px; /* Agrega algún espacio interno para mayor claridad */
  max-width: 70%; /* Ancho máximo del contenedor */
  width: auto; /* Ancho automático al contenido del texto */
  word-wrap: break-word; /* Rompe palabras largas si es necesario */
}

.loading-message {
  background-color: #e0e0e0; /* Fondo gris claro para mensajes de carga */
  color: #333; /* Texto oscuro */
}

.success-message {
  background-color: #4caf50; /* Fondo verde para mensajes de éxito */
  color: #fff; /* Texto blanco */
}

.success-message::before {
  content: "\00a0"; /* Agrega un espacio no separable antes del mensaje de éxito */
}

.alert-message {
  background-color: rgb(233, 132, 38); /* Fondo verde para mensajes de éxito */
  color: #fff; /* Texto blanco */
}


.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: auto;
  margin-top: 20px;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* styles.css */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, #004d40, #00251a); /* Degradado de verde oscuro (teal) */
  z-index: 2147483647;
}

.loader-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vereesa-menu-next-panel {
  position: absolute;
  left: 0px;
  width: 100%;
}

.vereesa-menu-next-panel::before {
  right: 30px;
  position: absolute;
}

.message-error {
  background-color: #888888 !important;
}

.product-variation-form select {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 220px; /* Ajusta el ancho según tu diseño */
  max-width: 100%;
  background-color: #f8f8f8; /* Color de fondo */
  transition: border-color 0.3s ease;
}

.product-variation-form select:focus {
  outline: none;
  border-color: #7b9ce2; /* Color del borde al enfocar */
}

.btn-zoom.open_qv {
  border: 1px solid #85B839 !important;
}

.fancybox-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  background: transparent url(./../public/assets/js/fancybox/source/fancybox.png) -40px 0px;
  cursor: pointer;
  z-index: 1103;  
}

.fancybox-next span {
  background-image: url(./../public/assets/js/fancybox/source/fancybox.png);
  background-position: -40px -60px;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  cursor: pointer;
  z-index: 1102;
  display: block;
}

.fancybox-prev span {
  background-image: url(./../public/assets/js/fancybox/source/fancybox.png);
  background-position: -40px -30px;
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  cursor: pointer;
  z-index: 1102;
  display: block;
}

.warning-message {
  background-color: #ffc107;
  color: #333;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  display: none;
  font-weight: bold;
}

@media (max-width: 767px) {
  .open_qv {
    display: none;
  }
}

/* Estilo para los campos que deben completarse */
.effect-input select {
    border: 1px solid #ccc; /* Define tu estilo de borde normal aquí */
}

/* Estilo para resaltar campos incompletos */
.input-incomplete,
select.input-incomplete {
    animation: blinkBorder 1s infinite;
}

/* Define la animación */
@keyframes blinkBorder {
    0% {
        box-shadow: 0 0 10px #ffc107, 0 0 20px #ffc107, 0 0 30px #ffc107;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 0 0 10px #ffc107, 0 0 20px #ffc107, 0 0 30px #ffc107;
    }
}

.product-item .product-top {  
  left: 8px !important;
  top: 10px !important;
}


.masonry-grid .grid-sizerS, .masonry-grid .grid-itemS {
  padding: 0 10px;
}

.product-name {
  max-width: 320px;
}

.rows-space-20 {
  margin-bottom: 0px !important;
}

.slider-item .title-small {
  color: #517220 !important; 
}

.block-minicart {
  position: absolute !important;
  right: 100px !important;
  top: 14px !important;
}

.main-menu{ 
  padding-top: 4px;
}

/**.logo {
  height: 88px;
  margin-top: 2px;
}*/

.header.style7 .logo {
    text-align: right;
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 0px;
    transform: translateY(1px);
    transition: 
        top 0.4s ease-in-out,
        transform 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
}

.logo-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* Se asegura de que la imagen se ajuste completamente */
}

.block-minicart .sacl-shopcart-icon .count {
  position: absolute;
  display: inline-block;
  text-align: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  top: -5px;
  right: -5px;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}

.block-minicart .sacl-shopcart-icon i {
  font-size: 24px;
  margin-right: 15px;
}

/* Desactivado: interfería con el logo del header móvil (lo subía y lo limitaba)
@media (max-width: 767px) {
  .logo {
    height: 66px;
    margin-top: -16px;
    position: relative;
    z-index: 9;
  }
} */

.attribute.not-selected .text-attribute {
  color: #d9534f; /* rojo elegante tipo Bootstrap */
  font-weight: 600;
}

.input-text {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 16px;
  font-size: 14px;
  appearance: none; /* para que los select se vean consistentes en todos los navegadores */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.shipping-loader {
  background: #f9f9f9;
  padding: 16px;
  margin: 16px 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top: 3px solid #0a7c4e;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.group-button-payment {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center; /* 🔧 alinea verticalmente los botones */
  margin-top: 1rem;
}

.group-button-payment a,
.group-button-payment button {
  margin: 0;
}


.payment-options-group {
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  margin-top: 1.5rem;
}

.payment-options-group .title-form {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: border 0.3s ease, background-color 0.3s ease;
}

.payment-option:hover {
  border-color: #007bff;
  background-color: #f0f8ff;
}

.payment-option input[type="radio"] {
  transform: scale(1.2);
  accent-color: #007bff; /* Compatible con navegadores modernos */
}

.payment-option .icon {
  font-size: 1.4rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-option .fa,
.payment-option svg {
  font-size: 34px;
  color: #28a745;
}

.select-form::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

.message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

.message-box {
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  color: white;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out forwards;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  pointer-events: auto;
}

.message-box.loading {
  background-color: #2563eb;
}

.message-box.success {
  background-color: #16a34a;
}

.message-box.error {
  background-color: #dc2626;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Banners/sliders no full: título, descripción y botón SIEMPRE sobre la imagen (no debajo) */
.banner-wrapp .item-banner .inner {
  position: relative !important;
}
.banner-wrapp .item-banner .banner-content {
  position: absolute !important;
}
@media (max-width: 1199px) {
  .banner-wrapp .item-banner .banner-content {
    position: absolute !important;
  }
}

/* Márgenes de secciones de banners (home, categorías, producto, páginas) */
.banner-section-wrap {
  margin-bottom: 2rem;
}
/* Sección de banners abajo: sin hueco con el footer, se ve como sección continua */
.banner-section-bottom {
  margin-top: 2rem;
  margin-bottom: 0;
}
.banner-section-wrap.banner-section-bottom {
  margin-bottom: 0;
}
/* El .banner-wrapp dentro usa rows-space-30/60 que añade margin-bottom; anularlo aquí */
.banner-section-bottom .banner-wrapp.rows-space-30,
.banner-section-bottom .banner-wrapp.rows-space-60 {
  margin-bottom: 0 !important;
}

/* Cuando el último bloque del listado/categoría es el banner inferior, quitar padding del main-content para que no haya hueco con el footer */
.main-content.has-bottom-banner {
  padding-bottom: 0 !important;
}
.product-detail-content-wrap {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Detalle de página (pages-site): no tocar .container en desktop para que use el mismo ancho que home/listado */
.main-content.main-content-blog.single {
  overflow-x: hidden;
  max-width: 100%;
}
.main-content.main-content-blog.single .container {
  box-sizing: border-box;
}
.main-content.main-content-blog.single .post-item .post-format img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
/* En móvil: evitar overflow y que imagen/banners se ajusten */
.main-content.main-content-blog.single .row,
.main-content.main-content-blog.single .post-item .post-format,
.main-content.main-content-blog.single .post-item .post-format > a {
  max-width: 100%;
  min-width: 0;
}
.main-content.main-content-blog.single .post-item .post-format {
  overflow: hidden;
}
.main-content.main-content-blog.single .banner-section-wrap {
  max-width: 100%;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.main-content.main-content-blog.single .banner-section-wrap .banner-wrapp {
  max-width: 100%;
}
.main-content.main-content-blog.single .banner-section-wrap .banner-wrapp img,
.main-content.main-content-blog.single .banner-section-wrap .item-banner img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Banner inferior (style6) en detalle de página: contenido visible y ajustado en móvil */
.banner-section-bottom .banner-wrapp .item-banner.style6 .inner {
  max-width: 100%;
  box-sizing: border-box;
}
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-full-content-wrap {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content {
  max-width: 100%;
}
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .title.banner-full-title,
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-description {
  max-width: 100%;
}
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions {
  max-width: 100%;
}
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions .button,
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions .template-button,
.banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions a {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .main-content.main-content-blog.single .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Imagen del post: escala completa, sin recortar (quitar min-height y object-fit para ver la foto entera) */
  .main-content.main-content-blog.single .post-item .post-format img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    display: block;
  }
  /* Espacio para flechas del slider en el banner superior (evitar que solapen texto) */
  .main-content.main-content-blog.single .banner-section-wrap {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
  }
  .main-content.main-content-blog.single .banner-section-wrap .banner-wrapp,
  .main-content.main-content-blog.single .banner-section-wrap .slick-slider {
    max-width: 100%;
  }
  /* Banner inferior: altura razonable en móvil y contenido visible */
  .banner-section-bottom .banner-wrapp .item-banner.style6 .inner {
    min-height: 280px !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-full-content-wrap {
    padding: 1.5rem 1rem !important;
  }
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .title.banner-full-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-description {
    font-size: 0.95rem !important;
    line-height: 1.4;
  }
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions .button,
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions .template-button,
  .banner-section-bottom .banner-wrapp .item-banner.style6 .banner-content .banner-full-actions a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
  }
  .banner-section-bottom {
    margin-top: 1.5rem;
  }
}