/* 首页专用视觉层，公共样式和内页保持既有接口。 */
.ml-home {
  --mh-dark: #17191c; --mh-gray: #f3f3f3; --mh-red: #cc121c;
  --mh-muted: #696969; --mh-white: #fff; --mh-line: #dedede;
  --mh-width: 1240px; --mh-gutter: 22px;
  --mh-stage: radial-gradient(ellipse at 50% 69%, #555b65 0%, #272c34 43%, #14171c 78%);
  background: var(--mh-white); color: var(--mh-dark);
}
.ml-home h1, .ml-home h2, .ml-home h3 { letter-spacing: -.035em; color: inherit; }
.ml-home p { color: inherit; }
.ml-home a { text-decoration: none; }
.ml-home button { font: inherit; }
.ml-home img { display: block; max-width: 100%; }
.ml-home :focus-visible { outline: 3px solid var(--mh-red); outline-offset: 5px; }
.ml-home .mh-container { width: min(var(--mh-width), calc(100% - var(--mh-gutter) * 2)); margin-inline: auto; }
.ml-home .mh-skip { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--mh-white); }
.ml-home .mh-skip:focus { top: 10px; }
.ml-home main { scroll-margin-top: 72px; }
.ml-home main:focus { outline: none; }
.ml-home .ml-header { background: var(--mh-dark); border: 0; }
.ml-home .ml-header__inner { height: 72px; gap: 22px; }
.ml-home .ml-header__logo img { width: 126px; height: 42px; }
.ml-home .ml-header__nav { gap: 30px; }
.ml-home .ml-header__nav-link { font-size: 14px; font-weight: 500; }
.ml-home .ml-header__nav-link--active::after { background: var(--mh-red); height: 3px; bottom: -22px; }
.ml-home .ml-header__cta { font-size: 13px; gap: 14px; border: 0; padding: 0; white-space: nowrap; background: transparent; }
.ml-home .ml-header__cta:hover { color: var(--mh-white); background: transparent; text-decoration: underline; }
.ml-home .ml-header__drawer { inset: 72px 0 0; background: var(--mh-dark); border-color: #696969; }
.ml-home .ml-header__drawer-link { color: var(--mh-white); border-color: #35373b; }
.ml-home .ml-header__drawer-link--active { color: var(--mh-white); }
.ml-home .ml-header__drawer-cta { display: inline-block; margin-top: 28px; color: var(--mh-white); }
.ml-home .mh-hero { position: relative; overflow: hidden; color: var(--mh-white); background: var(--mh-stage); }
.ml-home .mh-hero__copy { position: relative; z-index: 4; text-align: center; padding: 40px 20px 0; }
.ml-home .mh-hero__company { font-size: clamp(42px, 4.3vw, 64px); font-weight: 400; line-height: 1.4; text-wrap: balance; margin: 0 0 16px; }
.ml-home .mh-hero h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.3; font-weight: 650; text-wrap: balance; margin: 0; }
.ml-home .mh-hero__sub { font-size: 13px; color: #d7d9dd; letter-spacing: .14em; margin-top: 18px; }
.ml-home .mh-hero__sub span { display: block; font-size: 10px; letter-spacing: .1em; margin-top: 7px; }
.ml-home .mh-hero__stage { position: relative; height: 278px; width: min(1100px, 100%); margin: 30px auto 0; }
.ml-home .mh-hero__stage::before { content: ""; position: absolute; inset: 35% -40% -30%; background: radial-gradient(ellipse, #b9bec729, #07090e00 66%); }
.ml-home .mh-hero__stage img { position: absolute; object-fit: contain; filter: drop-shadow(0 25px 15px #0007); }
.ml-home .mh-hero__soup { width: 42%; height: 72%; left: 0; bottom: 16%; z-index: 1; }
.ml-home .mh-hero__steamer { width: 48%; height: 100%; left: 26%; bottom: 0; z-index: 3; }
.ml-home .mh-hero__saucepan { width: 44%; height: 67%; right: 0; bottom: 18%; z-index: 2; }
.ml-home .mh-hero__bottom { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding-block: 32px; font-size: 11px; color: #c1c4cb; }
.ml-home .mh-hero__bottom > span { max-width: 58%; }
.ml-home .mh-hero__bottom a { color: var(--mh-white); display: flex; gap: 18px; align-items: center; }
.ml-home .mh-section { padding: 56px 0; }
.ml-home .mh-featured, .ml-home .mh-series { background: var(--mh-gray); }
.ml-home .mh-heading { margin-bottom: 30px; }
.ml-home .mh-heading__en { font-size: 28px; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 7px; }
.ml-home .mh-heading h2 { font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0; }
.ml-home .mh-heading--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-home .mh-heading--center { text-align: center; }
.ml-home .mh-heading__line { display: block; width: 42px; height: 3px; margin: 23px auto 0; background: var(--mh-red); }
.ml-home .mh-carousel__controls { display: flex; align-items: center; gap: 8px; }
.ml-home .mh-carousel__controls[hidden] { display: none; }
.ml-home .mh-carousel__count { display: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mh-muted); margin-right: 20px; }
.ml-home .mh-arrow { width: 44px; height: 44px; border: 1px solid #ccc; color: var(--mh-dark); border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; transition: background .2s, color .2s; }
.ml-home .mh-arrow:hover:not(:disabled) { color: var(--mh-white); background: var(--mh-dark); border-color: var(--mh-dark); }
.ml-home .mh-arrow:disabled { opacity: .3; cursor: default; }
.ml-home .mh-carousel { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.ml-home .mh-carousel::-webkit-scrollbar { display: none; }
.ml-home .mh-product { flex: 0 0 91%; min-width: 0; color: var(--mh-dark); scroll-snap-align: start; }
.ml-home .mh-product__image { position: relative; height: 274px; display: grid; place-items: center; overflow: hidden; }
.ml-home .mh-product__image--warm { background: #e9e5de; }
.ml-home .mh-product__image--gray { background: #dddfe0; }
.ml-home .mh-product__image--cool { background: #e4e7e9; }
.ml-home .mh-product__number { position: absolute; top: 15px; left: 18px; font-size: 11px; letter-spacing: .1em; color: var(--mh-muted); }
.ml-home .mh-product__image img { width: 82%; height: 85%; object-fit: contain; filter: drop-shadow(0 16px 12px #0002); transition: transform .4s; }
.ml-home .mh-product:hover img { transform: translateY(-6px); }
.ml-home .mh-product__caption { position: relative; width: 88%; min-height: 122px; padding: 21px 20px 18px; margin: -32px 0 0; background: var(--mh-white); }
.ml-home .mh-product__caption > span { display: block; color: var(--mh-muted); font-size: 10px; letter-spacing: .05em; }
.ml-home .mh-product__caption h3 { font-size: 19px; font-weight: 600; line-height: 1.5; margin: 7px 0 6px; }
.ml-home .mh-product__caption p { display: flex; justify-content: space-between; color: var(--mh-red); font-size: 12px; margin: 0; }
.ml-home .mh-series { padding-top: 10px; }
.ml-home .mh-series__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ml-home .mh-category { display: flex; flex-direction: column; align-items: center; padding: 22px 20px 30px; color: var(--mh-dark); border-bottom: 1px solid var(--mh-line); }
.ml-home .mh-category__visual { height: 155px; width: 100%; display: grid; place-items: center; margin-bottom: 15px; }
.ml-home .mh-category__visual svg { width: 250px; max-width: 100%; height: 145px; color: #777b80; transition: color .2s; }
.ml-home .mh-category__visual img { width: 240px; height: 145px; object-fit: contain; }
.ml-home .mh-category__en { font-size: 10px; color: var(--mh-muted); letter-spacing: .12em; }
.ml-home .mh-category h3 { font-size: 22px; font-weight: 550; margin: 9px 0 8px; }
.ml-home .mh-category p { font-size: 12px; color: var(--mh-muted); margin: 0; }
.ml-home .mh-category__link { font-size: 12px; margin-top: 21px; display: flex; gap: 28px; }
.ml-home .mh-category:hover .mh-category__link, .ml-home .mh-category:hover svg { color: var(--mh-red); }
.ml-home .mh-story { display: grid; grid-template-columns: 1fr; }
.ml-home .mh-story__visual { position: relative; min-height: 320px; display: grid; place-items: center; background: #dedbd5; padding: 65px 35px; overflow: hidden; }
.ml-home .mh-story__visual img { max-width: 92%; height: 240px; object-fit: contain; filter: drop-shadow(0 25px 14px #0003); }
.ml-home .mh-story__label { position: absolute; top: 28px; left: 25px; color: #69665f; font-size: 10px; letter-spacing: .14em; }
.ml-home .mh-story__note { position: absolute; bottom: 25px; left: 25px; font-size: 12px; color: #68645e; }
.ml-home .mh-story__copy { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #232427; color: var(--mh-white); padding: 54px 30px; text-align: center; }
.ml-home .mh-story__copy .mh-heading { margin-bottom: 25px; }
.ml-home .mh-story__text { font-size: 22px; line-height: 1.65; margin: 0 0 20px; font-weight: 500; }
.ml-home .mh-story__desc { font-size: 13px; line-height: 2; color: #c2c3c5; max-width: 360px; margin: 0 0 25px; }
.ml-home .mh-text-link { color: var(--mh-white); display: inline-flex; align-items: center; justify-content: space-between; gap: 55px; padding: 8px 0; border-bottom: 1px solid #888; font-size: 13px; }
.ml-home .mh-text-link:hover { border-color: var(--mh-red); }
.ml-home .mh-story__visual--steel { background: radial-gradient(ellipse at 50% 45%, #d9dce0, #bbbfc4); }
.ml-home .mh-story__visual--steel img { height: 300px; }
.ml-home .mh-story__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 25px; }
.ml-home .mh-story__tags span { color: #d6d6d6; border: 1px solid #5d5e60; padding: 5px 10px; font-size: 10px; }
.ml-home .mh-cooperation { text-align: center; }
.ml-home .mh-steps { list-style: none; padding: 0; margin: 40px 0; display: grid; grid-template-columns: 1fr; gap: 35px; text-align: left; }
.ml-home .mh-steps li { border-top: 1px solid var(--mh-line); padding-top: 24px; }
.ml-home .mh-steps li > span { font-size: 34px; font-weight: 300; color: #999; }
.ml-home .mh-steps h3 { font-size: 20px; font-weight: 550; margin: 15px 0 8px; }
.ml-home .mh-steps p { font-size: 13px; line-height: 1.8; color: var(--mh-muted); max-width: 270px; margin: 0; }
.ml-home .mh-button { display: inline-flex; justify-content: center; align-items: center; gap: 35px; border: 1px solid currentColor; border-radius: 40px; padding: 13px 27px; font-size: 13px; transition: background .2s, color .2s; }
.ml-home .mh-button--dark { color: var(--mh-white); background: var(--mh-dark); border-color: var(--mh-dark); }
.ml-home .mh-button--dark:hover { background: var(--mh-red); border-color: var(--mh-red); }
.ml-home .mh-button--light { color: var(--mh-white); background: transparent; }
.ml-home .mh-button--light:hover { color: var(--mh-red); background: var(--mh-white); border-color: var(--mh-white); }
.ml-home .mh-contact { color: var(--mh-white); background: var(--mh-red); padding: 48px 0; }
.ml-home .mh-contact__inner { display: flex; flex-direction: column; gap: 28px; }
.ml-home .mh-contact__en { font-size: 11px; letter-spacing: .2em; margin: 0 0 16px; }
.ml-home .mh-contact h2 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.4; font-weight: 500; margin: 0 0 13px; }
.ml-home .mh-contact p { font-size: 12px; color: #ffe0e1; }
.ml-home .mh-contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ml-home .mh-contact__phone { color: var(--mh-white); font-size: clamp(25px, 3vw, 36px); font-weight: 400; letter-spacing: -.02em; white-space: nowrap; }
.ml-home .mh-contact__phone span { font-size: 24px; margin-left: 12px; }
.ml-home .mh-footer { color: #b7b8ba; background: var(--mh-dark); padding: 48px 0 22px; }
.ml-home .mh-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 18px; }
.ml-home .mh-footer__brand { grid-column: 1 / -1; }
.ml-home .mh-footer__brand img { width: 144px; height: 48px; object-fit: contain; }
.ml-home .mh-footer__brand p { font-size: 12px; line-height: 1.9; margin-top: 20px; }
.ml-home .mh-footer h2 { color: var(--mh-white); font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.ml-home .mh-footer a { display: block; color: #b7b8ba; font-size: 12px; line-height: 2.2; }
.ml-home .mh-footer a:hover { color: var(--mh-white); }
.ml-home .mh-footer__bottom { border-top: 1px solid #38393c; margin-top: 38px; padding-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 10px; color: #929497; }
.ml-home .ml-fab { right: 14px; bottom: 18px; }
.ml-home .ml-fab__btn { width: 40px; height: 40px; border-radius: 50%; background: var(--mh-dark); color: var(--mh-white); border: 1px solid #ffffff55; }
.ml-home .ml-fab__btn--primary { background: var(--mh-red); border: 0; }
@media (max-width: 639px) {
  .ml-home .mh-hero__company span { display: block; }
  .ml-home .mh-hero h1 { font-size: clamp(28px, 7.5vw, 32px); }
  .ml-home .mh-heading--row .mh-heading__en { font-size: 20px; }
  .ml-home .mh-carousel__controls { gap: 4px; }
  .ml-home .mh-arrow { width: 40px; height: 40px; }
  .ml-home .ml-header__cta span { display: none; }
  .ml-home .ml-header__cta { width: 40px; height: 40px; justify-content: center; margin-left: auto; }
  .ml-home .ml-header__inner { gap: 14px; }
}
@media (min-width: 640px) {
  .ml-home { --mh-gutter: 36px; }
  .ml-home .mh-hero__copy { padding-top: 48px; }
  .ml-home .mh-hero__sub span { display: inline; margin-left: 24px; font-size: 12px; }
  .ml-home .mh-hero__stage { height: 380px; margin-top: 36px; }
  .ml-home .mh-section { padding-block: 72px; }
  .ml-home .mh-heading__en { font-size: 36px; }
  .ml-home .mh-heading h2 { font-size: 24px; }
  .ml-home .mh-carousel__count { display: inline; }
  .ml-home .mh-product { flex-basis: calc((100% - 22px) / 2); }
  .ml-home .mh-series { padding-top: 5px; }
  .ml-home .mh-series__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ml-home .mh-category { border-bottom: 0; padding-inline: 12px; }
  .ml-home .mh-category + .mh-category { border-left: 1px solid var(--mh-line); }
  .ml-home .mh-category__visual svg, .ml-home .mh-category__visual img { width: 100%; max-width: 240px; }
  .ml-home .mh-category__en { font-size: 8px; }
  .ml-home .mh-story { grid-template-columns: 1fr 1fr; }
  .ml-home .mh-story__visual { min-height: 450px; padding-inline: 20px; }
  .ml-home .mh-story--reverse .mh-story__visual { order: 2; }
  .ml-home .mh-story__copy { padding: 45px 24px; }
  .ml-home .mh-story__text { font-size: 20px; }
  .ml-home .mh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .ml-home .mh-contact__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 25px; }
  .ml-home .mh-contact__actions { align-items: flex-end; }
  .ml-home .mh-contact h2 { max-width: 380px; }
  .ml-home .mh-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .ml-home .mh-footer__brand { grid-column: auto; }
  .ml-home .mh-footer__bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .ml-home { --mh-gutter: 50px; }
  .ml-home .ml-header__inner { height: 82px; }
  .ml-home .ml-header__drawer { inset: 82px 0 0; }
  .ml-home main { scroll-margin-top: 82px; }
  .ml-home .ml-header__nav-link--active::after { bottom: -27px; }
  .ml-home .mh-hero__copy { padding-top: 42px; }
  .ml-home .mh-hero__sub { font-size: 14px; }
  .ml-home .mh-hero__stage { height: 370px; margin-top: 25px; }
  .ml-home .mh-hero__soup { width: 37%; left: 2%; bottom: 9%; height: 65%; }
  .ml-home .mh-hero__steamer { width: 41%; left: 30%; }
  .ml-home .mh-hero__saucepan { width: 39%; right: -1%; bottom: 11%; height: 64%; }
  .ml-home .mh-hero__bottom { font-size: 12px; padding-block: 25px; }
  .ml-home .mh-section { padding-block: 86px; }
  .ml-home .mh-heading { margin-bottom: 44px; }
  .ml-home .mh-product { flex-basis: calc((100% - 44px) / 3); }
  .ml-home .mh-product__image { height: 310px; }
  .ml-home .mh-product__caption { padding: 24px 25px 20px; min-height: 127px; }
  .ml-home .mh-product__caption h3 { font-size: 21px; }
  .ml-home .mh-series { padding-top: 10px; padding-bottom: 80px; }
  .ml-home .mh-category__visual { height: 185px; }
  .ml-home .mh-category__visual svg, .ml-home .mh-category__visual img { max-width: 290px; height: 170px; }
  .ml-home .mh-category__en { font-size: 10px; }
  .ml-home .mh-category h3 { font-size: 25px; }
  .ml-home .mh-story__visual { min-height: 470px; }
  .ml-home .mh-story__visual img { height: 300px; max-width: 80%; }
  .ml-home .mh-story__visual--steel img { height: 350px; }
  .ml-home .mh-story__label { top: 32px; left: 40px; }
  .ml-home .mh-story__note { bottom: 32px; left: 40px; }
  .ml-home .mh-story__copy { padding: 55px 70px; }
  .ml-home .mh-story__text { font-size: 26px; }
  .ml-home .mh-story__desc { font-size: 14px; }
  .ml-home .mh-steps { gap: 60px; margin-block: 55px 45px; }
  .ml-home .mh-contact { padding-block: 65px; }
  .ml-home .mh-contact h2 { max-width: none; }
  .ml-home .mh-footer { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-home *, .ml-home *::before, .ml-home *::after { transition: none; animation: none; scroll-behavior: auto; }
}

/* 首屏产品图册使用两排横向轨道，让全部实拍图保留可辨识的尺寸。 */
.ml-home .mh-gallery-wrap { width: min(1520px, calc(100% - 44px)); margin: 24px auto 0; }
.ml-home .mh-gallery__hint { display:flex; justify-content:space-between; gap:14px; font-size:12px; color:#c1c4cb; margin:0 0 14px; }
.ml-home .mh-gallery__hint span { font-size:11px; }
.ml-home .mh-gallery { display:grid; grid-template-rows:repeat(2, 180px); grid-auto-flow:column; grid-auto-columns:220px; gap:14px; overflow-x:auto; padding:4px 4px 16px; scroll-snap-type:x proximity; scrollbar-color:#7e858f #ffffff0d; scrollbar-width:thin; }
.ml-home .mh-gallery__item { margin:0; padding:12px; min-width:0; display:flex; flex-direction:column; align-items:center; background:linear-gradient(140deg,#ffffff0f,#ffffff03); border:1px solid #ffffff12; scroll-snap-align:start; }
.ml-home .mh-gallery__item img { position:static; width:100%; height:128px; object-fit:contain; filter:drop-shadow(0 8px 6px #0005); }
.ml-home .mh-gallery__item figcaption { margin-top:10px; font-size:11px; text-align:center; color:#e1e3e7; line-height:1.4; }
@media(max-width:767px) {
  .ml-home .mh-gallery-wrap { width:calc(100% - 24px); }
  .ml-home .mh-gallery__hint { flex-direction:column; gap:5px; }
  .ml-home .mh-gallery { grid-auto-columns:155px; grid-template-rows:repeat(2,160px); gap:10px; }
  .ml-home .mh-gallery__item img { height:105px; }
}
/* 三大系列共用展台：图片完整展示，较高的锅具居中，两侧留白。 */
.ml-home .mh-hero__collection { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 24px; width: min(1200px, calc(100% - 80px)); height: 410px; margin-top: 22px; }
.ml-home .mh-hero__series { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; min-width: 0; color: #fff; }
.ml-home .mh-hero__product { position: relative; width: 100%; height: 280px; display: grid; place-items: center; }
.ml-home .mh-hero__product::after { content: ''; position: absolute; bottom: 8px; width: 76%; height: 16px; background: #0008; border-radius: 50%; filter: blur(12px); z-index: -1; }
.ml-home .mh-hero__collection img { position: absolute; inset: 0; margin: auto; width: 95%; height: 92%; object-fit: contain; filter: drop-shadow(0 18px 12px #0006); transition: transform .35s ease; }
.ml-home .mh-hero__series--pot .mh-hero__product { height: 335px; }
.ml-home .mh-hero__series--basin img { width: 98%; height: 82%; }
.ml-home .mh-hero__series-name { display: flex; align-items: center; gap: 20px; margin-top: 14px; font-size: 17px; letter-spacing: .08em; }
.ml-home .mh-hero__series-name > span { font-size: 14px; color: #bbc0c8; }
.ml-home .mh-hero__series-en { margin-top: 7px; font-size: 9px; letter-spacing: .16em; color: #aeb4be; }
.ml-home .mh-hero__collection .mh-hero__item--back { inset: 0 0 auto auto; width: 70%; height: 75%; margin: 0; z-index: 1; }
.ml-home .mh-hero__collection .mh-hero__item--front { inset: auto auto 0 0; width: 74%; height: 70%; margin: 0; z-index: 2; }
.ml-home .mh-hero__series--pot .mh-hero__item--back { width: 73%; height: 96%; right: 0; }
.ml-home .mh-hero__series--pot .mh-hero__item--front { width: 67%; height: 57%; left: -5%; bottom: 0; }
@media (max-width: 767px) {
  .ml-home .mh-hero__collection { width: calc(100% - 24px); height: 230px; gap: 4px; margin-top: 18px; }
  .ml-home .mh-hero__product { height: 135px; }
  .ml-home .mh-hero__series--pot .mh-hero__product { height: 185px; }
  .ml-home .mh-hero__series-name { font-size: 12px; letter-spacing: 0; gap: 5px; margin-top: 10px; }
  .ml-home .mh-hero__series-name > span { font-size: 10px; }
  .ml-home .mh-hero__series-en { font-size: 7px; letter-spacing: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-home .mh-hero__collection img { transition: none; }
  .ml-home .mh-hero__series:hover img { transform: none; }
}
