/*
 * Aliances Experience - capa de marca sobre las plantillas de WooCommerce.
 *
 * Todo cuelga de las Global Variables de Elementor v4 (--ae-*), asi que
 * cambiar un token en Elementor arrastra la tienda entera. No hay ningun
 * color ni familia escrita a mano aqui.
 */

:root {
	--ae-shop-gap: 26px;
	--ae-rule: url("/wp-content/uploads/2026/08/ae-orn-divider.svg");
}

/* ---------- Cabecera de archivo ---------- */

.woocommerce-products-header {
	text-align: center;
	margin-block: clamp(40px, 5vw, 72px) 28px;
}

.woocommerce-products-header__title,
.woocommerce-page h1.page-title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title,
.woocommerce-products-header .page-title {
	font-family: var(--ae-font-heading), serif;
	font-weight: 500;
	font-size: clamp(28px, 2.9vw, 40px);
	line-height: 1.17;
	color: var(--ae-ink);
	margin: 0;
}

/* Las plantillas del tema sacan el H1 suelto, sin la cabecera de WooCommerce:
   se le da el mismo aire que a la cabecera de archivo. */
.woocommerce-page h1.page-title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title {
	text-align: center;
	margin-block: clamp(40px, 5vw, 72px) 28px;
}

/* El mismo filete ondulado que separa las secciones de la home */
.woocommerce-products-header__title::after,
.woocommerce-page h1.page-title::after,
.post-type-archive-product h1.page-title::after,
.tax-product_cat h1.page-title::after {
	content: "";
	display: block;
	width: 147px;
	height: 9px;
	margin: 14px auto 0;
	background: var(--ae-rule) center / contain no-repeat;
}

.woocommerce-products-header .term-description {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	line-height: 26px;
	color: var(--ae-body);
	max-width: var(--ae-measure, 740px);
	margin: 18px auto 0;
}

/* ---------- Barra de resultados y orden ---------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-body);
}

.woocommerce .woocommerce-ordering select {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--ae-line);
	border-radius: 0;
	padding: 10px 40px 10px 14px;
	background-image: linear-gradient(45deg, transparent 50%, var(--ae-accent) 50%),
		linear-gradient(135deg, var(--ae-accent) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.woocommerce .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--ae-accent);
	outline-offset: 1px;
}

/* ---------- Rejilla de producto ---------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px var(--ae-shop-gap);
	margin: 0 0 48px;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
}

/* La foto manda: sin marco, sin radio, sin sombra */
.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 4px;
	border-radius: 0;
	box-shadow: none;
	background-color: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ae-font-heading), serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ae-ink);
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	color: var(--ae-accent);
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	color: var(--ae-body);
	opacity: 0.7;
	margin-inline-end: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 500;
}

/* Piezas sin precio: se ven, no se venden. */
.ae-precio-consultar {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	font-style: italic;
	color: var(--ae-body);
}

.woocommerce div.product .ae-precio-consultar {
	font-size: 20px;
}

.ae-consulta-ficha {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 16px;
	line-height: 26px;
	color: var(--ae-body);
	max-width: 460px;
	margin-bottom: 16px;
}

.woocommerce span.onsale {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color: var(--ae-accent);
	color: #fff;
	border-radius: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	padding: 8px 12px;
	top: 0;
	left: 0;
	margin: 0;
}

/* ---------- Botones ---------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
	/* El texto en mayusculas no tiene descendentes, asi que con un line-height
	 * mayor que 1 la caja de linea reserva hueco abajo que no se usa y el boton
	 * se ve descentrado. Con inline-flex el texto se centra por caja, no por
	 * linea base, y el padding vuelve a leerse simetrico. */
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: var(--ae-accent-soft);
	border: 1px solid var(--ae-line);
	border-radius: 0;
	padding: 14px 22px;
	text-align: center;
	transition: background-color 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--ae-accent);
	border-color: var(--ae-accent);
	color: #fff;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid var(--ae-accent);
	outline-offset: 2px;
}

/* En la rejilla el boton se alinea abajo y no estira la tarjeta */
.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto;
}

/* ---------- Paginacion ---------- */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-body);
	padding: 10px 14px;
	border: 1px solid transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: transparent;
	color: var(--ae-accent);
	border-color: var(--ae-line);
}

/* ---------- Ficha de producto ---------- */

.woocommerce div.product .product_title {
	font-family: var(--ae-font-heading), serif;
	font-weight: 500;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.17;
	color: var(--ae-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 24px;
	color: var(--ae-accent);
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 17px;
	line-height: 26px;
	color: var(--ae-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--ae-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 24px 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ae-body);
	padding: 12px 0;
	display: block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ae-accent);
	box-shadow: inset 0 -2px 0 0 var(--ae-accent);
}

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty {
	font-family: var(--ae-font-body), sans-serif;
	border: 1px solid var(--ae-line);
	border-radius: 0;
	color: var(--ae-ink);
	padding: 12px 8px;
}

.woocommerce div.product .woocommerce-product-rating .star-rating span::before,
.woocommerce .star-rating span::before {
	color: var(--ae-gold);
}

/* WooCommerce saca SKU, categorias, etiquetas y marca en una sola linea
   corrida; una por linea se lee mucho mejor. */
.woocommerce div.product .product_meta {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	color: var(--ae-body);
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ae-line);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.woocommerce div.product .product_meta a {
	color: var(--ae-accent);
	text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
}

/* ---------- Migas ---------- */

.woocommerce .woocommerce-breadcrumb {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	color: var(--ae-body);
	margin-bottom: 24px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--ae-accent);
	text-decoration: none;
}

/* ---------- Avisos, carrito y checkout ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	border-top-color: var(--ae-accent);
	background-color: var(--ae-tint);
	color: var(--ae-ink);
	border-radius: 0;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ae-accent);
}

/*
 * Avisos de WooCommerce: ficha, carrito y checkout.
 *
 * En la ficha WooCommerce los imprime entre la cabecera y la plantilla, a todo
 * el ancho; en carrito y checkout, dentro de .orb-main. Salian con el filete
 * superior de 3px, un marco negro (reciben foco programatico, tabindex=-1, para
 * el lector de pantalla) y el boton flotando a la derecha, descolgado en movil.
 * En carrito y checkout, ademas, el de error es un <ul> y la regla del kit
 * `.orb-main ul` le bajaba la sangria a 22px: el icono tapaba la primera palabra.
 *
 * Caja blanca sin bordes, icono en su hueco, texto y boton en fila en escritorio
 * y apilados en movil, con el boton secundario de la convencion. En la ficha la
 * franja toma el rosado de la plantilla y se alinea con --ae-gutter; en carrito
 * el hueco lo da ae-carrito.css. Mi cuenta tiene sus propias reglas.
 */
body > .woocommerce-notices-wrapper:not(:empty) {
	background-color: var(--ae-tint);
	padding: 24px var(--ae-gutter) 0;
}

body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 12px;
	padding: 16px 20px 16px 52px;
	border: 0;
	border-radius: 0;
	background-color: #fff;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--ae-ink);
	list-style: none;
}

body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):last-child,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):last-child {
	margin-bottom: 0;
}

/* El clearfix de WooCommerce (::after display:table) seria un hijo flex mas y sumaria un hueco. */
body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
	display: none;
}

/* Varios errores van uno debajo de otro, no en fila. */
body > .woocommerce-notices-wrapper .woocommerce-error,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* El foco es programatico (para el lector de pantalla): no es un control. */
body > .woocommerce-notices-wrapper [role="alert"]:focus,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) [role="alert"]:focus {
	outline: none;
}

body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	color: var(--ae-accent);
}

/* Con el error en varias lineas, el icono va con la primera. */
body > .woocommerce-notices-wrapper .woocommerce-error::before,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error::before {
	top: 19px;
	transform: none;
}

body > .woocommerce-notices-wrapper .woocommerce-error li,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li {
	margin: 0;
	padding: 0;
}

body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button {
	float: none;
	order: 2;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	padding: 12px 24px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 2.08px;
	text-transform: uppercase;
	color: var(--ae-accent-soft);
	background-color: transparent;
	border: 1px solid var(--ae-accent-soft);
	border-radius: 0;
}

body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:hover,
.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:hover {
	color: #fff;
	background-color: var(--ae-accent-soft);
	border-color: var(--ae-accent-soft);
}

@media (max-width: 767px) {
	body > .woocommerce-notices-wrapper:not(:empty) {
		padding-top: 16px;
	}

	body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
	.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
		padding: 14px 16px 16px 44px;
		font-size: 14px;
	}

	body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
	.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
		top: 15px;
		left: 16px;
		transform: none;
	}

	body > .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
	.ae-carrito :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button {
		width: 100%;
		margin-left: 0;
	}
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	font-family: var(--ae-font-body), sans-serif;
	border-radius: 0;
	color: var(--ae-ink);
}

.woocommerce table.shop_table {
	border-color: var(--ae-line);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 15px;
	color: var(--ae-ink);
	background-color: #fff;
	border: 1px solid var(--ae-line);
	border-radius: 0;
	padding: 11px 12px;
	min-height: 43px;
}

.woocommerce form .form-row label,
.woocommerce-account form label {
	font-family: var(--ae-font-body), sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--ae-body);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--ae-accent);
	outline-offset: 1px;
	border-color: var(--ae-accent);
}

/* ---------- Ancho de las plantillas de tienda ---------- */

.woocommerce-page:not(.elementor-page) .woocommerce,
.woocommerce-page:not(.elementor-page) .woocommerce-products-header,
.woocommerce-page:not(.elementor-page) .woocommerce-breadcrumb {
	max-width: 1450px;
	margin-inline: auto;
	padding-inline: clamp(20px, 8vw, 138px);
}