/* VIPMIX responsive header lockups, 2026-11-08.
   Slogan outlines preserve the native font proportions.
   Desktop: 13.6 px equivalent at 340 px artboard width (uniform scaling).
   The mobile lockup and cart summary share the same height. */
@media (min-width: 769px) {
    .storefront-top .header-logo > a {
        height: auto !important;
        aspect-ratio: 607.60517799 / 189.81402802;
    }
    .storefront-top .header-logo img {
        display: block;
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }
}
@media (min-width: 1200px) {
    .storefront-top > .h1 {
        grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
        gap: 6px 28px;
        min-height: 128px;
        padding: 8px 32px;
    }
    .storefront-top .header-logo > a {
        width: 340px !important;
        max-width: 340px;
    }
}
@media (min-width: 769px) and (max-width: 1199px) {
    .storefront-top .header-logo > a {
        max-width: 300px;
    }
}
@media (max-width: 768px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    #page > .header {
        --mobile-cart-frame-height: 35px;
        --mobile-brand-row-height: calc(var(--mobile-cart-frame-height) + 8px);
        min-height: var(--mobile-brand-row-height);
    }
    #page > .header > .mtop_menu {
        position: relative;
        height: var(--mobile-brand-row-height);
        flex: 0 0 var(--mobile-brand-row-height) !important;
    }
    #page > .header .header-title {
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(var(--mobile-cart-frame-height) * 557.60517799 / 150.58123230);
        max-width: calc(100% - 198px);
        height: var(--mobile-cart-frame-height);
        margin: 0 !important;
        transform: translate(-50%, -50%);
        display: block;
        line-height: 0;
        overflow: hidden;
    }
    #page > .header .header-title img {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        /* Size the visible artwork, excluding the SVG's 25-unit transparent inset. */
        width: calc(100% * 607.60517799 / 557.60517799);
        height: auto;
        transform: translate(-50%, -50%);
        max-width: none;
        margin: 0;
    }
    /* Reserve the existing right-hand cart icon and order summary. */
    #page > .header .header-title.vipmix-member-logo {
        left: calc(50% - 58px);
        max-width: calc(100% - 216px);
    }
    #page > .header .mtop_menu > .header-icon {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    #page > .header .mtop_menu > .header-icon-1 {
        /* Match the WhatsApp column in the search row. */
        left: 10px;
        width: 40px;
    }
    #page > .header .mobile-menu-glyph {
        display: block;
        width: auto;
        height: 22px;
        aspect-ratio: 7 / 6;
    }
    #page > .header #swmshowM {
        position: absolute;
        top: 50%;
        right: 5px;
        width: 108px;
        height: var(--mobile-cart-frame-height);
        transform: translateY(-50%);
    }
    #page > .header #swmshowM :is(.myCartNums, .myCartNums1) {
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }
    #page > .header #swmshowM .myCartNums1 {
        top: 15px;
    }
}