/* ============================================================
   CATEGORÍA / LISTADO / BÚSQUEDA — scoped bajo .pk-archive
   Diseño aprobado categoria_v1 (Iara: "me encanta, entendiste perfecto")
   ============================================================ */
.pk-archive .pk-wrap{max-width:1320px;padding:0 46px}
.pk-archive .crumb{font-size:13.5px;color:var(--gray);padding:20px 0 4px}
.pk-archive .crumb a:hover{color:var(--orange)}
.pk-archive .crumb .sep{margin:0 8px;color:#c9c4bf}
.pk-archive .chead{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.pk-archive .chead h1{font-size:34px;font-weight:800;letter-spacing:-.025em}
.pk-archive .chead .res{font-size:14px;color:var(--gray);margin-top:6px}
.pk-archive .sortbox{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray)}
.pk-archive .sortbox select{border:1px solid var(--line);border-radius:3px;padding:9px 14px;font-weight:600;color:var(--ink);font-family:inherit;background:#fff;cursor:pointer}
.pk-archive .layout{display:grid;grid-template-columns:250px 1fr;gap:38px;padding-bottom:60px}

/* filtros */
.pk-archive .filters .fhead{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.pk-archive .fblock{border-bottom:1px solid var(--line);padding:16px 0}
.pk-archive .fblock:last-child{border:none}
.pk-archive .fblock .ft{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:700;margin-bottom:12px}

/* Grupos PLEGABLES, con el molde de specialized.com (15-ago-2026, pedido de Iara).
   Van con <details>/<summary>: se abren y cierran sin una línea de JavaScript, el teclado y el
   lector de pantalla los entienden solos, y el navegador se encarga del estado. */
.pk-archive .fgrupo{border-bottom:1px solid var(--line);padding:14px 0}
.pk-archive .fgrupo:last-of-type{border:none}
.pk-archive .fgrupo > summary{display:flex;justify-content:space-between;align-items:center;
  font-size:14.5px;font-weight:700;margin-bottom:0;cursor:pointer;list-style:none;padding:2px 0}
.pk-archive .fgrupo > summary::-webkit-details-marker{display:none}
.pk-archive .fgrupo > summary::after{content:"";width:8px;height:8px;flex:0 0 auto;margin-right:3px;
  border-right:1.8px solid #8d8378;border-bottom:1.8px solid #8d8378;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.pk-archive .fgrupo[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.pk-archive .fgrupo > summary:hover{color:var(--orange)}
.pk-archive .fgrupo[open] > summary{margin-bottom:10px}
.pk-archive .fgrupo .chips{margin-top:10px}
/* el tope de 5 + "Ver más", igual que el "Show More" de ellos */
.pk-archive .fgrupo .fitem.mas,
.pk-archive .fgrupo .chips .chip.mas{display:none}
.pk-archive .fgrupo.abierto .fitem.mas{display:block}
.pk-archive .fgrupo.abierto .chips .chip.mas{display:inline-flex}
.pk-archive .fmas{background:none;border:none;padding:6px 0 0;font-family:inherit;font-size:13px;
  color:var(--ink);text-decoration:underline;cursor:pointer}
.pk-archive .fmas:hover{color:var(--orange)}
.pk-archive .fopt{display:flex;align-items:center;gap:9px;font-size:14px;color:#3c3c3c;padding:5px 0;cursor:pointer}
/* 🔴 CUÑA 29-ago-2026 — EL CUADRADITO PROMETÍA ALGO QUE EL FILTRO NO HACE.
   Marca, Talle y Color son de a UNO (son <input type=radio>), pero estaban dibujados con el mismo
   cuadrado con tilde que el checkbox real de "En stock". El visitante tocaba Specialized, después
   Lazer, y Specialized se le desmarcaba solo: parecía un error de la web. Un control redondo dice
   "elegí uno" antes de que lo toquen, que es lo único honesto mientras el filtro sea de a uno.
   (Poder elegir dos marcas a la vez es una función que hay que construir aparte y toca el contador,
   que tiene su propia cuña: queda propuesto para Iara, no improvisado acá.)
   El de "En stock" y los rangos de precio siguen cuadrados: esos sí son de marcar y desmarcar. */
/* 🔴 29-ago-2026, SEGUNDA VUELTA: los filtros pasaron a poder elegir VARIOS, así que el control
   vuelve a ser cuadrado con tilde — que es lo que significa "podés marcar los que quieras" — igual
   que el de "En stock". (En la primera vuelta se los había hecho redondos porque eran de a uno; lo
   correcto no era disfrazarlos, era que se pudiera elegir más de uno.) */
.pk-archive .fopt .box{width:17px;height:17px;border:1.6px solid #c7c1bb;border-radius:4px;flex:0 0 auto;position:relative}
.pk-archive .fopt.on .box{background:var(--orange);border-color:var(--orange)}
.pk-archive .fopt.on .box::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pk-archive .fopt .q{margin-left:auto;color:#7a736c;font-size:12.5px}
/* #21 · rangos de precio: mismo aspecto que el resto de los filtros, pero son links (se aplican
   solos, sin "Aplicar"). Por eso además cambia el cursor y se subraya el rango activo al pasar. */
.pk-archive .prange{display:flex;align-items:center;gap:9px;font-size:14px;color:#3c3c3c;padding:5px 0;text-decoration:none}
.pk-archive .prange:hover{color:var(--ink)}
.pk-archive .prange .box{width:16px;height:16px;border:1.6px solid #c7c1bb;border-radius:3px;flex:0 0 auto;position:relative}
.pk-archive .prange.on{color:var(--ink);font-weight:700}
.pk-archive .prange.on .box{background:var(--orange);border-color:var(--orange)}
.pk-archive .prange.on .box::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pk-archive .prange .q{margin-left:auto;color:#7a736c;font-size:12.5px;font-weight:400}
.pk-archive .pother{margin-top:12px;font-size:12.5px;color:var(--gray)}
.pk-archive .price-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.pk-archive .price-row input{width:100%;border:1px solid var(--line);border-radius:3px;padding:8px;font-size:13px;color:var(--ink);font-family:inherit}
/* el color, dibujado. El borde tenue es para que el blanco y el crema no desaparezcan. */
.pk-archive .fopt .cdot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);margin-left:-1px}

/* 🔴 CUÑA 29-ago-2026 — EL BOTÓN DE APLICAR ESTABA A UNA PANTALLA DE SCROLL DEL TILDE.
   Desde que los filtros son de a varios, tildar una marca ya no recargaba: había que apretar
   "Aplicar filtros", que vive DESPUÉS de Marca, Talle, Color, Precio y Stock — en Indumentaria, más
   de una pantalla abajo de donde acabás de tocar. Tocabas Specialized, no pasaba nada visible, y el
   filtro parecía roto.
   Primer intento: dejar el botón pegado abajo de la pantalla. Salió peor y se vio en la captura —
   el botón quedaba encima de una opción del filtro (tapaba "Verde 17"), o sea que para arreglar un
   control tapé otro. El arreglo movió el defecto de lugar.
   Lo que quedó: en compu el filtro se aplica SOLO al tocarlo, igual que los rangos de precio de
   esta misma barra, que ya funcionaban así desde el 21-ago. Se acabó la incoherencia de que el
   precio se aplique solo y la marca no. El botón sigue existiendo para el celular (donde los
   filtros son un panel que se abre y conviene elegir varios de una) y para quien no tenga
   JavaScript. */
.pk-archive .fapply{margin-top:14px;width:100%;background:var(--ink);color:#fff;border:none;padding:11px;border-radius:3px;font-weight:700;cursor:pointer;font-family:inherit;font-size:13.5px}
.pk-archive .fapply:hover{background:var(--orange)}
/* El botón NO se esconde aunque los tildes se apliquen solos: abajo de los rangos de precio hay dos
   casilleros para escribir un mínimo y un máximo a mano ("O poné el tuyo"), y esos no son un tilde —
   necesitan el botón para aplicarse. Esconderlo dejaba ese filtro sin salida, que es el mismo
   defecto que estamos sacando, corrido un renglón más abajo. */
.pk-archive .fclear{display:inline-block;margin-top:10px;font-size:13px;color:var(--gray);text-decoration:underline}

/* grilla minimal */
/* 🔴 CUÑA 2-sep-2026 — `1fr` ES `minmax(auto,1fr)` Y EL CONTENIDO PUEDE ENSANCHAR LA COLUMNA.
   Con `1fr` pelado, un solo texto que no puede partirse (un nombre de color largo en una línea)
   levanta el ancho mínimo de SU columna y la vecina se achica para compensar. Medido hoy en
   /categoria/bicicletas/ a 390 px: las dos columnas salieron **97,98 px y 236,02 px** en vez de
   167 y 167 — una tarjeta con un tercio del ancho de la otra, en la categoría más cara y en el
   celular, que es por donde prueba Iara. Las otras cinco categorías estaban bien, así que el
   defecto era invisible salvo que se midieran las columnas y no las tarjetas.
   `minmax(0,1fr)` le saca al contenido el poder de decidir el ancho: las columnas son iguales
   siempre, tenga adentro lo que tenga. */
.pk-archive .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
/* 2-oct-2026: el corte antes de la primera agotada, a lo ancho de la grilla (archive-grid.php) */
.pk-archive .grid .pk-corte-sinstock{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px}
/* si la página ARRANCA con agotadas, la raya de la cabecera ya separa: dos rayas a 26 px parecían un error */
.pk-archive .grid .pk-corte-sinstock:first-child{border-top:0;padding-top:0}
.pk-archive .pcard{background:#fff;display:flex;flex-direction:column;transition:transform .25s ease}
/* 🔴 20-ago-2026, Iara: "El recuadro/trazo gris alrededor del producto no me gusta en ningún
   producto." Era este `border:1px solid var(--line)`. Con fotos de fondo blanco el recuadro no
   suma nada y encima encierra al producto; las que tenían el fondo levemente gris (Muc-Off,
   L=248) se veían como un cuadrado gris flotando adentro del cuadrado blanco. El fondo gris se
   arregló en las fotos (blanquear_fondos.php) y el recuadro se va de acá. */
.pk-archive .pcard .ph{height:248px;background:#fff;border-radius:4px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pk-archive .pcard .ph > img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .35s ease;
  /* 🔴 7-sep-2026: `--pkz` es el zoom que le falta a ESTA foto para que el producto llene la caja
     (lo mide `pk_medir_zoom.php` y lo escribe la plantilla; 1 = la foto ya llena). Va multiplicado
     por `--pkh`, que es el acercamiento del hover: si el hover pisara el transform con su propio
     `scale(1.05)`, la foto corregida volvería a achicarse justo al apuntarla. */
  transform:scale(calc(var(--pkz,1) * var(--pkh,1)))}
.pk-archive .pcard .ph .noimg{color:#8a847e;font-size:13px;font-weight:600;text-align:center;padding:0 10px}
/* cartel de envío gratis — solo bicis (decisión Rami 30-jul-2026) */
.pk-archive .pcard .freeship{position:absolute;top:12px;left:12px;z-index:2;background:var(--orange-solido);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:3px;line-height:1}
/* cartel de novedad: negro y arriba a la izquierda cuando está solo, abajo si comparte lugar con
   "Envío gratis" (que en las bicis está siempre). El molde es la tarjeta de specialized.com. */
.pk-archive .pcard .nuevo{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:3px}
.pk-archive .pcard .freeship ~ .nuevo{top:auto;bottom:12px}
/* 27-sep-2026 (N17, G2): "Sin stock" es de arriba a la izquierda (style.css, `.pk-sinstock`); si
   además es nuevo, "Nuevo" baja, igual que cuando comparte lugar con "Envío gratis". */
.pk-archive .pcard .pk-sinstock ~ .nuevo{top:auto;bottom:12px}
.pk-archive .pcard .pk-sinstock{font-size:11.5px;padding:6px 10px}
.pk-archive .pcard .add{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:3px;opacity:0;transform:translateY(8px);transition:.22s}
.pk-archive .pcard .add svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8}
.pk-archive .pcard:hover{transform:translateY(-5px)}
/* 🔴 CUÑA 2-sep-2026 — AL PASAR EL MOUSE, EL NOMBRE DEL PRODUCTO QUEDABA EN 3,41:1.
   La tarjeta entera es un `<a>`, así que le pegaba el `.woocommerce a:hover{color:var(--orange)}`
   general de `style.css:399` y el título heredaba el naranja de marca. Sobre blanco eso da 3,41:1
   y el piso legible es 4,5 — es el mismo cálculo que hizo nacer a `--orange-txt` el 29-ago, y esta
   superficie no lo estaba usando. Eran 2 de los 72 hallazgos de contraste: los otros 70 son la
   decisión del naranja como FONDO, que sigue esperando a Iara.
   No se saca el cambio de color (es la señal de que la tarjeta es tocable): se usa el naranja que
   se lee. Los demás renglones —marca, precio, cuotas, stock— tienen su color propio y no heredan. */
/* 2-sep, segunda pasada: no alcanzaba con el nombre. La tarjeta entera hereda el color del
   `a:hover`, así que el PRECIO también salía en el naranja de 3,41:1 (visto en "Desde $ 36.067",
   18 px en negrita: para WCAG eso todavía NO es texto grande, el piso sigue siendo 4,5). Se pone
   en la tarjeta: los renglones que tienen color propio —marca, subtítulo, stock, cuotas— no se
   tocan; los que heredan pasan al naranja que se lee. */
.pk-archive .pcard:hover{color:var(--orange-txt)}
.pk-archive .pcard:hover .ph > img{--pkh:1.05}
.pk-archive .pcard:hover .add{opacity:1;transform:translateY(0);background:var(--orange)}
.pk-archive .info{padding:14px 2px 0;display:flex;flex-direction:column;flex:1 1 auto}
/* 🔴 CUÑA 29-ago-2026 — LOS PRECIOS A LA MISMA ALTURA. Medido: en /categoria/nutricion/ el precio
   de una tarjeta sin swatches quedaba 38 px más arriba que el de sus dos vecinas, en 8 de 8 filas.
   La causa era estructural (una tarjeta con swatches + talles es más alta), así que se arregla en
   la estructura y no con un renglón de relleno: el pie se clava abajo y el hueco queda ARRIBA, que
   es donde no se ve. Vale para cualquier categoría y para cualquier combinación de renglones. */
.pk-archive .pcard{height:100%}
.pk-archive .info .pie{margin-top:auto;padding-top:4px}
/* 27-sep-2026 (N12, G2): la etiqueta "Nuevo precio sugerido" va pegada arriba del pie (product-card.php).
   El `auto` pasa a la etiqueta para que todo el aire quede arriba de ella y no entre ella y el precio. */
.pk-archive .info .pnuevo-fila{margin-top:auto;padding-top:6px}
.pk-archive .info .pnuevo-fila + .pie{margin-top:0}
.pk-archive .pcard .pk-pnuevo{white-space:normal;font-size:10.5px}
.pk-archive .row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;min-height:16px}
.pk-archive .sw{display:flex;gap:6px}
.pk-archive .sw i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}
.pk-archive .brandtag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a736c}
.pk-archive .nm{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.2;
  min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* el renglón gris de la tarjeta de specialized.com: el modelo grande y el grupo/año abajo */
.pk-archive .spec{font-size:13px;font-weight:600;color:var(--gray);line-height:1.3;margin-top:-2px;min-height:17px}
/* el hueco reservado cuando el producto no tiene subtítulo (ver la cuña en product-card.php) */
/* 🔴 3-sep-2026 · Iara: *"veo mucho espacio entre el color, el precio y el nombre"*.
   SE PROBÓ APRETARLO Y NO SE PUEDE A OJO: bajar este renglón de 17 a 8 px y el de las bolitas de 30
   a 24 ganó 12 px por tarjeta **y rompió la alineación en 78 de 286 pantallas**. La razón es que
   estos altos NO son parámetros libres: son el alto REAL del contenido cuando sí está (una fila de
   bolitas mide 30 px, medido a 320, 390, 640 y 1440). Si el hueco reservado mide menos que el
   contenido, la tarjeta que lo tiene y la que no dejan de medir lo mismo — que es exactamente el
   defecto que costó 286 pantallas de medición el 2-sep.
   El espacio grande que veía Iara era el hueco VACÍO, y se resolvió por el otro lado: llenándolo.
   Ese mismo día 294 productos pasaron a tener bolita de color medida de su propia foto.
   Si algún día hay que apretarlo de verdad, hay que achicar el contenido real Y el reservado
   juntos, y volver a correr `qa_alineacion.cjs`. */
.pk-archive .spec.spec-vacio{min-height:17px}
/* 27-sep-2026 (B5, ronda "ojo humano"): en la tarjeta la marca ya está en su chip y la medida de
   rodado va al renglón gris (`pk_tarjeta_nombre()`). Se ocultan del nombre sin borrarlas del HTML:
   el barredor encuentra cada tarjeta por el título completo. El renglón gris es de UNA línea (una
   medida larga con dos renglones haría la tarjeta más alta que sus vecinas: qa_alineacion). */
.nm .nm-marca,.nm .nm-medida{display:none}
/* el rótulo de cada escala de talles en la barra ("MTB y Urbana" / "Ruta y Gravel"), B3 */
.pk-archive .fgrupo .tescala{font-size:12.5px;font-weight:600;color:var(--gray);margin:10px 0 6px}
.pk-archive .fgrupo .tescala:first-of-type{margin-top:2px}
.pk-archive .spec.spec-medida{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-archive .ver{font-size:13.5px;color:var(--gray);margin:3px 0 9px}
.pk-archive .price{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pk-archive .cufoot{margin-top:7px}
.pk-archive .chip-si{display:inline-block;font-size:11px;font-weight:700;color:#2f7d4f;background:#eef6f0;border:1px solid #d7e9dd;border-radius:3px;padding:2px 8px;margin-bottom:6px}
.pk-archive .cu24{display:block;font-size:12.5px;color:var(--gray)}
/* 27-sep-2026: las cuotas de un producto salen desde $20.000 (pk_cuotas_se_muestran); abajo queda el
   lugar reservado e invisible, para que el precio no baje respecto de la vecina (product-card.php) */
.pk-archive .cufoot-vacio{visibility:hidden}
/* 27-sep-2026 (gate a11y): texto chico naranja → `--orange-txt` (COMPONENTES.md: `--orange` nunca en texto
   chico). Con `--orange` daba 3,41:1 sobre blanco a 13 px; salió a la luz con la Chisel pasando a "se pide". */
.pk-archive .card72{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:700;color:var(--orange-txt)}
.pk-archive .card72 svg{width:15px;height:15px;stroke:var(--orange-txt);fill:none;stroke-width:1.7;flex:0 0 auto}
/* 🔴 29-ago: el verde de "En stock" daba 3,26:1 sobre blanco (mínimo 4,5). Es el renglón que dice
   que se puede comprar HOY: tiene que leerse. El puntito de al lado queda con el verde vivo. */
/* 🔴 CUÑA 7-sep-2026 — LOS DOS RENGLONES SE RESERVAN TAMBIÉN EN COMPU.
   A 640 px y para abajo esto ya reservaba 30 px (ver la cuña de más abajo, del 2-sep, que lo puso
   por «Consultar»). En compu seguía en 15, o sea un renglón — y alcanzaba mientras la línea de
   stock dijera «En stock». Con el aviso de escasez del 7-sep dejó de alcanzar: «Último sabor:
   Vainilla (doypack 907 g)» ocupa DOS renglones y su tarjeta quedaba 15 px desalineada de las
   vecinas. Medido en /categoria/nutricion/ a 1024 px: 20 tarjetas con `.instock` de 15 px y una
   de 30, y como el pie va clavado abajo esos 15 px le bajaban el precio.
   El texto no se recorta —dice cuál es el último sabor, que es justamente el dato que empuja a
   comprar—: se reserva el alto, que es la ley de Iara del 1-sep («fijá el alto de cada bloque de
   la tarjeta, tenga lo que tenga adentro»). La que usa un solo renglón queda centrada. */
.pk-archive .instock{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:700;color:#2c7a47}
.pk-archive .instock .pt{width:7px;height:7px;border-radius:50%;background:#3a9d5d}
/* ── LOS TALLES EN LA TARJETA, con el que no hay TACHADO (Iara, 17-ago-2026) ──
   El tachado va como línea DIAGONAL sobre la ficha, no como `line-through` del texto: en un
   chip de una o dos letras ("S", "XL") la rayita del medio se confunde con la letra misma y a
   38px no se distingue "S" de "S tachada". La diagonal cruza la ficha entera y se lee de una.
   Es además lo que hace specialized.com, que es el molde que pidió Iara.
   Se dibuja con un gradiente (no un ::after rotado) para que acompañe cualquier ancho de chip. */
.pk-archive .talles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 9px;min-height:26px}
.pk-archive .tlabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a736c;flex:0 0 auto}
.pk-archive .tchips{display:flex;flex-wrap:wrap;gap:5px}
.pk-archive .tchip{min-width:26px;height:26px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);
  font-size:12px;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;
  transition:border-color .15s ease,color .15s ease}
.pk-archive .tchip:hover{border-color:var(--ink)}
.pk-archive .tchip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* 🔴 CUÑA 1-sep-2026 — SIN STOCK VA GRIS, NO CRUZADO. Iara, probando desde el celular:
   *"no quiero que los talles se vean tachados, cuando no hay stock de un talle quiero que se vea
   gris"*. Acá el tachado era una **línea diagonal** dibujada con un gradiente (se había elegido en
   agosto porque en un chip de una letra el `line-through` se confunde con la letra). Da igual la
   técnica: se lee como tachado, y es lo que ella no quiere. Fuera la diagonal, queda el gris.
   Lo que sigue en pie del arreglo viejo es el CONTRASTE: #6b6b6b se lee (el primer intento usaba
   #bdb8b2, 1,97:1, y no se distinguía cuál era el talle que falta, que es justamente el dato).
   Ahora lo distingue del disponible el fondo gris, el borde más claro y el peso normal.
   Sigue siendo clickeable a propósito: es la puerta a la campanita de ESE talle. */
.pk-archive .tchip.no{color:#6b6b6b;border-color:#e7e3df;background:#f4f2f0;font-weight:500}
.pk-archive .tchip.no:hover{color:var(--ink);border-color:#c9c4be;background:#fff}
.pk-archive .tsin{font-size:11.5px;color:var(--gray);margin:-4px 0 8px}
@media (max-width:640px){
  .pk-archive .talles{gap:6px;margin:5px 0 8px}
  /* 🔴 CUÑA 29-ago-2026 — EL DEDO. Medidos en el celular: los chips de talle iban 24×24 px con
     5 px entre uno y otro, o sea 29 px de paso contra los 44 que piden iOS y Android. Elegir el
     talle correcto era una lotería, y es EL control que decide la compra de una bici. La ficha
     visible se deja chica (si no, la tarjeta se llena de cuadrados), y lo que crece es la zona que
     recibe el toque, con un ::after transparente. Lo mismo para los swatches de color. */
  .pk-archive .tchip{min-width:24px;height:24px;font-size:11.5px;position:relative}
  .pk-archive .tchip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
    transform:translate(-50%,-50%)}
  .pk-archive .tchips{gap:9px}
  .pcard .sw,.pcard .sw.sw-txt{position:relative}
  .pcard .sw::after,.pcard .sw.sw-txt::after{content:"";position:absolute;left:50%;top:50%;
    min-width:44px;width:100%;height:44px;transform:translate(-50%,-50%)}
  /* 🔴 CUÑA 2-sep-2026 — CINCO MINIATURAS DE 26 px NO ENTRAN EN UNA TARJETA DE 163 px.
     Medido en /categoria/…/indumentaria/ a 390 px, tarjeta "Medias Pavé": 5 swatches de 26 px con
     10 px de separación más el "+4" piden 173 px y hay 163. La fila envolvía a un segundo renglón
     (46 px en vez de 30) y arrastraba los TALLES 16 px abajo de los de su vecina.
     No se esconde ninguno ni se recorta el "+N": se achican el swatch y la separación solo en
     celular, que es donde falta lugar. 5×22 + 5×7 + 14 = 159 ≤ 163: entra siempre, en un renglón.
     La zona de toque NO se achica: sigue siendo el ::after de 44 px de acá arriba, que es
     invisible y no ocupa lugar en el flujo. */
  .pcard .swatches{gap:7px}
}

/* filtro de TALLE: chips, no lista — son muchos valores cortos y en columna ocupan media pantalla */
.pk-archive .chips{display:flex;flex-wrap:wrap;gap:7px}
.pk-archive .chips .chip{min-width:38px;padding:0 10px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:3px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;color:var(--ink)}
.pk-archive .chips .chip:hover{border-color:var(--ink)}
.pk-archive .chips .chip.on{border-color:var(--ink);background:var(--ink);color:#fff}

/* sin stock y sin dato B2B positivo: sin promesa de plazo, tono neutro */
/* sin stock y sin respaldo B2B: la campanita es lo único que le podemos ofrecer (el form está en la ficha) */
/* 🔴 CUÑA 2-sep-2026 — `inline-flex` SE APOYA EN LA LÍNEA BASE Y EL PIE CRECÍA 4 px.
   `.instock` (un puntito de 7 px) y `.consultar` (un ícono de 15 px) son el mismo renglón, y los
   dos medían 15 px de alto. Pero al ser `inline-flex` su aporte al alto del padre depende de
   dónde cae su línea base, y con contenidos de distinto alto no cae en el mismo lugar: medido en
   /categoria/componentes/ruedas/, el pie de la Roval Control SL (que dice «Consultar») medía
   104 px y el de sus dos vecinas 100, con la MISMA tarjeta (489,2 px) y los mismos hijos. Como
   el pie está clavado abajo, esos 4 px le subían el precio: 385 contra 389.
   `flex` de bloque no participa del cálculo de línea base. Ninguno de los dos tiene fondo ni
   borde, así que ocupar todo el ancho no cambia nada de lo que se ve. */
.pk-archive .consultar{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:var(--gray)}
/* 🔴 CUÑA 7-sep-2026 — EL RENGLÓN DE ESTADO SE RESERVA IGUAL PARA LOS TRES QUE LO OCUPAN.
   En ese lugar del pie puede ir `.instock` («En stock» / el aviso de escasez), `.card72`
   («Recibilo en 72 hs») o `.consultar` («Avisame cuando vuelva») — nunca dos a la vez. Cada uno
   traía su propio alto (15, ninguno y 15), y mientras las tres frases entraran en un renglón daba
   igual. Dejó de dar igual con el aviso de escasez del 7-sep: «Último sabor: Vainilla (doypack
   907 g)» ocupa DOS renglones y su tarjeta quedaba 15 px desalineada de las vecinas (medido en
   /categoria/nutricion/ a 1024 px: 20 tarjetas de 15 px y una de 30).
   🔴 Y la trampa que me comí arreglándolo: subí SOLO `.instock` a 30 y los desvíos pasaron de 3 a
   71, porque sus dos hermanos seguían en 15. Es un slot con tres ocupantes: o se reserva para los
   tres o se rompe. El texto no se recorta —dice cuál es el último sabor, que es el dato que empuja
   a comprar—: se reserva el alto, que es la ley de Iara del 1-sep («fijá el alto de cada bloque de
   la tarjeta, tenga lo que tenga adentro»). El que usa un renglón queda centrado. */
.pk-archive .instock,.pk-archive .card72,.pk-archive .consultar,.pk-archive .estado-hueco{min-height:30px}
/* 🔴 5-oct-2026 (ojo humano, 🟠 4) — EL HUECO DE LA AGOTADA, ABAJO Y NO EN EL MEDIO. La agotada no tiene cuotas y
   su lugar quedaba reservado y vacío entre el precio y "Avisame cuando vuelva" (~100 px: parecía que algo no cargó).
   No se achica la tarjeta (ley del 1-sep, R4): el aviso se dibuja adentro del lugar reservado de las cuotas
   (`.cufoot-aviso`, arriba de todo, pegado al precio) y su renglón de siempre queda reservado e invisible
   (`.estado-hueco`, el mismo margen y alto que `.consultar`). Los bloques arrancan donde arrancaban: qa_alineacion. */
.pk-archive .cufoot-aviso{position:relative}
.pk-archive .cufoot-aviso .consultar{visibility:visible;position:absolute;top:0;left:0;right:0;margin-top:0}
/* 6-oct-2026 (ronda 3): en la agotada el primer renglón es la condición del contado; el aviso va debajo */
.pk-archive .cufoot-aviso-c .pk-pc3 .c{visibility:visible}
.pk-archive .cufoot-aviso-c .consultar{top:calc(1.3em + 6px)}
.pk-archive .estado-hueco{margin-top:8px;visibility:hidden}
.pk-archive .consultar svg{width:15px;height:15px;stroke:var(--gray);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* paginación */
.pk-archive .pk-pagination{display:flex;justify-content:center;gap:8px;margin:20px 0 10px}
.pk-archive .pk-pagination a,.pk-archive .pk-pagination span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:3px;font-weight:700;font-size:14px;color:var(--ink)}
.pk-archive .pk-pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pk-archive .pk-pagination a:hover{border-color:var(--orange);color:var(--orange)}
.pk-archive .noresults{padding:50px 0;text-align:center;color:var(--gray);font-size:16px}

@media (max-width:900px){
  .pk-archive .layout{grid-template-columns:1fr;gap:20px}
  .pk-archive .filters{border:1px solid var(--line);border-radius:6px;padding:0 16px}
  .pk-archive .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pk-archive .pk-wrap{padding:0 20px}
  .pk-archive .chead h1{font-size:26px}
  /* 14-oct-2026 (A3): el título y "N productos" en el mismo renglón y menos aire arriba de la grilla: en el celu la góndola
     arranca ~40 px antes (miga 40→30, encabezado 126→98) */
  .pk-archive .crumb{padding:12px 0 2px}
  .pk-archive .chead{padding-bottom:14px;margin-bottom:16px;gap:12px}
  .pk-archive .chead > div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
  .pk-archive .chead .res{margin-top:0}
  .pk-archive .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .pk-archive .pcard .ph{height:150px}
  /* 14-oct-2026 (Iara, "dale hacelo"): una grilla de SOLO bicis tiene la foto más baja. La bici es apaisada (160×98 en una
     tarjeta de 167) y en 150 de alto quedaban ~20 px de blanco abajo. Con una sola tarjeta que no sea bici, todas
     quedan en 150 (R4: la misma altura en todo el bloque). qa_foto_pantalla.cjs mide que la bici siga ≥ 92 % del ancho. */
  /* 🔴 14-oct-2026 (V1-C, Iara TRES veces: "las fotos me siguen apareciendo chicas"). Achicar el blanco no alcanzaba: en
     dos columnas la bici medía 160 px de ancho (tarjeta de 167) y Canyon y Specialized la muestran a 326-358 px en el mismo
     celu. Una grilla de SOLO bicis va a UNA columna y el marco sigue a la tarjeta (3:2): la bici llena ~95 % de 350 px.
     La tarjeta se acorta para que la góndola no se vuelva eterna: sin el renglón "Modelo 2026" (es el mismo dato en todas),
     el nombre sin el segundo renglón reservado (en una columna no hay vecina con quien alinear) y el contado y su
     condición en UN renglón cuando entran. Talles, colores y "Ver producto" no se tocan (reglas de Iara). Con una sola
     tarjeta que no sea bici, la grilla sigue en dos columnas. Candado: qa_celu_t1.cjs (bici ≥ 90 % de la tarjeta). */
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))){grid-template-columns:minmax(0,1fr);gap:30px}
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))) .pcard .ph{height:auto;aspect-ratio:3/2}
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))) .pcard .spec{display:none}
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))) .pcard .nm{min-height:0}
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))) .cu24.pk-pe4{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em}
  .pk-archive .grid:not(:has(.pcard:not([data-bici]))) .cu24.pk-pe4 .b{margin-top:0}
  .pk-archive .nm{font-size:15.5px}.pk-archive .ver{font-size:12.5px}.pk-archive .price{font-size:15.5px}
}

/* fixes auditoría 9-jul */
/* 2-oct-2026 (ojo humano 🟠 3): en el celular, desde la página 2 la fila medía 444 px en 390 y la flecha "›"
   quedaba afuera; ahora baja de renglón */
.pk-archive .pk-pagination ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0}
.pk-archive .pk-pagination li{list-style:none;margin:0}
.pk-archive .pk-pagination li::marker{content:""}
/* filtros colapsables en mobile */
.pk-archive .ftoggle{display:none}
@media (max-width:900px){
  .pk-archive .ftoggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    background:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:12px;font-weight:700;
    font-size:14px;cursor:pointer;font-family:inherit;margin-bottom:14px}
  .pk-archive .filters form{display:none;padding-bottom:12px}
  .pk-archive .filters.open form{display:block}
  .pk-archive .filters{border:none;padding:0}
  .pk-archive .fopt,
  .pk-archive .prange{padding:10px 0} /* target táctil más generoso */
}

/* Colores navegables desde la grilla — pedido de Iara 2-ago-2026: el cliente tiene que poder
   ver los colores disponibles sin entrar al producto, como en specialized.com y el B2B.
   El swatch es la foto real de ese color; no tenemos el hexadecimal y adivinarlo sería mentir. */
.pcard .swatches{display:flex;align-items:center;gap:6px;margin:8px 0 2px;flex-wrap:wrap}
.pcard .sw{width:30px;height:30px;padding:0;border:1.5px solid #e4e4e4;border-radius:50%;
  background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s}
/* `contain` y no `cover`: con `cover` la foto apaisada se recortaba dentro del círculo y el
   producto salía cortado (ver la cuña de product-card.php). Entra entera, más chica pero completa. */
.pcard .sw img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:1px}
.pcard .sw:hover,.pcard .sw.on{border-color:#EF5A28;transform:scale(1.08)}
.pcard .sw-mas{font-size:11.5px;color:#6e6862;font-weight:600;letter-spacing:.01em}
/* El de UN solo color (20-ago-2026). Se ve igual que los otros para que la grilla no cambie de
   forma tarjeta por tarjeta, pero no reacciona al mouse: no hay nada que elegir. Al lado va el
   nombre del color, que es el dato que el cliente vino a buscar. */
/* los colores dichos con el NOMBRE, para cuando no tenemos la foto de cada uno (29-ago-2026).
   Ver el porqué medido en template-parts/product-card.php. */
.pcard .swatches.sw-nombres{gap:5px}
.pcard .sw.sw-txt{width:auto;height:auto;min-height:26px;border-radius:14px;padding:4px 10px;
  font-size:11.5px;font-weight:700;color:#5f5a55;background:#fff;border:1.5px solid #e4e4e4;
  line-height:1.15;text-align:center;font-family:inherit}
.pcard .sw.sw-txt:hover,.pcard .sw.sw-txt.on{border-color:#EF5A28;color:#EF5A28;transform:none}
.pcard .sw-uno{cursor:default}
.pcard .sw-uno:hover{border-color:#e4e4e4;transform:none}
/* 🔴 CUÑA 2-sep-2026 — EL NOMBRE DEL COLOR ÚNICO ENVOLVÍA Y CORRÍA LOS TALLES 30 px.
   Medido en /categoria/bicicletas/ a 390 px: la Diverge E5 Sport tiene UN solo color y al lado de
   su miniatura se dibujaba el nombre entero, "Dorado quemado metalizado y plata sombra" — 40
   caracteres, 163 px de ancho en una tarjeta de 167. Envolvía a dos renglones: la fila de colores
   pasaba de 30 a 60 px y los TALLES de esa tarjeta caían a 316 px contra 286 px de sus siete
   vecinas. Era el ÚNICO desvío que quedaba en toda la grilla después de las dos cuñas de hoy.
   Se clava a un renglón. El nombre completo no se pierde: sigue en el `title` del swatch y en la
   ficha, que es donde se elige. Y va en la dirección que pidió Iara el 1-sep — *"tiene que ser con
   los colores y listo, sin nombres"*—: lo que informa es la bolita, el nombre es la ayuda.
   No es el recorte que falló el 1-sep: aquel eran DOS chips de nombre compitiendo y saliéndose del
   borde; este es una nota sola al lado de un swatch, que es donde el recorte sí es la práctica. */
.pcard .sw-nota{font-size:11.5px;color:#6e6862;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
/* 🔴 2-sep-2026: 22 y no 26. Esta es la regla que MANDA a 390 px — la de `max-width:760px`
   de más arriba la pisa `.pcard .sw{width:30px}` (misma especificidad, más abajo en el
   archivo), así que el ancho real del swatch en celular se decide acá. Con 26 px, cinco
   miniaturas más el "+4" pedían 173 px en una tarjeta de 163 y la fila envolvía. */
/* 🔴 2-sep-2026: 18 px, y el número sale de la tarjeta más angosta que existe.
   Esta es la regla que MANDA en celular (la de `max-width:760px` la pisa `.pcard .sw{width:30px}`,
   misma especificidad y más abajo en el archivo). El swatch tiene que entrar CINCO veces más el
   "+N" en un solo renglón, porque si envuelve arrastra los talles y el precio de esa tarjeta.
   Cuentas, con la separación de 5 px de acá abajo: 5x18 + 5x4 + 13 = 123 px. La tarjeta más
   angosta es la de un teléfono de 320 px, que mide 132. Entra. Con 22 px pedía 159 y envolvía
   en 320 y en 360 (medido: 20 px y 12 px de desvío en Indumentaria).
   La zona de toque NO se achica: sigue el ::after invisible de 44 px, que no ocupa lugar. */
@media (max-width:640px){
  .pcard .sw{width:18px;height:18px}
  .pcard .swatches{gap:4px}
}
/* 🔴 7-sep-2026: acá vivía la cuña del 2-sep («Consultar disponibilidad» en dos renglones a
   360 px), que reservaba 30 px SOLO para `.instock` y `.consultar` @640. Quedó redundante —y
   además incompleta, sin `.card72`— cuando la regla base de arriba pasó a reservar los 30 px
   para los tres ocupantes del renglón en todas las pantallas. */
/* 🔴 y a 360 px o menos, TRES renglones. El aviso de escasez es la frase más larga que puede caer
   en ese renglón —«Último sabor: Vainilla (doypack 907 g)»— y en la pantalla más angosta ocupa 45 px
   contra los 30 de sus vecinas: medido en /categoria/nutricion/ a 320 px, cufoot a 5130 contra 5145.
   No se recorta el texto (el sabor que queda es justamente el dato que empuja a comprar) ni se
   reserva 45 px en todas las pantallas: se reserva sólo donde de verdad hace falta. */
@media (max-width:360px){
  .pk-archive .instock,.pk-archive .card72,.pk-archive .consultar,.pk-archive .estado-hueco{min-height:45px}
}

/* 17-ago-2026 · "Desde $X" cuando las variaciones tienen precios distintos (check 10) */
.pk-archive .pcard .price small.pk-con{font-size:11px;font-weight:600;letter-spacing:0;color:var(--gray);margin-left:3px;white-space:nowrap}
.pk-archive .pcard .price .desde{font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}

/* Talle que NO trabajamos en este modelo (19-ago-2026, pedido de Iara de mostrar la escala
   completa). Se distingue del agotado: el agotado invita a que te avisemos, este no lleva
   a ningún lado. Más apagado y sin cursor de clic. */
/* No lo trabajamos en ese talle: se TACHA igual que el agotado (Iara: "tienen que aparecer
   tachados los que no tenemos"), pero con el borde punteado y sin hover, porque no lleva a
   ningún lado. Nada de `opacity`: apaga también la diagonal y el tachado deja de verse. */
/* 🔴 26-ago-2026 · ESTA REGLA PISABA UNA DECISIÓN YA MEDIDA. Doce líneas más arriba, `.tchip.no`
   está en #6b6b6b con el cálculo escrito al lado ("un dato que hay que leer se lee"). Esta, que se
   agregó después (19-ago), volvió a poner #9b9b9b = **2,78:1** de contraste, cuando el mínimo para
   texto es 4,5. O sea que el talle que no trabajamos era ilegible otra vez, y solo en la GRILLA:
   en la ficha ya se había corregido el mismo día. El arreglo se había mudado de lugar.
   Lo que distingue a este del agotado sigue siendo el borde punteado y la falta de hover, no la
   falta de contraste. Lo caza solo el check "tachado ilegible" de qa_interacciones.cjs. */
.pcard .tchip.nohay{color:var(--gray);border-style:solid;border-color:transparent;background:transparent;cursor:default}
.pcard .tchip.nohay:hover{color:var(--gray);background:transparent;border-color:transparent}

/* ══ G2 · N5 (27-sep-2026) — EL TALLE SIN STOCK TIENE QUE VERSE A SIMPLE VISTA ═════════════════════
   Iara: "cuando no hay talles de ninguna bicicleta no se nota y parece que están todos los talles en
   stock y confunde". Medido en /categoria/bicicletas/ a 390 px: el chip con stock y el agotado tenían
   el MISMO borde (#e7e3df); los separaba un fondo #f4f2f0 contra #fff, 1,10:1, que en el celular no
   se ve. Sin tachar (Iara, 1-sep: "que se vea gris"), la diferencia pasa a ser de FORMA:
     · con stock: blanco con borde negro, letra negra. Un botón que se ve como botón.
     · sin stock: plano y gris, sin borde que lo recorte, letra gris de peso normal (4,6:1, se lee).
     · no lo trabajamos en este modelo: gris claro con borde punteado.
   El estado para el lector de pantalla ya viaja en el aria-label de cada chip (product-card.php). */
.pk-archive .tchip:not(.no){border-color:var(--ink)}
.pk-archive .tchip.no{background:var(--ph);border-color:var(--ph);color:var(--gray);font-weight:500}
/* 29-sep-2026 (Iara: "el cuadrado gris de los talles"): el talle que no tenemos cargado ya no es una caja punteada
   (parecía un casillero roto): es el talle solo, en gris y sin caja. Se lee como "este no", sin inventarle un estado. */
.pk-archive .tchip.no.nohay{background:transparent;border-style:solid;border-color:transparent;color:var(--gray)}
.pk-archive .tchip.no.nohay:hover{background:transparent;border-color:transparent;color:var(--gray)}
/* ══ R5 (28-sep-2026) — A PEDIDO NO ES "EN LA TIENDA" ═══════════════════════════════════════════════════════
   La Allez E5 Comp pintaba el 54 (a pedido: se pide a Specialized, 0 en el local) con el mismo borde negro que el
   52 del local, y abajo decía "Último talle: 52". El borde negro queda para lo que te llevás hoy; el a pedido se
   compra igual (letra negra, se toca), con el borde claro y un relojito: se pide y se espera. El estado sale de
   pk_talle_estado() (inc/pk-talles-estado.php); lo vigila qa_talle_estado.cjs. */
.pk-archive .tchip.pedido,.pcard .tchip.pedido{border-color:var(--line);color:var(--ink);background:#fff;gap:2px;padding:0 4px 0 5px}
.pk-archive .tchip.pedido:hover,.pcard .tchip.pedido:hover{border-color:var(--ink)}
.pcard .tchip .pk-ic-pedido{width:10px;height:10px;flex:0 0 10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* 🔴 CUÑA 29-ago-2026 — EL BOTÓN "VER PRODUCTO" NO EXISTE EN EL CELULAR. Se muestra solo con
   `.pcard:hover`, y en un teléfono no hay hover: nunca aparecía. Peor: quedaba igual como una zona
   invisible de 139×41 px con `pointer-events:auto` encima de la parte baja de cada foto. Como está
   adentro del <a> de la tarjeta el toque igual navegaba, así que no rompía nada — pero era peso
   muerto y la tarjeta se quedaba sin su llamada. En el celular la tarjeta ENTERA es el botón, así
   que el cartel sobra: se apaga del todo. */
@media (hover:none){
  .pk-archive .pcard .add{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   🔴 CUÑA 29-ago-2026 — LA LETRA CHICA (ley L3 de Rami)
   Rami, audio del 20-ago: *"a la velocidad que va todo hoy, esa letra chica no la llega a leer
   nadie"*. Medido en el celular sobre la góndola: la marca en 11 px, "3 sin interés" en 11, "Hasta
   18 cuotas fijas" en 12,5, "En stock" en 12, "Envío gratis" en 11. O sea: TODO el argumento
   comercial — lo único que separa a esta tienda de una lista de precios — estaba por debajo del
   piso de lectura. Sube el dato que hace comprar (cuotas, stock, envío) y se deja chico lo que es
   rótulo (la marca arriba del título, que además ya se lee en el título).
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.pk-archive .chip-si{font-size:12.5px;padding:3px 9px}
.pk-archive .cu24{font-size:13.5px}
.pk-archive .instock{font-size:13px}
.pk-archive .card72{font-size:13px}
.pk-archive .consultar{font-size:13px}
.pk-archive .pcard .freeship{font-size:11.5px;padding:6px 10px}
.pk-archive .brandtag{font-size:11.5px}
@media (max-width:900px){
  .pk-archive .chip-si{font-size:12.5px}
  .pk-archive .cu24{font-size:13px}
  .pk-archive .instock,.pk-archive .card72,.pk-archive .consultar{font-size:12.5px}
  .pk-archive .fopt,.pk-archive .fopt .q{font-size:14.5px}
}

/* 🔴 CUÑA 29-ago-2026 — LOS RÓTULOS GRISES DE LA GÓNDOLA NO SE LEÍAN. Medido: #b0aaa3 sobre
   blanco da 2,30:1 de contraste y el mínimo legible es 4,5 — o sea la mitad. Y son justo los
   renglones que orientan: la MARCA arriba del título, la palabra "Talles", y el número de
   productos al lado de cada filtro. Con #7a736c es el mismo gris tibio de la paleta, un punto
   más oscuro, y da 4,67:1. */

/* Las secciones que ofrecemos cuando lo buscado es el nombre de un lugar y no de una cosa. */
.pk-archive .secmatch{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pk-archive .secmatch a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);
  border-radius:3px;padding:9px 14px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.pk-archive .secmatch a:hover{background:var(--ink);color:#fff}
.pk-archive .secmatch a span{font-weight:400;color:#7a736c;font-size:12.5px}
.pk-archive .secmatch a:hover span{color:#e6e0da}


/* -- LA PANTALLA DE RESCATE (1-sep-2026) -------------------------------------
   Que ninguna busqueda muera en un cartel. Las 4 salidas medidas por Baymard:
   a donde ir (secciones) . que mirar (lo mas vendido) . con quien hablar (WhatsApp) . el catalogo.
   El naranja va como FONDO de boton y en texto grande: ahi 3,41:1 alcanza (WCAG 1.4.11 y 1.4.3
   texto grande). Para la letra chica se usa --orange-txt, que da 4,5:1. */
.pk-archive .noresults{padding:34px 0 10px}
.pk-aflojada{background:var(--cream);border-left:3px solid var(--orange);padding:11px 14px;
  margin:0 0 16px;font-size:14.5px;color:var(--ink);border-radius:0 4px 4px 0}
.pk-aflojada b{font-weight:700}
/* 27-sep-2026 (I8, I9): la línea que dice qué se interpretó en una búsqueda por intención ("calor",
   "invierno"). No es un aviso (eso es .pk-aflojada, con fondo): es la cabecera de la lista. */
.pk-intencion{margin:0 0 16px;padding:2px 0 2px 12px;border-left:3px solid var(--orange);
  font-size:15.5px;line-height:1.45;color:var(--ink);font-weight:500}
/* el paso adelante trae hasta 4: una fila de 3 en la grilla de 3 columnas, 2×2 en la de 2. Nunca una
   tarjeta huérfana en una fila propia (medido en 1440: quedaba la 4ª sola abajo) */
@media (min-width:901px){ .pk-intencion-mas .grid > :nth-child(4){display:none} }
@media (max-width:900px){ .pk-intencion-mas .grid > :nth-child(3):last-child{display:none} }
.pk-rescate{margin:26px 0 0}
.pk-rescate h2{font-family:'Roboto Condensed',system-ui,sans-serif;font-weight:900;
  font-size:20px;text-transform:uppercase;letter-spacing:.01em;margin:0 0 13px;color:var(--ink)}
.pk-rescate .secmatch{display:flex;flex-wrap:wrap;gap:10px}
.pk-rescate .secmatch a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);
  border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none;line-height:1.2;min-height:40px;box-sizing:border-box}
.pk-rescate .secmatch a:hover{background:var(--ink);color:#fff}
.pk-rescate .secmatch a span{font-weight:400;color:#6B6B6B;font-size:12.5px}
.pk-rescate .secmatch a:hover span{color:#E6E0DA}
.pk-rescate-wa{margin:30px 0 8px;padding:19px 20px;background:var(--cream);border-radius:6px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  font-size:15px;color:var(--ink);text-align:center}
.pk-rescate-btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;
  background:var(--orange-solido);color:#fff;font-weight:700;font-size:15px;border-radius:5px;
  text-decoration:none;line-height:1.2}
.pk-rescate-btn:hover{background:#D64D1D}
@media(max-width:760px){
  .pk-rescate h2{font-size:18px}
  .pk-rescate-wa{flex-direction:column;gap:14px;padding:18px 15px}
  .pk-rescate-btn{width:100%;justify-content:center}
  .pk-rescate .secmatch a{font-size:13.5px;padding:9px 13px}
  /* 27-sep-2026 (re-auditoría 2.3): en la búsqueda sin resultados Probotito se paraba sobre el
     conteo del segundo chip ("Indumentaria 195", un link) al llegar. Los chips cortan el renglón
     antes de la columna de los flotantes (medido con qa_flotantes.cjs --texto). */
  .pk-rescate .secmatch{padding-right:44px}
}


/* -- LA BOLITA DE COLOR EN LA TARJETA (1-sep-2026) -----------------------------
   Iara: "no tiene que ser con los nombres de los colores, tiene que ser con los colores y listo,
   sin nombres". El color sale del NOMBRE curado del colorway (ver la cuna en product-card.php);
   si el nombre no nombra ningun color, ese producto sigue con el nombre y no entra aca. */
.pcard .swatches.sw-color{gap:7px;align-items:center}
.pcard .sw.sw-bola{width:22px;height:22px;min-width:22px;padding:0;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.18);background-clip:padding-box;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset;transition:transform .12s ease,box-shadow .12s ease}
.pcard .sw.sw-bola:hover,.pcard .sw.sw-bola:focus-visible{transform:scale(1.14);
  box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--ink)}
.pcard .sw.sw-bola.on{box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--ink)}
.pcard .sw-uno.sw-bola{cursor:default}
.pcard .swatches.sw-color .sw-nota{font-size:12px;color:#6B6B6B}
@media(max-width:640px){
  .pcard .sw.sw-bola{width:20px;height:20px;min-width:20px}
}


/* -- ALINEAR LA TARJETA (1-sep-2026) -------------------------------------------
   Iara, probando desde el celular: *"me molesta mucho que este poco alineada, realmente. quiero
   ver todo alineado, o sea los precios alineados, los colores, las ofertas, todo"*.

   La causa, medida en la grilla de Bicicletas: la fila de colores **cambia de alto segun el
   nombre**. "Pistacho y blanco montana" entra en un renglon y "Verde esmeralda metalizado y plata
   sombra" en dos, asi que la tarjeta de al lado arranca los TALLES 40px mas abajo, y de ahi para
   abajo se desalinea todo: talles, precio, cuotas y stock. No era el precio: era el bloque de
   arriba empujando.

   El arreglo es que cada bloque de la tarjeta ocupe SIEMPRE el mismo alto, tenga lo que tenga
   adentro. Asi dos tarjetas vecinas alinean aunque una tenga tres colores y la otra uno. */
/* 🔴 CUÑA 2-sep-2026 — EL MÍNIMO ERA MÁS CHICO QUE EL HIJO MÁS ALTO, ASÍ QUE NO ALINEABA.
   `min-height:26px` reservaba 26, pero el swatch que es FOTO mide 30x30 (`.pcard .sw`) y el que es
   bolita mide 22 dentro de una caja de 26. Resultado medido en /cascos/ a 1440 px: el Align II
   (6 swatches de foto) ponía TALLES a 376 px y el Propero 4 (6 bolitas) a 372. **4 px**, en 4 de 4
   filas, y lo mismo en /bicicletas/. Un mínimo solo alinea si es >= al hijo más alto: va 30. */
/* 30 px reservaba lugar para la bolita MÁS el renglón del nombre del color, que Iara sacó el
   3-sep. Sin ese renglón, el alto que hace falta es el de la bolita y su aire. */
.pcard .swatches{min-height:30px;align-content:flex-start}
/* cuando no sabemos el color de todos, la tarjeta dice cuantos hay: ocupa siempre lo mismo y no
   corta ninguna palabra (el intento de recortar los nombres con puntos suspensivos se salia del
   borde de la tarjeta; se vio en la captura). */
.pcard .swatches.sw-conteo{min-height:30px;align-items:center}
.pcard .sw-cuenta{font-size:12.5px;color:#6B6B6B;line-height:26px}
.pcard .swatches.sw-color{min-height:30px}

/* ── LOS FILTROS APLICADOS, ARRIBA DE LA GRILLA (cuña 2-sep-2026) ──────────────────────────
   Ver el motivo completo en la cuña de `template-parts/archive-grid.php`: con 0 resultados el
   grupo del filtro que aplicaste desaparecía de la barra y no había forma de sacarlo salvo
   limpiar todo. Cada chip es un link que saca SOLO ese filtro.
   Los valores salen del sistema que ya existe (`--line`, `--ink`, `--orange`, `--gray`): no se
   inventa ni un gris nuevo, que es justo el defecto que tiene el resto del CSS. */
.pk-archive .pk-aplicados{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pk-archive .pk-aplicados .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.pk-archive .pk-aplicados .ch{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:0 10px 0 12px;border:1px solid var(--line);border-radius:3px;background:#fff;
  font-size:13.5px;color:var(--ink);text-decoration:none;line-height:1}
.pk-archive .pk-aplicados .ch b{font-weight:700;color:var(--gray)}
.pk-archive .pk-aplicados .ch .x{font-size:17px;line-height:1;color:var(--gray)}
.pk-archive .pk-aplicados .ch:hover{border-color:var(--ink)}
.pk-archive .pk-aplicados .ch:hover .x{color:var(--orange)}
.pk-archive .pk-aplicados .ch:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.pk-archive .pk-aplicados .todo{font-size:13.5px;color:var(--orange-txt);text-decoration:underline}
@media (max-width:640px){
  /* la zona de toque llega a 44px sin agrandar el chip, igual que los talles y los swatches */
  .pk-archive .pk-aplicados .ch{min-height:36px;position:relative}
  .pk-archive .pk-aplicados .ch::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   🔴 CUÑA 7-sep-2026 — EL BOTÓN DE COMPRAR DE LA TARJETA (`.pk-cta-card`)
   Iara: *"que el botón de comprar exista y no esté escondido"*.
   Medido antes: 24 tarjetas en /shop/ a 390 px, 0 con botón visible (el `.add` vivía en
   `opacity:0` y en teléfono en `display:none`). Ahora el CTA vive en el pie, se ve SIEMPRE y en
   los dos dispositivos, y ocupa el ancho de la tarjeta para que el pulgar no falle.

   Dos jerarquías y no una, que es la regla de Refactoring UI (primario lleno, secundario con
   trazo): "Agregar" es la acción real —mete el producto al carrito sin salir de la góndola— y va
   lleno; "Ver producto" / "Elegir talle" solo navega y va con trazo. Si los dos fueran naranjas,
   la góndola sería una pared de botones idénticos y ninguno se destacaría.
   (Desde el 7-sep a la noche, EN COMPU el lleno del "Agregar" queda para el hover y el reposo va
   con trazo naranja: ver la cuña del @media de más abajo. En celular sigue lleno.)

   El alto es fijo (44 px) para no reabrir la ley del 1-sep de Iara: *"fijá el alto de cada bloque
   de la tarjeta, tenga lo que tenga adentro"*. 44 px es además el piso táctil de Apple y de las
   pautas de accesibilidad; el `.add` viejo medía 41 y estaba escondido.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.pk-archive .pk-cta-card{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;margin-top:10px;padding:11px 12px;border:1.6px solid transparent;
  border-radius:2px;font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.005em;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s;box-sizing:border-box}
.pk-archive .pk-cta-card svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
.pk-archive .pk-cta-add{background:var(--orange-solido);color:#fff}
.pk-archive .pk-cta-add:hover{background:var(--orange-hover)}
.pk-archive .pk-cta-ver{background:#fff;border-color:var(--ink);color:var(--ink)}
/* 🔴 el HUECO del CTA (7-sep): un producto sin stock ni dato B2B no tiene botón honesto que
   ofrecer, pero si no ocupa lugar su precio cae 54 px (44 del botón + 10 de margen) por debajo
   del de sus vecinas. `visibility:hidden` deja la caja y saca la tinta. */
.pk-archive .pk-cta-hueco{visibility:hidden;pointer-events:none}
.pk-archive .pcard:hover .pk-cta-ver{background:var(--ink);color:#fff}
/* el CTA es lo único de la tarjeta que NO hereda el naranja del `a:hover` (cuña del 2-sep):
   un botón que cambia de color al pasar por cualquier parte de la tarjeta se lee como un error */
.pk-archive .pcard:hover .pk-cta-add{color:#fff}

/* Estados del agregado. No hay cartel ni modal: el botón mismo dice qué pasó, que es la forma
   más corta de cerrar el bucle (Nielsen 1, visibilidad del estado del sistema). */
.pk-archive .pk-cta-add[data-estado="yendo"]{opacity:.75;pointer-events:none}
.pk-archive .pk-cta-add[data-estado="listo"]{background:#2c7a47}
.pk-archive .pk-cta-add[data-estado="error"]{background:var(--ink)}

/* 🔴 CUÑA 7-sep-2026 — EN COMPU EL "AGREGAR" VA CON TRAZO; EL LLENO QUEDA PARA EL HOVER.
   Decisión del Director con delegación de Iara, 7-sep. Medido en /categoria/accesorios/ a
   1440 px: hasta 6 "Agregar" naranjas llenos seguidos en la misma pantalla — el naranja de marca
   dejaba de ser ACENTO y pasaba a ser TAPIZ (la ley de identidad: cambia la composición, no el
   alfabeto). En compu el reposo es trazo y el hover invierte a lleno, que es exactamente lo que
   ya hace el `.pk-cta-ver` con el negro; en celular NO se toca (no hay hover que devuelva el
   lleno, y a 2 columnas la pared de naranjas no existe).
   · El texto del trazo va en `--orange-txt` (#C53D0F): el único naranja de texto del tema que
     pasa 4,5:1 sobre blanco (5,19 — medido en la cuña del 29-ago, style.css).
   · La caja NO cambia: el borde de 1.6 ya estaba reservado en `.pk-cta-card` (transparent) y el
     alto sigue en 44 px — la alineación de precios depende de eso (`qa_alineacion` en 0).
   · Los estados post-click quedan LLENOS también en compu ("Está en el carrito" verde, error
     tinta): que el después no se parezca al antes es lo que confirma que el click pasó.
   · El hover NO pisa a los estados (`:not([data-estado])`): sin eso, pasar el mouse sobre el
     "Está en el carrito" lo devolvía a naranja y el acuse se perdía justo al mirarlo. */
@media (min-width:901px){
  .pk-archive .pk-cta-add{background:#fff;border-color:var(--orange-txt);color:var(--orange-txt)}
  /* la regla de "la tarjeta en hover no pinta el CTA" era del lleno (texto blanco); el trazo
     necesita la suya o el texto desaparece sobre blanco */
  .pk-archive .pcard:hover .pk-cta-add{color:var(--orange-txt)}
  .pk-archive .pk-cta-add:hover:not([data-estado]),
  .pk-archive .pcard:hover .pk-cta-add:hover:not([data-estado]){
    background:var(--orange-solido);border-color:var(--orange-solido);color:#fff}
  /* con fondo lleno de estado, el texto vuelve a blanco aunque la tarjeta esté en hover */
  .pk-archive .pk-cta-add[data-estado="listo"],
  .pk-archive .pk-cta-add[data-estado="error"],
  .pk-archive .pcard:hover .pk-cta-add[data-estado="listo"],
  .pk-archive .pcard:hover .pk-cta-add[data-estado="error"]{color:#fff;border-color:transparent}
}

/* 🔴 CUÑA 7-sep-2026 — LA URGENCIA EN LA TARJETA (`.instock.urgente`)
   Iara: *"que haya razones para comprar hoy"*. El renglón usa los MISMOS colores que el de la
   ficha (`.pk-pdp .stock.urgent`, pdp.css:157) porque es el mismo dato: si la góndola lo dijera
   de otro color, la persona pensaría que son dos cosas distintas.
   Va pegado arriba del botón de comprar a propósito — la escasez tiene que estar al lado del
   botón, no enterrada en la ficha (skill `offers` → scarcity-urgency.md, "Where on the page does
   the scarcity appear? It should be next to the buy button").
   Y es escasez REAL: el número sale del stock disponible del ERP. Sin cantidad cargada no se
   dice nada. */
.pk-archive .instock.urgente{color:#c8371b;font-weight:800}
.pk-archive .instock.urgente .pt{background:#e0451f}

/* 🔴 7-sep-2026 — el hueco de "sin foto" se ve como una decisión y no como un error de carga:
   ícono de foto + el mismo texto que ya usa la ficha. Gris suave, nunca un recuadro (Iara:
   *"el recuadro/trazo gris alrededor del producto no me gusta en ningún producto"*). */
.pk-archive .pcard .ph .noimg{display:flex;flex-direction:column;align-items:center;gap:8px}
.pk-archive .pcard .ph .noimg svg{width:30px;height:30px;stroke:#c9c3bd;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ══ C14 · 27-sep-2026 (ronda "ojo humano"): "Comparar" en la tarjeta de bici + la barra fija ══
   El botón vive abajo a la derecha de la foto (arriba va "Envío gratis", abajo a la izquierda
   "Nuevo") y usa la casilla de los filtros; su zona de toque crece a 44 px sin cambiar el dibujo
   (la regla de EL DEDO, style.css). La barra: en el celular, fija abajo a todo el ancho, como la de
   compra de la ficha (.pk-stickybar); en la compu, flotante y centrada, lejos de las esquinas donde
   viven WhatsApp y Probotito. Mientras está, en el celular esos dos se esconden (igual que con los
   filtros abiertos: body.pk-filtros-abiertos) y la página suma abajo el alto de la barra. */
.pk-archive .pcard .pk-cmp{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:6px 9px;background:#fff;border:1px solid var(--line);border-radius:4px;
  font-family:inherit;font-size:12.5px;font-weight:700;line-height:1.1;color:var(--ink);cursor:pointer}
.pk-archive .pcard .pk-cmp[hidden]{display:none}
.pk-archive .pcard .pk-cmp::after{content:"";position:absolute;left:50%;top:50%;width:100%;min-width:44px;height:44px;transform:translate(-50%,-50%)}
.pk-archive .pcard .pk-cmp .box{width:15px;height:15px;border:1.6px solid var(--gray);border-radius:4px;position:relative;flex:0 0 auto}
.pk-archive .pcard .pk-cmp.on{border-color:var(--orange)}
.pk-archive .pcard .pk-cmp.on .box{background:var(--orange);border-color:var(--orange)}
.pk-archive .pcard .pk-cmp.on .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pk-cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  font-family:var(--f-body);transition:opacity .22s ease,visibility .22s ease}
.pk-cmpbar[hidden]{display:none}
.pk-cmpbar .cb-t{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1 1 150px}
.pk-cmpbar .cb-t b{font-size:15px;color:var(--ink)}
.pk-cmpbar .cb-t span{font-size:12.5px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-cmpbar .cb-x{background:none;border:0;padding:12px 2px;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--gray);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-cmpbar .cb-ir{flex:0 0 auto;padding:12px 16px;font-size:14.5px}
.pk-cmpbar .cb-msg{flex:1 0 100%;margin:0;font-size:12.5px;color:var(--orange-txt)}
.pk-cmpbar .cb-msg:empty{display:none}
@media (min-width:761px){
  .pk-cmpbar{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:min(620px,calc(100% - 220px));
    border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.07);padding:12px 16px}
}
@media (max-width:760px){
  body.pk-cmp-on{padding-bottom:120px}   /* la barra mide ~107 px en dos renglones (medido a 390) */
  body.pk-cmp-on .pk-bot,body.pk-cmp-on .pk-wafloat{display:none}
}
body.pk-ck-visible .pk-cmpbar{bottom:var(--pk-ck-h,68px)}
body.pk-flot-abajo .pk-cmpbar{opacity:0;visibility:hidden;pointer-events:none}

/* ── R2 · 🟡 8 (27-sep-2026, noche) · UNA GÓNDOLA SIN BOLITAS NO RESERVA SU RENGLÓN ─────────────────
   El espaciador `.swatches.sw-vacio` (product-card.php) existe para que la tarjeta sin bolitas arranque
   sus bloques a la altura de la vecina que SÍ las tiene (cuña del 2-sep). Desde N14/N15 Nutrición no
   tiene ninguna bolita, y el renglón quedaba reservado en las 24 tarjetas: 40 px vacíos entre el nombre
   y "3 sabores" (55 a 83 px de hueco medido). Si en la grilla no hay NI UNA tarjeta con bolitas, no hay
   con quién alinear: el espaciador no se dibuja. Con una sola que las tenga, vuelve en todas.
   Lo mismo el renglón gris reservado (`.spec.spec-vacio`, 17 px): los 58 px que midió el auditor eran los
   dos huecos juntos. Si ninguna tarjeta de la grilla tiene subtítulo o medida, no se reserva.
   Candado: qa_tarjeta_lo_justo.cjs (y qa_alineacion.cjs sigue midiendo las góndolas CON bolitas). */
.pk-archive .grid:not(:has(.pcard .swatches:not(.sw-vacio))) .pcard .swatches.sw-vacio{display:none}
.pk-archive .grid:not(:has(.pcard .spec:not(.spec-vacio))) .pcard .spec.spec-vacio{display:none}

/* ══ 29-sep-2026 · LOS DOS PRECIOS (inc/pk-precios.php) ════════════════════════════════════════════
   El precio grande de la tarjeta es el de tarjeta (lista); abajo de las 3 sin interés, el de contado con
   su condición, en DOS renglones fijos: el número y "en efectivo o transferencia" (141 px a 12 px, cabe en
   la tarjeta más angosta, 148 px a 360). Así todas las tarjetas miden lo mismo y los precios no quedan en
   escalera (R4). El renglón vacío de las que no tienen precio reserva lo mismo (cufoot-vacio). */
.pk-archive .cu24.pk-pc{line-height:1.3}
.pk-archive .cu24.pk-pc b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.pk-archive .cu24.pk-pc span{display:block;font-size:12px;white-space:nowrap}
/* 29-sep-2026 (ronda 2, Iara: "no pongamos los dos precios"): el renglón del contado pasó a ser el chip del
   descuento, en los MISMOS dos renglones ("10% OFF" / "en efectivo o transferencia"; en Specialized "Precio
   especial", sin %; en una SL8 verificada, "Nuevo precio sugerido"). Mismo alto de renglón: la góndola no se
   corre (R4). La SL8 ya no lleva la frase arriba del precio: el sugerido es el contado, que no se muestra. */
.pk-archive .cu24.pk-dto-t b.pk-dto-c{display:inline-block;color:#2f7d4f;background:#eef6f0;border-radius:4px;padding:0 5px;white-space:nowrap}
/* 🔴 6-oct-2026 (ronda 3, inc/pk-precios.php · Iara: "que se entienda que son los mismos precios que en la tienda").
   El número grande vuelve a ser el contado. Debajo, pegada, su condición ("en efectivo o transferencia", 12 px: 141 px,
   cabe en la tarjeta más angosta); después la lista, "Con tarjeta $X" (el número en negro), y el chip de las 3 sin
   interés, que son de la lista. Los mismos tres renglones en el hueco de las que no tienen precio (cufoot-vacio): R4. */
.pk-archive .cu24.pk-pc3{display:block;line-height:1.3;margin:-4px 0 7px}
.pk-archive .cu24.pk-pc3 .c{display:block;font-size:12px;white-space:nowrap}
.pk-archive .cu24.pk-pc3 .t{display:block;font-size:12.5px;white-space:nowrap;margin-top:4px}
.pk-archive .cu24.pk-pc3 .t b{font-weight:700;color:var(--ink)}
/* 🔴 9-oct-2026 (RONDA 4): debajo de la lista, "Precio especial $X" / su condición (style.css, .pk-pe4) y después el chip de
   las 3 sin interés. El mismo lugar que los dos renglones de la ronda 3, y el hueco de las que no tienen precio reserva los
   mismos (cufoot-vacio): todas las tarjetas miden lo mismo (R4). */
.pk-archive .cu24.pk-pe4{margin:-4px 0 7px}
/* 14-oct-2026 (pedido de Iara): el contado de la tarjeta en verde de ahorro (le ganaba .pk-archive .cu24 { color: gris }), el número en negrita */
.pk-archive .cu24.pk-pe4{color:#2f7d4f;font-weight:600}
.pk-archive .cu24.pk-pe4 .a b{font-size:14px;font-weight:800;color:#2f7d4f}

/* 9-oct-2026 (ronda 2). Fila 9: toda bici nueva dice "Envío gratis", también la agotada: con el cartel "Sin stock" a la
   izquierda, este pasa a la derecha. Fila 10: los chips de talle de la tarjeta tienen las tres caras de la ficha (en tienda ·
   en 72 hs · sin stock): el que no se trabaja es la misma cara, sin caja plana aparte. */
.pk-archive .pcard .pk-sinstock ~ .freeship{left:auto;right:12px}
.pk-archive .tchip[disabled]{cursor:default}

/* ══ 14-oct-2026 · LAS FOTOS DE LA GÓNDOLA, MEDIDAS CONTRA LA TARJETA (Iara, TERCERA vez: "las fotos me siguen apareciendo chicas") ══
   Medido en el celu (390): la bici ocupaba el 71 % del ancho de su tarjeta (~120×70 px), un casco el 70 % del alto, un gel el
   67 %. El producto ahora lo agranda y lo centra main.js (la misma medición que la ficha: el bbox del producto en la foto) y
   acá se saca de encima de la foto lo que la tapaba:
   · "Comparar" deja de ser un botón de 97×29 abajo a la derecha de la foto: es un renglón chico a la derecha de la marca
     (`.row1`, product-card.php). El dibujo es chico; la zona de toque sigue siendo de 44 px (::after, regla de EL DEDO).
   · En el celu, los carteles que siguen sobre la foto ("Envío gratis", "Sin stock", "Nuevo", "$ X menos que…") son chips
     chicos pegados a las esquinas: la franja que ocupan la mide main.js y el producto no entra ahí.
   · Sin JavaScript queda `padding:8px` (antes 16). Candado: qa_foto_pantalla.cjs, parte 2. */
.pk-archive .pcard .pk-cmp{position:relative;right:auto;bottom:auto;z-index:2;margin-left:auto;padding:0;gap:6px;
  background:none;border:0;font-size:12px;font-weight:600;line-height:16px;color:var(--ink)}
.pk-archive .pcard .pk-cmp.on{color:var(--orange-txt)}
@media (max-width:760px){
  .pk-archive .pcard .freeship,.pk-archive .pcard .pk-sinstock,.pk-archive .pcard .nuevo{top:6px;left:6px;
    font-size:10.5px;letter-spacing:.05em;padding:3px 6px;line-height:1.1}
  /* con "Sin stock" arriba no entran los dos en 167 px (se pisaban: 12–98 y 49–155): "Envío gratis" baja */
  .pk-archive .pcard .pk-sinstock ~ .freeship{top:auto;bottom:6px;left:6px;right:auto}
  .pk-archive .pcard .freeship ~ .nuevo{top:auto;bottom:6px}
  .pk-archive .pcard .pk-sinstock ~ .nuevo{top:6px;bottom:auto;left:auto;right:6px}
  /* "$ X menos que la 2026": abajo a la izquierda (arriba quedaba debajo de "Envío gratis" y le comía 50 px a la bici) */
  .pk-archive .pcard .pk-cartel-cmp{top:auto;bottom:6px;left:6px}
  .pk-archive .pcard .pk-cartel-cmp ~ .nuevo{top:6px;bottom:auto;left:auto;right:6px}
}