/**
* Safetop - Descatalogados (front) v2.8.0
*
* El producto descatalogado se ve "apagado" mediante filtros CSS sobre el
* propio contenido (grayscale + opacity), sin ninguna capa ni fondo. El flag
* "Descatalogado", el aviso "Ultimas unidades" y la caja del sustituto se
* excluyen del filtro y se blindan con filter:none, de modo que quedan
* siempre nitidos aunque un ancestro herede un filtro.
*
* Propiedades logicas (inline-start/block) para soporte RTL (he/ar).
*/
/* ---- Flag "Descatalogado" (identico en ficha y miniaturas de grid) ---- */
.product-flag.st-flag-discontinued {
display: inline-flex !important;
order: -1;
background: #ff5900 !important;
color: #fff !important;
font-weight: 600;
filter: none !important; /* nunca se apaga */
}
/* ---- Aviso "Ultimas unidades" (bajo "Descatalogado") ---- */
.product-flag.st-flag-lastunits {
display: inline-flex !important;
order: 0; /* siempre debajo del flag de descatalogado */
background: #1f8a4c !important; /* verde: aun disponible, se puede comprar */
color: #fff !important;
font-weight: 600;
filter: none !important; /* nunca se apaga */
}
/* ---- Ficha: ul propia del flag, fuera de las ramas atenuadas ---- */
.st-flags {
position: absolute;
top: 0.75rem;
inset-inline-end: 0.75rem;
z-index: 10;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
filter: none !important; /* blindaje: no hereda el apagado */
}
/* ---- Miniaturas en listados, buscador y sliders ---- */
.js-product-miniature.st-discontinued {
position: relative;
}
/* Miniatura descatalogada SIN stock: el contenido se apaga (imagen, titulo y
precio) con el mismo filter que la ficha. Sin capas ni fondos. Los valores
reales los define el CSS dinamico del ; aqui, un fallback razonable.
Las miniaturas con ultimas unidades NO llevan .st-dimmed (se ven normales). */
.js-product-miniature.st-dimmed .thumbnail-container img,
.js-product-miniature.st-dimmed .product-title,
.js-product-miniature.st-dimmed .product-price-and-shipping {
filter: grayscale(65%) opacity(0.55);
}
.js-product-miniature.st-discontinued .product-flags {
position: absolute;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
}
/* Se ocultan los flags ajenos, pero NO los nuestros (descatalogado + ultimas
unidades). */
.js-product-miniature.st-discontinued .product-flags li:not(.st-flag-discontinued):not(.st-flag-lastunits) {
display: none !important;
}
/* El flag va siempre el primero aunque el tema no use flex en la ul. */
.js-product-miniature.st-discontinued .product-flag.st-flag-discontinued {
order: -1;
}
/* ---- Caja "Ver producto actualizado" / "Ver alternativa recomendada" /
"Producto similar con stock" (recomendacion inversa) ---- */
.st-replacement-box {
position: relative;
z-index: 6;
filter: none !important; /* blindaje: el naranja del CTA nunca se apaga */
margin-block: 0.75rem;
padding: 0.85rem 1rem;
background: #fff7f2;
border: 1px solid #ffd3b8;
border-inline-start: 4px solid #ff5900;
border-radius: 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.st-replacement-box__msg {
flex-basis: 100%;
margin: 0;
font-size: 0.9rem;
color: #3b3b3b;
}
.st-replacement-box__cta {
display: inline-block;
max-width: 100%;
background: #ff5900;
color: #fff !important;
font-weight: 600;
padding: 0.5rem 0.9rem;
border-radius: 4px;
text-decoration: none !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background 0.15s ease-in-out;
}
.st-replacement-box__cta:hover,
.st-replacement-box__cta:focus {
background: #d94c00;
color: #fff;
}
.st-replacement-box__cta:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.st-replacement-box__cta {
transition: none;
}
}
/* ---- Boton "Ver sin atenuar / Atenuar de nuevo" (dentro de la caja) ---- */
.st-dim-toggle {
display: inline-block;
padding: 0.45rem 0.8rem;
background: transparent;
border: 1px solid #c9c9c9;
border-radius: 4px;
color: #555;
font-size: 0.85rem;
cursor: pointer;
vertical-align: middle;
transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
/* Cuando no hay caja de sustituto, el boton va en su propio contenedor. */
.st-dim-toggle-wrap {
position: relative;
z-index: 6;
filter: none !important;
margin-block: 0.75rem;
}
.st-dim-toggle:hover,
.st-dim-toggle:focus {
border-color: #8a8a8a;
color: #222;
}
.st-dim-toggle:focus-visible {
outline: 2px solid #1a1a1a;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.st-dim-toggle {
transition: none;
}
}
/* ---- Tallas/colores sin stock en fichas con ultimas unidades ---- */
/* El ocultado real lo hace el JS (atributo hidden en