/* ============================================================
   沅泰数字 · 商城  |  Design System
   Tokens → Base → Components → Pages → Responsive
   ============================================================ */

:root{
  /* 字体：无外部依赖，全部系统字体 */
  --font-body: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --font-display: Georgia, "Songti SC", "STSong", "SimSun", serif;
  --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;

  /* 色彩：墨青主色 + 烧陶橙点缀 + 暖中性灰 */
  --ink: #101c22;
  --ink-2: #35474d;
  --muted: #6b7c81;
  --muted-2: #96a5a9;
  --line: #e3e8e6;
  --line-2: #cfd8d5;
  --bg: #f6f7f4;
  --surface: #ffffff;

  --brand: #0e7c6b;
  --brand-dark: #0a5f53;
  --brand-soft: #e7f2ee;
  --accent: #b8490b;
  --accent-soft: #fbeede;
  --success: #1c7a4f;
  --danger: #b3241c;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --r-full: 999px;

  --sh-s: 0 1px 2px rgba(16,28,34,.05), 0 2px 8px -4px rgba(16,28,34,.10);
  --sh-m: 0 14px 34px -18px rgba(16,28,34,.28);
  --sh-l: 0 34px 70px -40px rgba(16,28,34,.45);

  --maxw: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------------- Base ---------------- */

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 480px at 86% -10%, rgba(14,124,107,.10), transparent 70%),
    radial-gradient(760px 420px at -6% 16%, rgba(184,73,11,.045), transparent 68%),
    repeating-linear-gradient(0deg, rgba(16,28,34,.022) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(16,28,34,.022) 0 1px, transparent 1px 96px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5{ margin: 0; font-weight: 600; letter-spacing: -.01em; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
button,input,select,textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }

::selection{ background: var(--brand); color: #fff; }

/* ---------------- Utilities ---------------- */

.container{ width: min(var(--maxw), calc(100% - 48px)); margin-inline: auto; }
.section{ padding: 72px 0; }
.section-tight{ padding: 48px 0; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before{
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
}

.section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.section-head .head-main{ max-width: 640px; }
.section-title{ font-size: 32px; line-height: 1.25; margin-top: 12px; font-weight: 700; letter-spacing: -.02em; }
.section-desc{ margin-top: 10px; color: var(--muted); font-size: 14.5px; }

.link-more{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-more:hover{ color: var(--brand); border-color: var(--brand); }
.link-more svg{ width: 16px; height: 16px; }

.num{ font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.mono{ font-family: var(--font-mono); }

/* ---------------- Buttons ---------------- */

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-s);
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn svg{ width: 18px; height: 18px; }

.btn-primary{ background: var(--brand); color: #fff; box-shadow: 0 10px 24px -14px rgba(14,124,107,.85); }
.btn-primary:hover{ background: var(--brand-dark); box-shadow: 0 14px 30px -14px rgba(14,124,107,.9); }
.btn-primary:disabled{ background: var(--muted-2); box-shadow: none; cursor: not-allowed; transform: none; }

.btn-accent{ background: var(--accent); color: #fff; box-shadow: 0 10px 24px -14px rgba(184,73,11,.8); }
.btn-accent:hover{ background: #9c3c09; }

.btn-ghost{ background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover{ border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.6); }

.btn-dark{ background: var(--ink); color: #f4f6f4; }
.btn-dark:hover{ background: #1d2f36; }

.btn-light{ background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-light:hover{ border-color: var(--ink); }

.btn-sm{ height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg{ height: 54px; padding: 0 32px; font-size: 15.5px; }
.btn-block{ width: 100%; }

/* ---------------- Tags / Chips ---------------- */

.tag{
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--brand-soft); color: var(--brand-dark);
}
.tag-accent{ background: var(--accent-soft); color: var(--accent); }
.tag-line{ background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-weight: 500; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.7);
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover{ border-color: var(--brand); color: var(--brand); }
.chip.active{ background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------- Form controls ---------------- */

.field{ display: flex; flex-direction: column; gap: 6px; }
.label{ font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.label .req{ color: var(--accent); margin-left: 2px; }

.input,.textarea,.select{
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
  font-size: 14px; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  outline: none;
}
.textarea{ height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.select{ appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus,.textarea:focus,.select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,124,107,.12); }
.input::placeholder,.textarea::placeholder{ color: var(--muted-2); }
.input.error{ border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,36,28,.08); }
.field-err{ font-size: 12px; color: var(--danger); min-height: 0; }

.check{
  width: 18px; height: 18px; flex: none; border: 1px solid var(--line-2); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; cursor: pointer; transition: all .18s var(--ease);
}
.check.on{ background: var(--brand); border-color: var(--brand); color: #fff; }
.check svg{ width: 12px; height: 12px; }

/* ---------------- Header ---------------- */

.announce{ background: var(--ink); color: #cfdbd7; font-size: 12px; letter-spacing: .03em; }
.announce-inner{ display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 16px; }
.announce-inner .ann-left{ display: flex; align-items: center; gap: 8px; }
.announce svg{ width: 14px; height: 14px; opacity: .8; }
.announce a{ color: #f0f5f2; border-bottom: 1px solid rgba(255,255,255,.25); }

.site-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(246,247,244,.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner{ display: flex; align-items: center; gap: 28px; height: 68px; }
.brand{ display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark{
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: #f2f6f3;
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em;
  position: relative; overflow: hidden;
}
.brand-mark::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.brand-meta{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-meta b{ font-size: 16px; letter-spacing: .06em; font-weight: 700; }
.brand-meta em{ font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: .22em; color: var(--muted); margin-top: 2px; }

.main-nav{ display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.main-nav a{
  position: relative; padding: 8px 12px; border-radius: var(--r-s);
  font-size: 14px; color: var(--ink-2); transition: color .2s var(--ease), background .2s var(--ease);
}
.main-nav a:hover{ color: var(--ink); background: rgba(16,28,34,.04); }
.main-nav a.active{ color: var(--brand); font-weight: 600; }
.main-nav a.active::after{
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--brand); border-radius: 2px;
}

.header-search{ margin-left: auto; flex: 1 1 240px; max-width: 300px; }
.header-search .search-shell{
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px;
  background: rgba(255,255,255,.85); border: 1px solid var(--line-2); border-radius: var(--r-s);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header-search .search-shell:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,124,107,.1); }
.header-search input{
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  font-size: 13.5px; color: var(--ink);
}
.header-search input::placeholder{ color: var(--muted-2); }
.header-search button{
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.header-search button:hover{ color: var(--brand); background: var(--brand-soft); }
.header-search svg{ width: 17px; height: 17px; }

.header-cart{
  position: relative; display: flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.85);
  font-size: 13.5px; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.header-cart:hover{ border-color: var(--ink); color: var(--ink); }
.header-cart svg{ width: 18px; height: 18px; }
.cart-count{
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; font-size: 11px; line-height: 18px;
  text-align: center; font-family: var(--font-mono);
}

.nav-toggle{
  display: none; width: 40px; height: 40px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: #fff; place-items: center; color: var(--ink-2);
}

/* ---------------- Footer ---------------- */

.site-footer{ margin-top: 88px; background: var(--ink); color: #a9bab6; }
.footer-inner{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
  padding: 60px 0 48px;
}
.footer-brand .brand{ color: #f1f5f2; }
.footer-brand .brand-meta em{ color: #7f9390; }
.footer-brand p{ margin-top: 18px; font-size: 13px; line-height: 1.8; max-width: 300px; color: #93a6a2; }
.footer-col h4{ font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #e7eeea; font-weight: 600; }
.footer-col ul{ margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ font-size: 13px; color: #96a8a4; transition: color .2s var(--ease); }
.footer-col a:hover{ color: #fff; }
.footer-contact li{ font-size: 13px; line-height: 1.7; color: #96a8a4; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0 26px; font-size: 12px; color: #7d918d; flex-wrap: wrap;
}
.footer-bottom .mono{ letter-spacing: .04em; }
.footer-legal{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-legal a{ color: #96a8a4; transition: color .2s var(--ease); }
.footer-legal a:hover{ color: #fff; }

/* ---------------- Legal pages ---------------- */

.legal-wrap{ display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; padding-bottom: 24px; }
.legal-nav{ position: sticky; top: 112px; }
.legal-nav h5{ font-size: 12px; letter-spacing: .12em; color: var(--muted-2); text-transform: uppercase; font-weight: 600; }
.legal-nav ul{ margin-top: 14px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.legal-nav a{ display: block; padding: 9px 0 9px 14px; font-size: 13px; color: var(--muted); border-left: 2px solid transparent; margin-left: -1px; transition: all .2s var(--ease); }
.legal-nav a:hover{ color: var(--ink); }
.legal-nav a.on{ color: var(--brand); border-color: var(--brand); font-weight: 600; }
.legal-body{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 40px 44px; }
.legal-body h2{ font-size: 21px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal-body h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3{ font-size: 15px; margin-top: 20px; }
.legal-body p{ font-size: 13.5px; line-height: 2; color: var(--ink-2); margin-top: 10px; }
.legal-body ul{ margin-top: 10px; padding-left: 20px; list-style: disc; }
.legal-body li{ font-size: 13.5px; line-height: 2; color: var(--ink-2); }
.legal-body .legal-meta{ font-size: 12px; color: var(--muted-2); margin-top: 6px; }
.legal-body .legal-note{ margin-top: 22px; padding: 16px 18px; border-radius: var(--r-s); background: var(--brand-soft); border: 1px solid #d5e8e1; font-size: 12.5px; line-height: 1.9; color: var(--brand-dark); }
.legal-body table{ width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.legal-body th, .legal-body td{ border: 1px solid var(--line); padding: 10px 14px; text-align: left; color: var(--ink-2); }
.legal-body th{ background: rgba(246,247,244,.8); font-weight: 600; width: 140px; }

@media (max-width: 900px){
  .legal-wrap{ grid-template-columns: 1fr; gap: 24px; }
  .legal-nav{ position: static; }
  .legal-nav ul{ flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 8px; }
  .legal-nav a{ border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 7px 12px; }
  .legal-body{ padding: 28px 22px; }
}

/* ---------------- Hero ---------------- */

.hero{
  position: relative; margin-top: 28px;
  background: var(--ink); color: #f2f6f3;
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--sh-l);
}
.hero::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 320px at 78% 18%, rgba(14,124,107,.34), transparent 70%),
    radial-gradient(420px 260px at 12% 88%, rgba(184,73,11,.18), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 72px);
}
.hero-in{
  position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
  padding: 64px 64px 0;
}
.hero-copy{ padding-bottom: 64px; max-width: 560px; }
.hero .eyebrow{ color: #6fd4c2; }
.hero .eyebrow::before{ background: #6fd4c2; }
.hero-title{
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.22; font-weight: 800;
  letter-spacing: -.02em; margin-top: 20px; color: #fff;
}
.hero-title span{ color: #74d3c0; }
.hero-sub{ margin-top: 18px; font-size: 15px; line-height: 1.85; color: #b9c8c4; max-width: 470px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-actions .btn-ghost{ border-color: rgba(255,255,255,.28); color: #e8f0ec; }
.hero-actions .btn-ghost:hover{ border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.hero-stats{
  display: flex; gap: 40px; margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stats .stat b{ display: block; font-family: var(--font-display); font-size: 26px; color: #fff; letter-spacing: .01em; }
.hero-stats .stat span{ font-size: 12px; color: #93a8a3; letter-spacing: .04em; }

.hero-visual{ position: relative; align-self: end; }
.hero-shot{
  position: relative; border-radius: var(--r-m) var(--r-m) 0 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
  aspect-ratio: 4 / 3.15; background: #1a2b31;
}
.hero-shot img{ width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.hero-float{
  position: absolute; left: -28px; bottom: 32px;
  background: rgba(246,247,244,.96); color: var(--ink);
  border-radius: var(--r-m); padding: 14px 18px; width: 216px;
  box-shadow: var(--sh-m);
  animation: floaty 7s ease-in-out infinite;
}
.hero-float .tag{ margin-bottom: 8px; }
.hero-float b{ display: block; font-size: 14px; font-weight: 600; }
.hero-float .hf-price{ display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.hero-float .hf-price em{ font-family: var(--font-display); font-style: normal; font-size: 22px; color: var(--accent); }
.hero-float .hf-price s{ font-size: 12px; color: var(--muted-2); }

@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

/* ---------------- Category grid ---------------- */

.cat-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.cat-card{
  position: relative; padding: 26px 24px 24px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow: hidden;
}
.cat-card::after{
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 110px; height: 110px;
  border-radius: 50%; background: var(--brand-soft); opacity: .7;
  transition: transform .35s var(--ease);
}
.cat-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.cat-card:hover::after{ transform: scale(1.35); }
.cat-icon{
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; color: var(--brand);
  background: var(--brand-soft);
}
.cat-icon svg{ width: 22px; height: 22px; }
.cat-name{ position: relative; z-index: 1; margin-top: 18px; font-size: 16.5px; font-weight: 700; }
.cat-en{ position: relative; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted-2); margin-top: 4px; }
.cat-desc{ position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.cat-arrow{ position: absolute; top: 26px; right: 22px; z-index: 1; color: var(--muted-2); }
.cat-arrow svg{ width: 18px; height: 18px; }

/* ---------------- Product card ---------------- */

.p-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.p-card{
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.p-card:hover{ transform: translateY(-5px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.p-media{ position: relative; aspect-ratio: 4 / 3; background: #edf1ee; overflow: hidden; }
.p-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.p-card:hover .p-media img{ transform: scale(1.045); }
.p-badge{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  height: 22px; padding: 0 8px; border-radius: 4px;
  background: rgba(16,28,34,.86); color: #f0f5f2;
  font-size: 11px; line-height: 22px; letter-spacing: .04em; font-weight: 600;
}
.p-badge.accent{ background: var(--accent); }
.p-body{ padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.p-cat{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; }
.p-name{ font-size: 15px; font-weight: 650; line-height: 1.45; margin-top: 8px; letter-spacing: -.01em; }
.p-desc{ font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; flex: 1; }
.p-foot{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.p-price{ font-family: var(--font-display); font-size: 22px; color: var(--accent); line-height: 1; letter-spacing: .01em; }
.p-price i{ font-style: normal; font-size: 12px; margin-right: 1px; }
.p-old{ font-size: 12px; color: var(--muted-2); text-decoration: line-through; margin-left: 6px; }
.p-sold{ font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.p-buy{
  width: 34px; height: 34px; flex: none; border-radius: var(--r-s);
  border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.p-buy:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }
.p-buy svg{ width: 16px; height: 16px; }

/* ---------------- Promise strip ---------------- */

.promise{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.55);
}
.promise-inner{ display: grid; grid-template-columns: repeat(4,1fr); }
.promise-item{
  display: flex; align-items: center; gap: 14px; padding: 26px 24px;
  border-right: 1px solid var(--line);
}
.promise-item:last-child{ border-right: 0; }
.promise-item .pi-icon{
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.promise-item svg{ width: 20px; height: 20px; }
.promise-item b{ display: block; font-size: 14px; font-weight: 650; }
.promise-item span{ font-size: 12px; color: var(--muted); }

/* ---------------- Split section ---------------- */

.split{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split-media{
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-m);
  border: 1px solid var(--line); aspect-ratio: 4 / 3.2; background: #e9eeeb; position: relative;
}
.split-media img{ width: 100%; height: 100%; object-fit: cover; }
.split-media .media-tag{
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(16,28,34,.9); color: #e8f0ec; border-radius: 6px;
  padding: 7px 12px; font-size: 11.5px; letter-spacing: .06em;
}
.split-copy .section-title{ font-size: 30px; }
.split-list{ display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.split-item{ display: flex; gap: 14px; align-items: flex-start; }
.split-item .si-no{
  font-family: var(--font-display); font-size: 14px; color: var(--brand);
  width: 26px; flex: none; padding-top: 1px;
}
.split-item b{ display: block; font-size: 14.5px; font-weight: 650; }
.split-item p{ font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 3px; }

/* ---------------- CTA band ---------------- */

.cta-band{
  position: relative; overflow: hidden; border-radius: var(--r-l);
  background: linear-gradient(120deg, #0b2a27 0%, #10352f 55%, #143f37 100%);
  color: #eaf2ef; padding: 52px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta-band::after{
  content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: rgba(14,124,107,.28); filter: blur(10px);
}
.cta-band .cta-copy{ position: relative; z-index: 1; }
.cta-band h3{ font-size: 26px; color: #fff; letter-spacing: -.01em; }
.cta-band p{ font-size: 13.5px; color: #a9c2bc; margin-top: 10px; max-width: 520px; }
.cta-band .cta-actions{ position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- Page head ---------------- */

.page-head{ padding: 40px 0 26px; }
.breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a{ color: var(--muted); transition: color .2s var(--ease); }
.breadcrumb a:hover{ color: var(--brand); }
.breadcrumb svg{ width: 12px; height: 12px; opacity: .6; }
.breadcrumb .cur{ color: var(--ink); }
.page-title{ font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-top: 16px; }
.page-desc{ font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 640px; }

/* ---------------- Filter bar ---------------- */

.filter-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.filter-bar .chips{ gap: 6px; }
.filter-right{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.filter-right .sort{
  height: 38px; padding: 0 34px 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background-color: #fff; font-size: 13px; color: var(--ink-2);
  appearance: none; outline: none; cursor: pointer;
  background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.result-meta{ font-size: 12.5px; color: var(--muted); }
.result-meta b{ color: var(--ink); font-family: var(--font-display); font-size: 15px; }

/* ---------------- Loading / Empty / Pager ---------------- */

.skeleton{
  border-radius: var(--r-m); border: 1px solid var(--line); background: #fff; overflow: hidden;
}
.sk-media{ aspect-ratio: 4 / 3; background: linear-gradient(100deg, #eef1ee 30%, #f6f8f5 50%, #eef1ee 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.sk-line{ height: 12px; margin: 16px 18px 0; border-radius: 3px; background: linear-gradient(100deg, #eef1ee 30%, #f6f8f5 50%, #eef1ee 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.sk-line.short{ width: 42%; margin-bottom: 20px; }
@keyframes shimmer{ to{ background-position: -200% 0; } }

.empty{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-m);
  background: rgba(255,255,255,.6);
}
.empty .empty-icon{ width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.empty .empty-icon svg{ width: 26px; height: 26px; }
.empty h4{ font-size: 16px; margin-top: 16px; }
.empty p{ font-size: 13px; color: var(--muted); margin-top: 6px; }
.empty .btn{ margin-top: 20px; }

.pager{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pager button{
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 13.5px;
  transition: all .18s var(--ease);
}
.pager button:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); }
.pager button.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
.pager button:disabled{ opacity: .45; cursor: not-allowed; }
.pager svg{ width: 16px; height: 16px; }

/* ---------------- Product detail ---------------- */

.detail-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.gallery{ position: sticky; top: 112px; }
.g-main{
  border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line);
  background: #eef1ee; position: relative; aspect-ratio: 4 / 3.1; box-shadow: var(--sh-s);
}
.g-main img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.g-main:hover img{ transform: scale(1.06); }
.g-note{ margin-top: 12px; font-size: 11.5px; color: var(--muted-2); letter-spacing: .02em; }

.detail-info .p-cat{ font-size: 10.5px; }
.d-title{ font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.d-sub{ font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.75; }
.d-rate{ display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.d-rate .stars{ display: inline-flex; gap: 2px; color: var(--accent); }
.d-rate .stars svg{ width: 14px; height: 14px; }
.d-rate b{ font-family: var(--font-display); color: var(--ink); font-size: 15px; }

.price-block{
  margin-top: 22px; padding: 22px 24px; border-radius: var(--r-m);
  background: linear-gradient(180deg, #fbf6ef 0%, #fdfcfa 100%);
  border: 1px solid #efe2d1;
}
.price-now{ display: flex; align-items: baseline; gap: 4px; color: var(--accent); font-family: var(--font-display); }
.price-now i{ font-style: normal; font-size: 16px; }
.price-now b{ font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: .01em; }
.price-old{ font-size: 13px; color: var(--muted-2); text-decoration: line-through; margin-left: 10px; }
.price-save{ margin-left: auto; font-size: 12px; color: var(--accent); background: #fff; border: 1px solid #f0dcc6; border-radius: 4px; padding: 2px 8px; }
.price-note{ font-size: 12px; color: var(--muted); margin-top: 10px; }

.spec-group{ margin-top: 26px; }
.spec-label{ font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.spec-opts{ display: flex; flex-wrap: wrap; gap: 10px; }
.spec-opt{
  min-height: 40px; padding: 8px 16px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  font-size: 13px; transition: all .18s var(--ease); text-align: left;
}
.spec-opt:hover{ border-color: var(--brand); color: var(--brand); }
.spec-opt.on{ border-color: var(--ink); background: var(--ink); color: #fff; }
.spec-opt em{ display: block; font-style: normal; font-size: 11px; opacity: .7; margin-top: 2px; }

.buy-row{ display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.qty{ display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: #fff; }
.qty button{ width: 42px; height: 100%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; transition: background .18s var(--ease); }
.qty button:hover{ background: var(--brand-soft); color: var(--brand); }
.qty button svg{ width: 15px; height: 15px; }
.qty .qty-val{ width: 48px; text-align: center; font-family: var(--font-mono); font-size: 14px; border: 0; outline: none; background: transparent; }
.buy-row .btn{ flex: 1; min-width: 150px; }

.svc-row{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.svc-row span{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.svc-row svg{ width: 15px; height: 15px; color: var(--brand); }

/* tabs */

.tabs{ margin-top: 72px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.tab{
  position: relative; padding: 14px 18px; border: 0; background: transparent;
  font-size: 14.5px; color: var(--muted); transition: color .2s var(--ease);
}
.tab:hover{ color: var(--ink); }
.tab.active{ color: var(--ink); font-weight: 650; }
.tab.active::after{ content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--brand); }
.tab-panel{ padding: 32px 0; display: none; }
.tab-panel.show{ display: block; animation: fadeUp .5s var(--ease) both; }

@keyframes fadeUp{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

.param-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.param-table tr{ border-bottom: 1px solid var(--line); }
.param-table th{ width: 180px; text-align: left; padding: 14px 20px; color: var(--muted); font-weight: 500; background: rgba(255,255,255,.55); }
.param-table td{ padding: 14px 20px; color: var(--ink-2); }
.param-table tr:last-child{ border-bottom: 0; }

.desc-block{ font-size: 14px; line-height: 1.95; color: var(--ink-2); max-width: 820px; }
.desc-block p + p{ margin-top: 14px; }
.highlight-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.highlight-item{
  display: flex; gap: 12px; padding: 18px 20px; border-radius: var(--r-m);
  background: #fff; border: 1px solid var(--line);
}
.highlight-item .hi-icon{ width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.highlight-item svg{ width: 17px; height: 17px; }
.highlight-item b{ font-size: 13.5px; font-weight: 650; display: block; }
.highlight-item span{ font-size: 12.5px; color: var(--muted); }

.review{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.review-head{ display: flex; align-items: center; gap: 12px; }
.avatar{
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 600; flex: none;
}
.review-head b{ font-size: 13.5px; font-weight: 600; }
.review-head .stars{ display: inline-flex; gap: 2px; color: var(--accent); margin-left: 4px; }
.review-head .stars svg{ width: 13px; height: 13px; }
.review-head time{ margin-left: auto; font-size: 12px; color: var(--muted-2); font-family: var(--font-mono); }
.review-body{ font-size: 13.5px; color: var(--ink-2); line-height: 1.8; margin-top: 10px; }
.review-tags{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------------- Cart ---------------- */

.cart-grid{ display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cart-list{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.cart-list-head{ display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); background: rgba(246,247,244,.6); }
.cart-list-head .cl-left{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cart-item{ display: grid; grid-template-columns: 24px 92px 1fr 110px 120px 110px 36px; gap: 18px; align-items: center; padding: 22px; border-bottom: 1px solid var(--line); position: relative; }
.cart-item:last-child{ border-bottom: 0; }
.ci-img{ width: 92px; height: 74px; border-radius: var(--r-s); overflow: hidden; background: #edf1ee; }
.ci-img img{ width: 100%; height: 100%; object-fit: cover; }
.ci-info a{ font-size: 14px; font-weight: 600; line-height: 1.5; }
.ci-info a:hover{ color: var(--brand); }
.ci-spec{ font-size: 12px; color: var(--muted); margin-top: 5px; }
.ci-price{ font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.ci-unit{ font-size: 12px; color: var(--muted-2); margin-top: 2px; font-family: var(--font-mono); }
.ci-sub{ font-family: var(--font-display); font-size: 18px; color: var(--accent); text-align: right; }
.ci-del{ width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r-s); background: transparent; color: var(--muted-2); display: grid; place-items: center; transition: all .18s var(--ease); }
.ci-del:hover{ color: var(--danger); border-color: rgba(179,36,28,.25); background: rgba(179,36,28,.05); }
.ci-del svg{ width: 16px; height: 16px; }

.qty-sm{ display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: #fff; }
.qty-sm button{ width: 30px; height: 100%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; }
.qty-sm button:hover{ background: var(--brand-soft); color: var(--brand); }
.qty-sm button svg{ width: 13px; height: 13px; }
.qty-sm span{ width: 36px; text-align: center; font-family: var(--font-mono); font-size: 13px; }

.cart-summary{
  position: sticky; top: 112px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 24px; box-shadow: var(--sh-s);
}
.cart-summary h4{ font-size: 15px; font-weight: 650; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sum-row{ display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 13px; color: var(--muted); }
.sum-row b{ color: var(--ink-2); font-family: var(--font-mono); font-weight: 500; }
.sum-total{ display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.sum-total span{ font-size: 13px; color: var(--muted); }
.sum-total b{ font-family: var(--font-display); font-size: 30px; color: var(--accent); font-weight: 400; line-height: 1; }
.sum-total b i{ font-style: normal; font-size: 15px; margin-right: 2px; }
.cart-summary .btn{ margin-top: 20px; }
.cart-note{ font-size: 11.5px; color: var(--muted-2); margin-top: 12px; text-align: center; }
.sum-free{ font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sum-free svg{ width: 14px; height: 14px; }

/* ---------------- Checkout ---------------- */

.steps{ display: flex; align-items: center; gap: 12px; padding: 24px 0 36px; }
.step{ display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 13px; }
.step .step-no{
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: #fff; font-family: var(--font-mono); font-size: 12px;
}
.step.active{ color: var(--ink); font-weight: 600; }
.step.active .step-no{ background: var(--ink); border-color: var(--ink); color: #fff; }
.step.done{ color: var(--brand); }
.step.done .step-no{ background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.steps .step-line{ width: 56px; height: 1px; background: var(--line-2); }
@media (max-width: 640px){ .steps .step-line{ width: 24px; } .step span{ display: none; } }

.checkout-grid{ display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.panel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 26px; }
.panel + .panel{ margin-top: 18px; }
.panel-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-head h4{ font-size: 16px; font-weight: 650; }
.panel-head .ph-note{ font-size: 12px; color: var(--muted); }
.panel-head h4::before{ content: ""; display: inline-block; width: 3px; height: 14px; background: var(--brand); border-radius: 2px; margin-right: 9px; vertical-align: -2px; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full{ grid-column: 1 / -1; }
.radio-row{ display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.radio-card{
  position: relative; padding: 16px; border-radius: var(--r-m); border: 1px solid var(--line-2);
  background: #fff; cursor: pointer; transition: all .2s var(--ease); text-align: left;
}
.radio-card:hover{ border-color: var(--brand); }
.radio-card.on{ border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(14,124,107,.08); }
.radio-card b{ display: block; font-size: 13.5px; font-weight: 600; }
.radio-card span{ font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; }
.radio-card .rc-dot{
  position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff;
}
.radio-card.on .rc-dot{ border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; }

.pay-opt{
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-m); background: #fff;
  cursor: pointer; transition: all .2s var(--ease);
}
.pay-opt:hover{ border-color: var(--brand); }
.pay-opt.on{ border-color: var(--brand); background: var(--brand-soft); }
.pay-opt .po-icon{ width: 38px; height: 38px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.pay-opt.on .po-icon{ background: #fff; }
.pay-opt svg{ width: 19px; height: 19px; }
.pay-opt b{ font-size: 13.5px; }
.pay-opt span{ display: block; font-size: 11.5px; color: var(--muted); }
.pay-opt .po-check{ margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; color: transparent; }
.pay-opt.on .po-check{ border-color: var(--brand); background: var(--brand); color: #fff; }
.pay-opt .po-check svg{ width: 11px; height: 11px; }

.order-mini{ display: flex; flex-direction: column; gap: 16px; }
.mini-item{ display: flex; gap: 14px; align-items: center; }
.mini-img{ width: 58px; height: 48px; border-radius: var(--r-s); overflow: hidden; background: #edf1ee; flex: none; }
.mini-img img{ width: 100%; height: 100%; object-fit: cover; }
.mini-info{ flex: 1; min-width: 0; }
.mini-info b{ display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info span{ font-size: 11.5px; color: var(--muted); }
.mini-price{ font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.summary-card{ position: sticky; top: 112px; }

/* ---------------- Pay ---------------- */

.pay-layout{ display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.pay-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 34px; }
.pay-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pay-head .pay-amount{ font-family: var(--font-display); font-size: 40px; color: var(--accent); line-height: 1; }
.pay-head .pay-amount i{ font-style: normal; font-size: 18px; margin-right: 2px; }
.pay-head .pay-label{ font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.pay-head .countdown{ text-align: right; }
.countdown b{ display: block; font-family: var(--font-mono); font-size: 20px; color: var(--ink); letter-spacing: .04em; }
.countdown span{ font-size: 11.5px; color: var(--muted); }

.pay-body{ display: grid; grid-template-columns: 1fr 220px; gap: 32px; padding-top: 28px; align-items: center; }
.qr-wrap{ display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; background: #fbfbf8; border: 1px solid var(--line); border-radius: var(--r-m); }
.qr-canvas{ width: 188px; height: 188px; background: #fff; padding: 10px; border-radius: 8px; box-shadow: var(--sh-s); }
.qr-hint{ font-size: 12px; color: var(--muted); text-align: center; line-height: 1.7; }
.qr-hint b{ color: var(--ink); }
.pay-redirect{ display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fbfbf8; border: 1px solid var(--line); border-radius: var(--r-m); }
.pay-redirect .pr-icon{ width: 46px; height: 46px; flex: none; border-radius: var(--r-s); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.pay-redirect .pr-copy b{ font-size: 15px; }
.pay-redirect .pr-copy p{ margin-top: 8px; font-size: 12.5px; line-height: 1.9; color: var(--muted); }
.pay-side{ display: flex; flex-direction: column; gap: 14px; }
.pay-tabs{ display: flex; flex-direction: column; gap: 10px; }
.pay-tab{
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-m);
  border: 1px solid var(--line-2); background: #fff; cursor: pointer; transition: all .2s var(--ease);
}
.pay-tab.on{ border-color: var(--brand); background: var(--brand-soft); }
.pay-tab .pt-icon{ width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.pay-tab.on .pt-icon{ background: #fff; }
.pay-tab svg{ width: 18px; height: 18px; }
.pay-tab b{ font-size: 13px; }
.pay-tab span{ display: block; font-size: 11px; color: var(--muted); }
.pay-tab .pt-dot{ margin-left: auto; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; }
.pay-tab.on .pt-dot{ border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; }

.pay-note{ font-size: 11.5px; color: var(--muted-2); line-height: 1.7; margin-top: 8px; }
.secure-flag{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
  padding: 6px 12px; border-radius: var(--r-full); background: var(--accent-soft);
  color: var(--accent); font-size: 11.5px;
}
.pay-foot{ display: flex; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

.order-info{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 24px; }
.order-info h4{ font-size: 14px; font-weight: 650; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.info-row{ display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; padding: 7px 0; color: var(--muted); }
.info-row b{ color: var(--ink-2); font-weight: 500; text-align: right; word-break: break-all; }
.info-row .mono{ font-size: 12px; }

/* ---------------- Success ---------------- */

.success-wrap{ max-width: 720px; margin: 56px auto 0; text-align: center; }
.success-icon{
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
  animation: pop .6s var(--ease) both;
}
.success-icon svg{ width: 40px; height: 40px; }
@keyframes pop{ from{ transform: scale(.7); opacity: 0; } to{ transform: none; opacity: 1; } }
.success-title{ font-size: 28px; font-weight: 700; margin-top: 24px; letter-spacing: -.01em; }
.success-sub{ font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.success-amount{ font-family: var(--font-display); font-size: 40px; color: var(--accent); margin-top: 18px; }
.success-amount i{ font-style: normal; font-size: 18px; }
.order-code{ display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 16px; border-radius: var(--r-full); background: rgba(255,255,255,.8); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.success-actions{ display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

.timeline{ margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 28px 32px; text-align: left; }
.tl-item{ display: flex; gap: 18px; position: relative; padding-bottom: 22px; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{ content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 1px; background: var(--line); }
.tl-item:last-child::before{ display: none; }
.tl-dot{ width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; margin-top: 3px; flex: none; position: relative; z-index: 1; }
.tl-dot.on{ background: var(--brand); border-color: var(--brand); }
.tl-body b{ font-size: 13.5px; display: block; }
.tl-body span{ font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

/* ---------------- Orders ---------------- */

.order-list{ display: flex; flex-direction: column; gap: 18px; }
.order-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.oc-head{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 16px 24px; background: rgba(246,247,244,.6); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.oc-head .oc-id{ font-family: var(--font-mono); color: var(--ink-2); }
.oc-status{ margin-left: auto; font-size: 12.5px; font-weight: 600; }
.st-pending{ color: var(--accent); }
.st-paid{ color: var(--brand); }
.st-done{ color: var(--muted); }
.st-cancelled{ color: var(--muted-2); }
.oc-body{ padding: 8px 24px; }
.oc-item{ display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.oc-item:last-child{ border-bottom: 0; }
.oc-item .mini-img{ width: 72px; height: 58px; }
.oc-item .oi-name{ flex: 1; min-width: 0; }
.oc-item .oi-name a{ font-size: 13.5px; font-weight: 600; }
.oc-item .oi-name a:hover{ color: var(--brand); }
.oc-item .oi-name span{ display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.oc-item em{ font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.oc-item .oi-price{ font-family: var(--font-display); font-size: 15px; }
.oc-foot{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.oc-foot .foot-total{ margin-right: auto; font-size: 12.5px; color: var(--muted); }
.oc-foot .foot-total b{ font-family: var(--font-display); font-size: 20px; color: var(--accent); font-weight: 400; }

/* ---------------- About ---------------- */

.about-hero{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 48px 0 24px; }
.about-hero h1{ font-size: clamp(30px, 3.6vw, 44px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; margin-top: 18px; }
.about-hero p{ font-size: 14.5px; color: var(--muted); line-height: 1.95; margin-top: 18px; max-width: 560px; }
.about-media{ border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-m); aspect-ratio: 4/3.3; }
.about-media img{ width: 100%; height: 100%; object-fit: cover; }

.stat-grid{ display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-cell{ padding: 30px 24px; border-right: 1px solid var(--line); }
.stat-cell:last-child{ border-right: 0; }
.stat-cell b{ display: block; font-family: var(--font-display); font-size: 34px; color: var(--ink); letter-spacing: .01em; }
.stat-cell b i{ font-style: normal; font-size: 15px; color: var(--brand); margin-left: 2px; }
.stat-cell span{ font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }

.cap-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cap-card{ padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); transition: all .25s var(--ease); }
.cap-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-m); }
.cap-card .cap-icon{ width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.cap-card svg{ width: 20px; height: 20px; }
.cap-card h4{ font-size: 16px; margin-top: 18px; }
.cap-card p{ font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 8px; }

.contact-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.contact-card{ padding: 26px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.contact-card .cc-icon{ width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.contact-card svg{ width: 18px; height: 18px; }
.contact-card h5{ font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 14px; letter-spacing: .04em; }
.contact-card b{ display: block; font-size: 15px; margin-top: 4px; font-weight: 600; }

.company-list{ display: grid; grid-template-columns: repeat(2,1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: #fff; }
.company-cell{ padding: 20px 26px; border-bottom: 1px solid var(--line); }
.company-cell:nth-child(odd){ border-right: 1px solid var(--line); }
.company-cell:last-child{ border-bottom: 0; }
.company-cell span{ font-size: 12px; color: var(--muted); display: block; }
.company-cell b{ font-size: 14px; font-weight: 600; margin-top: 3px; display: block; }

/* ---------------- Toast / misc ---------------- */

.toast{
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  background: rgba(16,28,34,.94); color: #f2f6f3;
  padding: 12px 22px; border-radius: var(--r-s); font-size: 13px;
  box-shadow: var(--sh-m); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 200; display: flex; align-items: center; gap: 8px;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
.toast svg{ width: 16px; height: 16px; color: #7fe3cd; }

.reveal{ opacity: 0; transform: translateY(16px); animation: reveal .75s var(--ease) forwards; }
@keyframes reveal{ to{ opacity: 1; transform: none; } }

.back-link{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.back-link:hover{ color: var(--brand); }
.back-link svg{ width: 14px; height: 14px; }

/* ---------------- 细节修正 ---------- */

.price-row{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1100px){
  .cart-grid{ grid-template-columns: 1fr 300px; }
  .checkout-grid{ grid-template-columns: 1fr 330px; }
  .p-grid{ grid-template-columns: repeat(3,1fr); }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .detail-grid{ gap: 36px; }
}

@media (max-width: 900px){
  .nav-toggle{ display: grid; margin-left: auto; }
  .header-search{ display: none; }
  .main-nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    padding: 12px 24px 18px; background: #fbfcf9;
    border-bottom: 1px solid var(--line); box-shadow: var(--sh-m);
  }
  .main-nav.open{ display: flex; }
  .main-nav a{ padding: 12px; border-radius: var(--r-s); }
  .main-nav a.active::after{ display: none; }
  .main-nav a.active{ background: var(--brand-soft); }

  .header-inner{ gap: 14px; }
  .header-cart{ margin-left: 0; }

  .hero-in{ grid-template-columns: 1fr; gap: 32px; padding: 48px 40px 0; }
  .hero-copy{ padding-bottom: 0; }
  .hero-visual{ display: none; }
  .hero-stats{ margin-top: 32px; padding-bottom: 48px; gap: 28px; }

  .split{ grid-template-columns: 1fr; gap: 32px; }
  .about-hero{ grid-template-columns: 1fr; gap: 32px; }
  .detail-grid{ grid-template-columns: 1fr; }
  .gallery{ position: static; }
  .cart-grid{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .summary-card{ position: static; }
  .pay-layout{ grid-template-columns: 1fr; }
  .pay-body{ grid-template-columns: 1fr; }
  .pay-card{ padding: 26px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .promise-inner{ grid-template-columns: 1fr 1fr; }
  .promise-item{ border-bottom: 1px solid var(--line); }
  .cap-grid{ grid-template-columns: 1fr 1fr; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .stat-cell{ border-bottom: 1px solid var(--line); }
  .contact-grid{ grid-template-columns: 1fr; }
  .highlight-list{ grid-template-columns: 1fr; }
  .company-list{ grid-template-columns: 1fr; }
  .company-cell:nth-child(odd){ border-right: 0; }
}

@media (max-width: 680px){
  .container{ width: calc(100% - 32px); }
  .section{ padding: 48px 0; }
  .p-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .cat-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-in{ padding: 40px 24px 0; }
  .hero-title{ font-size: 30px; }
  .hero-stats{ flex-wrap: wrap; gap: 20px 32px; }
  .cta-band{ padding: 36px 28px; }
  .section-head{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-title{ font-size: 26px; }
  .page-title{ font-size: 27px; }
  .cart-item{
    grid-template-columns: 20px 72px 1fr;
    grid-template-areas: "chk img info" "chk img qty" "chk img sub";
    gap: 8px 12px;
    padding: 16px;
  }
  .cart-item > .check{ grid-area: chk; }
  .ci-img{ grid-area: img; width: 72px; height: 64px; }
  .ci-info{ grid-area: info; padding-right: 30px; }
  .qty-sm{ grid-area: qty; justify-self: start; }
  .ci-price{ display: none; }
  .ci-sub{ grid-area: sub; text-align: left; font-size: 16px; }
  .ci-del{ position: absolute; top: 12px; right: 12px; }
  .form-grid{ grid-template-columns: 1fr; }
  .radio-row{ grid-template-columns: 1fr; }
  .footer-inner{ padding: 44px 0 32px; }
  .oc-head{ gap: 12px; }
  .oc-status{ margin-left: 0; }
  .buy-row .btn{ flex: 1 1 100%; }
  .tabs{ overflow-x: auto; }
}