#navFavoritos,
.view-switch {
    display: none !important;
}

.lista-header-button {
    white-space: nowrap;
}

.lista-header-icono {
    font-size: 17px;
}

.card-body {
    display: flex;
    flex-direction: column;
}

.card-topline,
.card-footer,
.stock,
.price-label {
    display: none;
}

.card .brand {
    margin-bottom: 7px;
}

.card .description {
    margin-bottom: 10px;
}

.card .category {
    margin-bottom: 15px;
    padding-bottom: 0;

    border-bottom: 0;
}

.card-price {
    margin-top: auto;
    padding-top: 14px;

    border-top:
        1px solid
        var(--border);
}

.card-list-button {
    width: 100%;
    height: 40px;

    margin-top: 15px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--border) 72%,
            var(--text)
        );

    border-radius: 8px;

    background:
        var(--surface-soft);

    color:
        var(--text);

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.card-list-button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 70%,
            var(--border)
        );

    background:
        color-mix(
            in srgb,
            var(--accent) 12%,
            var(--surface)
        );

    color:
        var(--text);

    box-shadow:
        0 5px 14px
        rgba(
            0,
            0,
            0,
            0.12
        );
}

.card-list-button:active {
    transform:
        translateY(1px);
}

.card-list-button.active {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 55%,
            var(--border)
        );

    background:
        color-mix(
            in srgb,
            var(--accent) 15%,
            var(--surface)
        );

    color:
        var(--accent);
}

.lista-consulta-panel {
    width: 390px;

    max-width:
        calc(
            100vw - 30px
        );

    max-height:
        calc(
            100vh - 135px
        );

    position: fixed;

    right:
        max(
            20px,
            calc(
                (
                    100vw - 1500px
                ) / 2 + 28px
            )
        );

    top: 118px;

    z-index: 90;

    display: none;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    background:
        var(--surface);

    color:
        var(--text);

    box-shadow:
        0 18px 55px
        rgba(
            0,
            0,
            0,
            0.32
        );
}

.lista-consulta-panel.abierto {
    display: flex;
}

.lista-panel-header {
    padding:
        17px
        18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--surface);

    color:
        var(--text);
}

.lista-panel-header
> div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.lista-panel-header strong {
    color:
        var(--text);

    font-size: 16px;
}

.lista-panel-header span {
    color:
        var(--muted);

    font-size: 11px;
}

.lista-panel-cerrar {
    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 8px;

    background:
        transparent;

    color:
        var(--muted);

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.14s ease,
        color 0.14s ease;
}

.lista-panel-cerrar:hover {
    background:
        var(--surface-soft);

    color:
        var(--text);
}

.lista-panel-contenido {
    min-height: 0;

    overflow-y: auto;

    padding:
        4px
        16px;

    background:
        var(--surface);

    color:
        var(--text);
}

.lista-item {
    position: relative;

    padding:
        14px
        28px
        14px
        0;

    display: grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    column-gap: 12px;
    row-gap: 11px;

    border-bottom:
        1px solid
        var(--border);
}

.lista-item-imagen {
    width: 62px;
    height: 62px;

    grid-row:
        1 / span 2;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            var(--product-image-start),
            var(--product-image-end)
        );

    color:
        var(--muted);

    font-size: 27px;
}

.lista-item-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.lista-item-marca {
    overflow: hidden;

    color:
        var(--accent);

    font-size: 9px;
    font-weight: 800;

    text-transform:
        uppercase;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.lista-item-nombre {
    overflow: hidden;

    color:
        var(--text);

    font-size: 12px;
    line-height: 1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.lista-item-codigo {
    color:
        var(--muted);

    font-size: 10px;
}

.lista-item-precio {
    margin-top: 2px;

    color:
        var(--text);

    font-size: 13px;
}

.lista-item-eliminar {
    width: 26px;
    height: 26px;

    position: absolute;

    right: 0;
    top: 13px;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--muted);

    font-size: 18px;

    cursor: pointer;
}

.lista-item-eliminar:hover {
    background:
        var(--surface-soft);

    color:
        #d45b5b;
}

.lista-item-cantidad {
    grid-column: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.lista-item-cantidad
> span {
    color:
        var(--muted);

    font-size: 10px;
}

.lista-cantidad-controles {
    display: flex;
    align-items: center;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background:
        var(--surface);
}

.lista-cantidad-controles button {
    width: 29px;
    height: 27px;

    border: 0;

    background:
        var(--surface);

    color:
        var(--text);

    font-weight: 700;

    cursor: pointer;
}

.lista-cantidad-controles button:hover {
    background:
        var(--surface-soft);
}

.lista-cantidad-controles span {
    min-width: 30px;

    color:
        var(--text);

    font-size: 11px;
    font-weight: 700;

    text-align: center;
}

.lista-panel-footer {
    padding:
        14px
        16px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 8px;

    border-top:
        1px solid
        var(--border);

    background:
        var(--surface-soft);
}

.lista-vaciar,
.lista-whatsapp {
    height: 39px;

    padding:
        0
        13px;

    border-radius:
        8px;

    font-size:
        11px;

    font-weight:
        700;

    cursor: pointer;
}

.lista-vaciar {
    border:
        1px solid
        var(--border);

    background:
        var(--surface);

    color:
        var(--text);
}

.lista-vaciar:hover {
    border-color:
        color-mix(
            in srgb,
            var(--border) 55%,
            var(--text)
        );

    background:
        var(--surface-soft);
}

.lista-whatsapp {
    border:
        1px solid
        #18a957;

    background:
        #18a957;

    color:
        white;
}

.lista-whatsapp:hover {
    background:
        #15964d;

    border-color:
        #15964d;
}

.lista-whatsapp:disabled {
    cursor:
        not-allowed;

    opacity:
        0.52;
}

.lista-vacia {
    padding:
        45px
        18px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    color:
        var(--muted);

    text-align:
        center;
}

.lista-vacia-icono {
    margin-bottom: 4px;

    color:
        var(--muted);

    font-size: 35px;
}

.lista-vacia strong {
    color:
        var(--text);

    font-size: 14px;
}

.lista-vacia span {
    max-width: 250px;

    color:
        var(--muted);

    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 820px) {

    .lista-consulta-panel {
        top: 112px;
        right: 15px;
    }
}

@media (max-width: 570px) {

    .account-area
    .lista-header-button
    span.label {
        display: none;
    }

    .lista-consulta-panel {
        width:
            calc(
                100vw - 20px
            );

        max-width: none;

        right: 10px;
        top: 108px;

        max-height:
            calc(
                100vh - 118px
            );
    }

    .lista-panel-footer {
        grid-template-columns:
            1fr;
    }
}

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

    .card-list-button,
    .lista-panel-cerrar {
        transition: none;
    }
}


/* FIREWEB_LISTA_IMAGEN_REAL */

.lista-item-imagen {
    overflow: hidden;
}

.lista-item-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    background:
        var(--surface);
}

.lista-item-imagen-placeholder {
    color:
        var(--muted);

    font-size: 20px;
    font-weight: 800;
}