/* ============================================================
   theme-base.css —— 四套主题共用结构层
   配色全部走 CSS 变量，主题文件只覆盖 :root 变量
   ============================================================ */
:root{
  --premium-ease:cubic-bezier(.22,.61,.36,1);
  --premium-ink:#101319;
  --premium-line:#eceef3;
  --radius:14px;
  --radius-lg:20px;

  /* 主题变量默认值（黑金经典），各主题文件覆盖 */
  --brand:#a91f2e;
  --theme-accent:#c9a25c;
  --theme-accent-2:#a97f34;
  --theme-accent-ink:#1a1408;
  --theme-accent-soft:rgba(201,162,92,.12);
  --theme-body-bg:
    radial-gradient(1200px 500px at 50% -180px,#ffffff 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#f8f9fb 0%,#f4f6f9 100%);
  --theme-hero-shade:linear-gradient(100deg,rgba(12,13,17,.80) 0%,rgba(12,13,17,.55) 42%,rgba(12,13,17,.12) 78%);
  --theme-hero-bg:#14161c;
  --theme-card-bg:#fff;
  --theme-card-line:#eceef3;
  --theme-topbar-bg:rgba(255,255,255,.86);
  --theme-ink:#101319;
  --theme-ink-soft:#5b6472;
  --theme-btn-shadow:rgba(169,31,46,.26);
}

body{
  background:var(--theme-body-bg);
  background-attachment:fixed;
  letter-spacing:.2px;
}
main.wrap{padding-top:18px;padding-bottom:28px}

/* ---------- 顶栏 ---------- */
.topbar{
  background:var(--theme-topbar-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(20,24,33,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 12px rgba(20,24,33,.035);
}
.logo{
  font-size:19px;letter-spacing:.6px;
  background:linear-gradient(92deg,var(--brand) 0%,var(--theme-accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav a{
  border-radius:999px;
  transition:background .2s var(--premium-ease),color .2s var(--premium-ease),box-shadow .2s var(--premium-ease);
}
.nav a.on{
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  color:#fff;
  box-shadow:0 2px 10px var(--theme-btn-shadow);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:18px;isolation:isolate;
  box-shadow:0 10px 40px rgba(20,24,33,.13),0 2px 8px rgba(20,24,33,.06);
  background:var(--theme-hero-bg);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--theme-hero-shade);
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.02);
}
.hero-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:46px 44px;min-height:238px;color:#fff;
}
.hero-copy{min-width:0;max-width:620px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--theme-accent);margin-bottom:14px;
}
.hero-eyebrow::before{
  content:"";width:26px;height:1px;
  background:linear-gradient(90deg,var(--theme-accent),transparent);
}
.hero-title{
  font-size:32px;font-weight:800;line-height:1.24;letter-spacing:.5px;
  margin-bottom:12px;text-shadow:0 2px 20px rgba(0,0,0,.28);
}
.hero-sub{
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.80);
  margin-bottom:24px;max-width:460px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 26px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.4px;
  background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2));
  color:var(--theme-accent-ink);
  box-shadow:0 6px 20px var(--theme-btn-shadow);
  transition:transform .2s var(--premium-ease),box-shadow .2s var(--premium-ease),filter .2s;
  text-decoration:none;
}
.hero-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.hero-btn.line{
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.34);box-shadow:none;backdrop-filter:blur(6px);
}
.hero-btn.line:hover{background:rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.hero-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;width:112px;height:112px;flex:0 0 112px;border-radius:50%;
  border:1px solid var(--theme-accent-soft);
  background:rgba(20,22,28,.34);backdrop-filter:blur(8px);
  color:var(--theme-accent);text-align:center;
}
.hero-badge .n{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.5px}
.hero-badge .t{font-size:10.5px;letter-spacing:1.4px;opacity:.86;font-weight:600}

/* ---------- Hero 右侧商品橱窗 ---------- */
.hero-showcase{
  display:flex;align-items:center;gap:16px;flex:0 0 auto;
}
.hs-badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;width:96px;height:96px;flex:0 0 96px;border-radius:50%;
  border:1px solid var(--theme-accent-soft);
  background:rgba(20,22,28,.34);backdrop-filter:blur(8px);
  color:var(--theme-accent);text-align:center;
}
.hs-badge .n{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.5px}
.hs-badge .t{font-size:10px;letter-spacing:1.3px;opacity:.86;font-weight:600}
.hs-tiles{display:flex;gap:10px;align-items:center}
.hs-tile{
  position:relative;display:block;width:104px;height:104px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .28s var(--premium-ease),box-shadow .28s var(--premium-ease);
}
.hs-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hs-tile:nth-child(2){transform:translateY(-10px)}
.hs-tile:nth-child(3){transform:translateY(6px)}
.hs-tile:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 14px 32px rgba(0,0,0,.30)}
.hs-price{
  position:absolute;left:0;right:0;bottom:0;
  padding:4px 6px;font-size:11px;font-weight:800;letter-spacing:.2px;
  color:#fff;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));
}
@media (max-width:900px){
  .hs-tile:nth-child(3){display:none}
  .hs-tile{width:92px;height:92px}
}
@media (max-width:760px){
  .hero-showcase{display:none}
}

/* ---------- 分区卡 ---------- */
.zone-grid{gap:14px}
.zone-grid > a{
  border:1px solid var(--theme-card-line);border-radius:var(--radius);
  background:linear-gradient(180deg,#fff 0%,#fdfdff 100%);
  border-top:3px solid var(--zc);
  transition:transform .24s var(--premium-ease),box-shadow .24s var(--premium-ease),border-color .24s;
  position:relative;overflow:hidden;
}
.zone-grid > a::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px 120px at 50% 0%,var(--theme-accent-soft),transparent 72%);
  transition:opacity .28s var(--premium-ease);
}
.zone-grid > a:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,24,33,.10)}
.zone-grid > a:hover::after{opacity:1}
.zone-grid > a .zic{border-radius:15px;transition:transform .28s var(--premium-ease)}
.zone-grid > a:hover .zic{transform:scale(1.06)}
.zone-grid > a .zt{letter-spacing:.6px;color:var(--theme-ink)}

/* ---------- 商品卡 ---------- */
.pcard{
  border-radius:14px;border-color:var(--theme-card-line);background:var(--theme-card-bg);
  transition:transform .26s var(--premium-ease),box-shadow .26s var(--premium-ease),border-color .26s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,24,33,.11);border-color:#e3e6ee}
.pcard .thumb{background:linear-gradient(180deg,#fcfcfe,#f2f4f8)}
.pcard .thumb img{transition:transform .5s var(--premium-ease)}
.pcard:hover .thumb img{transform:scale(1.06)}
.pcard .name{font-weight:700;letter-spacing:.2px;color:var(--theme-ink)}

/* ---------- phero ---------- */
.phero{
  border-radius:var(--radius-lg);border-color:var(--theme-card-line);
  background:linear-gradient(180deg,#fff,#fdfdff);
  box-shadow:0 1px 2px rgba(20,24,33,.03),0 6px 20px rgba(20,24,33,.045);
}
.phero:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(20,24,33,.12);border-color:#e3e6ee}
.phero-actions .btn.block{
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  box-shadow:0 4px 14px var(--theme-btn-shadow);
}

/* ---------- 搜索条 / 按钮统一 ---------- */
.searchbar input{border-radius:999px}
.btn.primary,.btn-primary{background:linear-gradient(135deg,var(--brand),var(--theme-accent-2))}

/* ---------- 底部 tabbar ---------- */
.tabbar{
  background:rgba(255,255,255,.90);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid rgba(20,24,33,.07);
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-img,.pcard,.pcard .thumb img,.zone-grid > a,.zone-grid > a .zic,.hero-btn{
    transition:none !important;animation:none !important;
  }
  .pcard:hover,.zone-grid > a:hover{transform:none !important}
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .hero-inner{padding:30px 22px;min-height:196px;gap:14px}
  .hero-title{font-size:23px;line-height:1.28}
  .hero-sub{font-size:12.5px;line-height:1.6;margin-bottom:18px;max-width:100%}
  .hero-btn{height:40px;padding:0 20px;font-size:13px}
  .hero-badge{display:none}
}
@media (max-width:380px){
  .hero-sub{display:none}
}