﻿.shop-nav { position: relative; display: flex; align-items: center; width: 1080px; height: 60px; margin: 0 auto 16px; padding: 0 30px; box-sizing: border-box; background: #fff; border-radius: 8px; margin-top: -60px; background: linear-gradient(180deg, #fffcfc 1%, #ffffff 100%, #ffffffc9 100%); border: solid 1px #fff; }
.shop-nav-item { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 60px; margin-right: 44px; font-size: 18px; font-weight: 400; color: #92959F; white-space: nowrap; cursor: pointer; transition: color .2s ease; }
.shop-nav-item:hover { color: #555; }
.shop-nav-icon { display: block; width: 30px; height: 30px; margin-right: 12px; object-fit: contain; }
.shop-nav-item.active { font-weight: 600; color: #222; }



/* 底部滑动线 */
.shop-nav-line { position: absolute; bottom: 0; width: 46px; height: 3px; border-radius: 3px 3px 0 0; background: #F04438; transition: left .25s ease; }

.shop-nav-line {
    animation: navLineShow .3s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes navLineShow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* =========================
   PC 券包列表
========================= */
.pack-list{display:flex;flex-wrap:wrap;align-items:stretch;width:1080px;margin:0 auto;box-sizing:border-box;}
/* =========================
   两列卡片
========================= */
.pack-card{position:relative;display:flex;align-items:flex-start;width:532px;height:auto;min-height:116px;margin:0 16px 14px 0;padding:14px 18px 14px 14px;box-sizing:border-box;overflow:hidden;border-radius:10px;background:#FFF;border:1px solid #FFF;box-shadow:0 0 20px rgba(162,162,162,.10);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
/* 每行第二个去掉右边距 */
.pack-card:nth-child(2n){margin-right:0;}
/* 卡片 Hover */
.pack-card:hover{transform:translateY(-2px);border-color:#F3DDD9;box-shadow:0 8px 24px rgba(78,37,28,.06);}
/* =========================
   左侧图标
========================= */
.pack-icon { display: block; flex: 0 0 84px; width: 84px; height: 84px; margin-right: 10px; margin-top: 2px; align-self: flex-start; object-fit: contain; border-radius: 8px; }
/* =========================
   中间内容
========================= */
.pack-info{flex:1 1 0;min-width:0;padding-right:10px;}
/* 券包名称 */
.pack-name{margin-bottom:7px;line-height:24px;font-size:17px;font-weight:600;color:#222;overflow-wrap:anywhere;}
/* =========================
   券包描述：自动换行
========================= */
.pack-desc{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:4px;row-gap:2px;width:100%;min-width:0;line-height:20px;font-size:14px;font-weight:400;color:#555;white-space:normal;}
/* 每张券优先完整显示 */
.pack-desc span{display:inline-block;flex:0 1 auto;width:auto;max-width:100%;margin:0;white-space:normal;overflow-wrap:anywhere;}
/* 数量 */
.pack-desc em,.pack-num{margin-left:1px;font-style:normal;font-weight:500;color:#F04438;white-space:nowrap;}
/* =========================
   竖向分隔线
========================= */
.pack-divider{display:inline-block;flex:0 0 1px;width:1px;height:12px;margin:0 3px;background:rgba(0,0,0,.12);}
/* =========================
   有效期
========================= */
.pack-valid{margin-top:5px;line-height:18px;font-size:14px;font-weight:400;color:#999;}
/* =========================
   右侧按钮区域
========================= */
.pack-action{flex:0 0 auto;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:6px;}
/* =========================
   限购标签
========================= */
.pack-limit{position:absolute;top:0;right:0;height:28px;line-height:28px;padding:0 12px;border-radius:0 10px 0 12px;background:linear-gradient(90deg,rgba(255,113,121,.08) 0%,rgba(255,92,105,.17) 100%);font-size:12.5px;font-weight:500;color:#E6535E;white-space:nowrap;}
/* =========================
   购买按钮
========================= */
.pack-price{display:flex;align-items:center;justify-content:center;min-width:108px;height:36px;padding:0 14px;margin-top:0;border:0;border-radius:100px;background:linear-gradient(90deg,#FF8E59 0%,#FF3F50 100%);box-shadow:0 4px 10px rgba(255,76,76,.15);font-size:14px;font-weight:400;color:#FFF;white-space:nowrap;box-sizing:border-box;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.pack-price strong{margin-right:3px;font-size:16px;font-weight:500;color:#FFF;}
/* Hover */
.pack-price:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 6px 14px rgba(255,66,72,.24);}
/* 点击 */
.pack-price:active{transform:translateY(0);filter:brightness(.97);box-shadow:0 2px 6px rgba(255,66,72,.16);}
/* =========================
   达到购买上限
========================= */
.pack-price-disabled{min-width:106px;padding:0 12px;background:#B8B8B8;box-shadow:none;font-size:14px;font-weight:400;color:#FFF;cursor:default;}
.pack-price-disabled:hover{transform:none;filter:none;box-shadow:none;}


/* 温馨提示 */
.pack-note{width:1080px;margin:10px auto 32px;padding: 18px 8px 0;box-sizing:border-box;border-top:1px solid #EAEAEA;}
/* 标题 */
.pack-note-title{margin-bottom:8px;line-height:22px;font-size:15px;font-weight:500;color:#555;}
/* 提示内容 */
.pack-note-list{font-size:13px;font-weight:400;line-height:24px;color:#999;}
.pack-note-item{line-height:24px;}

.nav-top-label { position: absolute; top: 2px; right: -54px; }
        .nav-top-label img { height: 26px; }
        .coupon-head-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 308px;
    transform: translateX(-50%);
    background-image: url(/Images/VIP/quanbao-bg.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1920px 308px;
}


@media screen and (min-width: 1930px) {
    .coupon-head-bg {
        width: 2560px;
        height: 308px;
        background-image: url(/Images/VIP/quanbao-bg2506.webp);
        background-size: 2560px 308px;
    }
}