/* ==========================================================================
   Luis Rico - correcciones de interfaz
   Generado por Novamira - 2026-08-10
   Para revertir: borra este archivo y el bloque "LR FIXES" de functions.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER STICKY POR DEBAJO DE LA BARRA DE ADMINISTRACION
   Solo afecta a usuarios logueados. Tus clientes nunca ven la barra negra
   de WordPress, asi que este problema no lo sufren.
   Cuando hay muchos plugins la barra ocupa 2 filas (64px+) pero Astra solo
   descuenta 32px. El JS mide la altura real y la guarda en --lr-adminbar-h.
   -------------------------------------------------------------------------- */
/* Lo resuelve lr-fixes.js anadiendo padding-top a <html>: Astra recalcula
   su propio desplazamiento a partir de ese valor. No forzamos aqui ningun
   "top" para no pelearnos con los estilos en linea de Astra. */

/* --------------------------------------------------------------------------
   1b) BUSCADOR DE LA CABECERA MAS ANCHO
   El buscador vive en la columna central del constructor de cabecera, que
   estaba repartida como 1fr 1fr 1fr. Como la columna derecha lleva 5 iconos,
   se comia el reparto y dejaba al buscador en unos 208px, muy lejos de los
   720px que pide el CSS del Personalizador.
   Le damos el doble de espacio a la columna central manteniendola centrada.
   Para revertir: borra este bloque.
   -------------------------------------------------------------------------- */
@media (min-width: 922px) {

	.ast-builder-grid-row.ast-grid-center-col-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	}

	.ast-builder-grid-row.ast-grid-center-col-layout > * {
		min-width: 0;
	}

	/* La columna central es flex: sin esto el area de widgets se queda al
	   ancho de su contenido (250px) en vez de ocupar los 665px disponibles. */
	.site-header-primary-section-center > .header-widget-area,
	.site-header-primary-section-center > .header-widget-area > .widget {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   1c) LUPA DEL BUSCADOR ALINEADA CON EL TEXTO
   FiboSearch coloca el boton de la lupa con top:7px dentro de un contenedor
   de 56px de alto. Como el boton mide 33px, deberia ir a 11,5px: quedaba
   5px por encima del centro del campo. Lo centramos de verdad.
   -------------------------------------------------------------------------- */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
}

/* --------------------------------------------------------------------------
   2) ANCHO COMPLETO EN LA PORTADA
   Causa real: en Apariencia > Personalizar > CSS adicional existe la regla
       .entry-content { max-width: none; margin: 0 auto; padding: 0 60px; }
   pensada para el blog, pero que se aplicaba a TODAS las paginas. Esos 60px
   son el margen blanco que se veia a los lados del hero.
   Aqui la anulamos unicamente en la portada y solo en escritorio, para no
   tocar el blog ni el movil.
   -------------------------------------------------------------------------- */
@media (min-width: 922px) {

	.home .entry-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: none !important;
	}

	/* El hero tenia un ancho del 119,893% heredado del editor. Al liberar el
	   contenedor eso provocaria scroll horizontal, asi que lo normalizamos.
	   15bf7ff = slider REBAJAS | 9e3db4a = banner HOMBRE Y MUJER (escritorio) */
	.home .elementor-11610 > .elementor-element-15bf7ff,
	.home .elementor-11610 > .elementor-element-9e3db4a {
		--width: 100%;
		--content-width: 100%;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Red de seguridad: la portada nunca debe generar scroll horizontal.
   Usamos clip (no hidden) para no romper los elementos position:sticky. */
.home #content {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   3) FICHA DE PRODUCTO: fila de compra ordenada
   Antes: lista de deseos, cantidad, boton, enlace "Ver carrito" y boton rojo
   del Probador Virtual competian en la misma caja sin alineacion.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* La lista de deseos se queda en su propia linea, encima */
.woocommerce div.product .woocommerce-variation-add-to-cart > .tinv-wraper,
.woocommerce div.product form.cart > .tinv-wraper {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 6px;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity {
	margin: 0 !important;
	float: none !important;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	margin: 0 !important;
}

/* Probador Virtual (Stilaro) trae width:100% en linea; lo devolvemos a la fila */
.woocommerce div.product .stilaro-buttons-row {
	width: auto !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

.woocommerce div.product .stilaro-vton-container {
	margin: 0 !important;
}

/* El enlace suelto "Ver carrito" desaparece: ahora lo ofrece el aviso flotante */
.woocommerce div.product a.added_to_cart {
	display: none !important;
}

@media (max-width: 600px) {

	.woocommerce div.product .stilaro-buttons-row {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   4) AVISO FLOTANTE (TOAST) AL ANADIR AL CARRITO
   -------------------------------------------------------------------------- */
#lr-cart-toast {
	position: fixed;
	top: calc(var(--lr-adminbar-h, 0px) + var(--lr-toast-offset, 24px));
	right: 24px;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(380px, calc(100vw - 32px));
	padding: 14px 16px;
	background: #fff;
	color: #100f0f;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
	font-size: 14px;
	line-height: 1.35;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	pointer-events: none;
}

#lr-cart-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

#lr-cart-toast .lr-toast__icon {
	flex: 0 0 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e8f5ec;
	color: #1e8e4a;
}

#lr-cart-toast .lr-toast__body {
	flex: 1 1 auto;
	min-width: 0;
}

#lr-cart-toast .lr-toast__title {
	display: block;
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #100f0f;
}

#lr-cart-toast .lr-toast__name {
	display: block;
	margin: 2px 0 0;
	font-size: 12.5px;
	color: #6b6b6b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#lr-cart-toast .lr-toast__cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 14px;
	border-radius: 6px;
	background: #100f0f;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s ease;
}

#lr-cart-toast .lr-toast__cta:hover,
#lr-cart-toast .lr-toast__cta:focus {
	background: #dc5046;
	color: #fff !important;
}

#lr-cart-toast .lr-toast__close {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: #9a9a9a;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

#lr-cart-toast .lr-toast__close:hover {
	color: #100f0f;
}

@media (max-width: 600px) {

	#lr-cart-toast {
		right: 12px;
		left: 12px;
		max-width: none;
		top: calc(var(--lr-adminbar-h, 0px) + 12px);
	}
}

@media (prefers-reduced-motion: reduce) {

	#lr-cart-toast {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   5) LA CINTA (MARQUEE) YA NO ENSANCHA LA WEB
   Causa real: la cinta vive dentro de una cadena de contenedores flex/grid
   de Astra (.ast-builder-grid-row > .site-header-above-section-center >
   .ast-header-html-1 > .ast-header-html > .ast-builder-html-element).
   Un elemento flex o grid tiene min-width:auto por defecto, es decir, se
   niega a encogerse por debajo del ancho de su contenido. Como
   .lr-marquee__track mide width:max-content (los 16 mensajes puestos en
   fila, unos 5.000px), toda esa cadena se estiraba hasta ese ancho: la
   pagina entera pasaba a medir 5.000px y por eso se podia arrastrar hacia
   el lado y aparecia el blanco. El overflow:hidden de .lr-marquee no
   recortaba nada porque .lr-marquee tambien media 5.000px.
   Solucion: min-width:0 en toda la cadena para que vuelvan a encogerse al
   ancho de la pantalla, el recorte real en el contenedor de la cinta, y una
   red de seguridad global para que la web no pueda desplazarse en horizontal.
   La animacion de la cinta no se toca: sigue igual.
   Para revertir: borra este bloque.
   -------------------------------------------------------------------------- */
.ast-above-header-wrap,
.ast-above-header-wrap .ast-above-header-bar,
.ast-above-header-wrap .ast-container,
.ast-above-header-wrap .ast-builder-grid-row,
.ast-above-header-wrap .site-header-section,
.ast-above-header-wrap .ast-header-html-1,
.ast-above-header-wrap .ast-header-html,
.ast-above-header-wrap .ast-builder-html-element {
	min-width: 0 !important;
	max-width: 100%;
}

/* El recorte de verdad: lo que sobresale de la cinta se corta aqui. */
.ast-above-header-wrap {
	overflow: hidden;
}

.lr-marquee {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

/* Red de seguridad: la web no debe poder desplazarse hacia los lados nunca.
   Usamos clip y no hidden porque hidden convertiria <html> en un contenedor
   de scroll y romperia la cabecera sticky y el desplegable del carrito. */
html {
	overflow-x: clip;
}

body {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   6) CARRITO LATERAL: LA "X" DE ELIMINAR YA NO PISA EL NOMBRE
   Astra reserva solo 1,8em de hueco a la derecha de cada linea del carrito
   (padding:1.2em 1.8em 1.2em 5em) pero coloca el boton de eliminar en
   position:absolute con right:0 y un tamano de unos 26px, asi que el circulo
   caia encima de las ultimas palabras del nombre del producto.
   Ampliamos el hueco reservado a la derecha y fijamos tamano y posicion del
   boton para que siempre viva en su propia columna, sin tocar nada mas.
   Para revertir: borra este bloque.
   -------------------------------------------------------------------------- */
.astra-cart-drawer .widget_shopping_cart .cart_list li,
.ast-site-header-cart .widget_shopping_cart .cart_list li,
.woocommerce-js .widget_shopping_cart .cart_list li,
.woocommerce.widget_shopping_cart .cart_list li,
.widget_shopping_cart .cart_list li.mini_cart_item {
	position: relative;
	padding-right: 48px !important;
}

.astra-cart-drawer .widget_shopping_cart .cart_list li a.remove,
.ast-site-header-cart .widget_shopping_cart .cart_list li a.remove,
.woocommerce-js .widget_shopping_cart .cart_list li a.remove,
.woocommerce.widget_shopping_cart .cart_list li a.remove,
.widget_shopping_cart .cart_list li a.remove_from_cart_button {
	position: absolute;
	top: 1.1em;
	right: 6px;
	left: auto;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 24px;
	font-size: 17px;
	text-align: center;
	border-radius: 50%;
	background-color: #fff;
	z-index: 5;
}

/* El nombre y el resto de la linea se quedan dentro de su columna: si el
   texto es largo, salta de linea en vez de meterse debajo del boton. */
.widget_shopping_cart .cart_list li > a,
.widget_shopping_cart .cart_list li .quantity,
.widget_shopping_cart .cart_list li .variation {
	max-width: 100%;
	overflow-wrap: break-word;
}