/*
  Listado de categoria. De la maqueta Kikoua Categoria.html, su bloque <style>.
  Lo comun -tarjeta, cabecera, pie, botones- esta en kikoua.css.

  CINCO reglas de la maqueta no estan aqui, y cada una por su motivo:

    - `.prod-img>img` y su acercamiento al pasar se han ido a kikoua.css, con
      el selector `.prod-img img`: la tarjeta es compartida y en el tema la
      foto va dentro de su enlace, asi que el hijo directo no casaba. La
      tienda tenia el mismo problema y lo arregla de paso.

    - `.old`, `.tag.off` y `.freeship` pintan el precio tachado, la etiqueta de
      descuento y el aviso de envio gratis. La tarjeta todavia no pinta
      ninguno de los tres; cuando los pinte, las reglas van a kikoua.css, no
      aqui, porque la tarjeta sale en cuatro paginas.

  Y una que SI esta y la maqueta no tenia: `.filters form` para que el cajon de
  filtros del movil pueda ocupar su alto.
*/
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-3);padding:22px 0 0}
.crumbs a{color:var(--ink-2)}.crumbs .ico{width:14px;height:14px}
.cat-head{padding:28px 0 36px;text-align:center}
.cat-head h1{font-weight:300;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;line-height:1.15}
.cat-head p{color:var(--ink-2);margin-top:12px}
.subcats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.subcats a{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--ink)}
.subcats a:hover{border-color:var(--ink);color:var(--ink)}
.listing{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:96px}
.filters{position:sticky;top:150px}
.filters form{display:block}
.fg{padding:20px 0;border-bottom:1px solid var(--line)}
.fg:first-child{padding-top:0}
.fg h3{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between}
.fg label.ck{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);padding:5px 0;cursor:pointer}
.fg label.ck:hover{color:var(--ink)}
.fg label.ck input{width:17px;height:17px;accent-color:var(--magenta-ink)}
.fg label.ck small{margin-left:auto;color:var(--ink-3);font-size:12px}
.range{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.range input{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;font-size:13px;outline:none}
.range input:focus{border-color:var(--magenta)}
.price-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.price-quick a,.price-quick button{font-size:12px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line)}
.price-quick a:hover,.price-quick button:hover{border-color:var(--ink)}
.tg{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-2);padding:6px 0;cursor:pointer}
.sw{position:relative;width:40px;height:22px;border-radius:999px;background:var(--line);transition:background .2s;flex:none}
.sw:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sw.on{background:var(--magenta-ink)}.sw.on:after{transform:translateX(18px)}
.tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.count{font-size:14px;color:var(--ink-2)}.count b{color:var(--ink)}
.tools-r{display:flex;gap:10px;align-items:center}
.sort select{height:40px;border:1px solid var(--line);border-radius:999px;padding:0 16px;font:inherit;font-size:13px;font-weight:500;background:#fff;outline:none}
.fbtn{display:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;align-items:center;gap:8px}
.fbtn .ico{width:16px;height:16px}
.active{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.active:empty{display:none}
.active a,.active button{height:32px;padding:0 10px 0 14px;border-radius:999px;background:var(--pink-2);font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}
.active a .ico,.active button .ico{width:14px;height:14px}
.active .clear{background:none;text-decoration:underline;text-underline-offset:3px;color:var(--ink-2)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 30px}
.pager{display:flex;justify-content:center;gap:8px;margin-top:64px}
.pager a,.pager span{min-width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:14px;font-weight:500;color:var(--ink);border:1px solid transparent}
.pager a:hover{border-color:var(--line);color:var(--ink)}
.pager .on{background:var(--ink);color:#fff}
.pager .ico{width:18px;height:18px}
.drawer-bg{display:none}
@media (max-width:1023px){.listing{grid-template-columns:1fr}.filters{position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:90;padding:24px;overflow:auto;transform:translateX(-100%);transition:transform .3s;box-shadow:var(--shadow-2)}.filters.on{transform:none}.filters.on form{min-height:100%}.drawer-bg.on{display:block;position:fixed;inset:0;background:rgba(35,31,32,.4);z-index:80}.fbtn{display:flex}.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.subcats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}

/* ---- lo que la maqueta no tenia porque lo hacia con JS ---- */

/* El enlace de "limpiar" de cada grupo, a la derecha de su titulo. La maqueta
   no lo pintaba: su app.js lo ponia. */
.fg h3 .limpiar{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.fg h3 .limpiar:hover{color:var(--magenta-ink)}

/* Los atajos de precio son enlaces: les falta el alto de linea del boton. */
.price-quick a{display:flex;align-items:center;color:var(--ink)}
.active a{color:var(--ink);text-decoration:none}

/* Los tres puntos del paginador. */
.pager .gap{color:var(--ink-3)}

/* El boton de enviar se pinta SIEMPRE: sin JavaScript es la unica manera de
   aplicar lo marcado. filtros.js anade la clase `js` al <html> y entonces se
   esconde en el escritorio, donde el formulario ya se envia al cambiar; en el
   movil el cajon lo necesita igual para cerrarse. */
.fg-aplicar{border-bottom:0}
.fg-aplicar button{width:100%}
.js .fg-aplicar{display:none}
@media (max-width:1023px){.js .fg-aplicar{display:block}}