/* Deprecated wrapper: keep for backward compatibility. */
@import url("./base.css?v=1.0.1");
/* shared base only */
:root {
    --container-max: 100%;
    --container-padding: 1rem;
    --menu-width: 100%;
    --content-max: 100%;
    --header-stick-threshold: 80px;
    --global-content-max-width: 1260px;
    --section-spacing-y: 4rem;
    --section-spacing-x: 0;
    --details-slider-padding: 235px;

    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-17: 1.0625rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;

    --font-size-caption: var(--font-size-12);
    --font-size-small: var(--font-size-14);
    --font-size-body: var(--font-size-16);
    --font-size-lead: var(--font-size-18);
    --font-size-subtitle: var(--font-size-20);
    --font-size-section-title: var(--font-size-24);
    --font-size-title: var(--font-size-32);
    --font-size-display: var(--font-size-36);
    --font-size-hero: var(--font-size-48);
    --font-size-hero-xl: var(--font-size-64);

    --color-base-primary: #641122;
    --color-base-accent: #E6D7BE;
    --color-base-accent-muted: rgba(210, 204, 193, 0.3);
    --color-base-surface-accent: #EFE8D8;
    --color-base-text: #242424;
    --color-base-text-muted: rgba(24, 24, 24, 0.8);
    --color-base-text-dark-muted: rgba(24, 24, 24, 0.9);
    --color-base-text-tertiary: #666;
    --color-base-menu-overlay: rgba(230, 215, 190, 0.9);
    --color-base-surface: #fcfbf4;
    --color-base-surface-alt: #fafaf9;
    --color-base-surface-warm: #FDFBF7;
    --color-base-surface-overlay: rgba(252, 251, 244, 0.2);
    --color-base-surface-muted: rgba(252, 251, 244, 0.4);
    --color-base-border: #E0E0E0;
    --color-base-accent-overlay: rgba(230, 215, 190, 0.6);
    --color-base-dark: #181818;
    --color-base-dark-hover: #3a3a3a;
    --color-base-black: #000000;
    --color-base-error: #c94a4a;
    --color-base-white: #fff;
    --color-base-on-dark-muted: rgba(250, 250, 249, 0.75);
    --color-base-on-dark-subtle: rgba(250, 250, 249, 0.5);
    --color-base-on-dark-strong: rgba(250, 250, 249, 0.85);
    --color-base-border-on-dark: rgba(255, 255, 255, 0.35);
    --color-base-border-on-dark-hover: rgba(255, 255, 255, 0.5);
    --color-base-bg-on-dark: rgba(255, 255, 255, 0.08);
    --color-base-bg-on-dark-hover: rgba(255, 255, 255, 0.1);

    --color-primary: var(--color-base-primary);
    --color-accent: var(--color-base-accent);
    --color-accent-muted: var(--color-base-accent-muted);
    --color-surface-accent: var(--color-base-surface-accent);
    --color-text: var(--color-base-text);
    --color-secondary: var(--color-base-text-dark-muted);
    --color-text-muted: var(--color-base-text-muted);
    --color-text-tertiary: var(--color-base-text-tertiary);
    --color-menu-default: var(--color-base-menu-overlay);
    --color-surface: var(--color-base-surface);
    --color-surface-alt: var(--color-base-surface-alt);
    --color-surface-warm: var(--color-base-surface-warm);
    --color-surface-overlay: var(--color-base-surface-overlay);
    --color-surface-muted: var(--color-base-surface-muted);
    --color-border: var(--color-base-border);
    --color-accent-overlay: var(--color-base-accent-overlay);
    --color-surface-dark: var(--color-base-dark);
    --color-surface-dark-hover: var(--color-base-dark-hover);
    --color-black: var(--color-base-black);
    --color-error: var(--color-base-error);
    --color-on-dark: var(--color-base-white);
    --color-on-dark-muted: var(--color-base-on-dark-muted);
    --color-on-dark-subtle: var(--color-base-on-dark-subtle);
    --color-on-dark-strong: var(--color-base-on-dark-strong);
    --color-border-on-dark: var(--color-base-border-on-dark);
    --color-border-on-dark-hover: var(--color-base-border-on-dark-hover);
    --color-bg-on-dark: var(--color-base-bg-on-dark);
    --color-bg-on-dark-hover: var(--color-base-bg-on-dark-hover);

    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-accent);
    --color-menu-text: var(--color-accent);
    --color-menu-text-transparent: var(--color-menu-default);
    --color-footer-bg: var(--color-surface-dark);
    --color-footer-text: var(--color-on-dark-strong);
    --color-footer-link: var(--color-on-dark-muted);
    --color-footer-border: var(--color-border-on-dark);
    --color-footer-input-bg: var(--color-bg-on-dark);
    --color-footer-input-border: var(--color-border-on-dark);
    --color-banner-bg: var(--color-surface-dark);
    --color-banner-text: var(--color-surface-alt);
    --color-fixed-nav-bg: var(--color-surface-dark);
    --color-fixed-nav-text: var(--color-on-dark);
    --color-fixed-nav-border: var(--color-border-on-dark);
    --color-fixed-nav-btn-border: var(--color-border-on-dark);
    --swiper-theme-color: var(--color-primary);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;
    --margin-bottom-40: 2.5rem;
    --gap-60: 3.75rem;
}

@media (min-width: 769px) { :root { --container-max: 720px; --container-padding: 1.5rem; --menu-width: 720px; --content-max: 720px; --section-spacing-y: 4rem; } }
@media (min-width: 1024px) { :root { --container-max: 960px; --container-padding: 2rem; --menu-width: 960px; --content-max: 960px; } }
@media (min-width: 1280px) { :root { --container-max: 1120px; --menu-width: 1120px; --content-max: 1120px; } }
@media (min-width: 1440px) { :root { --container-max: 1280px; --menu-width: 1280px; --content-max: 1280px; } }
@media (min-width: 1600px) { :root { --container-max: 1450px; --menu-width: 1450px; --content-max: 1450px; } }
@media (min-width: 1920px) { :root { --container-max: 1680px; --container-padding: 2rem; --menu-width: 1696px; --content-max: 1680px; --section-spacing-y: 5rem; } }
@media (min-width: 2560px) { :root { --container-max: 1920px; --container-padding: 2.5rem; --menu-width: 2000px; --content-max: 1920px; --section-spacing-y: 5rem; } }
@media (min-width: 3840px) { :root { --container-max: 2200px; --container-padding: 3rem; --menu-width: 2280px; --content-max: 2200px; --section-spacing-y: 6rem; } }
@media (max-width: 734px) { :root { --global-content-max-width: 420px; } }

html { overflow-x: hidden; scrollbar-color: var(--color-primary) var(--color-surface-alt); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: var(--color-surface-alt); }
html::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); }
html::-webkit-scrollbar-thumb:hover { background: var(--color-surface-dark-hover); }

body { color: var(--color-text); background: transparent; width: 100%; max-width: 100%; box-sizing: border-box; font-weight: 400; overflow-x: clip; }

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--container-padding, 1rem);
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--font-size-14);
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 0.5rem; outline: 3px solid var(--color-accent); outline-offset: 2px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; }
.container--wide { width: 100%; max-width: var(--menu-width, var(--container-max)); margin-inline: auto; padding-inline: var(--container-padding); }
.container--narrow { width: 100%; max-width: var(--global-content-max-width); margin-inline: auto; padding-inline: var(--container-padding); box-sizing: border-box; }
.header__container { width: 100%; max-width: var(--menu-width, var(--container-max)); margin-inline: auto; padding-inline: var(--container-padding); box-sizing: border-box; }
/* ========== 1. Variables ========== */
:root {
    --container-max: 100%;
    --container-padding: 1rem;
    --menu-width: 100%;
    --content-max: 100%;
    --header-stick-threshold: 80px;
    --global-content-max-width: 1260px;
    --section-spacing-y: 4rem;
    --section-spacing-x: 0;
    --details-slider-padding: 235px;

    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-17: 1.0625rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;

    --font-size-caption: var(--font-size-12);
    --font-size-small: var(--font-size-14);
    --font-size-body: var(--font-size-16);
    --font-size-lead: var(--font-size-18);
    --font-size-subtitle: var(--font-size-20);
    --font-size-section-title: var(--font-size-24);
    --font-size-title: var(--font-size-32);
    --font-size-display: var(--font-size-36);
    --font-size-hero: var(--font-size-48);
    --font-size-hero-xl: var(--font-size-64);

    --color-base-primary: #641122;
    --color-base-accent: #E6D7BE;
    --color-base-accent-muted: rgba(210, 204, 193, 0.3);
    --color-base-surface-accent: #EFE8D8;
    --color-base-text: #242424;
    --color-base-text-muted: rgba(24, 24, 24, 0.8);
    --color-base-text-dark-muted: rgba(24, 24, 24, 0.9);
    --color-base-text-tertiary: #666;
    --color-base-menu-overlay: rgba(230, 215, 190, 0.9);
    --color-base-surface: #fcfbf4;
    --color-base-surface-alt: #fafaf9;
    --color-base-surface-warm: #FDFBF7;
    --color-base-surface-overlay: rgba(252, 251, 244, 0.2);
    --color-base-surface-muted: rgba(252, 251, 244, 0.4);
    --color-base-border: #E0E0E0;
    --color-base-accent-overlay: rgba(230, 215, 190, 0.6);
    --color-base-dark: #181818;
    --color-base-dark-hover: #3a3a3a;
    --color-base-black: #000000;
    --color-base-error: #c94a4a;
    --color-base-white: #fff;
    --color-base-on-dark-muted: rgba(250, 250, 249, 0.75);
    --color-base-on-dark-subtle: rgba(250, 250, 249, 0.5);
    --color-base-on-dark-strong: rgba(250, 250, 249, 0.85);
    --color-base-border-on-dark: rgba(255, 255, 255, 0.35);
    --color-base-border-on-dark-hover: rgba(255, 255, 255, 0.5);
    --color-base-bg-on-dark: rgba(255, 255, 255, 0.08);
    --color-base-bg-on-dark-hover: rgba(255, 255, 255, 0.1);

    --color-primary: var(--color-base-primary);
    --color-accent: var(--color-base-accent);
    --color-accent-muted: var(--color-base-accent-muted);
    --color-surface-accent: var(--color-base-surface-accent);
    --color-text: var(--color-base-text);
    --color-secondary: var(--color-base-text-dark-muted);
    --color-text-muted: var(--color-base-text-muted);
    --color-text-tertiary: var(--color-base-text-tertiary);
    --color-menu-default: var(--color-base-menu-overlay);
    --color-surface: var(--color-base-surface);
    --color-surface-alt: var(--color-base-surface-alt);
    --color-surface-warm: var(--color-base-surface-warm);
    --color-surface-overlay: var(--color-base-surface-overlay);
    --color-surface-muted: var(--color-base-surface-muted);
    --color-border: var(--color-base-border);
    --color-accent-overlay: var(--color-base-accent-overlay);
    --color-surface-dark: var(--color-base-dark);
    --color-surface-dark-hover: var(--color-base-dark-hover);
    --color-black: var(--color-base-black);
    --color-error: var(--color-base-error);
    --color-on-dark: var(--color-base-white);
    --color-on-dark-muted: var(--color-base-on-dark-muted);
    --color-on-dark-subtle: var(--color-base-on-dark-subtle);
    --color-on-dark-strong: var(--color-base-on-dark-strong);
    --color-border-on-dark: var(--color-base-border-on-dark);
    --color-border-on-dark-hover: var(--color-base-border-on-dark-hover);
    --color-bg-on-dark: var(--color-base-bg-on-dark);
    --color-bg-on-dark-hover: var(--color-base-bg-on-dark-hover);

    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-accent);
    --color-menu-text: var(--color-accent);
    --color-menu-text-transparent: var(--color-menu-default);
    --color-footer-bg: var(--color-surface-dark);
    --color-footer-text: var(--color-on-dark-strong);
    --color-footer-link: var(--color-on-dark-muted);
    --color-footer-border: var(--color-border-on-dark);
    --color-footer-input-bg: var(--color-bg-on-dark);
    --color-footer-input-border: var(--color-border-on-dark);
    --color-banner-bg: var(--color-surface-dark);
    --color-banner-text: var(--color-surface-alt);
    --color-fixed-nav-bg: var(--color-surface-dark);
    --color-fixed-nav-text: var(--color-on-dark);
    --color-fixed-nav-border: var(--color-border-on-dark);
    --color-fixed-nav-btn-border: var(--color-border-on-dark);
    --swiper-theme-color: var(--color-primary);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;
    --margin-bottom-40: 2.5rem;
    --gap-60: 3.75rem;
}

@media (min-width: 769px) { :root { --container-max: 720px; --container-padding: 1.5rem; --menu-width: 720px; --content-max: 720px; --section-spacing-y: 4rem; } }
@media (min-width: 1024px) { :root { --container-max: 960px; --container-padding: 2rem; --menu-width: 960px; --content-max: 960px; } }
@media (min-width: 1280px) { :root { --container-max: 1120px; --menu-width: 1120px; --content-max: 1120px; } }
@media (min-width: 1440px) { :root { --container-max: 1280px; --menu-width: 1280px; --content-max: 1280px; } }
@media (min-width: 1600px) { :root { --container-max: 1450px; --menu-width: 1450px; --content-max: 1450px; } }
@media (min-width: 1920px) { :root { --container-max: 1680px; --container-padding: 2rem; --menu-width: 1696px; --content-max: 1680px; --section-spacing-y: 5rem; } }
@media (min-width: 2560px) { :root { --container-max: 1920px; --container-padding: 2.5rem; --menu-width: 2000px; --content-max: 1920px; --section-spacing-y: 5rem; } }
@media (min-width: 3840px) { :root { --container-max: 2200px; --container-padding: 3rem; --menu-width: 2280px; --content-max: 2200px; --section-spacing-y: 6rem; } }
@media (max-width: 734px) { :root { --global-content-max-width: 420px; } }

/* ========== 2. Reset / Base ========== */
html {
    overflow-x: hidden;
    scrollbar-color: var(--color-primary) var(--color-surface-alt);
    scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: var(--color-surface-alt); }
html::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); }
html::-webkit-scrollbar-thumb:hover { background: var(--color-surface-dark-hover); }

body {
    color: var(--color-text);
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: 400;
    overflow-x: clip;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--container-padding, 1rem);
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--font-size-14);
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0.5rem;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== 3. Container ========== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    box-sizing: border-box;
}
.container--wide {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.container--narrow {
    width: 100%;
    max-width: var(--global-content-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}
.header__container {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}
/* ========== 1. 变量区（Variables） ========== */
:root {
    /* Layout：容器与留白（移动端优先，大屏阶梯限制） */
    --container-max: 100%;
    --container-padding: 1rem;
    --menu-width: 100%;
    --content-max: 100%;
    --header-stick-threshold: 80px;
    --global-content-max-width: 1260px;

    /* Section 间距（可选，供各 section 统一使用） */
    --section-spacing-y: 4rem;
    --section-spacing-x: 0;

    /* Details Slider 全宽区块左右 padding（与 nolik-lab / tela-kit 等共用） */
    --details-slider-padding: 235px;

    /* ========== 2. Typography（数字主命名 + 语义别名） ========== */
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-17: 1.0625rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;

    --font-size-caption: var(--font-size-12);
    --font-size-small: var(--font-size-14);
    --font-size-body: var(--font-size-16);
    --font-size-lead: var(--font-size-18);
    --font-size-subtitle: var(--font-size-20);
    --font-size-section-title: var(--font-size-24);
    --font-size-title: var(--font-size-32);
    --font-size-display: var(--font-size-36);
    --font-size-hero: var(--font-size-48);
    --font-size-hero-xl: var(--font-size-64);

    /* ========== 3. Color（基础色 + 语义色 + 组件映射） ========== */
    --color-base-primary: #641122;
    --color-base-accent: #E6D7BE;
    --color-base-accent-muted: rgba(210, 204, 193, 0.3);
    --color-base-surface-accent: #EFE8D8;
    --color-base-text: #242424;
    --color-base-text-muted: rgba(24, 24, 24, 0.8);
    --color-base-text-dark-muted: rgba(24, 24, 24, 0.9);
    --color-base-text-tertiary: #666;
    --color-base-menu-overlay: rgba(230, 215, 190, 0.9);
    --color-base-surface: #fcfbf4;
    --color-base-surface-alt: #fafaf9;
    --color-base-surface-warm: #FDFBF7;
    --color-base-surface-overlay: rgba(252, 251, 244, 0.2);
    --color-base-surface-muted: rgba(252, 251, 244, 0.4);
    --color-base-border: #E0E0E0;
    --color-base-accent-overlay: rgba(230, 215, 190, 0.6);
    --color-base-dark: #181818;
    --color-base-dark-hover: #3a3a3a;
    --color-base-black: #000000;
    --color-base-error: #c94a4a;
    --color-base-white: #fff;
    --color-base-on-dark-muted: rgba(250, 250, 249, 0.75);
    --color-base-on-dark-subtle: rgba(250, 250, 249, 0.5);
    --color-base-on-dark-strong: rgba(250, 250, 249, 0.85);
    --color-base-border-on-dark: rgba(255, 255, 255, 0.35);
    --color-base-border-on-dark-hover: rgba(255, 255, 255, 0.5);
    --color-base-bg-on-dark: rgba(255, 255, 255, 0.08);
    --color-base-bg-on-dark-hover: rgba(255, 255, 255, 0.1);

    --color-primary: var(--color-base-primary);
    --color-accent: var(--color-base-accent);
    --color-accent-muted: var(--color-base-accent-muted);
    --color-surface-accent: var(--color-base-surface-accent);
    --color-text: var(--color-base-text);
    --color-secondary: var(--color-base-text-dark-muted);
    --color-text-muted: var(--color-base-text-muted);
    --color-text-tertiary: var(--color-base-text-tertiary);
    --color-menu-default: var(--color-base-menu-overlay);
    --color-surface: var(--color-base-surface);
    --color-surface-alt: var(--color-base-surface-alt);
    --color-surface-warm: var(--color-base-surface-warm);
    --color-surface-overlay: var(--color-base-surface-overlay);
    --color-surface-muted: var(--color-base-surface-muted);
    --color-border: var(--color-base-border);
    --color-accent-overlay: var(--color-base-accent-overlay);
    --color-surface-dark: var(--color-base-dark);
    --color-surface-dark-hover: var(--color-base-dark-hover);
    --color-black: var(--color-base-black);
    --color-error: var(--color-base-error);
    --color-on-dark: var(--color-base-white);
    --color-on-dark-muted: var(--color-base-on-dark-muted);
    --color-on-dark-subtle: var(--color-base-on-dark-subtle);
    --color-on-dark-strong: var(--color-base-on-dark-strong);
    --color-border-on-dark: var(--color-base-border-on-dark);
    --color-border-on-dark-hover: var(--color-base-border-on-dark-hover);
    --color-bg-on-dark: var(--color-base-bg-on-dark);
    --color-bg-on-dark-hover: var(--color-base-bg-on-dark-hover);

    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-accent);
    --color-menu-text: var(--color-accent);
    --color-menu-text-transparent: var(--color-menu-default);
    --color-footer-bg: var(--color-surface-dark);
    --color-footer-text: var(--color-on-dark-strong);
    --color-footer-link: var(--color-on-dark-muted);
    --color-footer-border: var(--color-border-on-dark);
    --color-footer-input-bg: var(--color-bg-on-dark);
    --color-footer-input-border: var(--color-border-on-dark);
    --color-banner-bg: var(--color-surface-dark);
    --color-banner-text: var(--color-surface-alt);
    --color-fixed-nav-bg: var(--color-surface-dark);
    --color-fixed-nav-text: var(--color-on-dark);
    --color-fixed-nav-border: var(--color-border-on-dark);
    --color-fixed-nav-btn-border: var(--color-border-on-dark);
    --swiper-theme-color: var(--color-primary);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;

    --margin-bottom-40: 2.5rem;
    --gap-60: 3.75rem;
}

@media (min-width: 769px) {
    :root {
        --container-max: 720px;
        --container-padding: 1.5rem;
        --menu-width: 720px;
        --content-max: 720px;
        --section-spacing-y: 4rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-max: 960px;
        --container-padding: 2rem;
        --menu-width: 960px;
        --content-max: 960px;
    }
}

@media (min-width: 1280px) {
    :root {
        --container-max: 1120px;
        --menu-width: 1120px;
        --content-max: 1120px;
    }
}

@media (min-width: 1440px) {
    :root {
        --container-max: 1280px;
        --menu-width: 1280px;
        --content-max: 1280px;
    }
}

@media (min-width: 1600px) {
    :root {
        --container-max: 1450px;
        --menu-width: 1450px;
        --content-max: 1450px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-max: 1680px;
        --container-padding: 2rem;
        --menu-width: 1696px;
        --content-max: 1680px;
        --section-spacing-y: 5rem;
    }
}

@media (min-width: 2560px) {
    :root {
        --container-max: 1920px;
        --container-padding: 2.5rem;
        --menu-width: 2000px;
        --content-max: 1920px;
        --section-spacing-y: 5rem;
    }
}

@media (min-width: 3840px) {
    :root {
        --container-max: 2200px;
        --container-padding: 3rem;
        --menu-width: 2280px;
        --content-max: 2200px;
        --section-spacing-y: 6rem;
    }
}

@media (max-width: 734px) {
    :root {
        --global-content-max-width: 420px;
    }
}

/* ========== 2. Reset / Base ========== */
html {
    overflow-x: hidden;
    scrollbar-color: var(--color-primary) var(--color-surface-alt);
    scrollbar-width: thin;
}

html::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
}

html::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--color-surface-dark-hover);
}

body {
    color: var(--color-text);
    background: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: 400;
    overflow-x: clip;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--container-padding, 1rem);
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--font-size-14);
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0.5rem;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== 3. 容器体系（Container System） ========== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    box-sizing: border-box;
}

.container--wide {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    width: 100%;
    max-width: var(--global-content-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

.header__container {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

.header .container {
    background: transparent;
    background-color: transparent;
}

.header .header__main.container,
.header .container.header__main {
    background: transparent;
    background-color: transparent;
}

.header--fixed .container {
    background: inherit;
    background-color: inherit;
}

.header--fixed .header__main.container,
.header--fixed .container.header__main {
    background: inherit;
    background-color: inherit;
}
/* ========== 1. 变量区（Variables） ========== */
:root {
    /* Layout：容器与留白（移动端优先，大屏阶梯限制） */
    --container-max: 100%;
    --container-padding: 1rem;
    --menu-width: 100%;           /* 导航区最大宽度，与 container 断点一致，1536+ 可略宽 */
    --content-max: 100%;         /* 主内容区 max-width，供 footer / 列表等统一使用 */
    --header-stick-threshold: 80px;
    --global-content-max-width: 1260px;

    /* Section 间距（可选，供各 section 统一使用） */
    --section-spacing-y: 4rem;
    --section-spacing-x: 0;

    /* Details Slider 全宽区块左右 padding（与 nolik-lab / tela-kit 等共用） */
    --details-slider-padding: 235px;

    /* ========== 2. Typography（数字主命名 + 语义别名） ========== */
    /* 主命名：--font-size-{像素值} */
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-17: 1.0625rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;
    /* 语义别名（便于阅读与换肤） */
    --font-size-caption: var(--font-size-12);      /* 说明/标签 */
    --font-size-small: var(--font-size-14);        /* 次要文字 */
    --font-size-body: var(--font-size-16);        /* 正文基准 */
    --font-size-lead: var(--font-size-18);        /* 引言/强调段 */
    --font-size-subtitle: var(--font-size-20);    /* 副标题 */
    --font-size-section-title: var(--font-size-24); /* 区块标题 */
    --font-size-title: var(--font-size-32);      /* 页面主标题 */
    --font-size-display: var(--font-size-36);    /* 展示型标题 */
    --font-size-hero: var(--font-size-48);      /* 首屏大标题 */
    --font-size-hero-xl: var(--font-size-64);    /* 超大展示 */
    /* ========== 3. Color（基础色 + 语义色 + 组件映射） ========== */
    /* 3.1 基础色（仅色值，便于换肤与设计稿对齐） */
    --color-base-primary: #641122;
    --color-base-accent: #E6D7BE;
    --color-base-accent-muted: rgba(210, 204, 193, 0.3);
    --color-base-surface-accent: #EFE8D8;
    --color-base-text: #242424;
    --color-base-text-muted: rgba(24, 24, 24, 0.8);
    --color-base-text-dark-muted: rgba(24, 24, 24, 0.9);
    --color-base-text-tertiary: #666;
    --color-base-menu-overlay: rgba(230, 215, 190, 0.9);
    --color-base-surface: #fcfbf4;
    --color-base-surface-alt: #fafaf9;
    --color-base-surface-warm: #FDFBF7;
    --color-base-surface-overlay: rgba(252, 251, 244, 0.2);
    --color-base-surface-muted: rgba(252, 251, 244, 0.4);
    --color-base-border: #E0E0E0;
    --color-base-accent-overlay: rgba(230, 215, 190, 0.6);
    --color-base-dark: #181818;
    --color-base-dark-hover: #3a3a3a;
    --color-base-black: #000000;
    --color-base-error: #c94a4a;
    --color-base-white: #fff;
    --color-base-on-dark-muted: rgba(250, 250, 249, 0.75);
    --color-base-on-dark-subtle: rgba(250, 250, 249, 0.5);
    --color-base-on-dark-strong: rgba(250, 250, 249, 0.85);
    --color-base-border-on-dark: rgba(255, 255, 255, 0.35);
    --color-base-border-on-dark-hover: rgba(255, 255, 255, 0.5);
    --color-base-bg-on-dark: rgba(255, 255, 255, 0.08);
    --color-base-bg-on-dark-hover: rgba(255, 255, 255, 0.1);

    /* 3.2 语义色（用途命名，引用基础色） */
    --color-primary: var(--color-base-primary);
    --color-accent: var(--color-base-accent);
    --color-accent-muted: var(--color-base-accent-muted);
    --color-surface-accent: var(--color-base-surface-accent);
    --color-text: var(--color-base-text);
    --color-secondary: var(--color-base-text-dark-muted);
    --color-text-muted: var(--color-base-text-muted);
    --color-text-tertiary: var(--color-base-text-tertiary);
    --color-menu-default: var(--color-base-menu-overlay);
    --color-surface: var(--color-base-surface);
    --color-surface-alt: var(--color-base-surface-alt);
    --color-surface-warm: var(--color-base-surface-warm);
    --color-surface-overlay: var(--color-base-surface-overlay);
    --color-surface-muted: var(--color-base-surface-muted);
    --color-border: var(--color-base-border);
    --color-accent-overlay: var(--color-base-accent-overlay);
    --color-surface-dark: var(--color-base-dark);
    --color-surface-dark-hover: var(--color-base-dark-hover);
    --color-black: var(--color-base-black);
    --color-error: var(--color-base-error);
    --color-on-dark: var(--color-base-white);
    --color-on-dark-muted: var(--color-base-on-dark-muted);
    --color-on-dark-subtle: var(--color-base-on-dark-subtle);
    --color-on-dark-strong: var(--color-base-on-dark-strong);
    --color-border-on-dark: var(--color-base-border-on-dark);
    --color-border-on-dark-hover: var(--color-base-border-on-dark-hover);
    --color-bg-on-dark: var(--color-base-bg-on-dark);
    --color-bg-on-dark-hover: var(--color-base-bg-on-dark-hover);

    /* 3.3 组件映射（组件专用，引用语义色） */
    --color-header-bg: var(--color-primary);
    --color-header-text: var(--color-accent);
    --color-menu-text: var(--color-accent);
    --color-menu-text-transparent: var(--color-menu-default);
    --color-footer-bg: var(--color-surface-dark);
    --color-footer-text: var(--color-on-dark-strong);
    --color-footer-link: var(--color-on-dark-muted);
    --color-footer-border: var(--color-border-on-dark);
    --color-footer-input-bg: var(--color-bg-on-dark);
    --color-footer-input-border: var(--color-border-on-dark);
    --color-banner-bg: var(--color-surface-dark);
    --color-banner-text: var(--color-surface-alt);
    --color-fixed-nav-bg: var(--color-surface-dark);
    --color-fixed-nav-text: var(--color-on-dark);
    --color-fixed-nav-border: var(--color-border-on-dark);
    --color-fixed-nav-btn-border: var(--color-border-on-dark);
    --swiper-theme-color: var(--color-primary);
    /* ========== 4. Radius（圆角） ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;

    /* margin */
    --margin-bottom-40: 2.5rem;

    /* gap */
    --gap-60: 3.75rem;
}

/* 断点：769～1023 */
@media (min-width: 769px) {
    :root {
        --container-max: 720px;
        --container-padding: 1.5rem;
        --menu-width: 720px;
        --content-max: 720px;
        --section-spacing-y: 4rem;
    }
}

/* 断点：1024～1279 */
@media (min-width: 1024px) {
    :root {
        --container-max: 960px;
        --container-padding: 2rem;
        --menu-width: 960px;
        --content-max: 960px;
    }
}

/* 断点：1280～1439 */
@media (min-width: 1280px) {
    :root {
        --container-max: 1120px;
        --menu-width: 1120px;
        --content-max: 1120px;
    }
}

/* 断点：1440～1599 */
@media (min-width: 1440px) {
    :root {
        --container-max: 1280px;
        --menu-width: 1280px;
        --content-max: 1280px;
    }
}

/* 断点：1600～1919 */
@media (min-width: 1600px) {
    :root {
        --container-max: 1450px;
        --menu-width: 1450px;
        --content-max: 1450px;
    }
}

/* 断点：1920～2559（设计稿基准区间） */
@media (min-width: 1920px) {
    :root {
        --container-max: 1680px;
        --container-padding: 2rem;
        --menu-width: 1696px;
        --content-max: 1680px;
        --section-spacing-y: 5rem;
    }
}

/* 断点：2560+（2K/大屏） */
@media (min-width: 2560px) {
    :root {
        --container-max: 1920px;
        --container-padding: 2.5rem;
        --menu-width: 2000px;
        --content-max: 1920px;
        --section-spacing-y: 5rem;
    }
}

/* 断点：3840（4K） */
@media (min-width: 3840px) {
    :root {
        --container-max: 2200px;
        --container-padding: 3rem;
        --menu-width: 2280px;
        --content-max: 2200px;
        --section-spacing-y: 6rem;
    }
}

/* 小屏：窄内容区（如表单） */
@media (max-width: 734px) {
    :root {
        --global-content-max-width: 420px;
    }
}

/* ========== 2. Reset / Base ========== */
html {
    /* background: #2c1810; */
    overflow-x: hidden; /* 防止水平滚动条 */
    /* Firefox：滚动条为主题红 */
    scrollbar-color: var(--color-primary) var(--color-surface-alt);
    scrollbar-width: thin;
}

/* WebKit（Chrome / Safari / Edge）：滚动条为主题红 */
html::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
}
html::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: var(--radius-full);
}
html::-webkit-scrollbar-thumb:hover {
    background: var(--color-surface-dark-hover);
}

body {
    color: var(--color-text);
    background: transparent; /* 透明以显示 html 背景，首页 slider 会延伸至 header 下 */
    width: 100%;
    max-width: 100%; /* 用 100% 避免 100vw 含滚动条槽时大于可视区导致横拖 */
    box-sizing: border-box;
    font-weight: 400;
    overflow-x: clip;
}

/* Skip link：仅键盘聚焦时可见，跳到主内容 */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--container-padding, 1rem);
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: var(--font-size-14);
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0.5rem;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* 全局焦点样式：仅键盘聚焦时显示，不移除 outline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== 3. 容器体系（Container System） ========== */
/* 默认全局通用容器：宽度 100%、最大宽度随断点、水平居中、左右内边距 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    /* padding-inline: var(--container-padding); */
    box-sizing: border-box;
}

/* 略宽容器（如全宽菜单内容区、大图区块，与导航区同宽） */
.container--wide {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* 窄容器（阅读区、表单等） */
.container--narrow {
    width: 100%;
    max-width: var(--global-content-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

.header__container {
    width: 100%;
    max-width: var(--menu-width, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

/* 确保 header 内的 container 也是透明的 */
.header .container {
    background: transparent;
    background-color: transparent;
}

/* header 内 container 透明，以显示 header 自身背景 */
.header .header__main.container,
.header .container.header__main {
    background: transparent;
    background-color: transparent;
}

/* fixed 状态下，container 继承 header 的背景 */
.header--fixed .container {
    background: inherit;
    background-color: inherit;
}

/* fixed 状态下，header__main.container 继承 header 的背景 */
.header--fixed .header__main.container,
.header--fixed .container.header__main {
    background: inherit;
    background-color: inherit;
}

/* ========== 4. 通用组件（Header / Menu / Footer 等） ========== */

/* ---------- Details Slider（公用，nolik-lab / tela-kit 等复用） ---------- */
.details-slider.section-highlights.staggered-end {
    padding: 4rem 0 5rem;
}

.details-slider__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.details-slider__headline {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    padding: 0 var(--details-slider-padding);
    box-sizing: border-box;
    font-size: var(--font-size-48);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    letter-spacing: 0.02em;
}

.details-slider__viewport {
    width: 100dvw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50dvw;
    margin-right: -50dvw;
    overflow: hidden;
    padding: 0 var(--details-slider-padding);
    user-select: none;
}

.details-slider__hit {
    position: absolute;
    top: 0;
    bottom: 64px;
    width: 16%;
    z-index: 5;
    cursor: pointer;
}

.details-slider__hit--prev {
    left: 0;
}

.details-slider__hit--next {
    right: 0;
}

.details-slider__track {
    display: flex;
    align-items: flex-start;
    gap: var(--details-slider-gap, 18px);
    will-change: transform;
    transition: transform var(--details-slider-anim, 0.45s cubic-bezier(0.22, 0.61, 0.36, 1));
}

.details-slider__card {
    flex: 0 0 calc(100% - (var(--details-slider-peek, 90px) * 2));
    min-width: max(260px, var(--details-slider-card-img-min-width, 1124px));
    max-width: 1124px;
    border-radius: var(--details-slider-radius, 24px);
    overflow: hidden;
    position: relative;
    transform: scale(0.985);
    opacity: 0.9;
    transition: transform var(--details-slider-anim, 0.45s cubic-bezier(0.22, 0.61, 0.36, 1)),
        opacity var(--details-slider-anim, 0.45s cubic-bezier(0.22, 0.61, 0.36, 1));
}

.details-slider__card--active {
    transform: scale(1);
    opacity: 1;
}

.details-slider__card-img {
    border-radius: inherit;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.details-slider__card-img img {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1124/640;
    object-fit: contain;
    object-position: center;
}

.details-slider__pagination {
    width: 100dvw;
    position: relative;
    left: 50%;
    margin-left: -50dvw;
    padding: 1.5rem var(--details-slider-padding) 0;
    display: flex;
    align-items: center;
    justify-content: start;
}

.details-slider__dots {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 14px;
    height: 44px;
    background: rgba(252, 251, 244, 0.2);
    border: 1px solid #E6D7BE;
    border-radius: 35px;
}

.details-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--details-slider-dot-bg, var(--color-text-muted));
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.details-slider__dot:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.details-slider__dot--active {
    background: var(--color-primary);
    width: 12px;
    height: 12px;
}

.details-slider__arrow {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--details-slider-arrow-color, var(--color-accent));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.details-slider__arrow:hover {
    color: var(--color-primary);
    transform: scale(1.05);
}

.details-slider__arrow svg {
    display: block;
    flex-shrink: 0;
}

.warning-banner {
    background: var(--color-banner-bg);
    color: var(--color-banner-text);
    font-size: var(--font-size-12);
    font-weight: 600;
    text-align: center;
    padding: 18px 20px;
    text-transform: uppercase;
}

.header {
    z-index: 100;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    /* 不在此处使用 transform：否则子元素 .mobile-menu（position:fixed）会相对 header 定位 */
    transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* 仅首页 index.html 首屏（未吸顶时）：header 透明 */
body.index-page .header:not(.header--fixed) {
    background: transparent;
    background-color: transparent;
}

body.index-page .header:not(.header--fixed) .header__main {
    background: transparent;
    background-color: transparent;
}

/* 鼠标悬停在任何菜单项上时，header 背景色为主色 */
.header:has(.menu__item:hover) {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
}

.header:has(.menu__item:hover) .header__main {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
}

.header--fixed {
    position: fixed;
    top: 0; /* fixed 时从页面顶部开始（会覆盖 warning banner） */
    left: 0;
    width: 100%;
    margin-top: 0;
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* fixed 状态下，hover 时保持背景色（覆盖 hover 效果） */
.header--fixed:has(.menu__item:hover) {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
}

.header--fixed:has(.menu__item:hover) .header__main {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
}

/* 吸顶动画效果：从上方滑入 */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* header top row，默认红色与 .header 一致 */
.header__main {
    position: relative;
    z-index: 1021;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: 96px;
    align-items: center;
    padding-inline: 2rem;
    font-size: var(--font-size-12);
    color: inherit;
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    font-weight: 500;
    text-transform: capitalize;
    transition: background 0.3s ease, background-color 0.3s ease;
}

/* When header becomes fixed on scroll, apply header colors */
.header--fixed .header__main {
    color: var(--color-header-text);
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Override child controls (language switcher, buttons, menu links) when fixed */
.header--fixed .header__language-switcher .header__lang-item {
    /* 未选中：边框与文字同色 */
    color: rgba(210, 204, 193, 0.6);
    border-color: rgba(210, 204, 193, 0.6);
}

.header--fixed .header__language-switcher .header__lang-item--active {
    color: var(--color-header-text);
    border-color: var(--color-header-text);
}

.header--fixed .header__malone-link a {
    border-color: var(--color-header-text);
    color: var(--color-header-text);
}

.header--fixed .header__malone-link a:hover {
    background-color: var(--color-header-text);
    color: var(--color-header-bg);
    border-color: var(--color-header-text);
}

/* 默认状态：透明背景下的菜单链接颜色 */
.menu__list a {
    color: var(--color-menu-text-transparent);
    text-decoration: none;
    transition: color 0.2s;
}

.header--fixed .menu__list>a {
    color: var(--color-menu-text);
}

/* 左侧区域：强制靠左 */
.menu__wrapper {
    justify-self: start;
    height: 100%; /* 与 header 高度一致 */
    display: flex;
    align-items: center; /* 垂直居中 */
}


/* 右侧区域：强制靠右 */
.header__icon-wrapper {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 菜单列表样式重置 */
.menu__wrapper ul.menu__list {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    height: 100%; /* 菜单列表高度与 header 同高 */
    align-items: center; /* 垂直居中 */
}

/* 每个菜单项高度与 header 同高 */
.menu__item {
    height: 100%;
    display: flex;
    align-items: center;
}

.menu__item a {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.menu__item--has-children {
    position: relative;
}

.menu__submenu {
    position: absolute;
    top: 100%;
    left: -100dvw;
    width: 200dvw;
    box-sizing: border-box;
    padding-block: 2rem;
    padding-inline: 100dvw;
    list-style: none;
    margin: 0;
    background: var(--color-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    pointer-events: none;
}

.menu__item--has-children:hover .menu__submenu,
.menu__submenu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu__submenu-item {
    padding: 0;
    margin: 0;
}

.menu__submenu-item a {
    display: block;
    padding: 0.75rem 1rem;
    padding-left: var(--container-padding);
    color: var(--color-surface-dark);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-size: var(--font-size-12);
    white-space: nowrap;
}

.menu__submenu-item a:hover {
    color: var(--color-primary);
}

.product-menu {
    position: absolute;
    top: 100%;
    left: -100dvw;
    width: 200dvw;
    background: var(--color-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
    padding: 2rem 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.menu__item--has-children:hover .product-menu,
.product-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.product-menu__container {
    max-width: 760px;
    width: 100%;
    margin-left: 100dvw;
    padding-left: 0;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-sizing: border-box;
}

/* All Product 按钮在顶部 */
.product-menu__btn-wrapper {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid #D2CCC1;
}

.product-menu__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    /* padding-left: var(--container-padding); */
}

/* 左侧产品分类 */
.product-menu__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 200px;
    flex: 0 0 200px;
}

.product-menu__btn {
    background: var(--color-surface-dark);
    color: var(--color-surface);
    border: none;
    padding: 12px 20px;
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    border-radius: 36px;
    transition: background 0.2s;
    display: inline-block; /* 宽度与文字齐宽 */
    width: auto; /* 自动宽度 */
    text-decoration: none; /* 当为 <a> 时无下划线 */
}

.product-menu__btn:hover {
    background: var(--color-surface-dark-hover);
}

.product-menu__series-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-menu__series-item {
    background: none;
    border: none;
    color: #666;
    text-decoration: none;
    font-size: var(--font-size-14);
    padding: 8px 0;
    transition: color 0.2s;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.product-menu__series-item:hover,
.product-menu__series-item--active {
    color: var(--color-text);
    text-decoration: underline;
}

/* Tab 内容区域 */
.product-menu__tab-content {
    display: none;
}

.product-menu__tab-content--active {
    display: block;
}

/* 右侧产品内容 */
.product-menu__content {
    flex: 0 0 auto;
    margin-left: auto;
}

.product-menu__grid {
    display: grid;
    grid-template-columns: repeat(2, 117px);
    gap: 1.5rem;
    justify-content: flex-start;
}

.product-menu__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.product-menu__card:hover {
    opacity: 0.8;
}

.product-menu__card-img {
    width: 117px;
    height: 156px;
    /* background: var(--color-surface-alt); */
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-menu__card-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.product-menu__card-info {
    text-align: center;
}

.product-menu__card-title {
    font-size: var(--font-size-17);
    font-weight: 500;
    margin: 0;
    color: var(--color-text);
}

.product-menu__card-desc {
    font-size: var(--font-size-12);
    color: var(--color-text-tertiary);
    margin: 0.25rem 0 0 0;
}

.header__language-switcher {
    display: flex;
    border: 1px solid var(--color-header-text);
    /* 整体一个大边框 */
    border-radius: 4px;
    overflow: hidden;
    /* 防止内部背景溢出圆角 */
}

.header__lang-item {
    display: block;
    text-decoration: none;
    padding: 18px 18px;
    font-size: var(--font-size-12);
    font-weight: 600;
    color: var(--color-accent-muted);
    border: 1px solid var(--color-accent-muted);
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 激活状态 */
.header__lang-item--active {
    border: 1px solid var(--color-header-text);
    color: var(--color-header-text);
}

/* 鼠标悬停：非当前语言变为金底红字 */
.header__lang-item:hover:not(.header__lang-item--active) {
    background-color: var(--color-header-text) !important;
    color: var(--color-header-bg) !important;
    border-color: var(--color-header-text) !important;
}

/* malone-link */
.header__malone-link a {
    display: block;
    text-decoration: none;
    padding: 18px 24px;
    font-size: var(--font-size-12);
    border: 1px solid var(--color-header-text);
    font-weight: 600;
    border-radius: 30px;
    color: var(--color-header-text);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header__malone-link a:hover {
    background-color: var(--color-header-text);
    color: var(--color-header-bg);
    border-color: var(--color-header-text);
}

/* ====== Age Gate Base ====== */
.age-gate__clip-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: block;
}

/* 打开时禁止页面滚动 */
html.is-age-gate-open,
body.is-age-gate-open {
    overflow: hidden;
}

.age-gate__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .0);
    /* 你本身是纯色背景，这里留空也行 */
}

.age-gate__stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    overflow: hidden;
}

/* 上半个：心动曲线以上，确认后向上移出 */
.age-gate__half {
    position: absolute;
    inset: 0;
    transition: background-color 1.2s ease-in-out, transform 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
    will-change: transform;
}

.age-gate__half--top {
    background: var(--color-surface);
    clip-path: url(#ageGateClipTop);
    transform: translateY(0);
}

.age-gate__half--bottom {
    background: var(--color-surface);
    clip-path: url(#ageGateClipBottom);
    transform: translateY(0);
    z-index: 1; /* 重叠区在上，只露一条边，避免双线 */
}

.age-gate--exiting .age-gate__half--top {
    background: var(--color-primary);
    transform: translateY(-100%);
}

.age-gate--exiting .age-gate__half--bottom {
    background: var(--color-primary);
    transform: translateY(100%);
}

/* 原来的线：盖在唯一可见交界之上 */
.age-gate__curve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s ease-out;
}

.age-gate--exiting .age-gate__curve {
    opacity: 0;
}

.age-gate__curve-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 10;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.age-gate__card {
    position: relative;
    z-index: 2;
    background: var(--color-surface);
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);

    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 卡片淡出 */
.age-gate--exiting .age-gate__card {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    pointer-events: none;
}

.age-gate__logo {
    border: 1px solid var(--color-primary);
    width: 59px;
    height: 55px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    padding: 15px;
    justify-content: center;
}

.age-gate__logo-img {
    margin-top: 8px;
    max-width: 100px;
    height: auto;
}

.age-gate__logo-img--breathing {
    animation: ageGateBreath 1s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, opacity;
}

.header__logo-img-inner--breathing {
    animation: logoBreath 1s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, opacity;
}

.age-gate__title {
    font-size: 32px;
    font-weight: 400;
    margin: 10px 0;
}

.age-gate__desc p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.age-gate__desc {
    margin-bottom: 20px;
}

.age-gate__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.age-gate__btn {
    padding: 14px 22px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: transparent;
    color: var(--color-black);
    width: 120px;
    font-size: 12px;
    border-radius: 30px;
    font-weight: 400;
    transition: all .3s;
}

.age-gate__btn--primary {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.age-gate__btn--primary:hover {
    background: var(--color-primary);
    color: var(--color-accent);
}

.age-gate__warning {
    font-size: 10px;
    padding-top: 10px;
    margin: 0;
}

@keyframes ageGateBreath {
    0%,
    100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateZ(0) scale(1.1);
        opacity: .85;
    }
}

/* Header logo 的呼吸动画 - 幅度更小 */
@keyframes logoBreath {
    0%,
    100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateZ(0) scale(1.05);
        opacity: .95;
    }
}

/* Header 中的 logo - border 不动，只有图片呼吸 */
.header__logo-img {
    position: relative; /* 确保 border 跟随元素一起缩放 */
    display: flex;
    align-items: center;
    gap: 12px; /* logo-gold 和 vaptio-text 之间的间距 */
    cursor: pointer; /* 添加指针样式，表示可点击 */
    margin: 0 auto;
}

/* logo-gold 容器 - 圆形边框 */
.header__logo-gold {
    position: relative;
    border: 1px solid var(--color-accent);
    width: 59px;
    height: 55px;
    border-radius: 50%; /* 圆形边框 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 7px 7px 7px; /* 上下 15px、左右 7px */
    flex-shrink: 0; /* 防止收缩 */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* logo-gold 内的图片：居中并消除 inline 间隙 */
.header__logo-gold img {
    display: block;
    margin: 0;
    width: 45px;
    height: 45px;
    object-fit: contain;
    object-position: center;
    animation: logoBreath 1s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, opacity;
}

/* logo-text 初始显示，点击后隐藏 */
.header__logo-text {
    height: auto;
    max-width: 120px;
    width: auto;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0s linear 1.2s, /* 延迟隐藏 visibility，等动画完成 */
                transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                width 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                margin-left 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                margin-right 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0; /* 防止收缩 */
    transform-origin: left center; /* 从左侧中心点缩放 */
    overflow: hidden; /* 始终隐藏溢出，确保动画流畅 */
    display: inline-block; /* 使用 inline-block 以便宽度动画生效 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 点击后：logo-text 隐藏，logo-gold 保持显示 */
.header__logo-img--collapsed .header__logo-text {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85) translateX(-10px); /* 稍微缩小并向左移动 */
    width: 0 !important; /* 使用 !important 确保覆盖内联样式 */
    max-width: 0 !important;
    margin-right: 0;
    margin-left: 0;
}

.header__logo-img--collapsed .header__logo-gold {
    opacity: 1;
    visibility: visible;
}

/* 可选：退出后直接隐藏 */
.age-gate--hidden {
    display: none;
}

/* ========= Footer ========= */
/* Contact CTA section (shared by index & product-list) */
.contact-us {
    background: var(--color-surface-accent);
    padding: 4rem 0;
    text-align: center;
}

.contact-us__title {
    font-size: var(--font-size-32);
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--color-surface-dark);
}

.contact-us__content {
    font-size: var(--font-size-16);
    color: var(--color-surface-dark);
    opacity: 0.8;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-us__cta {
    margin-top: 2rem;
}

.contact-us__btn {
    display: inline-block;
    padding: 16px 22px;
    font-size: var(--font-size-12);
    border: 1px solid var(--color-primary);
    border-radius: 30px;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-us__btn:hover {
    background-color: var(--color-primary);
    color: var(--color-accent);
}

.footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    font-size: var(--font-size-14);
}

.footer__main {
    padding: 3rem 0 2.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    max-width: var(--content-max);
    margin: 0 auto;
}

.footer__heading {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--color-footer-text);
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__list li {
    margin-bottom: 0.5rem;
}

.footer__list a,
.footer__email a {
    color: var(--color-footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: var(--font-size-12);
}

.footer__list a:hover,
.footer__email a:hover {
    color: var(--color-footer-text);
}

.footer__email {
    margin: 0;
    color: var(--color-footer-link);
}

.footer__social {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--color-footer-text);
    transition: background 0.2s ease, color 0.2s ease;
}

.footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-footer-text);
}

.footer__newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.footer__input {
    flex: 1;
    min-width: 180px;
    padding: 12px 16px;
    font-size: var(--font-size-12);
    color: var(--color-footer-text);
    background: var(--color-footer-input-bg);
    border: 1px solid var(--color-footer-input-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.2s ease;
}

.footer__input::placeholder {
    color: var(--color-on-dark-subtle);
}

.footer__input:focus {
    border-color: rgba(255, 255, 255, 0.6);
}

.footer__submit {
    padding: 12px 24px;
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-footer-text);
    background: transparent;
    border: 1px solid var(--color-footer-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.footer__submit:hover {
    background: var(--color-bg-on-dark-hover);
    border-color: var(--color-border-on-dark-hover);
}

.footer__bottom {
    border-top: 1px solid var(--color-footer-border);
    padding: 1.5rem var(--container-padding);
}

.footer__bottom-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    text-align: center;
}

.footer__copyright {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-12);
    color: var(--color-footer-link);
}

.footer__warning {
    margin: 0;
    font-size: var(--font-size-12);
    color: var(--color-footer-link);
    line-height: 1.4;
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: auto auto auto auto auto 1fr;
        gap: 2rem 3rem;
        align-items: start;
    }

    .footer__col--newsletter {
        min-width: 260px;
    }

    .footer__newsletter {
        flex-wrap: nowrap;
    }

    .footer__input {
        min-width: 200px;
    }
}

/* ========== 固定副栏 .fixed-secondary-menu（公有，首屏隐藏，滚动超过阈值后显示） ========== */
/* header 后紧跟 .fixed-secondary-menu，或 .fixed-secondary-menu 在 main 内首子：header 默认红色、菜单金色 */
header:has(+ .fixed-secondary-menu),
header:has(+ main .fixed-secondary-menu) {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
}

header:has(+ .fixed-secondary-menu) .header__main,
header:has(+ main .fixed-secondary-menu) .header__main {
    background: var(--color-header-bg);
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
}

header:has(+ .fixed-secondary-menu) .menu__list a,
header:has(+ main .fixed-secondary-menu) .menu__list a {
    color: var(--color-header-text);
}

header:has(+ .fixed-secondary-menu) .header__malone-link a,
header:has(+ main .fixed-secondary-menu) .header__malone-link a {
    border-color: var(--color-header-text);
    color: var(--color-header-text);
}

header:has(+ .fixed-secondary-menu) .header__language-switcher .header__lang-item,
header:has(+ main .fixed-secondary-menu) .header__language-switcher .header__lang-item {
    border-color: var(--color-header-text);
    color: var(--color-accent-muted);
}

header:has(+ .fixed-secondary-menu) .header__language-switcher .header__lang-item--active,
header:has(+ main .fixed-secondary-menu) .header__language-switcher .header__lang-item--active {
    color: var(--color-header-text);
}

.fixed-secondary-menu {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 110;
    background: var(--color-fixed-nav-bg);
    color: var(--color-fixed-nav-text);
    border-bottom: none;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    margin: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.fixed-secondary-menu.fixed-secondary-menu--visible {
    max-height: 80px;
    min-height: auto;
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

main .fixed-secondary-menu.fixed-secondary-menu--visible {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 120;
}

.fixed-secondary-menu__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    row-gap: 0rem;
    column-gap: 1rem;
    padding: 0.75rem 0;
    min-height: 56px;
}

.fixed-secondary-menu__brand {
    justify-self: start;
    font-size: var(--font-size-20);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-fixed-nav-text);
}

.fixed-secondary-menu__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-secondary-menu__logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.fixed-secondary-menu__btn {
    justify-self: end;
    display: inline-block;
    padding: 18px 24px;
    font-size: var(--font-size-12);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-fixed-nav-text);
    border: 1px solid var(--color-fixed-nav-btn-border);
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    line-height: 1;
    box-sizing: border-box;
}

.fixed-secondary-menu__btn:hover {
    background: var(--color-bg-on-dark-hover);
    border-color: var(--color-border-on-dark-hover);
}

/* ========== Back to Top（全站）：外圈圆环显示下拉进度，箭头为 logo 反向 ========== */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html.is-mobile-menu-open {
    overflow: hidden;
    overflow-x: hidden;
    height: 100%;
    overscroll-behavior: none;
}

html.is-mobile-menu-open .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}

html.is-mobile-menu-open .header {
    z-index: 1100;
}

html.is-mobile-menu-open .header,
html.is-mobile-menu-open .header .header__main {
    background: var(--color-header-bg) !important;
    background-color: var(--color-header-bg) !important;
}

.back-to-top:hover {
    opacity: 1;
}

.back-to-top__circle {
    position: absolute;
    inset: 0;
    display: block;
}

.back-to-top__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.back-to-top__track {
    stroke: rgba(100, 17, 34, 0.2);
}

.back-to-top__progress {
    stroke: var(--color-primary);
    transition: stroke-dashoffset 0.1s linear;
}

.back-to-top__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.back-to-top__arrow {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transform: rotate(180deg);
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

/* ========== 9. 移动端：汉堡按钮与全屏菜单 ========== */
.header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.header__burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 汉堡变关闭符号（X）：三线 2px + gap 5px → 上下线各平移 7px 与中线对齐 */
.header__burger.header__burger--open .header__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header__burger.header__burger--open .header__burger-line:nth-child(2) {
    opacity: 0;
}
.header__burger.header__burger--open .header__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 768px) {
    .warning-banner {
        font-size: 8px;
        line-height: 1.5;
        min-height: 60px;
    }
    .header__burger {
        display: flex;
    }
    .menu__wrapper {
        display: none;
    }
    .header__icon-wrapper {
        display: none;
    }
    /* 移动端：header 改为左右布局，左 logo / 右 menu */
    .header__main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 1rem;
        height: 64px;
    }
    .header__logo-wrapper {
        order: 1;
        margin-left: 0;
    }
    .header__burger {
        order: 2;
    }

    .details-slider__card {
        --details-slider-peek: 28px;
        --details-slider-card-h: 62vw;
        min-width: 200px;
    }

    .details-slider__hit {
        bottom: 56px;
    }

    .mobile-menu[aria-hidden="false"],
    .mobile-menu.is-open {
        display: flex;
    }

    :root {
        --details-slider-padding: 40px;
    }

    .container,
    .header__container {
        padding-inline: 1rem;
    }

    .contact-us {
        padding: 3rem 0;
    }

    .contact-us__title {
        font-size: clamp(1.25rem, 4vw + 1rem, var(--font-size-32));
    }

    .footer__main {
        padding: 2rem 0 1.5rem;
    }
}

/* ========== 移动端展开菜单（全屏遮罩） ========== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: var(--color-surface-accent);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    pointer-events: none;
}
.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu__body {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-surface-accent);
    padding: 1rem 1.25rem 1.5rem;
}
.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    max-width: 100%;
}
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: var(--font-size-14);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mobile-menu__link--label {
    border-bottom: none;
}
.mobile-menu__link--highlight {
    color: var(--color-primary);
}
.mobile-menu__item--section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* images/menu-arrow.png 为「朝左」；.mobile-menu__arrow 默认即左箭头；展开项用 .mobile-menu__arrow--down */
.mobile-menu__arrow {
    flex-shrink: 0;
    margin-left: 8px;
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background: url("../images/menu-arrow.png") center / contain no-repeat;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

.mobile-menu__link--toggle[aria-expanded="false"] .mobile-menu__arrow--down {
    transform: rotate(0deg);
}

.mobile-menu__link--toggle[aria-expanded="true"] .mobile-menu__arrow--down {
    transform: rotate(-90deg);
}

.mobile-menu__dropdown {
    margin-top: 8px;
    min-width: 0;
    max-width: 100%;
}

.mobile-menu__dropdown:not(.mobile-menu__dropdown--open) {
    display: none;
}

.mobile-menu__btn-all {
    display: inline-block;
    align-self: flex-end;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 10px 18px;
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 24px;
    text-decoration: none;
}
.mobile-menu__cards {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.mobile-menu__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.mobile-menu__card-img {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-menu__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mobile-menu__card-info {
    text-align: center;
    padding-top: 6px;
}
.mobile-menu__card-title {
    font-size: var(--font-size-14);
    font-weight: 500;
    margin: 0;
    color: var(--color-text);
}
.mobile-menu__card-desc {
    font-size: var(--font-size-12);
    color: var(--color-text-tertiary);
    margin: 2px 0 0 0;
}
.mobile-menu__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    background: var(--color-surface-accent);
    border-top: 1px solid rgba(0,0,0,0.08);
}
.mobile-menu__cta {
    display: inline-block;
    padding: 12px 20px;
    font-size: var(--font-size-12);
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-text);
    border: 1px solid var(--color-black);
    border-radius: 24px;
    text-decoration: none;
}
.mobile-menu__lang {
    display: flex;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    overflow: hidden;
}
.mobile-menu__lang-item {
    padding: 10px 16px;
    font-size: var(--font-size-12);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
}
.mobile-menu__lang-item--active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}

/* 仅在小屏显示移动菜单相关 UI */
@media (min-width: 769px) {
    .mobile-menu {
        display: none !important;
    }
}

/* ========== 10. 响应式媒体查询（集中覆盖：容器 / 间距 / 排版） ========== */
/* <=1680：中大屏收敛 details slider 左右留白，避免内容过散 */
@media (max-width: 1680px) {
    :root {
        --details-slider-padding: 140px;
    }
}

/* 576 以下：进一步压缩布局，防止按钮/卡片挤压 */
@media (max-width: 576px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .footer__newsletter {
        flex-direction: column;
        align-items: stretch;
    }

    .footer__submit {
        width: 100%;
    }

    .mobile-menu__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 769～1023 */
@media (min-width: 769px) and (max-width: 1023px) {
    .contact-us {
        padding: 4rem 0;
    }
    .footer__main {
        padding: 2.5rem 0 2rem;
    }
}

/* 1024～1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
    .contact-us {
        padding: 4rem 0;
    }
    .footer__main {
        padding: 3rem 0 2.5rem;
    }
}

/* 1280～1439 */
@media (min-width: 1280px) and (max-width: 1439px) {
    .contact-us {
        padding: 4rem 0;
    }
}

/* 1440～1599 */
@media (min-width: 1440px) and (max-width: 1599px) {
    .contact-us {
        padding: 5rem 0;
    }
}

/* 1600～1919 */
@media (min-width: 1600px) and (max-width: 1919px) {
    .contact-us {
        padding: 5rem 0;
    }
}

/* 1920～2559 */
@media (min-width: 1920px) and (max-width: 2559px) {
    .contact-us {
        padding: 5rem 0;
    }
    .footer__main {
        padding: 3.5rem 0 3rem;
    }
}

/* 2560+ */
@media (min-width: 2560px) {
    .contact-us {
        padding: 6rem 0;
    }
    .footer__main {
        padding: 4rem 0 3rem;
    }
}

/* 4K */
@media (min-width: 3840px) {
    .contact-us {
        padding: 8rem 0;
    }
    .footer__main {
        padding: 5rem 0 4rem;
    }
}

/* 小屏收紧 details-slider 留白（置底：文件内重复 :root 会覆盖靠前处的变量，须最后声明） */
@media (max-width: 768px) {
    :root {
        --details-slider-padding: 16px;
    }
}