/**
 * Kaizen B2B — Filtros 0.1.5
 *
 * Estilos del panel de filtros (BeRocket) y del drawer de mobile.
 * Sin dependencias: se apoya en las variables de Blocksy cuando existen
 * y cae en valores propios cuando no.
 */

:root {
	--kzn-accent: var( --theme-palette-color-1, #1d4ed8 );
	--kzn-text: var( --theme-text-color, #1f2937 );
	--kzn-muted: var( --theme-font-color, #6b7280 );
	--kzn-border: var( --theme-border-color, #e5e7eb );
	--kzn-surface: var( --theme-palette-color-8, #ffffff );
	--kzn-radius: 8px;
	--kzn-bar-height: 44px;
}

/* ------------------------------------------------------ panel (desktop) */

.kzn-filters__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var( --kzn-border );
}

.kzn-filters__title {
	font-weight: 600;
	font-size: 16px;
	color: var( --kzn-text );
}

.kzn-filters__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --kzn-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/*
 * El JS le pone el atributo `hidden` cuando no hay filtros aplicados, pero
 * `display: inline-flex` de arriba pisa el `display: none` del navegador y
 * quedaba un punto azul vacío. Misma regla que ya existe para .kzn-bar__count.
 */
.kzn-filters__count[hidden] {
	display: none;
}

/* ---------------------------------------- títulos de los widgets de filtro */

/*
 * BeRocket arma cada título como <div class="bapf_head"><h3>Color</h3></div>.
 * Ese h3 hereda el tamaño de encabezado de Blocksy (30px / 700) y queda
 * enorme para una barra lateral. Se lo baja al mismo tamaño y peso que el
 * encabezado "Filtros" del panel.
 *
 * Los selectores no se anclan a un contenedor porque estos elementos se
 * mueven entre la barra lateral, el drawer y la barra de mobile.
 */
.bapf_sfilter .bapf_head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --kzn-text );
}

.bapf_sfilter .bapf_head {
	padding-bottom: 6px;
}

/* La flecha del acordeón acompaña el tamaño nuevo */
.bapf_sfilter .bapf_head h3 .bapf_colaps_smb {
	font-size: 12px;
}

/* --------------------------------- chips: alineación del control de quitar */

/*
 * El control de quitar es un pseudo-elemento del enlace, no el <i> del markup
 * (ese está en display:none). BeRocket lo posiciona con `top` fijo y hereda de
 * Blocksy un line-height de 52.8px para un glifo de 32px dentro de una caja de
 * 10x10: por eso desbordaba hacia abajo y a la derecha del chip.
 *
 * Se lo centra verticalmente y se le fija la métrica. Las declaraciones de
 * geometría llevan !important porque las de BeRocket también lo llevan.
 */
/*
 * 0.1.4: se sacaron los ancestros `.bapf_sfa_taxonomy` / `.bapf_sfa_unall` del
 * selector. En desktop coincidían, pero el plugin mueve el widget de chips al
 * drawer de mobile y cualquier cambio de envoltorio en BeRocket dejaba la regla
 * sin aplicar. La clase del propio enlace alcanza y no depende de dónde cuelgue.
 */
.bapf_sfa_grey_rounded .berocket_aapf_widget_selected_area li a.braapf_unselect::before,
.bapf_sfa_grey_rounded .berocket_aapf_widget_selected_area li a.braapf_unselect_all::before,
.berocket_aapf_widget_selected_area li a.braapf_unselect::before,
.berocket_aapf_widget_selected_area li a.braapf_unselect_all::before,
.bapf_sfa_taxonomy li a.braapf_unselect::before,
.bapf_sfa_unall li a.braapf_unselect_all::before,
a.braapf_unselect::before,
a.braapf_unselect_all::before {
	position: absolute !important;
	top: 50% !important;
	right: 12px !important;
	bottom: auto !important;
	left: auto !important;
	width: 12px !important;
	height: 12px !important;
	font-size: 18px !important;
	line-height: 12px !important;
	text-align: center !important;

	/*
	 * El glifo que trae BeRocket es un "+". En la 0.1.1 se intentó rotarlo 45°
	 * para convertirlo en aspa y no se vio el efecto. En vez de insistir con la
	 * rotación, se escribe el aspa directamente: `content` no depende de que la
	 * fuente de iconos de BeRocket haya cargado ni de qué glifo use su versión.
	 * Se fija la familia porque el glifo original puede venir de un icon font,
	 * donde U+00D7 no existe y saldría una caja vacía.
	 */
	content: "\00D7" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-weight: 400 !important;
	transform: translateY( -50% ) !important;
}

/*
 * 0.1.5: se sube la especificidad al contenedor de BeRocket y se pone
 * !important. BeRocket declara `.bapf_sfa_grey_rounded
 * .berocket_aapf_widget_selected_area li a { padding: 3px 30px 3px 15px;
 * position: relative; }` —dos clases más un par de elementos— que le gana a un
 * selector de una sola clase y tacha estas dos líneas en el inspector.
 *
 * Los valores que pone BeRocket son equivalentes a los nuestros, así que el
 * dibujo no cambiaba; pero depender de eso es frágil: cualquier ajuste suyo de
 * padding dejaba el aspa fuera del chip. Ahora no depende de su cascada.
 */
.bapf_sfa_grey_rounded .berocket_aapf_widget_selected_area li a.braapf_unselect,
.bapf_sfa_grey_rounded .berocket_aapf_widget_selected_area li a.braapf_unselect_all,
.berocket_aapf_widget_selected_area li a.braapf_unselect,
.berocket_aapf_widget_selected_area li a.braapf_unselect_all,
.bapf_sfa_taxonomy li a.braapf_unselect,
.bapf_sfa_unall li a.braapf_unselect_all,
a.braapf_unselect,
a.braapf_unselect_all {
	position: relative !important;
	padding-right: 30px !important;
}

/* Grupo con filtros activos */
.kzn-group--active {
	position: relative;
}

.kzn-group--active > .bapf_head,
.kzn-group--active > h3,
.kzn-group--active > .bapf_title {
	font-weight: 700;
	color: var( --kzn-accent );
}

.kzn-group--active::before {
	content: "";
	position: absolute;
	inset-inline-start: -10px;
	top: 2px;
	bottom: 2px;
	width: 2px;
	border-radius: 2px;
	background: var( --kzn-accent );
}

/*
 * Opción seleccionada resaltada.
 * Anclado a la clase de BeRocket y no a un contenedor, para que siga valiendo
 * cuando el panel se muda al drawer.
 */
.bapf_sfilter input[type="checkbox"]:checked + label,
.bapf_sfilter input[type="radio"]:checked + label {
	font-weight: 600;
	color: var( --kzn-accent );
}

/* "Limpiar" como acción secundaria */
.kzn-reset {
	margin-top: 20px;
	padding-top: 12px;
	border-top: 1px solid var( --kzn-border );
}

.kzn-reset button,
.kzn-reset .bapf_button,
.kzn-reset a {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	color: var( --kzn-muted ) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-decoration: underline;
	cursor: pointer;
}

.kzn-reset button:hover,
.kzn-reset .bapf_button:hover,
.kzn-reset a:hover {
	color: var( --kzn-text ) !important;
}

/* Acordeón propio (solo si el filtro no usa el colapso de BeRocket) */
.kzn-accordion__head {
	cursor: pointer;
	user-select: none;
}

.kzn-collapsed > .bapf_body {
	display: none;
}

/* ---------------------------------------------------- barra de mobile */

.kzn-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.kzn-bar[hidden] {
	display: none;
}

.kzn-bar__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var( --kzn-bar-height );
	padding: 0 16px;
	border: 1px solid var( --kzn-border );
	border-radius: var( --kzn-radius );
	background: var( --kzn-surface );
	color: var( --kzn-text );
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.kzn-bar__button--active {
	border-color: var( --kzn-accent );
	color: var( --kzn-accent );
}

.kzn-bar__icon {
	width: 16px;
	height: 10px;
	background:
		linear-gradient( currentColor, currentColor ) 0 0 / 100% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) 0 4px / 70% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) 0 8px / 40% 2px no-repeat;
}

.kzn-bar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --kzn-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.kzn-bar__count[hidden] {
	display: none;
}

/* Chips de filtros aplicados en mobile: es el widget de BeRocket, movido acá */
.kzn-bar__chips {
	flex: 1 1 100%;
}

.kzn-bar__chips:empty {
	display: none;
}

.kzn-bar__chips .berocket_single_filter_widget {
	margin: 0;
}

/* ----------------------------------------------------------- el drawer */

.kzn-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.kzn-drawer-overlay.is-open {
	opacity: 1;
}

.kzn-drawer-overlay[hidden] {
	display: none;
}

.kzn-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: min( 86vw, 360px );
	background: var( --kzn-surface );
	box-shadow: 0 0 40px rgba( 0, 0, 0, 0.25 );
	transform: translateX( -100% );
	transition: transform 0.24s ease;
}

.kzn-drawer.is-open {
	transform: translateX( 0 );
}

.kzn-drawer[hidden] {
	display: none;
}

.kzn-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var( --kzn-border );
}

.kzn-drawer__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.kzn-drawer__close {
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	color: var( --kzn-muted );
}

.kzn-drawer__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
}

/* El panel movido adentro del drawer no debe conservar anchos de la barra lateral */
.kzn-drawer__body > * {
	width: 100% !important;
	max-width: none !important;
	position: static !important;
}

.kzn-drawer__foot {
	padding: 12px 16px;
	border-top: 1px solid var( --kzn-border );
}

.kzn-drawer__apply {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: var( --kzn-radius );
	background: var( --kzn-accent );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* Bloquear el scroll del fondo mientras el drawer está abierto */
html.kzn-drawer-open,
html.kzn-drawer-open body {
	overflow: hidden;
}

/* En mobile, la cabecera del panel se repite en el drawer: se oculta la del panel */
html.kzn-mobile-filters .kzn-drawer__body .kzn-filters__head {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.kzn-drawer,
	.kzn-drawer-overlay {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Tarjeta de producto (v0.2.0) — línea de stock
 *
 * La dibuja la capa `Availability` de Blocksy; el plugin solo le cambia el
 * texto. Los estilos van acá y no en una hoja nueva porque esta ya se carga
 * exactamente en las páginas de archivo: cero peticiones extra.
 *
 * COPIA en assets/kaizen-tarjetas.css (la hoja que se carga en la portada,
 * donde esta no se carga). Si se cambia una regla acá, cambiarla allá también.
 * ------------------------------------------------------------------ */

.kzn-stock {
	margin: 2px 0 8px !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.kzn-stock--ok {
	color: var( --kzn-muted, #6b7280 );
}

/* Aviso de pocas unidades: umbral en kzn_b2b_stock_umbral(), hoy 10. */
.kzn-stock--bajo {
	color: #b45309;
	font-weight: 600;
}

/*
 * Sin stock: bien visible (v0.2.1). Hasta la 0.2.0 se mostraba apagado a
 * propósito; en la prueba de la portada se pidió lo contrario: que se vea
 * claro que no hay. Rojo #b42318 sobre blanco = contraste 6,5:1.
 */
.kzn-stock--cero {
	color: #b42318;
	font-weight: 600;
}

/* Gestión parcial: es un piso, no un total. Se muestra apagado a propósito. */
.kzn-stock--parcial {
	color: #9ca3af;
	font-weight: 400;
}

/* Mobile: la tarjeta es la mitad de ancha, el texto se achica con ella. */
@media ( max-width: 767px ) {

	.kzn-stock {
		margin-bottom: 6px !important;
		font-size: 12px;
	}
}