/*
 * /ofertas/: banner (título/descripción + carrusel de categorías) sobre una
 * tarjeta blanca de ancho completo, barra de resultados y grilla.
 *
 * Pasada de diseño del 26 de agosto de 2026 ($impeccable, registro
 * "product": esta página es una herramienta de tarea -encontrar ofertas-,
 * no una pieza de marca). Reemplaza una serie de parches sueltos hechos
 * sobre la marcha, corrigiendo lo mismo varias veces: el banner pasa a ser
 * una única franja blanca con sombra propia, de punta a punta de la
 * pantalla -no un bloque más adentro de la columna de contenido-, separada
 * del resto por esa sombra y ese cambio de fondo, sin una línea divisoria
 * aparte que ya no hace falta. La barra de resultados vive fuera de esa
 * franja, sobre el fondo normal de la página.
 *
 * Esta hoja ya NO envuelve la barra de filtros ni la grilla
 * (`.ace-category-layout`, abierta por `render_layout_open()` de
 * `ace-commerce/inc/filters.php`) en ningún contenedor propio -le agregaba
 * un padding y un ancho máximo propios que competían con los que ya trae
 * esa pieza en la tienda real-.
 *
 * Mismo corte de pantalla que ya usa la barra de filtros del resto del
 * catálogo (56.25rem / 900px, ver `filters.css`), para que las dos cosas
 * cambien de forma juntas.
 */

/*
 * El título nativo de la página (bloque `wp:post-title` de `templates/
 * page.html`) se oculta acá: esta página dibuja su propio título -junto al
 * carrusel, no solo arriba de todo- y mostrar los dos era el título
 * repetido que Adriano vio en la primera versión.
 */
body.ace-offers-page .wp-block-post-title,
body.ace-offers-page .wp-block-post-featured-image {
	display: none;
}

/*
 * El título y la imagen destacada -ocultos arriba- viven adentro de un
 * `<div class="wp-block-group">` propio de `templates/page.html`, con
 * "padding-top:var(--wp--preset--spacing--60)" (3rem/48px) puesto a mano.
 * Esconder sólo el título no esconde ESE padding: el div que lo envuelve
 * sigue ahí, vacío, empujando todo lo de abajo 48px igual.
 */
body.ace-offers-page main.wp-block-group > .wp-block-group:first-child {
	display: none;
}

/*
 * El "blockGap" global del tema (theme.json, 1.5rem) agrega aire entre la
 * cabecera del sitio y `<main>`, y WordPress suma otro margen entre
 * `<main>` y `.entry-content` aunque el bloque anterior esté oculto -sigue
 * contando como hermano para el selector, aunque no se dibuje-. Esta
 * página no quiere ninguno de los dos: el aire entre la cabecera y el
 * banner lo decide el propio banner (ver `.ace-offers__top` más abajo), no
 * un espaciado genérico pensado para artículos con título visible.
 */
body.ace-offers-page main.wp-block-group,
body.ace-offers-page .entry-content.wp-block-post-content {
	margin-block-start: 0 !important;
}

/*
 * Ancho real de la columna de contenido: sin esto, el bloque `wp:post-
 * content` de `templates/page.html` se queda en el ancho angosto por
 * defecto (`contentSize`, 44rem/704px) en vez del ancho amplio que sí usa
 * la tienda real (`wideSize`, 80rem/1280px).
 */
body.ace-offers-page .ace-offers {
	display: flex;
	flex-direction: column;
	max-width: var(--wp--style--global--wide-size, 80rem);
}

/*
 * Banner: tarjeta blanca de ancho completo, con línea y sombra propias,
 * SÓLO título/descripción y carrusel de categorías -no la barra de
 * resultados, que es un hermano aparte (más abajo), sobre el fondo normal
 * de la página (pedido explícito de Adriano: "Relevancia y filtro quedan
 * debajo del bloque", no adentro).
 */
.ace-offers__top {
	/*
	 * Ancho completo real, "rompiendo" la columna angosta de contenido en
	 * la que vive -mismo truco que ya usa `.ace-mobile-toolbar` en
	 * `filters.css`-: el elemento mide el ancho de la ventana entera y se
	 * recentra con márgenes negativos iguales a la mitad de esa diferencia.
	 * El padding interno vuelve a alinear el contenido con el resto de la
	 * página (80rem, centrado), con un mínimo para que nunca quede pegado
	 * al borde en pantallas angostas.
	 */
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--wp--preset--spacing--30, 1rem), calc((100vw - 80rem) / 2));

	background: var(--wp--preset--color--surface, #fff);
	box-shadow: var(--wp--preset--shadow--card, 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%));

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30, 1rem);

	/*
	 * Cero arriba y abajo: nada que revele el fondo de la página entre la
	 * cabecera del sitio y esta tarjeta, ni entre la tarjeta y la barra de
	 * resultados que sigue -pedido explícito y repetido de Adriano-. El
	 * único aire es el `padding-block`, interno a la tarjeta (blanco sobre
	 * blanco, no se nota como hueco).
	 */
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--20, 0.5rem);
}

.ace-offers__categories {
	flex: 1 1 100%;
	min-width: 0;
}

/*
 * En móvil el título, la descripción y "Compartir" desaparecen por
 * completo -pedido explícito de Adriano-: sólo queda visible el carrusel.
 */
.ace-offers__intro {
	display: none;
}

@media ( min-width: 56.25em ) {
	.ace-offers__top {
		align-items: center;
		gap: var(--wp--preset--spacing--40, 1.5rem);
		padding-block: var(--wp--preset--spacing--30, 1rem);
		/*
		 * Sólo en escritorio: acá la tarjeta va primero, pegada a la
		 * cabecera del sitio (que también es blanca) -hace falta una línea
		 * real para que se note dónde termina una y empieza la otra (pedido
		 * de Adriano). En móvil/tablet la tarjeta va DESPUÉS de la barra de
		 * resultados (ver "order" más abajo): esa barra ya tiene su propia
		 * línea inferior, así que agregar ésta encima duplicaría la línea.
		 */
		border-block-start: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	}

	.ace-offers__intro {
		display: block;
		flex: 0 0 auto;
	}

	.ace-offers__categories {
		flex: 1 1 0%;
		min-width: 12rem;
	}
}

/*
 * Orden entre la tarjeta del banner y la barra de resultados: se invierte
 * a propósito entre móvil y escritorio (`order`, no el orden del HTML). En
 * escritorio la tarjeta va primero y la barra de resultados abajo -pedido
 * de Adriano-. En móvil -sin título ni descripción, sólo el carrusel- la
 * barra de resultados va primero (saber cuántos productos hay y tener
 * "Filtrar" a mano antes que el carrusel, mismo pedido, ya explicado antes
 * y que sigue vigente).
 */
.ace-offers__toolbar {
	order: 1;
}

.ace-offers__top {
	order: 2;
}

body.ace-offers-page .ace-category-layout {
	order: 3;
}

@media ( min-width: 56.25em ) {
	.ace-offers__top {
		order: 1;
	}

	.ace-offers__toolbar {
		order: 2;
	}
}

.ace-offers__title {
	margin: 0;
	/*
	 * `x-large`, no `xx-large`: es el mismo nivel que usa el titulo real de
	 * la tienda/categoria (`.woocommerce-products-header__title.page-title`
	 * en woocommerce.css) que esta pagina dice imitar en todo lo demas.
	 */
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

.ace-offers__message {
	margin: 0;
	margin-block-start: var(--wp--preset--spacing--10, 0.25rem);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
}

.ace-offers__share {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.25rem);
	margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--accent, #3f4a5a);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	text-decoration: none;
}

.ace-offers__share:hover {
	text-decoration: underline;
}

.ace-offers__share-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.ace-offers__empty-message {
	padding-block: var(--wp--preset--spacing--50, 2rem);
	text-align: center;
	font-size: var(--wp--preset--font-size--large, 1.125rem);
}

/* ---------------------------------------------------------------------
 * Barra de resultados: reutiliza `.ace-results-toolbar`/`.ace-sort-dropdown`
 * (escritorio) y `.ace-mobile-toolbar` (móvil) de `filters.css` tal cual;
 * sólo agrega el conteo propio de esta página en el lugar de "Ordenar".
 * ------------------------------------------------------------------- */

.ace-offers__toolbar {
	/*
	 * En móvil, cero arriba Y abajo: la barra de resultados es lo primero
	 * que se ve después de la cabecera, pegada a ella, y la tarjeta del
	 * banner (carrusel) que sigue queda pegada a la propia barra -sin
	 * ningún hueco entre medio donde asome el fondo de la página (pedido
	 * explícito y repetido de Adriano). En escritorio va después de la
	 * tarjeta del banner, con un mínimo de aire propio para separarse de
	 * ella.
	 */
	margin-block: 0;
}

@media ( min-width: 56.25em ) {
	.ace-offers__toolbar {
		margin-block: var(--wp--preset--spacing--20, 0.5rem);
	}
}

.ace-offers__toolbar-desktop {
	display: none;
}

@media ( min-width: 56.25em ) {
	.ace-offers__toolbar-desktop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--30, 1rem);
	}

	/*
	 * `render_toolbar()` (ace-commerce/inc/filters.php) arma `.ace-results-
	 * toolbar` para vivir solo, con su propio `justify-content:space-
	 * between`. Acá conviven con el desplegable de orden en la misma fila;
	 * `display:contents` lo saca de en medio como caja -su unico hijo, el
	 * conteo, pasa a ser hijo directo de este flex- sin tocar la función.
	 */
	.ace-offers__toolbar-desktop .ace-results-toolbar {
		display: contents;
	}
}

/*
 * `.ace-mobile-toolbar__link` (filters.css) trae `flex:1 1 0`: en la tira
 * original de la tienda reparte 2-3 botones iguales en toda la fila. Acá
 * conviven solo dos elementos (cantidad + "Filtrar"), y ese `flex:1` hacía
 * que "Filtrar" se estirara a ocupar casi toda la fila mientras la cantidad
 * quedaba apretada contra el borde. Acá se pisa ese ancho elástico por uno
 * propio, del tamaño de su contenido, y las dos puntas se separan con
 * `space-between`.
 */
.ace-offers__toolbar-mobile {
	/*
	 * `.ace-mobile-toolbar` (filters.css) trae `align-items:stretch` -ahí
	 * tiene sentido, sus 3 botones deben ocupar todo el alto de la tira-.
	 * Acá el primer elemento es sólo texto ("3 productos"), no un botón: con
	 * "stretch" su caja se estira a todo el alto de la fila y el texto,
	 * arriba de esa caja, queda desalineado del resto. `!important` porque
	 * los dos archivos pisan la misma propiedad del mismo elemento y el
	 * orden de carga entre plugin y tema no está garantizado.
	 */
	align-items: center !important;
	justify-content: space-between;
	padding-inline: var(--wp--preset--spacing--30, 1rem);
	/*
	 * Sin padding-block propio: la altura de la tira ya la da el tamaño
	 * mínimo de toque del botón "Filtrar" (accesibilidad, foundations.css)
	 * -sumarle padding encima la hacía más alta de lo necesario (pedido de
	 * Adriano: "reduce la altura, es exagerado").
	 */
	padding-block: 0;
	/*
	 * `.ace-mobile-toolbar` (filters.css) trae `margin-block-end:1rem` para
	 * separarse de la grilla que viene después en la tienda normal. Acá
	 * viene ANTES del carrusel, adentro de la misma tarjeta blanca: ese
	 * margen dejaba un hueco entre "Filtrar" y las tarjetas de abajo que
	 * Adriano no quiere -en móvil no debe quedar ningún espacio ahí-.
	 */
	margin-block-end: 0 !important;
}

.ace-offers__toolbar-mobile .ace-mobile-toolbar__link {
	flex: 0 0 auto;
}

.ace-offers__mobile-count {
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	white-space: nowrap;
}