mismo: product.js le hace .show() al
al cambiar de combinacion y le escribe display:block, que aplastaria un inline-flex. -------------------------------------------------------------------------- */ /* En fila y alineados al centro. Al reescribir la hoja para la v2 se perdio esta regla, y como el tema deja los
en inline-block quedaban uno al
lado del otro pero desalineados (683 contra 678 px). */
#product .ebf-estado {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
#product .ebf-estado > p { margin: 0; }
#product .ebf-stock {
display: inline-flex;
align-items: center;
gap: 9px;
position: relative;
overflow: hidden;
padding: 7px 15px 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--ebf-verde);
background: var(--ebf-verde-cl);
}
#product .ebf-stock::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 38%; height: 100%;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
transform: translateX(-160%);
animation: ebfPasa 3.4s ease-in-out infinite;
}
@keyframes ebfPasa {
0%, 55% { transform: translateX(-160%); }
100% { transform: translateX(330%); }
}
#product .ebf-stock__p {
position: relative;
z-index: 1;
width: 9px; height: 9px;
flex: none;
border-radius: 50%;
background: currentColor;
}
#product .ebf-stock__p::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid currentColor;
animation: ebfRadar 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ebfRadar {
0% { transform: scale(.55); opacity: .8; }
70%,100% { transform: scale(1.9); opacity: 0; }
}
/* 🔴 El tema estiliza #availability_label y #availability_value POR ID, asi
que una clase nuestra pierde siempre. Por eso aqui se los nombra: es la
unica forma, y va acotado DENTRO de nuestra pastilla. Sin esto el rotulo
«Disponibilidad:» seguia a la vista y el valor salia en una caja verde
oscura con su propio relleno, encima de nuestra pastilla. */
#product .ebf-stock #availability_label { display: none; }
#product .ebf-stock #availability_value {
display: inline;
padding: 0;
background: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
#product .ebf-stock__t { position: relative; z-index: 1; }
#product .ebf-stock--no { color: var(--ebf-suave); background: #f1f1f1; }
#product .ebf-stock--no .ebf-stock__p::after,
#product .ebf-stock--no::after { animation: none; opacity: 0; }
#product .ebf-off { display: none; }
/* --------------------------------------------------------------------------
5b · Pocas unidades
--------------------------------------------------------------------------
El aviso es del tema y es REAL: sale cuando quedan $last_qties o menos
(hoy, 3). Lo unico que cambia es como se ve. Venia con .warning_inline,
que lo pintaba de AMARILLO FLUOR: rgb(239,255,0) sobre texto mostaza.
El indicador son tres barras que van bajando y la ultima parpadea: se
entiende sin leer, y no dice cuantas quedan --la tienda tiene apagado
mostrar cantidades exactas y decirlo aqui la contradiria--.
La pastilla es el , no el : product.js le hace .show('slow') al
parrafo y le escribe display:block.
-------------------------------------------------------------------------- */
/* 🔴 EL PARRAFO tambien viene pintado de amarillo, no solo el texto.
.warning_inline le pone fondo rgb(239,255,0), color mostaza y 4px de
relleno, asi que asomaba como un MARCO amarillo alrededor de la pastilla
(el medía 239x39 y la pastilla 223x32).
Se apaga sobre NUESTRA clase, con la especificidad suficiente. */
#product .ebf-estado .ebf-pocas__p,
#product .ebf-pocas__p {
margin: 0;
padding: 0;
border: 0;
background: none;
background-color: transparent;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
}
#product .ebf-pocas {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 15px 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #b5561d;
background: #fdf3ea;
background: linear-gradient(135deg, #fdf3ea, #fbe8d8);
box-shadow: inset 0 0 0 1px rgba(181,86,29,.16);
}
#product .ebf-pocas__b {
display: flex;
align-items: flex-end;
gap: 2px;
flex: none;
height: 13px;
}
#product .ebf-pocas__b i {
display: block;
width: 3px;
border-radius: 1px;
background: currentColor;
transform-origin: bottom;
}
#product .ebf-pocas__b i:nth-child(1) { height: 13px; opacity: 1; }
#product .ebf-pocas__b i:nth-child(2) { height: 10px; opacity: .62; }
#product .ebf-pocas__b i:nth-child(3) {
height: 7px;
animation: ebfUltima 1.9s ease-in-out infinite;
}
@keyframes ebfUltima {
0%, 100% { opacity: .95; transform: scaleY(1); }
50% { opacity: .22; transform: scaleY(.62); }
}
/* --------------------------------------------------------------------------
6 · Cantidad y botones
-------------------------------------------------------------------------- */
/* El stock estaba pegado al precio: 0 px medidos. */
#product .ebf-compra { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#product .ebf-fila {
display: flex;
align-items: flex-end; /* la cantidad lleva rotulo encima: centrada
quedaria 12 px mas abajo que el boton */
gap: 12px;
flex-wrap: wrap;
}
#product .ebf-cant__t {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ebf-suave);
}
#product .ebf-cant { display: inline-flex; align-items: stretch; height: 52px; gap: 7px; }
/* Son , no