/*
 * <x-pallet-image> — the single image-or-placeholder unit used everywhere a
 * pallet or manifest item's image is rendered (STO-221). Loaded globally
 * (layouts.app and admin.layout) rather than per-view: the component is used
 * on far more surfaces than the pallets.css pages it originated on — orders,
 * offers, transactions, the basket checkout summary, admin screens — and a
 * per-view <link> was found to have been missed on all of them.
 */

.pallet-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pallet-image__img[hidden],
.pallet-card__image-placeholder[hidden] {
    display: none;
}

/* Frame wrapper for <x-pallet-image> when the parent class was written for a
   bare <img> (fixed dims + radius): clips the inner unit to the frame. */
.pallet-image__frame {
    overflow: hidden;
}

.pallet-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--gradient-from, var(--color-gray-200)),
        var(--gradient-to, var(--color-gray-400))
    );
}

.pallet-gradient__label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
    text-align: center;
    padding: 0 var(--space-sm);
}