.page-index { min-height: calc(100vh - 50px); padding-bottom: 0; background: #ffffff; }

/* 顶部导航悬浮在轮播之上，全屏扁平化：中间LOGO，右上角语言按钮 */
.top-bar { position: fixed; top: 0; left: 0; right: 0; height: 44px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; background: transparent; color: #ffffff; z-index: 100; }
.top-left, .top-right { width: 25%; font-size: 12px; display:flex; align-items:center; justify-content:flex-start; }
.top-center { width: 50%; display: flex; justify-content: center; }
/* 右侧语言按钮贴右对齐，和 H5 顶部一致 */
.top-right { justify-content: flex-end; }
/* 顶部 LOGO 基础样式；具体尺寸在 @media 中按原项目控制 */
.logo-img { display:block; }

/* 语言选择样式，尽量对齐 H5 epselect.vue */
.lang-switch-wrap {
  position: relative;
  width: 68px;   /* ≈130rpx 在 375~390 宽设备上的像素 */
  height: 24px;  /* ≈48rpx */
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-switch {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  outline: none;
}
.lang-icon { width: 24px; height: 18px; }
.lang-text { display: none; }
.lang-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  margin-top: 6px;           /* 对应 ep-picker-content-wrap padding-top */
  width: 100%;               /* 下拉宽度和按钮一致 */
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 20px 5px rgba(0,0,0,0.3);
  padding: 3px 0;
  display: none;
  z-index: 120;
  max-height: 181px;         /* 与 H5 相同上限 */
  overflow-y: auto;
}
.lang-menu-open { display: block; }
.lang-item {
  display: flex;
  align-items: center;
  justify-content: center;   /* 文本居中 */
  padding: 8px 6px 5px;
  font-size: 12px;           /* ≈24rpx */
  cursor: pointer;
  border-bottom: 1px solid #DFDDDD;
  text-align: center;
  white-space: nowrap;
}
.lang-item:last-child { border-bottom: none; }
.lang-item img { width: 24px; height: 18px; margin-right: 4px; }
.lang-item:hover { background:#f5f7fa; }
.lang-label { color:#999; font-size:12px; }
.lang-item-active { background:#ff7f2a; }
.lang-item-active .lang-label { color:#fff; }

/* 下拉容器指示箭头样式，对齐 H5 .triangle */
.triangle {
  width: 0;
  height: 0;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 6px solid #fff;
  border-left: 6px solid rgba(0, 0, 0, 0);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: content-box;
}

.banner-section { position: relative; margin-top: 54px; padding: 0 0 18px 0; }
/* 高度按原H5 swiper: 400rpx ≈ 宽度的 53.3% 做等比缩放，透明底全屏展示 */
.banner-wrapper { position: relative; width: 100%; padding-top: 53.33%; border-radius: 0; overflow: hidden; background: transparent; }
.banner-slide { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transition: opacity .4s; }
.banner-slide img { width:100%; height:100%; border-radius:0; }
.banner-slide-active { opacity:1; }
.banner-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#666; font-size:14px; }
/* 小圆点悬浮在轮播底部附近，稍微离开最下边，类似原H5的 indicator-dots 效果 */
.banner-dots { position:absolute; left:0; right:0; bottom:23px; display:flex; justify-content:center; gap:6px; }
/* 未激活：透明灰感（半透明浅灰），激活：蓝色 */
.banner-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.3); border:1px solid rgba(0,0,0,0.15); }
.banner-dot-active { background:#0086d6; border-color:#0086d6; }

.shortcut-section { padding: 0 10px; }
.shortcut-row { display: flex; justify-content: space-between; margin-top: 10px; }
.shortcut-item { flex: 1; margin: 0 4px; background: #fff; border-radius: 10px; padding: 14px 6px; display:flex; flex-direction:column; align-items:center; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
/* 基础图标样式 */
.shortcut-icon { display:block; margin:0 auto 8px; object-fit: contain; }
/* 运费查询 / 在线客服大图标（按原项目尺寸） */
.shortcut-icon-main { width: 101px; height: 83px; }
/* 仓库地址 / 包裹预报 / 我要打包 / 付款发货小图标：原项目 46x46 */
.shortcut-icon-small { width: 46px; height: 46px; }
.shortcut-title { font-size: 13px; font-weight: 600; color:#333; }
.shortcut-desc { margin-top: 2px; font-size: 11px; color:#999; text-align:center; line-height: 1.3; }

.boxthree-section { padding: 10px 10px 0 10px; }
.box-three { border-bottom: 1px solid #ddd; display:flex; width:100%; margin:0 auto 10px auto; background:#fff; border-radius:10px; box-sizing:border-box; padding:10px 12px; }
.box-three .left { width:46px; height:46px; margin-right:12px; }
.box-three .right { display:flex; flex-wrap:wrap; align-items:center; align-content:center; }
.box-three .right .textOne { width:100%; font-size:13px; color:#333; }
.box-three .right .textTwo { width:100%; font-size:12px; color:#999; line-height:1.4; }

.brand-section { margin-top: 20px; display:flex; justify-content:center; }
.brand-inner { display:flex; align-items:center; opacity: 0.7; }
.brand-icon { width: 30px; height: 30px; margin-right: 6px; }
.brand-text { font-weight: 700; font-size: 14px; color:#333; }

.tabbar { position: fixed; left:0; right:0; bottom:0; height: 50px; background:#fff; border-top:1px solid #e5e5e5; display:flex; }
.tab-item { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size: 11px; color:#666; }
.tab-item-active { color:#24afd6; }
.tab-icon { width: 28px; height: 28px; margin-bottom: 2px; }
.tab-disabled { color:#bbb; }

@media (max-width:768px) {
  /* 按原项目 bigTop .img 的写法控制移动端 LOGO 尺寸与位置 */
  .logo-img {
    width: 125px;
    height: auto; /* 保持原图比例，避免变形 */
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    margin-bottom: 20px;
  }
}

@media (min-width:768px) {
  .page-index { max-width: 480px; margin:0 auto; border:1px solid #eee; }
}

.tab-badge {
    position: absolute;
    top: 4px;
    right: 22%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    display: none;
}

/* 首页登录成功弹窗广告 & 新人优惠券弹窗（对齐 H5 .denglu / .couponBox 风格） */
.index-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

.index-popup-box {
    width: 414px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .index-popup-box,
    .index-popup-coupon-box {
        width: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.index-popup-ad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #fff;
}

.index-popup-ad-tabs {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
}

.index-popup-ad-tab {
    margin-right: 6px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 999px;
    color: #fff;
}

.index-popup-ad-tab-active {
    background: #1787e7;
}

.index-popup-ad-close {
    font-size: 26px;
    cursor: pointer;
}

.index-popup-ad-body {
    position: relative;
}

.index-popup-ad-img {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: 12px;
    object-fit: contain;
    background: #000;
}

.index-popup-ad-today {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}

.couponBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 70vh;
    border-radius: 12px;
    background: #f8f8f8;
    box-sizing: border-box;
}

.couponTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    font-weight: 700;
    color: #e0dad2;
    border-bottom: 1px dashed #7e6f55;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(45deg, #917c64, #aa9a87);
    position: relative;
}

.couponTitle-main {
    font-size: 26px;
    color: #311a08;
}

.couponTitle-sub {
    margin-top: 4px;
    font-size: 14px;
    color: #f5f1ea;
}

.coupon-close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 32px;
    color: #311a08;
    cursor: pointer;
}

.couponCenter {
    overflow: auto;
    width: 90%;
    max-height: 320px;
    padding: 12px 0;
}

.couponList {
    display: flex;
    align-items: center;
    border-radius: 12px;
    height: 90px;
    margin-bottom: 8px;
    overflow: hidden;
}

.couponList-left {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(to right, #1e1e1e, #616161);
    color: #dedabc;
}

.couponList-amount {
    font-size: 24px;
    margin-right: 16px;
}

.couponList-amount span {
    font-size: 32px;
}

.couponList-info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.couponList-title {
    margin-bottom: 4px;
}

.couponList-time {
    font-size: 12px;
}

.couponList-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(to right, #83705a, #cbb8a3);
}

.couponBottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 12px 0 16px;
}

.couponBottom button {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    border: none;
    background: #1787e7;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}