/* ============================================================
   STONEROOT — 首页视觉系统 v2
   按 moonmagic.com 在 1600px 视口下的实测数据还原版式
   ------------------------------------------------------------------
   实测值（参考站 1600px 宽）：
     容器 1545px · 公告 43px · 头部 59px（字号 15/500/字距 1px）
     首屏 945px · 商品区 931px（padding 60）· 宝石区 694px
     分类区 996px（padding 50/20，4 列 ×387px，间距 13px，方块）
     信任条 176px（底 #f5f4f0，标题 18px/500）
     多图横幅 634px（文字在右半，左对齐，白色 65px，mb 30px）
     图文块 881 / 716 / 695px（标题 65px，内边距 65-110px）
     评价 810px（标题 65px，mb 55px，横向卡片）
     订阅 437px（居中，标题 55px）· 页脚 704px
     标题统一 65px / 字重 400 / 无字距 / 无大小写转换
   ================================================================== */

:root {
  /* 字体：参考站是 futura-pt（Adobe 商业授权），换成 Jost（SIL OFL 开源可商用，Futura 复刻） */
  --font-display: "Jost", "Futura", "Century Gothic", "PingFang SC", sans-serif;
  --font-body: "Jost", "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  --ink: #000;
  --ink-soft: #2f2f2f;
  --ink-mute: #6b6b6b;
  --paper: #fff;
  --bone: #f5f4f0;      /* 实测：信任条 / 图文块底色 */
  --bone-2: #faf8f4;
  --blush: #f2d9d1;
  --news-bg: #f7f8f9;
  --line: #e2e0dc;
  --gold: #b8935a;
  --gold-dark: #8f6f3d;
  --radius: 0px;
  --wrap: 1545px;       /* 实测容器宽 */
  --gut: 20px;
  --h2: 65px;           /* 实测大标题 */
  --h2-sm: 55px;        /* 实测订阅/社媒标题 */
}

body { font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--paper); }

/* 标题统一：65px / 400 / 无字距 / 无大小写转换（参考站就是这样，大写是文案里手打的） */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); margin: 0; }
h1 { font-size: var(--h2); line-height: 1.08; }
h2 { font-size: var(--h2); line-height: 1.08; }
h2.is-sm { font-size: var(--h2-sm); }
h3 { font-size: 20px; line-height: 1.25; }

.mm-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mm-eyebrow { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.mm-small-label { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }

/* 按钮：参考站为方角、全大写 */
.btn, .mm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 34px; border-radius: 0;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover, .mm-btn:hover { background: transparent; color: var(--ink); }
.mm-btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.mm-btn--light:hover { background: transparent; color: #fff; }
.mm-btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.mm-btn--outline-light:hover { background: #fff; color: var(--ink); }
.mm-btn--sm { min-height: 40px; padding: 0 22px; font-size: 11.5px; }

/* ---------- 公告 / 头部（实测 43 / 59px） ---------- */
.announcement { background: #000; color: rgba(255,255,255,.92); }
.announcement__inner { min-height: 43px; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; }
.announcement__msg { font-size: 12px; }
.announcement__social a { font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; }
.trust-ticker { display: none; }   /* 参考站没有这条滚动条 */

.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header__inner { min-height: 59px; }
.brand__name { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 1px; }
.brand__tag { font-size: 8.5px; letter-spacing: 2px; }
.nav__link { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 1px; text-transform: none; }

/* ---------- 1. 首屏（实测 945px） ---------- */
.mm-hero { position: relative; height: 945px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #1a1a1a; }
.mm-hero__media { position: absolute; inset: 0; }
.mm-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.34); }
.mm-hero__inner { position: relative; z-index: 2; width: 526px; max-width: 100%; color: #fff; }
.mm-hero h1 { color: #fff; margin-bottom: 32px; }
.mm-hero__sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 34px; }
.mm-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mm-hero__badges { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.mm-hero__badges span { font-family: var(--font-display); font-size: 11.5px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.94); display: flex; align-items: center; gap: 7px; }
.mm-hero__badges svg { width: 15px; height: 15px; }
@media (max-width: 989px) { .mm-hero { height: auto; padding: 90px 0; } }

/* ---------- 2. 商品区（实测 931px，padding 60，标题左对齐） ---------- */
.mm-products-sec { padding: 60px 0; }
.mm-products-sec .mm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.mm-products-sec .mm-head h2 { margin: 0; }
.mm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 39px) / 4); gap: 13px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.mm-rail::-webkit-scrollbar { height: 3px; }
.mm-rail::-webkit-scrollbar-thumb { background: var(--ink); }
.mm-rail > * { scroll-snap-align: start; }
@media (max-width: 1199px) { .mm-rail { grid-auto-columns: calc((100% - 26px) / 3); } }
@media (max-width: 899px) { .mm-rail { grid-auto-columns: calc((100% - 13px) / 2); } }

/* 商品卡 */
.mm-card { text-align: center; }
.mm-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bone); margin-bottom: 16px; }
.mm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.mm-card:hover .mm-card__media img { transform: scale(1.04); }
.mm-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 400; margin: 0 0 5px; }
.mm-card__meta { font-size: 13px; color: var(--ink-mute); margin: 0 0 7px; }
.mm-card .price { font-family: var(--font-display); font-size: 15px; margin: 0; }
.mm-card .price del { color: var(--ink-mute); margin-right: 7px; }
.mm-card__quick { margin-top: 14px; }
.mm-card__quick .btn, .mm-card__quick .add_to_cart_button { width: 100%; min-height: 42px; background: transparent; color: var(--ink); border: 1px solid var(--ink); font-size: 11.5px; }
.mm-card__quick .btn:hover, .mm-card__quick .add_to_cart_button:hover { background: var(--ink); color: #fff; }

/* ---------- 3. 宝石区（实测 694px，标题居中 mb 20px） ---------- */
.mm-gems-sec { padding: 40px 0 60px; }
.mm-gems-sec .mm-head { text-align: center; margin-bottom: 20px; }
.mm-gems-sec .mm-head p { max-width: 70ch; margin: 14px auto 0; font-size: 16px; color: var(--ink-soft); }
.mm-gem-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 91px) / 8); gap: 13px; overflow-x: auto; padding: 22px 0 8px; }
.mm-gem { text-align: center; }
.mm-gem__meaning { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin: 0 0 3px; min-height: 21px; }
.mm-gem__name { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; }
.mm-gem__media { aspect-ratio: 1/1; overflow: hidden; background: var(--bone); margin-bottom: 12px; }
.mm-gem__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mm-gem:hover .mm-gem__media img { transform: scale(1.06); }
.mm-gem__tags { font-size: 11.5px; letter-spacing: .6px; color: var(--ink-mute); margin: 0; }
@media (max-width: 1399px) { .mm-gem-rail { grid-auto-columns: calc((100% - 39px) / 4); } }
@media (max-width: 749px) { .mm-gem-rail { grid-auto-columns: calc((100% - 13px) / 2); } }

/* ---------- 4. 分类 bento（实测 996px，4 列 ×387 方块，gap 13px，标题左对齐 mb 50px） ---------- */
.mm-bento-sec { padding: 50px 0 20px; }
.mm-bento-sec .mm-head { margin-bottom: 50px; }
.mm-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 387px; gap: 13px; }
.mm-bento__cell { position: relative; overflow: hidden; background: #111; color: #fff; display: block; }
.mm-bento__cell--tall { grid-row: span 2; }
.mm-bento__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mm-bento__cell:hover img { transform: scale(1.05); }
.mm-bento__cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 45%, rgba(0,0,0,.55)); }
.mm-bento__body { position: relative; z-index: 2; height: 100%; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.mm-bento__body h3 { color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
.mm-bento__body p { font-size: 14.5px; color: rgba(255,255,255,.88); margin: 0; }
@media (max-width: 1199px) { .mm-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; } .mm-bento__cell--tall { grid-row: span 1; } }
@media (max-width: 649px) { .mm-bento { grid-template-columns: 1fr; grid-auto-rows: 260px; } }

/* ---------- 5. 信任条（实测 176px，底 #f5f4f0，标题 18px/500） ---------- */
.mm-conf { background: var(--bone); }
.mm-conf__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.mm-conf__item { padding: 30px 22px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 176px; }
.mm-conf__t { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.mm-conf__d { font-size: 14px; color: var(--ink-mute); margin: 0; }
@media (max-width: 899px) { .mm-conf__grid { grid-template-columns: repeat(2, 1fr); } .mm-conf__item { min-height: 130px; } }
@media (max-width: 549px) { .mm-conf__grid { grid-template-columns: 1fr; } }

/* ---------- 6. 多图横幅（实测 634px，文字在右半，左对齐，65px 白） ---------- */
.mm-mhero { position: relative; height: 634px; overflow: hidden; background: #111; }
.mm-mhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-mhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); }
.mm-mhero__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.mm-mhero__content { width: 485px; max-width: 100%; color: #fff; }
.mm-mhero__content h2 { color: #fff; margin-bottom: 30px; }
.mm-mhero__content p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 28px; }
.mm-mhero--left .mm-mhero__inner { justify-content: flex-start; }
@media (max-width: 899px) { .mm-mhero { height: auto; padding: 90px 0; } .mm-mhero__content { width: 100%; } }

/* ---------- 7. 图文块（实测 881 / 716 / 695px） ---------- */
.mm-iwt { padding: 65px 0 110px; }
.mm-iwt--even { padding: 70px 0; }
.mm-iwt--bone { background: var(--bone); }
.mm-iwt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mm-iwt--flip .mm-iwt__media { order: 2; }
.mm-iwt__media img { width: 100%; height: auto; display: block; }
.mm-iwt__body h2 { margin-bottom: 26px; }
.mm-iwt__body > p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; margin: 0 0 30px; }
.mm-iwt__list { display: grid; gap: 22px; margin: 0 0 30px; }
.mm-iwt__list .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 6px; }
.mm-iwt__list h3 { font-size: 17px; margin: 0 0 5px; }
.mm-iwt__list p { font-size: 14.5px; color: var(--ink-mute); margin: 0; }
@media (max-width: 899px) { .mm-iwt, .mm-iwt--even { padding: 50px 0; } .mm-iwt__grid { grid-template-columns: 1fr; gap: 30px; } .mm-iwt--flip .mm-iwt__media { order: 0; } }

/* ---------- 8. 需求四宫格（实测 407px，4 列 gap 13，标签 20px/500/字距 2px） ---------- */
.mm-need-sec { padding: 0 0 20px; }
.mm-need-sec .mm-head { margin-bottom: 26px; }
.mm-need { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.mm-need__cell { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #111; display: block; color: #fff; }
.mm-need__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mm-need__cell:hover img { transform: scale(1.05); }
.mm-need__cell::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.mm-need__body { position: relative; z-index: 2; height: 100%; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.mm-need__body h3 { color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
.mm-need__body p { font-size: 13.5px; color: rgba(255,255,255,.88); margin: 0; }
@media (max-width: 989px) { .mm-need { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 549px) { .mm-need { grid-template-columns: 1fr; } }

/* ---------- 9. 工艺条（实测 508px） ---------- */
.mm-craft { padding: 0 0 70px; }
.mm-craft__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mm-craft__item { text-align: center; }
.mm-craft__item .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 10px; }
.mm-craft__item h3 { font-size: 18px; margin: 0 0 8px; }
.mm-craft__item p { font-size: 14.5px; color: var(--ink-mute); margin: 0; }
@media (max-width: 749px) { .mm-craft__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- 10. 评价（实测 810px，标题 mb 55px，横向卡片） ---------- */
.mm-reviews { padding: 60px 0 80px; }
.mm-reviews .mm-head { margin-bottom: 55px; }
.mm-reviews__rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 39px) / 4); gap: 13px; overflow-x: auto; padding-bottom: 6px; }
.mm-review { background: var(--bone); padding: 30px 28px; display: flex; flex-direction: column; }
.mm-review__stars { color: var(--gold); font-size: 13px; letter-spacing: 3px; margin-bottom: 14px; }
.mm-review__q { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 20px; flex: 1; }
.mm-review__who { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; margin: 0; }
.mm-review__who span { display: block; font-weight: 400; color: var(--ink-mute); letter-spacing: .4px; margin-top: 4px; text-transform: none; }
@media (max-width: 1199px) { .mm-reviews__rail { grid-auto-columns: calc((100% - 26px) / 3); } }
@media (max-width: 749px) { .mm-reviews__rail { grid-auto-columns: calc((100% - 13px) / 2); } }

/* ---------- 11. 社媒九宫格（实测 1191px，6×3） ---------- */
.mm-ig { padding: 74px 0 0; }
.mm-ig .mm-head { text-align: center; margin-bottom: 38px; }
.mm-ig .mm-head h2 { font-size: var(--h2-sm); }
.mm-ig .mm-head p { font-size: 16px; color: var(--ink-soft); margin: 14px 0 0; }
.mm-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.mm-ig__cell { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bone); }
.mm-ig__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mm-ig__cell:hover img { transform: scale(1.07); }
@media (max-width: 989px) { .mm-ig__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 12. 订阅（实测 437px，居中，标题 55px mb 20px） ---------- */
.mm-news { background: var(--news-bg); padding: 90px 0; text-align: center; }
.mm-news h2 { font-size: var(--h2-sm); margin-bottom: 20px; }
.mm-news p { max-width: 68ch; margin: 0 auto 26px; font-size: 15.5px; color: var(--ink-soft); }
.mm-news__form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 14px; }
.mm-news__form input { flex: 1; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 15px; border-radius: 0; }
.mm-news__form .btn { min-height: 48px; }
.mm-news__note { font-size: 12.5px; color: var(--ink-mute); margin: 0; }
@media (max-width: 549px) { .mm-news__form { flex-direction: column; } }

/* ---------- 页脚（实测 704px） ---------- */
.site-footer { background: #000; color: rgba(255,255,255,.68); padding: 62px 0 26px; }
.site-footer h3 { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.site-footer a { color: rgba(255,255,255,.68); }
.site-footer a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 44px; padding-top: 20px; font-size: 12px; }
.footer__social a { color: rgba(255,255,255,.68); }

/* ---------- 中文适配（汉字比拉丁宽，标题收一号；中文没有大小写） ---------- */
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: none;
}
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2 { font-size: 54px; }
html[lang="zh-CN"] h2.is-sm, html[lang="zh-CN"] .mm-ig .mm-head h2, html[lang="zh-CN"] .mm-news h2 { font-size: 46px; }
html[lang="zh-CN"] .mm-small-label, html[lang="zh-CN"] .mm-bento__body h3, html[lang="zh-CN"] .mm-need__body h3 { letter-spacing: 1px; text-transform: none; }
html[lang="zh-CN"] .mm-eyebrow, html[lang="zh-CN"] .mm-btn, html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .mm-gem__name, html[lang="zh-CN"] .mm-review__who, html[lang="zh-CN"] .nav__link,
html[lang="zh-CN"] .site-footer h3, html[lang="zh-CN"] .mm-iwt__list .n, html[lang="zh-CN"] .mm-hero__badges span {
  text-transform: none; letter-spacing: .6px;
}
@media (max-width: 749px) {
  html[lang="zh-CN"] h1, html[lang="zh-CN"] h2 { font-size: 34px; }
  html[lang="zh-CN"] h2.is-sm, html[lang="zh-CN"] .mm-news h2 { font-size: 30px; }
}

/* ============================================================
   版块高度对齐（按参考站 1600px 实测值锁定）
   参考站的版块高度由大图撑起来，我们的商品图偏方偏矮，
   直接用 min-height 锁到实测值，内容居中，视觉节奏才一致。
   ============================================================ */
.mm-products-sec { min-height: 931px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.mm-gems-sec     { min-height: 694px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.mm-bento-sec    { min-height: 996px; box-sizing: border-box; }
.mm-iwt          { min-height: 881px; box-sizing: border-box; display: flex; align-items: center; }
.mm-iwt--even    { min-height: 716px; }
.mm-iwt--even.mm-iwt--bone:last-of-type { min-height: 695px; }
.mm-craft        { min-height: 508px; display: flex; align-items: center; box-sizing: border-box; }
.mm-reviews      { min-height: 810px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.mm-ig           { min-height: 1191px; display: flex; flex-direction: column; box-sizing: border-box; }
.mm-need-sec     { min-height: 407px; box-sizing: border-box; }

/* 图文块：图片容器定高，图片裁切填充，高度就不会被原图比例带跑 */
.mm-iwt__media { overflow: hidden; height: 640px; }
.mm-iwt__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-iwt--even .mm-iwt__media { height: 500px; }
@media (max-width: 899px) { .mm-iwt__media, .mm-iwt--even .mm-iwt__media { height: auto; } }

/* 商品卡图：参考站是 4:5，不是方块 */
.mm-card__media, ul.products li.product .product-card__media { aspect-ratio: 4/5; }
.mm-gem__media { aspect-ratio: 4/5; }

/* 九宫格：6 列时每格约 255px，三行刚好 ~1191px */
.mm-ig__grid { flex: 1; }
.mm-ig__cell { aspect-ratio: 1/1; }

@media (max-width: 989px) {
  .mm-products-sec, .mm-gems-sec, .mm-bento-sec, .mm-iwt, .mm-iwt--even,
  .mm-craft, .mm-reviews, .mm-ig, .mm-need-sec { min-height: 0; }
}

/* ============================================================
   头部重做（按参考站实测值）
   公告栏 43px：左＝‹ › 箭头 + 14px/400/字距 2.8px 轮播；右＝14px/400/字距 0.7px 实用链接
   导航栏 59px：左＝超宽字距字标；中＝16px/400/capitalize/字距 normal；右＝4 个图标
   ============================================================ */
.announcement { background: #000; color: #fff; }
.announcement__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 43px; width: 100%; padding: 0 20px;
}
.announcement__left { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.announcement__rot { flex: 0 1 auto !important; min-width: 320px; }
.announcement__arrow {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer; opacity: .75; padding: 0;
}
.announcement__arrow:hover { opacity: 1; }
.announcement__arrow svg { width: 15px; height: 15px; }
.announcement__rot { position: relative; height: 43px; }
.announcement__msg {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 400;
  letter-spacing: 2.8px; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .35s ease;
}
.announcement__msg.is-active { opacity: 1; }
.announcement__right { display: flex; align-items: center; gap: 0; flex: none; }
.announcement__right a {
  display: inline-flex; align-items: center; height: 43px; padding: 0 12px;
  font-size: 14px; font-weight: 400; letter-spacing: .7px; color: #fff; white-space: nowrap;
}
.announcement__right a:hover { opacity: .72; }
@media (max-width: 1199px) { .announcement__right a:nth-child(-n+2) { display: none; } }
@media (max-width: 899px) { .announcement__right { display: none; } .announcement__msg { letter-spacing: 1.6px; font-size: 12px; } }

/* 字标：超宽字距（参考站是 155×18 的图形字标，这里用文字等效还原） */
.brand__name {
  font-family: var(--font-display) !important;
  font-size: 16px !important; font-weight: 400 !important;
  letter-spacing: 9px !important; text-transform: uppercase;
  margin-right: -9px;   /* 抵消最后一个字母的字距，视觉居中 */
}
.brand__tag { font-size: 8px !important; letter-spacing: 4.6px !important; margin-top: 3px; }

/* 导航：16px / 400 / capitalize / 正常字距 */
.nav__list { gap: 0; }
.nav__link {
  font-family: var(--font-display) !important;
  font-size: 16px !important; font-weight: 400 !important;
  letter-spacing: normal !important; text-transform: capitalize !important;
  padding: 0 14px !important; height: 59px; display: inline-flex; align-items: center;
}
.nav__link:hover { opacity: .6; }
.nav__item--sale .nav__link { color: #a3293b; }   /* 参考站那个红色的 LAST CHANCE */

/* 图标区 */
.header-actions .icon-btn svg { width: 20px; height: 20px; }
.header-actions { gap: 4px; }
html[lang="zh-CN"] .brand__name { letter-spacing: 5px !important; margin-right: -5px; }
html[lang="zh-CN"] .nav__link { font-size: 15px !important; }

/* ============================================================
   下拉 mega menu
   参考站实测：面板全宽 1585px / 高 403px / 白底 / 顶部 1px 边框 #e5e5e7
              左侧 3 列链接（列标题大写 13px，链接 16px，行高 30px）
              右侧 2 张图横幅（各 390×401，底部压大写标签）
   ============================================================ */
.site-header { position: relative; overflow: visible; }
/* 关键：li 默认是 position:relative，会把全宽面板裁进导航项里，这里改回 static，
   让面板的定位祖先变成 .site-header，才能做到整屏宽 */
.nav__item--mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  width: auto; min-width: 0; max-width: none;   /* 压掉 main.css 里旧的 min-width:560px */
  margin: 0; padding: 0;
  background: #fff; border-top: 1px solid #e5e5e7;
  display: none; grid-template-columns: 1fr 780px;
  min-height: 403px; box-sizing: border-box;
  z-index: 60;
}
.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega,
.nav__item--mega.is-open > .mega { display: grid; }

/* 让 li 不裁剪面板 */
.nav__list, .nav__item { overflow: visible; }

/* 左：3 列链接 */
.mega__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; padding: 40px 30px 40px 20px; align-content: start;
}
.mega__col-t {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: .8px; text-transform: uppercase; color: var(--ink);
  margin: 0 0 16px;
}
.mega__col ul { display: grid; gap: 0; }
.mega__col li { margin: 0; }
.mega__col a {
  display: block; padding: 5px 0; font-size: 16px; font-weight: 400;
  letter-spacing: normal; color: var(--ink); line-height: 1.4;
}
.mega__col a:hover { opacity: .55; }

/* 右：2 张横幅 */
.mega__banners { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mega__banner { position: relative; overflow: hidden; display: block; background: var(--bone); min-height: 403px; }
.mega__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.mega__banner:hover img { transform: scale(1.04); }
.mega__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); }
.mega__banner span {
  position: absolute; left: 26px; bottom: 24px; z-index: 2;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; color: #fff;
}

/* 小屏不出 mega（改用汉堡菜单） */
@media (max-width: 1240px) { .mega { display: none !important; } }

/* 中文：列标题不收字距，链接字号略小 */
html[lang="zh-CN"] .mega__col-t { font-size: 12.5px; letter-spacing: .4px; text-transform: none; }
html[lang="zh-CN"] .mega__col a { font-size: 15px; }
html[lang="zh-CN"] .mega__banner span { font-size: 13px; letter-spacing: .8px; text-transform: none; }

/* ============================================================
   文化时间线轮播（参照参考站「10 YEARS」那块：顶部标签条 + 横向滚动卡片）
   ============================================================ */
.mm-tl { background: var(--bone); }
.mm-tl__strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mm-tl__strip span {
  display: flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 0 14px; text-align: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink);
}
.mm-tl__rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 294px; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 22px 20px 26px;
  scrollbar-width: thin;
}
.mm-tl__rail::-webkit-scrollbar { height: 3px; }
.mm-tl__rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); }
.mm-tl__card {
  position: relative; scroll-snap-align: start;
  background: var(--blush); padding: 20px 20px 16px;
  display: flex; flex-direction: column; min-height: 313px;
}
.mm-tl__label {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  margin: 0 0 12px; min-height: 30px; line-height: 1.3;
}
.mm-tl__media { aspect-ratio: 7/5; overflow: hidden; margin-bottom: 12px; }
.mm-tl__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.mm-tl__card:hover .mm-tl__media img { transform: scale(1.05); }
.mm-tl__cap { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin: auto 0 0; text-align: center; }
@media (max-width: 749px) {
  .mm-tl__strip { grid-template-columns: repeat(2, 1fr); }
  .mm-tl__strip span { min-height: 48px; font-size: 11.5px; }
  .mm-tl__rail { grid-auto-columns: 240px; }
}
html[lang="zh-CN"] .mm-tl__label { text-transform: none; letter-spacing: .4px; font-size: 13.5px; }
html[lang="zh-CN"] .mm-tl__strip span { text-transform: none; letter-spacing: .4px; }