/**
 * Listado de categoría.
 *
 * Misma regla que el resto: ni un solo valor de color literal.
 * Solo se carga en la tienda y en las categorías (ver bocause_estilos_plp).
 *
 * El acordeón de preguntas frecuentes no se repite aquí: es compartido con la
 * ficha de producto y vive en bocause.css.
 */

/* ==========================================================================
   Cabecera
   ========================================================================== */

.bc-plp__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	margin-bottom: 32px;
}

.bc-plp__titulo {
	margin: 0 0 14px;
	font-family: var(--bc-fuente-display);
	font-size: clamp(38px, 6vw, 64px);
	font-weight: var(--bc-peso-display);
	line-height: 1;
	color: var(--bc-texto);
}

/* En escritorio la entradilla se lee entera: el <details> solo se comporta
   como desplegable en móvil, donde el diseño lo pide plegable. */

.bc-plp__intro {
	max-width: 62ch;
	margin-bottom: 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bc-texto-2);
}

.bc-plp__intro p {
	margin: 0;
}

.bc-plp__intro-resumen {
	display: none;
}

.bc-plp__recuento {
	margin: 0;
	font-family: var(--bc-fuente-dato);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-texto-3);
}

.bc-plp__foto {
	position: relative;
	flex: 0 0 auto;
	width: 190px;
}

.bc-plp__foto-img {
	display: block;
	width: 190px;
	height: 190px;
	object-fit: cover;
	border-radius: var(--bc-r-pill);
	border: 3px solid var(--bc-marca);
}

.bc-plp__badge {
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	display: inline-block;
	max-width: 240px;
	padding: 7px 12px;
	font-family: var(--bc-fuente-dato);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--bc-sobre-primario);
	background-color: var(--bc-primario);
	border-radius: var(--bc-r-pill);
}

.bc-plp__badge:hover,
.bc-plp__badge:focus {
	color: var(--bc-sobre-primario);
	background-color: var(--bc-primario-hover);
}

/* ==========================================================================
   Chips de subcategoría
   ==========================================================================
   Cajas grandes con borde grueso, deliberadamente distintas de los filtros:
   son navegación indexable, no filtrado.
   ========================================================================== */

.bc-chips {
	margin-bottom: 36px;
}

.bc-chips__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bc-chips__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 18px;
	text-decoration: none;
	color: var(--bc-texto);
	background-color: var(--bc-superficie);
	border: var(--bc-borde-fuerte);
	border-radius: var(--bc-r-l);
	transition: background-color var(--bc-trans) ease, color var(--bc-trans) ease;
}

.bc-chips__nombre {
	font-family: var(--bc-fuente-texto);
	font-size: 18px;
	font-weight: var(--bc-peso-fuerte);
}

.bc-chips__contador {
	font-family: var(--bc-fuente-dato);
	font-size: 12px;
	color: var(--bc-texto-3);
}

.bc-chips__chip:hover,
.bc-chips__chip:focus-visible {
	color: var(--bc-sobre-marca);
	background-color: var(--bc-marca);
}

.bc-chips__chip:hover .bc-chips__contador,
.bc-chips__chip:focus-visible .bc-chips__contador {
	color: var(--bc-sobre-marca);
}

/* ==========================================================================
   Rejilla: filtros + resultados
   ========================================================================== */

.bc-plp__layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.bc-plp__layout--sin-filtros {
	grid-template-columns: minmax(0, 1fr);
}

.bc-plp__filtros-cabecera {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: 12px;
	margin-bottom: 18px;
	border-top: var(--bc-regla) solid var(--bc-texto);
}

.bc-plp__filtros-titulo {
	flex: 1;
	margin: 0;
	font-family: var(--bc-fuente-display);
	font-size: 22px;
	font-weight: var(--bc-peso-display);
	line-height: 1;
}

.bc-plp__limpiar {
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-negativo);
}

.bc-plp__cerrar {
	display: none;
	padding: 4px 8px;
	font-size: 16px;
	color: var(--bc-texto);
	background: none;
	border: 0;
	cursor: pointer;
}

/* --- Widgets de filtro de WooCommerce, reestilizados ---------------------- */

.bc-filtro {
	margin-bottom: 26px;
}

.bc-filtro__titulo {
	margin: 0 0 10px;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bc-texto-3);
}

.bc-filtro ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

/* Cada opción es un enlace (navegación por capas de WooCommerce) disfrazado
   de botón, que es justo lo que pedía el brief: indexable por dentro, botón
   por fuera. */

.bc-filtro li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font-family: var(--bc-fuente-texto);
	font-size: 15px;
	text-decoration: none;
	color: var(--bc-texto);
	background-color: var(--bc-superficie);
	border: var(--bc-borde-medio);
	border-radius: var(--bc-r-m);
	transition: background-color var(--bc-trans) ease, color var(--bc-trans) ease;
}

.bc-filtro li a::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bc-texto);
	border-radius: 2px;
}

.bc-filtro li a:hover,
.bc-filtro li a:focus-visible {
	color: var(--bc-sobre-marca);
	background-color: var(--bc-marca);
}

.bc-filtro li a:hover::before,
.bc-filtro li a:focus-visible::before {
	border-color: var(--bc-sobre-marca);
}

.bc-filtro li.chosen a {
	color: var(--bc-sobre-marca);
	background-color: var(--bc-marca);
	border-color: var(--bc-marca);
}

.bc-filtro li.chosen a::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--bc-sobre-marca);
	border-color: var(--bc-sobre-marca);
}

.bc-filtro .count {
	margin-left: auto;
	font-family: var(--bc-fuente-dato);
	font-size: 11.5px;
	color: var(--bc-texto-3);
}

.bc-filtro li a:hover .count,
.bc-filtro li.chosen a .count {
	color: var(--bc-sobre-marca);
}

/* Filtro de precio */

.bc-filtro .price_slider_wrapper .ui-slider {
	position: relative;
	height: 4px;
	margin: 18px 0;
	background-color: var(--bc-linea);
	border-radius: var(--bc-r-pill);
}

.bc-filtro .price_slider_wrapper .ui-slider-range {
	position: absolute;
	height: 100%;
	background-color: var(--bc-marca);
	border-radius: var(--bc-r-pill);
}

.bc-filtro .price_slider_wrapper .ui-slider-handle {
	position: absolute;
	top: -7px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	background-color: var(--bc-primario);
	border: 2px solid var(--bc-texto);
	border-radius: var(--bc-r-pill);
	cursor: pointer;
}

.bc-filtro .price_label {
	font-family: var(--bc-fuente-dato);
	font-size: 12px;
	color: var(--bc-texto-2);
}

.bc-filtro .price_slider_amount .button {
	padding: 8px 14px;
	font-family: var(--bc-fuente-texto);
	font-size: 14px;
	font-weight: var(--bc-peso-fuerte);
	color: var(--bc-sobre-primario);
	background-color: var(--bc-primario);
	border: 0;
	border-radius: var(--bc-r-m);
}

/* ==========================================================================
   Barra superior de resultados
   ========================================================================== */

.woocommerce-result-count,
.woocommerce-ordering {
	margin: 0;
}

.bc-plp__resultados .woocommerce-result-count {
	float: none;
	font-family: var(--bc-fuente-dato);
	font-size: 12px;
	color: var(--bc-texto-3);
}

.bc-plp__resultados .woocommerce-ordering {
	float: none;
}

.bc-plp__resultados .woocommerce-ordering select {
	padding: 10px 12px;
	font-family: var(--bc-fuente-texto);
	font-size: 14.5px;
	color: var(--bc-texto);
	background-color: var(--bc-superficie);
	border: var(--bc-borde-medio);
	border-radius: var(--bc-r-m);
}

/* El recuento y el selector comparten fila, con el layout ya abierto. */

.bc-plp__resultados {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bc-plp__resultados > .woocommerce-result-count {
	order: 1;
}

.bc-plp__resultados > .woocommerce-ordering {
	order: 2;
	margin-top: -38px;
	align-self: flex-end;
}

.bc-plp__resultados > ul.products {
	order: 3;
}

.bc-plp__resultados > .woocommerce-pagination {
	order: 4;
}

/* ==========================================================================
   Rejilla de productos
   ========================================================================== */

.bc-plp__resultados ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

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

.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	font-family: var(--bc-fuente-dato);
	font-size: 14px;
	text-decoration: none;
	color: var(--bc-texto);
	background-color: var(--bc-superficie);
	border: var(--bc-borde-medio);
	border-radius: var(--bc-r-m);
	transition: background-color var(--bc-trans) ease, color var(--bc-trans) ease;
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:focus-visible {
	color: var(--bc-sobre-marca);
	background-color: var(--bc-marca);
}

.woocommerce-pagination .page-numbers.current {
	color: var(--bc-texto-inv);
	background-color: var(--bc-fondo-oscuro);
	border-color: var(--bc-texto);
}

/* ==========================================================================
   Bloque SEO del pie
   ========================================================================== */

.bc-plp__seo {
	margin-top: 56px;
	padding: 40px;
	background-color: var(--bc-superficie);
	border-top: var(--bc-borde-fuerte);
	border-radius: 0 0 var(--bc-r-l) var(--bc-r-l);
}

.bc-plp__seo-texto {
	max-width: 78ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bc-texto-2);
}

.bc-plp__seo-texto h2 {
	margin: 28px 0 12px;
	font-family: var(--bc-fuente-display);
	font-size: 32px;
	font-weight: var(--bc-peso-display);
	line-height: 1.05;
	color: var(--bc-texto);
}

.bc-plp__seo-texto h2:first-child {
	margin-top: 0;
}

.bc-plp__faq {
	margin-top: 48px;
}

/* ==========================================================================
   Botón flotante de filtros (solo móvil)
   ========================================================================== */

.bc-plp__flotante {
	display: none;
}

/* ==========================================================================
   Adaptación
   ========================================================================== */

@media (max-width: 1199px) {

	.bc-plp__layout {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
	}

	.bc-plp__resultados ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {

	/* Los filtros pasan a panel lateral: fuera de la rejilla. */

	.bc-plp__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bc-plp__filtros {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		width: min(320px, 88vw);
		padding: 20px;
		overflow-y: auto;
		background-color: var(--bc-fondo);
		border-right: var(--bc-borde-fuerte);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform var(--bc-trans) ease, visibility var(--bc-trans) ease;
	}

	.bc-plp__filtros.is-abierto {
		transform: translateX(0);
		visibility: visible;
	}

	.bc-plp__cerrar {
		display: block;
	}

	.bc-plp__velo {
		position: fixed;
		inset: 0;
		z-index: 39;
		background-color: rgb(0 0 0 / 45%);
	}

	.bc-plp__flotante {
		position: sticky;
		bottom: 20px;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 24px auto 0;
		padding: 14px 26px;
		font-family: var(--bc-fuente-texto);
		font-size: 15px;
		font-weight: var(--bc-peso-fuerte);
		color: var(--bc-texto-inv);
		background-color: var(--bc-fondo-oscuro);
		border: 0;
		border-radius: var(--bc-r-pill);
		box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
		cursor: pointer;
	}

	.bc-plp__flotante-contador {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		font-family: var(--bc-fuente-dato);
		font-size: 11px;
		color: var(--bc-sobre-primario);
		background-color: var(--bc-primario);
		border-radius: var(--bc-r-pill);
	}
}

@media (max-width: 599px) {

	.bc-plp__cabecera {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		margin-bottom: 24px;
	}

	/* En móvil la foto va junto al titular, no al lado del bloque entero. */

	.bc-plp__foto {
		order: -1;
		width: 84px;
	}

	.bc-plp__foto-img {
		width: 84px;
		height: 84px;
	}

	.bc-plp__badge {
		display: none;
	}

	/* Aquí sí se comporta como desplegable. */

	.bc-plp__intro-resumen {
		display: list-item;
		font-family: var(--bc-fuente-dato);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--bc-marca);
		cursor: pointer;
	}

	.bc-plp__intro[open] .bc-plp__intro-resumen {
		margin-bottom: 8px;
	}

	.bc-chips {
		margin-bottom: 24px;
	}

	/* Los chips pasan a scroll horizontal, sin cortar el borde del primero. */

	.bc-chips__lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x proximity;
	}

	.bc-chips__chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.bc-plp__resultados ul.products {
		gap: 12px;
	}

	.bc-plp__resultados > .woocommerce-ordering {
		margin-top: 0;
		align-self: stretch;
	}

	.bc-plp__resultados > .woocommerce-ordering select {
		width: 100%;
	}

	.bc-plp__seo {
		margin-top: 36px;
		padding: 24px;
	}

	.bc-plp__seo-texto h2 {
		font-size: 24px;
	}
}