/* ============================================================
   Maquinarias Jordan — CSS del catálogo
   Se encola desde [mjordan_catalogo] (shortcodes-catalogo.php).

   Depende de portada.css: la tarjeta de producto (.jm-prod-*,
   .jm-badge-stack) y las variables de marca viven allá. Acá van
   solo las piezas propias del archive: filtros, meta, paginación
   y estado vacío.

   El contenedor usa .jm-section para heredar las variables
   (--jm-borde, --jm-gris, --jm-crema-osc, etc.), que están
   declaradas en esa clase y no en :root.
   ============================================================ */

.jm-section.is-catalogo{ padding:44px 0 72px; }

/* ============================================================
   Barra de filtros
   ============================================================ */
.jm-filtros{
  background:#fff;
  border:1.5px solid var(--jm-borde);
  border-radius:18px;
  padding:20px 22px;
  display:flex; flex-direction:column; gap:18px;
  margin-bottom:18px;
}

/* --- Buscador --- */
.jm-filtros-buscar{
  position:relative;
  display:flex; align-items:center; gap:10px;
}
.jm-filtros-lupa{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--jm-gris); pointer-events:none;
}
.jm-filtros-buscar input[type="search"]{
  flex:1; min-width:0;
  font-family:'Barlow',system-ui,sans-serif;
  font-size:16px; color:var(--jm-tinta);
  background:var(--jm-crema);
  border:1.5px solid var(--jm-borde);
  border-radius:10px;
  padding:13px 16px 13px 44px;
  transition:border-color .15s, background .15s;
  -webkit-appearance:none; appearance:none;
}
.jm-filtros-buscar input[type="search"]::placeholder{ color:#9A8E82; }
.jm-filtros-buscar input[type="search"]:focus{
  outline:none;
  background:#fff;
  border-color:var(--jm-verde);
}
.jm-filtros-btn{
  flex:0 0 auto;
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; font-size:16px; color:#fff;
  background:var(--jm-bordo);
  border:0; border-radius:10px;
  padding:13px 24px; cursor:pointer;
  transition:background .15s;
}
.jm-filtros-btn:hover{ background:#4E0D0F; }

/* --- Selects --- */
.jm-filtros-selects{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:14px;
  padding-top:18px;
  border-top:1px solid #EFE7DA;
}
.jm-filtro{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.jm-filtro-lbl{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.12em;
  font-weight:600; font-size:12.5px; color:var(--jm-gris);
}
.jm-filtro select{
  width:100%;
  font-family:'Barlow',system-ui,sans-serif;
  font-size:15px; color:var(--jm-tinta);
  background:#fff;
  border:1.5px solid var(--jm-borde);
  border-radius:10px;
  padding:11px 38px 11px 14px;
  cursor:pointer;
  transition:border-color .15s;
  /* flecha propia: los select nativos no se pueden estilar igual
     en todos los navegadores */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A6E66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.jm-filtro select:focus{ outline:none; border-color:var(--jm-verde); }

/* ============================================================
   Meta: cantidad de resultados + limpiar
   ============================================================ */
.jm-filtros-meta{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin-bottom:26px;
}
.jm-filtros-count{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; font-size:14px; color:var(--jm-gris);
}
.jm-filtros-limpiar{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; font-size:14px; color:var(--jm-bordo);
  text-decoration:none;
  border-bottom:2px solid var(--jm-oro);
  padding-bottom:2px;
}

/* ============================================================
   Paginación
   ============================================================ */
.jm-pag{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px;
  margin-top:44px;
}
.jm-pag .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:17px;
  color:var(--jm-tinta); text-decoration:none;
  background:#fff;
  border:1.5px solid var(--jm-borde);
  border-radius:10px;
  transition:background .15s, border-color .15s, color .15s;
}
.jm-pag .page-numbers:hover{
  border-color:var(--jm-verde);
  color:var(--jm-verde);
}
.jm-pag .page-numbers.current{
  background:var(--jm-bordo);
  border-color:var(--jm-bordo);
  color:#fff;
}
.jm-pag .page-numbers.dots{
  border-color:transparent; background:transparent;
  color:var(--jm-gris); min-width:auto; padding:0 4px;
}
.jm-pag .page-numbers.dots:hover{ color:var(--jm-gris); }

/* ============================================================
   Estado vacío
   ============================================================ */
.jm-vacio{
  background:#fff;
  border:1.5px dashed var(--jm-borde);
  border-radius:18px;
  padding:56px 28px;
  text-align:center;
}
.jm-vacio-titulo{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700; text-transform:uppercase;
  color:var(--jm-tinta); font-size:26px; line-height:1.1;
}
.jm-vacio-texto{
  color:var(--jm-gris); font-size:16px; line-height:1.55;
  max-width:46ch; margin:12px auto 0;
}
.jm-vacio-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px; margin-top:24px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:640px){
  .jm-section.is-catalogo{ padding:28px 0 56px; }
  .jm-filtros{ padding:16px; border-radius:14px; }
  .jm-filtros-buscar{ flex-direction:column; align-items:stretch; gap:10px; }
  .jm-filtros-btn{ width:100%; }
  .jm-filtros-selects{ grid-template-columns:1fr 1fr; }
  .jm-vacio{ padding:40px 20px; }
}
@media (max-width:400px){
  .jm-filtros-selects{ grid-template-columns:1fr; }
}