/* ============================================================
   onlyxh · 星火卡密  公共样式（字节风 Bytedance Design）
   设计语言：克制、留白、字节蓝主色、中性灰阶、15px 圆角
   ============================================================ */
:root{
    --brand:#3370ff;        /* 主色 字节蓝 */
    --brand-d:#1456f0;      /* 按下深蓝 */
    --brand-bg:#eef3ff;     /* 浅蓝底 */
    --bg:#f5f6f7;           /* 页面中性灰底 */
    --line:#eaecef;         /* 描边 */
    --line-2:#f0f1f2;
    --t1:#1d2129;           /* 主文字 */
    --t2:#4e5969;           /* 次文字 */
    --t3:#86909c;           /* 弱文字 */
    --danger:#f53f3f;       /* 价格/危险红 */
    --ok:#00b42a;           /* 成功绿 */
    --warn:#ff7d00;         /* 警示橙 */
    --radius:15px;
    --strip-h:0px;         /* 品牌高亮条已移除，间距归零 */
    --shadow-1:0 2px 8px rgba(29,33,41,.05);
    --shadow-2:0 6px 20px rgba(29,33,41,.10);
    --brand-shadow:0 8px 20px rgba(51,112,255,.24);
}

html{
    min-width: 300px;
    max-width: 100%;
}
body{
    margin: 0;
    font-family: "PingFang SC","Microsoft YaHei","微软雅黑",-apple-system,BlinkMacSystemFont,"Segoe UI",Nunito,sans-serif;
    color: var(--t1);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------- */
/* 首页栏（字节风：白底 + 1px 浅灰分割线） */
.header{
    width: 100%;
    gap: 24px;
    background-color: #fff;
    z-index: 1000;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    display:flex;
    position: fixed;
    top: 0;
    align-items: center;
    padding: 0 14px;
    height: 68px;
}

/* ---- 文字 Logo（OnlyXH 星火卡密 + slogan） ---- */
.brand-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 8px;
    line-height: 1.2;
}
.brand-logo{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;margin-right:10px;box-shadow:0 3px 10px rgba(20,48,107,.22)
}
.brand-name{
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .5px;
    white-space: nowrap;
}
.brand-cn{ color: var(--t1); }
.brand-sep{ color: var(--t3); font-weight: 600; }
.brand-sub{ color: var(--brand); font-size: 15px; font-weight: 700; white-space: nowrap; }
/* 旧的导航内运营描述已移至独立品牌高亮条 .brand-strip */
.brand-desc{ display: none; }

/* ==================== */
/* 品牌高亮条（导航与公告之间，单独一行，突显两大业务） */
/* ==================== */
.brand-strip{
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 998;
    background: linear-gradient(90deg,#eef3ff 0%,#e3ecff 50%,#eef3ff 100%);
    border-bottom: 1px solid #d2deff;
    padding: 9px 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #1456f0;
}
.brand-strip i.bs-icon{ color: var(--warn); font-size: 15px; flex-shrink: 0; }
.brand-strip .bs-text b{ color: #0e42c8; font-weight: 800; }

/* ==================== */
/* 公告栏 */
/* ==================== */
.announcement-bar {
    position: fixed;
    top: calc(68px + var(--strip-h));
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(135deg, #fff7e8 0%, #ffefd6 100%);
    border-bottom: 1px solid #ffd591;
    padding: 10px 40px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    max-height: 120px;
    overflow: hidden;
    box-sizing: border-box;
}
.announcement-bar.announcement-hide {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-width: 0;
}
.announcement-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 1100px;
    width: 100%;
}
.announcement-icon {
    color: var(--warn);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.announcement-text {
    font-size: 13px;
    line-height: 1.6;
    color: #8a5200;
    text-align: justify;
}
.announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #b07b2e;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.announcement-close:hover {
    background: rgba(255, 125, 0, 0.14);
    color: #8a5200;
}

/* 商品卡片交互 */
.apple-idbox{
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
/* 商品卡片hover：浮起 + 阴影 + 蓝色描边（字节风克制） */
.apple-idbox:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--brand);
}
.apple-idbox:active{
    transform: translateY(0);
    box-shadow: var(--shadow-1);
}

/* ==================== */
/* 骨架屏加载动画 */
/* ==================== */
.skeleton {
    background: linear-gradient(90deg, #eef0f2 25%, #f7f8fa 50%, #eef0f2 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}
.skeleton-text {
    height: 14px;
    width: 40px;
    vertical-align: middle;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-fadeout {
    animation: skeleton-fade 0.3s ease-out forwards;
}
@keyframes skeleton-fade {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==================== */
/* 响应式通用布局 */
/* ==================== */
.web-content{
    margin-top: 80px;
    padding: 8px 12px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    transition: margin-top 0.3s ease;
}
/* 有公告栏时，内容区下移 */
body.has-announcement .web-content {
    margin-top: 140px;
}
.head-logo{
    height: 50px;
    width: auto;
}

/* ---- 导航按钮：无边框文字按钮，hover 浅蓝胶囊（字节风） ---- */
.home-button{
    font-size: 12.5px;
    height: 34px;
    padding: 0 13px;
    color: var(--t1);
    background-color: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.home-button:hover{
    background-color: var(--brand-bg);
    border-color: transparent;
    color: var(--brand-d);
    transform: translateY(-1px);
}
.home-button:active{
    background-color: #e0eaff;
    transform: translateY(0);
}
/* PC 端登录/个人中心按钮固定导航最右侧 */
.header > .nav-account{ margin-left: auto; }
/* 全站页脚 */
.site-footer{
    margin-top: 44px;
    padding: 24px 14px 30px;
    text-align: center;
    color: var(--t3);
    font-size: 12.5px;
    line-height: 1.8;
    background: #fff;
    border-top: 1px solid var(--line);
}
.site-footer a{ color: var(--t3); text-decoration: none; }
/* 购物车角标 */
.cart-badge{
    display:none;
    min-width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    background:var(--danger);
    color:#fff;
    border-radius:9px;
    font-size:11px;
    font-weight:700;
    padding:0 5px;
    margin-left:5px;
    vertical-align:middle;
    box-sizing:border-box;
}

/* 苹果id板块：纵向列表 */
.apple{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
}
/* 专栏标题 */
h2{
    color: var(--t1);
    font-size: 19px;
    font-weight: 800;
    margin: 22px 2px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 商品盒子：横向白卡 */
.apple-idbox{
    width: 100%;
    min-height: 90px;
    height: auto;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    background: #fff;
    box-shadow: var(--shadow-1);
}
/* 商品名称 */
.apple-font{
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 0.2s ease;
    font-weight: 600;
    color: var(--t1);
}
.apple-idbox:hover .apple-font{
    color: var(--brand);
}
/* 商品价格+库存行 */
.apple-meta{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    margin-top: 6px;
}
.price-text{
    color: var(--danger);
    font-weight: 800;
    font-size: 18px;
}
.stock-text{
    color: var(--t3);
    font-size: 12px;
}
.sold-out-text{
    color: var(--danger);
    font-weight: bold;
}

/* ==================== */
/* 横向列表商品样式 */
/* ==================== */
.product-icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--brand);
}
.product-icon i{
    color: white;
    font-size: 28px;
}
.product-info{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product-arrow{
    color: #c9cdd4;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.apple-idbox:hover .product-arrow{
    transform: translateX(3px);
    color: var(--brand);
}

/* 所有商品图标统一字节蓝纯色 */
.product-icon{
    background: var(--brand);
}
/* 售完状态：整体置灰 */
.apple-idbox.sold-out{
    filter: grayscale(1);
    opacity: 0.6;
    cursor: not-allowed;
}
.apple-idbox.sold-out:hover{
    transform: none;
    box-shadow: var(--shadow-1);
    border-color: var(--line);
}

/* ==================== */
/* 平板端（<=900px） */
/* ==================== */
@media(max-width: 900px){
    :root{ --strip-h:0px; }
    .brand-strip{ font-size:11.5px; padding:8px 12px; gap:6px; }
    .web-content{ margin-top:80px; }
    body.has-announcement .web-content {
        margin-top: 140px;
    }
}

/* 移动端：导航 72px，品牌仅主行（描述已移至品牌高亮条），字号加大 */
@media(max-width: 768px){
    .header{ height: 72px; }
    .brand-link{ flex: 1 1 auto; min-width: 0; margin-right: 6px; }
    .brand-name{ font-size: 17px; gap: 5px; }
    .brand-sub{ font-size: 14px; }
    .brand-sep{ font-size: 15px; }
    .mobile-menu-btn{ flex-shrink: 0; }
    .brand-strip{ top: 72px; }
    .announcement-bar{ top: calc(72px + var(--strip-h)); }
    .web-content{ margin-top: 84px; }
    body.has-announcement .web-content{ margin-top: 144px; }
}

/* ==================== */
/* 手机端（<=600px） */
/* ==================== */
@media(max-width: 600px){
    .header{
        gap: 10px;
        padding: 0 12px;
        height: 72px;
    }
    .brand-name{ font-size: 15.5px; }
    .brand-logo{ width:32px;height:32px;margin-right:8px;border-radius:9px }
    .home-button{
        padding: 0 10px;
        font-size: 11.5px;
    }
    .announcement-bar {
        top: calc(72px + var(--strip-h));
        padding: 8px 35px 8px 12px;
        max-height: 150px;
    }
    .announcement-icon { font-size: 14px; }
    .announcement-text {
        font-size: 11px;
        line-height: 1.5;
    }
    .announcement-close {
        right: 8px;
        font-size: 14px;
    }
    .web-content {
        margin-top: 82px;
        padding: 6px 10px;
    }
    body.has-announcement .web-content {
        margin-top: 164px;
    }
    h2{ font-size: 17px; margin: 18px 2px 12px; }
    .apple{ gap: 10px; }
    .apple-idbox{
        min-height: 80px;
        padding: 12px;
        border-radius: 10px;
        gap: 12px;
    }
    .product-icon{
        width: 50px;
        height: 50px;
    }
    .product-icon i{ font-size: 24px; }
    .apple-font{ font-size: 13px; }
    .apple-meta{
        gap: 10px;
        margin-top: 4px;
    }
    .price-text{ font-size: 16px; }
    .stock-text{ font-size: 11px; }
    .product-arrow{ font-size: 12px; }
    .skeleton-text {
        height: 12px;
        width: 35px;
    }
}

/* ==================== */
/* 超小屏（<=400px） */
/* ==================== */
@media(max-width: 400px){
    body.has-announcement .web-content {
        margin-top: 180px;
    }
    .announcement-text { font-size: 10px; }
    .apple{ gap: 8px; }
    .home-button{
        padding: 0 8px;
        font-size: 11px;
    }
    .apple-idbox{
        padding: 10px;
        gap: 10px;
    }
    .product-icon{
        width: 45px;
        height: 45px;
    }
    .product-icon i{ font-size: 20px; }
    .apple-font{ font-size: 12px; }
    .apple-meta{
        font-size: 12px;
        gap: 8px;
    }
    .price-text{ font-size: 15px; }
    .stock-text{ font-size: 10px; }
}

/* ==================== */
/* 超小屏（<=360px） */
/* ==================== */
@media(max-width: 360px){
    body.has-announcement .web-content {
        margin-top: 190px;
    }
    .apple{ gap: 6px; }
    .apple-idbox{
        padding: 8px;
        gap: 8px;
    }
    .product-icon{
        width: 40px;
        height: 40px;
    }
    .product-icon i{ font-size: 18px; }
    .apple-font{ font-size: 11px; }
    .price-text{ font-size: 14px; }
}

/* ============================================================
   移动端汉堡菜单（现代重设计：平滑滑入 + 逐项 stagger + 蓝色系）
   只在 <=1280px 生效；用 body 前缀提高特异性以覆盖各页内联旧样式
   ============================================================ */
@keyframes mmItem{ from{opacity:0;transform:translateX(26px)} to{opacity:1;transform:translateX(0)} }
@media (max-width:1280px){
    /* 抽屉面板：visibility+transform+opacity，可平滑过渡 */
    body .mobile-menu{
        display:block !important;
        top:0;right:0;
        width:300px;max-width:84vw;height:100dvh;
        padding:0;
        background:#fff;
        border:none;border-radius:0;
        box-shadow:-14px 0 44px rgba(20,48,107,.20);
        transform:translateX(102%);
        opacity:0;visibility:hidden;
        overflow-y:auto;overscroll-behavior:contain;
        transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility 0s linear .42s;
    }
    body .mobile-menu.show{
        transform:translateX(0);opacity:1;visibility:visible;
        transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .32s ease,visibility 0s;
    }
    /* 顶部标题条：蓝色渐变 */
    body .mobile-menu .mobile-menu-header{
        border-bottom:1px solid #eef1f6;border-image:none;
        padding:18px 20px;margin:0;
        background:linear-gradient(135deg,#3a77ff,#1456f0);
        color:#fff;font-size:17px;
        position:sticky;top:0;z-index:2;
    }
    body .mobile-menu .mobile-menu-close{
        background:rgba(255,255,255,.16);border:none;border-radius:9px;
        width:34px;height:34px;color:#fff;font-size:16px;cursor:pointer;
        transition:background .2s;
    }
    body .mobile-menu .mobile-menu-close:active{background:rgba(255,255,255,.32)}
    /* 菜单项间距（header 全宽 sticky，不额外包裹） */
    body .mobile-menu > .mobile-menu-item{ margin:2px 12px; }
    body .mobile-menu > .mobile-menu-item:nth-child(2){ margin-top:10px; }
    body .mobile-menu > .mobile-menu-item:last-child{ margin-bottom:22px; }
    body .mobile-menu > .mobile-submenu{ margin:0 12px; }
    /* 菜单项：圆角、去硬边框、图标浅蓝方块 */
    body .mobile-menu .mobile-menu-item{
        display:flex;align-items:center;
        border-bottom:none;border-radius:12px;
        padding:11px 13px;margin:2px 0;
        color:#1d2129;font-size:15px;font-weight:600;
        background:transparent;
        opacity:0;transform:translateX(26px);
        transition:background .2s ease,color .2s ease;
    }
    body .mobile-menu.show .mobile-menu-item{ animation:mmItem .46s cubic-bezier(.22,.61,.36,1) forwards; }
    body .mobile-menu.show > .mobile-menu-item:nth-child(2){animation-delay:.04s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(3){animation-delay:.08s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(4){animation-delay:.12s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(5){animation-delay:.16s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(6){animation-delay:.20s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(8){animation-delay:.24s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(9){animation-delay:.28s}
    body .mobile-menu.show > .mobile-menu-item:nth-child(10){animation-delay:.32s}
    body .mobile-menu .mobile-menu-item i{
        width:34px;height:34px;line-height:34px;text-align:center;
        margin-right:12px;flex-shrink:0;
        border-radius:10px;background:#eef3ff;color:#3370ff;font-size:15px;
    }
    body .mobile-menu .mobile-menu-item:active{ background:#eef3ff; }
    body .mobile-menu .mobile-menu-item .mobile-submenu-arrow{ margin-left:auto;color:#86909c;transition:transform .35s ease; }
    body .mobile-menu .mobile-menu-item .mobile-submenu-arrow.rotate{ transform:rotate(180deg); }
    /* 子菜单：max-height 平滑展开 */
    body .mobile-menu .mobile-submenu{
        display:block !important;
        background:transparent;
        max-height:0;overflow:hidden;opacity:0;
        transition:max-height .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
    }
    body .mobile-menu .mobile-submenu.show{ max-height:320px;opacity:1; }
    body .mobile-menu .mobile-submenu-item{
        display:flex;align-items:center;
        border-bottom:none;border-radius:10px;
        margin:1px 0 1px 26px;padding:10px 13px;
        color:#4e5969;font-size:14px;font-weight:500;
        transition:background .2s ease;
    }
    body .mobile-menu .mobile-submenu-item i{
        width:29px;height:29px;line-height:29px;text-align:center;
        margin-right:10px;flex-shrink:0;
        border-radius:8px;background:#eef3ff;color:#3370ff;font-size:13px;
    }
    body .mobile-menu .mobile-submenu-item:active{ background:#eef3ff; }
    /* 遮罩：淡入 + 轻微模糊 */
    body .mobile-menu-overlay{
        display:block !important;
        top:0;left:0;width:100%;height:100%;
        background:rgba(15,23,42,.46);
        backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
        opacity:0;visibility:hidden;
        transition:opacity .35s ease,visibility 0s linear .35s;
    }
    body .mobile-menu-overlay.show{ opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s; }
}

/* ============================================================
   全局下线导航入口：账号商城 / 批发专区（页面文件保留，仅不暴露）
   ============================================================ */
a[href*="marketplace.html"],
a[href*="wholesale.html"] { display: none !important; }