/* agotado.css — el producto que no se puede surtir se ve, pero lo dice.
 *
 * La ficha del producto ya apagaba sus botones cuando no había nada que
 * vender. El listado no: la foto se veía igual que la de un producto
 * disponible, y el cliente se enteraba hasta que entraba. Aquí la tarjeta lo
 * dice desde afuera.
 *
 * La foto NO se esconde ni se recorta. Se atenúa y se le cruza un sello. El
 * producto sigue siendo navegable porque un agotado de hoy puede ser un
 * pedido de mañana, y el cliente necesita poder verlo y preguntar. */

.producto-agotado {
    position: relative;
}

/* Gris y translúcida: se reconoce el producto, pero ya no compite con los
   que sí están disponibles. */
.producto-agotado img {
    filter: grayscale(100%) !important;
    opacity: .55 !important;
    transition: opacity .2s ease, filter .2s ease;
}

/* Al pasar el ratón se aclara un poco: deja mirar el detalle de la foto sin
   quitarle el sello. */
.producto-agotado:hover img {
    opacity: .72 !important;
}

/* El catalogo declara `filter: none !important` sobre la imagen de su
   tarjeta, con un selector de id que le gana a cualquier clase suelta. Para
   que el gris del agotado se vea ahi hay que igualarle la fuerza; no es un
   estilo distinto, es el mismo dicho con la especificidad que hace falta. */
#main-wrapper #contenido_productos .single-product-item .product-thumbnail.producto-agotado img,
#main-wrapper #contenido_productos .single-product-item .producto-agotado img,
#contenido_productos .single-product-item .product-thumbnail.producto-agotado img {
    filter: grayscale(100%) !important;
    opacity: .55 !important;
}

#main-wrapper #contenido_productos .single-product-item .product-thumbnail.producto-agotado:hover img,
#contenido_productos .single-product-item .product-thumbnail.producto-agotado:hover img {
    opacity: .72 !important;
}

/* La filigrana: franjas diagonales tenues sobre la foto. Van por debajo del
   sello y no capturan el clic, para que la tarjeta siga siendo un enlace. */
.producto-agotado::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(15, 23, 42, .07) 0,
        rgba(15, 23, 42, .07) 6px,
        rgba(15, 23, 42, 0) 6px,
        rgba(15, 23, 42, 0) 14px
    );
    z-index: 2;
}

/* El sello. Cruza la foto de lado a lado para que se lea aunque la tarjeta
   sea angosta; la inclinación es lo que lo hace ver como sello y no como un
   botón. */
.producto-agotado__sello {
    position: absolute;
    top: 50%;
    left: -12%;
    width: 124%;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
    z-index: 3;

    background: rgba(15, 23, 42, .82);
    color: #fff;
    text-align: center;
    padding: 6px 0;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .25);
}

/* Tarjetas chicas: en pantallas angostas la letra completa ya no cabe con
   holgura, así que baja de tamaño en lugar de desbordarse. */
@media (max-width: 575px) {
    .producto-agotado__sello {
        font-size: 10px;
        letter-spacing: .12em;
        padding: 4px 0;
    }
}

/* Variante compacta: la miniatura del buscador del encabezado mide unos
   pocos píxeles y ahí no cabe una franja con texto. Se marca con una
   esquina y el texto va al lado, en el renglón del resultado. */
.producto-agotado--compacto::before {
    background-image: none;
}

.producto-agotado--compacto .producto-agotado__sello {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    padding: 1px 0;
    font-size: 8px;
    letter-spacing: .06em;
    box-shadow: none;
}

/* La etiqueta que acompaña al nombre en listas de una sola línea. */
.producto-agotado-nota {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* El botón de carrito de la tarjeta. Se queda donde estaba, apagado: si se
   escondiera, la tarjeta cambiaría de forma y el ojo perdería la referencia
   entre un producto y el siguiente. Mismo criterio que la ficha. */
.product-card-cart-btn.producto-agotado-btn {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.product-card-cart-btn.producto-agotado-btn:hover {
    opacity: .4;
}

/* El precio de un agotado se sigue diciendo, pero no grita. */
.producto-agotado-precio .new-price {
    color: #64748b;
}