/* 2026 industrial editorial refresh */
:root { --bg:#f4f0e7; --paper:#eee7dc; --ink:#171713; --forest:#34453c; --muted:#6d6a62; --line:rgba(23,23,19,.17); --bronze:#a46737; --display:"Iowan Old Style",Baskerville,Georgia,serif; --body:"Avenir Next","Gill Sans","PingFang SC",sans-serif; }
@view-transition { navigation:auto; }
@keyframes catalog-page-enter {
  from { opacity:.72; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes catalog-page-exit {
  from { opacity:1; }
  to { opacity:.82; }
}
@keyframes catalog-dialog-enter {
  from { opacity:.72; transform:translateY(8px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes catalog-dialog-exit {
  from { opacity:1; transform:translateY(0) scale(1); }
  to { opacity:0; transform:translateY(5px) scale(.994); }
}
@keyframes catalog-backdrop-enter {
  from { background:rgba(10,12,11,0); }
  to { background:rgba(10,12,11,.7); }
}
::view-transition-old(root){animation:catalog-page-exit var(--motion-fast) ease-in both}
::view-transition-new(root){animation:catalog-page-enter var(--motion-base) var(--ease-out) both}
body { font-family:var(--body); }
h1,h2,h3 { font-family:var(--display); letter-spacing:-.03em; }
.container { width:min(1180px,calc(100% - 48px)); }
.site-nav { height:82px; background:rgba(244,240,231,.95); }
.brand { display:inline-flex; align-items:center; min-height:44px; font-family:var(--display); font-size:1.06rem; }
.lang-button,.catalog-menu { border-color:var(--line); border-radius:0; }
.lang-button { min-width:92px; min-height:40px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:.64rem; letter-spacing:.23em; }
.eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
.catalog-hero { padding:clamp(44px,5vw,64px) 0 34px; }
.catalog-hero.container {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.7fr);
  grid-template-areas:
    "eyebrow intro"
    "title intro";
  gap:12px 64px;
  align-items:end;
}
.catalog-hero .eyebrow { grid-area:eyebrow; }
.catalog-hero h1 {
  grid-area:title;
  max-width:720px;
  margin:0;
  font-size:clamp(3rem,4.8vw,4.4rem);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.catalog-hero p {
  grid-area:intro;
  max-width:500px;
  margin:0;
  font-size:1rem;
  line-height:1.65;
  text-wrap:pretty;
}
.category-grid { margin-top:32px; }
.category-card { min-height:340px; }
.category-copy { padding:32px; }
.category-card h2 { font-size:2.25rem; }
.category-image img,.product-card img { background:#eee7dc; }
.product-card {
  background:rgba(255,255,255,.25);
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) var(--ease-out);
}
.product-card:hover {
  transform:translateY(-3px);
  border-color:rgba(23,23,19,.28);
  box-shadow:0 1px 2px rgba(46,35,23,.035),0 4px 14px rgba(46,35,23,.055);
}
.product-card img { object-fit:cover; }
.product-info { padding:20px; }
.product-meta-line { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.product-status { display:inline-flex; align-items:center; gap:7px; color:#9b651f; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.product-status::before,.status-dot { content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#c68a32; box-shadow:0 0 0 4px rgba(198,138,50,.12); }
.product-status.confirmed { color:var(--forest); }
.product-status.confirmed::before { background:#587466; }
.product-info h3 { margin-top:12px; font-family:var(--display); font-size:1.4rem; }
.review-banner { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; margin-top:32px; padding:22px; border:1px solid rgba(164,103,55,.35); background:rgba(164,103,55,.06); }
.review-banner strong { font-family:var(--display); font-size:1.35rem; font-weight:400; }
.review-banner p { margin:4px 0 0; color:var(--muted); font-size:.82rem; line-height:1.6; }
.review-banner + .category-grid { margin-top:22px; }
.category-switcher + .review-banner { margin-top:24px; }
.product-empty { grid-column:1/-1; padding:60px 24px; border:1px solid var(--line); color:var(--muted); text-align:center; }
.product-trace { margin:24px 0; border-top:1px solid var(--line); }
.product-trace div { display:grid; grid-template-columns:110px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.78rem; }
.product-trace span { color:var(--muted); }
.dialog { background:var(--bg); }
.dialog[open] { animation:catalog-dialog-enter var(--motion-slow) var(--ease-out) both; }
.dialog[open]::backdrop { animation:catalog-backdrop-enter var(--motion-base) ease-out both; }
.dialog[data-closing="true"] { animation:catalog-dialog-exit var(--motion-fast) ease-in both; }
.dialog-copy h2 { font-size:2.8rem; line-height:.96; }
.dialog-close { border-radius:0; }
.inquiry-link { background:var(--bronze); }

html[lang="zh-CN"] body {
  font-family:"Avenir Next","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
  font-synthesis:none;
}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 {
  font-family:"Songti SC",STSong,"Noto Serif CJK SC","Source Han Serif SC",SimSun,serif;
  letter-spacing:.01em;
}
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .nav-main { letter-spacing:.05em; }
html[lang="zh-CN"] .catalog-hero h1 { line-height:1.08; }

@media(max-width:900px){
  .catalog-hero.container{
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "intro";
    gap:16px;
  }
  .catalog-hero p{margin-top:0}
}
@media(max-width:620px){
  .container{width:min(100% - 32px,1180px)}
  .site-nav{min-height:72px}
  .lang-button{min-height:44px}
  .catalog-menu{width:44px;height:44px}
  .catalog-hero{padding:42px 0 30px}
  .catalog-hero h1{font-size:clamp(2.45rem,11vw,3rem)}
  .category-grid{margin-top:28px}
  .category-card{grid-template-columns:1fr;min-height:0}
  .category-copy{min-height:240px;padding:24px}
  .category-image{height:280px}
  .category-card p{display:block}
  .product-grid{grid-template-columns:1fr}
  .product-info{padding:18px}
  .review-banner{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}
}
