/* ==========================================================================
   Listados (archive-product.php, template-all-products.php, search.php):
   solo lo que style.css (§27 Categoría) no cubre. DESIGN §12.1 y §12.7.
   ========================================================================== */

/* Aire antes del pie cuando el listado no va seguido de la guía (/fichas/, buscador, página 2) */
.arch{padding-bottom:var(--section)}
.arch:has(+ .arch-guide){padding-bottom:0}

/* Cabecera .ah ------------------------------------------------------------ */
.ah--solo{grid-template-columns:minmax(0,1fr)}
.ah__t h1{min-width:0;overflow-wrap:anywhere}
.ah__seg{color:var(--muted)}
.ah__d a{white-space:normal}                    /* el título de la guía puede ser largo: parte en líneas, la flecha va pegada */
.ah__d a .ic{display:inline-block;vertical-align:-2px;width:15px;height:15px}
.ah__wh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ah__wh .kicker{color:var(--ink)}
.ah__wh .link{font-size:13px}
.ah__ic{width:32px;height:32px;stroke-width:1.5;color:var(--ink)}
/* Buscador: el formulario ocupa la columna derecha */
.ah--search h1{font-size:42px;line-height:1.02}
.ah--search .hsearch{margin-top:0;max-width:none}

/* Filtros ---------------------------------------------------------------- */
.filters__n b{color:var(--ink);font-weight:600}
.filters__sort{display:inline-flex;align-items:center;gap:8px}
.filters__lbl{cursor:pointer}
/* Orden: el <select> nativo, transparente, cubre el botón (selector del sistema en móvil) */
.sortsel{position:relative}
.sortsel select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.sortsel:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.sortsel:hover{border-color:var(--ink)}
/* Chips de navegación (segmentos hermanos, buscador) con el mismo estado activo */
.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-current] sup{color:var(--on-ink-2)}
.chip:disabled,.chip[aria-disabled="true"]{opacity:.45;cursor:default}
.chip:disabled:hover,.chip[aria-disabled="true"]:hover{border-color:var(--rule-2)}
/* «Todas las fichas»: la fila de categorías va encima, sin filete propio */
.filters--cats{border-bottom:0;padding-bottom:0;margin-bottom:0}
.filters--search{border-bottom:0;padding-bottom:0;margin-bottom:6px}   /* el filete lo pone la cabecera «Fichas» */

/* Rejilla y lista --------------------------------------------------------- */
/* Billboard dentro de la rejilla (tras la fila 2 o al final): la banda llega al borde de la ventana
   con border-image (pintura que no cuenta como desborde) */
.archive-grid>.ad,.arch-list>.ad{grid-column:1/-1;margin:20px 0 0;border:0;background:none;
  border-image:linear-gradient(var(--rule) 0 1px,var(--paper-2) 1px calc(100% - 1px),var(--rule) calc(100% - 1px)) fill 0/0/0 100vmax}
/* Con tarjetas detrás (tras la fila 2), el mismo aire debajo; al final, pegado a la guía como en la maqueta */
.archive-grid>.ad:has(~ :is(.pcard,.pmini,.feat):not([hidden])),.arch-list>.ad:has(~ :is(.pcard,.pmini,.feat):not([hidden])){margin-bottom:20px}
.arch-list{margin-top:-6px}                    /* la primera fila arranca pegada al filete de los filtros */
.arch-list>.pmini:last-of-type{border-bottom:0}
.arch-list>.feat{margin:14px 0}
/* Pieza pagada como fila (vista de lista y buscador) */
/* miniatura del mismo tamaño que la de .pmini (132 en la lista ancha, 88 en el buscador), con marco propio */
.arch-list>.pcard--paid,.plist>.pcard--paid{display:grid;grid-template-columns:144px minmax(0,1fr);grid-template-rows:auto 1fr;margin:12px 0}
.plist>.pcard--paid{grid-template-columns:100px minmax(0,1fr)}
.arch-list>.pcard--paid .paidbar,.plist>.pcard--paid .paidbar{grid-column:1/-1}
.arch-list>.pcard--paid .pcard__media,.plist>.pcard--paid .pcard__media{grid-column:1;align-self:start;margin:12px 0 12px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.arch-list>.pcard--paid .pcard__body,.plist>.pcard--paid .pcard__body{border-top:0;padding:10px 14px 0}
.arch-list>.pcard--paid .pcard__head,.plist>.pcard--paid .pcard__head{min-height:0}
.arch-list>.pcard--paid .pcard__foot,.plist>.pcard--paid .pcard__foot{padding:8px 0 10px}
/* «Ver las N fichas restantes» (/fichas/) */
.arch-more{margin-top:24px;text-align:center}
.arch-more .btn .ic{width:16px;height:16px}
.arch-empty{padding:32px 0 8px;text-align:center;color:var(--ink-2);font-size:var(--fs-ui)}
.arch-empty .btn{margin-top:12px}
.arch-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:28px}
.arch-pager .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:500}
.arch-pager a.page-numbers:hover{border-color:var(--ink)}
.arch-pager .current{background:var(--ink);border-color:var(--ink);color:#fff}

/* Guía de la categoría ---------------------------------------------------- */
.buyguide__more{margin-top:10px;padding:0;border:0;background:none;cursor:pointer}
.buyguide__segs{margin-top:12px;font-size:var(--fs-sm);color:var(--muted)}
.buyguide__segs a{color:var(--blue);font-weight:600}
.buyguide__segs a:hover{text-decoration:underline;text-underline-offset:3px}
.faq p a{color:var(--blue);font-weight:600}
.faq p a:hover{text-decoration:underline;text-underline-offset:3px}

/* Buscador ---------------------------------------------------------------- */
.sres{margin-top:22px}
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.glist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.glist .gcard--row:last-child{border-bottom:1px solid var(--rule)}
.sres--none{margin-top:18px}
.sres__tip{font-size:var(--fs-ui);color:var(--ink-2);margin-bottom:12px}
.sres__more{margin-top:16px}

@media (max-width:1023.98px){
  .ah--search{grid-template-columns:minmax(0,1fr);gap:16px}
  .glist{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:767.98px){
  .ah--search h1{font-size:30px}
  .ah .plate--64 .ah__ic{width:28px;height:28px}
  .sortsel .sortsel__c{display:none}
  .filters--cats{padding-top:12px}
  .filters--cats .filters__chips{margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
  .filters--search .filters__chips{margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
  /* Guía: el texto se pliega a 7 líneas con «Seguir leyendo» (la sección cabe en unos 600 px) */
  .buyguide__clamp:not(.is-open) .buyguide__p{max-height:168px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  /* «Ver solo: …» comparte la fila de «Seguir leyendo» */
  .buyguide__clamp{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px}
  .buyguide__clamp>.buyguide__p{flex:1 0 100%}
  .buyguide__clamp>.buyguide__segs{margin-top:10px}
  .arch-list>.pcard--paid,.plist>.pcard--paid{grid-template-columns:94px minmax(0,1fr)}
  .plist>.pcard--paid{grid-template-columns:82px minmax(0,1fr)}
  .arch-list>.pcard--paid .pcard__media,.plist>.pcard--paid .pcard__media{margin:10px 0 10px 10px}
  .arch-list>.pcard--paid .pcard__body,.plist>.pcard--paid .pcard__body{padding:8px 12px 0}
  .plist{grid-template-columns:minmax(0,1fr)}
  /* base.css oculta la 4.ª guía de las rejillas de la home; aquí se ven todas */
  .glist .gcard:nth-child(4){display:grid}
  .glist .gcard:nth-child(3){border-bottom:1px solid var(--rule);padding-bottom:12px}
  .glist .gcard:first-child{padding-top:12px}
  .nf__cats{display:flex;overflow-x:auto;gap:8px;margin:0 calc(-1*var(--gutter));padding:4px var(--gutter);scrollbar-width:none}
  .nf__cats::-webkit-scrollbar{display:none}
  .nf__cats .ctile{flex:0 0 96px}
}