/* ===========================================
   Site Header — Top Bar + Main Navigation
=========================================== */

/* -----------------------------------------------
   整体容器：吸顶，本身无背景（让 nav 自己管理）
----------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* 信息页 header 为实色底，避免顶栏展开/收起过渡时透出页面内容 */
body.has-page-breadcrumb .site-header {
    background: var(--color-surface);
}

/* -----------------------------------------------
   Top Bar — 联系信息条（深色背景）
   下滑时以 max-height 自然收起；
   cubic-bezier(0.4, 0, 0.2, 1) = Material Design 标准缓动
----------------------------------------------- */
.header-top {
    background: var(--color-topbar-bg);
    color: var(--color-topbar-text);
    font-size: 13px;
    overflow: hidden;
    max-height: var(--header-topbar-height);
    opacity: 1;
    pointer-events: auto;
    transition:
        max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.3s ease;
}

.site-header.is-scrolled .header-top {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-topbar-height);
    gap: 16px;
}

.header-top-left,
.header-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.header-top-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-topbar-text);
    opacity: 0.92;
}

.header-top-link:hover {
    color: #fff;
    opacity: 1;
}

.header-top-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.22);
}

.header-top-badge {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(196, 182, 164, 0.22);
    color: var(--color-accent-light);
    border-radius: 999px;
}

.header-lang {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.header-top-login,
.header-top-tagline {
    font-weight: 600;
}

.header-top-tagline {
    cursor: default;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.04em;
}

/* -----------------------------------------------
   Nav Bar — 主导航
   初始：背景透明（透出 Banner 图片）
   下滑后：切换为纯色背景 + 阴影
   所有颜色都走 transition，避免闪烁
----------------------------------------------- */
.header-nav {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background    0.4s ease,
        border-color  0.4s ease,
        box-shadow    0.4s ease;
}

.site-header.is-scrolled .header-nav {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 16px rgba(51, 51, 51, 0.07);
}

/* 含面包屑的内页：导航始终实底，与下方灰色面包屑条区分 */
body.has-page-breadcrumb .header-nav {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 0 rgba(51, 51, 51, 0.06);
}

body.has-page-breadcrumb .header-brand {
    color: var(--color-primary);
}

body.has-page-breadcrumb .header-brand-mark {
    border-color: rgba(var(--color-accent-rgb), 0.45);
}

body.has-page-breadcrumb .header-brand-tagline {
    color: var(--color-text-muted);
}

body.has-page-breadcrumb .header-menu-link {
    color: var(--color-text);
}

body.has-page-breadcrumb .header-menu-link:hover,
body.has-page-breadcrumb .header-menu-link.is-active {
    color: var(--color-accent);
}

body.has-page-breadcrumb .header-mobile-toggle span {
    background: var(--color-primary);
}

.header-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height-nav);
    gap: 24px;
}

/* -----------------------------------------------
   Brand — 横版 Logo（640×160 / @2x / 窄屏 480）
----------------------------------------------- */
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: #fff;
    transition: color 0.4s ease;
}

.site-header.is-scrolled .header-brand {
    color: var(--color-primary);
}

.header-brand:hover {
    color: inherit;
}

.header-brand-picture {
    display: block;
    line-height: 0;
}

.header-brand-logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: min(220px, 48vw);
    object-fit: contain;
    object-position: left center;
    /* 透明态叠在深色 Hero 上：略提亮度，避免石青融进暗部 */
    filter: brightness(1.12) saturate(1.05);
    transition: height 0.35s ease, filter 0.35s ease;
}

.site-header.is-scrolled .header-brand-logo,
body.has-page-breadcrumb .header-brand-logo {
    height: 42px;
    filter: none;
}

/* 无图时的文字回退 */
.header-brand-mark {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, #2a4a50, #1a2f34);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
}

.site-header.is-scrolled .header-brand-mark {
    border-color: rgba(var(--color-accent-rgb), 0.45);
}

.header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-brand-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.header-brand-tagline {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.4s ease;
}

.site-header.is-scrolled .header-brand-tagline {
    color: var(--color-text-muted);
}

/* -----------------------------------------------
   Nav Menu Links
----------------------------------------------- */
.header-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header-menu-list {
    display: flex;
    align-items: stretch;             /* mega 项撑满导航栏高度 */
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-menu-item {
    display: flex;
    align-items: center;
}

.header-menu-link {
    display: block;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);     /* 透明态：白色 */
    border-radius: var(--radius-md);
    transition: background var(--transition), color 0.4s ease;
}

.header-menu-link:hover,
.header-menu-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.site-header.is-scrolled .header-menu-link {
    color: var(--color-text);            /* 实色态：深色 */
}

.site-header.is-scrolled .header-menu-link:hover,
.site-header.is-scrolled .header-menu-link.is-active {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.14);
}

/* -----------------------------------------------
   CTA Button — 全站统一实心 accent，首页/内页均醒目可见
----------------------------------------------- */
.header-cta {
    white-space: nowrap;
    background: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(51, 51, 51, 0.18);
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}

.header-cta:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    box-shadow: 0 4px 14px rgba(51, 51, 51, 0.24);
}

/* 首页 Banner 透明导航：略加强阴影，保证叠在深色背景上可辨 */
.site-header:not(.is-scrolled) .header-cta {
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

/* 内页（information 等）：始终实心 accent，避免透明态不可见 */
body.has-page-breadcrumb .header-cta {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.35);
}

body.has-page-breadcrumb .header-cta:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

/* -----------------------------------------------
   Mobile Toggle（汉堡按钮）
----------------------------------------------- */
.header-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.4s ease;
}

.site-header.is-scrolled .header-mobile-toggle {
    border-color: var(--color-border);
}

.header-mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: #fff;                    /* 透明态：白色 */
    border-radius: 1px;
    transition: background 0.4s ease;
}

.site-header.is-scrolled .header-mobile-toggle span {
    background: var(--color-primary);   /* 实色态：深色 */
}

/* 移动端样式见 mobile/header_mobile.css */

/* 桌面端隐藏移动抽屉（仅 ≤992px 启用） */
.mobile-nav-overlay,
.mobile-nav-drawer {
    display: none;
}


/* =============================================================
   Mega Dropdown Navigation
   触发：MegaMenuController 添加 .is-mega-open（main.js）
         + CSS :hover / :focus-within 兜底
   面板：.mega-panel — 绝对定位，从 .header-nav 底部展开
   响应式：992px 以下隐藏（mobile 文件控制）
============================================================= */

/* ── 父级：给面板提供定位锚点 ──────────────────────────── */
.header-menu-item.has-mega {
    position: static;               /* 配合 .header-nav 的 relative */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── 链接：hover 时展示触发指示 ────────────────────────── */
.header-menu-item.has-mega > .header-menu-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-menu-item.has-mega > .header-menu-link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
    opacity: 0.6;
}

/* 箭头旋转见下方 .is-mega-open 规则 */

/* ── 面板基础 ──────────────────────────────────────────── */
.mega-panel {
    position: absolute;
    top: 100%;                      /* 紧贴导航栏底部 */
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-surface);
    border-top: 2px solid var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 48px rgba(44, 41, 38, 0.10);
    padding: 32px 0 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity  0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;
    pointer-events: none;
    z-index: 200;
}

/*  invisible bridge：消除 nav 链接与面板之间的 hover 空隙 */
.mega-panel::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

/* ── 展开：JS .is-mega-open + CSS hover/focus 兜底 ─────── */
.header-menu-item.has-mega.is-mega-open .mega-panel,
.header-menu-item.has-mega:hover .mega-panel,
.header-menu-item.has-mega:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.header-menu-item.has-mega.is-mega-open > .header-menu-link::after,
.header-menu-item.has-mega:hover > .header-menu-link::after,
.header-menu-item.has-mega:focus-within > .header-menu-link::after {
    transform: rotate(-135deg) translateY(-2px);
    opacity: 1;
}

/* ── 面板内部布局 ───────────────────────────────────────── */
.mega-inner {
    display: grid;
    gap: 0 24px;
}

/* Products / Materials Mega（定板）
   共用 split layout；行数由 Service 按条目数计算
   详见 Nadulite网站设计.md §4.0.1 */
.mega-inner.mega-products,
.mega-inner.mega-materials {
    display: block;
}

.mega-inner.mega-products .mega-heading,
.mega-inner.mega-materials .mega-heading {
    margin-bottom: 16px;
}

/* Mega 共用 split layout（Products / Materials / Collections Tab）
   ─────────────────────────────────────────────────────────
   行数：≤4 项 → --rows-1；>4 项 → --rows-2（最多 8 卡）
   系列卡图：aspect-ratio 5/3 · 占位 280×168 · 源图建议 560×336 @2x
   推广图 tall：aspect-ratio 3/4 · 占位 240×320 · 源图 480×640 @2x
   推广图 compact：aspect-ratio 5/3（与卡同框）
   详见 Nadulite网站设计.md §4.0.1 · config.megaConfig · 定版 §16.8
   ───────────────────────────────────────────────────────── */
.mega-inner.mega-collections {
    display: block;
}

.mega-inner.mega-collections .mega-heading {
    margin-bottom: 16px;
}

.mega-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: stretch;
}

.mega-split-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mega-collections-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: stretch;
}

.mega-collections-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mega-collections-views {
    position: relative;
}

.mega-collections-view {
    display: none;
}

.mega-collections-view.is-active {
    display: block;
}

/* ── Tab 按钮 ─────────────────────────────────────────────── */
.mega-collections-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.mega-collections-tab {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    padding: 8px 18px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.mega-collections-tab:hover {
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.mega-collections-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Tab 面板（已由 .mega-collections-view 承载完整布局）──────── */

.mega-card-grid,
.mega-collections-cards {
    display: grid;
    grid-template-columns: repeat(var(--mega-card-cols, var(--mega-collections-cols, 4)), minmax(0, 1fr));
    gap: 14px 16px;
    overflow: visible;
}

.mega-image-card,
.mega-collection-tab-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    background: var(--color-surface, #fff);
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
                transform: scale(1);
    transform-origin: center center;
    transition:
        transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.25s ease;
}

.mega-image-card:hover,
.mega-collection-tab-card:hover {
    position: relative;
    z-index: 2;
    will-change: transform;
    background: var(--color-surface, #fff);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    transform: scale(1.04);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .mega-image-card,
    .mega-collection-tab-card {
        transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .mega-image-card:hover,
    .mega-collection-tab-card:hover {
        transform: none;
    }
}

.mega-image-card-media,
.mega-collection-tab-card-media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    /* §16.8：定死 5:3；三端同一比例，禁止靠图片固有尺寸撑开网格 */
    aspect-ratio: 5 / 3;
    height: auto;
    background: var(--color-border);
}

.mega-image-card-media img,
.mega-collection-tab-card-media img,
.mega-image-card-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.35s ease, transform 0.45s ease;
}

.mega-image-card-img--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .mega-image-card:hover .mega-image-card-media:not(.has-hover-image) .mega-image-card-img--primary,
    .mega-image-card:focus-within .mega-image-card-media:not(.has-hover-image) .mega-image-card-img--primary {
        transform: scale(1.03);
    }

    .mega-image-card:hover .mega-image-card-media.has-hover-image .mega-image-card-img--primary,
    .mega-image-card:focus-within .mega-image-card-media.has-hover-image .mega-image-card-img--primary {
        opacity: 0;
    }

    .mega-image-card:hover .mega-image-card-img--secondary,
    .mega-image-card:focus-within .mega-image-card-img--secondary {
        opacity: 1;
        animation: megaCardHoverBreath 3.4s ease-in-out infinite;
    }
}

@keyframes megaCardHoverBreath {
    0%,
    100% {
        transform: scale(1.04);
    }
    50% {
        transform: scale(1.07);
    }
}

@media (max-width: 768px) {
    .mega-image-card-img--secondary {
        display: none;
    }
}

.mega-image-card-body,
.mega-collection-tab-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-image-card-label,
.mega-collection-tab-card-label {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.mega-image-card-desc,
.mega-collection-tab-card-desc {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ── 推广侧栏：单行主区（compact）──────────────────────────── */
.mega-promo-compact {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.mega-promo-compact-media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    /* §16.8：compact 与卡同框 5:3 */
    aspect-ratio: 5 / 3;
    height: auto;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.mega-promo-compact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.mega-promo-compact-media:hover img {
    transform: scale(1.04);
}

.mega-promo-compact-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-promo-compact-eyebrow {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.mega-promo-compact-title {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.mega-promo-compact-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.mega-promo-compact-body {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mega-promo-compact-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition), transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mega-promo-compact-cta:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* ── 推广侧栏：双行主区（tall）────────────────────────────── */
.mega-promo-tall {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.mega-promo-tall-media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    /* §16.8：定死 3:4（与 megaConfig.MEGA_PROMO_IMAGE_RATIO 一致）；勿再用 min-height 撑框 */
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.mega-promo-tall-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.mega-promo-tall-media:hover img {
    transform: scale(1.04);
}

.mega-promo-tall-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-promo-tall-eyebrow {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.mega-promo-tall-title {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.mega-promo-tall-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.mega-promo-tall-body {
    margin: 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.mega-promo-tall-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mega-promo-tall-cta:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* 向后兼容旧类名（勿在新模板中使用） */
.mega-collections-promo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.mega-collections-promo-media {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    min-height: 200px;
    flex: 1;
}

.mega-collections-promo-media img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.mega-collections-promo-media:hover img {
    transform: scale(1.04);
}

.mega-collections-promo-media-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega-collections-promo-eyebrow {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.mega-collections-promo-media-title {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.mega-collections-promo-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.mega-collections-promo-body {
    margin: 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.mega-collections-promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mega-collections-promo-cta:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ── 第 8 格 +N More 溢出卡（现代叠卡 + 徽章）──────────────── */
.mega-image-card--more {
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    background: linear-gradient(145deg, #fff 0%, rgba(250, 248, 245, 0.95) 100%);
    overflow: hidden;
}

.mega-image-card--more:hover {
    border-color: rgba(var(--color-accent-rgb), 0.45);
    background: linear-gradient(145deg, #fff 0%, rgba(245, 242, 238, 1) 100%);
}

.mega-image-card-media--more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--color-accent-rgb), 0.14) 0%, transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 240, 234, 0.85) 100%);
    overflow: hidden;
}

.mega-more-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.mega-image-card--more:hover .mega-more-shimmer {
    transform: translateX(100%);
}

.mega-more-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.mega-more-stack {
    position: relative;
    width: 72px;
    height: 44px;
}

.mega-more-stack-card {
    position: absolute;
    left: 50%;
    width: 52px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateX(-50%);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease;
}

.mega-more-stack-card--1 {
    top: 0;
    z-index: 3;
}

.mega-more-stack-card--2 {
    top: 6px;
    z-index: 2;
    opacity: 0.85;
}

.mega-more-stack-card--3 {
    top: 12px;
    z-index: 1;
    opacity: 0.65;
}

.mega-image-card--more:hover .mega-more-stack-card--1 {
    transform: translateX(-50%) translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.mega-image-card--more:hover .mega-more-stack-card--2 {
    transform: translateX(-50%) translateY(-1px);
}

.mega-more-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease;
}

.mega-image-card--more:hover .mega-more-badge {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.mega-more-badge-count {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mega-more-badge-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.mega-image-card-body--more {
    gap: 6px;
}

.mega-image-card-body--more .mega-image-card-label {
    font-size: 0.84rem;
}

.mega-more-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: gap 0.25s ease, color 0.25s ease;
}

.mega-image-card--more:hover .mega-more-cta {
    gap: 7px;
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .mega-more-shimmer,
    .mega-more-stack-card,
    .mega-more-badge,
    .mega-more-cta {
        transition: none;
    }

    .mega-image-card--more:hover .mega-more-shimmer {
        transform: translateX(-100%);
    }
}

.mega-inner.mega-collections .mega-footer {
    margin-top: 18px;
    grid-column: auto;
}

@media (max-width: 1200px) {
    .mega-card-grid,
    .mega-collections-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .mega-split-layout,
    .mega-collections-layout {
        grid-template-columns: 1fr;
    }

    .mega-promo-compact,
    .mega-promo-tall {
        display: none;
    }
}

/* ── 标题行 ─────────────────────────────────────────────── */
.mega-heading {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    grid-column: 1 / -2;           /* 跨越主列，不含侧边 */
}

/* ── 每张卡片 ───────────────────────────────────────────── */
.mega-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition);
}

.mega-card:hover {
    background: var(--color-bg);
}

.mega-card-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 4px;
}

.mega-card-label {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.mega-card-desc {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* ── 侧边栏（featured / promo block）──────────────────── */
.mega-side {
    grid-row: 1 / 3;
    grid-column: 5;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.mega-side-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.mega-side-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-primary);
    line-height: 1.4;
    margin: 0;
}

.mega-side-body {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    flex: 1;
}

.mega-side-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition);
    margin-top: auto;
}

.mega-side-link:hover {
    color: var(--color-accent-hover);
}

.mega-side-link::after {
    content: '→';
}

/* ── 底部"查看全部"链接行 ──────────────────────────────── */
.mega-footer {
    grid-column: 1 / -2;
    display: flex;
    justify-content: flex-start;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
}

.mega-view-all {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
}

.mega-view-all:hover {
    color: var(--color-accent-hover);
}

.mega-view-all::after {
    content: '→';
    font-size: 0.85rem;
}

/* ── 需要 .header-nav 提供 relative ─────────────────────── */
.header-nav {
    position: relative;
}

/* ── 在 ≤ 992px 禁用面板（移动端用 mobile CSS 的折叠菜单）─ */
@media (max-width: 992px) {
    .mega-panel {
        display: none !important;
    }

    .header-menu-item.has-mega > .header-menu-link::after {
        display: none;
    }
}