/**
 * CN Shop Filters — sidebar de filtros de la tienda (Casa Natalia).
 *
 * Tokens del diseño Figma "Casa Natalia - Research" Propuesta v.1.1
 * (nodos 6353-10972 desktop / 6353-21726 mobile).
 * Scope: widgets de sidebar-shop (.cn-shop-sidebar). Fuente: Roboto ya cargada
 * por Basel. Ver openspec/changes/shop-sidebar-category-tree (D8).
 */

.cn-shop-sidebar {
	--cn-teal: #337c84;
	--cn-teal-soft: #f1f6f6;
	--cn-navy: #283641;
	--cn-gray-100: #f3f4f6;
	--cn-gray-200: #e5e7eb;
	--cn-gray-300: #d1d5db;
	--cn-gray-500: #6b7280;
	--cn-gray-600: #4b5563;
	--cn-gray-800: #1f2937;
	--cn-section-bg: #f0f1f2;
	--cn-row-h: 32px;
	--cn-head-h: 40px;
	--cn-checkbox: 18px;
}

/* Basel agrega 20px de margen a cada widget dentro del drawer. El frame de
 * Figma mide 300px completos y aplica el padding de contenido internamente. */
.sidebar-container .cn-shop-sidebar {
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	border-bottom: 0 !important;
}

.sidebar-container .widget-area {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.sidebar-container > .basel-scroll {
	top: 48px !important;
}

/* El diseño reserva el scrollbar del drawer dentro de los 300px: con
 * scrollbar clásico (10px) el contenido ocupa 280px efectivos
 * (300 − 10 scrollbar − 10 padding). Sobre scrollbars overlay queda el
 * mismo aire de 10px. Antes el padding fijo de 20px dejaba 270px.
 * Ver openspec/changes/shop-product-listing-redesign (tarea 6.1). */
.sidebar-container .basel-sidebar-content {
	padding-right: 10px !important;
	scrollbar-color: var(--cn-teal, #337c84) transparent;
	scrollbar-width: thin;
}

/* El widget de filtros activos no renderiza nada sin filtros:
   ocultar el wrapper vacío que deja dynamic_sidebar. */
.cn-shop-sidebar:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Secciones acordeón (header 40px, fondo gris, bordes sup/inf)
 * ------------------------------------------------------------------------- */

.cn-shop-sidebar .cn-filter-head {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--cn-head-h);
	padding: 0 16px;
	background-color: var(--cn-section-bg);
	border-top: 1px solid var(--cn-gray-200);
	border-bottom: 1px solid var(--cn-gray-200);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.cn-shop-sidebar .cn-filter-head:focus-visible {
	outline: 2px solid var(--cn-teal);
	outline-offset: -2px;
}

.cn-shop-sidebar .cn-filter-title {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--cn-gray-800);
}

.cn-shop-sidebar .cn-filter-count {
	font-size: 14px;
	line-height: 20px;
	color: var(--cn-gray-800);
	font-weight: 700;
	letter-spacing: normal;
}

.cn-shop-sidebar .cn-filter-toggle {
	flex: 0 0 auto;
	position: relative;
	width: 18px;
	height: 18px;
	color: var(--cn-gray-500);
}

.cn-shop-sidebar .cn-filter-toggle::before,
.cn-shop-sidebar .cn-filter-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.cn-shop-sidebar .cn-filter-toggle::before {
	width: 12px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.cn-shop-sidebar .cn-filter-toggle::after {
	width: 2px;
	height: 12px;
	transform: translate(-50%, -50%);
}

/* Abierto: queda solo el menos. */
.cn-shop-sidebar .is-open > .cn-filter-head .cn-filter-toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Cuerpo de sección: colapsado solo cuando hay JS (fallback sin JS visible). */
.cn-js .cn-shop-sidebar .cn-filter-body {
	display: none;
}

.cn-js .cn-shop-sidebar .is-open > .cn-filter-body {
	display: block;
}

/* Los filtros de atributos necesitan el mismo aire superior que separa sus
 * opciones entre sí, y el aire horizontal del diseño (16px, alineado con
 * las filas del árbol y los headers de sección). No aplicarlo al árbol de
 * categorías ni a los chips, que gestionan su propio padding. */
.cn-shop-sidebar:not(.cn-widget-category-tree):not(.cn-widget-active-filters) .cn-filter-body {
	padding-top: 16px;
	padding-left: 16px;
	padding-right: 16px;
}

/* Las opciones de los acordeones de atributos comparten el padding horizontal
 * del header. El árbol de categorías y los chips tienen su propio ritmo. */
.cn-shop-sidebar:not(.cn-widget-category-tree):not(.cn-widget-active-filters) .cn-filter-body .basel-scroll-content > li {
	box-sizing: border-box;
	padding-right: 16px;
	padding-left: 16px;
}

/* El filtro de color usa swatches circulares, sin alterar otros posibles
 * widgets que Basel pueda renderizar como swatches. */
.cn-shop-sidebar.basel-woocommerce-layered-nav:has(a[href*="filter_color="]) .filter-swatch > span {
	width: 25px;
	height: 25px;
	border-radius: 50% !important;
}

/* Basel da margen/borde a los widgets de la sidebar: los sections propios
 * llevan el ritmo visual del diseño. */
.cn-shop-sidebar {
	margin-bottom: 0;
}

/* Sin JS el título original del widget queda visible (fallback no-JS);
 * con JS lo reemplaza cn-filter-head. */
.cn-js .cn-shop-sidebar .widget-title {
	display: none;
}/* ---------------------------------------------------------------------------
 * Árbol rubro→categoría
 * ------------------------------------------------------------------------- */

.cn-shop-sidebar .cn-category-tree {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-shop-sidebar .cn-category-tree li {
	margin-bottom: 0;
}

.cn-shop-sidebar .cn-category-tree li::before {
	content: none;
}

.cn-shop-sidebar .cn-category-tree .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sin JS el árbol queda totalmente navegable (fallback SEO).
 * Con JS, todas las ramas empiezan visibles y el acordeón propio puede
 * contraerlas de forma independiente. */
.cn-js .cn-shop-sidebar .cn-category-tree .children {
	display: block !important;
}

.cn-js .cn-shop-sidebar .cn-category-tree li.is-collapsed > ul.children {
	display: none !important;
}

.cn-shop-sidebar .cn-tree-row {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: var(--cn-row-h);
	min-height: var(--cn-row-h);
	padding: 6px 14px;
	text-decoration: none;
	color: var(--cn-gray-600);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

.cn-shop-sidebar .cat-parent > .cn-tree-row {
	padding-right: 34px; /* espacio para el chevron */
	padding-left: 16px;
}

.cn-shop-sidebar .cn-category-tree .children .cn-tree-row {
	gap: 8px;
	padding-left: 44px;
	font-size: 13px;
	line-height: 15px;
}

.cn-shop-sidebar .cn-category-tree .cn-tree-row {
	border-bottom: 1px solid var(--cn-gray-100);
}

.cn-shop-sidebar .cn-tree-row:hover .cn-tree-label,
.cn-shop-sidebar .cn-tree-row:focus-visible .cn-tree-label {
	color: var(--cn-teal);
}

.cn-shop-sidebar .cn-tree-row:focus-visible {
	outline: 2px solid var(--cn-teal);
	outline-offset: -2px;
}

.cn-shop-sidebar li.is-checked > .cn-tree-row,
.cn-shop-sidebar li.is-checked > .cn-tree-row .cn-tree-label,
.cn-shop-sidebar li.is-indeterminate > .cn-tree-row,
.cn-shop-sidebar li.is-indeterminate > .cn-tree-row .cn-tree-label {
	color: var(--cn-teal);
	font-weight: 500;
}

.cn-shop-sidebar li.is-checked.cat-parent > .cn-tree-row,
.cn-shop-sidebar li.is-indeterminate.cat-parent > .cn-tree-row {
	background-color: var(--cn-teal-soft);
}

/* Fila estática del grupo "Otras". */
.cn-shop-sidebar .cn-tree-row--static {
	color: var(--cn-gray-500);
	cursor: default;
}

/* Checkbox visual (18px, radio 4). */
.cn-shop-sidebar .cn-checkbox {
	flex: 0 0 auto;
	position: relative;
	width: var(--cn-checkbox);
	height: var(--cn-checkbox);
	border: 1.5px solid var(--cn-gray-300);
	border-radius: 4px;
	background: #fff;
}

.cn-shop-sidebar li.is-checked > .cn-tree-row .cn-checkbox {
	background: var(--cn-teal);
	border-color: var(--cn-teal);
}

.cn-shop-sidebar li.is-checked > .cn-tree-row .cn-checkbox::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cn-shop-sidebar li.is-indeterminate > .cn-tree-row .cn-checkbox {
	background: var(--cn-teal);
	border-color: var(--cn-teal);
}

.cn-shop-sidebar li.is-indeterminate > .cn-tree-row .cn-checkbox::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	top: 50%;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
}

/* Chevron del acordeón de Basel re-estilizado (derecha). */
.cn-shop-sidebar .cn-category-tree .basel-cats-toggle {
	display: block;
	left: auto;
	right: 8px;
	top: 4px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	color: var(--cn-gray-500);
	font-size: 14px;
	transform: none !important;
}

.cn-shop-sidebar .cn-category-tree .basel-cats-toggle::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.cn-shop-sidebar .cn-category-tree .cat-parent.is-collapsed > .basel-cats-toggle::before {
	transform: rotate(135deg);
}

/* is-promo: estilo final pendiente de decisión del equipo (spec 10.1). */

/* ---------------------------------------------------------------------------
 * Chips de filtros activos
 * ------------------------------------------------------------------------- */

.cn-shop-sidebar .cn-active-filters {
	padding: 16px;
	margin-bottom: 0;
}

.cn-shop-sidebar .cn-active-filters .cn-filter-head--static {
	cursor: default;
	min-height: 16px;
	background: none;
	border-top: none;
	border-bottom: 0;
	padding: 0;
}

.cn-shop-sidebar .cn-active-filters .cn-filter-title {
	flex: 1 1 auto;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: 0.24px;
	color: var(--cn-gray-500);
}

.cn-shop-sidebar .cn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.cn-shop-sidebar .cn-chips li {
	display: block;
	margin: 0;
	padding: 0;
}

.cn-shop-sidebar .cn-chips li::before,
.cn-shop-sidebar .cn-chip::before {
	content: none;
}

.cn-shop-sidebar .cn-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 4px 10px;
	background: var(--cn-teal);
	color: #fff;
	border-radius: 9999px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	text-decoration: none;
}

.cn-shop-sidebar .cn-chip:hover,
.cn-shop-sidebar .cn-chip:focus-visible {
	color: #fff;
	opacity: 0.9;
	outline: 2px solid var(--cn-teal);
	outline-offset: 2px;
}

.cn-shop-sidebar .cn-chip::after {
	content: none;
}

.cn-shop-sidebar .cn-chip-x {
	position: relative;
	width: 10px;
	height: 10px;
	font-size: 0;
	line-height: 0;
	opacity: 0.85;
}

.cn-shop-sidebar .cn-chip-x::before,
.cn-shop-sidebar .cn-chip-x::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 10px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.cn-shop-sidebar .cn-chip-x::after {
	transform: rotate(-45deg);
}

.cn-shop-sidebar .cn-clear-all {
	display: block;
	margin-top: 12px;
	color: var(--cn-teal);
	font-size: 12px;
	line-height: 14px;
	font-weight: 700;
	text-decoration: underline;
}

.cn-shop-sidebar .cn-clear-all:hover,
.cn-shop-sidebar .cn-clear-all:focus-visible {
	color: var(--cn-teal);
}

/* ---------------------------------------------------------------------------
 * Drawer mobile (off-canvas de Basel)
 * ------------------------------------------------------------------------- */

.sidebar-container .basel-close-sidebar-btn {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 20px !important;
	background-color: var(--cn-navy, #283641) !important;
}

.cn-drawer-title {
	box-sizing: border-box;
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 500 !important;
	letter-spacing: 0.28px !important;
	padding: 0 !important;
	text-transform: uppercase !important;
	color: #fff !important;
}

.sidebar-container .basel-close-sidebar-btn > span:not(.cn-drawer-title) {
	position: relative;
	display: block;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	padding: 0 !important;
	transform: none;
}

.sidebar-container .basel-close-sidebar-btn > span:not(.cn-drawer-title)::before,
.sidebar-container .basel-close-sidebar-btn > span:not(.cn-drawer-title)::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 2px;
	margin-top: 8px;
	background: #fff;
	border-radius: 2px;
	transform: rotate(45deg);
}

.sidebar-container .basel-close-sidebar-btn > span:not(.cn-drawer-title)::after {
	transform: rotate(-45deg);
}

.sidebar-container .basel-close-sidebar-btn > .cn-drawer-title {
	display: block !important;
	height: 20px !important;
	line-height: 20px !important;
}

.sidebar-container .basel-close-sidebar-btn > .cn-drawer-title::before,
.sidebar-container .basel-close-sidebar-btn > .cn-drawer-title::after {
	content: none !important;
}

@media (max-width: 1024px) {
	.offcanvas-sidebar-mobile .sidebar-container {
		border-radius: 0 10px 10px 0;
	}

	/* El buscador extendido del header tiene un z-index superior al drawer
	 * de Basel y se superpone al árbol. El drawer de filtros debe dominar la
	 * vista mientras está abierto, como en el frame mobile de Figma. */
	.basel-show-hidden-sidebar .search-extended {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	/* En desktop el frame Figma no incluye el header del drawer ni el
	 * scrollbar de 20px del estado mobile. */
	.area-sidebar-shop > .basel-close-sidebar-btn {
		display: none !important;
	}

	.area-sidebar-shop > .basel-scroll {
		top: 0 !important;
	}

	.area-sidebar-shop {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.area-sidebar-shop .basel-sidebar-content {
		width: 300px;
		padding-right: 0 !important;
	}

	.area-sidebar-shop .cn-shop-sidebar {
		width: 300px !important;
	}

	.area-sidebar-shop .cn-active-filters {
		padding-top: 0;
	}
}