/**
 * Marco de categoria y busqueda, basado en la composicion de categoria.html
 * y en el carrusel de categorias ya aprobado para Inicio y Ofertas.
 */

.ace-catalog-listing main.wp-block-group[style*="padding-top"] {
	padding-top: 0 !important;
}

.ace-catalog-intro {
	padding-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

.ace-catalog-breadcrumb {
	color: var(--wp--preset--color--contrast-muted, #6b6b6b);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.ace-catalog-breadcrumb ol {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ace-catalog-breadcrumb li {
	align-items: center;
	display: flex;
	gap: 0.375rem;
}

.ace-catalog-breadcrumb li + li::before {
	color: var(--wp--preset--color--hairline, #e2e1de);
	content: "/";
}

.ace-catalog-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ace-catalog-breadcrumb a:hover {
	color: var(--wp--preset--color--accent, #3f4a5a);
	text-decoration: underline;
}

.ace-catalog-heading-row {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	justify-content: space-between;
}

.ace-catalog-hero {
	align-items: center;
	display: flex;
	gap: 0.875rem;
	min-inline-size: 0;
}

.ace-catalog-hero__icon-box {
	align-items: center;
	background: var(--wp--preset--color--hairline, #e2e1de);
	block-size: 3.25rem;
	border-radius: var(--wp--preset--border-radius--large, 16px);
	display: flex;
	flex: 0 0 3.25rem;
	justify-content: center;
}

.ace-catalog-hero__icon {
	block-size: 1.5rem;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	inline-size: 1.5rem;
}

.ace-catalog-hero h1 {
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	margin: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.ace-catalog-subcategories {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
	padding-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

.ace-subcategory-carousel__track {
	/*
	 * `overflow-x: auto` del riel tambien recorta el eje vertical. Este aire
	 * queda dentro del scrollport y preserva la sombra, la elevacion de 2px
	 * y el outline de teclado de las tarjetas fotograficas.
	 */
	--ace-carousel-shadow-pad: var(--wp--preset--spacing--30, 1rem);
	gap: var(--wp--preset--spacing--20, 0.5rem);
	justify-content: flex-start;
}

.ace-subcategory-card {
	align-items: center;
	color: var(--wp--preset--color--contrast, #1c1c1c);
	display: flex;
	flex: 0 0 5.5rem;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 1rem);
	text-align: center;
	text-decoration: none;
}

.ace-subcategory-card__icon-box {
	align-items: center;
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	block-size: 4.5rem;
	border-radius: var(--wp--preset--border-radius--large, 16px);
	display: flex;
	flex-shrink: 0;
	inline-size: 4.5rem;
	justify-content: center;
	transition: background-color var(--wp--custom--motion--fast, 150ms) var(--wp--custom--motion--ease-out, ease-out);
}

.ace-subcategory-card__icon {
	block-size: 1.75rem;
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	inline-size: 1.75rem;
}

/*
 * Variante fotografica de categoria.html. Solo se activa cuando la categoria
 * tiene una imagen asignada en Productos > Categorias; las demas conservan
 * exactamente la ficha compacta con icono.
 */
.ace-subcategory-card.has-image {
	align-items: stretch;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--hairline, #e2e1de);
	border-radius: var(--wp--preset--border-radius--medium, 10px);
	flex: 0 0 200px;
	gap: 0;
	inline-size: 200px;
	overflow: hidden;
	text-align: center;
	transition:
		border-color var(--wp--custom--motion--fast, 150ms) var(--wp--custom--motion--ease-out, ease-out),
		box-shadow var(--wp--custom--motion--fast, 150ms) var(--wp--custom--motion--ease-out, ease-out),
		transform var(--wp--custom--motion--fast, 150ms) var(--wp--custom--motion--ease-out, ease-out);
}

.ace-subcategory-card__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--base-alt, #f1f0ee);
	display: block;
	overflow: hidden;
}

.ace-subcategory-card__image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.ace-subcategory-card.has-image .ace-subcategory-card__label {
	align-items: center;
	border-block-start: 4px solid var(--wp--preset--color--primary, #ef2b2d);
	display: flex;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	justify-content: center;
	min-block-size: 3rem;
	padding: 0.75rem;
	text-transform: uppercase;
}

.ace-subcategory-card.has-image:hover,
.ace-subcategory-card.has-image.is-active {
	border-color: var(--wp--preset--color--primary, #ef2b2d);
	box-shadow: 0 2px 8px rgb(28 28 28 / 12%);
	transform: translateY(-2px);
}

.ace-subcategory-card__label {
	display: -webkit-box;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ace-subcategory-card:hover .ace-subcategory-card__icon-box,
.ace-subcategory-card.is-active .ace-subcategory-card__icon-box {
	background: var(--wp--preset--color--hairline, #e2e1de);
}

.ace-subcategory-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #3f4a5a);
	outline-offset: 2px;
}

.ace-subcategory-carousel .ace-carousel__nav {
	margin-top: -1.375rem;
	/* Centro optico de la imagen 4:3: padding superior (16px) + 75px. */
	top: 91px;
}

/* El titulo generico queda vacio: el encabezado accesible vive arriba. */
.ace-catalog-listing .woocommerce-products-header {
	display: none;
}

.ace-catalog-description {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: var(--wp--preset--border-radius--medium, 10px);
	color: var(--wp--preset--color--contrast-alt, #3a3a3a);
	line-height: 1.7;
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	max-inline-size: 75ch;
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

.ace-catalog-description > :first-child {
	margin-block-start: 0;
}

.ace-catalog-description > :last-child {
	margin-block-end: 0;
}

.ace-catalog-description strong {
	color: var(--wp--preset--color--contrast, #1c1c1c);
}

@media (max-width: 56.1875rem) {
	.ace-catalog-intro {
		padding-block-start: var(--wp--preset--spacing--30, 1rem);
	}

	.ace-catalog-heading-row {
		align-items: flex-start;
	}

	.ace-catalog-hero {
		gap: 0.625rem;
	}

	.ace-catalog-hero__icon-box {
		block-size: 2.5rem;
		border-radius: 0.75rem;
		flex-basis: 2.5rem;
	}

	.ace-catalog-hero__icon {
		block-size: 1.25rem;
		inline-size: 1.25rem;
	}

	.ace-catalog-hero h1 {
		font-size: 1.375rem;
	}

	.ace-catalog-subcategories {
		margin-block-start: var(--wp--preset--spacing--30, 1rem);
		padding-block-end: var(--wp--preset--spacing--30, 1rem);
	}

	.ace-subcategory-card {
		flex-basis: 4.25rem;
		gap: var(--wp--preset--spacing--20, 0.5rem);
	}

	.ace-subcategory-card.has-image {
		flex-basis: 148px;
		gap: 0;
		inline-size: 148px;
	}

	.ace-subcategory-card__icon-box {
		block-size: 3.5rem;
		inline-size: 3.5rem;
	}

	.ace-subcategory-card__icon {
		block-size: 1.375rem;
		inline-size: 1.375rem;
	}

	.ace-subcategory-card__label {
		font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	}

	.ace-subcategory-card.has-image .ace-subcategory-card__label-text {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ace-subcategory-card__icon-box,
	.ace-subcategory-card.has-image {
		transition: none;
	}
}