/* nv-coleccion.css — colección y búsqueda de La Novedad (T5, §2.15–§2.16 de la especificación).
   Replica la colección de la tienda Nitro de lanovedad.com con valores medidos (coleccion.md §2–§9 y las capturas de
   1440 y 390 emuladas) o de su configuración (collection.json, bee-loading.css y bee-pagination.css: se citan valores,
   no se copia su CSS). Solo consume los tokens --nv-* de nv-base.css. Todo cuelga de body.nv-col (/shop/,
   /collections/*) o body.nv-busqueda: Blocksy maqueta [data-products] y .ct-container a su manera y aquí se corrige
   solo en estas páginas, con la especificidad justa y sin !important. */

/* ── Contenedor: el de Blocksy (1410 a 1440 con los tokens de T0) y el margen inferior de sección de Nitro:
   55 px en la colección (50 en móvil) y 100/80/50 en la búsqueda. ── */
body.nv-col main#main>.ct-container{padding-bottom:55px}
body.nv-busqueda main#main>.ct-container{padding-bottom:100px}
@media (max-width:1024px){body.nv-busqueda main#main>.ct-container{padding-bottom:80px}}
@media (max-width:767px){body.nv-col main#main>.ct-container,body.nv-busqueda main#main>.ct-container{padding-bottom:50px}}
body.nv-col .woocommerce-products-header,body.nv-busqueda .woocommerce-products-header{margin:0;padding:0}
/* Blocksy abre y cierra <div class="woo-listing-top"> alrededor del contador y el orden de Woo, que aquí no se pintan. */
body.nv-col .woo-listing-top,body.nv-busqueda .woo-listing-top{display:none}

/* ── Encabezado (§2.15): sin imagen, fondo blanco, relleno 150/50 (tableta 120/50, móvil 120/0). Esos 150 px
   incluyen la cabecera transparente de T1, que va encima (position:absolute) como en Nitro: medido en Shopify a 1440,
   el título ocupa y≈190–250 y las migas y≈307 con el anuncio de 35 px encima. ── */
.nv-col-cab{box-sizing:border-box;padding:150px 0 50px;background:#fff;text-align:center}
.nv-col-cab__titulo{--theme-font-size:72px;--theme-font-weight:600;--theme-line-height:1;margin:0 0 40px;padding:0;
  font-family:var(--nv-font);font-size:72px;font-weight:600;line-height:1;letter-spacing:0;text-transform:uppercase;
  color:var(--nv-card-title);overflow-wrap:anywhere}
/* Medido lado a lado con Shopify a 1440: su «Hogar» va en peso 500 (aquí salía 400) y la franja empieza 4 px más
   abajo que con el alto de línea de 18 de la base: con 22 queda en y=374 (+ la franja de staging), como Nitro. */
.nv-col-cab .nv-migas{display:flex;justify-content:center;margin:0 0 5px;line-height:22px}
.nv-col-cab .nv-migas__lista{justify-content:center}
.nv-col-cab .nv-migas__item a{font-weight:500}

/* ── Descripción: todo el ancho del contenedor, a la izquierda, Jost 14/23,8 #151515, 50 px arriba (sin ancho
   máximo: la de WordPress tenía 62ch y gris). ── */
.nv-col-desc{margin:50px 0 0;font-size:14px;line-height:23.8px;color:var(--nv-ink);text-align:left}
.nv-col-desc p{margin:0}
.nv-col-desc p+p{margin-top:12px}

/* ── Barra: FILTRAR POR · orden. Medido en Shopify a 1440: 50 px bajo la franja o la descripción (en
   /collections/all, sin descripción, igual) y la primera fila de tarjetas 24 px debajo. ── */
.nv-col-barra{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:28px;margin:50px 0 24px}
body.nv-busqueda .nv-col-barra{margin-top:0}
.nv-col-barra .nv-col-barra__filtrar{display:inline-flex;align-items:center;gap:7px;min-height:28px;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--nv-ink);font-family:var(--nv-font);font-size:11px;font-weight:700;line-height:1;letter-spacing:0;
  text-transform:uppercase;box-shadow:none;cursor:pointer}
.nv-col-barra .nv-col-barra__filtrar:hover,.nv-col-barra .nv-col-barra__filtrar[aria-expanded=true]{background:transparent;border:0;color:var(--nv-accent)}
.nv-col-barra__filtrar .nv-i{width:14px;height:14px;stroke-width:2}

/* Orden: el select nativo de siempre (GET orderby) con aspecto de texto, 15/500, mín. 120 px, triángulo relleno. */
.nv-orden{position:relative;display:inline-flex;align-items:center;margin:0 0 0 auto}
.nv-orden__rotulo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nv-orden .nv-orden__select{width:auto;min-width:120px;height:28px;min-height:28px;margin:0;padding:0 26px 0 0;border:0;border-radius:0;box-shadow:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0h9L4.5 5z' fill='%23151515'/%3E%3C/svg%3E") right 2px center/9px 5px no-repeat;
  font-family:var(--nv-font);font-size:15px;font-weight:500;line-height:28px;color:var(--nv-ink);text-align:right;text-align-last:right;cursor:pointer}
.nv-orden .nv-orden__select:focus{background-size:9px 5px}
.nv-orden .nv-orden__select option{text-align:left}
.nv-orden .nv-orden__ir{margin-left:8px;padding:4px 10px;font-size:12px}

/* ── Panel de filtros #nv-filtros ─────────────────────────────────────────────────────────────
   Un solo formulario con las clases del cajón de T0. En 1024 o menos (y siempre en la búsqueda) es el cajón
   izquierdo de Nitro: 100vw − 65 px, máx. 350, cabecera #151515 con «Cerrar filtro» blanco 11/700. ── */
#nv-filtros{--nv-cajon-w:min(350px,calc(100vw - 65px))}
.nv-filtros__cab{flex:0 0 auto;display:flex;align-items:center;min-height:50px;padding:0 20px;background:var(--nv-ink)}
.nv-filtros .nv-filtros__cerrar{display:inline-flex;align-items:center;gap:8px;min-height:50px;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;color:#fff;font-family:var(--nv-font);font-size:11px;font-weight:700;line-height:1;letter-spacing:0;box-shadow:none;cursor:pointer}
.nv-filtros .nv-filtros__cerrar:hover{background:transparent;border:0;color:#fff;opacity:.8}
.nv-filtros__cerrar .nv-i{width:16px;height:16px;stroke-width:2}
.nv-filtros__cuerpo{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:25px 20px 30px}
.nv-faceta{margin:0 0 30px}
.nv-faceta:last-child{margin-bottom:0}

/* Desde 1025 px (salvo búsqueda) Nitro usa el estilo «área»: un panel dentro de la página, bajo la barra, del ancho
   del contenedor, padding 30, borde superior 1 px #e5e5e5 y facetas en columnas de 345 px. */
@media (min-width:1025px){
  .nv-filtros:not(.nv-filtros--cajon){position:static;inset:auto;z-index:auto;display:none;width:auto;max-width:none;margin:0 0 30px;
    padding:30px;border-top:1px solid var(--nv-border);background:#fff;transform:none;visibility:visible;overflow:visible;transition:none}
  .nv-filtros:not(.nv-filtros--cajon).is-desplegado{display:block}
  .nv-filtros:not(.nv-filtros--cajon) .nv-filtros__cab{display:none}
  .nv-filtros:not(.nv-filtros--cajon) .nv-filtros__cuerpo{display:flex;flex-wrap:wrap;gap:30px 0;padding:0;overflow:visible}
  .nv-filtros:not(.nv-filtros--cajon) .nv-faceta{flex:0 0 345px;max-width:100%;margin:0;padding-right:30px;box-sizing:border-box}
}

/* Título de faceta 13/600 #151515 con triángulo; acordeón (Nitro: bee-accordion-true). */
.nv-filtros .nv-faceta__titulo{position:relative;display:flex;align-items:center;width:100%;min-height:0;margin:0 0 15px;padding:0 20px 0 0;border:0;border-radius:0;
  background:transparent;color:var(--nv-ink);font-family:var(--nv-font);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;
  text-align:left;box-shadow:none;cursor:pointer}
.nv-filtros .nv-faceta__titulo:hover{background:transparent;border:0;color:var(--nv-ink)}
.nv-faceta__tri{position:absolute;right:2px;top:50%;width:0;height:0;margin-top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .2s ease}
.nv-faceta.is-cerrada .nv-faceta__tri{transform:rotate(-90deg)}
.nv-faceta.is-cerrada .nv-faceta__valores{display:none}
.nv-faceta__valores{margin:0;padding:0;list-style:none}
.nv-faceta__valores li{margin:0 0 10px}
.nv-faceta__valores li:last-child{margin-bottom:0}

/* Casillas de Disponibilidad: 18×18, borde 2 px #e5e5e5; marcada, borde #151515 y visto. Los conteos que Nitro trae
   ocultos no se calculan. */
.nv-check{display:inline-flex;align-items:center;gap:10px;color:var(--nv-ink);font-size:14px;line-height:1.5;text-decoration:none}
.nv-check:hover{color:var(--nv-accent)}
.nv-check__caja{position:relative;flex:none;box-sizing:border-box;width:18px;height:18px;border:2px solid var(--nv-border);background:#fff;transition:border-color .2s ease}
.nv-check:hover .nv-check__caja,.nv-check.is-on .nv-check__caja{border-color:var(--nv-ink)}
.nv-check.is-on .nv-check__caja::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;border:solid var(--nv-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Faceta de Categorías (2026-09-17). Cada fila ocupa el ancho de la columna para que el número quede
   alineado a la derecha, como en las tiendas que sí los enseñan; el nombre puede partirse en dos líneas
   y el número nunca. Con 12 categorías la lista mide ~340 px: cabe sin desplazamiento en el cajón del
   móvil y en la columna de 345 px del escritorio. */
.nv-faceta--cats .nv-check{display:flex;width:100%;gap:10px}
.nv-check__txt{flex:1 1 auto;min-width:0}
.nv-check__n{flex:none;color:var(--nv-muted-aa,#6b6b6b);font-size:13px;font-variant-numeric:tabular-nums}
.nv-check.is-on .nv-check__n{color:var(--nv-ink)}
.nv-faceta--cats .nv-faceta__valores li{margin-bottom:8px}

/* Precio: dos <input type="range"> superpuestos; los tiradores reciben el puntero y la pista no. */
.nv-precio{margin:0}
.nv-precio__rango{position:relative;height:24px;margin:4px 0 12px}
.nv-precio__pista{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--nv-border)}
.nv-precio__tramo{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--nv-ink)}
.nv-precio .nv-precio__tirador{position:absolute;left:0;top:0;z-index:2;width:100%;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;outline:0;-webkit-appearance:none;appearance:none;pointer-events:none}
.nv-precio__tirador::-webkit-slider-runnable-track{height:24px;background:transparent;border:0}
.nv-precio__tirador::-moz-range-track{height:24px;background:transparent;border:0}
.nv-precio__tirador::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:14px;height:14px;margin-top:5px;border:0;border-radius:50%;
  background:var(--nv-ink);cursor:pointer}
.nv-precio__tirador::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border:0;border-radius:50%;background:var(--nv-ink);cursor:pointer}
.nv-precio__tirador:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(161,146,61,.45)}
.nv-precio__tirador:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(161,146,61,.45)}
.nv-precio__pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.nv-precio__txt{margin:0;font-size:14px;line-height:1.5;color:var(--nv-ink)}
.nv-precio .nv-precio__btn{min-height:34px;padding:0 18px;border:0;border-radius:0;background:var(--nv-dark);color:#fff;
  font-family:var(--nv-font);font-size:12px;font-weight:600;line-height:1;letter-spacing:.3px;text-transform:uppercase}
.nv-precio .nv-precio__btn:hover{background:var(--nv-oro);border:0;color:#151515}

/* ── Filtros activos: «N productos encontrados» (N en dorado), una píldora gris por filtro con «×» y «Limpiar
   todo» en píldora dorada con texto blanco. ── */
.nv-activos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0 0 30px}
.nv-activos__n{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--nv-ink)}
.nv-activos__num{color:var(--nv-accent)}
.nv-activos__lista{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.nv-activos__lista li{margin:0}
.nv-activos__pill,.nv-activos__limpiar{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 14px;border-radius:15px;
  font-size:13px;font-weight:500;line-height:1;text-decoration:none;transition:background-color var(--nv-ease),color var(--nv-ease)}
.nv-activos__pill{background:var(--nv-soft-bg);color:var(--nv-ink)}
.nv-activos__pill:hover{background:var(--nv-border);color:var(--nv-ink)}
.nv-activos__x{font-size:15px;line-height:1}
.nv-activos__limpiar{background:var(--nv-oro);color:#151515}
.nv-activos__limpiar:hover{background:var(--nv-oro-vivo);color:#151515}

/* ── Rejilla (§2.15): 4 / 4 / 2, separación 30/30 (escritorio), 15/30 (tableta), 15/15 (móvil) → tarjeta de 330 a
   1440, 237 a 1024 y 165 a 375 (medido en Shopify). Búsqueda (§2.16): 6 / 2 / 2, 30/30 (móvil 10/10). ── */
body.nv-col ul.products.nv-grid,body.nv-busqueda ul.products.nv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:30px;row-gap:30px;
  margin:0;padding:0;list-style:none}
body.nv-busqueda ul.products.nv-grid--busqueda{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Si alguna hoja de Woo pone su clearfix (::before/::after con display:table), en una rejilla serían celdas vacías. */
ul.products.nv-grid::before,ul.products.nv-grid::after{content:none;display:none}

/* ── «Cargar más» + barra de progreso (bee-loading.css): botón #222 16/600 mín. 40, padding 0 40 (25 en pantallas
   menores), hover dorado, 20 px bajo la rejilla; pista 450×6 #e5e5e5 20 px debajo (250 en móvil) con el avance de
   2 px dorado centrado y 2 px de margen; texto 12/500 #27262c 10 px debajo. ── */
.nv-cargar{display:flex;flex-direction:column;align-items:center;margin:20px 0 0;text-align:center}
.nv-cargar .nv-cargar__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:40px;margin:0;padding:0 40px;
  border:0;border-radius:0;background:var(--nv-dark);color:#fff;font-family:var(--nv-font);font-size:16px;font-weight:600;line-height:1;
  text-decoration:none;transition:background-color var(--nv-ease),opacity var(--nv-ease)}
.nv-cargar .nv-cargar__btn:hover,.nv-cargar .nv-cargar__btn:focus-visible{background:var(--nv-oro);color:#151515}
.nv-cargar .nv-cargar__btn.is-cargando{opacity:.6;pointer-events:none}
.nv-cargar__barra{width:100%}
.nv-cargar__pista{position:relative;display:block;width:450px;max-width:100%;height:6px;margin:20px auto 0;background:var(--nv-border)}
.nv-cargar__avance{position:absolute;left:0;top:50%;height:2px;max-width:calc(100% - 4px);margin:0 2px;transform:translateY(-50%);
  background:var(--nv-accent);transition:width .3s cubic-bezier(.19,1,.22,1)}
.nv-cargar__txt{margin:10px 0 0;font-size:12px;font-weight:500;line-height:1.5;color:var(--nv-card-title)}

/* ── Búsqueda: paginación numerada centrada (bee-pagination.css): 40×40, borde 2 px #e5e5e5, 11/600 MAYÚSCULAS;
   la actual rellena #222; «Próximo ▸» con mín. 80 y padding 0 15; 10 px entre casillas (medido en la captura). ── */
.nv-paginacion{display:flex;justify-content:center;margin:40px 0 0}
.nv-paginacion ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.nv-paginacion ul.page-numbers li{margin:0}
.nv-paginacion .page-numbers:not(ul){display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:40px;height:40px;padding:0 5px;
  border:2px solid var(--nv-border);background:transparent;color:var(--nv-ink);font-size:11px;font-weight:600;line-height:1;text-transform:uppercase;text-decoration:none;
  transition:border-color var(--nv-ease),color var(--nv-ease),background-color var(--nv-ease)}
.nv-paginacion a.page-numbers:hover{border-color:var(--nv-dark);color:var(--nv-dark)}
.nv-paginacion .page-numbers.current{border-color:var(--nv-dark);background:var(--nv-dark);color:#fff}
.nv-paginacion .page-numbers.dots{border-color:transparent}
.nv-paginacion .page-numbers.next,.nv-paginacion .page-numbers.prev{min-width:80px;padding:0 15px}
.nv-paginacion .page-numbers.next::after,.nv-paginacion .page-numbers.prev::before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}
.nv-paginacion .page-numbers.next::after{border-left:6px solid currentColor}
.nv-paginacion .page-numbers.prev::before{border-right:6px solid currentColor}

/* ── Sin productos (Suecos, o filtros sin resultado) ── */
.nv-col-vacio{margin:50px 0 0;font-size:14px;line-height:1.7;color:var(--nv-ink);text-align:center}

/* ── Tableta (768–1024) ── */
@media (max-width:1024px){
  .nv-col-cab{padding:120px 0 50px}
  .nv-col-cab__titulo{--theme-font-size:60px;font-size:60px;margin-bottom:30px}
  body.nv-col ul.products.nv-grid{column-gap:15px;row-gap:30px}
  body.nv-busqueda ul.products.nv-grid--busqueda{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv-cargar .nv-cargar__btn{padding:0 25px}
}

/* ── Móvil (≤767): encabezado 120/0 y título 42 px; FILTRAR POR solo con el icono (el texto queda para el lector de
   pantalla); el orden muestra «Clasificar» con el select encima, transparente (16 px para que iOS no amplíe al
   tocarlo); rejilla de 2 con 15/15 (búsqueda 10/10); pista de 250. ── */
@media (max-width:767px){
  .nv-col-cab{padding:120px 0 0}
  .nv-col-cab__titulo{--theme-font-size:42px;font-size:42px}
  .nv-col-barra__filtrar-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .nv-col-barra .nv-col-barra__filtrar .nv-i{width:18px;height:18px}
  .nv-orden__rotulo{position:static;width:auto;height:auto;margin:0;padding:0 14px 0 0;overflow:visible;clip:auto;white-space:nowrap;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0h9L4.5 5z' fill='%23151515'/%3E%3C/svg%3E") right center/9px 5px no-repeat;
    font-size:15px;font-weight:500;line-height:28px;color:var(--nv-ink);cursor:pointer}
  .nv-orden .nv-orden__select{position:absolute;inset:0;z-index:1;width:100%;min-width:0;height:100%;padding:0;opacity:0;font-size:16px}
  /* El globo de WhatsApp (.nv-flotante-wa, fijo, z-index 998) cae justo encima de FILTRAR POR en la posición en la que
     se CARGA una colección a 390: document.elementFromPoint sobre el centro del botón devolvía el icono de WhatsApp
     (botón [15,653]-[33,681], globo [10,634]-[70,694]; medido el 2026-09-13 en /collections/tenis/, /ofertas-1/,
     /sandalias/ y /tacones/), así que el toque abría el chat en vez del cajón de filtros. Shopify libra por 4 px, un
     margen que cualquier línea de más en la descripción vuelve a comerse, así que no basta con mover la barra: la
     barra se eleva POR ENCIMA de la capa de flotantes (y su icono se ve encima del globo, como en Shopify), pero solo
     sus controles capturan el toque — el hueco transparente entre ellos sigue dejándolo pasar al globo. Con un cajón
     abierto (body.nv-lock) vuelve a su sitio: el velo tiene ese mismo 999 y debe cubrirla. */
  .nv-col-barra{position:relative;z-index:calc(var(--nv-z-float) + 1);pointer-events:none}
  .nv-col-barra>*{pointer-events:auto}
  /* Y para que además se VEA cuando cae sobre el círculo negro del globo: un halo blanco de 1,5 px alrededor del
     icono. Sobre el fondo blanco de la página no se nota; sobre el globo, el icono se lee (en Shopify el icono
     queda justo encima del globo, sobre blanco, y por eso allí no hace falta). */
  .nv-col-barra .nv-col-barra__filtrar .nv-i{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}
  body.nv-lock .nv-col-barra{z-index:auto}
  body.nv-col ul.products.nv-grid,body.nv-busqueda ul.products.nv-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15px;row-gap:15px}
  body.nv-busqueda ul.products.nv-grid--busqueda{column-gap:10px;row-gap:10px}
  .nv-cargar__pista{width:250px}
  .nv-paginacion .page-numbers:not(ul){min-width:36px;height:36px}
  .nv-paginacion .page-numbers.next,.nv-paginacion .page-numbers.prev{min-width:60px;padding:0 10px}
}

@media (prefers-reduced-motion:reduce){
  .nv-cargar__avance,.nv-faceta__tri,.nv-check__caja{transition:none}
}