@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/*
 * El tema abre su <div class="product-label"> en cuanto hay oferta y lo cierra despues, asi que al
 * vaciar la etiqueta puede quedar el envoltorio sin contenido. Se oculta para que no reserve sitio.
 */
.product-label:empty {
	display: none;
}

.alyabar-dcto {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 55px;
	background: #A93226;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
@media (max-width: 767px) {
	.alyabar-dcto {
		top: 8px;
		left: 8px;
		padding: 3px 8px;
		font-size: 10px;
	}
}
.alyabar-sin-stock {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	padding: 4px 9px;
	border-radius: 4px;
	background: #a93226;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
@media (max-width: 767px) {
	.alyabar-sin-stock {
		top: 8px;
		right: 8px;
		padding: 3px 7px;
		font-size: 10px;
	}
}


.elbzotech-search-form-wrap-global .content-form-popup h3,
.elbzotech-search-form-wrap-global .content-form-popup .content-list-product-search > p {
	color: #FFFFFF;
}


/*
 * El nodo del tema deja de ser una cortina a pantalla completa y pasa a ser el hueco donde vive
 * la tarjeta: abajo a la derecha, sin fondo y sin capturar el raton fuera de la tarjeta.
 * La clase .hide del tema sigue siendo la que lo muestra y lo esconde (display: none).
 */
.bzo-ajaxcart-report {
	position: fixed;
	left: auto;
	top: auto;
	right: 24px;
	bottom: 24px;
	width: 360px;
	max-width: calc(100vw - 32px);
	background: transparent;
	display: block;
	z-index: 99999;
	pointer-events: none;
}

/*
 * OJO, TRAMPA PROPIA: aqui habia una regla `.bzo-ajaxcart-report > div` para apagar el recuadro
 * blanco del tema. Al reescribir el interior, ESE hijo directo pasa a ser nuestra propia tarjeta
 * .alyabar-aviso, y el selector con combinador (0,1,1) le ganaba al de clase suelta (0,1,0): la
 * tarjeta salia sin fondo, sin bordes redondeados y sin relleno, o sea invisible sobre la pagina.
 * Se quito: ya no hace falta, porque el div del tema deja de existir en cuanto montamos el nuestro.
 */
/*
 * SE ESCRIBE `> .alyabar-aviso` Y NO `.alyabar-aviso` A SECAS, a proposito.
 *
 * El tema tiene en style.css una regla `.bzo-ajaxcart-report > div` con SU recuadro: fondo blanco,
 * radio 10 px, relleno 40/30/30 y max-width 600. Nuestra tarjeta es justo ese hijo directo, asi que
 * un selector de clase suelta (0,1,0) perdia contra el suyo con combinador (0,1,1) y la tarjeta
 * salia con el relleno y el radio del tema -y sin fondo propio, que es lo que se vio en pantalla si
 * el CSS del tema llegaba tarde-. Con `> .alyabar-aviso` (0,2,1) mandamos nosotros siempre.
 */
.bzo-ajaxcart-report > .alyabar-aviso {
	position: relative;
	max-width: none;
	pointer-events: auto;
	overflow: hidden;
	padding: 18px 18px 16px;
	background: #FFFFFF;
	border: 1px solid #E7EDE8;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(30, 58, 42, .18);
	text-align: left;
	/* Entra deslizandose cada vez que el tema le quita la clase hide. */
	animation: alyabar-aviso-entra .35s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes alyabar-aviso-entra {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* Quien prefiera menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
	.alyabar-aviso { animation: none; }
	.alyabar-aviso__barra::after { animation: none; }
}

.alyabar-aviso__cabecera {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 13px;
	padding-right: 26px;
}

.alyabar-aviso__tic {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2F6B48;
	color: #FFFFFF;
}
.alyabar-aviso__tic svg { width: 13px; height: 13px; display: block; }

.alyabar-aviso__titulo {
	margin: 0;
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .01em;
	color: #1E3A2A;
}

/* La equis, para cerrarlo antes de que se vaya solo. */
.alyabar-aviso__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8A9690;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.alyabar-aviso__x:hover { background: #F0F4F1; color: #1E3A2A; }

.alyabar-aviso__producto {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 15px;
}
/* Sin foto ni nombre no se pinta la fila: mejor nada que un hueco gris. */
.alyabar-aviso__producto:empty { display: none; }

.alyabar-aviso__foto {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: #F5F5F5;
}
.alyabar-aviso__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.alyabar-aviso__nombre {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.35;
	color: #1C1F1D;
	/* Dos lineas como maximo: los nombres de perfume son largos. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alyabar-aviso__botones { display: flex; gap: 10px; }

.alyabar-aviso__botones a {
	flex: 1 1 0;
	display: block;
	padding: 11px 10px;
	border-radius: 55px;
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	transition: background .2s ease, color .2s ease;
}

.alyabar-aviso__seguir {
	background: #F0F4F1;
	color: #1E3A2A;
}
.alyabar-aviso__seguir:hover { background: #E1EAE4; color: #1E3A2A; }

.alyabar-aviso__pagar {
	background: #2F6B48;
	color: #FFFFFF;
}
.alyabar-aviso__pagar:hover { background: #1E3A2A; color: #FFFFFF; }

/* La barrita del tiempo: dice sin palabras que el aviso se va solo. */
.alyabar-aviso__barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #EEF1EE;
}
.alyabar-aviso__barra::after {
	content: '';
	display: block;
	height: 100%;
	background: #C9A445;
	transform-origin: left center;
	animation: alyabar-aviso-barra 5s linear both;
}
@keyframes alyabar-aviso-barra {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* La cuenta atras del tema sigue existiendo (su JS escribe ahi), pero no se ve. */
.bzo-ajaxcart-report .js-time-cout-dow { display: none !important; }

@media (max-width: 767px) {
	/*
	 * En movil va abajo y a todo el ancho, POR ENCIMA DE LA BARRA INFERIOR FIJA (Inicio, Tienda,
	 * Buscar, Me gusta, Menu), que mide unos 65 px: si no, la tapa.
	 */
	.bzo-ajaxcart-report {
		right: 12px;
		left: 12px;
		bottom: 78px;
		width: auto;
		max-width: none;
	}
	.alyabar-aviso { padding: 15px 15px 14px; }
	.alyabar-aviso__foto { flex-basis: 48px; width: 48px; height: 48px; }
}

/* ==================== Los avisos de WooCommerce ==================== */

/*
 * POR QUE CADA CLASE VA REPETIDA (.woocommerce-message.woocommerce-message).
 *
 * El tema declara estos avisos como `.woocommerce .woocommerce-message` -DOS clases-, en
 * assets/demo3/css/single-product.css. Un selector nuestro de una sola clase pierde por
 * especificidad por mucho que se imprima despues: el primer intento dejo el aviso igual de verde
 * que antes.
 *
 * Repetir la clase sube la especificidad a (0,2,0), empata con la del tema y, al empatar, gana el
 * que va despues, que es el nuestro. Se prefiere a !important porque asi cualquier regla futura
 * mas concreta -o un !important de verdad, si alguna vez hace falta- puede seguir ganandole.
 */

/*
 * LOS TRES AVISOS DE WOOCOMMERCE, LEGIBLES (22-09-2026).
 *
 * El tema pinta .woocommerce-message.woocommerce-message, .woocommerce-error.woocommerce-error y .woocommerce-info.woocommerce-info EXACTAMENTE IGUAL:
 * un bloque macizo en verde principal #2F6B48 con el texto en blanco, 30 px de relleno y 60 por
 * la izquierda para su icono. Dos problemas, los dos senalados por el disenador:
 *
 *   1. El de exito ("X se ha anadido a tu carrito") es una franja verde enorme que no pega con
 *      el resto de la web.
 *   2. El de ERROR ERA ILEGIBLE. WooCommerce escribe el nombre del campo en <strong> y el resto
 *      en texto normal; sobre el verde el <strong> blanco se leia y el resto NO. De ahi que en
 *      el checkout se viera "Facturacion RUT" en blanco y "es un campo requerido" apagado. Es la
 *      misma familia de fallo que el del cupon: contraste muy por debajo de 4,5:1.
 *
 * Ademas los tres decian lo mismo con el mismo color, asi que un error y una confirmacion se
 * veian identicos: el color tiene que significar algo.
 *
 * Se les da fondo claro y una banda de color a la izquierda, que es lo que distingue uno de otro:
 *   exito -> verde | error -> rojo | informacion -> dorado
 * Con fondo claro el contraste lo pone el texto oscuro y deja de depender de si la frase va o no
 * dentro de un <strong>.
 */
.woocommerce-message.woocommerce-message,
.woocommerce-error.woocommerce-error,
.woocommerce-info.woocommerce-info {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 22px;
	padding: 16px 20px 16px 18px;
	border: 1px solid;
	border-left-width: 4px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	list-style: none;
	box-shadow: 0 2px 10px rgba(30, 58, 42, .05);
}

/* El icono del tema era absoluto (de ahi los 60 px de relleno): pasa a ser un hijo mas de la fila. */
.woocommerce-message.woocommerce-message::before,
.woocommerce-error.woocommerce-error::before,
.woocommerce-info.woocommerce-info::before {
	position: static;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	top: auto;
	left: auto;
	font-size: 19px;
	line-height: 1;
}

/* Exito: verde. */
.woocommerce-message.woocommerce-message {
	background: #EEF4EF;
	border-color: #CFE2D5;
	border-left-color: #2F6B48;
	color: #1C1F1D;
}
.woocommerce-message.woocommerce-message::before { color: #2F6B48; }

/* Error: rojo, el mismo #A93226 de la etiqueta "Agotado". */
.woocommerce-error.woocommerce-error {
	background: #FDEDEB;
	border-color: #F3CFCA;
	border-left-color: #A93226;
	color: #1C1F1D;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
}
.woocommerce-error.woocommerce-error::before { color: #A93226; }
.woocommerce-error.woocommerce-error li { margin: 0; padding: 0; list-style: none; }
/* El <strong> con el nombre del campo, un tono mas fuerte pero sin perder legibilidad. */
.woocommerce-error.woocommerce-error strong { color: #7E2419; font-weight: 700; }

/* Informacion: dorado. */
.woocommerce-info.woocommerce-info {
	background: #FAF7F0;
	border-color: #EADFC4;
	border-left-color: #C9A445;
	color: #3F4642;
}
.woocommerce-info.woocommerce-info::before { color: #C9A445; }

/* Enlaces dentro de un aviso: verde, no blanco sobre claro. */
.woocommerce-message.woocommerce-message a:not(.button),
.woocommerce-error.woocommerce-error a:not(.button),
.woocommerce-info.woocommerce-info a:not(.button) {
	color: #2F6B48;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * El boton "Ver carrito" iba al final de la franja verde, en blanco sobre verde. Ahora es el
 * boton del sitio y se va al extremo derecho de la fila.
 */
.woocommerce-message.woocommerce-message .button,
.woocommerce-error.woocommerce-error .button,
.woocommerce-info.woocommerce-info .button {
	margin-left: auto;
	/*
	 * El !important aqui NO es pereza: el tema declara `padding: 0 !important` para el boton de
	 * dentro de un aviso (assets/demo3/css/single-product.css) y `padding: 0 35px !important` en
	 * button.css. Contra un !important solo gana otro; sin el, el boton salia de 69x18 px.
	 */
	padding: 10px 24px !important;
	display: inline-block;
	background: #2F6B48;
	color: #FFFFFF;
	border: 0;
	border-radius: 55px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
.woocommerce-message.woocommerce-message .button:hover,
.woocommerce-error.woocommerce-error .button:hover,
.woocommerce-info.woocommerce-info .button:hover { background: #1E3A2A; color: #FFFFFF; }

@media (max-width: 767px) {
	.woocommerce-message.woocommerce-message,
	.woocommerce-error.woocommerce-error,
	.woocommerce-info.woocommerce-info {
		padding: 14px 16px 14px 14px;
		font-size: 14px;
	}
	/* En movil el boton baja a su propia linea en vez de apretar el texto. */
	.woocommerce-message.woocommerce-message .button,
	.woocommerce-error.woocommerce-error .button,
	.woocommerce-info.woocommerce-info .button { margin-left: 0; width: 100%; text-align: center; }
}


/* Solo los 3 primeros resultados. */
.content-list-product-search .item-search-pro:nth-child(n+4) { display: none !important; }

/*
 * La lista se colocaba bien (arriba, z-index 10000) pero quedaba con visibility:hidden y opacity:0:
 * el tema la revela con una clase que en el widget global no llega. Se fuerza al abrir el panel.
 */
.elbzotech-search-form-wrap.active .elbzotech-list-product-search,
.elbzotech-search-form-wrap-global.active .elbzotech-list-product-search {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
/* Sin texto escrito no debe asomar nada. */
.elbzotech-search-form-wrap.active .elbzotech-list-product-search:empty,
.elbzotech-search-form-wrap-global.active .elbzotech-list-product-search:empty {
	display: none !important;
}
.content-list-product-search .item-search-pro {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid #F1F1ED;
	text-align: left;
}
/* Hueco de la miniatura siempre reservado: si el perfume no tiene foto (son 6), la fila se
   descuadraba y el texto quedaba centrado. */
.content-list-product-search .search-ajax-thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #F1F1ED;
	border-radius: 8px;
	background: #FAFAF8;
	overflow: hidden;
}
.content-list-product-search .search-ajax-thumb img { width: 52px; height: 52px; object-fit: contain; }
.content-list-product-search .item-search-pro > *:not(.search-ajax-thumb) { flex: 1 1 auto; }

/* La lista va pegada al panel: entre ambos asomaba el fondo oscuro de la pagina. */
.elbzotech-search-form-wrap.active .elbzotech-list-product-search,
.elbzotech-search-form-wrap-global.active .elbzotech-list-product-search {
	margin-top: -1px;
	border-top: 1px solid #F1F1ED;
}

/* Boton "Ver mas resultados". */
.alyabar-ver-mas {
	display: block;
	margin: 12px 16px 16px;
	padding: 12px 18px;
	border-radius: 55px;
	background: #2F6B48;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	transition: background 0.25s ease-out;
}
.alyabar-ver-mas:hover { background: #1E3A2A; color: #fff !important; }


.alyabar-pagos {
	display: block;
}

img.alyabar-pagos__logos {
	display: block;
	width: auto;
	max-width: min(170px, 100%);
	height: auto;
}

.alyabar-pagos__nota {
	display: block;
	margin-top: 6px;
	font-size: 9px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .04em;
	color: #8A918D;
	text-transform: none;
	white-space: normal;
}

/* En la tabla de un pedido la columna va alineada a la derecha, y el logo la sigue. */
.woocommerce-account .alyabar-pagos__logos {
	margin-left: auto;
}


/*
 * "Crear cuenta" era un enlace de texto pegado a "Olvidaste tu contrasena" (10 px de separacion,
 * misma linea, mismo color y tamano): funcionaba, pero no se leia como una opcion. Ahora es un
 * boton con borde, en su propia linea y bajo un rotulo que lo anuncia.
 *
 * ESPECIFICIDAD: alyabar-traducciones.php ya declara `.login-popup-content-wrap .popup-redirect`
 * (0,2,0) y se imprime DESPUES que este archivo (orden alfabetico de los sandbox), asi que un
 * empate lo perderiamos. Por eso estas reglas llevan tres clases.
 *
 * Y NADA DE FLEX CON TEXTO SUELTO (trampa del 9.23): aqui el contenedor solo tiene dos <a> como
 * hijos, los nodos de espacios en blanco no cuentan como elementos flex. El ::before si, y es
 * justo lo que se quiere como rotulo.
 */
.login-popup-content-wrap .elbzotech-login-form .registerform-lost-pass {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #E7EDE8;
	text-align: center;
}

.login-popup-content-wrap .elbzotech-login-form .registerform-lost-pass::before {
	content: '¿Aún no tienes cuenta?';
	font-size: 13px;
	color: #6B726E;
}

.login-popup-content-wrap .elbzotech-login-form .registerform-lost-pass a.register-link {
	display: block;
	padding: 12px 18px;
	border: 2px solid #2F6B48;
	border-radius: 55px;
	color: #2F6B48;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.login-popup-content-wrap .elbzotech-login-form .registerform-lost-pass a.register-link:hover {
	background: #2F6B48;
	color: #FFFFFF;
	text-decoration: none;
}

.login-popup-content-wrap .elbzotech-login-form .registerform-lost-pass a.lostpass-link {
	font-size: 13px;
	color: #8A918D;
	text-decoration: underline;
}

/* El aviso de privacidad del registro del popup, en pequeno (ver el bloque de la pagina). */
.login-popup-content-wrap .woocommerce-privacy-policy-text p {
	font-size: 12px;
	line-height: 1.5;
	color: #8A918D;
}

.login-popup-content-wrap .woocommerce-privacy-policy-text a {
	color: #2F6B48;
	text-decoration: underline;
}


/*
 * ---- 3. REGISTRO: LA LETRA PEQUENA, PEQUENA ----
 *
 * La nota de la contrasena y el aviso de privacidad salian a 18 px, igual que el contenido, y
 * ocupaban mas que el propio formulario.
 *
 * ESPECIFICIDAD: los pisaba `.wrap p { font-size: 18px }` de alyabar-tipografia.php, que es
 * (0,1,1) y se imprime DESPUES que este archivo. Por eso las reglas van con dos y tres clases,
 * no con !important: asi cada tamano sigue teniendo un dueno claro (misma leccion del 9.24).
 *
 * El <p> de la nota no tiene clase ninguna, de ahi el :not([class]).
 */
.woocommerce-account form.register > p:not([class]),
.woocommerce-account .woocommerce-privacy-policy-text p {
	font-size: 12px;
	line-height: 1.55;
	color: #8A918D;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-privacy-policy-text a {
	color: #2F6B48;
	text-decoration: underline;
}

/*
 * ---- 5a. PEDIDOS ----
 *
 * Los tres botones median 187x55 con MARGEN 0: pegados uno al otro, y con las esquinas de 30 px
 * las pastillas se fundian entre si. De ahi el amontonamiento.
 *
 * NO se pone flex en el <td>: eso lo saca del layout de tabla y descuadra las columnas. Los
 * botones pasan a inline-flex de ancho automatico y se separan con margen, que respeta la tabla.
 *
 * ESPECIFICIDAD: el tema declara `.woocommerce table.shop_table td { line-height: 0 }` (0,2,2)
 * -la trampa del 9.28, que amontonaba los nombres largos-, asi que las reglas de celda igualan
 * esa cuenta y ganan por orden (nuestro CSS combinado va el ultimo).
 */
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
	padding-top: 18px;
	padding-bottom: 18px;
	line-height: 1.5;
	vertical-align: middle;
	border-bottom: 1px solid #EEF1EE;
}

.woocommerce-account .woocommerce-orders-table thead th {
	padding-bottom: 12px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A918D;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
	color: #1E3A2A;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: normal;
}

/*
 * Los botones de accion salen en DOS sitios y hay que cubrir los dos: el LISTADO de pedidos y
 * el DETALLE de un pedido, donde el tema los pinta con la clase .order-actions-button a 55 px
 * de alto, 320 px de ancho y margen 0 entre ellos: pegados y los dos en verde oscuro, o sea
 * indistinguibles entre si.
 *
 * Por eso las reglas cuelgan de .woocommerce-account y de la clase de cada accion, no del
 * contenedor de la tabla. Se limitan a .pay/.view/.cancel a proposito: asi no tocan los botones
 * de guardar de "Detalles de la cuenta" ni los de las direcciones.
 */
.woocommerce-account a.button.pay,
.woocommerce-account a.button.view,
.woocommerce-account a.button.cancel {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	height: 38px;
	padding: 0 18px !important;
	margin: 4px 0 4px 8px !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	border-radius: 55px;
	white-space: nowrap;
	box-shadow: none;
}

/* Jerarquia: pagar manda, ver acompana, cancelar avisa en rojo. */
.woocommerce-account a.button.pay {
	background: #2F6B48 !important;
	border: 2px solid #2F6B48;
	color: #FFFFFF !important;
}

.woocommerce-account a.button.pay:hover {
	background: #1E3A2A !important;
	border-color: #1E3A2A;
	color: #FFFFFF !important;
}

.woocommerce-account a.button.view {
	background: #FFFFFF !important;
	border: 2px solid #2F6B48;
	color: #2F6B48 !important;
}

.woocommerce-account a.button.view:hover {
	background: #2F6B48 !important;
	color: #FFFFFF !important;
}

.woocommerce-account a.button.cancel {
	background: #A93226 !important;
	border: 2px solid #A93226;
	color: #FFFFFF !important;
}

.woocommerce-account a.button.cancel:hover {
	background: #7E2419 !important;
	border-color: #7E2419;
	color: #FFFFFF !important;
}

/*
 * ---- 5b. DIRECCIONES ----
 *
 * Eran dos columnas flotadas sin nada que las separase, y "Editar" un enlace de texto de 24 px
 * de alto perdido bajo el titulo.
 *
 * `display: contents` en el <header> disuelve su caja y deja el <h2> y el enlace como hijos
 * directos de la tarjeta, que asi puede ordenarlos: titulo, direccion y el boton ABAJO. Es la
 * forma de moverlo sin tocar la plantilla de WooCommerce.
 *
 * El texto del enlace NO se cambia a proposito: WooCommerce escribe "Anadir..." en vez de
 * "Editar..." cuando la direccion esta vacia, y forzar un rotulo fijo mentiria en ese caso.
 */
/*
 * TRAMPA: WooCommerce le pone a .col2-set un ::before y un ::after de clearfix
 * (`content: " "; display: table`). En una REJILLA esos pseudoelementos son celdas mas, asi
 * que ocupaban la primera y la ultima: la direccion de facturacion caia en la columna 2 y la de
 * envio bajaba a una segunda fila. Hay que apagarlos ANTES de repartir las columnas.
 */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none !important;
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E7EDE8;
	border-radius: 18px;
	padding: 24px;
}

.woocommerce-account .woocommerce-Address > .woocommerce-Address-title {
	display: contents;
}

.woocommerce-account .woocommerce-Address h2 {
	order: 1;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #EEF1EE;
	font-size: 18px;
	color: #1E3A2A;
}

.woocommerce-account .woocommerce-Address address {
	order: 2;
	flex: 1 1 auto;
	margin: 0 0 18px;
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: #3F4642;
}

.woocommerce-account .woocommerce-Address a.edit {
	order: 3;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	border: 2px solid #2F6B48;
	border-radius: 55px;
	color: #2F6B48;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

/*
 * ESPECIFICIDAD DEL HOVER: el tema declara
 *   .woocommerce-account .addresses .title .edit:hover { color: var(--bzo-main-color) }
 * que son CINCO clases (0,5,0). La regla anterior era (0,4,1) y perdia: al pasar el raton el
 * fondo se ponia verde pero el TEXTO seguia verde tambien, o sea invisible.
 *
 * Al comparar especificidad mandan primero las clases: 5 gana a 4 por mucho que haya un
 * elemento de mas. Se anade .addresses para llegar a (0,5,1) y ganar por la via limpia.
 */
.woocommerce-account .addresses .woocommerce-Address a.edit:hover {
	background: #2F6B48;
	color: #FFFFFF;
	text-decoration: none;
}

/*
 * ---- AVISO "CONFIRMA TU CORREO" ----
 *
 * QUE ES: la verificacion de correo de WooCommerce (CustomerEmailVerification), enganchada a
 * woocommerce_before_account_orders. Sirve para que un cliente registrado pueda ENLAZAR a su
 * cuenta las compras que hizo antes sin registrarse. Como el checkout admite compra sin cuenta
 * (woocommerce_enable_guest_checkout = yes), es util y por eso se conserva.
 *
 * PERO no comprueba que existan esas compras: se la muestra a TODO cliente sin verificar, y el
 * tema la pintaba como un bloque enorme con un boton verde macizo que dominaba la pagina.
 * Aqui pasa a ser una linea discreta: texto de 12 px en gris y el boton pequeno y con borde.
 *
 * El boton va en order: 2 para que quede DESPUES del texto. El texto es un nodo suelto, o sea
 * un elemento flex anonimo, y a esos no se les puede dar order: se quedan en 0 y por eso
 * basta con empujar el boton.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 12px 16px;
	background: #FAFBFA;
	border: 1px solid #E7EDE8;
	border-left: 3px solid #C9A445;
	border-radius: 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #6B726E;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
	order: 2;
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: 32px !important;
	min-height: 0 !important;
	padding: 0 14px !important;
	margin: 0 !important;
	float: none !important;
	background: transparent !important;
	border: 1px solid #2F6B48;
	border-radius: 55px;
	color: #2F6B48 !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:hover {
	background: #2F6B48 !important;
	color: #FFFFFF !important;
}

/*
 * ---- "SALIR", COMO BOTON ----
 *
 * Al quitar el Escritorio desaparece tambien el enlace "Cerrar sesion" que llevaba dentro, asi
 * que cerrar sesion queda SOLO en el menu. Se separa del resto con una linea y se pinta en rojo
 * para que se lea como una accion, no como una seccion mas.
 */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #D9E3DC;
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	border: 2px solid #A93226;
	border-radius: 55px;
	color: #A93226;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

/*
 * El hover repite las clases del <li> para superar al selector del tema, que gana por numero de
 * clases (la misma leccion del boton Editar: si solo se pone el fondo, el texto se queda rojo
 * sobre rojo y desaparece).
 */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #A93226;
	color: #FFFFFF;
	text-decoration: none;
}

/* ---- MOVIL ---- */
/*
 * NOMBRES DE PRODUCTO AMONTONADOS EN LAS TABLAS DE MI CUENTA (24-09-2026).
 *
 * FALLO DEL TEMA, no nuestro: assets/global/css/shop-inner-page.css trae
 * `.woocommerce table.shop_table td { line-height: 0 }`. Con un nombre corto no se nota, porque
 * cabe en una linea; pero un nombre largo necesita varias lineas en la columna de Mi cuenta y CON
 * INTERLINEADO CERO LAS LINEAS SE DIBUJAN UNA ENCIMA DE OTRA. En movil salta enseguida, porque la
 * columna es mas estrecha.
 *
 * Es el mismo fallo que se corrigio el 23-09 en el checkout (9.28), donde la correccion se limito
 * a `.woocommerce-checkout` y por eso Mi cuenta seguia igual. Afecta a las dos tablas: el listado
 * de pedidos y el detalle de un pedido (.woocommerce-table--order-details).
 *
 * ESPECIFICIDAD: el selector del tema es (0,2,2), asi que hay que igualarlo o superarlo. Se usa el
 * suyo anteponiendo el contenedor de Mi cuenta -> (0,3,2). Nada de !important.
 *
 * SOLO SE DECLARA EN EL <td>: el interlineado 0 del enlace del producto es HEREDADO, asi que se
 * arregla solo. Y no se toca `td a`, porque los botones Pagar / Cancelar / Ver declaran su propio
 * line-height de 46 px y perderian su altura.
 */
.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table tbody th {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* El importe es el dato que mas se mira: no debe partirse en dos lineas. */
.woocommerce-account .woocommerce table.shop_table td.woocommerce-table__product-total,
.woocommerce-account .woocommerce table.shop_table tfoot td {
	white-space: nowrap;
}

/*
 * REPARTO DE COLUMNAS DEL DETALLE DEL PEDIDO.
 *
 * El algoritmo automatico de la tabla daba a "Producto" 87 px y a "Total" 258 px de los 345 que
 * hay en un telefono, porque la columna derecha la ensancha la fila del METODO DE PAGO (el logo
 * de Webpay y su nota), no los importes. Resultado: el nombre del perfume caia en SEIS lineas de
 * dos palabras mientras un importe de 8 caracteres nadaba en 258 px.
 *
 * Se reparte a mano y los importes van a la derecha, como en cualquier factura.
 */
/*
 * table-layout: fixed ES IMPRESCINDIBLE AQUI.
 *
 * Con el algoritmo automatico (el de por defecto) un `width` en porcentaje es solo una sugerencia:
 * manda el ancho minimo del contenido, y el de la columna derecha lo fija el LOGO DE WEBPAY de la
 * fila del metodo de pago (170 px). Declarando 58/42 sin esto, la columna del nombre se quedaba en
 * 106 px y la de los importes en 239. Con `fixed` se respeta el reparto y el logo se adapta por su
 * max-width: 100%.
 */
.woocommerce-account .woocommerce table.woocommerce-table--order-details {
	table-layout: fixed;
	width: 100%;
}

.woocommerce-account .woocommerce table.shop_table td.woocommerce-table__product-name,
.woocommerce-account .woocommerce table.shop_table th.woocommerce-table__product-name,
.woocommerce-account .woocommerce table.shop_table tfoot th {
	width: 58%;
}

.woocommerce-account .woocommerce table.shop_table td.woocommerce-table__product-total,
.woocommerce-account .woocommerce table.shop_table th.woocommerce-table__product-table,
.woocommerce-account .woocommerce table.shop_table tfoot td {
	width: 42%;
	text-align: right;
}

/*
 * El logo de los medios de pago se adapta a su columna en vez de imponerle el ancho, y no pasa de
 * los 215 px que ya usa en el checkout: a tamano natural son 361 px y en la tabla de un pedido
 * pesaba mas que el propio importe.
 */
.woocommerce-account .woocommerce table.shop_table tfoot td img {
	max-width: min(215px, 100%);
	height: auto;
	margin-left: auto;
}

/* La cantidad (x 1) va pegada al nombre y en gris, para que no se lea como parte del titulo. */
.woocommerce-account .woocommerce table.shop_table td.woocommerce-table__product-name .product-quantity {
	color: #6B726E;
	font-weight: 600;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	/*
	 * WooCommerce apila la tabla en movil, pero su hoja responsive esconde los <th> del cuerpo
	 * (`tbody th { display: none }`) y el NUMERO DE PEDIDO vive justo en un <th>: en el telefono
	 * no se veia de que pedido se trataba. Se repone con su propia etiqueta, como las demas
	 * celdas, que la sacan del atributo data-title.
	 */
	.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {
		display: block !important;
		text-align: right !important;
	}

	.woocommerce-account table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
	}

	/* Cada pedido, una tarjeta: apilado y sin separacion no se sabia donde acababa uno. */
	.woocommerce-account .woocommerce-orders-table tbody tr {
		display: block;
		margin-bottom: 16px;
		padding: 16px;
		border: 1px solid #E7EDE8;
		border-radius: 16px;
	}

	.woocommerce-account .woocommerce-orders-table tbody td,
	.woocommerce-account .woocommerce-orders-table tbody th {
		padding-top: 8px;
		padding-bottom: 8px;
		border-bottom: none;
	}

	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		padding-top: 14px !important;
		border-top: 1px solid #EEF1EE !important;
	}

	.woocommerce-account a.button.pay,
	.woocommerce-account a.button.view,
	.woocommerce-account a.button.cancel {
		display: flex !important;
		width: 100% !important;
		height: 44px;
		margin: 0 0 8px 0 !important;
	}

	.woocommerce-account a.button.cancel:last-child {
		margin-bottom: 0 !important;
	}

	.woocommerce-account .woocommerce-Address a.edit {
		align-self: stretch;
		justify-content: center;
	}
}


/*
 * TITULOS EN LA TIPOGRAFIA DE MARCA (17-09-2026).
 *
 * La marca son titulos en El Messiri y textos en Nunito Sans (7.3 del CLAUDE.md), y la variable
 * --bzo-title_typo-font-family YA vale "El Messiri". El problema es que el tema solo la aplica donde
 * escribe la clase .font-title, que en una ficha de producto son DOS elementos: todo lo demas
 * (nombre del producto, "Related products", titulos de resenas, de widgets y del pie) heredaba
 * Nunito Sans del body. Aqui se aplica a los titulos de verdad.
 *
 * Se usa la variable, no el nombre de la fuente: si algun dia se cambia la tipografia en Theme
 * Options, esto la sigue sin tocar nada.
 *
 * NO se toca el texto corrido: los parrafos siguen en Nunito Sans, que es lo que se lee comodo.
 */
.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap h6,
.wrap .single-title2,
.wrap .widget-title,
.wrap .woocommerce-Reviews-title,
.wrap .comment-reply-title,
.wrap .alyabar-pie__titulo,
.wrap .wc-block-components-title,
.wrap .woocommerce-MyAccount-navigation a,
.wrap .alyabar-banner-tienda__titulo {
	font-family: var(--bzo-title_typo-font-family), 'El Messiri', Georgia, serif;
}

/*
 * EL NOMBRE DEL PRODUCTO VA SIEMPRE EN LA FUENTE DE TEXTOS (decision del disenador, 17-09-2026).
 * En El Messiri los nombres largos de perfume se leian peor y descuadraban las tarjetas. Los
 * titulos de seccion (banner, "Tambien te puede gustar", resenas, widgets) SI siguen en El Messiri.
 * Se listan todos los sitios donde aparece un producto: tarjeta, ficha, carrito, mini-carrito,
 * checkout por bloques, Me gusta y resultados del buscador.
 */
.wrap .product-title,
.wrap .product-title-single,
.wrap .product_title,
.wrap .item-product .product-title a,
.wrap .mini-cart-content .product-mini-cart a,
.wrap .item-info-cart a,
.wrap .wc-block-components-product-name,
.wrap .wishlist_table .product-name a,
.wrap .item-search-pro .product-title,
.wrap .alyabar-sugerencia__nombre {
	font-family: var(--bzo-body_typo-font-family), 'Nunito Sans', Arial, sans-serif;
}
/* El precio y los importes se quedan en la fuente de textos: se leen mejor las cifras. */
.wrap .woocommerce-Price-amount,
.wrap .price,
.wrap .bzotech-price-single {
	font-family: var(--bzo-body_typo-font-family), 'Nunito Sans', Arial, sans-serif;
}
@media (min-width: 1025px) {

	/* Texto corrido: el tema deja el cuerpo en 16 px. */
	.wrap p,
	.wrap li,
	.wrap dd,
	.wrap td {
		font-size: 18px;
		line-height: 1.7;
	}

	/* Descripcion e informacion de la ficha. */
	.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel p,
	.woocommerce-Tabs-panel li {
		font-size: 18px;
		line-height: 1.7;
	}

	/* Titulos de seccion y de pagina. */
	.wrap h1, .wrap .title48 { font-size: 46px; }
	.wrap h2, .wrap .single-title2, .wrap h1.product-title-single { font-size: 34px; } /* h1 de la ficha (alyabar-seo.php): mismo tamano que cuando era h2 */
	.wrap h3, .wrap .title20 { font-size: 23px; }
	.wrap h4 { font-size: 20px; }

	/* Nombre del producto en la ficha. */
	.summary.product-detail-info .product_title { font-size: 34px; }

	/* Menu principal y pie: el tema los deja en 16 y 14. */
	.alyabar-barra-menu .elbzotech-menu > li > a { font-size: 17px; }
	.footer-wrap .alyabar-pie__lista a,
	.footer-wrap p { font-size: 16px; }

	/* Formularios y botones generales. */
	.wrap input[type="text"],
	.wrap input[type="email"],
	.wrap input[type="tel"],
	.wrap input[type="password"],
	.wrap textarea,
	.wrap select { font-size: 16px; }
}


/*
 * Centrada de verdad: el contenedor de Elementor es flex en columna, asi que el centrado horizontal
 * lo da el propio bloque con `justify-content: center` y `margin: 0 auto`.
 */
.top-header-aleta .alyabar-cinta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0 auto;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-align: center;
}

.top-header-aleta .alyabar-cinta__icono {
	font-size: 19px;
	line-height: 1;
	color: #FFFFFF;
	flex: 0 0 auto;
}

/*
 * El punto dorado que separaba los mensajes del carrusel sobraba con un solo texto: lo pintaba
 * `alyabar-marca.php` sobre `.item-slider- p:before`, que ya no existe. Se deja la regla por si
 * queda algun resto en cache.
 */
.top-header-aleta .alyabar-cinta__texto:before {
	content: none;
}

@media (max-width: 480px) {
	.top-header-aleta .alyabar-cinta {
		font-size: 12px;
		gap: 8px;
	}
	.top-header-aleta .alyabar-cinta__icono {
		font-size: 17px;
	}
}


.single-list-social ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.single-list-social li { margin: 0; }

/*
 * Circulos uniformes: el tema daba a cada red su color corporativo. Ojo: al abrir el popup el tema
 * CLONA el bloque en una capa aparte (.share-popup-content-open), fuera de .single-list-social, asi
 * que hay que apuntar tambien a .share-icon suelto.
 */
.share-icon,
.single-list-social .share-icon,
.single-list-social .share-icon.facebook-social,
.single-list-social .share-icon.envelope-social,
.single-list-social .share-icon.whatsapp-social {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #DfE5E0;
	background: #F5F8F5 !important;
	color: #2F6B48 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;
}
a:hover .share-icon,
.single-list-social a:hover .share-icon,
.single-list-social a:hover .share-icon.facebook-social,
.single-list-social a:hover .share-icon.envelope-social,
.single-list-social a:hover .share-icon.whatsapp-social {
	background: #2F6B48 !important;
	border-color: #2F6B48;
	color: #FFFFFF !important;
	transform: translateY(-2px);
}
.share-icon i { font-size: inherit; line-height: 1; }
.single-list-social .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.single-list-social .number { display: none; }

/* Bloque de la ficha: debajo de las categorias. */
.alyabar-compartir {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #F1F1ED;
}
.alyabar-compartir__titulo {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8A8F8B;
}
.summary.product-detail-info > .alyabar-categorias { order: 7; }
.summary.product-detail-info > .alyabar-compartir { order: 8; }
@media (max-width: 767px) {
	.alyabar-compartir { flex-wrap: wrap; gap: 10px; }
}


@media (max-width: 767px) {
	/* 1. Tienda, categorias, marcas y busqueda: una tarjeta por fila. */
	.list-product-wrap > .list-col-item,
	.products > .list-col-item,
	.list-col-item.list-2-item-mobile {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.list-product-wrap .item-product .product-title,
	.products .item-product .product-title { font-size: 16px; }

	/* 1b. Paginacion: los 8 botones de 39 px no caben en 345 px y la flecha "siguiente" saltaba
	   sola a una segunda fila. Se centran, se permiten dos lineas ordenadas y se reducen un poco. */
	.pagi-nav {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		justify-content: center !important;
		gap: 8px;
		padding: 0;
	}
	.pagi-nav .page-numbers {
		width: 36px !important;
		height: 36px !important;
		line-height: 34px !important;
		margin: 0 !important;
		font-size: 15px;
	}
	.pagi-nav .page-numbers.dots { width: 22px !important; }

	/* 2. Ficha: botones de decant en una fila que envuelve. */
	.bzotech-form-cart-single .tawcvs-swatches {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.bzotech-form-cart-single .variations .type-label .swatch-label-box { margin: 0; }
	.bzotech-form-cart-single .variations .type-label .swatch-label { margin-right: 0; }
	.bzotech-form-cart-single .variations .detail-attr {
		display: block;
	}
	.bzotech-form-cart-single .variations .title-atttr {
		display: block;
		margin-bottom: 8px;
	}

	/* Cantidad | carrito | corazon, en una sola linea.
	   El tema declara flex en este contenedor y ganaba a la rejilla, asi que se fuerza flex y se
	   reparte con anchos fijos. Los 3 <input> ocultos del formulario no estorban (display:none). */
	.bzotech-form-cart-single .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 10px;
		margin-top: 14px;
	}
	.bzotech-form-cart-single .detail-qty {
		flex: 0 0 104px !important;
		width: 104px !important;
		height: 46px !important;
		line-height: 46px !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}
	.bzotech-form-cart-single .detail-qty .qty-val {
		height: 44px;
		line-height: 44px;
		padding: 0;
		text-align: center;
	}
	.bzotech-form-cart-single .single_add_to_cart_button {
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 14px;
		white-space: nowrap;
	}
	.bzotech-form-cart-single .wishlist_compare_single_product {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin: 0;
		border: 1px solid #DfE5E0;
		border-radius: 50%;
	}
	/* En movil el corazon va sin texto: no cabe y ya se entiende por el icono. */
	.bzotech-form-cart-single .wishlist_compare_single_product .wishlist-link span,
	.bzotech-form-cart-single .wishlist_compare_single_product .popup-share span { display: none; }
	.bzotech-form-cart-single .wishlist_compare_single_product .popup-share,
	.bzotech-form-cart-single .wishlist_compare_single_product .single-list-social { display: none; }
}


/* 2. Boton siempre visible, redondeado y separado del borde de la tarjeta. */
.item-grid-product-style3 .addcart-link-style3,
.item-grid-product-style3:hover .addcart-link-style3 {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 14px 0;
	height: 44px;
	line-height: 44px;
	border-radius: 55px;
	background: #2F6B48;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	transition: background 0.25s ease-out;
}
/* El tema define su propio :hover con la variable --bzo-main-color, que aqui vale lo mismo que el
   color de reposo, asi que el cambio no se notaba. Se fuerza el verde profundo. */
.item-grid-product-style3 .addcart-link-style3:hover,
.item-grid-product-style3 .item-product:hover .addcart-link-style3:hover,
.item-grid-product-style3 a.addcart-link-style3:hover {
	background: #1E3A2A !important;
	color: #fff !important;
}

/* El precio va dentro de <span class="woocommerce-Price-amount">, que traia peso 600 propio.
   En los productos en oferta el precio nuevo va dentro de <ins>, donde el tema lo dejaba en 14 px
   y peso 500: igual de apagado que el precio tachado. */
.item-grid-product-style3 .product-info .woocommerce-Price-amount,
.item-grid-product-style3 .product-info bdi,
.item-grid-product-style3 .product-info ins,
.item-grid-product-style3 .product-info ins .woocommerce-Price-amount,
.item-grid-product-style3 .product-info ins bdi {
	font-weight: 800 !important;
	font-size: 19px !important;
	color: #1E3A2A !important;
	text-decoration: none;
}
/* El precio anterior, apagado y pequeno. Va despues de la regla general para poder ganarle. */
.item-grid-product-style3 .product-info del,
.item-grid-product-style3 .product-info del .woocommerce-Price-amount,
.item-grid-product-style3 .product-info del bdi {
	font-weight: 500 !important;
	font-size: 15px !important;
	color: #707070 !important;
	text-decoration: line-through;
}
/* El bloque que lo contenia era una cinta absoluta pegada al borde inferior. */
.item-grid-product-style3 .product-extra-link {
	position: static;
	margin: 0;
	box-shadow: none;
	background: transparent;
}
/*
 * La foto mantiene overflow:hidden (como en el tema). Al ponerlo en visible se perdian las esquinas
 * superiores redondeadas Y quedaban a la vista los iconos de lista de deseos y compartir, que el
 * tema aparca en right:-100px y solo mete al pasar el raton.
 * El boton ya no necesita salirse: es estatico y va debajo de la imagen, dentro del recuadro.
 */
/*
 * El tema pinta la caja de la foto en #ebebeb y las imagenes vienen con fondo #f5f5f5, asi que la
 * franja bajo la foto (donde ahora vive el boton) se veia mas oscura que la propia foto.
 * Se iguala a #f5f5f5.
 */
.item-grid-product-style3 .product-thumb {
	overflow: hidden;
	border-radius: 30px 30px 0 0;
	background: #F5F5F5;
}
.item-grid-product-style3 .product-thumb > a img,
.item-grid-product-style3 .product-thumb .product-thumb-link img {
	border-radius: 30px 30px 0 0;
}
/* Sin sombras heredadas alrededor del boton. */
.item-grid-product-style3 .addcart-link-style3,
.item-grid-product-style3 .addcart-link-style3:hover {
	box-shadow: none;
	text-shadow: none;
}

/*
 * Los iconos de lista de deseos y compartir se aparcan en right:-100px y solo entran al pasar el
 * raton; sin recorte quedaban colgando fuera del recuadro. Se recorta en .item-product, que ya
 * lleva el redondeo de 30 px del tema.
 */
.item-grid-product-style3 .item-product {
	overflow: hidden;
	border-radius: 30px;
}
/*
 * Y por si el recorte no los alcanza (se posicionan contra otro antecesor): ocultos en reposo y
 * visibles al pasar el raton, que es el comportamiento que buscaba el tema.
 */
.item-grid-product-style3 .product-thumb__group-extra {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease-out, right 0.3s ease-out, visibility 0.25s;
}
.item-grid-product-style3:hover .product-thumb__group-extra,
.item-grid-product-style3 .item-product:hover .product-thumb__group-extra {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	right: 16px;
}

/* 4. Precio de la tarjeta mas destacado. */
.item-grid-product-style3 .product-info .product-price,
.item-grid-product-style3 .product-info .price {
	font-size: 18px;
	font-weight: 800;
	color: #1E3A2A;
}
.item-grid-product-style3 .product-info .price del .woocommerce-Price-amount {
	font-size: 14px;
	font-weight: 500;
	color: #707070;
}
.item-grid-product-style3 .product-info .price ins { text-decoration: none; }

/* 5. Marca arriba, nombre debajo, todo centrado y con la MISMA altura en todas las tarjetas. */
.item-grid-product-style3 .product-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 14px 14px 18px;
}
.item-grid-product-style3 .product-info .wrap-rating { order: 1; margin: 0 0 8px; }
.item-grid-product-style3 .product-info .alyabar-tarjeta-marca { order: 2; }
.item-grid-product-style3 .product-info .product-title { order: 3; }
.item-grid-product-style3 .product-info .price,
.item-grid-product-style3 .product-info .product-price { order: 4; }

.item-grid-product-style3 .product-info .alyabar-tarjeta-marca {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5F6661; /* contraste 6:1 (antes #8A8F8B, 3,3:1) */
	line-height: 1.2;
}
/* El nombre ocupa SIEMPRE dos lineas: es lo que desigualaba las tarjetas. */
.item-grid-product-style3 .product-info .product-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	margin: 0 0 8px;
	line-height: 1.4;
}
.item-grid-product-style3 .product-info .price,
.item-grid-product-style3 .product-info .product-price { margin: 0; }

/* Altura pareja: la foto siempre cuadrada y la tarjeta estirada a la fila.
 * OJO: NO poner display:flex en .list-col-item. Ese envoltorio lleva el ancho de columna
 * (.list-4-item = width:25%) y el flex lo anula: la rejilla colapsa a UNA tarjeta por fila.
 * El estirado se consigue con height:100% hacia dentro. */
/* NO tocar el ancho de .item-grid-product-style3: esa clase va en el MISMO elemento que
 * .list-4-item (width:25% en post-items.css), que es quien da las columnas. Un width:100% aqui
 * colapsa la rejilla a una tarjeta por fila. Solo se estira la altura. */
.list-product-wrap .list-col-item { display: block; }
.item-grid-product-style3 { height: 100%; }
.item-grid-product-style3 .item-product {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.item-grid-product-style3 .product-thumb { flex: 0 0 auto; }
.item-grid-product-style3 .product-thumb > a,
.item-grid-product-style3 .product-thumb .product-thumb-link {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.item-grid-product-style3 .product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.item-grid-product-style3 .product-info { flex: 1 1 auto; justify-content: flex-start; }


/* 7. Vista LISTA de la tienda (16-09-2026).
 * list.php imprime tres iconos: me gusta (linea 58), comparar (59) y vista previa (60).
 * Se ocultan comparar y vista previa por CSS y no desregistrando, porque los tres los pinta el
 * mismo bloque .list-compare-wishlist: quitar la accion se llevaria tambien el de me gusta.
 */
/* Clases reales que imprime list.php: 'product-compare compare compare-link' y
 * 'product-quick-view quickview-link'. Se apunta por subcadena para no depender del orden
 * ni de la etiqueta (a o div). El de me gusta ('add_to_wishlist wishlist-link') se conserva. */
.list-compare-wishlist [class*="compare"],
.list-compare-wishlist [class*="quick-view"],
.list-compare-wishlist [class*="quickview"] { display: none !important; }

/*
 * VISTA PREVIA Y COMPARAR, FUERA DE TODA LA WEB (21-09-2026, peticion del disenador).
 *
 * La regla de arriba solo cubria la VISTA LISTA. En la rejilla de la tienda no se notaba porque
 * ahi el tema no los imprime, pero en los CARRUSELES DE LA PORTADA si: se midieron 38 enlaces
 * "product-quick-view quickview-link" con 48 px de ancho, colgando de .product-thumb__group-extra,
 * que es el grupo de iconos que el tema pone sobre la foto.
 *
 * Se apunta por SUBCADENA de clase, no por la clase exacta: el marcado cambia segun la plantilla
 * ("product-compare compare compare-link" en unas, "product-quick-view quickview-link" en otras)
 * y unas veces es <a> y otras <div>. Apuntar a .compare-button o a.compare no los alcanza.
 *
 * Se oculta por CSS y NO desregistrando la accion: el tema pinta me gusta, comparar y compartir
 * en el mismo bloque, asi que quitar la accion se llevaria tambien el corazon.
 *
 * El :hover se repite a proposito. En reposo el tema ya los aparca (opacity 0, right -100px), y
 * es su propia regla :hover la que los revela: sin esta segunda tanda volverian a asomar.
 */
.product-thumb__group-extra [class*="compare"],
.product-thumb__group-extra [class*="quick-view"],
.product-thumb__group-extra [class*="quickview"],
.product-thumb [class*="quick-view"],
.product-thumb [class*="quickview"],
.product-thumb a[class*="compare"],
.item-product [class*="quickview-link"],
.item-product a[class*="compare-link"],
.product-thumb__group-extra:hover [class*="quick-view"],
.product-thumb:hover [class*="quick-view"],
.product-thumb:hover [class*="quickview"],
.product-thumb:hover a[class*="compare"],
.item-product:hover [class*="quickview-link"],
.item-product:hover a[class*="compare-link"] { display: none !important; }

/* Precio de la vista lista en negrita, como en la rejilla. */
.item-list-default .product-info .price,
.item-list-default .product-info .price .woocommerce-Price-amount,
.item-list-default .product-info .price ins .woocommerce-Price-amount,
.item-list-default .product-info .price bdi,
.item-list-default2 .product-info .price,
.item-list-default2 .product-info .price .woocommerce-Price-amount {
	font-weight: 800 !important;
	color: #1E3A2A !important;
}
.item-list-default .product-info .price del,
.item-list-default .product-info .price del .woocommerce-Price-amount {
	font-weight: 500 !important;
	color: #707070 !important;
}


/* Vista lista: mismo orden que la rejilla (estrellas, marca, nombre, precio).
 * list.php no comparte el flex de .product-info de grid-style3, asi que hay que declararlo aqui. */
.item-list-default .product-info,
.item-list-default2 .product-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.item-list-default .product-info .wrap-rating,
.item-list-default2 .product-info .wrap-rating { order: 1; margin: 0 0 6px; }
.item-list-default .product-info .alyabar-tarjeta-marca,
.item-list-default2 .product-info .alyabar-tarjeta-marca { order: 2; margin-bottom: 4px; }
.item-list-default .product-info .product-title,
.item-list-default2 .product-info .product-title { order: 3; min-height: 0; margin: 0 0 8px; }
.item-list-default .product-info .price,
.item-list-default2 .product-info .price { order: 4; margin: 0 0 10px; }
/* TRAMPA: en flex, todo hijo SIN 'order' se coloca como order:0, es decir ANTES que los que
 * llevan order:1..6. La descripcion quedaba arriba del todo. Se fija un order por defecto alto a
 * todos los hijos y luego se bajan los que si conocemos. */
.item-list-default .product-info > *,
.item-list-default2 .product-info > * { order: 5; }
.item-list-default .product-info .product-desc,
.item-list-default .product-info .description,
.item-list-default .product-info p,
.item-list-default2 .product-info .product-desc { order: 5; }
.item-list-default .product-info .list-compare-wishlist,
.item-list-default .product-info .product-extra-link,
.item-list-default2 .product-info .list-compare-wishlist { order: 6; }


/* Estas van despues del order:5 generico, para imponerse. */
.item-list-default .product-info .wrap-rating,
.item-list-default2 .product-info .wrap-rating { order: 1 !important; }
.item-list-default .product-info .alyabar-tarjeta-marca,
.item-list-default2 .product-info .alyabar-tarjeta-marca { order: 2 !important; }
.item-list-default .product-info .product-title,
.item-list-default2 .product-info .product-title { order: 3 !important; }
.item-list-default .product-info .price,
.item-list-default2 .product-info .price { order: 4 !important; }
.item-list-default .product-info .list-compare-wishlist,
.item-list-default .product-info .product-extra-link,
.item-list-default2 .product-info .list-compare-wishlist { order: 6 !important; }

@media (max-width: 767px) {
	.item-grid-product-style3 .addcart-link-style3 { height: 48px; line-height: 48px; font-size: 16px; }
	.item-grid-product-style3 .product-info .product-price,
	.item-grid-product-style3 .product-info .price { font-size: 19px; }
}

/*
 * EL OTRO VELO OSCURO DEL TEMA (25-09-2026).
 *
 * Mismo caso que el `.shop-loading` de la tienda (9.32), pero en los WIDGETS DE PRODUCTO
 * FILTRABLES DE ELEMENTOR -los carruseles con pestanas de la portada-. Al pulsar una pestana,
 * load_product_element_filter() de ajax.js (linea 494) inyecta
 * `<div class="ajax-loading"><i class="fa fa-spinner fa-spin"></i></div>` y product-items.css le da
 * `background-color: rgba(0,0,0,0.3)` con `z-index: 9999`, mas oscuro aun que el de la tienda.
 *
 * Se hace lo mismo: fondo transparente, el mecanismo intacto -el tema lo inyecta y lo quita en la
 * linea 511- y el spinner en verde de marca, porque el del tema es blanco y contaba con el velo.
 *
 * EL SELECTOR REPITE `:not(.list-product-search)` a proposito: es el del tema (0,2,0 contando la
 * negacion), y sin el la regla seria (0,1,0) y perderia. Ademas esa clase se usa tambien para el
 * panel de resultados del buscador, que NO lleva velo y no hay que tocar.
 *
 * Y NADA DE TRANSFORM para centrar el icono: la animacion fa-spin lo pisa (9.32). Aqui el tema ya
 * lo centra bien con left/right/top/bottom a 0 y `margin: auto`, asi que solo se cambia el color.
 */
.ajax-loading:not(.list-product-search) {
	background-color: transparent;
}

.ajax-loading:not(.list-product-search) i {
	color: #2F6B48;
	font-size: 34px;
}



.alyabar-sin-foto {
	position: relative;
	display: block;
}
.alyabar-sin-foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	opacity: 0.25;
}
.alyabar-sin-foto__texto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-8deg);
	padding: 7px 18px;
	border: 1px dashed rgba(30, 58, 42, 0.35);
	border-radius: 55px;
	background: rgba(255, 255, 255, 0.8);
	color: #7A8179;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}
@media (max-width: 767px) {
	.alyabar-sin-foto__texto { font-size: 12px; padding: 6px 14px; }
}


.alyabar-banner-tienda {
	background: radial-gradient(120% 140% at 50% 0%, #2F6B48 0%, #1E3A2A 62%);
	color: #FAF7F0;
	text-align: center;
	padding: 56px 20px 48px;
}
.alyabar-banner-tienda__inner { max-width: 760px; margin: 0 auto; }
.alyabar-banner-tienda__ceja {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #C9A445;
}
.alyabar-banner-tienda__titulo {
	margin: 0;
	font-family: var(--bzo-title_typo-font-family), 'El Messiri', Georgia, serif;
	font-weight: 600;
	font-size: 44px;
	line-height: 1.15;
	color: #FAF7F0;
	text-wrap: balance;
}
.alyabar-banner-tienda__adorno {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px auto 14px;
}
.alyabar-banner-tienda__adorno::before,
.alyabar-banner-tienda__adorno::after {
	content: "";
	width: 56px;
	height: 1px;
	background: #C9A445;
}
.alyabar-banner-tienda__adorno i {
	display: block;
	width: 7px;
	height: 7px;
	background: #C9A445;
	transform: rotate(45deg);
}
.alyabar-banner-tienda__desc {
	margin: 0 auto 8px;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(250, 247, 240, 0.82);
}
.alyabar-banner-tienda__total {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #C9A445;
}
.alyabar-banner-tienda + .wrap-bread-crumb { border-top: 0; }
@media (max-width: 767px) {
	.alyabar-banner-tienda { padding: 34px 16px 30px; }
	.alyabar-banner-tienda__titulo { font-size: 30px; }
	.alyabar-banner-tienda__desc { font-size: 14px; }
	.alyabar-banner-tienda__adorno::before,
	.alyabar-banner-tienda__adorno::after { width: 36px; }
}


/* ---------- Cinta superior: mas baja y en verde profundo ---------- */
/* El relleno y el color viven en el JSON de la cabecera; el tamano del texto y del icono los fija
   alyabar-marca.php, que se imprime despues, asi que aqui se gana por especificidad. */
#header .top-header-aleta .content-slider-custom,
#header .top-header-aleta .content-slider-custom p,
#header .top-header-aleta .content-slider-custom a { font-size: 12px; letter-spacing: 0.04em; }
#header .top-header-aleta .alyabar-cinta__icono { font-size: 15px; margin-right: 6px; }
#header .top-header-aleta .item-slider- p:before { margin-right: 16px; }

/* ---------- Barra de busqueda entre la cinta y el menu ---------- */
.alyabar-col-buscador { background: transparent; }
/* El widget de Elementor se queda en su ancho natural (250px) dentro del contenedor flex. */
.alyabar-col-buscador .elementor-widget-bzotech-search { width: 100%; max-width: none; }
.alyabar-col-buscador .elbzotech-search-form-wrap { width: 100%; }
/* El tope de 680px va en el wrap: Elementor impone max-width:100% a los widgets del contenedor
   y ganaba al del widget, dejando la barra a todo el ancho. */
.alyabar-col-buscador .elbzotech-search-wrap { width: 100%; max-width: none; margin: 0; }
.alyabar-col-buscador .elbzotech-search-form-wrap { position: relative; }
.alyabar-col-buscador .elbzotech-search-form {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid #DCE6DE;
	border-radius: 55px;
	background: #FFFFFF;
}
.alyabar-col-buscador .elbzotech-search-form:focus-within { border-color: #2F6B48; }
.alyabar-col-buscador .elbzotech-search-form input[name="s"] {
	flex: 1 1 auto;
	height: 44px;
	border: 0 !important;
	background: transparent !important;
	padding: 0 6px 0 22px;
	font-size: 15px;
	color: #1C1F1D;
	box-shadow: none !important;
}
/* El tema pinta el bloque de enviar con fondo propio y esquinas rectas, y sobresalia del borde
   redondeado de la barra. Se convierte en un boton circular metido dentro de la pastilla. */
.alyabar-col-buscador .elbzotech-submit-form { flex: 0 0 auto; background: transparent !important; margin-right: 3px; }
/* search.css del tema gana con .elbzotech-search-default .elbzotech-submit-form .elbzotech-text-bt-search
   (height/line-height 45px y border-radius 9px 25px 25px 9px): hay que igualar esa especificidad. */
.alyabar-col-buscador .elbzotech-search-default .elbzotech-submit-form .elbzotech-text-bt-search {
	box-sizing: border-box;
	width: 38px !important;
	min-width: 38px;
	max-width: 38px;
	height: 38px !important;
	line-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	flex: 0 0 38px;
}
.alyabar-col-buscador .elbzotech-search-default .elbzotech-submit-form .elbzotech-text-bt-search svg,
.alyabar-col-buscador .elbzotech-search-default .elbzotech-submit-form .elbzotech-text-bt-search i {
	width: 19px;
	height: 19px;
	font-size: 19px;
	color: #FFFFFF;
}
.alyabar-col-buscador .elbzotech-search-default .elbzotech-submit-form .elbzotech-text-bt-search svg path { stroke: #FFFFFF; }
.alyabar-col-buscador .elbzotech-text-bt-search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2F6B48 !important;
	cursor: pointer;
	transition: background 0.25s ease-out;
}
.alyabar-col-buscador .elbzotech-text-bt-search:hover { background: #1E3A2A !important; }
.alyabar-col-buscador .elbzotech-text-bt-search svg { width: 19px; height: 19px; }
.alyabar-col-buscador .elbzotech-text-bt-search svg path { stroke: #FFFFFF; }

/* Resultados: sin popup no hay clase .active del tema, la pone el script de este archivo. */
.alyabar-col-buscador .elbzotech-list-product-search {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 10001;
	background: #FFFFFF;
	border: 1px solid #EEF4EF;
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(30, 58, 42, 0.14);
	max-height: 60vh;
	overflow-y: auto;
	text-align: left;
}
.alyabar-col-buscador .elbzotech-search-form.alyabar-abierta .elbzotech-list-product-search {
	display: block;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ---------- Los tres iconos, del mismo tamano ---------- */
/* El de cuenta se veia mas grande porque el tema lo pinta relleno (.elbzotech-bt-default, verde
   profundo) mientras buscar y carrito iban sobre gris claro. Ahora los tres son el mismo circulo
   de 42px con el mismo icono de 22px. El !important y el html body son para ganar a
   alyabar-traducciones.php, que se imprime despues. */
html body #header .main-header-aleta .alyabar-deseos-link,
html body #header .main-header-aleta .mini-cart-link,
html body #header .main-header-aleta .elbzotech-account-default .button-account-manager {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	padding: 0 !important;
	line-height: 42px !important;
	border-radius: 50% !important;
	background: #F5F8F5 !important;
	color: #1E3A2A !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease-out, color 0.25s ease-out;
}
html body #header .main-header-aleta .alyabar-deseos-link:hover,
html body #header .main-header-aleta .mini-cart-link:hover,
html body #header .main-header-aleta .elbzotech-account-default .button-account-manager:hover {
	background: #2F6B48 !important;
	color: #FFFFFF !important;
}
html body #header .main-header-aleta .alyabar-deseos-link svg,
html body #header .main-header-aleta .mini-cart-link svg {
	width: 22px;
	height: 22px;
}
html body #header .main-header-aleta .alyabar-deseos-link svg path,
html body #header .main-header-aleta .mini-cart-link svg path { stroke: #1E3A2A; }
html body #header .main-header-aleta .alyabar-deseos-link:hover svg path,
html body #header .main-header-aleta .mini-cart-link:hover svg path { stroke: #FFFFFF; }
html body #header .main-header-aleta .elbzotech-account-default .button-account-manager span:before { font-size: 21px; }
.alyabar-deseos { display: inline-flex; align-items: center; }

/* El svg iba como inline y se apoyaba en la linea base del span (line-height 42px): quedaba 6px por
   encima del centro del circulo, y al rellenarse en hover saltaba a la vista. El carrito tiene el
   mismo marcado, pero su span usa 31px de fuente y el desfase era de 1px. Con flex y line-height 0
   ambos quedan centrados exactos. */
html body #header .main-header-aleta .alyabar-deseos-icono,
html body #header .main-header-aleta .mini-cart-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 0 !important;
}
html body #header .main-header-aleta .alyabar-deseos-link svg,
html body #header .main-header-aleta .mini-cart-link svg { display: block; }

/* Contadores del carrito y de deseos, identicos en PC y en movil (16-09-2026, decision del
   disenador). Se toma la forma del carrito: circulo de 22px con el numero a 10px, arriba a la
   derecha del icono, y fondo ROJO #A93226 (el rojo de la paleta, que hasta ahora solo usaba la
   etiqueta "Agotado": ver la tabla de §7.3 de CLAUDE.md).

   Van a -8px y no a los -15px del tema porque en movil la cabecera es sticky pegada al borde
   superior y .wrap lleva overflow:clip (necesario para el sticky, ver alyabar-cabecera-movil.php):
   a -15px el badge se salia de la pantalla y se cortaba por arriba. */
html body #header .main-header-aleta .alyabar-deseos-link,
html body #header .main-header-aleta .mini-cart-link { position: relative; }
/* El badge del carrito cuelga de .mini-cart-icon, un span de 22px al que el tema pone
   position:relative, mientras que el del corazon cuelga del <a> de 42px: con el mismo -8px cada
   uno se anclaba a una caja distinta y no coincidian. Anulando ese relative, ambos se anclan al
   circulo de 42px y quedan en el mismo sitio. */
html body #header .main-header-aleta .mini-cart-icon { position: static; }

html body #header .main-header-aleta .alyabar-deseos-number,
html body #header .main-header-aleta .mini-cart-number,
.alyabar-deseos-number--barra {
	position: absolute;
	top: -8px !important;
	left: auto !important;
	right: -8px !important;
	width: 22px !important;
	min-width: 22px;
	height: 22px !important;
	padding: 0 !important;
	box-sizing: border-box;
	border: 0 !important;
	border-radius: 50% !important;
	background: #A93226 !important;
	color: #FFFFFF !important;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 22px !important;
	text-align: center;
}

/* En la barra inferior el icono va centrado sobre el texto, asi que el badge se coloca sobre el
   icono y no en la esquina del boton. */
.elementor-element-19ed1eb0 .alyabar-deseos-barra { position: relative; }
.alyabar-deseos-number--barra { top: -2px !important; right: calc(50% - 24px) !important; }

/* En movil el corazon sale de la cabecera: la lista de deseos vive en la barra inferior, asi que
   arriba quedan solo carrito y cuenta (widget shortcode a1d0se7). */
@media (max-width: 767px) {
	html body #header .main-header-aleta .elementor-element-a1d0se7 { display: none !important; }
}
/* Separacion igual entre los tres (carrito y cuenta traen 12px propios desde Elementor). */
html body #header .main-header-aleta .alyabar-deseos { margin-left: 0; }

/* ---------- Movil ---------- */
/* En movil la cabecera es compacta y fija (alyabar-cabecera-movil.php) y el buscador esta en la
   barra inferior: la barra ancha sobra. */
@media (max-width: 767px) {
	.alyabar-col-buscador { display: none !important; }
}


@media (min-width: 1201px) {
	.wrap { overflow: clip !important; }

	/* --- Fila principal: mas baja y por encima de la del menu (trampas 4 y 5) --- */
	#header .main-header-aleta {
		background-color: #FFFFFF;
		min-height: 78px;
		position: relative;
		z-index: 1005 !important;
	}
	#header .main-header-aleta .elementor-element-192ab3b img {
		max-height: 52px;
		width: auto !important;
	}
	#header .main-header-aleta .elbzotech-mini-cart,
	#header .main-header-aleta .elbzotech-account-manager,
	#header .main-header-aleta .alyabar-deseos {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	#header .main-header-aleta > .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* --- El buscador ocupa su columna entera (trampa 7) --- */
	.alyabar-col-buscador > .elementor-element,
	.alyabar-col-buscador > .elementor-element > .elementor-widget-container {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: none !important;
	}
	.alyabar-col-buscador .elbzotech-search-wrap,
	.alyabar-col-buscador .elbzotech-search-form-wrap,
	.alyabar-col-buscador .elbzotech-search-form {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
	}

	/* --- Fila del menu: baja y en verde de marca --- */
	#header .alyabar-barra-menu {
		background-color: #2F6B48;
		position: relative;
		z-index: 1000;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a {
		height: 48px !important;
		line-height: 48px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		color: #FFFFFF !important;
		font-size: 15px;
		position: relative;
		transition: background-color .2s ease, color .2s ease;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a:after {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 9px;
		height: 2px;
		background: #C9A445;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform .22s ease;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li:hover > a,
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.current-menu-item > a {
		background-color: #1E3A2A !important;
		color: #FFFFFF !important;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li:hover > a:after { transform: scaleX(1); }
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a i,
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a svg {
		color: #FFFFFF !important;
		fill: #FFFFFF !important;
	}

	/* --- Modo fijo: solo la fila del buscador (trampas 2 y 3) --- */
	body.alyabar-fijo #header .top-header-aleta,
	body.alyabar-fijo #header .alyabar-barra-menu { display: none !important; }

	body.alyabar-fijo #header .main-header-aleta {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1002;
		background-color: #FFFFFF;
		box-shadow: 0 3px 14px rgba(30, 58, 42, 0.13);
	}

	.menu-fixed-content.fixed-header { display: none !important; }
}

@media (max-width: 1200px) {
	#header .alyabar-barra-menu { display: none !important; }
}
@media (max-width: 767px) {
	.alyabar-col-buscador { display: none !important; }
}


@media (max-width: 767px) {
	.wrap { overflow: clip !important; }
	#header .top-header-aleta { display: none !important; }
	#header { position: sticky; top: 0; z-index: 9990; background: #fff; }
	#header .main-header-aleta {
		flex-wrap: nowrap !important;
		--flex-wrap-mobile: nowrap;
		--padding-top: 8px;
		--padding-bottom: 8px;
		--padding-left: 14px;
		--padding-right: 10px;
		box-shadow: 0 2px 8px rgba(30, 58, 42, 0.08);
	}
	html body .elementor-1834 .elementor-element.elementor-element-192ab3b {
		--width: auto;
		--margin-top: 0px;
		--margin-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
		flex: 0 0 auto;
	}
	html body .elementor-1834 .elementor-element.elementor-element-f311cf9 { display: none !important; }
	html body .elementor-1834 .elementor-element.elementor-element-1d8c578 {
		--width: auto;
		--padding-right: 0px;
		flex: 1 1 auto;
	}
	html body .elementor-1834 .elementor-element.elementor-element-81099ba img { width: 120px; }
	body { padding-bottom: 72px; }
}
@media (max-width: 1200px) {
	.menu-fixed-content.fixed-header { position: static !important; box-shadow: none !important; }
	.menu-global-style-icon .bzotech-navbar-nav li > a {
		height: auto !important;
		min-height: 55px;
		line-height: 1.3 !important;
		display: flex !important;
		align-items: center;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}
	.menu-global-style-icon .bzotech-navbar-nav > li > a { font-size: 16px !important; }
}


/* ---------- La tabla deja de comportarse como tabla ---------- */
.wishlist_table,
.wishlist_table tbody,
.wishlist_table tr,
.wishlist_table td { display: block; }
.wishlist_table thead { display: none; }

.wishlist_table {
	width: 100% !important;
	border: 0 !important;
	border-collapse: separate;
	margin: 0 0 8px;
}
.wishlist_table tbody.wishlist-items-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}

/* ---------- Cada producto, una tarjeta ---------- */
.wishlist_table tbody tr[id^="yith-wcwl-row-"] {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #EEF4EF;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(30, 58, 42, 0.04);
	transition: box-shadow 0.25s ease-out, transform 0.25s ease-out, border-color 0.25s ease-out;
}
.wishlist_table tbody tr[id^="yith-wcwl-row-"]:hover {
	border-color: #DCE6DE;
	box-shadow: 0 14px 26px -14px rgba(30, 58, 42, 0.28);
	transform: translateY(-2px);
}
.wishlist_table tbody tr[id^="yith-wcwl-row-"] td { border: 0 !important; padding: 0; }

/* Foto: cuadrada y a todo el ancho, sobre el mismo gris que las tarjetas de la tienda.
   OJO: la tabla de YITH lleva las clases 'shop_table cart', asi que en movil heredaba
   woocommerce-smallscreen.css -> .woocommerce table.cart .product-thumbnail { display: none }
   y la foto desaparecia (medida: 0x0). Por eso se fuerza el display. */
.wishlist_table td.product-thumbnail,
.woocommerce table.cart.wishlist_table td.product-thumbnail,
.woocommerce-page table.cart.wishlist_table td.product-thumbnail {
	display: block !important;
	width: auto !important;
	background: #F5F5F5;
	line-height: 0;
}
/* El tope real lo pone el <a>, no la imagen: style.css de YITH trae
   .wishlist_table tr td.product-thumbnail a { max-width: 80px }, asi que la foto se quedaba
   en 80x80 por mucho width:100% que llevara el img. Hay que anular ese max-width. */
.wishlist_table td.product-thumbnail a,
.wishlist_table tr td.product-thumbnail a {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}
/* El tema/WooCommerce fijan la miniatura de la tabla a 80px de ancho; con la foto ya visible
   salia a 80x80 dentro de una tarjeta de 345. Se fuerza a ocupar la tarjeta, cuadrada. */
.wishlist_table td.product-thumbnail img,
.woocommerce table.cart.wishlist_table td.product-thumbnail img,
.woocommerce-page table.cart.wishlist_table td.product-thumbnail img {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block !important;
	margin: 0 !important;
}

/*
 * Nombre.
 *
 * ESPECIFICIDAD (24-09-2026): YITH declara `.wishlist_table tr td.product-name { text-align: left }`
 * en assets/css/style.css, que es (0,2,2). Un selector nuestro sin el `tr` es (0,2,1) y PIERDE por
 * un tipo, asi que el nombre se quedaba a la izquierda mientras precio, stock y boton si se
 * centraban (YITH no los declara). Se copia su mismo selector para empatar y ganar por orden: el
 * CSS combinado de los sandbox se imprime despues que el del plugin. Nada de !important.
 */
.wishlist_table tr td.product-name {
	padding: 16px 16px 6px !important;
	text-align: center;
}
.wishlist_table tr td.product-name a {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #1E3A2A;
}
.wishlist_table tr td.product-name a:hover { color: #2F6B48; }

/* Precio: el vigente grande en verde profundo, el anterior tachado en gris. */
.wishlist_table td.product-price {
	padding: 0 16px 10px !important;
	text-align: center;
}
.wishlist_table td.product-price .amount,
.wishlist_table td.product-price ins .amount {
	font-size: 19px;
	font-weight: 800;
	color: #1E3A2A;
}
.wishlist_table td.product-price ins { text-decoration: none; }
.wishlist_table td.product-price del,
.wishlist_table td.product-price del .amount {
	font-size: 14px;
	font-weight: 500;
	color: #9AA19C;
}

/* Estado del stock, como pastilla. */
.wishlist_table td.product-stock-status {
	padding: 0 16px 14px !important;
	text-align: center;
}
.wishlist_table td.product-stock-status span {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 55px;
	font-size: 12px;
	font-weight: 600;
}
.wishlist_table td.product-stock-status .wishlist-in-stock { background: #EEF4EF; color: #2F6B48; }
.wishlist_table td.product-stock-status .wishlist-out-of-stock { background: #FBEDEB; color: #A93226; }

/* Boton: ancho completo y centrado, igual que el de las tarjetas de la tienda. */
.wishlist_table td.product-add-to-cart {
	margin-top: auto;
	padding: 0 16px 18px !important;
	text-align: center;
}
/* El enlace de un producto variable en la lista NO lleva la clase .button (solo
   add_to_cart_button y sus variantes), asi que se apunta a cualquier <a> de la celda. */
.wishlist_table td.product-add-to-cart > a,
.wishlist_table td.product-add-to-cart .button,
.wishlist_table td.product-add-to-cart a.add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 18px !important;
	border-radius: 55px !important;
	background: #2F6B48 !important;
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none !important;
	transition: background 0.25s ease-out;
}
.wishlist_table td.product-add-to-cart > a:hover,
.wishlist_table td.product-add-to-cart .button:hover,
.wishlist_table td.product-add-to-cart a.add_to_cart_button:hover { background: #1E3A2A !important; }
/* El aviso "Este producto tiene multiples variantes..." es texto para lectores de pantalla. */
.wishlist_table td.product-add-to-cart .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Quitar: circulo blanco arriba a la derecha de la foto, no una equis suelta en su columna. */
.wishlist_table td.product-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: auto !important;
	padding: 0 !important;
}
.wishlist_table td.product-remove > div { display: block; }
.wishlist_table td.product-remove a.remove_from_wishlist {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid #EEF4EF;
	color: #A93226 !important;
	font-size: 17px;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(30, 58, 42, 0.12);
	transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}
.wishlist_table td.product-remove a.remove_from_wishlist:hover {
	background: #A93226;
	border-color: #A93226;
	color: #FFFFFF !important;
	transform: scale(1.06);
}

/* Lista vacia: ocupa toda la rejilla y no parece una tarjeta rota. */
.wishlist_table tbody tr:has(td.wishlist-empty) {
	grid-column: 1 / -1;
	border: 1px dashed #DCE6DE;
	border-radius: 18px;
	background: #FBFCFB;
}
.wishlist_table td.wishlist-empty {
	padding: 42px 20px !important;
	text-align: center;
	color: #6C736E;
	font-size: 15px;
}

/* ---------- Compartir: los mismos tres iconos de marca que en la ficha ---------- */
/* Twitter y Pinterest se ocultan aqui (no se apagan las opciones) para revertir borrando el archivo. */
.yith-wcwl-share li.share-button:has(a.twitter),
.yith-wcwl-share li.share-button:has(a.pinterest) { display: none !important; }

.yith-wcwl-share {
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid #F1F1ED;
	text-align: center;
}
.yith-wcwl-share .yith-wcwl-share-title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8A8F8B;
}
.yith-wcwl-share ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yith-wcwl-share li.share-button { margin: 0; }
.yith-wcwl-share li.share-button a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #DfE5E0 !important;
	background: #F5F8F5 !important;
	color: #2F6B48 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;
}
.yith-wcwl-share li.share-button a:hover {
	background: #2F6B48 !important;
	border-color: #2F6B48 !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
}
/* Los iconos de YITH pueden venir como SVG o como fuente de iconos. */
.yith-wcwl-share li.share-button a svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}
.yith-wcwl-share li.share-button a svg path { fill: currentColor; }
.yith-wcwl-share li.share-button a i { font-size: 16px; line-height: 1; color: currentColor; }

/* Titulo de la lista. */
.wishlist-title h2,
.wishlist-title-with-form h2 {
	font-size: 22px;
	color: #1E3A2A;
}

/* ---------- Movil ---------- */
@media (max-width: 767px) {
	.wishlist_table tbody.wishlist-items-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
	.wishlist_table tr td.product-name { padding: 12px 12px 4px !important; }
	.wishlist_table tr td.product-name a { font-size: 14px; }
	.wishlist_table td.product-price { padding: 0 12px 8px !important; }
	.wishlist_table td.product-price .amount,
	.wishlist_table td.product-price ins .amount { font-size: 17px; }
	.wishlist_table td.product-stock-status { padding: 0 12px 12px !important; }
	.wishlist_table td.product-add-to-cart { padding: 0 12px 14px !important; }
	.wishlist_table td.product-add-to-cart > a,
	.wishlist_table td.product-add-to-cart .button,
	.wishlist_table td.product-add-to-cart a.add_to_cart_button { min-height: 44px; font-size: 13px; }
}
@media (max-width: 400px) {
	.wishlist_table tbody.wishlist-items-wrapper { grid-template-columns: 1fr; }
}


/* El titulo de YITH se repite con el <h1> del banner. */
.wishlist-title, .wishlist-title-container, .wishlist-title-with-form { display: none !important; }
#yith-wcwl-form { margin-top: 26px; }


svg [stroke="#FFAD9B" i] { stroke: #C9A445; }
svg [fill="#FFAD9B" i] { fill: #C9A445; }
.icon-bzo-quote:before { color: #C9A445; }
/*
 * Pie 1964 / 2737: fondo verde profundo fijado aqui ademas de en Elementor, porque la CDN de
 * Hostinger servia una copia antigua de post-2737.css (sin version en la URL) con el azul marino
 * de la demo. El borde rasgado del copyright (c39c1fb) usaba Vector-18.png en salmon #FFAD9B:
 * se sustituye por alyabar-pie-borde.png (misma forma, verde #16301F, adjunto 9599).
 */
html body .elementor-2737 .elementor-element.elementor-element-8be7133,
html body .elementor-1964 .elementor-element.elementor-element-8be7133 {
	background-color: #1E3A2A !important;
	/* Sin imagen de fondo en el propio contenedor: la caligrafia va en su ::after (ver abajo). */
	background-image: none !important;
	position: relative;
}
/*
 * CALIGRAFIA ARABE EN LA MITAD DE ABAJO DEL PIE (27-09-2026), como estaban las hojas de la demo.
 * VECTOR (27-09-2026): alyabar-pie-caligrafia.svg, trazado con potrace desde la imagen del disenador
 * (725x185) ampliada 4x, un solo path dorado #C9A445 al 22 %. Sustituye al WebP 9665 (se veia
 * borroso porque la fuente era pequena). Antes: generado con GD desde la imagen del disenador
 * (725x185, dorado sobre verde petroleo), fondo a transparente y dorado #C9A445 al 22 %.
 * Capa ::after (Elementor no la usa en este contenedor) de 100 % de ancho y 50 % de alto, con `cover`:
 * llena la franja sin deformar el trazo (recorta un poco arriba y abajo). El contenido va por encima.
 */
html body .elementor-2737 .elementor-element.elementor-element-8be7133::after,
html body .elementor-1964 .elementor-element.elementor-element-8be7133::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: url("https://alyabarperfumes.cl/wp-content/uploads/2026/09/alyabar-pie-caligrafia.svg") center center / cover no-repeat;
	pointer-events: none;
	z-index: 0;
	/* Difumina el borde de arriba: con `cover` el trazo queda recortado y se veia un corte recto. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}
html body .elementor-2737 .elementor-element.elementor-element-8be7133 > .e-con-inner,
html body .elementor-1964 .elementor-element.elementor-element-8be7133 > .e-con-inner {
	position: relative;
	z-index: 1;
}
/* Movil: el pie mide ~1.400 px de alto y 390 de ancho; llenar el 50 % obligaria a ampliar el trazo
   unas 7 veces. Ahi va a todo el ancho y completo, apoyado abajo. */
@media (max-width: 767px) {
	html body .elementor-2737 .elementor-element.elementor-element-8be7133::after,
	html body .elementor-1964 .elementor-element.elementor-element-8be7133::after {
		height: auto;
		aspect-ratio: 725 / 185;
		background-size: 100% auto;
		background-position: center bottom;
	}
}
/*
 * Cinta superior de la cabecera 1834 (contenedor 37bb454, carrusel marquee 0d02ab3): fondo verde de
 * marca, texto e iconos blancos. El tema (assets/demo3/css/custom-style.css) pintaba los enlaces en
 * marron rgb(128,87,77) y un punto #80574D antes de cada texto: el punto pasa a dorado.
 */
html body .elementor-1834 .elementor-element.elementor-element-37bb454 { background-color: #A93226 !important; }
.top-header-aleta .content-slider-custom,
.top-header-aleta .content-slider-custom p,
.top-header-aleta .content-slider-custom a { color: #FFFFFF; font-weight: 600; letter-spacing: 0.06em; }
.top-header-aleta .item-slider- p { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; }
.top-header-aleta .item-slider- p:before { background: #C9A445; margin-right: 22px; }
.top-header-aleta .alyabar-cinta__icono { font-size: 20px; line-height: 1; margin-right: 8px; color: #FFFFFF; }
/* Rayita de los titulos del pie (elbzotech-heading-style3::after usa --bzo-main-color, verde sobre verde). */
#footer .elbzotech-heading-style3::after { background: #C9A445; }
html body .elementor-2737 .elementor-element.elementor-element-c39c1fb,
html body .elementor-1964 .elementor-element.elementor-element-c39c1fb {
	background-image: url("https://alyabarperfumes.cl/wp-content/uploads/2026/09/alyabar-pie-borde.png") !important;
}

/*
 * CONTACTO (958), bloques de datos (fila .list-info-contact, 27-09-2026): el circulo del icono era el
 * salmon de la demo #FFE2DC. Reposo: verde muy claro con icono verde; al pasar el raton, verde lleno
 * con icono blanco (lo que ya hacia el tema, declarado aqui para que el reposo no lo pise).
 */
.elementor-958 .list-info-contact .bzoteche-info-box-style6 .info-box-icon {
	background-color: #EEF4EF !important;
}
.elementor-958 .list-info-contact .bzoteche-info-box-style6 .info-box-icon i {
	color: #2F6B48 !important;
}
.elementor-958 .list-info-contact .bzoteche-info-box-style6:hover .info-box-icon {
	background-color: #2F6B48 !important;
}
.elementor-958 .list-info-contact .bzoteche-info-box-style6:hover .info-box-icon i {
	color: #FFFFFF !important;
}
.elementor-958 .list-info-contact .item-content-e a {
	color: #2F6B48;
	font-weight: 700;
	text-decoration: none;
}
.elementor-958 .list-info-contact .item-content-e a:hover {
	text-decoration: underline;
}


@media (min-width: 1201px) {
	#header .alyabar-barra-menu .bzotech-navbar-nav { display: flex !important; flex-wrap: nowrap; justify-content: center; }
	#header .alyabar-barra-menu .bzotech-navbar-nav > li { flex: 0 0 auto; }
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a { font-size: 15px; padding-left: 16px; padding-right: 16px; white-space: nowrap; }

	html body .elementor-1834 .elementor-element.elementor-element-f311cf9,
	html body .elementor-1834 .elementor-element.elementor-element-d5905ad,
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.alyabar-menu-marcas { position: static !important; }
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.alyabar-menu-marcas > .sub-menu {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 2px;
		left: 0 !important;
		right: 0 !important;
		top: 100% !important;
		width: auto !important;
		transform: none !important;
		padding: 32px max(40px, calc((100% - 1560px) / 2)) 36px !important;
		border-radius: 0 !important;
		border-top: 1px solid #EEF4EF;
		box-shadow: 0 18px 30px -12px rgba(30, 58, 42, 0.18);
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.alyabar-menu-marcas > .sub-menu > li > a {
		font-size: 15px;
		padding: 8px 0 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid #F1EEE6;
	}
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.alyabar-menu-marcas > .sub-menu > li > a:hover { color: #2F6B48; }
}
@media (min-width: 1201px) and (max-width: 1366px) {
	#header .alyabar-barra-menu .bzotech-navbar-nav > li > a { font-size: 14px; padding-left: 11px; padding-right: 11px; }
	#header .alyabar-barra-menu .bzotech-navbar-nav > li.alyabar-menu-marcas > .sub-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


.wrap-bread-crumb {
	background: #FAF7F0;
	border-bottom: 1px solid #EFE9DC;
	margin: 0 0 28px;
	padding: 14px 0;
}
.wrap-bread-crumb .bread-crumb-row { display: block; margin: 0; }
.wrap-bread-crumb .woo-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 4px;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.wrap-bread-crumb .woo-breadcrumb span,
.wrap-bread-crumb-element .bread-crumb span.bread-crumb-e {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: #1E3A2A;
	font-weight: 600;
	font-size: 13px;
}
.wrap-bread-crumb .woo-breadcrumb a,
.wrap-bread-crumb-element .bread-crumb a.bread-crumb-e {
	color: #5E655F;
	font-weight: 400;
	font-size: 13px;
	margin: 0;
	transition: color 0.2s;
}
.wrap-bread-crumb .woo-breadcrumb a:hover,
.wrap-bread-crumb-element .bread-crumb a.bread-crumb-e:hover { color: #2F6B48; }
/* Una sola casita (30-09-2026): demo3/css/elementor/breadcrumb.css del tema dibuja otra en el
 * <span> (`.woo-breadcrumb span:first-child:before`, 0,2,2) y salian dos. Se deja solo la nuestra. */
.wrap-bread-crumb .woo-breadcrumb span:first-child::before { content: none; display: none; }
.wrap-bread-crumb .woo-breadcrumb span:first-child a::before,
.wrap-bread-crumb-element .bread-crumb a.bread-crumb-e:first-child::before {
	content: "\f015";
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 15px;
	color: #C9A445;
	margin-right: 6px;
	vertical-align: -1px;
}
.wrap-bread-crumb .step-bread-crumb,
.wrap-bread-crumb-element .step-bread-crumb {
	font-size: 8px;
	color: #C9A445;
	margin: 0 10px;
	line-height: 1;
}
.wrap-bread-crumb-element .bread-crumb { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; letter-spacing: 0.02em; }
@media (max-width: 767px) {
	.wrap-bread-crumb { padding: 10px 0; margin-bottom: 20px; }
	.wrap-bread-crumb .bread-crumb { padding-left: 16px !important; padding-right: 16px !important; }
	.wrap-bread-crumb .woo-breadcrumb,
	.wrap-bread-crumb .woo-breadcrumb a,
	.wrap-bread-crumb .woo-breadcrumb span,
	.wrap-bread-crumb-element .bread-crumb .bread-crumb-e { font-size: 12px; }
	.wrap-bread-crumb .step-bread-crumb,
	.wrap-bread-crumb-element .step-bread-crumb { margin: 0 7px; }
}


#footer .alyabar-pie__columna { display: flex; flex-direction: column; gap: 34px; }
#footer .alyabar-pie__titulo {
	margin: 0 0 18px;
	font-family: var(--bzo-body_typo-font-family), 'Nunito Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
}
#footer .alyabar-pie__titulo::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 4px;
	margin-left: 6px;
	vertical-align: middle;
	border-radius: 4px;
	background: #C9A445;
}
#footer .alyabar-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#footer .alyabar-pie__lista a {
	color: #FFFFFF;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s, padding-left 0.2s;
}
#footer .alyabar-pie__lista a:hover { color: #C9A445; padding-left: 4px; }

#footer .alyabar-pie__instagram {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 11px 22px 11px 18px;
	border: 1px solid #C9A445;
	border-radius: 999px;
	color: #FAF7F0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	background: transparent;
	transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
#footer .alyabar-pie__instagram svg { color: #C9A445; transition: color 0.25s; }
#footer .alyabar-pie__instagram:hover,
#footer .alyabar-pie__instagram:focus-visible {
	background: #C9A445;
	color: #1E3A2A;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}
#footer .alyabar-pie__instagram:hover svg,
#footer .alyabar-pie__instagram:focus-visible svg { color: #1E3A2A; }
#footer .alyabar-pie__instagram:focus-visible { outline: 2px solid #FAF7F0; outline-offset: 3px; }

/*
 * Los dos sellos van EN FILA, uno al lado del otro (peticion del disenador, 23-09-2026):
 * Webpay con "Pagos seguros" y Starken con "Envios a todo Chile". En movil envuelven solos.
 */
#footer .alyabar-pie__confianza {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 18px 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(201, 164, 69, 0.28);
}
#footer .alyabar-pie__sello { display: grid; gap: 10px; }
#footer .alyabar-pie__sello-texto {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #C9A445;
}
#footer .alyabar-pie__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
#footer .alyabar-pie__logo {
	display: block;
	width: auto;
	opacity: 0.82;
	transition: opacity 0.2s;
}
#footer .alyabar-pie__logo:hover { opacity: 1; }
/*
 * LA PASTILLA BLANCA SE RETIRO EL 23-09-2026. Hacia falta mientras el logo era la imagen a
 * color (negro y naranja), ilegible sobre el verde del pie. Ahora se usa una version
 * BLANCA SOBRE TRANSPARENTE generada con GD, igual que la de Starken, asi que va directa
 * sobre el fondo y los dos logos casan entre si.
 */
#footer .alyabar-pie__logo.is-pagos { height: 26px; width: auto; }

/* La nota, bien pequena: informa de quien procesa sin competir con los logos. */
#footer .alyabar-pie__nota {
	display: block;
	margin-top: 6px;
	font-size: 9px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .55);
	letter-spacing: .03em;
}
#footer .alyabar-pie__logo.is-starken { height: 26px; }
/* Copyright (widget 6a71efe): enlace a Los Pintamonos SpA. */
#footer .elementor-element-6a71efe a { color: #C9A445; text-decoration: none; transition: color 0.2s; }
#footer .elementor-element-6a71efe a:hover,
#footer .elementor-element-6a71efe a:focus-visible { color: #FAF7F0; text-decoration: underline; }
@media (max-width: 767px) {
	#footer .alyabar-pie__columna { gap: 26px; }
	#footer .alyabar-pie__titulo { font-size: 18px; margin-bottom: 14px; }
}

/* --- Franja dorada de confianza, arriba del pie (26-09-2026) --- */
#footer .alyabar-confianza-pie {
	width: 100%;
	background: #C9A445;
	/* 27-09-2026: solo icono y titulo (el texto de cada bloque se quito); franja mas baja. */
	padding: 18px 20px;
}
#footer .alyabar-confianza-pie__fila {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}
#footer .alyabar-confianza-pie__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#footer .alyabar-confianza-pie__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #2F6B48;
	color: #FFFFFF;
	transition: background-color .25s ease;
}
#footer .alyabar-confianza-pie__icono svg { display: block; }
#footer .alyabar-confianza-pie__item:hover .alyabar-confianza-pie__icono {
	background: #A93226;
	animation: alyabar-confianza-pop .3s linear 1;
}
@keyframes alyabar-confianza-pop {
	50% { transform: scale(1.2); }
}
#footer .alyabar-confianza-pie__titulo {
	margin: 0;
	font-family: var(--bzo-title_typo-font-family, inherit);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #1E3A2A;
}
#footer p.alyabar-confianza-pie__texto {
	max-width: 300px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #1E3A2A;
}
@media (prefers-reduced-motion: reduce) {
	#footer .alyabar-confianza-pie__item:hover .alyabar-confianza-pie__icono { animation: none; }
}
@media (max-width: 767px) {
	/* Movil: sin textos, los tres caben en una fila y la franja queda baja. */
	#footer .alyabar-confianza-pie { padding: 16px 10px; }
	#footer .alyabar-confianza-pie__fila { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	#footer .alyabar-confianza-pie__icono { width: 42px; height: 42px; margin-bottom: 6px; }
	#footer .alyabar-confianza-pie__icono svg { width: 20px; height: 20px; }
	#footer .alyabar-confianza-pie__titulo { font-size: 14px; line-height: 1.2; }
	#footer p.alyabar-confianza-pie__texto { font-size: 14px; }
}

/*
 * COPYRIGHT (27-09-2026): al pasar el raton una regla del tema pintaba el enlace en #1E3A2A, el mismo
 * verde del fondo, y el texto desaparecia. Se fuerza el color claro con !important. Texto mas pequeno
 * (la regla general .wrap p lo dejaba en 18 px).
 */
#footer .elementor-element-6a71efe p,
#footer .elementor-element-6a71efe a {
	font-size: 14px;
	line-height: 1.5;
}
#footer .elementor-element-6a71efe a:hover,
#footer .elementor-element-6a71efe a:focus-visible {
	color: #FAF7F0 !important;
}

/*
 * MOVIL: el hueco de la barra inferior fija (73 px) se reservaba DOS veces, con el `margin-bottom`
 * del pie y con el `padding-bottom` del body (alyabar-cabecera-movil.php), y al llegar al final
 * quedaban 73 px en blanco. Se queda solo el del body.
 */
@media (max-width: 767px) {
	#footer {
		margin-bottom: 0 !important;
	}
	#footer .elementor-element-6a71efe p,
	#footer .elementor-element-6a71efe a {
		font-size: 13px;
	}
}


.elbzotech-popup-overlay:not(.elbzotech-popup-open) .elbzotech-close-popup,
.elbzotech-popup-overlay:not(.elbzotech-popup-open) .elbzotech-login-popup-content {
	visibility: hidden !important;
	pointer-events: none !important;
}
.elbzotech-popup-overlay.elbzotech-popup-open .elbzotech-close-popup,
.elbzotech-popup-overlay.elbzotech-popup-open .elbzotech-login-popup-content {
	visibility: visible !important;
	pointer-events: auto !important;
}


/*
 * CASILLA DE FILTRO: circulo en vez de cuadrado (17-09-2026, decision del disenador).
 *
 * El tema pinta un <span> vacio de 18x18 px con esquinas rectas delante de cada opcion, y le da
 * color de relleno por termino (clases bgcolor-*). Aqui pasa a ser un circulo neutro que, al
 * seleccionarlo, se rellena de verde de marca con un tic blanco dibujado en ::after.
 *
 * Se quito la x que se anadia detras del nombre: la seleccion ya se entiende por el circulo, y para
 * quitar todos los filtros esta el boton "Quitar filtros" de arriba.
 */
.sidebar-widget a[data-attribute][data-term] {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sidebar-widget a[data-attribute][data-term] > span:not(.count) {
	position: relative;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border: 1.5px solid #C8D2CB;
	border-radius: 50%;
	background: #fff !important;
	transition: background .18s ease, border-color .18s ease;
}
.sidebar-widget a[data-attribute][data-term]:hover > span:not(.count) {
	border-color: #2F6B48;
}

/*
 * Seleccionado: circulo verde con tic blanco.
 * OJO CON LA ESPECIFICIDAD: la regla general de arriba lleva [data-attribute][data-term], que suman
 * dos atributos; una regla con solo la clase .alyabar-filtro-activo PIERDE aunque use !important
 * (los dos lo llevan, asi que decide la especificidad) y el circulo se quedaba blanco. Por eso aqui
 * se repiten los dos atributos.
 */
.sidebar-widget a.alyabar-filtro-activo {
	color: #2F6B48;
	font-weight: 700;
}
.sidebar-widget a.alyabar-filtro-activo[data-attribute][data-term] > span:not(.count) {
	border-color: #2F6B48;
	background: #2F6B48 !important;
}
.sidebar-widget a.alyabar-filtro-activo[data-attribute][data-term] > span:not(.count)::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 6px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* El "Quitar filtros" del tema vive fuera del recuadro y en gris: se oculta y se clona dentro. */
.js-filter-hitory .clear-filter { display: none !important; }

.alyabar-limpiar {
	display: block;
	margin: 0 0 22px;
}
.alyabar-limpiar a {
	display: block;
	padding: 11px 18px;
	border-radius: 55px;
	background: #2F6B48;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	transition: background .2s ease;
}
.alyabar-limpiar a:hover,
.alyabar-limpiar a:focus {
	background: #1E3A2A;
	color: #fff;
}

/*
 * CONTADOR DE MARCAS AL LADO DEL NOMBRE, NO DEBAJO (21-09-2026, peticion del disenador).
 *
 * El <li> del widget de marcas trae <a>Afnan</a> <span class="count">(9)</span>. El enlace es
 * display:flex y ocupaba los 232 px del ancho completo, asi que empujaba el contador a la linea
 * siguiente: medido, el enlace en top 1858 y el numero en 1882.
 *
 * Se arregla poniendo en flex el <li> (no el <a>) y dejando que el enlace ocupe el hueco sobrante
 * con flex:1. El contador va con flex:0 0 auto para que nunca se parta ni se encoja.
 *
 * OJO: estos contadores SI estan cruzados con los filtros activos y SI se ven (a diferencia de
 * los de Genero/Familia/Tipo, que el tema oculta). Por eso se cuidan en vez de esconderlos.
 */
.widget_brand_nav li,
.widget_brand_nav li.wc-layered-nav-term {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: nowrap;
}
.widget_brand_nav li > a {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
.widget_brand_nav li > .count {
	flex: 0 0 auto;
	white-space: nowrap;
	color: #6B726E;
	font-size: 13px;
}

/*
 * FUERA EL RECUADRO OSCURO MIENTRAS CARGA (25-09-2026).
 *
 * Al filtrar, ordenar, cambiar de vista o paginar, ajax.js del tema (linea 665) inyecta
 * `<div class="shop-loading"><i class="fa fa-spinner fa-spin"></i></div>` dentro del listado, y
 * product-items.css le pone `background-color: rgba(0,0,0,0.2)` sobre el 100% del contenedor.
 * Medido en la tienda a 390 px: un velo de 345 x 14.173 px, o sea TODO el listado en gris oscuro
 * hasta que llega la respuesta.
 *
 * NO SE TOCA EL MECANISMO: el div se sigue inyectando y el tema lo sigue quitando al terminar
 * (`content.find(".shop-loading").remove()`, linea 681), y conserva su z-index, que de paso evita
 * pulsar dos veces mientras carga. Lo unico que cambia es que deja de pintarse el fondo.
 *
 * EL SPINNER SE QUEDA, PERO EN VERDE: el tema lo pinta BLANCO porque contaba con el velo oscuro
 * detras; sobre el fondo claro de la tienda seria invisible y el cliente no tendria ninguna senal
 * de que su clic hizo algo. Se centra de verdad con translateX, porque el tema solo le da
 * `left: 50%` y quedaba desplazado media anchura del icono.
 *
 * La clase `loadding` que el tema anade al contenedor no pinta nada (es solo position: relative),
 * asi que no hay que tocarla.
 *
 * NADA DE `transform: translateX(-50%)` PARA CENTRARLO: el icono lleva la animacion `fa-spin`,
 * que escribe `transform: rotate(...)` en sus keyframes, y **una animacion pisa las declaraciones
 * normales**, asi que el centrado se perdia (medido: matrix identidad). Se centra con left/right a 0
 * mas `margin: 0 auto`, que es el mismo patron que el tema usa en su otro spinner, `.ajax-loading i`.
 */
.shop-loading {
	background-color: transparent;
}

.shop-loading i {
	top: 90px;
	left: 0;
	right: 0;
	width: 34px;
	margin: 0 auto;
	font-size: 34px;
	line-height: 1;
	text-align: center;
	color: #2F6B48;
}



/* El tema fija 420px en .elbzotech-mini-cart-dropdown .mini-cart-content (demo3/mini-cart.css,
   linea 163). Se amplia para que quepa la sugerencia sin apretar el resto. */
.elbzotech-mini-cart-dropdown .mini-cart-content,
.elbzotech-mini-cart-dropdown-global .mini-cart-content { width: 468px; }

.mini-cart-content .mini-cart-button { display: flex; }
.mini-cart-content .mini-cart-button .button.checkout.alyabar-finalizar {
	flex: 1;
	text-align: center;
	background: #2F6B48;
	color: #fff;
	border-radius: 55px;
	font-weight: 700;
	letter-spacing: .02em;
}
.mini-cart-content .mini-cart-button .button.checkout.alyabar-finalizar:hover {
	background: #1E3A2A;
	color: #fff;
}

.alyabar-sugerencia {
	margin: 14px 0 4px;
	padding-top: 14px;
	border-top: 1px solid #EEF1EE;
}
.alyabar-sugerencia__titulo {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6B7A70;
}
.alyabar-sugerencia__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 12px;
	transition: background .2s ease;
}
.alyabar-sugerencia__item:hover { background: #F5F8F5; }
.alyabar-sugerencia__foto {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: #f5f5f5;
}
.alyabar-sugerencia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alyabar-sugerencia__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alyabar-sugerencia__marca {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A9690;
}
.alyabar-sugerencia__nombre {
	font-size: 14px;
	line-height: 1.3;
	color: #1C1F1D;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.alyabar-sugerencia__precio { font-size: 15px; font-weight: 800; color: #1E3A2A; }
.alyabar-sugerencia__precio del { display: none; }

@media (max-width: 767px) {
	.elbzotech-mini-cart-dropdown .mini-cart-content,
	.elbzotech-mini-cart-dropdown-global .mini-cart-content { width: 300px; }
	.alyabar-sugerencia__foto { flex-basis: 52px; width: 52px; height: 52px; }
}

/*
 * QUE LOS PRODUCTOS DESTAQUEN Y EL TOTAL SE LEA (22-09-2026).
 *
 * La plantilla del tema (bzotech-templates/woocommerce/cart/mini-cart.php) pinta cada linea con
 * .item-info-cart > .product-thumb + .product-info + .product-delete, y el total con
 * .mini-cart-total (rotulo a la izquierda, importe en .mini-cart-total-price a la derecha).
 *
 * Todo iba al mismo tamano y en el mismo gris, asi que la vista era plana: el total -que es el
 * dato que el cliente busca- pesaba lo mismo que el nombre de un perfume, y el boton de quitar
 * pasaba desapercibido.
 */
/* alyabar-minicarrito-destacado */
.mini-cart-content .item-info-cart {
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #EEF1EE;
}
.mini-cart-content .item-info-cart:first-of-type { padding-top: 4px; }
.mini-cart-content .item-info-cart:last-of-type { border-bottom: 0; }

.mini-cart-content .item-info-cart .product-thumb {
	width: 78px;
	min-width: 78px;
	border-radius: 12px;
	overflow: hidden;
	background: #F5F5F5;
}
.mini-cart-content .item-info-cart .product-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* El nombre, con cuerpo suficiente para leerse de un vistazo; dos lineas como maximo. */
.mini-cart-content .item-info-cart .product-title,
.mini-cart-content .item-info-cart .product-title a {
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: #1C1F1D;
}
.mini-cart-content .item-info-cart .product-title {
	margin: 0 0 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mini-cart-content .item-info-cart .product-title a:hover { color: #2F6B48; }

/* "1 x $35.000": la cantidad discreta y el precio en el verde de la marca. */
.mini-cart-content .mini-cart-qty {
	font-size: 14px;
	color: #6B726E;
}
.mini-cart-content .mini-cart-qty .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 800;
	color: #1E3A2A;
}
.mini-cart-content .mini-cart-qty del { color: #A0A8A3; font-weight: 400; }
.mini-cart-content .mini-cart-qty ins { text-decoration: none; }

/*
 * EL BOTON DE QUITAR, EN ROJO. Es el rojo que la paleta reserva para "Agotado" (#A93226): se
 * reutiliza a proposito porque aqui cumple el mismo papel, avisar de una accion destructiva.
 */
.mini-cart-content .item-info-cart .product-delete .remove-product {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	color: #A93226;
	font-size: 21px;
	line-height: 1;
	transition: color .2s ease, transform .15s ease;
}
/*
 * Al pasar el raton NO se rellena de rojo: un circulo rojo con el icono en blanco encima queda
 * empastado y se pierde la forma de la papelera. Se oscurece el rojo y crece un pelo, que se nota
 * igual y conserva el contraste contra el fondo blanco del panel.
 */
.mini-cart-content .item-info-cart .product-delete .remove-product:hover {
	background: none;
	color: #7E2419;
	transform: scale(1.12);
}
/*
 * EL ICONO NO HEREDA EL COLOR. El <i> es .icon-bzo.icon-bzo-remove y el tema le declara su
 * propio color gris #898989, asi que pintar de rojo solo el enlace no servia de nada: se seguia
 * viendo gris. Hay que darselo al icono.
 */
.mini-cart-content .item-info-cart .product-delete .remove-product i {
	font-size: inherit;
	color: inherit;
}

/*
 * EL TOTAL, GRANDE Y EN NEGRITA. Es lo que se pidio destacar: el rotulo se queda pequeno y gris
 * para que todo el peso visual caiga en la cifra.
 */
.mini-cart-content .mini-cart-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	padding-top: 16px;
	border-top: 2px solid #C9A445;
}
.mini-cart-content .mini-cart-total .pull-left {
	float: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #6B726E;
}
.mini-cart-content .mini-cart-total .mini-cart-total-price {
	float: none;
	text-align: right;
}
.mini-cart-content .mini-cart-total .mini-cart-total-price,
.mini-cart-content .mini-cart-total .mini-cart-total-price .woocommerce-Price-amount,
.mini-cart-content .mini-cart-total .mini-cart-total-price bdi {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: #1E3A2A;
}

@media (max-width: 767px) {
	.mini-cart-content .item-info-cart .product-thumb { width: 62px; min-width: 62px; }
	.mini-cart-content .mini-cart-total .mini-cart-total-price,
	.mini-cart-content .mini-cart-total .mini-cart-total-price .woocommerce-Price-amount,
	.mini-cart-content .mini-cart-total .mini-cart-total-price bdi { font-size: 23px; }
}


#header .main-header-aleta .elbzotech-account-default .button-account-manager {
	min-width: 0;
	width: 42px;
	height: 42px !important;
	padding: 0 !important;
	line-height: 42px !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#header .main-header-aleta .elbzotech-account-default .button-account-manager span { font-size: 0; line-height: 1; }
#header .main-header-aleta .elbzotech-account-default .button-account-manager span:before {
	content: "\f007";
	font-family: 'Line Awesome Free';
	font-weight: 900;
	font-size: 22px;
}
/* Enlaces del popup de cuenta (Iniciar sesion, Crear cuenta, Olvidaste tu contraseña) en verde de marca. */
.login-popup-content-wrap .popup-redirect { color: #2F6B48; }
.login-popup-content-wrap .popup-redirect:hover { color: #1E3A2A; text-decoration: underline; }