/* ============================================================
   STACY Frontend CSS – opciones sin stock en YITH WAPO
   ============================================================ */

/* ---- Opciones sin stock: contenedor relativo ---- */
.yith-wapo-option.stacy-oos {
    position: relative !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ---- Filtro blanco y negro sobre todo el contenido de la opción ---- */
.yith-wapo-option.stacy-oos > *:not(.stacy-overlay) {
    filter: grayscale(100%) opacity(0.45) !important;
    pointer-events: none !important;
    user-select: none;
}

/* Asegura que el input no se pueda marcar */
.yith-wapo-option.stacy-oos input {
    pointer-events: none !important;
}

/* ---- Overlay "STOCK EN CAMINO" ---- */
.stacy-overlay {
    position: absolute;
    inset: 0;                       /* top:0 right:0 bottom:0 left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    pointer-events: none;
}

.stacy-overlay-badge {
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1.3;
    padding: 3px 6px;
    border-radius: 3px;
    text-align: center;
    white-space: nowrap;
    max-width: 90%;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    pointer-events: none;
}

/* ---- Ajuste para la vista de cuadrícula (swatches grandes) ---- */
.yith-wapo-addon-type-color  .yith-wapo-option.stacy-oos .stacy-overlay-badge,
.yith-wapo-addon-type-label  .yith-wapo-option.stacy-oos .stacy-overlay-badge,
.yith-wapo-addon-type-image  .yith-wapo-option.stacy-oos .stacy-overlay-badge {
    font-size: 8px;
    padding: 2px 5px;
}