/* ================================
   Store Banner Media (sbm)
   UI-ONLY ENHANCEMENT
   ================================ */

.sbm {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #0b1220; /* solid base */
    isolation: isolate;
}

.sbm__stage {
    position: relative;
    min-height: 200px;
}

.sbm--hero .sbm__stage    { min-height: 260px; }
.sbm--footer .sbm__stage  { min-height: 160px; }
.sbm--sidebar .sbm__stage { min-height: 320px; }

/* Layer order:
   0 fallback (SOLID / GLASS)
   1 media
   2 shade
   3 content
*/

/* 🔒 CHANGED: gradient → solid + glass */
.sbm__fallback {
    position: absolute;
    inset: 0;
    z-index: 0;

    /* Solid brand-safe base */
    background: rgba(11, 18, 32, 0.92);

    /* Glass effect */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);

    pointer-events: none;
}

.sbm__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.sbm__shade {
    position: absolute;
    inset: 0;
    z-index: 2;

    /* softer overlay for readability */
    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}

.sbm__content {
    position: relative;
    z-index: 3;
    padding: 28px 26px;
    color: #ffffff;
}

.sbm__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 6px;
}

.sbm__crumbs {
    font-size: 12px;
    opacity: .9;
    margin-bottom: 8px;
}

.sbm__crumbs a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.35);
}

.sbm__crumbs span {
    margin: 0 6px;
    opacity: .75;
}

.sbm__title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

@media (max-width: 768px) {
    .sbm__content { padding: 20px; }
    .sbm__title   { font-size: 22px; }
}