/* Mobile campaign: live copy overlays the artwork, with its product to the right.
   Merchant colours and the active artwork palette remain authoritative. */
@media(max-width:639px) {
    .vo-announcement {
        min-height: 32px;
        gap: 8px;
        padding-inline: 0;
        font-size: 9px;
        letter-spacing: .025em;
    }
    .vo-announcement-track { padding-block: 7px; }
    .vo-announcement-group > span { padding-inline: 22px; }
    .vo-announcement-toggle {
        min-height: 24px;
        padding-inline: 8px;
        font-size: 8px;
        line-height: 1.4;
    }
    .vo-announcement-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
    body:has([data-hero]) .vo-header-row { min-height: 60px; }
    .vo-header-actions :is(a,button), .vo-header [data-nav-toggle] { min-width: 44px; min-height: 44px; }
    body:has([data-hero]) .vo-campaign { padding-inline: 12px; padding-bottom: 18px; }
    body:has([data-hero]) .vo-campaign > .vo-hero-track { border-radius: 16px; }
    body:has([data-hero]) .vo-hero-slide[data-hero-slide],
    body:has([data-hero]) .vo-hero-slide[data-hero-slide] > .vo-campaign-link { display: block; height: clamp(280px,78vw,300px); background: var(--vo-campaign-top,#111); }
    body:has([data-hero]) .vo-hero-slide[data-hero-slide]::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,color-mix(in srgb,var(--vo-campaign-top,#07142f) 22%,transparent) 0%,color-mix(in srgb,var(--vo-campaign-top,#07142f) 10%,transparent) 48%,transparent 85%); }
    body:has([data-hero]) .vo-campaign .vo-hero-slide[data-hero-slide] .vo-campaign-art {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        transform: none;
        object-fit: cover;
        object-position: 65% center;
        mask-image: none;
    }
    body:has([data-hero]) .vo-campaign-copy {
        position: absolute;
        top: 50%;
        inset-inline-start: 18px;
        transform: translateY(-50%);
        width: 51%;
        max-width: 210px;
        padding: 0;
        z-index: 2;
        color: #fff;
        background: transparent;
    }
    body:has([data-hero]) .vo-campaign-kicker {
        margin-bottom: 8px;
        color: #ffffffb8;
        font-size: 7px;
        line-height: 1.4;
        letter-spacing: .2em;
    }
    body:has([data-hero]) .vo-campaign-copy h2 {
        font-size: clamp(22px,6.4vw,25px);
        line-height: 1.1;
        min-height: 3.3em;
        letter-spacing: -.035em;
        font-weight: 600;
        text-wrap: balance;
    }
    body:has([data-hero]) .vo-campaign-copy p {
        margin-top: 8px;
        min-height: 3.2em;
        color: #ffffffd1;
        font-size: 10px;
        line-height: 1.6;
    }
    body:has([data-hero]) .vo-campaign-button {
        min-height: 44px;
        margin-top: 12px;
        padding: 10px 13px;
        gap: 13px;
        border-color: #ffffff8c;
        background: #ffffff0a;
        color: #fff;
        font-size: 10px;
        line-height: 1.4;
    }
    body:has([data-hero]) .vo-campaign-link:hover .vo-campaign-button { background: #ffffff1a; }
    body:has([data-hero]) .vo-campaign > .vo-campaign-dots { inset-inline-start: auto; inset-inline-end: 20px; bottom: 24px; gap: 0; justify-content: flex-end; }
    body:has([data-hero]) .vo-hero-dot { position: relative; width: 28px; height: 28px; border: 0; box-shadow: none; background: transparent; }
    body:has([data-hero]) .vo-hero-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 3px; transform: translate(-50%,-50%); background: #ffffff80; }
    body:has([data-hero]) .vo-hero-dot[aria-current="true"]::before { width: 18px; background: #fff; }
}