/* ==========================================================================
   小红书账号商城 — 自定义主题皮肤 (加载于 Bootstrap/主题 CSS 之后)
   仅做视觉增强，不改动结构逻辑
   ========================================================================== */
:root{
  --xhs-red:#ff2442;
  --xhs-red-d:#e01d38;
  --xhs-red-l:#ff5a73;
  --xhs-ink:#1f2329;
  --xhs-sub:#8a9099;
  --xhs-bg:#f6f7f9;
  --xhs-line:#eceef1;
  --xhs-radius:14px;
  --xhs-shadow:0 6px 24px rgba(20,20,40,.06);
  --xhs-shadow-h:0 12px 32px rgba(255,36,66,.16);
}
body{ background:var(--xhs-bg)!important; color:var(--xhs-ink); }
a{ color:var(--xhs-red); }
a:hover{ color:var(--xhs-red-d); }
.page-wrapper{ background:transparent!important; }

/* ---------- Header ---------- */
.header{ padding:12px 0!important; box-shadow:0 2px 12px rgba(0,0,0,.04); border-bottom:0!important; }
.brand-logo{ display:flex; align-items:center; gap:10px; }
.brand-logo img{ height:40px; width:40px; }
.brand-logo .brand-name{ font-size:19px; font-weight:800; color:var(--xhs-ink); letter-spacing:.5px; line-height:1.1; }
.brand-logo .brand-name b{ color:var(--xhs-red); }
.brand-logo .brand-sub{ font-size:11px; color:var(--xhs-sub); font-weight:500; letter-spacing:1px; }
.navbar-nav .nav-link{ font-weight:600; color:#4b5159; border-radius:8px; padding:6px 14px!important; }
.navbar-nav .nav-link:hover{ color:var(--xhs-red); background:#fff0f2; }
.navbar-nav .nav-link.active{ color:#fff!important; background:var(--xhs-red); }
.header form .form-control{ border-radius:999px; border:1px solid var(--xhs-line); background:#f4f5f7; padding:7px 16px; }
.header form .btn{ border-radius:999px; background:var(--xhs-red); color:#fff; border:0; padding:7px 16px; }
.header form .btn:hover{ background:var(--xhs-red-d); }

/* ---------- Hero ---------- */
.xhs-hero{
  background:linear-gradient(135deg,#ff2442 0%,#ff5a73 55%,#ff7a6b 100%);
  border-radius:var(--xhs-radius); color:#fff; padding:38px 28px; margin:18px 0 8px;
  position:relative; overflow:hidden; box-shadow:var(--xhs-shadow-h);
}
.xhs-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%); }
.xhs-hero h1{ font-size:26px; font-weight:800; margin:0 0 10px; line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.08); }
.xhs-hero .lead{ font-size:15px; opacity:1; margin:0 0 18px; font-weight:400; text-shadow:0 1px 6px rgba(180,20,40,.28); max-width:760px; }
.xhs-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.xhs-chip{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.45);
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; backdrop-filter:blur(4px);
  text-shadow:0 1px 4px rgba(180,20,40,.25); }
@media(max-width:768px){ .xhs-hero{ padding:26px 18px; } .xhs-hero h1{ font-size:20px; } }

/* ---------- Section titles ---------- */
.category h2, .xhs-section-title{ font-size:22px; font-weight:800; color:var(--xhs-ink); text-align:center; }
.separator{ background:var(--xhs-red)!important; border-color:var(--xhs-red)!important; height:4px!important; width:48px!important; border-radius:2px; }
.separator:after{ background:var(--xhs-red-l)!important; }
.category .lead{ color:var(--xhs-sub); }

/* ---------- Category pills ---------- */
.category-menus .btn{ border-radius:999px!important; border:1px solid var(--xhs-line)!important; color:#4b5159!important;
  background:#fff!important; font-weight:600; padding:7px 16px; box-shadow:0 1px 4px rgba(0,0,0,.03); }
.category-menus .btn:hover{ border-color:var(--xhs-red)!important; color:var(--xhs-red)!important; }
.category-menus .btn.active{ background:var(--xhs-red)!important; border-color:var(--xhs-red)!important; color:#fff!important; }

/* ---------- Product cards ---------- */
.goods .card{
  border:0!important; border-radius:var(--xhs-radius)!important; overflow:hidden;
  background:#fff; box-shadow:var(--xhs-shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.goods .card:hover{ transform:translateY(-5px); box-shadow:var(--xhs-shadow-h); }
.goods .card-img-top{ aspect-ratio:1/1; object-fit:cover; background:#fafafa; }
.goods .card .badge{ border-radius:0 0 10px 0!important; font-weight:600; padding:5px 9px; font-size:11px; }
.goods .card .badge.bg-success{ background:var(--xhs-red)!important; }
.goods .card .badge.bg-warning{ background:#ff9500!important; color:#fff!important; }
.goods .card-body{ padding:12px 12px 14px; }
.goods .card-title{ font-size:14px!important; font-weight:700; color:var(--xhs-ink); margin-bottom:8px; }
.goods .btn-outline-success{ border:0!important; padding:0!important; color:var(--xhs-red)!important; font-size:12px; background:transparent!important; }
.goods .btn-outline-success strong{ font-size:19px; font-weight:800; }
.goods .btn-outline-success strong::before{ content:"$"; font-size:13px; font-weight:700; margin-right:1px; opacity:.75; }
.goods .btn-outline-warning{ border:1px solid #ffd8a8!important; color:#e8890c!important; background:#fff8ef!important;
  border-radius:6px!important; font-size:11px; padding:1px 7px!important; }
.goods .card-body h6.mt-2{ margin-top:4px!important; }
.goods .card-body h6 .text-muted{ font-size:12px; color:var(--xhs-sub)!important; }
.goods .btn-primary{
  float:none!important; display:block; width:100%; margin-top:10px;
  background:var(--xhs-red)!important; border:0!important; border-radius:10px!important;
  font-weight:700; font-size:13px; padding:8px 0; box-shadow:0 4px 12px rgba(255,36,66,.25);
}
.goods .btn-primary:hover{ background:var(--xhs-red-d)!important; }

/* ---------- Features / trust row ---------- */
.xhs-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:6px 0 34px; }
@media(max-width:768px){ .xhs-features{ grid-template-columns:repeat(2,1fr); } }
.xhs-feature{ background:#fff; border-radius:var(--xhs-radius); padding:22px 16px; text-align:center; box-shadow:var(--xhs-shadow); }
.xhs-feature .ico{ width:52px; height:52px; margin:0 auto 12px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:#fff0f2; }
.xhs-feature h3{ font-size:15px; font-weight:700; margin:0 0 6px; color:var(--xhs-ink); }
.xhs-feature p{ font-size:12.5px; color:var(--xhs-sub); margin:0; line-height:1.6; }

/* ---------- 购买流程 ---------- */
.xhs-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:6px 0 34px; }
@media(max-width:768px){ .xhs-steps{ grid-template-columns:repeat(2,1fr); } }
.xhs-step{ background:#fff; border-radius:var(--xhs-radius); padding:24px 16px; text-align:center; box-shadow:var(--xhs-shadow); }
.xhs-step .num{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--xhs-red); color:#fff; font-weight:800; font-size:18px; margin-bottom:12px; box-shadow:0 4px 12px rgba(255,36,66,.3); }
.xhs-step h3{ font-size:15px; font-weight:700; margin:0 0 6px; color:var(--xhs-ink); }
.xhs-step p{ font-size:12.5px; color:var(--xhs-sub); margin:0; line-height:1.6; }

/* ---------- 关键词标签云 ---------- */
.xhs-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:8px 0 40px; }
.xhs-tags span{ background:#fff; color:var(--xhs-sub); border:1px solid var(--xhs-line); border-radius:999px; padding:5px 12px; font-size:12px; }

/* ---------- Intro / FAQ ---------- */
.xhs-intro{ background:#fff; border-radius:var(--xhs-radius); padding:26px 28px; box-shadow:var(--xhs-shadow); margin-bottom:24px; }
.xhs-intro p{ color:#5b616b; font-size:14px; line-height:1.9; margin:0; }
.xhs-faq{ margin-bottom:40px; }
.xhs-faq details{ background:#fff; border-radius:12px; box-shadow:var(--xhs-shadow); margin-bottom:12px; overflow:hidden; }
.xhs-faq summary{ cursor:pointer; padding:16px 20px; font-weight:700; font-size:15px; color:var(--xhs-ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; }
.xhs-faq summary::-webkit-details-marker{ display:none; }
.xhs-faq summary::after{ content:"+"; color:var(--xhs-red); font-size:22px; font-weight:400; transition:transform .2s; }
.xhs-faq details[open] summary::after{ transform:rotate(45deg); }
.xhs-faq .a{ padding:0 20px 18px; color:#5b616b; font-size:14px; line-height:1.85; }

/* ---------- Footer ---------- */
.footer{ background:#fff!important; border-top:1px solid var(--xhs-line); margin-top:20px; padding:26px 0!important; }
.footer .custom{ color:var(--xhs-sub)!important; }

/* ---------- Product detail page polish ---------- */
.good-card .card{ border:0!important; border-radius:var(--xhs-radius); box-shadow:var(--xhs-shadow); }
.good-card .card-title{ font-weight:800; color:var(--xhs-ink); }
.buy-form .btn-primary,.good-card .btn-primary{ background:var(--xhs-red)!important; border:0!important; border-radius:10px; font-weight:700; }
.buy-form .btn-primary:hover{ background:var(--xhs-red-d)!important; }

/* ---------- 成交数据条 ---------- */
.xhs-stats{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.xhs-stats > div{ flex:1; min-width:70px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:12px 8px; text-align:center; backdrop-filter:blur(4px); }
.xhs-stats b{ display:block; font-size:22px; font-weight:800; line-height:1.1; }
.xhs-stats b i{ font-size:14px; font-style:normal; opacity:.85; }
.xhs-stats span{ font-size:12px; opacity:.92; }
@media(max-width:768px){ .xhs-stats b{ font-size:18px; } }

/* ---------- 风险承诺条 ---------- */
.xhs-guarantee-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; background:#fff; border-radius:12px; box-shadow:var(--xhs-shadow); padding:12px 16px; margin:14px 0 0; }
.xhs-guarantee-bar span{ font-size:13.5px; font-weight:600; color:#3a3f47; }
@media(max-width:768px){ .xhs-guarantee-bar span{ font-size:12px; } }

/* ---------- 实时成交滚动 ---------- */
.xhs-ticker{ display:flex; align-items:center; gap:8px; background:#fff7f8; border:1px solid #ffdfe4; border-radius:999px; padding:9px 16px; margin:12px 0 4px; overflow:hidden; }
.xhs-ticker .dot{ width:8px; height:8px; border-radius:50%; background:#26c281; animation:xhsPulse 1.6s infinite; flex:none; }
@keyframes xhsPulse{ 0%{box-shadow:0 0 0 0 rgba(38,194,129,.5);} 70%{box-shadow:0 0 0 7px rgba(38,194,129,0);} 100%{box-shadow:0 0 0 0 rgba(38,194,129,0);} }
.xhs-ticker .lbl{ font-size:12px; font-weight:700; color:var(--xhs-red); background:#ffe3e7; padding:2px 8px; border-radius:6px; flex:none; }
.xhs-ticker-line{ font-size:13px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .3s; }

/* ---------- 客户评价 ---------- */
.xhs-reviews{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:6px 0 34px; }
@media(max-width:768px){ .xhs-reviews{ grid-template-columns:repeat(1,1fr); } }
.xhs-review{ background:#fff; border-radius:var(--xhs-radius); padding:18px 16px; box-shadow:var(--xhs-shadow); }
.xhs-review .stars{ color:#ffb300; font-size:14px; letter-spacing:1px; margin-bottom:8px; }
.xhs-review p{ font-size:13px; color:#4b5159; line-height:1.7; margin:0 0 10px; }
.xhs-review .who{ font-size:12px; color:var(--xhs-sub); }

/* ---------- 悬浮客服 ---------- */
.xhs-kefu{ position:fixed; right:18px; bottom:22px; z-index:9999; display:inline-flex; align-items:center; gap:6px; background:var(--xhs-red); color:#fff!important; font-weight:700; font-size:14px; padding:12px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(255,36,66,.4); text-decoration:none; }
.xhs-kefu:hover{ background:var(--xhs-red-d); color:#fff!important; }
@media(max-width:768px){ .xhs-kefu{ right:14px; bottom:16px; padding:11px 15px; font-size:13px; } }