/* skinat 官网：skin(at) 品牌样式，自写、不依赖框架。手机优先，900px 以上左侧分类栏。
   两条轨道：黑色展示带（首页主视觉、页脚）；白底购物页，用色块分区，主按钮是青柠描边胶囊。
   取值来自设计系统 skinat 的 tokens。字体都由本站提供：FK Display 管英文和数字，思源黑体（/_www/fonts/noto-sans-sc.css）管汉字。 */
@font-face { font-family: "FK Display"; src: url("/_www/fonts/FKDisplay-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --ink: #000000;
  --red: #ff0000;
  --paper: #ffffff;
  --canvas: #f2f2f2;
  --muted: #595959;
  --line: #d9d9d9;
  --violet: #8f00ff;
  --lime: #c5ec72;
  --peach: #ffb697;
  --mist: #c7ced8;
  --tint-blue: #dae5ec;
  --tint-sand: #e4e1dc;
  --tint-sage: #dee4dc;
  --tint-lilac: #dedce4;
  --tint-rose: #e4dcdc;
  --tint-steel: #dce0e4;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --radius-8: 8px;
  --radius-20: 20px;
  --radius-12: 12px;
  --wrap-max: 1180px;
  --side-width: 220px;
  --control-h: 40px;
  --control-h-lg: 48px;
  --control-h-sm: 32px;
  --rule: 1px;
  --outline: 1.5px;
  --control-h-xl: 56px;
  --font-display: "FK Display", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 14px/1.6 var(--font-display); }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
img { max-width: 100%; height: auto; border: 0; }
h1 { font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -.01em; margin: 0 0 var(--space-8); }
h2 { font-size: 24px; line-height: 1.2; font-weight: 400; margin: 0; }
em { font-style: normal; background: var(--lime); padding: 0 3px; }
.eyebrow { display: block; font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--space-16); }

/* 顶栏 */
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); padding-top: var(--space-14); padding-bottom: var(--space-14); }
.logo img, .logo svg { display: block; height: 28px; width: auto; }
.search { display: flex; flex: 1 1 260px; max-width: 460px; }
.search input { flex: 1; min-width: 0; height: var(--control-h); padding: 0 var(--space-16); border: var(--outline) solid var(--ink); border-right: 0; border-radius: var(--radius-20) 0 0 var(--radius-20); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search button { height: var(--control-h); padding: 0 var(--space-20); border: var(--outline) solid var(--ink); background: var(--lime); color: var(--ink); border-radius: 0 var(--radius-20) var(--radius-20) 0; font: inherit; font-size: 15px; cursor: pointer; }
.search button:hover { background: var(--ink); color: var(--paper); }
.search.big { max-width: 520px; margin: var(--space-24) 0 0; }
.search.big input, .search.big button { height: var(--control-h-lg); font-size: 16px; }
.search.big input { border-radius: 24px 0 0 24px; }
.search.big button { border-radius: 0 24px 24px 0; padding: 0 var(--space-24); }
.links { margin-left: auto; color: var(--muted); white-space: nowrap; font-size: 13px; }
.links span { margin: 0 var(--space-6); }
.links .who { margin: 0 var(--space-4) 0 0; color: var(--ink); }
.links form.logout { display: inline; }
.links form.logout button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.links form.logout button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 首页主视觉：show band */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: var(--radius-20); padding: var(--space-48) var(--space-32); margin-bottom: var(--space-12); }
.hero .eyebrow { color: var(--mist); margin-bottom: var(--space-16); }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.02em; margin: 0; white-space: pre-line; }
.hero .sub { margin: var(--space-16) 0 0; font-size: 15px; color: var(--mist); }
.hero .search input { border-color: var(--paper); }
.hero .search button { border-color: var(--lime); }
.hero .search button:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hero-art { position: absolute; right: var(--space-32); top: var(--space-32); bottom: var(--space-32); display: none; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.hero-art .row { display: flex; gap: var(--space-16); }
.hero-art .sa-shape { height: 56px; color: var(--paper); }
.hero-art .row.is-lime .sa-shape { color: var(--lime); }
.hero-art .sa-shape.is-solid { color: var(--red); }
@media (min-width: 900px) { .hero-art { display: flex; } }

/* 登录页 */
body.login { background: var(--mist); }
.login-page { max-width: 400px; margin: var(--space-48) auto; padding: 0 var(--space-16); }
.login-page .logo { display: block; margin-bottom: var(--space-24); }
.login-page .logo img, .login-page .logo svg { height: 40px; margin: 0 auto; }
.login-page .block { margin: 0; padding: var(--space-32); background: var(--paper); border: var(--outline) solid var(--ink); border-radius: var(--radius-20); }
.login-page .block h1 { font-size: 24px; }
.login-page label { display: block; margin: var(--space-16) 0 var(--space-6); font-size: 14px; }
.login-page input { width: 100%; height: var(--control-h-lg); padding: 0 var(--space-14); border: var(--outline) solid var(--ink); border-radius: var(--radius-12); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.login-page input:focus { outline: 2px solid var(--violet); outline-offset: 2px; }
.login-page button { width: 100%; height: var(--control-h-lg); margin-top: var(--space-24); border: var(--outline) solid var(--ink); border-radius: 24px; background: var(--lime); color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.login-page button:hover { background: var(--ink); color: var(--paper); }
.login-page .msg { margin: var(--space-12) 0 0; padding: var(--space-10) var(--space-14); border-radius: var(--radius-12); font-size: 14px; }
.login-page .msg.err { background: var(--peach); color: var(--ink); }
.login-page .msg.info { background: var(--canvas); color: var(--ink); }
.login-page .links { display: flex; justify-content: space-between; margin: var(--space-16) 0 0; font-size: 14px; }
.login-page .links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.login-page .links a:hover { color: var(--violet); }
.login-page .hint { margin: var(--space-6) 0 0; font-size: 12px; text-align: right; opacity: .6; }

/* 主体 */
.main { display: block; padding-top: var(--space-16); padding-bottom: var(--space-48); }
main { min-width: 0; }
@media (min-width: 900px) {
  .main { display: grid; grid-template-columns: var(--side-width) 1fr; gap: var(--space-32); align-items: start; }
  .main.nonav { grid-template-columns: 1fr; }
}

/* 侧栏分类 */
.side { margin-bottom: var(--space-12); }
.allcats { background: var(--canvas); border-radius: var(--radius-12); overflow: hidden; }
.allcats > summary { padding: var(--space-10) var(--space-14); color: var(--ink); background: var(--mist); font-size: 15px; cursor: pointer; }
.catnav details { border-top: 1px solid var(--line); }
.catnav details:first-child { border-top: 0; }
.catnav summary { padding: var(--space-8) var(--space-14); cursor: pointer; font-size: 15px; }
.catnav ul { list-style: none; margin: 0; padding: 0 0 var(--space-8) 30px; }
.catnav li { padding: 2px 0; font-size: 13px; }
.catnav li a { color: var(--muted); }
.catnav li a:hover { color: var(--ink); }
@media (min-width: 900px) { .side { position: sticky; top: var(--space-8); max-height: calc(100vh - 16px); overflow: auto; } }

/* 面包屑 */
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 var(--space-12); overflow-wrap: anywhere; }
.crumbs .sep { margin: 0 var(--space-6); }

/* 区块：白页上不画框，用留白和标题分段 */
.block { margin: var(--space-40) 0 0; }
.block-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-20); }
.block-head h1 { margin: 0; }
.block-head > a { display: inline-flex; align-items: center; height: var(--control-h-sm); padding: 0 var(--space-14); border: var(--outline) solid var(--ink); border-radius: var(--radius-20); font-size: 13px; }
.block-head > a:hover { background: var(--lime); text-decoration: none; }
.empty { color: var(--muted); padding: var(--space-8) 0; }
.notice { background: var(--mist); border-radius: var(--radius-12); padding: var(--space-14) var(--space-16); color: var(--ink); }
.notice p { margin: 0 0 var(--space-4); }
.notice p:last-child { margin: 0; }

/* 分类头 */
.cate-head { display: flex; gap: var(--space-24); align-items: flex-start; background: var(--tint-blue); border-radius: var(--radius-20); padding: var(--space-24); }
.cate-logo { width: 120px; flex: none; }
.cate-head .count { margin: 0 0 var(--space-12); }
.subcats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.subcats a { display: inline-block; padding: 5px var(--space-14); border-radius: var(--radius-20); background: var(--paper); font-size: 13px; }
.subcats a:hover { background: var(--lime); text-decoration: none; }
.desc { color: var(--muted); overflow-wrap: anywhere; }

/* 产品网格：缩略图坐在一块色垫上，相邻色垫换色 */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24) var(--space-12); grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--w, 150px) + 20px), 44%), 1fr)); }
.grid li { min-width: 0; }
.grid .thumb { display: block; padding: var(--space-10); border-radius: var(--radius-12); background: var(--tint-blue); }
.grid li:nth-child(6n+2) .thumb { background: var(--tint-sand); }
.grid li:nth-child(6n+3) .thumb { background: var(--tint-sage); }
.grid li:nth-child(6n+4) .thumb { background: var(--tint-lilac); }
.grid li:nth-child(6n+5) .thumb { background: var(--tint-rose); }
.grid li:nth-child(6n) .thumb { background: var(--tint-steel); }
.grid .thumb img { display: block; margin: 0 auto; border-radius: var(--radius-8); }
.grid .name { display: block; margin-top: var(--space-8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid .sub { display: block; font-size: 12px; color: var(--muted); }
.grid .sub a { color: var(--muted); }

/* 分页 */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); margin-top: var(--space-32); }
.pager a, .pager strong, .pager span { min-width: var(--control-h); height: var(--control-h); padding: 0 var(--space-14); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-20); background: var(--paper); font-weight: 400; }
.pager a:hover { border-color: var(--ink); text-decoration: none; }
.pager strong { background: var(--lime); color: var(--ink); border: var(--outline) solid var(--ink); }
.pager span { border: 0; background: none; min-width: 0; padding: 0 var(--space-4); }

.sort select { height: var(--control-h-sm); font: inherit; font-size: 13px; }
.tags a { display: inline-block; margin: 0 var(--space-6) var(--space-6) 0; padding: 3px var(--space-12); border-radius: var(--radius-20); background: var(--canvas); font-size: 13px; }
.tags a:hover { background: var(--lime); text-decoration: none; }
.related { font-size: 13px; }
.related a { display: inline-block; margin: 0 var(--space-10) var(--space-4) 0; }

/* 产品页 */
.product { display: grid; gap: var(--space-32); grid-template-columns: 1fr; }
@media (min-width: 700px) { .product { grid-template-columns: 370px 1fr; } }
.pimg { padding: var(--space-20); border-radius: var(--radius-20); background: var(--tint-sand); }
.pimg img { display: block; width: 330px; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-12); }
.meta { border-collapse: collapse; width: 100%; table-layout: fixed; }
.meta th { width: 7.5em; text-align: left; vertical-align: top; font-weight: 400; color: var(--muted); padding: var(--space-6) var(--space-6) var(--space-6) 0; white-space: nowrap; }
.meta td { padding: var(--space-6) 0; overflow-wrap: anywhere; }
.meta select { width: 100%; max-width: 360px; height: var(--control-h-sm); font: inherit; font-size: 13px; }
.pinfo, .pimg { min-width: 0; }
.mats label { display: inline-block; margin-right: var(--space-12); cursor: pointer; }
.colors span { display: inline-flex; align-items: center; gap: var(--space-4); margin: 0 var(--space-10) var(--space-4) 0; font-size: 12px; }
.colors i { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; }
.price strong { font-size: 40px; line-height: 1; font-weight: 400; }
.buy { display: inline-flex; align-items: center; gap: var(--space-12); height: var(--control-h-xl); margin-top: var(--space-20); padding: 0 var(--space-32); border: var(--outline) solid var(--ink); background: var(--lime); color: var(--ink); font-size: 18px; border-radius: 28px; }
.buy:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.buy .sa-arrow { width: 24px; height: 19px; }
.hint { color: var(--muted); font-size: 12px; margin: var(--space-8) 0 0; }
.detail .desc { margin-top: var(--space-16); border-top: 1px solid var(--line); padding-top: var(--space-16); }
.notfound { text-align: center; padding: var(--space-48) var(--space-12); }

/* 首页分类目录：一类一张色卡 */
.catdir { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.catdir section { padding: var(--space-16); border-radius: var(--radius-12); background: var(--tint-blue); }
.catdir section:nth-child(6n+2) { background: var(--tint-sand); }
.catdir section:nth-child(6n+3) { background: var(--tint-sage); }
.catdir section:nth-child(6n+4) { background: var(--tint-lilac); }
.catdir section:nth-child(6n+5) { background: var(--tint-rose); }
.catdir section:nth-child(6n) { background: var(--tint-steel); }
.catdir h3 { display: inline-block; font-size: 18px; font-weight: 400; margin: 0 0 var(--space-8); padding-bottom: 2px; border-bottom: var(--rule) solid var(--ink); }
.catdir ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.catdir li { padding: 3px 0; }

/* 页脚：show band */
.foot { margin-top: var(--space-48); background: var(--ink); color: var(--mist); font-size: 12px; padding: var(--space-56) 0 var(--space-32); }
.foot .wrap { display: grid; gap: var(--space-24); }
.foot .line { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--paper); }
.foot .shapes { display: flex; gap: var(--space-16); }
.foot .shapes .sa-shape { height: 32px; color: var(--paper); }
.foot .shapes .sa-shape.is-solid { color: var(--red); }
.foot a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.foot p { margin: var(--space-4) 0; }

/* 图形与箭头（品牌图形集，内联 SVG） */
.sa-arrow { display: block; width: 30px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.sa-shape { display: block; height: 48px; width: auto; color: var(--ink); overflow: visible; }
.sa-shape path, .sa-shape line { fill: none; stroke: currentColor; }
.sa-shape.is-solid path { fill: currentColor; stroke: none; }