/* =============================================================================
 * 孖曹优选 · 买家前台主题（Electronics Storefront · 电光蓝 + 琥珀）
 * -----------------------------------------------------------------------------
 * 作用域：仅 .xph-front（买家前台 body 注入）。商家 / 后台不引入本文件。
 * 原则：只重写取值，不改任何类名与结构（与 style.css 顶部契约一致）。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 电光蓝 + 琥珀 设计令牌
 * ------------------------------------------------------------------------ */
.xph-front {
  color-scheme: light;

  --bg-deep:  #ffffff;
  --bg:       #F4F7FB;
  --bg-soft:  #ECF2FA;
  --card:     #FFFFFF;
  --card-hi:  #FFFFFF;

  --glass:    rgba(255, 255, 255, .80);
  --glass-hi: rgba(255, 255, 255, .94);

  --border:    #E4E9F2;
  --border-hi: rgba(37, 99, 235, .50);

  --text:   #0F1B2D;
  --text-2: #44566E;
  --muted:  #8A97AB;

  --primary:      #2563EB;
  --primary-dark: #1D4ED8;
  --primary-2:    #38BDF8;
  --accent:       #FF7A00;
  --accent-dark:  #E06900;
  --ok:           #16A34A;
  --err:          #E5484D;
  --warn:         #E58A00;

  --grad-primary: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%);
  --grad-accent:  linear-gradient(135deg, #FF8A00 0%, #FF5E3A 100%);
  --grad-surface: linear-gradient(160deg, rgba(37,99,235,.08) 0%, rgba(56,189,248,.05) 46%, rgba(255,255,255,0) 100%);

  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;

  --shadow:       0 12px 34px rgba(15, 27, 45, .10);
  --shadow-soft:  0 4px 18px rgba(15, 27, 45, .08);
  --glow:         0 0 26px rgba(37, 99, 235, .30);
  --glow-soft:    0 0 40px rgba(37, 99, 235, .14);
  --glow-accent:  0 0 26px rgba(255, 122, 0, .28);
}

/* ---------------------------------------------------------------------------
 * 2. 页面底色 + 蓝色光斑
 * ------------------------------------------------------------------------ */
body.xph-front { color: var(--text); background-color: var(--bg); }
body.xph-front::before {
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(820px 520px at 90% 0%, rgba(56,189,248,.10), transparent 62%),
    radial-gradient(760px 520px at 50% 112%, rgba(255,122,0,.06), transparent 66%);
  background-size: auto;
}
.xph-front ::-webkit-scrollbar-track { background: #E9EEF6; }
.xph-front ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(37,99,235,.5), rgba(56,189,248,.5));
  border: 2px solid #E9EEF6;
}
.xph-front ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2563EB, #38BDF8); }
.xph-front ::selection { background: rgba(37,99,235,.22); color: #0F1B2D; }

/* ---------------------------------------------------------------------------
 * 3. 顶栏 / 页脚（白底 + 蓝边）
 * ------------------------------------------------------------------------ */
.xph-front .topbar { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--border); }
.xph-front .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.7), rgba(56,189,248,.7), transparent);
  opacity: .6;
}
.xph-front .logo {
  background: linear-gradient(96deg, #2563EB 0%, #38BDF8 60%, #22D3EE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #2563EB;
}
.xph-front .logo small { -webkit-text-fill-color: var(--muted); color: var(--muted); }
.xph-front .nav a:hover { color: var(--primary); }
.xph-front .topbar .right a:hover { color: var(--primary); }

.xph-front .site-footer { background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%); border-top: 1px solid var(--border); }
.xph-front .site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.5), rgba(56,189,248,.45), transparent);
}
.xph-front { display: flex; flex-direction: column; }
.xph-front > .container { flex: 1 0 auto; width: 100%; }

/* ---------------------------------------------------------------------------
 * 4. 卡片 / 玻璃（白底）
 * ------------------------------------------------------------------------ */
.xph-front .card, .xph-front .product, .xph-front .glass, .xph-front .stat,
.xph-front .reco-card, .xph-front .feature, .xph-front .cat-card,
.xph-front .address-card, .xph-front .terms-doc, .xph-front .card-item,
.xph-front .pay-channel, .xph-front .jump-box, .xph-front .detail,
.xph-front .member-sidebar { background: #FFFFFF; border-color: var(--border); }

/* ---------------------------------------------------------------------------
 * 5. 商品卡 / 详情图集
 * ------------------------------------------------------------------------ */
.xph-front .product .cover { background-color: #EEF2F8; }
.xph-front .product .cover::after { background: linear-gradient(180deg, transparent, rgba(15,27,45,.05)); }
.xph-front .product .cover-ph::after { color: rgba(15,27,45,.28); }
.xph-front .product:hover .title { color: var(--primary); }
.xph-front .product .price { color: var(--accent); text-shadow: 0 0 18px rgba(255,122,0,.22); }

.xph-front .detail .gallery { background: radial-gradient(circle at 50% 40%, rgba(56,189,248,.06), transparent 68%), #EEF2F8; border-color: var(--border); }
.xph-front .detail-thumbs .th { background-color: #EEF2F8; border-color: var(--border); }
.xph-front .detail-thumbs .th.active { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(37,99,235,.5), 0 0 18px rgba(37,99,235,.22); }
.xph-front .reco-card .thumb { background-color: #EEF2F8; border-color: var(--border); }
.xph-front .reco-card .thumb-ph::before { color: rgba(15,27,45,.26); }

/* ---------------------------------------------------------------------------
 * 6. 表单（亮）
 * ------------------------------------------------------------------------ */
.xph-front input[type=text], .xph-front input[type=password], .xph-front input[type=number],
.xph-front input[type=email], .xph-front input[type=tel], .xph-front input[type=search],
.xph-front input[type=date], .xph-front input[type=url], .xph-front select, .xph-front textarea {
  background: #FFFFFF; border-color: var(--border); color: var(--text);
}
.xph-front input:hover, .xph-front select:hover, .xph-front textarea:hover { border-color: rgba(15,27,45,.22); }
.xph-front input:focus, .xph-front select:focus, .xph-front textarea:focus {
  outline: none; border-color: var(--primary); background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14), var(--glow-soft);
}
.xph-front select option { background: #FFFFFF; color: var(--text); }
.xph-front input::placeholder, .xph-front textarea::placeholder { color: #97A4B6; }
.xph-front .goods-search select, .xph-front .goods-search input[type="text"] { background: #FFFFFF; border-color: rgba(15,27,45,.18); color: var(--text); }
.xph-front .goods-search select:focus, .xph-front .goods-search input[type="text"]:focus {
  background: #FFFFFF; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.14), var(--glow-soft);
}

/* ---------------------------------------------------------------------------
 * 7. 按钮（蓝 CTA）
 * ------------------------------------------------------------------------ */
.xph-front .btn { color: var(--text); background: var(--glass-hi); }
.xph-front .btn:hover { background: rgba(37,99,235,.10); color: var(--primary-dark); border-color: var(--border-hi); }
.xph-front .btn-ghost:hover { background: rgba(37,99,235,.08); }
.xph-front .btn-ghost-light { background: rgba(255,255,255,.72); border-color: rgba(15,27,45,.20); color: #0F1B2D; backdrop-filter: blur(10px); }
.xph-front .btn-ghost-light:hover { background: #FFFFFF; border-color: var(--primary); color: var(--primary-dark); }

/* ---------------------------------------------------------------------------
 * 8. 分类矩阵 / 特色条
 * ------------------------------------------------------------------------ */
.xph-front .cat-card:hover { box-shadow: 0 12px 30px rgba(15,27,45,.10), 0 0 24px color-mix(in srgb, var(--cat-color) 26%, transparent); }
.xph-front .feature::after, .xph-front .card::before, .xph-front .stat::after,
.xph-front .terms-doc::before, .xph-front .detail::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.5), rgba(56,189,248,.45), transparent);
}

/* ---------------------------------------------------------------------------
 * 9. 标签 / 价格 / 详情内联
 * ------------------------------------------------------------------------ */
.xph-front .tag-gray   { background: rgba(120,130,150,.10); color: #5A6577; border-color: rgba(120,130,150,.25); }
.xph-front .tag-blue   { background: rgba(37,99,235,.12);  color: #1D4ED8; border-color: rgba(37,99,235,.32); }
.xph-front .tag-green  { background: rgba(22,163,74,.12);   color: #15803D; border-color: rgba(22,163,74,.30); }
.xph-front .tag-orange { background: rgba(255,122,0,.14); color: #B45309; border-color: rgba(255,122,0,.34); }
.xph-front .tag-red    { background: rgba(229,72,77,.12); color: #B4272C; border-color: rgba(229,72,77,.32); }
.xph-front .tag-yellow { background: rgba(229,138,0,.14); color: #9A5A00; border-color: rgba(229,138,0,.32); }

.xph-front .spec-grid, .xph-front .shop-line { background: #FFFFFF; border-color: var(--border); }
.xph-front .spec-grid .sp { border-bottom-color: var(--border); }
.xph-front .p-tags .t { color: #1D4ED8; background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.32); }
.xph-front .p-price-row .save { color: #B45309; background: rgba(255,122,0,.14); border-color: rgba(255,122,0,.34); }

.xph-front .table th { background: rgba(37,99,235,.08); color: var(--text); }
.xph-front .table tr:hover td { background: rgba(37,99,235,.05); }
.xph-front .pagination li a:hover { color: var(--primary-dark); background: rgba(37,99,235,.12); border-color: var(--border-hi); }

.xph-front .layui-layer-msg { background: rgba(255,255,255,.98) !important; border: 1px solid var(--border-hi) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; }

/* ---------------------------------------------------------------------------
 * 10. Hero 轮播（蓝调浅底深字）
 * ------------------------------------------------------------------------ */
.xph-front .hero { background: #EEF2FA; }
.xph-front .hero-viewport { background: #EEF2FA; }
.xph-front .hero-overlay {
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 32%, rgba(255,255,255,.34) 60%, rgba(255,255,255,0) 84%);
}
.xph-front .hero-overlay::before { opacity: .4; background-image: linear-gradient(rgba(15,27,45,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,27,45,.04) 1px, transparent 1px); }
.xph-front .hero-overlay::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.85)); }
.xph-front .hero-title { background: none; -webkit-text-fill-color: #0B1730; color: #0B1730; text-shadow: none; }
.xph-front .hero-sub { color: rgba(15,27,45,.72); }
.xph-front .hero-tag { color: var(--primary-dark); background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.40); box-shadow: 0 0 18px rgba(37,99,235,.16); }
.xph-front .hero-tag::before { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.xph-front .hero-nav { border-color: rgba(15,27,45,.18); background: rgba(255,255,255,.78); color: #0F1B2D; }
.xph-front .hero-nav:hover { background: rgba(37,99,235,.16); border-color: var(--primary); box-shadow: var(--glow); color: var(--primary-dark); }
.xph-front .hero-dot { background: rgba(15,27,45,.22); }
.xph-front .hero-dot.is-active { background: var(--grad-primary); box-shadow: 0 0 14px rgba(37,99,235,.55); }

/* ---------------------------------------------------------------------------
 * 11. 会员中心 / 购物车 / 条款（亮底蓝调覆盖）
 * ------------------------------------------------------------------------ */
.xph-front .member-sidebar { background: #FFFFFF; }
.xph-front .member-sidebar .sb-title { color: #0F1B2D; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(56,189,248,.12)); }
.xph-front .member-sidebar .menu li a:hover { background: rgba(37,99,235,.08); color: var(--primary-dark); border-left-color: rgba(37,99,235,.5); }
.xph-front .member-sidebar .menu li a.active { background: rgba(37,99,235,.12); color: var(--primary-dark); border-left-color: var(--primary); box-shadow: inset 0 0 22px rgba(37,99,235,.08); }
.xph-front .points-summary {
  color: #0F1B2D;
  background: radial-gradient(circle at 82% 18%, rgba(56,189,248,.28), transparent 58%),
    linear-gradient(135deg, rgba(37,99,235,.22) 0%, rgba(56,189,248,.24) 55%, rgba(255,122,0,.26) 100%), #FFFFFF;
  border: 1px solid rgba(37,99,235,.3); box-shadow: var(--glow-soft), var(--shadow-soft);
}
.xph-front .points-summary .value { text-shadow: 0 0 30px rgba(37,99,235,.4); }
.xph-front .feedback-list .fb-content { background: #EEF2F8; color: var(--text-2); }
.xph-front .feedback-list .fb-reply { color: var(--primary-dark); background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.28); }
.xph-front .avatar-preview { background: #EEF2F8 center/cover no-repeat; border-color: rgba(37,99,235,.45); color: var(--primary); }
.xph-front .member-header {
  color: var(--text);
  background: radial-gradient(circle at 88% 14%, rgba(56,189,248,.18), transparent 58%),
    radial-gradient(circle at 4% 94%, rgba(37,99,235,.12), transparent 54%),
    linear-gradient(135deg, rgba(56,189,248,.10) 0%, rgba(37,99,235,.08) 54%, rgba(255,122,0,.10) 100%), #FFFFFF;
  border-color: var(--border); box-shadow: var(--shadow-soft);
}
.xph-front .member-header::after { background-image: linear-gradient(rgba(15,27,45,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,27,45,.04) 1px, transparent 1px); }
.xph-front .member-header .avatar { background: #EEF2F8; border-color: rgba(37,99,235,.45); box-shadow: 0 0 22px rgba(37,99,235,.18); }
.xph-front .member-header .avatar:not(.has-avatar) { color: var(--primary); text-shadow: none; }
.xph-front .member-header .stats .num { color: var(--primary); text-shadow: none; }
.xph-front .member-order-quick .head h2::before { box-shadow: 0 0 10px rgba(37,99,235,.45); }
.xph-front .member-order-quick .quick-item:hover { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.25); color: var(--primary); box-shadow: 0 0 22px rgba(37,99,235,.12); }
.xph-front .member-order-quick .quick-item .icn { filter: drop-shadow(0 0 8px rgba(37,99,235,.25)); }
.xph-front .cart-summary { border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.06); }
.xph-front .cart-summary .cart-icn { filter: drop-shadow(0 0 10px rgba(56,189,248,.30)); }
.xph-front .cart-summary a:hover { text-shadow: 0 0 12px rgba(56,189,248,.45); }
.xph-front .mini-grid .mini-item { background: #FFFFFF; }
.xph-front .terms-head h1 { background: none; -webkit-text-fill-color: #0B1730; color: #0B1730; }
.xph-front .terms-warn { color: #7A4A00; background: rgba(255,122,0,.10); border-color: rgba(255,122,0,.30); }
.xph-front .terms-warn em { color: #B45309; }
.xph-front .terms-doc code { background: rgba(37,99,235,.10); color: #1D4ED8; }
.xph-front .cart-group .gh { background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(37,99,235,.06)); }
.xph-front .cart-group .gh .badge { color: #1D4ED8; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.32); }
.xph-front .cart-group .gfoot { background: #FFFFFF; border-top-color: var(--border); }
.xph-front .cart-prod .thumb { background-color: #FFFFFF; }