/*
  Quicial — listados (busqueda, categoria de producto, linea, marca).
  ⚠️ Sin artboard: compuesto solo con piezas que ya existen en el design system
  —cabecera oscura, tarjeta de producto y lista de lineas del mega-menu—. No
  introduce color, tipografia ni componentes nuevos. Cuando lleguen los
  artboards de listado, se sustituye.
*/

/* La barra del titol fa exactament l'alt de la fletxa, 48px, tant si el titol
   ocupa una linia com dues: es el titol el que hi ha de cabre, no la barra la
   que ha de creixer. Dues linies a 12px amb interlineat 1.25 fan 30px, i amb
   els dos coixins de 9 surten els 48 justos. */
.grid-4 .catcard .catbar{min-height:48px}
.grid-4 .catcard .catbar-t{padding-top:9px;padding-bottom:9px;line-height:1.25}

/* Targeta de linia a les quatre pagines de categoria.
   A la portada la targeta es una foto a sang amb degradat i el titol a sobre:
   alli la foto es d'ambient i aguanta el retall. Aqui la foto es el producte,
   i retallar-lo li talla els extrems —la cinta sierra sortia sense peus i el
   cuchillo circular sense mans—. Per aixo aqui la imatge va sencera dins d'un
   quadrat, el que sobra queda en blanc i el degradat desapareix: sense foto
   fosca a sota no te res a enfosquir. La portada no es toca. */
.grid-4 .catcard{aspect-ratio:auto;background:#fff;padding-top:48px}
/* El filet envolta tambe la imatge, pero sense repetir-se a la costura: la
   barra del titol ja porta el seu, aixi que aqui no hi ha vora de dalt. */
.grid-4 .catcard .catimg{position:relative;inset:auto;aspect-ratio:1/1;background:#fff;border:1px solid rgba(82,63,52,.07);border-top:0}
.grid-4 .catcard .catimg img{object-fit:contain;padding:18px;box-sizing:border-box}
.grid-4 .catcard .catgrad{display:none}
/* El text que anava damunt del degradat era blanc: sobre fons blanc no es
   llegiria. El subtitol de la linia segueix al mega-menu, que es on el diseny
   el posa. */
.grid-4 .catcard .cattitle{display:none}

/* Logotip a la capcalera fosca de la marca, al lloc de l'avantitol. */
.marcahero-logo{display:flex;align-items:center;margin-bottom:24px}
/* El mes ample es el de Kentmaster, gairebe 10 d'ample per 1 d'alt: aquest
   maxim el frena un 3%, que no es nota, i deixa creixer la resta. */
.marcahero-logo img{width:auto;max-width:640px;display:block}
/* Les marques que nomes tenen versio fosca s'aclareixen: sobre el fons fosc
   del hero no es llegirien. */
.logo-blanco{filter:brightness(0) invert(1)}

.marca-logo{display:flex;align-items:center;margin-bottom:26px}
.marca-logo img{max-width:220px;object-fit:contain}

/* Error 404: la mateixa llista d'enllacos del mega-menu, en dues columnes. */
.error-enlaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.error-enlaces .qsublink{padding:14px 0;border-bottom:1px solid var(--hair)}

/* Paginacion de WordPress con el lenguaje del design system. */
.pagination{margin-top:56px;padding-top:28px;border-top:1px solid var(--hair)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--hair);background:#fff;color:#523F34;font-weight:600;font-size:14px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pagination .page-numbers:hover{border-color:#E23230;color:#E23230}
.pagination .page-numbers.current{background:#523F34;border-color:#523F34;color:#fff}
.pagination .page-numbers.dots{border-color:transparent}


/* ---------- Listado general con filtros (/productos/) ----------
   Diseno 1a: columna de filtros de 288 px y resultados a 48 px. Las tarjetas
   son las de siempre, a tres por fila. */
.lst{display:grid;grid-template-columns:288px minmax(0,1fr);gap:48px;align-items:start}
/* La columna no tiene barra propia: crece lo que haga falta. Con JavaScript
   se fija, y la altura a la que se fija (--lst-top) la calcula el JS: si cabe
   en la ventana, bajo la cabecera, como el indice de Sectores; si no, sigue
   al scroll de la pagina hasta que se ve su final y ahi se queda. Sin
   JavaScript no se fija: si fuera mas alta que la ventana, su final seria
   inalcanzable. */
.lst-col{grid-column:1;display:flex;flex-direction:column}
.lst-col > *{flex-shrink:0}
@media (min-width: 1280px) {
  .lst.is-js .lst-col{position:sticky;position:-webkit-sticky;top:var(--lst-top, calc(74px + 24px))}
}
.lst-res{grid-column:2;min-width:0}
.lst-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* La tarjeta y los botones traen su display: sin esto, [hidden] no los
   esconderia. */
.lst-grid > [hidden],
.lst-activos[hidden],
.lst-limpiar-n[hidden],
.lst-panel-pie [hidden]{display:none}

/* Cabecera de la columna: «Filtros» y, con filtros activos, «Limpiar (n)».
   Mide lo mismo que la cabecera de los resultados (.lst-barra) y los textos
   se apoyan abajo con interlineado 1: asi los dos filetes caen a la misma
   altura y «Filtros» y «N productos» comparten linea, aparezca o no
   «Limpiar». */
.lst-panel-cab,
.lst-barra{box-sizing:border-box;height:33px;padding-bottom:16px}
.lst-panel-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid #211D1A}
.lst-titulo,
.lst-limpiar-n,
.lst-n{line-height:1}
.lst-titulo{margin:0}
.lst-limpiar-n{font-size:13px;font-weight:600;color:#E23230}
.lst-limpiar-n:hover{color:#523F34}
.lst-cerrar,
.lst-panel-pie{display:none}

/* Filtros activos: en escritorio no se pintan. Dentro de la columna
   empujaban la lista hacia abajo a cada filtro, y lo marcado ya se ve en las
   casillas y en «Limpiar (n)». Los chips son de la barra de resultados del
   movil, donde van en una fila que se desliza. */
.lst-activos--barra{display:none}

/* Grupos: titulo y, a la derecha, cuantas opciones hay o «n de N». Entre
   grupos, el filete fuerte. */
.lst-gh{margin:0}
.lst-gbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:20px 0 12px;
  background:none;border:0;color:#211D1A;font-family:inherit;text-align:left;cursor:pointer}
.lst-gt{font-size:17px;font-weight:600;letter-spacing:-.01em}
.lst-gn{font-size:13px;color:#523F34;font-variant-numeric:tabular-nums}
.lst-grupo + .lst-grupo{margin-top:24px;border-top:1px solid #211D1A}

/* Categoria: nombre en caja normal, recuento a la derecha y la flecha. */
.lst-cat{border-top:1px solid var(--hair)}
.lst-catfila{display:flex;align-items:center;gap:4px}
.lst-catfila .lst-op{flex:1 1 auto;min-width:0;padding:13px 0}
.lst-catfila .lst-op-n{font-size:15px;font-weight:600}

/* Lineas de la categoria, colgadas de un filete vertical. */
.lst-ops{list-style:none;margin:0;padding:0}
.lst-lineas{margin:0 0 12px 8px;padding-left:20px;border-left:1px solid var(--hair)}
.lst-lineas .lst-op{gap:10px;padding:7px 0;color:#523F34}
.lst-lineas .lst-op:hover{color:#211D1A}
.lst-lineas .lst-op-n{font-size:14px;line-height:1.35}
.lst-lineas .lst-op-c{font-size:12.5px;opacity:.75}
.lst-lineas .lst-box{width:15px;height:15px;border-color:rgba(82,63,52,.35)}
.lst-lineas .lst-box svg{width:11px;height:11px;stroke-width:3.6}

/* Sectores y marcas. */
.lst-cuerpo > .lst-ops > li > .lst-op{padding:12px 0;border-top:1px solid var(--hair)}
.lst-cuerpo > .lst-ops .lst-op-n{font-size:15px;font-weight:500}

/* Plegado: solo con JavaScript. Sin el, todo queda abierto y las flechas,
   que no harian nada, no se pintan. */
.lst-js [data-abierto="false"] > .lst-cuerpo{display:none}
html:not(.lst-js) .lst-toggle{display:none}
.lst-aplicar{padding-top:20px}
.lst-js .lst-aplicar{display:none}

/* Resultados: el numero de productos sobre la rejilla. */
.lst-cab{margin-bottom:24px}
.lst-barra{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--hair)}
.lst-n{color:#523F34}
.lst-abrir{display:none}
.lst-limpiar{margin-top:0}
.lst-vacio{margin:0 0 24px}