/* ============================================================
   PeptideTrust — 完整样式表
   从 index.html 内联样式提取 + 报价生成器新增样式
   ============================================================ */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --noir:         #14161A;
  --noir-deeper:  #0A0B0E;
  --gold:         #C5A880;
  --gold-dim:     rgba(197,168,128,0.15);
  --gold-glow:    rgba(197,168,128,0.1);

  --accent:       #C5A880;
  --bg:           #f8fafc;
  --card-bg:      #ffffff;
  --text:         #1e293b;
  --muted:        #64748b;
  --border:       rgba(0,0,0,0.08);
  --wa:           #25d366;
  --wa-hover:     #1da851;
  --dark-bg:      #0A0B0E;
  --dark-deeper:  #0b1120;
  --panel-bg:     #f1f5f9;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);
  --shadow-hover: 0 10px 30px -8px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Inter", sans-serif;
  --max-w:        1400px;
  --header-h:     64px;
  --cart-bg:      #1e293b;
}
html { scroll-behavior:smooth; }
body {
  font-family:var(--font); background:#f1f5f9; color:var(--text);
  line-height:1.6; min-height:100vh;
}
a { color:var(--accent); text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.8; }
img { max-width:100%; height:auto; display:block; }

.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* ===== HEADER ===== */
.header {
  position:fixed; inset:0 0 auto; height:var(--header-h);
  background:rgba(20,22,26,.92); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); z-index:200;
}
.header__inner { display:flex; align-items:center; height:100%; }
.header__logo { font-size:clamp(0.85rem,1.6vw,1.15rem); font-weight:800; letter-spacing:-.3px; display:flex; align-items:center; flex-wrap:wrap; gap:0; }

/* ===== HERO MAIN SECTION ===== */
.hero-main-section {
  width:100%; min-height:60vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding-top:var(--header-h);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px),
    #0A0B0E;
}
.hero-main-section::after {
  content:''; position:absolute; right:-5%; top:50%; transform:translateY(-50%);
  width:45%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(197,168,128,0.06) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-content-container {
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center; justify-content:space-between; width:100%;
  max-width:1352px; margin:0 auto; padding:40px 24px; box-sizing:border-box;
  z-index:2; position:relative;
}
.hero-text-content { flex:0 0 55%; max-width:55%; box-sizing:border-box; padding-right:20px; }
.hero-text-content h1 { font-size:2.6rem; font-weight:800; color:#C5A880; text-transform:uppercase; line-height:1.15; letter-spacing:-.5px; margin-bottom:20px; }
.hero-text-content p { font-size:1.05rem; color:#A0AAB5; line-height:1.7; margin-bottom:32px; max-width:520px; }
.hero-wa-btn {
  display:inline-flex; align-items:center; gap:10px; padding:16px 32px;
  border-radius:10px; background:#25D366; color:#fff; font-weight:700; font-size:1rem;
  text-decoration:none; font-family:var(--font); transition:all .25s;
  box-shadow:0 6px 20px rgba(37,211,102,.3);
}
.hero-wa-btn:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,.4); color:#fff; opacity:1; }
.hero-wa-btn svg { flex-shrink:0; }
.hero-image-content { flex:0 0 40%; max-width:40%; display:flex; justify-content:flex-end; align-items:center; position:relative; }
.hero-image-content img { width:100%; max-width:550px; height:auto; display:block; }

/* ===== INTERACTIVE HERO ===== */
.interactive-hero { padding:28px 0 0; background:var(--noir); }
.image-tabs-wrapper { width:100%; max-width:1352px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.image-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; width:100%; margin-top:28px; margin-bottom:28px; }
.image-tab { width:100%; display:block; cursor:pointer; object-fit:contain; background:transparent !important; border:none !important; box-shadow:none !important; outline:none !important; transition:all .35s cubic-bezier(.4,0,.2,1); user-select:none; }
.image-tab:hover { transform:translateY(-4px) scale(1.02); filter:drop-shadow(0 10px 15px var(--gold-glow)); }

/* ===== HERO MODALS ===== */
.modal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.85); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); z-index:9999; align-items:center; justify-content:center; padding:24px; }
.modal.active { display:flex; }
.modal-content { position:relative; background:var(--noir); border:1px solid var(--gold); border-radius:var(--radius); width:100%; z-index:10000; animation:heroModalIn .35s cubic-bezier(.4,0,.2,1); }
@keyframes heroModalIn { 0% { opacity:0; transform:scale(.88); } 100% { opacity:1; transform:scale(1); } }
.hero-modal__close { position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(197,168,128,.3); background:rgba(20,22,26,.8); color:var(--gold); font-size:1.2rem; font-weight:300; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:all .25s; line-height:1; font-family:var(--font); }
.hero-modal__close:hover { background:var(--gold); color:var(--noir); border-color:var(--gold); }

/* WhatsApp Modal */
.hero-modal--wa { max-width:630px; padding:56px 45px 45px; text-align:center; }
.hero-modal--wa .wa-modal__title { font-size:1.75rem; font-weight:700; color:var(--gold); letter-spacing:.6px; margin-bottom:16px; }
.hero-modal--wa .wa-modal__sub { font-size:1.23rem; color:#b0b8c4; margin-bottom:28px; line-height:1.5; }
.hero-modal--wa .wa-modal__number { font-size:1.47rem; font-weight:800; color:#fff; margin-bottom:34px; letter-spacing:1px; }
.wa-breathing-btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; width:100%; padding:22px 0; border-radius:14px; background:#25D366; color:#fff; font-weight:700; font-size:1.4rem; letter-spacing:.6px; font-family:var(--font); text-decoration:none; border:none; cursor:pointer; transition:transform .25s; animation:waBreathe 2.4s ease-in-out infinite; }
.wa-breathing-btn:hover { transform:scale(1.03); color:#fff; opacity:1; }
@keyframes waBreathe { 0%, 100% { box-shadow:0 0 0 0 rgba(37,211,102,.45); } 50% { box-shadow:0 0 0 25px rgba(37,211,102,0); } }
.hero-modal--wa .wa-modal__qr { margin:34px auto 0; width:432px; height:432px; overflow:hidden; }
.hero-modal--wa .wa-modal__qr img { width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

/* COA Modal */
.hero-modal--coa { width:95vw; max-width:1400px; max-height:90vh; padding:28px 28px 20px; display:flex; flex-direction:column; }
.hero-modal--coa .hero-modal__close { top:10px; right:12px; }
.coa-modal-header { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:20px; border-bottom:1px solid var(--border); }
.coa-title-cn { color:#f8fafc; font-size:1.2rem; font-weight:700; margin:0; }
.coa-title-en { color:var(--text-dim); font-size:0.75rem; text-transform:uppercase; }
.coa-toolbar { padding:0 0 12px; flex-shrink:0; }
.coa-search-box { position:relative; display:flex; align-items:center; }
.coa-search-box svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); stroke:var(--muted); pointer-events:none; }
.coa-search-box input { width:100%; padding:12px 16px 12px 42px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.85rem; font-weight:500; font-family:var(--font); outline:none; background:var(--bg-deeper); color:var(--text); transition:border-color .25s; }
.coa-search-box input:focus { border-color:var(--gold); }
.coa-search-box input::placeholder { color:var(--text-dim); font-weight:400; }
.coa-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:16px !important; align-items:start !important; }
.coa-card { background:#111827; border:1px solid rgba(255,255,255,0.06); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s ease; }
.coa-card:active { transform:scale(0.98); }
.coa-img-wrap { position:relative !important; width:100% !important; height:0 !important; padding-bottom:141.4% !important; background:#ffffff !important; display:block !important; }
.coa-img-wrap img { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; object-fit:contain !important; object-position:top center !important; }
.coa-card .coa-label { flex-shrink:0; padding:8px 10px; font-size:0.75rem; font-weight:600; color:var(--muted); text-align:center; border-top:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coa-modal-container { max-height:85vh; overflow-y:auto !important; -webkit-overflow-scrolling:touch; padding:0 20px 20px; }
#coa-global-lightbox { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.95); z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; }
#coa-global-lightbox.active { opacity:1; pointer-events:auto; }
#coa-global-lightbox img { max-width:95vw; max-height:95vh; object-fit:contain; border-radius:4px; }
.coa-lightbox-close { position:absolute; top:20px; right:20px; color:#fff; font-size:40px; font-weight:100; cursor:pointer; line-height:1; z-index:2; }
.coa-pagination { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 0 6px; border-top:1px solid var(--border); margin-top:10px; }
.coa-page-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deeper); color:var(--text); font-size:0.8rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:all .2s; }
.coa-page-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.coa-page-btn:disabled { opacity:.35; cursor:default; }
.coa-page-info { font-size:0.85rem; font-weight:600; color:var(--muted); min-width:50px; text-align:center; }

/* ===== CATALOG ===== */
.catalog { padding:28px 0 60px; }

/* ===== FILTER TOOLBAR ===== */
.filter-toolbar { display:flex; flex-direction:row; align-items:center; gap:16px; padding:14px 20px; margin-bottom:24px; background:#ffffff; border:1px solid #e2e8f0; border-radius:var(--radius); box-shadow:0 1px 4px rgba(0,0,0,.06); }
.filter-toolbar__search { flex:7; position:relative; }
.filter-toolbar__search input { width:100%; padding:13px 40px 13px 42px; border:1px solid rgba(197,168,128,0.2); border-radius:8px; font-size:.95rem; font-weight:600; font-family:var(--font); outline:none; background:#ffffff; color:var(--text); transition:all .25s; padding-right:40px; border:1px solid #e2e8f0; background:#f8fafc; }
.filter-toolbar__search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,168,128,0.15); }
.filter-toolbar__search input::placeholder { color:#94a3b8; font-weight:500; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; z-index:2; }
.search-clear { display:none; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; border:none; background:rgba(197,168,128,0.2); color:var(--gold); font-size:.62rem; font-weight:700; line-height:1; cursor:pointer; font-family:var(--font); padding:0; transition:background .2s; z-index:2; align-items:center; justify-content:center; }
.search-clear:hover { background:rgba(197,168,128,0.35); }
.filter-toolbar__alpha { flex:3; min-width:0; }
.letter-capsules { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding:4px 0; }
.letter-capsules::-webkit-scrollbar { display:none; }
.letter-capsule { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 12px; border:1px solid #e2e8f0; border-radius:18px; font-size:.82rem; font-weight:700; font-family:var(--font); background:#ffffff; color:var(--muted); cursor:pointer; user-select:none; transition:all .2s; white-space:nowrap; }
.letter-capsule:hover { border-color:var(--gold); color:var(--gold); }
.letter-capsule--active,
.letter-capsule--active:hover { background:var(--gold); color:var(--noir); border-color:var(--gold); }

/* ===== PRODUCT GRID ===== */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.product-card { background:transparent; border:none; border-radius:0; box-shadow:none; cursor:pointer; display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.4,0,.2,1); }
.product-card:hover { transform:translateY(-3px); }
.card-img-box { position:relative; width:100%; aspect-ratio:1/1; background:transparent; padding:16px 16px 0; }
.card-img-box img { width:100%; height:100%; object-fit:contain; display:block; background:transparent !important; border-radius:12px; }
.card-badge { display:none !important; }

/* — Info box — */
.card-info-box { padding:10px 0 0; margin:0; background:transparent; display:flex; flex-direction:column; align-items:center; width:100%; }
.product-name-label { font-size:1.25rem; font-weight:700; color:#111827; text-align:center !important; line-height:1.3; letter-spacing:-.2px; width:100%; display:block; margin:0 auto; padding:0; }
.card-title-en { display:none; }
.card-meta { display:none; }

/* ===== DETAIL VIEW ===== */
.detail-view { display:none; }
.detail-view.active { display:block; }
.detail-back { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; margin-bottom:20px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:.85rem; font-weight:600; color:var(--muted); font-family:var(--font); transition:all .2s; }
.detail-back:hover { color:var(--text); border-color:var(--muted); }
.detail-layout { display:flex; gap:28px; align-items:stretch; }
.product-image-col { flex:0 0 45%; max-width:45%; border-radius:8px; overflow:hidden; background:var(--panel-bg); border:1px solid var(--border); }
.product-image-col img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.product-info-col { flex:0 0 55%; max-width:55%; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:0; }
.dt-title-en { font-size:28px; font-weight:900; color:var(--gold); line-height:1.2; text-transform:uppercase; margin-bottom:4px; }
.dt-price { font-size:18px; font-weight:800; color:var(--gold); border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:16px; margin-bottom:16px; }
.specs-details { margin:12px 0; border:1px solid rgba(197,168,128,0.2); border-radius:8px; overflow:hidden; background:var(--card-bg); }
.specs-details summary { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; font-size:.88rem; font-weight:700; color:var(--text); cursor:pointer; user-select:none; background:rgba(197,168,128,0.04); list-style:none; }
.specs-details summary::-webkit-details-marker { display:none; }
.specs-details summary::after { content:"▽"; font-size:.6rem; color:var(--gold); transition:transform .25s; }
.specs-details[open] summary::after { transform:rotate(180deg); }
.specs-details[open] summary { border-bottom:1px solid rgba(197,168,128,0.1); }
.specs-detail-item { padding:10px 16px; font-size:.85rem; color:#A0AAB5; line-height:1.6; border-bottom:1px solid rgba(197,168,128,0.06); }
.specs-detail-item:last-child { border-bottom:none; }
.specs-detail-item strong { color:#10b981; }
.wa-footer-wrap { margin-top:auto; width:100%; padding-top:12px; }
.wa-footer-wrap button { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:8px; background:var(--wa); color:#fff; font-weight:700; font-size:.95rem; border:none; cursor:pointer; font-family:var(--font); transition:all .25s; }
.wa-footer-wrap button:hover { background:var(--wa-hover); transform:translateY(-2px); color:#fff; opacity:1; }

/* ===== TRUST BAR ===== */
.trust-bar { padding:36px 0; background:var(--dark-bg); color:#fff; }
.trust-bar__inner { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-bar__item { display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:500; }
.trust-bar__icon { font-size:1.4rem; }

/* ===== FOOTER ===== */
.footer { padding:32px 0; background:var(--dark-deeper); color:var(--muted); font-size:.85rem; }
.footer__inner { display:flex; flex-direction:column; gap:12px; }
.footer__top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer__disclaimer { padding-top:12px; border-top:1px solid var(--gold-dim); font-size:.75rem; line-height:1.7; color:var(--muted); }
.footer__disclaimer strong { color:var(--text); }

/* ===== MOBILE BOTTOM SHEET ===== */
.modal-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.7); -webkit-overflow-scrolling:touch; }
.modal-overlay.active { display:block; }
.modal-sheet { position:fixed; bottom:0; left:0; right:0; display:flex; flex-direction:column; max-height:92vh; background:#0f172a; border-radius:16px 16px 0 0; overflow:hidden; transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); -webkit-overflow-scrolling:touch; }
.modal-overlay.active .modal-sheet { transform:translateY(0); }
.modal-close-btn { position:absolute; top:12px; right:12px; z-index:50; background:rgba(15,23,42,0.6); color:#94a3b8; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); border:none; }
.modal-image-wrapper { width:85%; margin:0 auto; padding-top:16px; flex-shrink:0; position:relative; border-radius:12px; overflow:hidden; }
.modal-image-wrapper img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:12px; }
#modalImg { border-radius:12px !important; overflow:hidden; display:block; }

/* p-glass capsule — 精致紧凑版 */
.p-glass-container { position:absolute; bottom:10px; left:10px; right:10px; z-index:20; display:flex; gap:8px; }
.p-glass-capsule { flex:1; display:flex; align-items:center; gap:6px; padding:8px 10px; background:rgba(15,23,42,0.65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08) !important; border-radius:10px; box-shadow:none !important; cursor:default; }
.p-glass-container--dual .p-glass-capsule { cursor:pointer; }
.p-glass-icon { width:16px; height:16px; color:#C5A880 !important; stroke:#C5A880 !important; flex-shrink:0; position:relative; top:0; }
.p-glass-text { display:flex; flex-direction:column; }
.p-glass-text .pg-main { color:#fff; font-size:0.65rem; font-weight:700; line-height:1.2; }
.p-glass-text .pg-sub { color:#94a3b8; font-size:0.52rem; margin-top:1px; line-height:1.2; }

.modal-params { flex:1; display:flex; flex-direction:column; overflow-y:auto; position:relative; }
.detail-content-inner { padding:0 18px 18px; background:transparent; }

/* — Price table 5‑col dark — */
.price-table { margin-bottom:12px; }
.price-table-header,
.price-table-header--5col { display:grid; grid-template-columns:1fr 1.8fr 1fr 1fr 1fr; gap:4px; padding:10px 14px; background:rgba(255,255,255,0.06); border-radius:var(--radius-sm); margin-bottom:6px; }
.price-table-header .th-item,
.price-table-header--5col .th-item { display:flex; flex-direction:column; gap:1px; }
.price-table-header .th-item .th-zh,
.price-table-header--5col .th-item .th-zh { font-size:0.75rem; font-weight:600; color:#94a3b8; }
.price-table-header .th-item .th-en,
.price-table-header--5col .th-item .th-en { font-size:0.6rem; font-weight:500; color:#64748b; opacity:.8; }
.th-right { text-align:right; }
.th-center { text-align:center; }
.price-row { display:grid; grid-template-columns:1fr 1.8fr 1fr 1fr 1fr; gap:4px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.06); align-items:center; }
.price-row:last-child { border-bottom:none; }
.code-col { text-align:center; }
.code-col .code-text { font-size:0.85rem; font-weight:600; color:#ffffff; }
.specs-col .specs-text { font-size:0.85rem; font-weight:500; color:#f1f5f9; }
.price-col { text-align:right; }
.price-col .price-num { display:block; font-size:0.85rem; font-weight:700; color:#ffffff; line-height:1.2; }

/* — Footer Actions — */
.detail-footer-action { padding:10px 18px 14px; background:#0f172a; border-top:1px solid rgba(255,255,255,0.05); position:sticky; bottom:0; z-index:20; margin-top:auto; }
.p-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 0; background:var(--wa); border:none; border-radius:var(--radius); cursor:pointer; transition:background .2s; box-shadow:0 4px 12px rgba(37,211,102,0.25); font-family:var(--font); }
.p-btn:hover { background:var(--wa-hover); }
.p-btn-icon { width:22px; height:22px; color:#fff; flex-shrink:0; }
.p-btn-text { display:flex; flex-direction:column; align-items:center; }
.p-btn-text__main { color:#fff; font-size:1rem; font-weight:700; line-height:1.3; }
.p-btn-text__sub { color:rgba(255,255,255,0.8); font-size:0.72rem; font-weight:500; margin-top:2px; }

/* ===== 右侧悬浮按钮（垂直居中错开） ===== */
.wa-float {
  position:fixed; top:50%; right:20px; z-index:300;
  transform:translateY(calc(-50% + 30px));
  display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:100px;
  background:var(--wa); color:#fff; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 20px rgba(37,211,102,.35); transition:all .25s cubic-bezier(.4,0,.2,1); border:none; cursor:pointer;
}
.wa-float:hover { transform:translateY(calc(-50% + 27px)) scale(1.03); box-shadow:0 10px 30px rgba(37,211,102,.40); opacity:1; color:#fff; }

/* ================================================================
   报价生成器 — 新样式
   ================================================================ */

/* — Floating Cart Button — */
.cart-float {
  position:fixed; top:50%; right:20px; z-index:301;
  transform:translateY(calc(-50% - 30px));
  display: flex; align-items: center; gap:10px;
  padding:12px 18px; border-radius:100px;
  background:var(--cart-bg); color:#fff; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,0.1);
  cursor:pointer; font-family:var(--font);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.cart-float:hover { background:#334155; }
.cart-float__icon { position:relative; display:flex; align-items:center; }
.cart-float__badge {
  position:absolute; top:-6px; right:-8px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#ef4444; color:#fff;
  font-size:0.65rem; font-weight:800; line-height:18px;
  text-align:center;
}
.cart-float__total { font-size:0.85rem; }

/* — Add‑to‑Cart Modal — */
.cart-add-overlay {
  display:none; position:fixed; inset:0; z-index:6000;
  background:rgba(0,0,0,0.7);
}
.cart-add-overlay.active { display:block; }
.cart-add-sheet {
  position:fixed; bottom:0; left:0; right:0;
  background:#0f172a; border-radius:16px 16px 0 0;
  padding:24px 20px 28px;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  max-height:70vh; overflow-y:auto; z-index:6001;
}
.cart-add-overlay.active .cart-add-sheet { transform:translateY(0); }
.cart-add__title { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:16px; }
.cart-add__section { margin-bottom:16px; }
.cart-add__label { font-size:0.8rem; font-weight:600; color:#94a3b8; margin-bottom:8px; }
.pill-group { display:flex; flex-wrap:wrap; gap:8px; }
.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 18px; border-radius:20px; border:1px solid rgba(255,255,255,0.15);
  background:transparent; color:#cbd5e1; font-size:0.82rem; font-weight:600;
  cursor:pointer; transition:all .2s; font-family:var(--font);
  user-select:none;
}
.pill:hover { border-color:var(--gold); color:var(--gold); }
.pill--active { background:var(--gold); color:var(--noir); border-color:var(--gold); }

/* — Qty Stepper — */
.qty-stepper { display:inline-flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,0.15); border-radius:10px; overflow:hidden; }
.qty-stepper__btn {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; font-size:1.3rem; font-weight:600;
  border:none; cursor:pointer; transition:background .2s; font-family:var(--font);
}
.qty-stepper__btn:hover { background:rgba(255,255,255,0.08); }
.qty-stepper__btn:disabled { opacity:.3; cursor:default; }
.qty-stepper__value { width:48px; text-align:center; font-size:1.1rem; font-weight:700; color:#fff; background:transparent; border:none; border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08); }

.cart-add__confirm {
  width:100%; padding:14px 0; margin-top:8px;
  background:var(--gold); color:var(--noir); border:none; border-radius:10px;
  font-size:1rem; font-weight:700; cursor:pointer; font-family:var(--font);
  transition:background .2s;
}
.cart-add__confirm:hover { background:#d4b88c; }

/* — Quote Drawer — 居中弹窗 */
.quote-overlay {
  display:none; position:fixed; inset:0; z-index:7000;
  background:rgba(0,0,0,0.75);
}
.quote-overlay.active { display:block; }
.quote-drawer {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.92);
  width:92%; max-width:520px; max-height:85vh;
  background:#0f172a; border-radius:16px;
  display:flex; flex-direction:column;
  z-index:7001;
  opacity:0; pointer-events:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.quote-overlay.active .quote-drawer {
  opacity:1; pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.quote-drawer__header {
  padding:20px 20px 14px; border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.quote-drawer__title { font-size:1.1rem; font-weight:800; color:var(--gold); }
.quote-drawer__sub { font-size:0.75rem; color:#64748b; margin-top:2px; }
.quote-drawer__body { flex:1; overflow-y:auto; padding:12px 20px 20px; }

/* — Quick Add — 单搜索框 + 下拉联想 */
.quick-add-wrap { margin-bottom:16px; position:relative; }
.qa-single-search { position:relative; }
.qa-single-input {
  width:100%; padding:11px 14px; border:1px solid rgba(255,255,255,0.12);
  border-radius:8px; background:rgba(255,255,255,0.06); color:#fff;
  font-size:0.88rem; font-family:var(--font); outline:none;
  box-sizing:border-box; transition:border-color .2s;
}
.qa-single-input:focus { border-color:var(--gold); }
.qa-single-input::placeholder { color:#64748b; font-size:0.82rem; }

.qa-single-suggestions {
  position:absolute; top:100%; left:0; right:0; z-index:50;
  list-style:none; max-height:200px; overflow-y:auto;
  background:#1e293b; border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; margin-top:4px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
}
.qa-single-suggestions li {
  padding:10px 14px; cursor:pointer; font-size:0.82rem; color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .15s;
  display:flex; justify-content:space-between; align-items:center;
}
.qa-single-suggestions li:last-child { border-bottom:none; }
.qa-single-suggestions li:hover { background:rgba(197,168,128,0.12); color:#fff; }
.qa-single-suggestions li .sug-badge {
  font-size:0.7rem; color:#94a3b8; background:rgba(255,255,255,0.05);
  padding:2px 8px; border-radius:4px;
}

.quick-empty { color:#64748b; font-size:0.78rem; text-align:center; padding:20px 0; }

/* — Inline Configurator（内联选配面板） — */
.inline-config { padding:14px; background:rgba(255,255,255,0.04); border-radius:10px; margin-bottom:12px; }
.inline-config__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.inline-config__name { font-size:0.9rem; font-weight:700; color:#fff; }
.inline-config__badge { font-size:0.7rem; color:#94a3b8; margin-left:6px; }
.inline-config__cancel { background:none; border:none; color:#64748b; font-size:0.78rem; cursor:pointer; padding:4px 8px; border-radius:4px; }
.inline-config__cancel:hover { color:#ef4444; background:rgba(239,68,68,0.1); }
.inline-config__label { font-size:0.7rem; font-weight:600; color:#94a3b8; margin-bottom:6px; }
.inline-config__pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.inline-config__pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:16px; border:1px solid rgba(255,255,255,0.15);
  background:transparent; color:#cbd5e1; font-size:0.75rem; font-weight:600;
  cursor:pointer; transition:all .2s; font-family:var(--font); user-select:none;
}
.inline-config__pill:hover { border-color:var(--gold); color:var(--gold); }
.inline-config__pill--active { background:var(--gold); color:var(--noir); border-color:var(--gold); }
.inline-config__footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,0.06);
}
.inline-config__stepper { display:flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,0.12); border-radius:8px; overflow:hidden; }
.inline-config__stepper button { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:transparent; color:#fff; border:none; cursor:pointer; font-size:1.1rem; font-weight:600; transition:background .2s; }
.inline-config__stepper button:hover { background:rgba(255,255,255,0.08); }
.inline-config__stepper span { width:36px; text-align:center; font-size:0.85rem; font-weight:700; color:#fff; border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08); }
.inline-config__price { font-size:1rem; font-weight:800; color:var(--gold); white-space:nowrap; }
.inline-config__add {
  padding:8px 18px; border:none; border-radius:8px;
  background:var(--wa); color:#fff; font-size:0.82rem; font-weight:700;
  cursor:pointer; font-family:var(--font); transition:background .2s; white-space:nowrap;
}
.inline-config__add:hover { background:var(--wa-hover); }

/* — Cart Items — */
.cart-item { display:flex; align-items:center; gap:6px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.cart-item:last-child { border-bottom:none; }
.cart-item__name { flex:1; min-width:0; font-size:0.8rem; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item__qty { display:flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,0.1); border-radius:6px; overflow:hidden; flex-shrink:0; }
.cart-item__qty button { width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:transparent; color:#fff; border:none; cursor:pointer; font-size:0.85rem; font-weight:600; transition:background .2s; }
.cart-item__qty button:hover { background:rgba(255,255,255,0.08); }
.cart-item__qty span { width:28px; text-align:center; font-size:0.75rem; font-weight:700; color:#fff; border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08); }
.cart-item__subtotal { font-size:0.8rem; font-weight:700; color:var(--gold); min-width:50px; text-align:right; flex-shrink:0; }
.cart-item__del { width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:transparent; color:#ef4444; border:none; cursor:pointer; font-size:0.85rem; border-radius:50%; transition:background .2s; flex-shrink:0; }
.cart-item__del:hover { background:rgba(239,68,68,0.15); }

/* — Finance Section — */
.finance-section { margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.06); }
.finance-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; gap:8px; }
.finance-row .fr-label { font-size:0.8rem; font-weight:600; color:#94a3b8; }
.finance-row .fr-value { font-size:0.9rem; font-weight:700; color:#fff; }
.fr-total { font-size:1.1rem; font-weight:800; color:var(--gold); padding-top:8px; border-top:1px solid rgba(255,255,255,0.1); margin-top:8px; }
.fr-total .fr-value { font-size:1.1rem; color:var(--gold); }

.currency-select { padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:#fff; font-size:0.8rem; font-weight:600; font-family:var(--font); outline:none; }
.currency-select option { background:#1e293b; color:#fff; }
.rate-input { width:70px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:#fff; font-size:0.8rem; font-family:var(--font); outline:none; text-align:center; }
.rate-input:focus { border-color:var(--gold); }
.apply-rate-btn { padding:4px 10px; background:#10b981; color:#fff; border:none; border-radius:5px; font-size:0.72rem; font-weight:600; cursor:pointer; font-family:var(--font); transition:background .2s; white-space:nowrap; }
.apply-rate-btn:hover { background:#059669; }
.fin-number { width:80px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:#fff; font-size:0.8rem; font-family:var(--font); outline:none; text-align:right; }

.quote-export-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 0; margin-top:16px;
  background:var(--wa); color:#fff; border:none; border-radius:12px;
  font-size:1rem; font-weight:700; cursor:pointer; font-family:var(--font);
  transition:background .2s;
}
.quote-export-btn:hover { background:var(--wa-hover); }

/* ===== RESPONSIVE ===== */
@media (max-width:1200px) { .product-grid { grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (max-width:1024px) { .product-grid { grid-template-columns:repeat(2,1fr); gap:16px; } .detail-layout { grid-template-columns:1fr; } .product-image-col img { max-height:400px; } }
@media (max-width:820px) {
  .product-grid { gap:12px; }
  .trust-bar__inner { grid-template-columns:repeat(2,1fr); gap:14px; }
  .wa-float { right:14px; width:52px; height:52px; padding:0; justify-content:center; border-radius:50%; }
  .wa-float__text { display:none; }
}
@media (max-width:768px) {
  .filter-toolbar { flex-direction:column; gap:12px; padding:12px 16px; }
  .filter-toolbar__search, .filter-toolbar__alpha { width:100%; }
  .product-grid { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .card-info-box { padding:8px 0 0 !important; }
  .product-name-label { font-size:1rem !important; }
  .hero-main-section { min-height:auto; background:#0A0B0E; }
  .hero-content-container { flex-direction:column-reverse; text-align:center; padding:24px 20px; gap:24px; }
  .hero-text-content { flex:0 0 100% !important; max-width:100% !important; padding-right:0 !important; }
  .hero-text-content h1 { font-size:1.6rem; }
  .hero-text-content p { font-size:.92rem; max-width:100%; }
  .hero-wa-btn { justify-content:center; width:100%; padding:14px 24px; font-size:.92rem; }
  .hero-image-content { flex:0 0 100% !important; max-width:100% !important; justify-content:center !important; }
  .hero-image-content img { max-width:280px; }
  .image-tabs { grid-template-columns:repeat(1,1fr); gap:20px; }
  .hero-modal--coa { width:100vw; max-height:95vh; padding:20px 14px 14px; border-radius:0; border-left:none; border-right:none; }
  .coa-grid { gap:10px !important; }
  .hero-modal--wa { padding:28px 22px 22px; }
  .hero-modal--wa .wa-modal__title { font-size:1.05rem; }
  .hero-modal--wa .wa-modal__sub { font-size:.77rem; margin-bottom:17px; }
  .hero-modal--wa .wa-modal__number { font-size:.84rem; margin-bottom:20px; }
  .wa-breathing-btn { font-size:.84rem; padding:14px 0; }
  .hero-modal--wa .wa-modal__qr { width:240px; height:240px; margin-top:20px; }
  .cart-float { right:14px; padding:10px 14px; }
}
@media (max-width:540px) {
  .product-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .card-info-box { padding:6px 0 0 !important; }
  .product-name-label { font-size:0.9rem !important; }
  .trust-bar__item { font-size:.8rem; }
  .footer__top { flex-direction:column; text-align:center; }
  .hero-modal--coa { padding:16px 10px 10px; }
  .coa-modal__header { font-size:.88rem; }
  .hero-modal--wa { padding:17px 11px 14px; }
  .hero-modal--wa .wa-modal__title { font-size:.84rem; }
  .hero-modal--wa .wa-modal__sub { font-size:.67rem; margin-bottom:13px; }
  .hero-modal--wa .wa-modal__number { font-size:.7rem; margin-bottom:14px; }
  .wa-breathing-btn { font-size:.7rem; padding:11px 0; }
  .hero-modal--wa .wa-modal__qr { width:180px; height:180px; margin-top:14px; }
  .wa-float { right:10px; }
  .cart-float { right:10px; padding:8px 12px; gap:6px; }
  .cart-float__total { font-size:0.75rem; }
}

/* ===== TRANSITIONS ===== */
.product-grid, .detail-view { transition:opacity .25s; }

/* === 视觉微调：商品网格 + 弹窗大图 12px 圆角 === */
.card-img-box img { border-radius:12px !important; overflow:hidden; display:block; }
.modal-image-wrapper { border-radius:12px !important; overflow:hidden; }
.modal-image-wrapper img, #modalImg { border-radius:12px !important; overflow:hidden; display:block; }

/* 小屏5列适配 */
@media (max-width:480px) {
  .price-table-header, .price-table-header--5col, .price-row {
    grid-template-columns:0.8fr 1.4fr 0.9fr 0.9fr 0.9fr !important;
    gap:2px; padding:8px 6px;
  }
  .code-text { font-size:0.7rem !important; }
  .specs-text { font-size:0.7rem !important; }
  .price-num { font-size:0.72rem !important; }
  .price-table-header .th-item .th-zh, .price-table-header--5col .th-item .th-zh { font-size:0.65rem !important; }
  .price-table-header .th-item .th-en, .price-table-header--5col .th-item .th-en { font-size:0.5rem !important; }
}