/* ==========================================================================
   ConToner Filtros
   Prioridad de diseño: que se lean los nombres de categoría. Nada de
   truncar con puntos suspensivos — las etiquetas envuelven a varias líneas.
   ========================================================================== */

.ct-root {
	--ct-accent: #2ec4b6;
	--ct-accent-dark: #1a9e92;
	--ct-accent-soft: #e8f7f5;
	--ct-ink: #1b2733;
	--ct-muted: #78848f;
	--ct-line: #e6eaee;
	--ct-radius: 10px;

	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	color: var(--ct-ink);
	font-size: 14px;
	line-height: 1.45;
}

.ct-root--panel { display: block; }

.ct-root *,
.ct-root *::before,
.ct-root *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Reset defensivo.
   Avanam estiliza `button` globalmente (fondo, padding, radio), lo que pintaba
   los chevrons del árbol como bloques turquesa. Se neutraliza aquí y cada
   componente vuelve a pedir lo que necesita más abajo, también con !important
   para no depender del orden en que el tema cargue sus hojas.
   -------------------------------------------------------------------------- */

.ct-root button,
.ct-root input,
.ct-root select {
	font-family: inherit !important;
	font-size: inherit;
	line-height: inherit !important;
	color: inherit;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0;
	text-align: left;
}

.ct-root button { cursor: pointer; }
.ct-root button:hover { background: none; }

.ct-root :focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 1px;
	border-radius: 3px;
}

.ct-warn {
	background: #fff8e5;
	border: 1px solid #f0d38a;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13.5px;
}

/* --- Panel ---------------------------------------------------------------- */

.ct-panel {
	background: #fff;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-radius);
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding-bottom: 6px;
}

.ct-panel::-webkit-scrollbar { width: 7px; }
.ct-panel::-webkit-scrollbar-thumb { background: #dbe2e8; border-radius: 4px; }

.ct-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px 8px;
}

.ct-panel__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
}

.ct-panel__close {
	display: none;
	font-size: 24px !important;
	color: var(--ct-muted);
	padding: 0 4px !important;
}

/* --- Chips ---------------------------------------------------------------- */

.ct-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 12px 10px;
	border-bottom: 1px solid var(--ct-line);
}

.ct-chips[hidden] { display: none; }

.ct-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--ct-accent-soft) !important;
	color: var(--ct-accent-dark);
	border-radius: 5px !important;
	padding: 4px 7px !important;
	font-size: 12px;
	font-weight: 600;
	max-width: 100%;
}

.ct-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-chip:hover { background: #d6f0ec !important; }
.ct-chip svg { flex: none; opacity: .6; }

.ct-chip--clear {
	background: none !important;
	color: var(--ct-muted);
	text-decoration: underline !important;
	font-weight: 500;
}

.ct-chip--clear:hover { color: var(--ct-ink); background: #f2f5f7 !important; }

/* --- Sección de faceta ---------------------------------------------------- */

.ct-facet { border-bottom: 1px solid var(--ct-line); }
.ct-facet:last-child { border-bottom: 0; }

.ct-facet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100% !important;
	padding: 11px 14px !important;
	font-size: 13px;
	font-weight: 700;
	color: var(--ct-ink);
}

.ct-facet__head:hover { color: var(--ct-accent-dark); }

.ct-facet__caret {
	flex: none;
	color: #aab4bd;
	transition: transform .18s ease;
}

.ct-facet__head[aria-expanded="false"] .ct-facet__caret { transform: rotate(-90deg); }
.ct-facet__head[aria-expanded="false"] + .ct-facet__body { display: none; }

.ct-facet__body { padding: 0 12px 12px; }
.ct-facet--inline { padding: 10px 14px; }

/* --- Buscador ------------------------------------------------------------- */

.ct-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f6f8fa !important;
	border: 1px solid var(--ct-line) !important;
	border-radius: 7px !important;
	padding: 6px 9px !important;
	margin-bottom: 8px;
	color: var(--ct-muted);
}

.ct-search:focus-within { border-color: var(--ct-accent) !important; background: #fff !important; }
.ct-search svg { flex: none; }

.ct-search input {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--ct-ink) !important;
	outline: none;
	background: none !important;
}

/* El tema pinta los placeholder en amarillo de marca, que sobre fondo claro
   es prácticamente ilegible. */
.ct-root input::placeholder {
	color: #8a95a0 !important;
	opacity: 1 !important;
}

.ct-root input::-webkit-input-placeholder { color: #8a95a0 !important; opacity: 1 !important; }
.ct-root input::-moz-placeholder { color: #8a95a0 !important; opacity: 1 !important; }

/* --- Listas y opciones ---------------------------------------------------- */

.ct-list,
.ct-tree,
.ct-tree__children {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ct-tree__children {
	padding-left: 13px !important;
	border-left: 1px solid #eef1f4;
	margin-left: 8px !important;
}

.ct-list li,
.ct-tree__item { margin: 0 !important; }

.ct-list li[hidden],
.ct-tree__item[hidden] { display: none; }

.ct-opt {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding: 4px 5px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 13px;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.ct-opt:hover { background: #f6f8fa; }

.ct-opt input {
	position: absolute;
	opacity: 0;
	width: 0 !important;
	height: 0 !important;
}

.ct-opt__box {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	border: 1.5px solid #c2cbd3;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: background .13s, border-color .13s;
}

.ct-opt__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 3.5px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .13s ease;
}

.ct-opt input:checked + .ct-opt__box {
	background: var(--ct-accent);
	border-color: var(--ct-accent);
}

.ct-opt input:checked + .ct-opt__box::after { transform: rotate(45deg) scale(1); }

.ct-opt input:focus-visible + .ct-opt__box {
	outline: 2px solid var(--ct-accent);
	outline-offset: 1px;
}

/* El punto clave del rediseño: la etiqueta envuelve en varias líneas en vez
   de recortarse. Con nombres como "Papelería y Material de oficina" en una
   columna estrecha, truncar hacía el filtro inservible. */
.ct-opt__label {
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
	line-height: 1.35;
}

.ct-opt input:checked ~ .ct-opt__label {
	font-weight: 650;
	color: var(--ct-accent-dark);
}

.ct-opt__count {
	flex: none;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: #9aa5ae;
	margin-top: 2px;
	padding-left: 2px;
}

/* --- Árbol ---------------------------------------------------------------- */

.ct-tree__row {
	display: flex;
	align-items: flex-start;
	gap: 1px;
}

.ct-tree__expand {
	flex: none;
	width: 18px !important;
	height: 22px;
	display: grid;
	place-items: center;
	color: #a7b2bb;
	border-radius: 4px !important;
	transition: transform .16s ease, color .12s;
}

.ct-tree__expand:hover { color: var(--ct-ink); background: #eef2f5 !important; }
.ct-tree__expand[aria-expanded="true"] { transform: rotate(90deg); }
.ct-tree__expand.is-busy { opacity: .45; }

.ct-tree__spacer { flex: none; width: 18px; }

/* En táctil el chevron se ensancha: 18px es demasiado pequeño para el dedo
   y es justo el control que hace falta para llegar a las subcategorías. */
@media (hover: none) {
	.ct-tree__expand { width: 30px !important; height: 30px; }
	.ct-tree__spacer { width: 30px; }
	.ct-opt { padding-top: 7px; padding-bottom: 7px; }
}

.ct-more {
	color: var(--ct-accent-dark);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 5px 0 !important;
}

.ct-more:hover { text-decoration: underline !important; }

/* --- Colores -------------------------------------------------------------- */

.ct-swatches { display: flex; flex-direction: column; gap: 1px; }

.ct-swatch {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 5px !important;
	padding: 5px !important;
	font-size: 13px;
	color: var(--ct-ink);
	width: 100% !important;
}

.ct-swatch:hover { background: #f6f8fa !important; }

.ct-swatch.is-on {
	background: var(--ct-accent-soft) !important;
	font-weight: 650;
}

.ct-swatch__dot {
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .15);
}

.ct-swatch__name {
	flex: 1;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.3;
}

.ct-swatch__count {
	flex: none;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: #9aa5ae;
}

/* --- Interruptor ---------------------------------------------------------- */

.ct-switch {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: 13px;
	margin: 0;
}

.ct-switch input { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; }

.ct-switch__track {
	flex: none;
	width: 34px;
	height: 20px;
	background: #d7dee4;
	border-radius: 999px;
	position: relative;
	transition: background .18s;
}

.ct-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
	transition: transform .18s cubic-bezier(.3, 1.3, .5, 1);
}

.ct-switch input:checked + .ct-switch__track { background: var(--ct-accent); }
.ct-switch input:checked + .ct-switch__track .ct-switch__thumb { transform: translateX(14px); }
.ct-switch input:focus-visible + .ct-switch__track { outline: 2px solid var(--ct-accent); outline-offset: 2px; }

/* --- Precio --------------------------------------------------------------- */

.ct-range__track {
	position: relative;
	height: 20px;
	margin: 2px 8px 8px;
}

.ct-range__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	height: 3px;
	background: #e4e9ed;
	border-radius: 2px;
}

.ct-range__fill {
	position: absolute;
	top: 8px;
	height: 3px;
	background: var(--ct-accent);
	border-radius: 2px;
}

/* Los dos inputs se solapan sobre la misma pista; sólo los pulgares
   reciben eventos, si no el de arriba bloquearía al de abajo. */
.ct-range__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 20px !important;
	margin: 0;
	padding: 0 !important;
	background: none !important;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.ct-range__input::-webkit-slider-runnable-track { background: none; height: 20px; }

.ct-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	margin-top: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ct-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	cursor: grab;
}

.ct-range__input::-moz-range-track { background: none; height: 20px; }

.ct-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ct-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	cursor: grab;
}

.ct-range__fields {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--ct-muted);
}

.ct-range__fields label {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.ct-range__fields input {
	width: 100% !important;
	min-width: 0;
	border: 1px solid var(--ct-line) !important;
	border-radius: 6px !important;
	padding: 5px 7px !important;
	font-size: 12.5px;
	color: var(--ct-ink);
	background: #fff !important;
	-moz-appearance: textfield;
}

.ct-range__fields input::-webkit-outer-spin-button,
.ct-range__fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ct-range__fields input:focus { border-color: var(--ct-accent) !important; outline: none; }
.ct-range__sep { flex: none; }

/* --- Barra superior ------------------------------------------------------- */

.ct-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 13px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ct-line);
}

.ct-count { margin: 0; font-size: 13.5px; color: var(--ct-muted); }

.ct-count strong {
	color: var(--ct-ink);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ct-toolbar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-search--inline { margin-bottom: 0; min-width: 230px; }

.ct-select select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378848f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/14px !important;
	border: 1px solid var(--ct-line) !important;
	border-radius: 7px !important;
	padding: 7px 30px 7px 11px !important;
	font-size: 13px;
	color: var(--ct-ink);
	cursor: pointer;
	max-width: 100%;
}

.ct-select select:focus { border-color: var(--ct-accent) !important; outline: none; }
.ct-select { margin: 0; }

/* --- Rejilla -------------------------------------------------------------- */

.ct-grid.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ct-grid.products::before,
.ct-grid.products::after { display: none !important; }

.ct-grid.products > li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* --- Carga ---------------------------------------------------------------- */

.ct-main { position: relative; min-height: 260px; }
.ct-main.is-loading { pointer-events: none; }

.ct-main.is-loading .ct-grid,
.ct-main.is-loading .ct-pager {
	opacity: .4;
	transition: opacity .18s;
}

.ct-panel.is-loading { opacity: .65; pointer-events: none; }

/* --- Vacío ---------------------------------------------------------------- */

.ct-empty { text-align: center; padding: 54px 20px; color: var(--ct-muted); }
.ct-empty svg { color: #ccd4da; margin-bottom: 10px; }
.ct-empty h3 { margin: 0 0 5px; font-size: 17px; color: var(--ct-ink); }
.ct-empty p { margin: 0 0 16px; font-size: 13.5px; }

.ct-btn {
	background: var(--ct-accent) !important;
	color: #fff !important;
	border-radius: 7px !important;
	padding: 9px 18px !important;
	font-size: 13.5px;
	font-weight: 600;
}

.ct-btn:hover { background: var(--ct-accent-dark) !important; }

/* --- Paginación ----------------------------------------------------------- */

.ct-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--ct-line);
}

.ct-pager__btn {
	min-width: 36px !important;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0 10px !important;
	background: #fff !important;
	border: 1px solid var(--ct-line) !important;
	border-radius: 7px !important;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ct-ink);
}

.ct-pager__btn:hover:not(:disabled):not(.is-current) {
	border-color: var(--ct-accent) !important;
	color: var(--ct-accent-dark);
}

.ct-pager__btn.is-current {
	background: var(--ct-accent) !important;
	border-color: var(--ct-accent) !important;
	color: #fff !important;
	cursor: default;
}

.ct-pager__btn:disabled { opacity: .38; cursor: not-allowed; }
.ct-pager__gap { color: var(--ct-muted); padding: 0 2px; }

/* --- Móvil ---------------------------------------------------------------- */

/* El disparador propio sólo tiene sentido en modo completo, donde el filtro
   no vive dentro del cajón del tema. */
.ct-mobile-open { display: none; }

.ct-mobile-open__count {
	background: var(--ct-accent);
	color: #fff;
	border-radius: 999px;
	min-width: 19px;
	height: 19px;
	display: grid;
	place-items: center;
	font-size: 11px;
	padding: 0 5px;
}

.ct-mobile-open__count[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Móvil.

   En modo panel el filtro es un widget dentro de <aside id="secondary">, el
   cajón lateral del tema, que ya aporta apertura, cierre y capa oscura. Aquí
   sólo se neutraliza el sticky del escritorio para que dentro del cajón fluya
   con normalidad. Nada de position:fixed ni transform propios: superponer un
   segundo cajón al del tema fue exactamente lo que dejó la capa oscura
   colgada y el panel abriéndose vacío.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Portada: encabezado y escaparate de producto.
   -------------------------------------------------------------------------- */

.ct-home-intro {
	max-width: 780px;
	margin: 0 auto 4px;
	padding: 26px 20px 4px;
	text-align: center;
}

.ct-home-intro__title {
	margin: 0 0 10px !important;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -.015em;
	color: #1b2733;
}

.ct-home-intro__sub {
	margin: 0 !important;
	font-size: clamp(14px, 1.5vw, 16.5px);
	line-height: 1.5;
	color: #67737f;
}

.ct-showcase {
	--ct-accent: #2ec4b6;
	--ct-accent-dark: #1a9e92;
	--ct-line: #e6eaee;
	max-width: 1280px;
	margin: 34px auto 10px;
	padding: 0 20px;
}

.ct-showcase__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ct-line);
}

.ct-showcase__title {
	margin: 0 !important;
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 700;
	color: #1b2733;
}

.ct-showcase__all {
	font-size: 14px;
	font-weight: 600;
	color: var(--ct-accent-dark);
	text-decoration: none;
	white-space: nowrap;
}

.ct-showcase__all:hover { text-decoration: underline; }

.ct-showcase .ct-grid.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ct-showcase .ct-grid.products::before,
.ct-showcase .ct-grid.products::after { display: none !important; }

.ct-showcase .ct-grid.products > li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

@media (max-width: 600px) {
	.ct-showcase .ct-grid.products { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
	.ct-showcase { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   Categoría: navegación, no casilla.

   Al ser de selección única, una casilla de verificación miente sobre lo que
   hace (sugiere "marca varias"). Se oculta y la selección se comunica con
   fondo y color, como en una lista de navegación.
   -------------------------------------------------------------------------- */

[data-ct-facet="cat"] .ct-opt__box { display: none !important; }

[data-ct-facet="cat"] .ct-opt {
	padding-left: 9px;
	border-radius: 6px;
}

[data-ct-facet="cat"] .ct-opt:has(input:checked) {
	background: var(--ct-accent-soft);
	box-shadow: inset 2px 0 0 var(--ct-accent);
}

/* Reserva para navegadores sin :has() — el texto en acento ya lo indica. */
[data-ct-facet="cat"] .ct-opt input:checked ~ .ct-opt__label {
	color: var(--ct-accent-dark);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Cabecera de los cajones del tema.
   La X quedaba arriba del todo y se perdía al bajar por las 1.000+ categorías.
   -------------------------------------------------------------------------- */

#secondary .drawer-header,
#widget-drawer .drawer-header,
#secondary .sidebar-header,
#secondary .widget-toggle-close,
#secondary .side-menu-toggle-close {
	position: sticky !important;
	top: 0;
	z-index: 10;
	background: #fff;
}

@media (max-width: 900px) {
	.ct-root { grid-template-columns: 1fr; gap: 0; }

	/*
	 * Plano y estático dentro del cajón del tema.
	 *
	 * Es la regla que arregla el "no se ven los filtros en móvil": el panel
	 * llevaba position:fixed + translateX(-100%) propios, así que era un
	 * cajón dentro del cajón #secondary y quedaba fuera de pantalla incluso
	 * con el del tema abierto. Los !important son necesarios porque Avanam
	 * impone sus propias reglas a los hijos de la barra lateral.
	 */
	.ct-root--panel,
	.ct-root--panel .ct-panel {
		position: static !important;
		transform: none !important;
		inset: auto !important;
		width: auto !important;
		max-height: none !important;
		overflow: visible !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.ct-root--panel .ct-panel__head { padding-top: 4px; }
	.ct-root--panel .ct-panel__close { display: none; }

	.ct-search--inline { min-width: 0; flex: 1; }
	.ct-toolbar__right { width: 100%; }
	.ct-grid.products { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ct-root *,
	.ct-root *::before,
	.ct-root *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}