/* Shared Disco menu and recipe composition cards. */
.products-grid {
    --product-card-min: 148px;
    --product-card-image-height: 102px;
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--product-card-min), 1fr));
    gap: .55rem;
    padding: .6rem;
    align-content: start;
    min-height: 0;
}

.product-card {
    --rz-card-border: 1px solid color-mix(in srgb, var(--rz-text-secondary-color) 55%, var(--rz-base-background-color));
    border: var(--rz-card-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all .12s ease;
    background: transparent !important;
    padding: 0 !important;
    position: relative;
    display: grid;
    grid-template-rows: var(--product-card-image-height) minmax(3rem, auto) auto;
    min-width: 0;
}

.product-card.product-card--no-image {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 2rem .35rem .35rem !important;
}

.product-card--no-image .product-card__name {
    flex: 1;
    min-height: 2.6rem;
}

.product-card--no-image .product-card__badge {
    max-width: calc(100% - 2.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rz-shadow-4) !important;
}

.product-card:active { transform: scale(.97); }

/* ── Producto bloqueado ── */
.product-card--blocked {
    border-color: color-mix(in srgb, var(--rz-danger) 24%, var(--rz-border-color, #dee2e6));
    background: color-mix(in srgb, var(--rz-danger) 3%, transparent) !important;
    cursor: not-allowed;
}
.product-card--blocked:hover {
    transform: none;
    box-shadow: none !important;
}
.product-card--blocked:active { transform: none; }

.product-card--selection-locked {
    cursor: default;
}

.product-card--selection-locked:hover,
.product-card--selection-locked:active {
    transform: none;
    box-shadow: var(--rz-shadow-2);
}

/* ── Badge de promoción/bloqueo ── */
.product-card__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: .15rem .45rem;
    border-radius: 10px;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    z-index: 5;
    line-height: 1.3;
}
.product-card__badge--warning { background: var(--rz-warning, #fb8c00); }
.product-card__badge--success { background: var(--rz-success, #43a047); }
.product-card__badge--danger  { background: var(--rz-danger, #e53935); }
.product-card__badge--info    { background: var(--rz-info, #0288d1); }
.product-card__badge--primary { background: var(--rz-primary, #1e88e5); }

.product-card__quantity {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 .35rem;
    border: 2px solid var(--rz-card-background-color, #fff);
    border-radius: 999px;
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    box-shadow: var(--rz-shadow-2);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    animation: product-quantity-pop .18s ease-out;
}

@keyframes product-quantity-pop {
    0% { opacity: .35; transform: scale(.68); }
    70% { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .product-card__quantity { animation: none; }
}

.product-card__media {
    width: 100%;
    height: var(--product-card-image-height);
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--rz-card-background-color, var(--rz-base-background-color, #fff)) 94%, var(--rz-primary) 6%);
    background-image: url("/images/raysys-material-ambient-background.svg");
    background-repeat: no-repeat;
    background-position: center 54%;
    background-size: cover;
}

.product-card__img {
    width: calc(100% - .5rem);
    height: calc(100% - .5rem);
    max-width: calc(100% - .5rem);
    max-height: calc(100% - .5rem);
    object-fit: contain;
    object-position: center;
    display: block;
    min-width: 0;
    min-height: 0;
    background: transparent;
    filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--rz-black, #000) 16%, transparent));
}

.product-card__media--placeholder {
    color: color-mix(in srgb, var(--rz-primary) 76%, var(--rz-text-color));
}

.product-card__placeholder-icon {
    width: clamp(2rem, 2.25vw, 2.6rem);
    height: clamp(2rem, 2.25vw, 2.6rem);
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rz-primary) 18%, var(--rz-border-color));
    border-radius: 50%;
    background: color-mix(in srgb, var(--rz-card-background-color, var(--rz-base-background-color)) 78%, transparent);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--rz-black, #000) 12%, transparent);
    backdrop-filter: blur(4px);
}

.product-card__placeholder-icon .rzi {
    font-size: clamp(1.15rem, 1.3vw, 1.5rem);
}

.product-card--blocked .product-card__media {
    opacity: .58;
    filter: grayscale(72%);
}

.product-card--blocked .product-card__name {
    color: var(--rz-text-secondary-color);
}

.product-card__body {
    padding: .35rem .45rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.product-card__name {
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.14;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: .22rem .35rem 0;
    min-width: 0;
    color: var(--rz-text-color);
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    min-width: 0;
}

.product-card__measure,

.product-card__price {
    font-size: .74rem;
    font-weight: 700;
    color: var(--rz-success, #43a047);
    padding: .05rem .35rem .24rem;
    line-height: 1.1;
    min-height: 1rem;
}

.product-card__price--blocked {
    font-size: .65rem;
    font-weight: 600;
    color: var(--rz-danger, #e53935);
}

/* ── Precio con promoción ── */
.product-card__price-promo {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .02rem .35rem .22rem;
    line-height: 1.05;
    min-height: 1.45rem;
}
.product-card__price--original {
    font-size: .6rem;
    text-decoration: line-through;
    color: var(--rz-text-disabled-color);
}
.product-card__price--new {
    font-size: .84rem;
    font-weight: 700;
    color: var(--rz-danger, #e53935);
}

/* ── Paginación ── */
@media (max-width: 1400px) {
    .products-grid {
        --product-card-min: 124px;
        --product-card-image-height: 82px;
        gap: .4rem;
        padding: .45rem;
    }
    .product-card__name { font-size: .7rem; }
    .product-card__measure,
    .product-card__price { font-size: .72rem; }
}

@media (max-width: 1200px) {
    .products-grid {
        --product-card-min: 112px;
        --product-card-image-height: 70px;
        gap: .35rem;
        padding: .4rem;
    }
    .product-card__name {
        font-size: .66rem;
        line-height: 1.08;
        padding-inline: .28rem;
    }
    .product-card__measure,
    .product-card__price {
        font-size: .68rem;
        padding-inline: .28rem;
    }
    .product-card__price-promo { padding-inline: .28rem; }
}

@media (max-width: 1024px) {
    .products-grid {
        --product-card-min: 104px;
        --product-card-image-height: 64px;
    }
    .product-card__body { padding: .25rem .35rem; }
    .product-card__name { font-size: .58rem; }
    .product-card__measure,
    .product-card__price { font-size: .6rem; }
}

@media (max-width: 768px) {
    .products-grid {
        --product-card-min: 94px;
        --product-card-image-height: 56px;
        grid-template-columns: repeat(auto-fill, minmax(var(--product-card-min), 1fr));
        gap: .35rem;
        padding: .4rem;
    }
    .product-card__name {
        font-size: .57rem;
        line-height: 1.08;
    }
    .product-card__measure,
    .product-card__price,
    .product-card__price--new {
        font-size: .6rem;
    }
    .product-card__media {
        height: var(--product-card-image-height);
    }
}

@media (min-width: 769px) and (max-height: 760px) {
    .products-grid {
        --product-card-min: 124px;
        --product-card-image-height: 72px;
        gap: .32rem;
        padding: .35rem;
    }
    .product-card {
        grid-template-rows: var(--product-card-image-height) minmax(2.6rem, auto) auto;
    }
    .product-card__name {
        font-size: .62rem;
        line-height: 1.06;
        padding: .18rem .28rem 0;
    }
    .product-card__measure,
    .product-card__price {
        font-size: .64rem;
        padding: .02rem .28rem .18rem;
    }
    .product-card__price-promo {
        padding: 0 .28rem .16rem;
    }
    .product-card__price--original {
        font-size: .55rem;
    }
    .product-card__price--new {
        font-size: .66rem;
    }
}

@media (min-width: 769px) and (max-height: 620px) {
    .products-grid {
        --product-card-min: 112px;
        --product-card-image-height: 58px;
    }
    .product-card__name {
        font-size: .58rem;
    }
    .product-card__measure,
    .product-card__price,
    .product-card__price--new {
        font-size: .6rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        --product-card-min: 82px;
        --product-card-image-height: 48px;
        gap: .3rem;
        padding: .35rem;
    }
    .product-card {
        border-radius: 6px;
    }
    .product-card__name {
        font-size: .52rem;
        padding: .16rem .22rem 0;
    }
    .product-card__measure,
    .product-card__price,
    .product-card__price--new {
        font-size: .52rem;
        padding-inline: .22rem;
    }
}


.product-card__measure { color: var(--rz-text-secondary-color); }

@media (max-width: 400px) {
    .products-grid {
        --product-card-min: 85px;
        --product-card-image-height: 65px;
        gap: .3rem;
        padding: .4rem;
    }
}