/* ==========================================================================
   ShopXO Anchop 主题样式
   风格：浅色现代简约 · 清爽干净 · 圆角柔和阴影
   ========================================================================== */

:root {
    --ap-bg:        #f5f6f8;
    --ap-bg-2:      #ffffff;
    --ap-card:      #ffffff;
    --ap-card-hover:#ffffff;
    --ap-border:    #ececee;
    --ap-text:      #1f2937;
    --ap-text-2:    #6b7280;
    --ap-text-3:    #9ca3af;
    --ap-primary:   #000000;
    --ap-primary-hover: #000000;
    --ap-red:       #ef4444;
    --ap-radius:    0.8rem;
    --ap-shadow:    0 2px 12px rgba(31, 41, 55, 0.06);
    --ap-shadow-hover: 0 8px 24px rgba(31, 41, 55, 0.12);
    --ap-font:      "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- 全局 ---------- */
html { font-size: 10px; }
body {
    background: var(--ap-bg) !important;
    color: var(--ap-text) !important;
    font-family: var(--ap-font);
    -webkit-font-smoothing: antialiased;
}
.body-content-container,
.body-content-formal-container { background: var(--ap-bg); }

a { color: var(--ap-primary); transition: color 0.2s ease; }
a:hover { color: var(--ap-primary-hover); }

::selection { background: var(--ap-primary); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ap-primary); }

/* 通用圆角/阴影类增强 */
.am-radius { border-radius: var(--ap-radius) !important; }
.am-radius-lg { border-radius: 1.2rem !important; }
.am-radius-sm { border-radius: 0.5rem !important; }

/* ---------- 顶部工具条 ---------- */
.header-top {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ap-border) !important;
    font-size: 1.2rem;
}
.header-top .menu-hd,
.header-top a,
.header-top .site-name { color: var(--ap-text-2) !important; }
.header-top a:hover { color: #55a43b !important; }

/* ---------- Logo + 搜索区 ---------- */
.nav-search {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ap-border);
    padding: 2rem 0;
}
.nav-search .logo-big img { max-height: 5.2rem; }

/* 搜索框 */
.search-group {
    border: 2px solid var(--ap-primary) !important;
    background: #ffffff !important;
    border-radius: 2.4rem !important;
    overflow: hidden;
}
.search-group #search-input {
    background: #ffffff !important;
    color: var(--ap-text) !important;
    border: none !important;
    padding-left: 1.8rem;
}
.search-group #search-input::placeholder { color: var(--ap-text-3); }
.search-group .submit {
    background: var(--ap-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 2.2rem 2.2rem 0 !important;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.search-group .submit:hover { background: var(--ap-primary-hover) !important; }
.search-hot-keywords a { color: var(--ap-text-3) !important; }
.search-hot-keywords a:hover { color: var(--ap-primary) !important; }

/* ---------- 主导航 ---------- */
.shop-navigation {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(31,41,55,0.04);
}
.shop-navigation .am-topbar-nav a,
.shop-navigation .am-topbar-nav .am-dropdown-toggle {
    color: var(--ap-text) !important;
    font-weight: 500;
    padding: 1.4rem 1.6rem;
}
.shop-navigation .am-topbar-nav a:hover { color: #55a43b !important; }
.shop-navigation .am-topbar-nav a.active { color: var(--ap-primary) !important; }
.shop-navigation .am-topbar-nav a.active:hover { color: #55a43b !important; }
.goods-category-title { background: var(--ap-primary) !important; border-radius: var(--ap-radius); }
.goods-category-title .all-goods { color: #fff !important; font-weight: 600; }

/* 下拉菜单 */
.am-dropdown-content {
    background: #ffffff !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: var(--ap-shadow) !important;
}
.am-dropdown-content a { color: var(--ap-text-2) !important; }
.am-dropdown-content a:hover { color: var(--ap-primary) !important; background: #f8fafc !important; }

/* ---------- 轮播 Banner ---------- */
.home-banner .swiper-slide img,
.swiper-slide img { border-radius: var(--ap-radius-lg) !important; }

/* Banner 右侧信息卡 */
.slideall .banner-mixed {
    background: #ffffff !important;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg) !important;
    box-shadow: var(--ap-shadow);
}
.slideall .mod-vip .s-name { color: var(--ap-text-2) !important; }
.slideall .banner-news-title { color: var(--ap-text) !important; border-bottom-color: var(--ap-border) !important; }
.slideall .banner-news li a { color: var(--ap-text-2) !important; }
.slideall .banner-news li a:hover { color: var(--ap-primary) !important; }

/* ---------- 首页楼层 ---------- */
.items-nav-title { border-bottom: 1px solid var(--ap-border); }
.floor-title, .items-nav-title .floor-title {
    color: var(--ap-text) !important;
    font-weight: 700;
}
.floor-desc, .items-nav-title .floor-desc { color: var(--ap-text-3) !important; }
.items-nav-title .today-brands a { color: var(--ap-text-3) !important; }
.items-nav-title .today-brands a:hover { color: var(--ap-primary) !important; }
.items-nav-title .more a { color: var(--ap-text-2) !important; }
.items-nav-title .more a:hover { color: var(--ap-primary) !important; }

/* 聚合分类块 */
.aggregation {
    background: #ffffff !important;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg) !important;
    overflow: hidden;
}
.aggregation .word a { color: var(--ap-text-2) !important; background: #f8fafc !important; border-radius: 0.6rem !important; }
.aggregation .word a:hover { color: var(--ap-primary) !important; }

/* ---------- 商品卡片 ---------- */
.module-goods-grid-container .item {
    background: #ffffff !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-lg) !important;
    box-shadow: var(--ap-shadow);
    transition: all 0.3s ease;
    overflow: hidden;
}
.module-goods-grid-container .item:hover {
    box-shadow: var(--ap-shadow-hover) !important;
    transform: translateY(-4px);
    border-color: #e2e8f0 !important;
}
.module-goods-grid-container .goods-images { border-radius: 0 !important; transition: transform 0.4s ease; }
.module-goods-grid-container .item:hover .goods-images { transform: scale(1.04); }
.module-goods-grid-container .goods-title { color: var(--ap-text) !important; font-weight: 500; }
.module-goods-grid-container .goods-title a { color: var(--ap-text) !important; }
.module-goods-grid-container .goods-title a:hover { color: var(--ap-primary) !important; }
.module-goods-grid-container .price,
.module-goods-grid-container .price strong,
.module-goods-list-container .price,
.module-goods-list-container .price strong {
    color: var(--ap-text) !important;
    font-weight: 700;
    font-size: 2.2rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.02em;
    text-align: left;
}
.module-goods-grid-container .price .price-symbol,
.module-goods-list-container .price .price-symbol {
    font-size: 0.72em;
    font-weight: 700;
    margin-right: 0.1em;
    vertical-align: 0.12em;
}
.module-goods-grid-container .price .unit,
.module-goods-list-container .price .unit,
.module-goods-list-container .price-content .unit {
    color: var(--ap-text-3) !important;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
}
@media only screen and (max-width: 640px) {
    .module-goods-grid-container .price,
    .module-goods-grid-container .price strong,
    .module-goods-list-container .price,
    .module-goods-list-container .price strong {
        font-size: 1.8rem;
    }
}
.module-goods-grid-container .original-price { color: var(--ap-text-3) !important; text-decoration: line-through; font-weight: 400; font-size: 1.3rem; letter-spacing: 0; }
.module-goods-grid-container .buy-btn {
    background: var(--ap-primary) !important;
    border-color: var(--ap-primary) !important;
    color: #fff !important;
    border-radius: 2rem !important;
    font-weight: 600;
}
.module-goods-grid-container .buy-btn:hover { background: var(--ap-primary-hover) !important; border-color: var(--ap-primary-hover) !important; }

/* ---------- 通用按钮 ---------- */
.am-btn-primary {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #fff !important;
    border-radius: 2rem !important;
    font-weight: 600;
}
.am-btn-primary:hover, .am-btn-primary:focus, .am-btn-primary.active {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}
.am-btn-secondary, .am-btn-default {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: var(--ap-text) !important;
    border-radius: 2rem !important;
}
.am-btn-secondary:hover, .am-btn-default:hover { border-color: var(--ap-primary) !important; color: var(--ap-primary) !important; }
.am-btn-warning {
    background: #fff7ed !important;
    border: 1px solid #fdba74 !important;
    color: #ea580c !important;
    border-radius: 2rem !important;
}
.am-btn-warning:hover { background: #ffedd5 !important; color: #c2410c !important; }

/* ---------- 输入框 / 表单 ---------- */
.am-form-field, .am-form input[type="text"], .am-form input[type="password"],
.am-form input[type="email"], .am-form input[type="tel"], .am-form select, .am-form textarea {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: var(--ap-text) !important;
    border-radius: 0.8rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.am-form-field:focus, .am-form input:focus, .am-form select:focus, .am-form textarea:focus {
    border-color: var(--ap-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.am-form-field::placeholder { color: var(--ap-text-3); }

/* ---------- 弹窗 / 下拉 ---------- */
.am-modal-dialog, .am-popup-inner {
    background: #ffffff !important;
    border: none !important;
    border-radius: 1.2rem !important;
    box-shadow: 0 20px 60px rgba(31, 41, 55, 0.2) !important;
    color: var(--ap-text);
}
.am-modal-hd, .am-modal-bd { color: var(--ap-text); }
.am-modal-hd { border-bottom: 1px solid var(--ap-border) !important; }

/* ---------- 分页 ---------- */
.am-pagination > li > a, .am-pagination > li > span {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: var(--ap-text-2) !important;
    border-radius: 0.6rem !important;
    margin: 0 0.3rem;
}
.am-pagination > .active > a, .am-pagination > .active > span {
    background: var(--ap-primary) !important;
    border-color: var(--ap-primary) !important;
    color: #fff !important;
}
.am-pagination > li > a:hover { border-color: var(--ap-primary) !important; color: var(--ap-primary) !important; }

/* ---------- 面包屑 ---------- */
.am-breadcrumb { background: transparent; }
.am-breadcrumb li, .am-breadcrumb a { color: var(--ap-text-2) !important; }
.am-breadcrumb a:hover { color: var(--ap-primary) !important; }

/* ---------- 页脚 ---------- */
.am-footer, .am-footer-default {
    background: #f3f4f5 !important;
    border-top: 0 !important;
    color: var(--ap-text-2) !important;
}
.footer-nav-content { border-bottom: 0 !important; }
.footer-nav-list .am-gallery-item .footer-nav-title { font-weight: 600; font-size: 1.6rem; color: #333333; }
.footer-nav-list a, .footer-about a, .footer-about span { color: var(--ap-text-2) !important; }
.footer-nav-list a:hover, .footer-about a:hover { color: var(--ap-primary) !important; }
.am-footer-miscs { background: #f3f4f5 !important; border-top: 0 !important; }
.am-footer-miscs, .am-footer-miscs a { color: var(--ap-text-3) !important; }
.friendship-list .title { color: var(--ap-text-2) !important; }

/* ---------- 详情页 / 内容页 ---------- */
.goods-detail-container, .goods-detail .goods-base-info,
.detail-nav, .detail-nav-ul, .am-tabs-nav { background: #ffffff !important; }
.goods-detail .goods-title-info { color: var(--ap-text); }
.goods-detail .goods-price-box { background: #f8fafc !important; border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); }
.goods-detail .goods-price-box .price { color: var(--ap-red) !important; }
.detail-nav a { color: var(--ap-text-2) !important; }
.detail-nav a.active, .detail-nav a:hover { color: var(--ap-primary) !important; border-bottom-color: var(--ap-primary) !important; }
.am-tabs-nav > li > a { color: var(--ap-text-2) !important; }
.am-tabs-nav > .am-active > a, .am-tabs-nav > li > a:hover { color: var(--ap-primary) !important; }

/* 列表/搜索页 */
.goods-list-item, .search-container .item {
    background: #ffffff !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-lg) !important;
}

/* 文章/面板 */
.article-list-item, .content-container, .am-panel {
    background: #ffffff !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-lg) !important;
    box-shadow: var(--ap-shadow);
}
.am-panel-hd, .am-panel-bd { background: transparent !important; color: var(--ap-text); }

/* 表格 */
.am-table, .am-table th, .am-table td { background: #ffffff !important; color: var(--ap-text-2) !important; border-color: var(--ap-border) !important; }
.am-table th { background: #f8fafc !important; color: var(--ap-text) !important; }

/* 用户中心 */
.personal-container, .user-center-container { background: var(--ap-bg); }
.user-center-left, .user-center-right {
    background: #ffffff !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-lg) !important;
    box-shadow: var(--ap-shadow);
}

/* 提示 */
.am-alert { background: #ffffff !important; border: 1px solid var(--ap-border) !important; color: var(--ap-text-2) !important; border-radius: var(--ap-radius) !important; }

/* 手机端底部导航 */
.mobile-navigation { background: #ffffff !important; border-top: 1px solid var(--ap-border) !important; }
.mobile-navigation a, .mobile-navigation p { color: var(--ap-text-2) !important; }
.mobile-navigation li.active a, .mobile-navigation li.active p { color: var(--ap-primary) !important; }

/* jegain header compatibility: keep the original reference site's selectors,
   dimensions and responsive interaction styles for the shared ShopXO header. */
.pc { display: block; }
.wap { display: none; }
.w1200 { padding-left: calc(100vw / 19.2 * 1.5); padding-right: calc(100vw / 19.2 * 1.5); margin: 0 auto; }
.flex { display: flex; display: -webkit-flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.header { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 100; }
.header .logo img { transition: all .3s; width: 180px; }
.header.close { display: none; }
.header .nav li { position: relative; }
.header .nav ul { display: flex; align-items: center; }
.header > .w1200 { width: 100%; max-width: none; min-width: 0; }
.header .nav { margin-left: auto; }
.header .nav li > a { transition: all .3s; display: block; color: #000; line-height: 1.1rem; font-size: 18px; padding: 0 .7rem; position: relative; }
.header .nav li > a:after { transition: all .3s; width: 0; bottom: -2px; content: ""; display: block; position: absolute; left: 50%; background: #55a43b; height: 3px; }
.header:hover .nav li:hover > a { font-weight: bold; }
.header .subnav { opacity: 0; visibility: hidden; white-space: nowrap; position: absolute; top: 120%; left: 50%; transform: translateX(-50%); padding-top: .3rem; transition: all .3s; }
.header .subnav a { padding: .1rem 0; margin-left: 1rem; color: #fff; font-size: 16px; font-weight: bold; }
.header .subnav a:hover, .header .subnav a.active { color: #6ac44b; }
.bachead { z-index: 99; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; transition: all .3s; width: 100%; height: 100%; background: rgba(0,0,0,.7); }
.bachead.open { opacity: 1; visibility: visible; }
.header.on { border-bottom: 1px solid #555555; }
.header.on .nav li > a { opacity: 1; }
.header .nav li:hover > a { color: #55a43b; opacity: 1 !important; }
.header .nav li:hover > a:after { width: 100%; left: 0; }
.header .nav li:hover .subnav { opacity: 1; visibility: visible; top: 100%; }

@media screen and (max-width: 768px) {
    .pc { display: none; }
    .wap { display: block; }
    body { padding-top: 50px !important; }
    .sp_header { height: 50px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; background: #fff; transition: all .3s; }
    .sp_header.oon { background-color: rgba(0,0,0,.4); }
    .sp_logo { padding: 10px; float: left; height: 50px; }
    .sp_logo img { margin: auto; max-height: 30px; max-width: 180px; }
    .sp_nav { width: 50px; float: right; position: relative; cursor: pointer; height: 30px; margin-top: 15px; }
    .sp_nav span { display: block; background: #000; width: 30px; height: 2px; position: absolute; left: 10px; transition: all ease .35s; }
    .sp_nav span:nth-of-type(1) { top: 0; }
    .sp_nav span:nth-of-type(2) { top: 10px; }
    .sp_nav span:nth-of-type(3) { top: 20px; }
    .sp_nav_se span:nth-of-type(1) { top: 10px; transform: rotate(45deg); }
    .sp_nav_se span:nth-of-type(2) { width: 0; }
    .sp_nav_se span:nth-of-type(3) { top: 10px; transform: rotate(-45deg); }
    .sjj_nav { position: fixed; z-index: 99; background: rgba(0,0,0,.8); width: 100%; height: 100%; font-size: 14px; line-height: 60px; top: -100%; left: 0; overflow: auto; overflow-x: hidden; transition: top ease .35s; }
    .sjj_nav.nav_show { top: 0; padding-top: 50px; }
    .sjj_nav > ul > li:first-child { overflow: hidden; border-top: 0; }
    .sjj_nav ul li { border-top: 1px #ddd solid; margin-left: 20px; position: relative; line-height: 60px; font-size: 14px; }
    .sjj_nav ul li i { position: absolute; top: 5px; right: 0; border-left: 1px #fff solid; height: 50px; padding: 0 7px; }
    .sjj_nav ul li i svg { width: 20px; height: 20px; fill: #fff; transform: rotate(-90deg); transition: all ease .35s; }
    .sjj_nav ul li .sjj_nav_i_se svg { transform: rotate(0deg); }
    .sjj_nav ul li a { color: #fff; width: 80%; font-size: 16px; display: block; }
    .sjj_nav ul li ul { display: none; }
    .sjj_nav ul li ul li a { color: #999; display: block; text-align: left; }
    .sjj_nav ul li ul li { border-top: 1px #ddd solid; }
}

/* keep the reference site's mobile breakpoint after the theme's legacy rules */
@media screen and (max-width: 768px) {
    body { padding-top: 50px !important; }
}

/* ==========================================================================
   头部导航（完全复原 jegain：透明悬浮 + 黑字导航 + 红色下划线 + 手机端抽屉）
   ========================================================================== */
/* 页面留白：内页给固定头部让位（行高 1.1rem 视口基准，与参考站一致）；首页让头部悬浮在 hero 上 */
body { padding-top: calc(100vw / 19.2 * 1.1); }
body.index-index-index { padding-top: 0; }

/* 桌面头部：透明悬浮（完全复刻参考站：absolute 定位、随页面滚动、视口 rem 基准） */
.ap-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 100;
    font-size: calc(100vw / 19.2);
    transition: border-color 0.3s;
}
.ap-header.on { border-bottom: 1px solid #c1c1c1; }
.ap-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* logo（参考站：width 180px） */
.ap-logo { flex-shrink: 0; }
.ap-logo img { width: 180px; transition: all 0.3s; }

/* 主导航（参考站：黑字 18px、行高 1.1rem、左右 padding .7rem） */
.ap-nav { display: flex; }
.ap-nav-list { display: flex; align-items: center; }
.ap-nav-list > li { position: relative; }
.ap-nav-list > li > a {
    display: block;
    color: #000;
    font-size: 18px;
    line-height: 1.1rem;
    padding: 0 0.7rem;
    position: relative;
    transition: all 0.3s;
}
.ap-nav-list > li > a:after {
    transition: all 0.3s;
    width: 0;
    bottom: -2px;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    background: #e2371d;
    height: 3px;
}
.ap-nav-list > li:hover > a {
    color: #e2371d;
    font-weight: bold;
}
.ap-nav-list > li:hover > a:after {
    width: 100%;
    left: 0;
}

/* 子菜单（参考站 .subnav：透明无卡片、横向排列、右对齐） */
.ap-subnav {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 120%;
    right: 0;
    padding: 0.3rem 1.5rem 0.3rem 0;
    white-space: nowrap;
    transition: all 0.3s;
    z-index: 101;
}
.ap-nav-list > li:hover .ap-subnav {
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.ap-subnav a {
    display: inline-block;
    padding: 0.1rem 0;
    margin-left: 1rem;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.25s;
}
.ap-subnav a:hover,
.ap-subnav a.active { color: #e2371d; }

/* 右侧：用户 + 购物车 */
.ap-header-right { display: flex; align-items: center; gap: 1.6rem; flex-shrink: 0; }
.ap-user-link {
    color: #333;
    font-size: 1.3rem;
    transition: color 0.25s;
}
.ap-user-link:hover { color: #e2371d; }
.ap-user-reg { color: var(--ap-primary); }
.ap-user-reg:hover { color: var(--ap-primary-hover); }
.ap-cart { position: relative; display: block; color: #000; font-size: 2.2rem; }
.ap-cart:hover { color: #e2371d; }
.ap-cart-num {
    position: absolute;
    top: -0.6rem;
    right: -0.9rem;
    min-width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    padding: 0 0.4rem;
    background: #e2371d;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    border-radius: 1rem;
}

/* ========== 手机端头部（完全复原 jegain：sp_header + sjj_nav 抽屉） ========== */
@media (max-width: 640px) {
    body, body.index-index-index { padding-top: 5rem; }
    /* 隐藏桌面头部 */
    .ap-header { display: none; }
    /* 手机固定白条（参考站 sp_header：白底无边框，滚动后变半透明） */
    .ap-sp-header {
        height: 5rem;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.2rem;
    }
    .ap-sp-header.oon { background-color: rgba(0, 0, 0, 0.4); }
    .ap-sp-logo img { height: 3.4rem; max-width: 14rem; object-fit: contain; }
    /* 汉堡按钮（三线 + 点击变 X） */
    .ap-sp-nav {
        width: 3rem;
        height: 3rem;
        position: relative;
        cursor: pointer;
    }
    .ap-sp-nav span {
        display: block;
        background: #000;
        width: 3rem;
        height: 2px;
        position: absolute;
        left: 0;
        transition: all ease 0.35s;
    }
    .ap-sp-nav span:nth-of-type(1) { top: 0.6rem; }
    .ap-sp-nav span:nth-of-type(2) { top: 1.4rem; }
    .ap-sp-nav span:nth-of-type(3) { top: 2.2rem; }
    .ap-sp-nav.ap-sp-nav-se span:nth-of-type(1) { top: 1.4rem; transform: rotate(45deg); }
    .ap-sp-nav.ap-sp-nav-se span:nth-of-type(2) { width: 0; }
    .ap-sp-nav.ap-sp-nav-se span:nth-of-type(3) { top: 1.4rem; transform: rotate(-45deg); }
    /* 全屏抽屉导航（参考站 sjj_nav：rgba(0,0,0,.8)） */
    .ap-sjj-nav {
        position: fixed;
        z-index: 99;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        font-size: 14px;
        line-height: 60px;
        top: -100%;
        left: 0;
        overflow: auto;
        overflow-x: hidden;
        transition: top ease 0.35s;
        padding-top: 5rem;
    }
    .ap-sjj-nav.ap-nav-show { top: 0; }
    .ap-sjj-nav > ul { padding: 0 1.5rem 2rem; }
    .ap-sjj-nav ul li {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-left: 0;
        position: relative;
        line-height: 60px;
        font-size: 14px;
    }
    .ap-sjj-nav > ul > li:first-child { border-top: 0; }
    .ap-sjj-nav ul li a { color: #fff; font-size: 16px; display: block; }
    .ap-sjj-nav ul li ul { display: none; padding-left: 1.2rem; }
    .ap-sjj-nav ul li ul li a { color: #999; display: block; text-align: left; font-size: 14px; }
    .ap-sjj-nav ul li .ap-nav-xjb {
        position: absolute;
        top: 5px;
        right: 0;
        height: 50px;
        line-height: 50px;
        padding: 0 0.7rem;
        border-left: 1px solid #fff;
        color: #fff;
        font-style: normal;
        transition: transform 0.35s;
    }
    .ap-sjj-nav ul li .ap-nav-xjb.on { transform: rotate(180deg); color: #e2371d; }
    /* 抽屉底部工具（登录/购物车） */
    .ap-sjj-nav .ap-sjj-nav-tools {
        display: flex;
        gap: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 1rem;
    }
    .ap-sjj-nav .ap-sjj-nav-tools a { color: #fff; font-size: 15px; }
    .ap-sjj-nav .ap-sjj-nav-tools a:hover { color: #e2371d; }
    /* 桌面 right 区在手机端隐藏 */
    .ap-header-right { display: none; }
}

/* Final header breakpoint override: the shared header follows the reference
   site's 768px desktop/mobile cutoff. */
@media screen and (max-width: 768px) {
    body { padding-top: 50px !important; }
    .pc { display: none !important; }
    .wap { display: block !important; }
}

/* Exact desktop header metrics from jegain style.css.  The reference page
   uses a viewport-based rem (100vw / 19.2); keeping these calculations local
   prevents the rest of ShopXO from changing its 10px theme scale. */
@media screen and (min-width: 769px) {
    body.index-category-index .header,
    body.index-search-index .header { background: #27282c; }

    body.index-goods-index { padding-top: 0; }
    body.index-goods-index .header.pc { position: relative; background: #27282c; }

    .header .nav li > a {
        line-height: calc(100vw / 19.2 * 1.1);
        padding-left: calc(100vw / 19.2 * .7);
        padding-right: calc(100vw / 19.2 * .7);
    }
    .header .subnav {
        padding-right: calc(100vw / 19.2 * 1.5);
        padding-top: calc(100vw / 19.2 * .3);
    }
    .header .subnav a {
        padding-top: calc(100vw / 19.2 * .1);
        padding-bottom: calc(100vw / 19.2 * .1);
        margin-left: calc(100vw / 19.2 * 1);
    }
}

/* Exact mobile dimensions from jegain common.css. */
@media screen and (max-width: 768px) {
    .sp_header { height: 50px; z-index: 10; }
    .sp_logo { padding: 10px; height: 50px; }
    .sp_logo img { margin: auto; max-height: 30px; max-width: none; }
    .sp_nav { width: 50px; height: 30px; margin-top: 15px; }
    .sp_nav span { width: 30px; height: 2px; left: 10px; transition: all ease .35s; }
    .sp_nav span:nth-of-type(1) { top: 0; }
    .sp_nav span:nth-of-type(2) { top: 10px; }
    .sp_nav span:nth-of-type(3) { top: 20px; }
    .sjj_nav { z-index: 9; line-height: 60px; }
    .sjj_nav.nav_show { top: 0; padding-top: 50px; }
    .sjj_nav ul li i { top: 5px; right: 0; height: 50px; padding: 0 7px; }
    .sjj_nav ul li { margin-left: 20px; line-height: 60px; font-size: 14px; }
    .sjj_nav ul li a { width: 80%; font-size: 16px; display: inline; }
    .sjj_nav ul li ul li a { display: block; }
    .sjj_nav > ul > li:last-child { border-bottom: 1px #ddd solid; }
    .sjj_nav > ul > li:first-child > a { float: left; width: calc(100% - 70px); }
    .sjj_nav > ul > li:first-child .language { float: right; width: 70px; overflow: hidden; line-height: 30px; margin-top: 5px; }
    .sjj_nav > ul > li:first-child .language a { width: 35px; float: left; border-left: 1px #ddd solid; text-align: center; color: #999; }
    .sjj_nav ul li ul li > ul { margin-left: 10px; }
    .sjj_nav ul li img { vertical-align: middle; max-height: 14px; }
}