/* ── Vendor storefront banner hero ───────────────────────────────────────────
   Rendered on /store/{slug} when the vendor has a banner_image. Vendors without
   one keep the original flat header card, so this file only ever adds styling. */

.vendor-banner {
    position: relative;
    height: clamp(150px, 26vw, 320px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e9ecef;
    overflow: hidden;
}

/* Softens the bottom edge so the overlapping identity card stays legible
   against busy artwork. */
.vendor-banner__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

/* Pull the identity card up over the banner's lower edge. */
.vendor-banner-overlap {
    position: relative;
    z-index: 2;
    margin-top: -2rem;
}

@media (min-width: 768px) {
    .vendor-banner-overlap {
        margin-top: -3.5rem;
    }
}