.vsp-var-wrap{margin:0 0 4px;min-height:78px;display:flex;flex-direction:column;justify-content:flex-end;cursor:none;}
/* La zona de presentaciones reserva su alto haya o no recuadros.
   Los recuadros solo tienen que decir "3 ML", "5 ML" o "10 ML", asi que son pequenos y se
   ajustan a su texto en vez de repartirse la fila: 22px de alto. El hueco por encima y por
   debajo es el mismo, 8px, que es lo que pedia la simetria; antes eran 26 arriba y 8 abajo.
   Medido: el contenedor pasa de 48px a 78px en escritorio y de 40px a 70px en movil.
   Con esto la tarjeta mide 536px en vez de los 578 que llego a medir, y solo 8px mas que
   una sin zona de presentaciones. Sin la
   reserva, la primera tarjeta que estrene una segunda presentacion sube su precio 53px y se
   descuadra de sus vecinas, porque el bloque de abajo crece hacia arriba. Con la reserva,
   anadir recuadros no mueve nada: comprobado poniendolos en una tarjeta de la fila y
   volviendo a medir precio, boton y alto en las cuatro, en tienda, movil y vista de lista.
   Los 2px de margen lateral que tenia el contenedor tambien se fueron: dejaban la fila de
   botones a 26px del borde izquierdo y a 22px del derecho, descuadrada respecto al titulo. */
.vsp-var-chips{display:flex;gap:5px;margin:0 0 8px;}
.vsp-chip{flex:0 1 auto;min-width:0;cursor:none;text-align:center;border:1px solid rgba(31,39,27,0.24);border-radius:6px;padding:4px 8px;background:#fff;transition:background-color .18s var(--vsp-ease),color .18s var(--vsp-ease),border-color .18s var(--vsp-ease),box-shadow .18s var(--vsp-ease),transform 160ms var(--vsp-ease);font-family:'Geist',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:0.04em;color:#1F271B;text-transform:uppercase;white-space:nowrap;}
.vsp-chip.sel{background:#654F6F;border-color:#654F6F;color:#fff;}
.vsp-bottom-row{display:flex;align-items:center;gap:14px;}
/* El boton de anadir lleva la misma piel que el corazon que tiene al lado: sin borde y con la
   misma sombra, 0 1px 5px rgba(31,39,27,0.12). Antes era al reves -borde y sin sombra- y los dos
   botones de la misma fila parecian de dos sitios distintos. Se conserva el relleno morado al
   pasar el raton porque es el que compra, no el que guarda. Los border-color de :hover, .added
   y .is-out se han eliminado: sin borde no pintaban nada. */
.vsp-add-btn{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:9px;height:48px;overflow:hidden;border-radius:10px;padding:0 14px;font-family:'Geist',sans-serif;font-size:11px;font-weight:550;letter-spacing:0.01em;cursor:none;transition:background-color .15s var(--vsp-ease),color .15s var(--vsp-ease),box-shadow .15s var(--vsp-ease);background:#fff;color:#1F271B;border:none;box-shadow:0 1px 5px rgba(31,39,27,0.12);--global-palette-btn-bg-hover:#654F6F;--global-palette-btn-hover:#fff;}
.vsp-add-btn:hover{background:#654F6F;color:#fff;}
.vsp-add-btn.added{background:#BFD8CC;color:#1F271B;--global-palette-btn-bg-hover:#BFD8CC;--global-palette-btn-hover:#1F271B;}
.vsp-add-btn.is-out,.vsp-add-btn.is-out:hover{opacity:.45;cursor:default;background:#fff;color:#1F271B;}
.vsp-var-wrap .vesper-wl-btn--loop{flex:0 0 auto;width:48px;height:48px;margin:0;cursor:none;}
.woocommerce ul.products li.product .price ins{text-decoration:none!important;}
@media(max-width:768px){
/* Aire lateral de 11px: la tarjeta de movil mide unos 163px y con 15.2px a cada lado al
   titulo le quedaban 133px. Con 11px dispone de 141px y ninguno pasa de dos lineas. */
.vesper-product-info{padding:0.75rem 11px 1.15rem;}
/* Estas dos declaraciones llevaban !important en la regla de escritorio y aqui no, asi que
   NUNCA se aplicaban: en el movil el titulo se seguia pintando a 19px. Medido en vivo, el
   navegador daba 19px donde esta hoja pedia 16. De ahi salian los titulos de tres y cuatro
   lineas y, con ellos, filas de tres alturas distintas (419, 442 y 464 px).
   El !important no se quita de la regla de escritorio porque ahi si pelea: sin el, el tema
   deja el titulo en 12px. Comprobado desforzando las dos declaraciones en vivo. Cuando el
   rival lleva fuerza, la respuesta necesita la misma fuerza; lo que no vale es escribir una
   regla sin ella y darla por buena sin mirar el resultado. */
.vesper-product-info .woocommerce-loop-product__title{font-size:16px!important;line-height:1.25!important;}
.vsp-card__nombre{min-height:2.5em;}
.vsp-card__casa{font-size:9px;letter-spacing:0.12em;margin:0 0 3px;}
.vsp-bottom-row{justify-content:space-between;gap:8px;}
.vsp-add-btn{min-width:0;height:40px;font-size:9px;letter-spacing:0.05em;padding:0 8px;gap:5px;}
.vsp-add-btn svg{width:20px;height:20px;}
.vsp-chip{font-size:9.5px;padding:4px 7px;letter-spacing:0.03em;}
.vsp-var-chips{gap:5px;}
.vsp-add-more{display:none;}
/* El precio de la tarjeta se pintaba con flex-wrap: si los dos importes cabian en la linea
   iban lado a lado, y si no, apilados. Con precios de seis cifras eso depende del producto,
   asi que en el movil unas tarjetas salian de una forma y otras de otra. No era un fallo de
   tamanos -que son correctos- sino de que la disposicion la decidia el ancho del numero.
   En movil se fija en columna: el tachado siempre encima y el de oferta debajo, pase lo que
   pase. Y se reserva su altura, para que un producto SIN oferta -que solo tiene un importe-
   ocupe lo mismo que uno con dos y las tarjetas no queden desiguales. Es la misma idea que
   el hueco reservado de las presentaciones en ml, que ya estaba puesto. */
.vesper-product-info .price{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;min-height:44px;}
.vsp-var-wrap{min-height:70px;}
.vsp-var-wrap .vesper-wl-btn--loop{width:40px;height:40px;flex:0 0 40px;}
.vsp-var-wrap .vesper-wl-btn--loop svg{width:20px;height:20px;}
}