/* Brighthouse mobile campaign framing follows the live Voltage reference.
   Deliberately scoped: desktop and laptop layouts keep their existing styles. */
@media (max-width: 767px) {
    body:has([data-hero]) main .vo-campaign {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body:has([data-hero]) main .vo-campaign [data-hero-track],
    body:has([data-hero]) main .vo-campaign [data-hero-slide],
    body:has([data-hero]) main .vo-campaign .vo-campaign-link {
        height: clamp(280px, 78vw, 300px) !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    body:has([data-hero]) main .vo-campaign [data-hero-slide] {
        overflow: hidden;
    }

    body:has([data-hero]) main .vo-campaign [data-hero-slide]::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg, #0006, #0002 55%, transparent 85%);
    }

    body:has([data-hero]) main .vo-campaign [data-hero-slide] .vo-campaign-art {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: 65% center !important;
        transform: none !important;
        mask-image: none !important;
    }

    body:has([data-hero]) main .vo-campaign .vo-campaign-copy {
        position: absolute !important;
        inset: auto !important;
        top: 50% !important;
        left: 18px !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 51% !important;
        max-width: 210px !important;
        padding: 0 !important;
        z-index: 2;
        color: #fff !important;
        background: transparent !important;
        text-align: left !important;
    }

    body:has([data-hero]) main .vo-campaign .vo-campaign-kicker {
        display: block;
        margin: 0 0 8px !important;
        font-size: 7px !important;
        line-height: 1.4 !important;
        letter-spacing: .2em !important;
        color: #fff !important;
    }

    body:has([data-hero]) main .vo-campaign .vo-campaign-copy h2 {
        margin: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        font-size: clamp(22px, 6.4vw, 25px) !important;
        line-height: 1.1 !important;
        letter-spacing: -.035em !important;
        text-wrap: balance;
        overflow-wrap: normal;
    }

    body:has([data-hero]) main .vo-campaign .vo-campaign-copy p {
        margin: 9px 0 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        font-size: 10px !important;
        line-height: 1.6 !important;
        color: #fff !important;
    }

    body:has([data-hero]) main .vo-campaign .vo-campaign-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px !important;
        max-width: 100%;
        margin-top: 12px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
        letter-spacing: .035em !important;
        white-space: normal;
        border: 1px solid #fff !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
        box-sizing: border-box;
    }

    body:has([data-hero]) main .vo-campaign > .vo-campaign-dots {
        inset-inline-start: auto !important;
        inset-inline-end: 10px !important;
        bottom: 5px !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }

    /* Section campaigns use the reference's compact 3:1 mobile strip:
       a readable title and CTA, with products visible alongside the copy. */
    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band > a {
        position: relative;
        display: block;
        height: clamp(112px, 31.3vw, 240px) !important;
        min-height: 0;
        overflow: hidden;
        border-radius: 0;
        background: #000;
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band > a::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg, #0006, transparent 80%);
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: 65% center !important;
        transform: none !important;
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band > a > div {
        position: absolute;
        inset: auto !important;
        top: 50% !important;
        left: 18px !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(-50%);
        width: 51% !important;
        max-width: 230px;
        padding: 0 !important;
        z-index: 2;
        background: transparent !important;
        color: #fff;
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band .vo-eyebrow,
    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band div > p {
        display: none !important;
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band h2 {
        margin: 0 !important;
        max-width: none !important;
        font-size: clamp(17px, 4.62vw, 22px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.025em;
        text-wrap: balance;
        color: #fff !important;
    }

    body:has([data-hero]) main .bh-collection-section > .bh-campaign-band div > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 38px;
        max-width: 100%;
        margin-top: 8px !important;
        padding: 8px 10px;
        border: 1px solid #fff;
        border-radius: 0;
        background: #fff;
        color: #000;
        font-size: 9px !important;
        line-height: 1.4;
        letter-spacing: .015em;
        box-sizing: border-box;
    }
}

/* Mobile service carousel: native touch scrolling, no timers or hidden terms. */
@media (max-width:767px){
 body main .bh-benefits>.vo-shell{display:flex!important;grid-template-columns:none!important;gap:0!important;width:100%;max-width:100%!important;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;padding:14px 0!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 body main .bh-benefits>.vo-shell::-webkit-scrollbar{display:none}
 body main .bh-benefits>.vo-shell>div{flex:0 0 100%;width:100%;min-width:0;min-height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:center!important;gap:12px;scroll-snap-align:start;scroll-snap-stop:always;margin:0!important;padding:0 24px!important;border:0!important}
 body main .bh-benefits>.vo-shell>div:last-child{border-right:0!important}
 body main .bh-benefits>.vo-shell>div>span{flex:none;min-width:25px;font-size:24px;line-height:1}
 body main .bh-benefits>.vo-shell>div>p{min-width:0;margin:0;white-space:normal;text-align:center}
 body main .bh-benefits strong{font-size:11px!important;line-height:1.5}
 body main .bh-benefits small{font-size:10px!important;line-height:1.5;color:#bbb;margin-top:3px}
}