#vspf-row{display:flex;gap:2.5rem;align-items:flex-start;max-width:1520px;margin:2rem auto 5rem;padding:0 var(--vsp-aire);box-sizing:border-box;}
#vspf-sidebar{flex:0 0 258px;font-family:'Geist',sans-serif;}
/* El numero de columnas es lo unico que cambia entre la vista de cuadricula y la de lista.
   Antes iba junto al resto en la misma declaracion, asi que la rejilla se imponia tambien
   cuando el visitante pedia la lista: el boton cambiaba la clase y no pasaba nada. */
#vspf-row ul.products{flex:1 1 auto;margin:0!important;max-width:none!important;padding:0!important;}
/* Las columnas dependen de vsp-vista-3 / -4 / -lista, que **imprime el servidor** leyendo
   la cookie. Esto es lo que quita el parpadeo, y conviene entender por que:

   el <ul> que manda WooCommerce no trae ninguna clase de vista. Cuando las columnas
   dependian de products-grid-view -que anadia el JavaScript de Kadence despues de pintar-
   los primeros milisegundos no aplicaba ninguna regla nuestra, ganaba .grid-lg-col-4 del
   tema y la tienda saltaba de 4 columnas a 3 a la vista del visitante.

   Con la clase puesta en el servidor no hay ningun momento sin regla. */
/* SECCION 2 de la consolidacion: rejilla de la tienda.
   Lo fluido se descarto por una razon de producto, no tecnica: las vistas llevan el numero en
   el nombre y el visitante las elige a proposito. Si "tres por fila" muestra cuatro, la vista
   miente. La vista elegida se respeta SIEMPRE; lo que cambia con el tamano es que vistas se
   ofrecen.
     Telefono (<=600):  filas o dos columnas
     Tablet (601-1024): filas o tres columnas
     Escritorio:        filas, tres o cuatro columnas
   El problema medido que lo motivo: en tablet las tarjetas salian de 353 a 481px, mas grandes
   que en escritorio (242-283px). Con tres columnas en ese rango bajan a 231-316px, que es el
   tamano de siempre. */
body.vsp-vista-3 #vspf-row ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
body.vsp-vista-4 #vspf-row ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
@media(max-width:1024px){
  body.vsp-vista-3 #vspf-row ul.products,body.vsp-vista-4 #vspf-row ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:600px){
  body.vsp-vista-3 #vspf-row ul.products,body.vsp-vista-4 #vspf-row ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* El boton de cuatro columnas no se ofrece donde no cabe: en tablet daria tarjetas mas
   grandes que en escritorio, y en telefono no tiene sentido. No se oculta el resultado, se
   retira la opcion. */
@media(max-width:1024px){ .vsp-vistas .vsp-vista[data-vista="4"]{display:none;} }
body.vsp-vista-lista #vspf-row ul.products{grid-template-columns:minmax(0,1fr)!important;}

#vspf-sidebar .vspf-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.4rem;}
#vspf-sidebar .vspf-head-t{font-family:'Geist',sans-serif;font-size:21px;font-weight:600;color:#1F271B;}
#vspf-sidebar .vspf-clear{font-size:11px;letter-spacing:.05em;color:#654F6F;text-decoration:none;text-transform:uppercase;}
/* Un unico separador para todo el panel, del mismo color en todas partes. Antes habia
   dos definiciones (#ECECEA entre grupos y rgba(31,39,27,.12) sobre el boton) y el
   conmutador "Solo en oferta" quedaba entre las dos: se veian dos lineas seguidas. */
#vspf-sidebar .vspf-grp{border:0;margin-bottom:1.4rem;}
#vspf-sidebar .vspf-grp + .vspf-grp{border-top:1px solid #ECECEA;padding-top:1.6rem;}
#vspf-sidebar h2{font-size:12px;letter-spacing:.06em;color:#1F271B;margin:0 0 .9rem;font-weight:700;text-transform:uppercase;}
.vspf-checks{display:flex;flex-direction:column;gap:.1rem;}
.vspf-check{display:flex;align-items:center;gap:.6rem;font-size:14px;color:#3a3a3a;text-decoration:none;padding:.4rem 0;}
.vspf-check .vspf-box{width:17px;height:17px;border:1.5px solid #C7C1CE;border-radius:4px;flex:0 0 auto;position:relative;transition:.15s;}
.vspf-check.is-on .vspf-box{background:#654F6F;border-color:#654F6F;}
.vspf-check.is-on .vspf-box::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.vspf-check.is-on .vspf-lbl{color:#1F271B;font-weight:600;}
.vspf-chips2{display:flex;flex-wrap:wrap;gap:.5rem;}
.vspf-chip2{border:1px solid #D9D4DE;border-radius:20px;padding:.42rem .85rem;font-size:12.5px;color:#4a4a4a;text-decoration:none;transition:.15s;cursor:pointer;}
.vspf-chip2:hover{border-color:#654F6F;color:#654F6F;}
.vspf-chip2.is-on{background:#654F6F;color:#fff;border-color:#654F6F;}
.vspf-range{position:relative;height:32px;margin:.6rem 0 .9rem;}
.vspf-range-track{position:absolute;top:14px;left:10px;right:10px;height:4px;background:rgba(31,39,27,0.12);border-radius:4px;}
.vspf-range-fill{position:absolute;top:0;height:4px;background:#654F6F;border-radius:4px;}
/* El tema pone borde y radio a TODO input, y un range cae en ese saco: de ahi el recuadro. */
.vspf-range input[type=range]{position:absolute;top:6px;left:0;width:100%;margin:0;padding:0;background:none;border:none;border-radius:0;box-shadow:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:20px;}
.vspf-range input[type=range]:focus{border:none;box-shadow:none;outline:none;}
.vspf-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#FFFFFF;border:2px solid #654F6F;box-shadow:0 1px 4px rgba(31,39,27,0.18);cursor:pointer;transition:transform 160ms var(--vsp-ease),box-shadow .2s var(--vsp-ease);}
.vspf-range input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12);box-shadow:0 2px 8px rgba(31,39,27,0.24);}
.vspf-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#FFFFFF;border:2px solid #654F6F;box-shadow:0 1px 4px rgba(31,39,27,0.18);cursor:pointer;}
.vspf-range input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid #654F6F;outline-offset:2px;}
.vspf-range-vals{display:flex;gap:.6rem;align-items:flex-end;}
.vspf-rv{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.vspf-rv span{font-family:'Geist',sans-serif;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(31,39,27,0.72);}
.vspf-rv input{width:100%;box-sizing:border-box;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;color:#1F271B;background:#FFFFFF;border:1px solid rgba(31,39,27,0.18);border-radius:8px;padding:9px 10px;outline:none;transition:border-color .2s var(--vsp-ease);}
.vspf-rv input:focus{border-color:#654F6F;}
/* El conmutador de oferta no es un grupo: va pegado al bloque de acciones, sin linea propia. */
.vspf-oferta-grp{margin:1.4rem 0 0;}
.vspf-oferta{display:flex;align-items:center;gap:.7rem;font-size:14px;color:#3a3a3a;text-decoration:none;}
.vspf-switch{width:38px;height:22px;border-radius:22px;background:#D9D4DE;position:relative;transition:.2s;flex:0 0 auto;}
.vspf-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;}
.vspf-oferta.is-on .vspf-switch{background:#654F6F;}
.vspf-oferta.is-on .vspf-switch::after{left:18px;}
.vspf-oferta:hover,.vspf-oferta:focus{color:#3a3a3a;}
.vspf-check:hover .vspf-lbl,.vspf-check:focus .vspf-lbl{color:#1F271B;}
.vspf-clear:hover{color:#654F6F;}
/* Sin borde: esta barra flota sobre el contenido del panel y su linea se juntaba con la
   del grupo que quedara debajo, leyendose como una linea divisora duplicada. La sombra
   suave la separa del contenido sin dibujar una linea. */
.vspf-actions{display:block;position:sticky;bottom:0;background:#FFFFFF;padding:1rem 0;margin-top:1.4rem;box-shadow:0 -12px 12px -12px rgba(31,39,27,0.18);}
.vspf-apply{display:block;text-align:center;background:#654F6F;color:#FFFFFF;border-radius:8px;padding:.9rem;font-family:'Geist',sans-serif;font-size:12px;font-weight:550;letter-spacing:.01em;text-decoration:none;transition:background .25s var(--vsp-ease),opacity .25s var(--vsp-ease),transform 160ms var(--vsp-ease);}
.vspf-apply:hover{background:#1F271B;color:#FFFFFF;}
.vspf-apply:active{transform:scale(.97);}
/* El boton no tiene estado apagado. Lo tuvo dos veces (al 40% de opacidad y luego en
   gris claro) y las dos veces parecia que no estaba, porque al cargar la pagina nunca
   hay cambios pendientes: ese era su aspecto normal. Ahora siempre se ve y siempre
   responde; si no hay nada que aplicar, cierra el panel en movil. */
/* La barra del boton solo existe en movil: en escritorio el panel esta siempre a la vista. */
#vspf-bar2{display:none;}
#vspf-open{display:flex;align-items:center;justify-content:center;gap:.5rem;background:#fff;border:1px solid #D9D4DE;border-radius:10px;padding:.9rem 1.1rem;font-family:'Geist',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1F271B;cursor:pointer;position:relative;width:auto;box-sizing:border-box;}
#vspf-open .vspf-open-badge{background:#654F6F;color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-style:normal;display:inline-flex;align-items:center;justify-content:center;}
#vspf-overlay{position:fixed;inset:0;background:rgba(31,39,27,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:1099;}
body.vspf-open-drawer #vspf-overlay{opacity:1;visibility:visible;}
@media(max-width:1024px){
  /* Sin `auto` a los lados. De 1024 para abajo esta fila es una celda de la rejilla de
     `main.site-main`, y un margen automatico apaga el estirado: la celda deja de ocupar
     su ancho y se ajusta al contenido. En vista de rejilla no se notaba porque las
     tarjetas piden mas de lo que hay; en vista de lista una sola tarjeta pide menos y la
     fila entera encogia a 336px centrados, 3px por dentro del resto de la pagina. El
     `auto` solo servia para centrar contra el max-width de 1520, que aqui nunca manda. */
  /* Sin numero propio: la tienda iba a 16px de los bordes cuando la ficha, el carrito, las
     guias y el test iban a 24. Era la unica que no leia la variable. */
  #vspf-row{display:block;padding:0 var(--vsp-aire);margin:1rem 0 4rem;}
  #vspf-row ul.products{gap:0.9rem!important;}
  /* Solo el telefono fuerza dos columnas: por debajo de 600px, un minimo de 215px daria una
     sola. De 601 en adelante manda la regla fluida y esta anulacion sobra. */
  @media(max-width:600px){body.vsp-vista-3 #vspf-row ul.products,body.vsp-vista-4 #vspf-row ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
  body.vsp-vista-lista #vspf-row ul.products{grid-template-columns:minmax(0,1fr)!important;}
  
  /* El boton de filtros y el desplegable de orden comparten linea. Para lograrlo sin que
     el JS mueva nada, la fila del tema se disuelve con display:contents y sus hijos pasan
     a ser celdas de la misma rejilla que la barra. Las filas se asignan a mano para que
     el orden no dependa del orden del marcado. */
  body.archive main.site-main,body.tax-product_cat main.site-main,body.post-type-archive-product main.site-main,body.search main.site-main{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center;}
  body.archive main.site-main > *,body.tax-product_cat main.site-main > *,body.post-type-archive-product main.site-main > *,body.search main.site-main > *{grid-column:1/-1;}
  body.archive .kadence-shop-top-row,body.tax-product_cat .kadence-shop-top-row,body.post-type-archive-product .kadence-shop-top-row,body.search .kadence-shop-top-row{display:contents!important;}
  /* La fila 1 se reserva al titulo. Solo lo ocupa la busqueda, que es la unica pagina donde
     .woocommerce-products-header se enseña; en el resto de archivos ese elemento va en
     display:none, no genera caja, y la fila queda a cero. Antes el titulo no tenia fila
     asignada y el navegador lo colocaba DESPUES de las explicitas: medido a 375, salia en
     y=1626 con la rejilla en y=291, o sea al final de la pagina. */
  body.search .woocommerce-products-header{grid-row:1;grid-column:1/-1;padding:0 var(--vsp-aire);}
  .woocommerce-notices-wrapper{grid-row:2;}
  /* El contador ocupa su propia linea. Puesto en la columna 1 -que es `auto`- su texto de
     250 px estiraba esa columna, el boton de filtros se iba a 234 px y al desplegable le
     quedaban 97: por eso se leia "O...". Ocupando todo el ancho ya no dimensiona nada.
     Debajo, los tres controles comparten UNA fila: filtros a la izquierda, el orden ocupando
     el hueco que sobre, y las vistas a la derecha. */
  .kadence-shop-top-item.kadence-woo-results-count{grid-row:3;grid-column:1/-1;}
  .vsp-vistas{grid-row:4;grid-column:3;justify-self:end;margin:0 1rem 1.3rem 0;}
  .kadence-shop-top-item.kadence-woo-ordering{grid-row:4;grid-column:2;min-width:0;margin:0 0 1.3rem 0;}
  /* El desplegable propio media 57 px dentro de una celda de 97: no ocupaba lo suyo. */
  .kadence-woo-ordering form.woocommerce-ordering,.kadence-woo-ordering .vsp-select,.kadence-woo-ordering .vsp-select__btn{width:100%;min-width:0;}
  /* El boton muestra SIEMPRE el nombre completo de la opcion elegida. Cuanto mas estrecha es
     la pantalla, menos sitio tiene y mas se recorta con puntos suspensivos; no se sustituye por
     ningun texto corto. Para que ese recorte ocurra, la etiqueta tiene que poder encoger -de
     ahi min-width:0- ademas del overflow y el text-overflow que ya trae. */
  .kadence-woo-ordering .vsp-select__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .kadence-shop-top-item.kadence-woo-toggle{display:none!important;}
  #vspf-bar2{display:block;grid-row:4;grid-column:1;justify-self:start;margin:0 0 1.3rem 1rem;padding:0;box-sizing:border-box;width:auto;}
  #vspf-row{grid-row:5;}
  /* En movil el MISMO nodo del panel es el cajon: no hay segundo contenedor ni se mueve
     nada de sitio. Antes existia #vspf-drawer y el script trasladaba el panel entre los
     dos segun el ancho, que es lo que hacia saltar la rejilla al cargar. */
  #vspf-sidebar{position:fixed;top:0;left:0;height:100%;width:86%;max-width:360px;flex:none;z-index:1100;
    background:#fff;transform:translateX(-100%);transition:transform .25s var(--vsp-ease-drawer);
    display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y;padding:4.5rem 1.6rem 0;box-sizing:border-box;}
  body.vspf-open-drawer #vspf-sidebar{transform:translateX(0);}
}
@media(max-width:480px){
  #vspf-row ul.products{gap:1rem!important;}
}