/* ==========================================================================
   Almacén Ibérico — CATEGORÍAS (styles/categoria.css)
   Capa específica de la plantilla taxonomy-product_cat.php.
   REQUIERE styles/home.css cargado antes (tokens, botones, tarjetas,
   carruseles, FAQ, opiniones: todo se reutiliza de ahí).
   ========================================================================== */

/* Ocultar la cabecera de archivo del tema: el H1 vive en nuestro hero */
body.aih-cat-template .ct-page-title,
body.aih-cat-template .hero-section,
body.aih-cat-template .entry-header { display: none; }

/* ==========================================================================
   HERO DE CATEGORÍA
   ========================================================================== */
.aih-cathero__content {
	padding-block: 2rem;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}

/* Migas de pan (visibles; el schema lo emite Rank Math) */
.aihc-crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: 1rem;
	font-size: .75rem;
	letter-spacing: .02em;
	color: rgba(255,255,255,.65);
}
.aihc-crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.aihc-crumbs a:hover { color: #fff; text-decoration: underline; }
.aihc-crumbs__here { color: #c9a584; }

.aih-cathero h1 {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
	color: #fff;
	max-width: 56rem;
}

/* Descripción del hero: HTML de seo-category.php (<p> con <strong>) */
.aihc-hero-desc {
	margin-top: .875rem;
	max-width: 46rem;
}
.aihc-hero-desc p {
	margin: 0 0 .625rem;
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(255,255,255,.85);
}
.aihc-hero-desc p:last-child { margin-bottom: 0; }
.aihc-hero-desc strong { color: #fff; }
.aihc-hero-desc a { color: #c9a584; text-decoration: underline; }

.aih-cathero .aih-hero__ctas { margin-top: 1.25rem; }
.aih-cathero .aih-hero__rating { margin-bottom: .875rem; }

/* ==========================================================================
   CÍRCULOS AUTOAJUSTABLES (subcategorías / explora la despensa)
   SIEMPRE en una sola fila horizontal:
   - Móvil/tablet: tamaño cómodo + scroll lateral con snap.
   - Escritorio: los círculos ENCOGEN lo necesario para caber todos.
   ========================================================================== */
/* Móvil: rejilla de 2 en 2 (2·2·2·1) — más fácil de escanear que un carrusel.
   Si el número es impar, el último círculo se centra solo. */
.aihc-cats-auto {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	justify-items: center;
}
.aihc-cats-auto .aih-cat { width: 6.5rem; }
.aihc-cats-auto .aih-cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.aihc-cats-auto .aih-cat__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}
.aihc-cats-auto .aih-cat__title { font-size: .78rem; line-height: 1.3; }
.aihc-cat-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--ib-50);
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ac-600);
}
.aihc-subcats, .aihc-others { padding-block: 2.75rem; }
.aihc-others__cta { margin-top: 2rem; text-align: center; }

/* ==========================================================================
   TOOLBAR + GRID DE PRODUCTOS (tarjetas nativas de Blocksy/Woo, pulidas)
   ========================================================================== */
.aihc-grid-sec { scroll-margin-top: 90px; }

.aihc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.5rem;
}
.aihc-toolbar__count .woocommerce-result-count {
	margin: 0;
	font-size: .8125rem;
	color: var(--ib-700);
}
.aihc-toolbar__order .woocommerce-ordering { margin: 0; }
.aihc-toolbar__order select {
	border: 1px solid var(--ib-200);
	border-radius: 9999px;
	padding: .5rem 2.25rem .5rem 1rem;
	font-size: .8125rem;
	color: var(--ink);
	background-color: #fff;
	cursor: pointer;
}

/* Título pequeño sobre el grid */
.aihc-grid-head { margin-bottom: 1.25rem; }

/* Tarjetas del grid: pulido ligero (marco + sombra). Título, precio y el
   botón "Añadir al carrito" quedan NATIVOS del tema, tal cual la tienda. */
.aihc-products ul.products { margin-bottom: 0 !important; }
.aihc-products ul.products li.product {
	background: #fff;
	border: 1px solid var(--ib-100);
	border-radius: 1rem;
	padding: 14px;
	box-shadow: var(--sh-soft);
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.aihc-products ul.products li.product:hover {
	box-shadow: var(--sh-lift);
	border-color: rgba(154,107,63,.4);
	transform: translateY(-4px);
}
.aihc-products ul.products li.product img { border-radius: .75rem; }

.aihc-pagination { margin-top: 2rem; text-align: center; }
.aihc-pagination .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: .375rem;
	border: 0;
	margin: 0;
}
.aihc-pagination .page-numbers li { border: 0; }
.aihc-pagination .page-numbers a,
.aihc-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .5rem;
	border-radius: 9999px;
	border: 1px solid var(--ib-200);
	background: #fff;
	color: var(--ink);
	font-size: .875rem;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.aihc-pagination .page-numbers a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.aihc-pagination .page-numbers span.current { background: var(--ac-500); color: #fff; border-color: var(--ac-500); }

/* Scroll infinito: la paginación queda en el DOM (para los rastreadores)
   pero oculta; en su lugar, indicador de carga con puntos dorados. */
.aihc-pagination--infinite {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.aihc-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	padding: 1.5rem 0 .5rem;
	color: var(--ib-700);
}
.aihc-loader__txt { font-size: .8125rem; margin-left: .375rem; }
.aihc-loader__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 9999px;
	background: var(--ac-500);
	animation: aihc-bounce 1s ease-in-out infinite;
}
.aihc-loader__dot:nth-child(2) { animation-delay: .15s; }
.aihc-loader__dot:nth-child(3) { animation-delay: .3s; }
@keyframes aihc-bounce {
	0%, 100% { transform: translateY(0); opacity: .5; }
	50% { transform: translateY(-6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.aihc-loader__dot { animation: none; }
}
.aihc-sentinel { height: 1px; }

/* ==========================================================================
   CTA ASESORAMIENTO
   ========================================================================== */
.aihc-help-sec { padding-block: 2.75rem; }
.aihc-help {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--ib-100);
	border-radius: 1.5rem;
	box-shadow: var(--sh-soft);
	padding: 1.75rem;
}
.aihc-help h2 { margin-top: .5rem; }
.aihc-help p {
	margin-top: .625rem;
	color: var(--ib-700);
	font-size: .9375rem;
	line-height: 1.65;
	max-width: 56ch;
}
.aihc-help .aih-btn { flex: none; }

/* ==========================================================================
   CONTENIDO SEO AMPLIADO — "La guía del almacén"
   Tarjetas premium: filete dorado superior, serif y aire. 2 columnas
   en escritorio (1 bloque = ancho completo centrado).
   ========================================================================== */
.aihc-prose {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 64rem;
	margin-inline: auto;
}
.aihc-prose__block {
	position: relative;
	background: linear-gradient(180deg, #fffdf9 0%, #ffffff 45%);
	border: 1px solid var(--ib-100);
	border-radius: 1.25rem;
	box-shadow: var(--sh-soft);
	padding: 1.75rem 1.5rem;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.aihc-prose__block:hover { box-shadow: var(--sh-lift); border-color: rgba(154,107,63,.35); }
.aihc-prose__rule {
	display: block;
	width: 2.75rem;
	height: 3px;
	border-radius: 9999px;
	background: linear-gradient(90deg, var(--ac-500), var(--ac-300));
	margin-bottom: 1rem;
}
.aihc-prose h3 {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
	margin: 0 0 .875rem;
}
.aihc-prose p {
	margin: 0 0 .75rem;
	color: var(--ib-800, #4f3820);
	font-size: .9375rem;
	line-height: 1.75;
}
.aihc-prose p:last-child { margin-bottom: 0; }
.aihc-prose strong { color: var(--ac-700); }
.aihc-prose a { color: var(--ac-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aihc-prose a:hover { color: var(--ink); }

/* ==========================================================================
   OPINIONES CORTAS (grid, no carrusel)
   ========================================================================== */
.aihc-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
	.aih-cathero__content { padding-block: 3rem; min-height: 420px; }
	.aih-cathero h1 { font-size: 2.5rem; }
	.aihc-hero-desc { margin-top: 1.25rem; }
	.aihc-hero-desc p { font-size: 1rem; line-height: 1.65; }
	.aih-cathero .aih-hero__ctas { margin-top: 1.75rem; }

	/* Tablet/escritorio: vuelve a fila horizontal centrada */
	.aihc-cats-auto {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 1.5rem;
	}
	.aihc-cats-auto .aih-cat { flex: 0 1 7.5rem; width: auto; min-width: 4.5rem; }
	.aihc-cats-auto .aih-cat__title { font-size: .9375rem; }

	.aihc-help { flex-direction: row; align-items: center; justify-content: space-between; padding: 2.25rem; }
	.aihc-help h2 { margin-top: .625rem; }

	.aihc-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

	.aihc-prose { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
	.aihc-prose__block { padding: 2.25rem 2rem; }
	.aihc-prose__block:only-child { grid-column: 1 / -1; max-width: 40rem; justify-self: center; }
	.aihc-prose h3 { font-size: 1.5rem; }
	.aihc-prose p { font-size: 1rem; }

	.aihc-subcats, .aihc-others, .aihc-help-sec { padding-block: 3.5rem; }
}

@media (min-width: 1024px) {
	/* Hero de categoría ≈560px (algo más bajo que la home: aquí manda el grid) */
	.aih-cathero__content { padding-block: 3.5rem; min-height: 560px; }
	.aih-cathero h1 { font-size: 3.25rem; }

	/* Escritorio: los círculos ENCOGEN para caber todos en una sola fila
	   (7 subcategorías caben sin problema). */
	.aihc-cats-auto .aih-cat { flex: 0 1 9.5rem; min-width: 5.5rem; }

	.aihc-reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.aihc-subcats, .aihc-others, .aihc-help-sec { padding-block: 4rem; }
}

/* ==========================================================================
   CATEGORÍA VACÍA DENTRO DE LA PLANTILLA NUEVA
   La caja "Próximamente" y el carrusel de sugerencias viven en style.css
   (los pinta modulos/woocommerce.php). Al servirse ya dentro de .aih-wrap,
   su contenedor interno de Blocksy (.ct-container) duplicaría el padding
   lateral y limitaría el ancho otra vez: aquí se neutraliza, solo dentro
   de nuestras plantillas.
   ========================================================================== */
.aih-catpage .ai-empty-suggestions-wrapper .ct-container {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}
.aih-catpage .ai-empty-category-box { margin-top: 0; }

/* ==========================================================================
   PANTALLAS TÁCTILES — mismo criterio que el bloque final de home.css:
   el :hover se queda pegado tras el toque y la animación de .3s hacía que
   pulsar un producto pareciera lento. Se anula y se cambia por :active.
   ========================================================================== */
@media (hover: none) {
	.aihc-products ul.products li.product:hover {
		box-shadow: var(--sh-soft);
		border-color: var(--ib-100);
		transform: none;
	}
	.aihc-products ul.products li.product {
		transition: transform .12s ease, box-shadow .12s ease;
	}
	.aihc-products ul.products li.product:active { transform: scale(.985); }

	.aihc-prose__block:hover { box-shadow: none; border-color: var(--ib-100); }
}