/* Homepage framing. Merchant artwork, menu content and carousel state remain
   authoritative; these rules only set the presentation around them. */
.vo-header [data-brand] img { filter: brightness(0) invert(1); object-fit: contain; }
.vo-product-badges [data-product-sale] { background: linear-gradient(110deg,#21103d,#321065 70%,#4c247a); color: #fff; }
body:has([data-hero]) .vo-header > .vo-shell {
    padding-inline: clamp(20px, 2.083333vw, 40px);
}

body:has([data-hero]) .vo-header-row {
    min-height: 68px;
}

body:has([data-hero]) .vo-header {
    box-shadow: 0 5px 16px rgba(8, 12, 18, .10);
}

body:has([data-hero]) .vo-header [data-brand] img {
    height: 48px;
}

body:has([data-hero]) .vo-header [data-nav-item],
body:has([data-hero]) .vo-header [data-nav-more] > button {
    font-size: 14px;
    line-height: 1.5;
}

body:has([data-hero]) .vo-header [data-nav] {
    column-gap: clamp(18px, 1.8vw, 30px);
}

body:has([data-hero]) .vo-campaign {
    margin-top: 0;
    padding-inline: clamp(20px, 2.083333vw, 40px);
    padding-bottom: 20px;
}

body:has([data-hero]) .vo-campaign > .vo-campaign-dots {
    bottom: 38px;
}

body:has([data-hero]) .vo-categories {
    padding-block: 4px 12px;
    background: #fff;
}

body:has([data-hero]) .vo-category-list {
    gap: clamp(16px, 2vw, 30px);
    padding-block: 4px 8px;
}

body:has([data-hero]) .vo-shortcut {
    width: 104px;
    height: 104px;
    background: #f5f5f5;
}

body:has([data-hero]) .vo-category-name {
    margin-top: 9px;
    font-weight: 500;
    line-height: 1.4;
}

@media (min-width: 1024px) {
    /* Give the desktop hero a taller, cinematic frame without changing mobile. */
    body:has([data-hero]) .vo-campaign [data-hero-slide] .vo-campaign-art {
        aspect-ratio: 138 / 53;
        object-fit: cover;
    }
}

@media (max-width: 639px) {
    body:has([data-hero]) .vo-header > .vo-shell {
        padding-inline: 20px;
    }

    body:has([data-hero]) .vo-header-row {
        min-height: 60px;
    }

    body:has([data-hero]) .vo-header [data-brand] img {
        height: 42px;
    }

    body:has([data-hero]) .vo-campaign {
        margin-top: 0;
        padding-inline: 10px;
        padding-bottom: 16px;
    }

    body:has([data-hero]) .vo-campaign > .vo-campaign-dots {
        bottom: 28px;
    }

    body:has([data-hero]) .vo-categories {
        padding-block: 2px 6px;
    }

    body:has([data-hero]) .vo-category-list {
        gap: 10px;
        padding-block: 4px 6px;
        scroll-padding-inline: 2px;
    }

    body:has([data-hero]) .vo-category-list > li {
        flex-basis: 88px;
    }

    body:has([data-hero]) .vo-shortcut {
        width: 80px;
        height: 80px;
    }

    body:has([data-hero]) .vo-shortcut img {
        padding: 7px;
    }

    body:has([data-hero]) .vo-category-name {
        margin-top: 8px;
        font-size: 12px;
        min-height: 31px;
    }
}

body:has([data-hero]) .vo-category-list > li { flex-basis: 116px; }
body:has([data-hero]) .vo-category-name { font-size:13px; }
@media(max-width:639px) { body:has([data-hero]) .vo-category-list > li { flex-basis:88px; } body:has([data-hero]) .vo-category-name { font-size:12px; } }