@font-face { font-family: "Header-icon-wap"; src: url("../fonts/Header-icon-wap.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Header-icon-pc"; src: url("../fonts/Header-icon-pc.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "VIVO-FONT-NAV"; src: url("../fonts/vivo-font-3.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VIVO-FONT-NAV-BOLD"; src: url("../fonts/vivo-font-2.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "VIVO-FONT-WEB"; src: url("../fonts/vivo-font-3.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VIVO-FONT-WEB-BOLD"; src: url("../fonts/vivo-font-2.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "vivoSansSC"; src: url("../fonts/vivo-font-4.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root { --nav-height: 0.6rem; --safe-bottom: 0.24rem; }

body {
    font-family: "VIVO-FONT-NAV", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #fff;
}

.top-bar {
    height: var(--nav-height);
    grid-template-columns: 0.64rem 1fr 0.64rem;
    background: #fff;
    backdrop-filter: none;
}

.icon-btn { color: #242933; }

.icon-line,
.search-icon,
.close-icon,
.cart-icon,
.user-icon {
    width: 0.24rem;
    height: 0.24rem;
    display: block;
    position: relative;
    background: transparent;
    box-shadow: none;
}

.icon-line::before,
.search-icon::before,
.close-icon::before,
.cart-icon::before,
.user-icon::before,
.logo::before {
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #242933;
    font-family: "Header-icon-wap";
    font-size: 0.24rem;
    line-height: 0.24rem;
    transform: none;
}

.icon-line::after,
.search-icon::after,
.close-icon::after,
.cart-icon::after,
.user-icon::after { content: none; }

.icon-line::before { content: "\e90a"; }
.close-icon::before { content: "\e909"; }
.search-icon::before { content: "\e90b"; }
.cart-icon::before { content: "\e90c"; }
.user-icon::before { content: "\e903"; }

.logo {
    overflow: hidden;
    text-align: center;
    font-size: 0;
    letter-spacing: 0;
    line-height: 1;
}

.logo::before {
    content: "\e910";
    font-family: "Header-icon-pc";
    font-size: 0.28rem;
    line-height: 0.28rem;
}

.nav-sheet {
    background: #fff;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
}

.vp-head-menu,
.vp-head-menu-wrap {
    min-height: calc(100vh - var(--nav-height));
    background: #fff;
    font-size: 0;
}

.vp-head-navs {
    padding: 0 0.2rem 0.2rem;
}

.vp-head-menu-lists,
.vp-head-menu-link {
    width: 100%;
    border-bottom: 1px solid #edf2fa;
    cursor: pointer;
}

.vp-head-nav-name,
.vp-head-menu-link a {
    position: relative;
    display: block;
    height: 0.548rem;
    color: #242933;
    font-size: 0.14rem;
    line-height: 0.548rem;
}

.vp-head-nav-name .icon::before,
.vp-head-nav-name .icon::after,
.vp-head-menu-link a::after,
.vp-head-topbar a::after {
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.24rem;
    height: 0.24rem;
    color: #242933;
    font-family: "Header-icon-wap";
    font-size: 0.24rem;
    line-height: 0.24rem;
    transform: translateY(-50%);
}

.vp-head-nav-name .icon::before {
    content: "\e905";
    opacity: 0;
    transition: opacity 0.24s ease;
}

.vp-head-nav-name .icon::after {
    content: "\e900";
    transition: opacity 0.24s ease;
}

.vp-head-product-open .vp-head-nav-name .icon::before { opacity: 1; }
.vp-head-product-open .vp-head-nav-name .icon::after { opacity: 0; }
.vp-head-menu-link a::after,
.vp-head-topbar a::after { content: "\e908"; }

.vp-head-product {
    height: 0;
    opacity: 0;
    overflow: hidden;
    line-height: 0;
    transition: height 0.32s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.22s ease;
}

.vp-head-product-open .vp-head-product { opacity: 1; }

.vp-head-product-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.16rem 0.14rem;
}

.vp-head-product-lists a {
    display: block;
    color: #242933;
    text-align: center;
}

.vp-head-product-img {
    height: 1.87rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f7f8fa;
    border-radius: 0.12rem;
}

.vp-head-product-img img {
    width: 1.38rem;
    height: 1.38rem;
    object-fit: contain;
}

.vp-head-product-lists p {
    margin-top: 0.12rem;
    color: #242933;
    font-size: 0.14rem;
    line-height: 0.2rem;
}

.vp-head-product-links-wrapper {
    height: 0.44rem;
    display: flex;
    width: 3.2rem;
    margin: 0.32rem auto 0.26rem;
    overflow: hidden;
    background: #f7f8fa;
    border-radius: 0.22rem;
}

.vp-head-product-links-wrapper.single { width: 1.6rem; }

.vp-head-product-links-wrapper a {
    position: relative;
    flex: 1;
    height: 0.44rem;
    color: #242933;
    font-size: 0;
    line-height: 0.44rem;
    text-align: center;
}

.vp-head-product-links-wrapper a + a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0.16rem;
    background: #dfe1e6;
    transform: translateY(-50%);
}

.vp-head-product-links-wrapper a::before {
    content: "\e907";
    margin-right: 0.08rem;
    color: #242933;
    font-family: "Header-icon-wap";
    font-size: 0.28rem;
    vertical-align: top;
}

.vp-head-product-links-wrapper a.compare-models::before { content: "\e906"; }
.vp-head-product-links-wrapper span { font-size: 0.14rem; }

.vp-head-topbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.28rem;
    padding: 0 0.2rem;
}

.vp-head-topbar a {
    position: relative;
    display: block;
    height: 0.548rem;
    border-bottom: 1px solid #edf2fa;
    color: #242933;
    font-size: 0.14rem;
    line-height: 0.548rem;
}

.vp-head-auth {
    padding: 0.5rem 0 0.24rem;
    color: #575c66;
    font-size: 0.14rem;
    line-height: 0.2rem;
    text-align: center;
}

.vp-head-auth a { color: #415fff; }
.vp-head-auth span { margin: 0 0.07rem; }

.vp-head-country {
    padding-bottom: 0.62rem;
    text-align: center;
}

.vp-head-country a {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    color: #242933;
    font-size: 0.15rem;
    line-height: 0.24rem;
}

.vp-head-country a::before {
    content: "\e904";
    font-family: "Header-icon-wap";
    font-size: 0.24rem;
}

.bottom-tabs { display: none; }
.page { padding-bottom: 0.24rem; }
.category-page { background: #fff; }