/* 全局重置 */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif}
body{background:#f5f7fa;color:#333;line-height:1.5}
ul,ol{list-style:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;vertical-align:middle;border:none}
button,input{outline:none;border:none;background:none}
table{width:100%;border-collapse:collapse}

/* 公共容器 */
.container{width:1080px;margin:0 auto}
@media(max-width:1080px){.container{width:100%;padding:0 10px}}

/* 页头 */
.header{height:60px;background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:999}
.header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{height:40px}
.site-name{font-size:20px;font-weight:bold;color:#2d8cf0}

/* 页脚 悬浮底部 */
.footer{height:50px;background:#fff;border-top:1px solid #eee;position:fixed;bottom:0;left:0;width:100%;z-index:999}
.footer-nav{display:flex;align-items:center;justify-content:space-around;height:100%}
.footer-nav li{text-align:center}
.footer-nav li i{font-size:18px;margin-bottom:3px}
.footer-nav li.active{color:#2d8cf0}

/* 主体内容 避开页脚 */
.main{padding-bottom:60px}

/* 按钮样式 */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:4px;cursor:pointer;transition:all .3s}
.btn-primary{background:#2d8cf0;color:#fff}
.btn-primary:hover{background:#1b7aff}
.btn-default{background:#eee;color:#333}
.btn-radius{border-radius:25px}

/* 模态框 */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:none}
.modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;overflow:hidden}
.modal-close{position:absolute;top:10px;right:10px;width:30px;height:30px;line-height:30px;text-align:center;font-size:18px;cursor:pointer}
.modal-body{padding:20px}

/* 五星评分 */
.star{color:#ffbd17}
.star i{margin-right:2px}

/* 分割线 */
.divider{height:1px;background:#eee;margin:10px 0}

/* 遮罩层 */
.mask{position:relative;overflow:hidden}
.mask-layer{position:absolute;bottom:0;left:0;width:100%;height:120px;background:linear-gradient(transparent,#fff);display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px}

/* 高级分页样式 */
.pagination .btn{width:35px;height:35px;border-radius:50%;padding:0;font-size:14px}
.pagination .btn-primary{background:#2d8cf0;color:#fff}

/* 分类按钮hover动画 */
.btn:hover{transform:scale(1.08);box-shadow:0 3px 10px rgba(45,140,240,0.2)}

/* 跑马灯 */
.marquee{color:#f57c00;font-weight:500}

/* 商品列表hover */
tbody tr:hover{background:#f9fafc}

/* 模态框动画 */
.modal-box{animation:modalIn .3s}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 非VIP遮罩强化 */
.mask-layer{height:200px;background:linear-gradient(transparent,rgba(255,255,255,0.9),#fff);z-index:10}

/* ============== 全局手机端响应式 ============== */
@media(max-width:768px){
  .container{
    padding:0 10px !important;
    width:100% !important;
  }
  table{
    font-size:12px !important;
  }
  th,td{
    padding:8px 5px !important;
  }
  img[style*="width:44px;height:44px"]{
    width:36px !important;
    height:36px !important;
  }
  .btn{
    padding:4px 8px !important;
    font-size:12px !important;
  }
  .modal{
    padding:10px !important;
  }
  .modal-box{
    width:100% !important;
    max-height:90vh !important;
    overflow:auto !important;
  }
  .modal-body{
    padding:15px !important;
  }
  .banner-loop img,
  .banner-track img{
    object-fit:cover !important;
  }
  .banner-loop,
  .banner-track{
    gap:8px !important;
  }
  /* 手机端表格不换行 */
  td:nth-child(2){
    max-width:120px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}