.skeleton-card {
    overflow: hidden;
    min-width: 0;

    border: 1px solid #e6e8eb;
    border-radius: 14px;

    background: #ffffff;
}

.skeleton-image {
    position: relative;

    width: 100%;
    height: 190px;

    overflow: hidden;

    background: #eceff2;
}

.skeleton-body {
    padding: 18px;
}

.skeleton-line {
    position: relative;

    overflow: hidden;

    height: 13px;

    margin-bottom: 12px;

    border-radius: 6px;

    background: #eceff2;
}

.skeleton-line::after,
.skeleton-image::after {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.65),
            transparent
        );

    animation:
        skeleton-movimiento
        1.4s
        infinite;
}

.skeleton-line-corta {
    width: 32%;
}

.skeleton-line-media {
    width: 62%;
}

.skeleton-line-larga {
    width: 91%;
}

.skeleton-espacio {
    height: 14px;
}

.skeleton-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;
}

.skeleton-precio {
    width: 45%;
}

.skeleton-stock {
    width: 25%;
}

.grid.catalogo-actualizando {
    position: relative;

    cursor: progress;
}

.grid.catalogo-actualizando > * {
    opacity: 0.56;

    transition:
        opacity
        0.12s
        ease;
}

.grid.catalogo-actualizando::after {
    content: "";

    position: absolute;
    top: 28px;
    left: 50%;
    z-index: 10;

    width: 26px;
    height: 26px;

    margin-left: -13px;

    border:
        3px solid
        rgba(120, 125, 130, 0.22);

    border-top-color:
        var(--accent, #e4232e);

    border-radius: 50%;

    animation:
        catalogo-girar
        0.7s
        linear
        infinite;

    pointer-events: none;
}

.pagination.catalogo-actualizando {
    opacity: 0.58;

    pointer-events: none;

    transition:
        opacity
        0.12s
        ease;
}

@keyframes skeleton-movimiento {
    100% {
        transform:
            translateX(100%);
    }
}

@keyframes catalogo-girar {
    to {
        transform:
            rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .skeleton-line::after,
    .skeleton-image::after,
    .grid.catalogo-actualizando::after {
        animation: none;
    }

    .grid.catalogo-actualizando > *,
    .pagination.catalogo-actualizando {
        transition: none;
    }
}