/* Meadow Fashion — 全站设计稿 CSS（与画布设计稿 1:1 还原） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@300;400;500;700&display=swap');

:root {
  --paper: #FAF5EB;
  --ink: #1A1A1A;
  --moss: #5C5448;
  --stone: #CFC4A8;
  --beige: #E5DDC8;
  --vermilion: #C53A2A;
  --hairline: #CFC4A8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }

img { max-width: 100%; display: block; }

.serif { font-family: 'Noto Serif JP', 'Noto Sans JP', serif; }
.tight { font-family: 'Inter Tight', 'Inter', sans-serif; letter-spacing: 0; }
.jplight { font-family: 'Noto Serif JP', serif; font-weight: 400; }

.container { width: 100%; }

/* === Header / Masthead === */
.masthead { width: 100%; background: var(--paper); }
.ann-bar {
  background: var(--ink); color: var(--paper);
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 80px; font-size: 11px; letter-spacing: 2px;
  font-family: 'Inter', sans-serif; font-weight: 500;
}
.ann-bar .left { display: flex; gap: 24px; }

.nav-main {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 80px; background: var(--paper);
}
.nav-main .brand-line { font-size: 11px; letter-spacing: 3px; color: var(--moss); font-weight: 500; }
.nav-main .brand-word { text-align: center; }
.nav-main .brand-word h1 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 38px; letter-spacing: 12px; color: var(--ink); margin: 0;
}
.nav-main .brand-word p {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 9px; letter-spacing: 4px; color: var(--moss); margin-top: 2px;
}
.nav-main .nav-links { display: flex; gap: 36px; }
.nav-main .nav-links a {
  font-size: 12px; letter-spacing: 2px; color: var(--ink); font-weight: 500;
  padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.nav-main .nav-links a:hover, .nav-main .nav-links a.active { border-bottom-color: var(--vermilion); }
.nav-main .menu-btn { font-size: 12px; letter-spacing: 3px; font-weight: 500; }
.hairline { height: 1px; background: var(--stone); }

/* === Footer === */
.site-footer { background: var(--ink); color: var(--paper); padding: 80px 80px 40px; }
.foot-top { display: flex; justify-content: space-between; gap: 60px; }
.foot-brand h2 {
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: 56px; letter-spacing: 14px; margin-bottom: 24px;
}
.foot-brand .tag {
  font-family: 'Noto Serif JP', serif; font-weight: 500;
  font-size: 22px; line-height: 1.5; max-width: 420px; margin-bottom: 24px;
}
.foot-brand .addr { font-size: 13px; }
.foot-brand .addr .ja { font-size: 11px; color: var(--stone); margin-top: 2px; }
.foot-cols { display: flex; gap: 60px; }
.foot-col h4 {
  font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--vermilion);
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col li { font-size: 13px; }
.foot-col a:hover { color: var(--vermilion); }
.foot-bottom {
  border-top: 1px solid #5C5448;
  margin-top: 56px; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 2px; color: var(--moss);
}
.foot-bottom .legal { display: flex; gap: 32px; }

/* === Buttons === */
.btn-ink {
  background: var(--ink); color: var(--paper);
  padding: 16px 32px; font-size: 13px; letter-spacing: 2px;
  display: inline-flex; align-items: center; gap: 16px;
  border-radius: 2px; transition: opacity 0.2s;
}
.btn-ink:hover { opacity: 0.85; }
.btn-vermilion {
  background: var(--vermilion); color: var(--paper);
  padding: 16px 32px; font-size: 13px; letter-spacing: 2px;
  display: inline-flex; align-items: center; gap: 16px;
  border-radius: 2px; transition: opacity 0.2s;
}
.btn-vermilion:hover { opacity: 0.9; }
.btn-ghost {
  border: 1px solid var(--ink); color: var(--ink);
  padding: 16px 32px; font-size: 13px; letter-spacing: 2px;
  display: inline-flex; align-items: center;
  border-radius: 2px; transition: all 0.2s;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* === Stamp (kicker) === */
.stamp {
  display: inline-block;
  background: var(--vermilion); color: var(--paper);
  padding: 6px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
}

/* === Utility === */
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--vermilion);
}

/* === 产品卡（首页 / 产品列表页 / 详情页相关推荐 共用） ===
   说明：这组样式原先只写在 page-home.css 里，导致产品列表页（只加载 page-products.css）
   完全拿不到卡片样式，卡片退化成裸文本。这里提到全站共用，统一一份。
   图区用 aspect-ratio 固定 3:4：卡片必须是块级布局，flex 列布局下 aspect-ratio 不生效。 */
.prod-card { display: block; background: #FFFFFF; transition: transform 0.2s; }
.prod-card:hover { transform: translateY(-4px); }

.prod-img {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  color: var(--paper); font-size: 14px; letter-spacing: 1px; font-weight: 500;
}
.prod-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.prod-img.placeholder-tone-warm { background: var(--beige); color: var(--ink); }
.prod-img.placeholder-tone-ink { background: var(--ink); }
.prod-img.placeholder-tone-beige { background: var(--stone); color: var(--ink); }
.prod-img.placeholder-tone-vermilion { background: var(--vermilion); }
.prod-img.placeholder-tone-olive { background: var(--moss); }
.prod-img.placeholder-tone-moss { background: var(--moss); }

.prod-info { padding: 16px 4px; display: flex; flex-direction: column; gap: 6px; }
.prod-cat { font-size: 9px; color: var(--moss); font-weight: 500; }
.prod-name { font-size: 17px; font-weight: 500; color: var(--ink); }
.prod-name-jp { font-size: 11px; color: var(--moss); }
.prod-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; font-size: 12px; }
.prod-moq { font-weight: 500; }
.prod-sku { font-size: 10px; color: var(--moss); letter-spacing: 1px; }
.prod-detail { font-size: 10px; letter-spacing: 1px; color: var(--moss); white-space: nowrap; }

/* === 関連ページ内链条（全站页脚上方，2026-10-07 追加）
   目的：让「中国 縫製工場 / 中国 アパレル OEM / 広東 縫製工場」等
   关键词落地页从每个页面都有一次带关键词锚文本的入口。 === */
.seo-links {
  background: var(--paper); border-top: 1px solid var(--stone);
  padding: 36px 80px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px 30px;
}
.seo-links-k {
  flex: 0 0 100%;
  font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--moss);
  margin-bottom: 6px;
}
.seo-links a {
  font-size: 12px; color: var(--moss);
  border-bottom: 1px solid var(--stone); padding-bottom: 2px;
}
.seo-links a:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }

/* === Responsive === */
@media (max-width: 1024px) {
  .nav-main, .ann-bar, .site-footer, .foot-bottom { padding-left: 32px; padding-right: 32px; flex-wrap: wrap; gap: 16px; }
  .nav-main .nav-links { gap: 18px; }
  .seo-links { padding: 28px 32px; gap: 10px 20px; }
}