/**
 * Tienda / categoría: encabezado, chips de subcategorías, toolbar de orden
 * y la grilla de productos (woocommerce ul.products).
 */

.shop-header {
	padding-top: var(--space-5);
}

.shop-header__title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.shop-header__title span {
	color: var(--branch-color, var(--color-primary));
}

.shop-header__desc {
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
	font-size: 0.9rem;
	max-width: 60ch;
}

@media (min-width: 900px) {
	.shop-header__title {
		font-size: 2rem;
	}
}

/* ---------- Círculos de categoría (slider tipo "historias") ----------
   Muestran las categorías hermanas de la rama actual. Tocar uno actualiza
   la grilla de abajo por AJAX sin cambiar de página (ver assets/js/shop.js);
   son <a href> reales, así que sin JS navegan normal. */
/* La barra de scroll nativa del navegador (gris, gruesa) no pegaba con el
   resto del sitio — sin ella hace falta otra pista de que hay más
   categorías para el lado: un desvanecido sutil en el borde derecho, en
   vez de una barra. */
.cat-circles-wrap {
	position: relative;
}

.cat-circles {
	margin-top: var(--space-4);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}

.cat-circles::-webkit-scrollbar {
	display: none;
}

/* Flechas: en desktop no hay pista táctil de que se puede deslizar, así que
   además del desvanecido del borde agregamos un botón que se ve y se puede
   tocar/cliquear — assets/js/shop.js las muestra/oculta solas según haga
   falta (si no hay nada para el lado, ni aparecen). Centradas sobre el
   círculo (no sobre el nombre de abajo): top = padding-top de la lista
   (4px) + mitad del círculo. */
.cat-circles__arrow {
	position: absolute;
	top: 38px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
	z-index: 2;
}

.cat-circles__arrow:hover {
	color: var(--color-text);
}

.cat-circles__arrow[hidden] {
	display: none;
}

.cat-circles__arrow .icon {
	width: 16px;
	height: 16px;
}

.cat-circles__arrow--prev {
	left: -4px;
}

.cat-circles__arrow--prev .icon {
	transform: rotate(180deg);
}

.cat-circles__arrow--next {
	right: -4px;
}

@media (min-width: 900px) {
	.cat-circles__arrow {
		top: 48px;
		width: 34px;
		height: 34px;
	}
}

.cat-circles__list {
	display: flex;
	gap: var(--space-4);
	padding: 4px var(--space-4) var(--space-2);
	margin: 0 calc(var(--space-4) * -1);
}

@media (min-width: 900px) {
	.cat-circles__list {
		padding-left: var(--space-6);
		padding-right: var(--space-6);
		margin: 0 calc(var(--space-6) * -1);
	}
}

.cat-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 76px;
	flex-shrink: 0;
	text-align: center;
}

.cat-circle__img {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: var(--color-bg-subtle);
	background-size: cover;
	background-position: center;
	border: 2px solid var(--color-border);
	transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

/* Más grandes en desktop: al lado de las tarjetas de producto (bastante
   más anchas ahí) los círculos chicos de mobile quedaban desproporcionados. */
@media (min-width: 900px) {
	.cat-circle {
		width: 96px;
		gap: 8px;
	}

	.cat-circle__img {
		width: 88px;
		height: 88px;
		border-width: 2.5px;
	}

	.cat-circle__name {
		font-size: 0.8rem;
	}
}

.cat-circle:active .cat-circle__img {
	transform: scale(0.94);
}

.cat-circle.is-active .cat-circle__img {
	border-color: var(--branch-color, var(--color-primary));
	box-shadow: 0 0 0 2px var(--color-bg);
}

.cat-circle__name {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cat-circle.is-active .cat-circle__name {
	color: var(--color-text);
}

/* ---------- Descripción de categoría (si la carga WooCommerce) ---------- */
.term-description {
	color: var(--color-text-secondary);
	font-size: 0.9rem;
	margin-top: var(--space-4);
	max-width: 70ch;
}

/* ---------- Aviso fijo de precios mayoristas (toda la sección Mayorista) ---------- */
.wholesale-info-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	/* Fondo celeste tenue (ligado al color del ícono) en vez del gris neutro
	   de siempre — antes se perdía entre el buscador y las demás cajas
	   grises de la página y pasaba desapercibido. */
	background: color-mix(in srgb, var(--color-primary) 8%, white);
	border: 1px solid color-mix(in srgb, var(--color-primary) 22%, white);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin-top: var(--space-4);
}

.wholesale-info-banner .icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-primary);
}

.wholesale-info-banner p {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--color-text);
}

.wholesale-info-banner p strong {
	color: var(--color-primary);
}

.wholesale-info-banner p strong.wholesale-info-banner__green {
	color: var(--color-success);
}

/* ---------- Buscador de la categoría ----------
   Filtra la grilla de abajo mientras se escribe (debounced, ver shop.js).
   Es un <form method="get"> real: sin JS, al apretar Enter busca normal. */
.shop-search {
	margin-top: var(--space-4);
}

.shop-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-full);
	padding: 11px var(--space-4);
}

.shop-search__icon {
	width: 18px;
	height: 18px;
	color: var(--color-text-tertiary);
	flex-shrink: 0;
}

.shop-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: 0.9rem;
}

.shop-search__input:focus {
	outline: none;
}

.shop-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--color-text-tertiary);
	flex-shrink: 0;
}

.shop-search__clear[hidden] {
	display: none;
}

.shop-search__clear:hover {
	background: var(--color-border);
	color: var(--color-text);
}

.shop-search__clear .icon {
	width: 14px;
	height: 14px;
}

/* ---------- Toolbar (resultados + orden) ---------- */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-5);
	margin-bottom: var(--space-4);
}

.woocommerce-result-count {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
}

.shop-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.shop-sort,
.shop-per-page {
	display: inline-flex;
}

.mundotec-sort-select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	padding: 8px 14px;
	font-size: 0.8rem;
	background: #fff;
	max-width: 44vw;
}

@media (min-width: 900px) {
	.mundotec-sort-select {
		max-width: none;
	}
}

/* ---------- Estado de carga (mientras llega la respuesta AJAX) ---------- */
.shop-results.is-loading .shop-grid-wrap,
.shop-results.is-loading .shop-pagination-wrap {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s var(--ease);
}

/* ---------- Grilla de productos ---------- */
/* WooCommerce trae su propio sistema de grilla basado en float + % de ancho
   (ul.products li.product{width:22%;float:left}) para compatibilidad con
   temas viejos. Lo neutralizamos así el CSS Grid de acá abajo manda. */
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* El clearfix clásico de WooCommerce (ul.products::before/::after{content:"";
   display:table}) genera cajas que, dentro de un contenedor grid, cuentan
   como ítems anónimos del grid y desplazan las tarjetas reales una celda.
   Lo desactivamos. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--space-3) !important;
	margin: 0 !important;
}

@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (min-width: 900px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: var(--space-4) !important;
	}
}

@media (min-width: 1200px) {
	ul.products {
		grid-template-columns: repeat(5, 1fr) !important;
	}
}

/* ---------- Grilla densa (sólo Mayorista) ----------
   Repuestos mantiene el aire de siempre; Mayorista, con un catálogo de
   miles de accesorios, prioriza mostrar más productos por pantalla — una
   tarjeta más chica y menos separación, sin tocar el resto del sitio. */
.is-branch-mayorista ul.products {
	gap: var(--space-2) !important;
}

@media (min-width: 900px) {
	.is-branch-mayorista ul.products {
		grid-template-columns: repeat(5, 1fr) !important;
		gap: var(--space-3) !important;
	}
}

@media (min-width: 1200px) {
	.is-branch-mayorista ul.products {
		grid-template-columns: repeat(6, 1fr) !important;
	}
}

.is-branch-mayorista .product-card__body {
	padding: var(--space-3);
}

.shop-empty {
	padding: var(--space-7) 0;
	text-align: center;
	color: var(--color-text-secondary);
}

/* Buscador de la categoría: un input tranquilo más, como cualquier otro del
   sitio — blanco (para distinguirse del fondo gris de la página) con un
   borde fino, sin sombra de color ni brillo. El turquesa sólo aparece al
   enfocar, igual que en el resto de los formularios (carrito, checkout). */
.shop-search__form {
	background: #fff;
	border: 1px solid var(--color-border);
}

.shop-search__form:focus-within {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.shop-search__input::placeholder {
	color: var(--color-text-tertiary);
}