/* ===================================================================
   星光商城 · shop.css
   深紫星空 · 玻璃面板 · 金粉点缀
   =================================================================== */

/* 顶栏面包屑 */
.shop-crumb{display:flex;align-items:center;gap:10px;padding:9px 18px;border-radius:14px;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(10px)}
.shop-crumb a{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-soft);font-size:13.5px}
.shop-crumb a:hover{color:#fff}
.shop-crumb__sep{color:var(--ink-mute)}
.shop-crumb strong{font-size:14px;font-weight:700;
  background:linear-gradient(90deg,#ffd1f0,#b7a3ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 两列布局 */
.shop{display:grid;grid-template-columns:1fr 322px;gap:16px;align-items:start}
.shop__col{display:flex;flex-direction:column;gap:16px;min-width:0}
.shop__side{display:flex;flex-direction:column;gap:14px}

/* ===================== 本周星光礼盒 Banner ===================== */
.gift-banner{position:relative;border-radius:26px;overflow:hidden;min-height:228px;
  border:1px solid rgba(255,180,230,.25);box-shadow:var(--shadow);display:flex;align-items:center}
.gift-banner__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.gift-banner__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(40,20,92,.96) 0%,rgba(46,24,102,.86) 36%,rgba(46,24,102,.35) 60%,transparent 82%)}
.gift-banner__copy{position:relative;z-index:2;padding:22px 28px;max-width:64%}
.gift-banner__title{font-family:var(--font-disp);font-weight:700;font-size:30px;letter-spacing:1px;
  background:linear-gradient(95deg,#ffe69a,#ffc15a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 22px rgba(255,180,80,.25);margin-bottom:10px}
.gift-banner__desc{color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin-bottom:14px}
.gift-banner__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.g-tag{font-size:11.5px;padding:4px 12px;border-radius:20px;color:var(--ink-soft);
  background:var(--glass-2);border:1px solid var(--brd)}
.g-tag--gold{color:#5a3410;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));border-color:transparent;font-weight:600}
.g-tag--pink{color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-color:transparent;font-weight:600}
.gift-banner__cta{display:flex;gap:12px}
.btn--sm{font-size:14px;padding:11px 22px}

/* ===================== 分类 Tab ===================== */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cat-tab{font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;color:var(--ink-soft);
  padding:9px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--brd);
  backdrop-filter:blur(8px);transition:.2s;white-space:nowrap}
.cat-tab:hover{background:var(--glass-2);color:#fff;transform:translateY(-1px)}
.cat-tab.is-active{color:#3a1f6e;font-weight:700;border-color:transparent;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));box-shadow:0 8px 20px -6px rgba(255,176,58,.55)}

/* ===================== 商品卡网格 ===================== */
.goods{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.good{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(170deg,rgba(78,52,142,.5),rgba(44,26,92,.42));
  border:1px solid var(--brd);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.good:hover{transform:translateY(-6px);box-shadow:0 24px 44px -18px rgba(10,4,40,.85);border-color:rgba(255,200,120,.45)}
.good__art{aspect-ratio:1/1;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(140,108,255,.4),rgba(40,24,90,.5))}
.good__art img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.good:hover .good__art img{transform:scale(1.07)}
.good__body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.good__body h3{font-size:13px;font-weight:700;line-height:1.25}
.good__body p{font-size:11px;color:var(--ink-mute)}
.good__foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:8px}
.price{font-size:11.5px;color:var(--gold-1);font-weight:600;display:flex;align-items:center;gap:3px}
.price b{font-family:var(--font-disp);font-size:15px}
.price--free{color:#ffd98a;font-weight:700}
.price--sm b{font-size:13px}
.good__btn{width:100%;border:none;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:600;color:#fff;
  padding:8px 0;border-radius:12px;background:linear-gradient(135deg,var(--violet),#a77bff);
  box-shadow:0 6px 14px -5px rgba(138,108,255,.6);transition:.2s}
.good__btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -5px rgba(138,108,255,.8)}
.good__btn--sm{width:auto;padding:7px 16px}

/* ===================== 热门主题系列 ===================== */
.themes{border-radius:22px;padding:16px 18px;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(10px)}
.themes__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.themes__head h3{font-size:16px;font-weight:700}
.themes__more{font-size:12px;color:var(--ink-soft);text-decoration:none}
.themes__more:hover{color:#fff}
.themes__row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.theme{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);cursor:pointer}
.theme__art{aspect-ratio:16/11;border-radius:14px;overflow:hidden;border:1px solid var(--brd);
  box-shadow:0 8px 20px -10px rgba(10,4,40,.7);margin-bottom:4px}
.theme__art img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.theme:hover .theme__art img{transform:scale(1.08)}
.theme:hover .theme__art{border-color:rgba(255,200,120,.5)}
.theme strong{font-size:12.5px;font-weight:600}
.theme em{font-size:10.5px;font-style:normal;color:var(--ink-mute)}

/* ===================== 右侧栏卡片 ===================== */
.side-card{border-radius:20px;padding:15px 16px;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.side-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.side-card__head h4{font-size:14.5px;font-weight:700}
.side-card__more{font-size:11px;color:var(--ink-soft);text-decoration:none}
.side-card__more:hover{color:#fff}

/* 我的星光值 */
.star-card{background:linear-gradient(165deg,rgba(86,56,156,.55),rgba(52,30,108,.5))}
.star-stats{list-style:none;display:flex;flex-direction:column;gap:10px}
.star-stats li{display:grid;grid-template-columns:30px 1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:9px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.star-stats li:last-child{border-bottom:none;padding-bottom:0}
.ss__ico{grid-row:1/3;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px}
.ss__ico--gold{background:linear-gradient(135deg,rgba(255,224,122,.3),rgba(255,177,58,.25))}
.ss__ico--gold .star-ico{width:16px;height:16px;color:var(--gold-1)}
.ss__ico--pink{background:rgba(255,126,182,.22)}
.ss__ico--violet{background:rgba(138,108,255,.25)}
.ss__label{font-size:13px;color:var(--ink-soft);align-self:end}
.ss__val{font-family:var(--font-disp);font-size:17px;font-weight:700;align-self:end}
.ss__val--gold{color:var(--gold-1)}
.ss__link{grid-column:2/4;font-size:11px;color:var(--ink-mute);text-decoration:none;align-self:start;margin-top:1px}
.ss__link:hover{color:var(--ink-soft)}
.today-pick{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,126,182,.16),rgba(138,108,255,.16));border:1px solid rgba(255,150,210,.25)}
.today-pick__ico{font-size:20px}
.today-pick__txt{flex:1;display:flex;flex-direction:column}
.today-pick__txt strong{font-size:13px;font-weight:700}
.today-pick__txt em{font-size:11px;font-style:normal;color:var(--ink-soft)}
.today-pick__go{font-size:11.5px;color:#ffd1ec;text-decoration:none;white-space:nowrap;font-weight:600}

/* 今日推荐兑换 */
.rec-tip{font-size:11.5px;color:var(--ink-mute);margin-bottom:10px}
.rec-item{display:flex;gap:11px;align-items:center;padding:10px;border-radius:14px;
  background:var(--glass);border:1px solid var(--brd)}
.rec-item__art{width:78px;height:58px;flex:none;border-radius:12px;overflow:hidden;border:1px solid var(--brd)}
.rec-item__art img{width:100%;height:100%;object-fit:cover}
.rec-item__body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.rec-item__body strong{font-size:13px;font-weight:700}
.rec-item__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* 会员特权 */
.vip-card{background:linear-gradient(165deg,rgba(98,66,168,.5),rgba(58,34,120,.46))}
.vip-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.perk{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:14px;
  background:var(--glass);border:1px solid var(--brd)}
.perk__ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(135deg,rgba(255,224,122,.25),rgba(255,126,182,.22))}
.perk em{font-size:10.5px;font-style:normal;color:var(--ink-soft)}
.daily-gift{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,224,122,.18),rgba(255,177,58,.14));border:1px solid rgba(255,200,120,.3)}
.daily-gift__txt{display:flex;flex-direction:column}
.daily-gift__txt strong{font-size:13px;font-weight:700;color:var(--gold-1)}
.daily-gift__txt em{font-size:10.5px;font-style:normal;color:var(--ink-soft)}
.daily-gift__btn{border:none;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:700;color:#5a3410;
  padding:8px 16px;border-radius:12px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  box-shadow:0 6px 14px -5px rgba(255,176,58,.6);white-space:nowrap;transition:.2s}
.daily-gift__btn:hover{transform:translateY(-2px)}

/* 兑换进度 */
.progress-card{background:linear-gradient(165deg,rgba(78,52,142,.5),rgba(46,26,98,.46))}
.progress-card__head{display:flex;flex-direction:column;gap:2px;margin-bottom:11px}
.pc__lead{font-size:12.5px;color:var(--ink-soft)}
.pc__lead b{font-family:var(--font-disp);color:var(--gold-1);font-size:15px}
.pc__goal{font-size:15px;font-weight:700;
  background:linear-gradient(90deg,#ffd1f0,#b7a3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-bar{position:relative;height:12px;border-radius:8px;background:rgba(255,255,255,.1);overflow:visible;margin-bottom:5px}
.pc-bar__fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));
  box-shadow:0 0 12px rgba(255,200,90,.5)}
.pc-bar__star{position:absolute;top:50%;left:84%;transform:translate(-50%,-50%);font-size:16px;
  filter:drop-shadow(0 0 6px rgba(255,210,90,.8))}
.pc-bar__nums{display:flex;justify-content:flex-end;gap:4px;font-size:11px;color:var(--ink-mute);margin-bottom:12px}
.pc-bar__nums span:first-child{color:var(--gold-1);font-family:var(--font-disp);font-weight:700}
.pc-tasks{display:flex;flex-direction:column;gap:8px}
.pc-tasks__lead{font-size:12px;color:var(--ink-soft);margin-bottom:2px}
.pc-task{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;
  background:var(--glass);border:1px solid var(--brd);cursor:pointer;transition:.2s}
.pc-task:hover{background:var(--glass-2)}
.pc-task__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;
  background:linear-gradient(135deg,rgba(255,126,182,.22),rgba(138,108,255,.22))}
.pc-task__t{display:flex;flex-direction:column}
.pc-task__t b{font-size:12.5px;font-weight:600}
.pc-task__t em{font-size:10.5px;font-style:normal;color:var(--ink-mute)}

/* ===================== 响应式 ===================== */
@media(max-width:1280px){
  .shop{grid-template-columns:1fr 300px}
  .goods{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .shop{grid-template-columns:1fr}
  .goods{grid-template-columns:repeat(3,1fr)}
  .themes__row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .goods{grid-template-columns:repeat(2,1fr)}
  .themes__row{grid-template-columns:repeat(2,1fr)}
  .vip-perks{grid-template-columns:repeat(4,1fr)}
  .gift-banner__copy{max-width:90%}
}