/*
Theme Name: Hello Elementor Child
Theme URI: https://www.solucionweb.com/
Description: Tema hijo personalizado para Hello Elementor con login privado, reglas de acceso, botones flotantes configurables, WhatsApp y shortcodes básicos administrables.
Author: Solución Web
Author URI: https://www.solucionweb.com/
Template: hello-elementor
Version: 2.4.1
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: custom-login, translation-ready, elementor, child-theme
*/

/* Los estilos personalizados se cargan desde /assets/css/. */

/* ---------- Generales ---------- */

html, body {
	overflow-x: hidden;
}

html {
    overscroll-behavior-y: none !important;
}

body {
    overscroll-behavior-y: auto !important;
}

/* ---------- Menú ---------- */
/* Menú auto */
@media (min-width: 768px){
	.nav-auto ul.elementor-nav-menu {
		display: flex !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.nav-auto ul.elementor-nav-menu > li {
		flex: 0 0 auto !important;
		width: max-content !important;
	}

	.nav-auto ul.elementor-nav-menu > li > a {
		display: inline-flex !important;
		width: max-content !important;
		white-space: nowrap !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
	
.nav-auto ul.elementor-nav-menu::after {
    display: none;
}


/* ---------- Formularios ---------- */

/* Textarea: sin resize */
.effect-label-form form textarea.effect-label-control {
  resize: none;
  padding-top: 15px;
}

.effect-label-form form {
  position: relative;
}

.effect-label-form form .effect-label-field {
  position: relative;
  margin-bottom: 1.25rem;
}

.effect-label-form form .effect-label-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 5px;
  padding-top: 15px;
}

/* Label flotando en el input */
.effect-label-form form .effect-label-label {
  position: absolute;
  left: 20px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  line-height: 1.2;
  color: #777;
  pointer-events: none;
  transition: all 0.18s ease-out;
  margin: 0 !important;
  background: transparent;
  z-index: 1;
}

.effect-label-form form .effect-label-field.elementor-field-type-textarea .effect-label-label {
  top: 5% !important;
  transform: translateY(0) !important;
}

/* Estados de focus o con contenido */
.effect-label-form form .effect-label-field.is-focused .effect-label-label,
.effect-label-form form .effect-label-field.is-filled .effect-label-label,
.effect-label-form form .effect-label-field.filled .effect-label-label {
  top: 4px;
  transform: translateY(0);
  font-size: 0.6rem;
  z-index: 999;
}



/* IMAGENES INSPIRACION */
.img-insp {
    overflow: hidden;
}

/* Elementor agrega un contenedor interno */
.img-insp .elementor-widget-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* El enlace también debe ocupar todo el contenedor */
.img-insp a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Imagen cubriendo todo el espacio */
.img-insp img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;

    transform: scale(1);
    transition: transform 0.6s ease;
}

/* Zoom al pasar el cursor */
.img-insp:hover img {
    transform: scale(1.1);
}

/* Ocultar título dentro del lightbox de Elementor */
.elementor-slideshow__title {
    display: none !important;
}











/* Flechas personalizadas del lightbox */
.dialog-lightbox-widget .swiper {
	position: relative;
}

.dialog-lightbox-widget .galeria-inspiracion-flecha {
	position: absolute;
	top: 50%;
	z-index: 999999;

	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	padding: 0;

	color: #fff !important;
	font-family: Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;

	background: none !important;
	border: 0 !important;

	box-shadow: none;
	cursor: pointer;

	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(-50%);
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.dialog-lightbox-widget .galeria-inspiracion-anterior {
	left:100px;
}

.dialog-lightbox-widget .galeria-inspiracion-siguiente {
	right: 100px;
}

.dialog-lightbox-widget .galeria-inspiracion-flecha:hover,
.dialog-lightbox-widget .galeria-inspiracion-flecha:focus {
	color: #fff !important;
	background: /*#2D2E2F*/ none !important;
	transform: translateY(-50%) scale(1.3);
}

@media (max-width: 767px) {

	body .dialog-lightbox-widget button.galeria-inspiracion-flecha {
		display: flex !important;

		top: 50% !important;
		z-index: 9999999 !important;

		width: 42px !important;
		height: 42px !important;
		padding: 0 !important;

		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		font-size: 32px !important;

		/* Mismo color normal de desktop */
		background-color: none !important;
		background-image: none !important;

		border: 0 !important;
		box-shadow: none !important;

		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(-50%) !important;
	}

	body .dialog-lightbox-widget button.galeria-inspiracion-anterior {
		left: 10px !important;
	}

	body .dialog-lightbox-widget button.galeria-inspiracion-siguiente {
		right: 10px !important;
	}

	/* Mismo hover de desktop; active sirve al tocar en celular */
	body .dialog-lightbox-widget button.galeria-inspiracion-flecha:hover,
	body .dialog-lightbox-widget button.galeria-inspiracion-flecha:focus,
	body .dialog-lightbox-widget button.galeria-inspiracion-flecha:active {
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		background-color: none !important;
		transform: translateY(-50%) scale(1.08) !important;
	}
}






@media (min-width: 1025px){
	.h-mhome > nav > ul > li.product-categories-item > ul.sub-menu{
		width: 130% !important;
		min-width: 300px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}

.h-mhome > nav > ul > li > a.elementor-item-active > span.sub-arrow > svg{
	fill: #fff;
}


.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price{
	font-size: 13px !important;
	color: #a6a6a6;
}







.payment_method_serfinsa img[src*="redserfinsa.com/images/logo-serfinsa.png"] {
    display: none !important;
}

/* ==========================================================
   HOVER DEL ICONO DE ELIMINAR - RESUMEN PERSONALIZADO DE CHECKOUT
   Luminare El Salvador - Implementado 2026-08-25

   WooCommerce core define ".woocommerce a.remove:hover" con
   fondo rojo (var(--wc-red)) para cualquier enlace class="remove"
   dentro de un contenedor .woocommerce. El icono personalizado del
   checkout ( <a class="remove"> dentro de .custom-checkout-review-remove )
   hereda ese hover porque reutiliza la misma clase "remove".

   Se sobrescribe unicamente color y background en hover/focus,
   limitado a este componente especifico, sin tocar el enlace,
   su funcion de eliminar ni el comportamiento AJAX.
   ========================================================== */
.custom-checkout-review-remove a.remove:hover,
.custom-checkout-review-remove a.remove:focus {
	color: #000 !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* ==========================================================
   OCULTAR BLOQUE NATIVO DE ENVIO DUPLICADO EN CHECKOUT
   Luminare El Salvador - Implementado 2026-08-25

   El checkout ya captura la direccion de entrega mediante los
   campos personalizados de facturacion (Flexible Checkout Fields).
   El bloque nativo de WooCommerce ("¿Dirección diferente?" +
   campos shipping_*) se sigue renderizando por debajo, duplicando
   visualmente la solicitud de direccion y confundiendo al cliente.

   Se oculta solo visualmente. El checkbox "ship_to_different_address"
   y los campos shipping_* siguen presentes en el formulario (ocultos)
   y se siguen enviando en el POST; el mapeo de datos hacia esos
   campos ocurre en PHP (functions.php) ANTES de la validacion de
   WooCommerce, por lo que ocultar este bloque no afecta el guardado
   de la direccion de envio ni la validacion nativa.
   ========================================================== */
.woocommerce-checkout .woocommerce-shipping-fields {
	display: none !important;
}