/*
 * Placeholder shown by ImageWithFallbackViewHelper when no product image exists.
 * Pure CSS – no image asset required. Used in list, search results and detail view.
 */
/* Photo (when present) – centered across all views */
.article-img {
    display: block;
    margin-inline: auto;
}

.article-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .51rem;
    width: 100%;
    min-height: 128px;
    aspect-ratio: 4 / 3;
    padding: 1.06rem;
    box-sizing: border-box;
    text-align: center;
    color: #7b879c;
    background:
        radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f3f6fb 45%, #e8eef7 100%);
    border: 1.5px dashed #c4cedd;
    border-radius: 12px;
    overflow: hidden;
}

/* Picture icon, drawn from an SVG mask so it inherits the text colour */
.article-no-image__icon {
    width: 46px;
    height: 46px;
    background-color: #aab6c8;
    -webkit-mask: var(--article-no-image-icon) center / contain no-repeat;
    mask: var(--article-no-image-icon) center / contain no-repeat;
    --article-no-image-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5l3.5-4.5 2.5 3 3.5-4.5L19 19z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}

.article-no-image__text {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    max-width: 18ch;
}

.article-no-image:hover {
    border-color: #aab6c8;
}

.article-no-image:hover .article-no-image__icon {
    transform: translateY(-2px);
}