﻿.product-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: 8rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--C8) 88%, var(--C0)) 0%, color-mix(in srgb, var(--C4) 22%, var(--C8)) 100%);
    border: 1px dashed color-mix(in srgb, var(--C5) 35%, var(--C4));
    color: var(--C5);
    text-align: center;
    padding: 0.75rem;
    box-sizing: border-box;
}
.product-no-image__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--C3) 14%, var(--C8));
    color: var(--C1);
    font-size: 1.25rem;
}
.product-no-image__text {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.product-no-image--card {
    min-height: 0;
    aspect-ratio: 1 / 1;
}
.product-no-image--gallery {
    min-height: 18rem;
    border-radius: 1rem;
}
.product-no-image--thumb,
.product-no-image--cart,
.product-no-image--sticky,
.product-no-image--search {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0.2rem;
    gap: 0.1rem;
}
.product-no-image--thumb .product-no-image__text,
.product-no-image--cart .product-no-image__text,
.product-no-image--sticky .product-no-image__text,
.product-no-image--search .product-no-image__text {
    font-size: 0.58rem;
}
.product-no-image--search .product-no-image__icon {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.85rem;
}
.product-no-image--panel-list {
    min-height: 0;
    height: 100%;
    border-radius: 0;
    border: none;
}
.cart-summary-item-img-wrap .product-no-image,
.cart-item-image-wrap .product-no-image,
.checkout-order-card__image-wrap .product-no-image,
.checkout-order-card__media .product-no-image {
    min-height: 0;
    aspect-ratio: 1 / 1;
}
:root[data-bs-theme="dark"] .product-no-image {
    background: linear-gradient(180deg, color-mix(in srgb, var(--C2) 50%, var(--C8)) 0%, var(--C8) 100%);
    color: var(--C6);
}
:root[data-bs-theme="dark"] .product-no-image__icon {
    color: var(--C6);
}
