/* Top Bar联系方式并排 */
.topbar-contact {
    display: flex;;
    gap: 15px; /* 两个元素之间的间距 */
    align-items: center;
}

/* =========================================================
   Desktop Mega Menu 样式（VistaPrint 风格）
   仅在桌面端 1025px 及以上生效
========================================================= */
@media (min-width: 1025px) {

    /* ========== 根导航容器 ========== */
    #masthead .giftizen-mega-nav {
        position: static;               /* 禁止形成局部坐标系，面板绝对定位基于视口 */
        width: 100%;                    /* 占满全宽 */
    }

    /* ========== 一级类目 UL ========== */
    #masthead .giftizen-mega-nav .mega-level-1 {
        display: flex;                  /* 水平排列一级类目 */
        gap: 30px;                      /* 一级类目之间间距 */
        list-style: none;               /* 移除默认列表样式 */
        margin: 0;                       /* 清除默认外边距 */
        padding: 0;                      /* 清除默认内边距 */
    }

    /* ========== 一级类目链接 ========== */
    #masthead .giftizen-mega-nav .mega-link {
        position: relative;             /* 用于下划线伪元素 */
        display: inline-flex;           /* 水平排列文本与箭头 */
        align-items: center;            /* 垂直居中 */
        padding: 15px 0;                /* 上下内边距 */
        font-size: 15px;                /* 一级类目字体大小 */
        font-weight: 500;               /* 一级类目加粗 */
        color: #1f2933;                 /* 深灰色文字 */
        text-decoration: none;          /* 移除下划线 */
        white-space: nowrap;            /* 避免换行 */
    }

    /* ========== 一级类目红色下划线 ========== */
    #masthead .giftizen-mega-nav .mega-link::after {
        content: '';                   /* 空内容伪元素 */
        position: absolute;             /* 绝对定位相对于 mega-link */
        left: 0;                     /* 左边贴齐 */
        bottom: -2px;                  /* 位于文字下方 */
        width: 100%;                   /* 宽度覆盖整个文字 */
        height: 2.5px;                 /* 下划线高度 */
        background: #e11900;            /* 品牌红色 */
        transform: scaleX(0);           /* 初始隐藏状态 */
        transform-origin: center;        /* 动画起点 */
        transition: transform .25s ease;   /* 动画平滑 */
    }

    /* ========== 一级类目悬停显示下划线 ========== */
    #masthead .giftizen-mega-nav .mega-item.has-mega:hover > .mega-link::after {
        transform: scaleX(1);           /* 悬停展开下划线 */
    }

    /* ========== 下拉面板 ========== */
    #masthead .giftizen-mega-nav .mega-panel {
        position: absolute;              /* 绝对定位 */
        top: 100%;                    /* 正好在 header 底部下方 */
        left: 0;                      /* 左边贴齐视口 */
        width: 100vw;                   /* 占满视口宽度 */
        max-width: 100vw;                /* 最大宽度 */
        background: #ffffff;              /* 白色背景 */
        padding: 20px 20px;               /* 内边距 */
        box-shadow: 0 12px 30px rgba(0,0,0,.12); /* 阴影 */
        display: none;                   /* 默认隐藏 */
        z-index: 9999;                   /* 层级最高 */
    }

    /* ========== 一级类目悬停显示面板 ========== */
    #masthead .giftizen-mega-nav .mega-item.has-mega:hover > .mega-panel {
        display: block;                  /* 悬停显示面板 */
    }

    /* ========== 面板内部容器（左右分栏） ========== */
    #masthead .giftizen-mega-nav .mega-panel-inner {
        max-width: 1280px;               /* 最大内容宽度 */
        margin: 0 auto;                 /* 居中 */
        display: flex;                  /* 左右 Flex 布局 */
        gap: 20px;                     /* 左右间距 */
    }

    /* ========== 左侧类目区域（5/6） ========== */
    #masthead .giftizen-mega-nav .mega-cats {
        flex: 0 0 83.3333%;             /* 占面板宽度 5/6 */
        min-width: 0;                 /* 防止溢出 */
    }

    /* ========== 左侧类目网格（自动列宽） ========== */
    #masthead .giftizen-mega-nav .mega-grid {
        display: grid;                   /* 网格布局 */
        grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); /* 列宽最小120px，最大根据内容撑开 */
        column-gap: 36px;                /* 列间距 */
        row-gap: 26px;                   /* 行间距 */
		   justify-content: center;            /* 列少时居中显示 */
		   max-width: calc(5 * 180px + 4 * 48px);   /* 最大5列时总宽，超过5列会换行 */
    }

    /* ========== 二级类目标题（可点击，无横线） ========== */
    #masthead .giftizen-mega-nav .mega-col-title {
        font-size: 14px;                 /* 二级类目字体大小 */
        font-weight: 500;                /* 加粗 */
        margin-bottom: 10px;             /* 下方间距 */
        color: #1f2933;                  /* 深灰色 */
        padding-bottom: 0;               /* 内边距清零 */
        border-bottom: none;             /* 移除下划线 */
        display: inline-block;           /* 保持热区 */
        text-decoration: none;           /* 移除下划线 */
    }

    /* ========== 二级类目悬停颜色 ========== */
    #masthead .giftizen-mega-nav .mega-col-title:hover {
        color: #e11900;                  /* 红色 */
    }

    /* ========== 三级类目列表 ========== */
    #masthead .giftizen-mega-nav .mega-level-3 {
        list-style: none;                /* 移除默认圆点 */
        margin: 0;                     /* 外边距清零 */
        padding: 0;                    /* 内边距清零，保证左对齐 */
    }

    /* ========== 三级类目链接 ========== */
    #masthead .giftizen-mega-nav .mega-level-3 li a {
        display: block;                   /* 整行可点击 */
        padding: 6px 0;                   /* 上下内边距 */
        font-size: 13.8px;                  /* 字号 */
        color: #4a5568;                   /* 中灰色 */
        text-decoration: none;            /* 移除下划线 */
        line-height: 1.4;                 /* 行高 */
    }

    /* ========== 三级类目悬停 ========== */
    #masthead .giftizen-mega-nav .mega-level-3 li a:hover {
        color: #e11900;                   /* 红色 */
    }

    /* ========== 右侧 Promo 区域（1/6） ========== */
    #masthead .giftizen-mega-nav .mega-promo {
        flex: 0 0 16.6667%;               /* 占面板宽度 1/6 */
        display: flex;                  /* 弹性布局 */
        align-items: flex-start;           /* 顶部对齐 */
    }

    /* ========== Promo 链接块 ========== */
    #masthead .giftizen-mega-nav .mega-promo-link {
        display: block;                  /* 整块可点击 */
        text-decoration: none;             /* 移除下划线 */
        border-radius: 8px;               /* 圆角 */
        overflow: hidden;                 /* 裁切溢出 */
        background: #f9fafb;               /* 浅灰背景 */
        transition: transform .25s ease, box-shadow .25s ease; /* Hover 动画 */
    }

    /* ========== Promo Hover 效果 ========== */
    #masthead .giftizen-mega-nav .mega-promo-link:hover {
        transform: translateY(-2px);        /* 上移 */
        box-shadow: 0 12px 24px rgba(0,0,0,.12); /* 阴影 */
    }

    /* ========== Promo 图片 ========== */
    #masthead .giftizen-mega-nav .mega-promo-image img {
        width: 100%;                        /* 宽度自适应 */
        height: auto;                       /* 高度自适应 */
        display: block;                     /* 消除空隙 */
    }

    /* ========== Promo 文案 ========== */
    #masthead .giftizen-mega-nav .mega-promo-text {
        padding: 14px 16px;                 /* 内边距 */
        font-size: 14px;                     /* 字号 */
        font-weight: 500;                    /* 半粗 */
        color: #1f2933;                      /* 深色文字 */
        line-height: 1.4;                    /* 行高 */
    }

}

/* =====================================================
   移动端 Mega Menu（≤1024px）最终稳定版
   行为模型：与 Astra 页脚手风琴 1:1 一致
===================================================== */
@media (max-width: 1024px) {

    /* =================================================
       【一】Astra Mobile Popup 所有中间容器强制全宽
       目的：彻底消灭右侧固定空白区
    ================================================= */

    .ast-mobile-popup,
    .ast-mobile-popup-inner,
    .ast-mobile-popup-content,
    .ast-mobile-popup-content nav,
    .ast-mobile-popup-content .ast-builder-layout-element,
    .ast-mobile-popup-content .ast-builder-html-element {
        display: block;          /* 强制块级，移除 flex/grid */
        width: 100%;             /* 强制全宽 */
        max-width: 100%;         /* 禁止内容撑宽 */
        min-width: 100%;         /* 禁止收缩 */
        margin: 0;               /* 清空外边距 */
        padding: 0;              /* 清空内边距 */
        box-sizing: border-box;             /* 统一盒模型 */
		   will-change: contents;        /* 新增：硬件加速基础 */
    }
    /* =================================================
       【二】Mega Nav 根节点（全宽锁定）
    ================================================= */
    .giftizen-mega-nav {
        display: block;          /* 不参与任何布局系统 */
        width: 100%;             /* 全宽 */
        max-width: 100%;         /* 锁死最大宽度 */
        min-width: 100%;         /* 锁死最小宽度 */
        margin: 0;               /* 无外边距 */
        padding: 0;              /* 无内边距 */
		   transform: translateZ(0);    /* 新增：开启硬件加速层 */
		   will-change: max-height;
    }

    /* 一级列表纵向排列 */
    .giftizen-mega-nav .mega-level-1 {
        display: block;                     /* 垂直流 */
        width: 100%;                        /* 全宽 */
        margin: 0;                          /* 清空默认 margin */
        padding: 0;                         /* 清空默认 padding */
        list-style: none;                  /* 去掉列表样式 */
    }
	
	 /* =================================================
       【三】彻底移除 mega-grid 的布局干扰
    ================================================= */
    .giftizen-mega-nav .mega-grid {
        display: block;          /* 禁用 grid */
        width: 100%;             /* 全宽 */
        max-width: 100%;         /* 锁死 */
        margin: 0;               /* 清空外边距 */
        padding: 0;              /* 清空内边距 */
    }

    /* =================================================
       【四】一级类目（手风琴 Header）
    ================================================= */
     .giftizen-mega-nav .mega-item {
        display: block;                     /* 块级 */
        width: 100%;                        /* 全宽 */
        position: relative;                 /* 供分隔线使用 */
		   border-bottom: 1px solid #e5e7eb;       /* 新增：分隔线改为 border，避免 absolute 重绘 */
		   margin: 0 16px;                  /* 新增：内缩分隔线，替代伪元素 */              
    }

    /* 一级标题行 */
    .giftizen-mega-nav .mega-link {
        display: flex;                      /* 左文字右箭头 */
        align-items: center;                /* 垂直居中 */
        justify-content: space-between;     /* 两端对齐 */
        width: 100%;                        /* 点击区全宽 */
        padding: 14px 0;            /* 去掉左右padding，靠父元素margin内缩 */
        font-size: 16px;                    /* 字号 */
        font-weight: 500;                   /* 字重 */
        color: #1f2933;                     /* 字色 */
        text-decoration: none;              /* 去下划线 */
        box-sizing: border-box;             /* 防止溢出 */
		   transform: translateZ(0);          /* 新增：硬件加速 */
    }

    /* 一级线性箭头（默认向右） */
    .giftizen-mega-nav .mega-link::after {
        content: "";                        /* 伪元素箭头 */
        width: 8px;                         /* 箭头尺寸 */
        height: 8px;
        border-right: 2px solid #4b5563;    /* 右线 */
        border-bottom: 2px solid #4b5563;   /* 下线 */
        transform: rotate(-45deg) translateX(-5px);          /* ★ 默认向右（核心修改） */
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);     /* 优化：仅过渡transform，更丝滑 */
		   transform-origin: center;           /* 新增：硬件加速 */
        will-change: transform;
    }

    /* 一级展开时箭头向左 */
    .giftizen-mega-nav .mega-item.is-open > .mega-link::after {
        transform: rotate(135deg) translateX(-5px);          /* ★ 展开向左（核心修改） */
    }

    /* =================================================
       【五】一级下拉面板（页脚同款动画模型）
    ================================================= */
    .giftizen-mega-nav .mega-panel {
        display: block;                     /* 永远存在于文档流 */
        width: 100%;                        /* 全宽 */
        max-height: 0;                      /* 默认折叠 */
        overflow: hidden;                   /* 隐藏内容 */
        transition: max-height 0.15s cubic-bezier(0.4, 0, 1, 1);  /* 优化1：时长从0.25s→0.15s，更即时 *//* 优化2：缓动曲线改为“快出”，折叠时更干脆 */
        transform: translateZ(0);             /* 新增：硬件加速 */
		   will-change: max-height;
    }

    /* 一级展开状态 */
    .giftizen-mega-nav .mega-item.is-open > .mega-panel {
        max-height: 2200px;                /* 足够用，且比2000px计算量少 */
    }

    /* 面板内部容器 */
    .giftizen-mega-nav .mega-panel-inner {
        width: 100%;                        /* 全宽 */
        margin: 0;                          /* 清空 margin */
        padding: 0;                         /* 清空 padding */
    }

    /* =================================================
       【六】二级类目（手风琴 Header）
    ================================================= */
    .giftizen-mega-nav .mega-col {
        display: block;                     /* 块级 */
        width: 100%;                        /* 全宽 */
		   margin: 0 16px;                    /* 新增：内缩，和一级保持一致 */
		   border-bottom: 1px solid #e5e7eb;
    }
	  
    .giftizen-mega-nav .mega-col-title {
        display: flex;                          /* 左文字右箭头 */
        align-items: center;                    /* 垂直居中 */
        justify-content: space-between;         /* 两端对齐 */
        width: 100%;                            /* 全宽 */
        padding: 12px 0;               /* 去掉左右padding，靠父元素margin内缩 */
        font-size: 15px;                        /* 字号 */
        font-weight: 500;                       /* 字重 */
        color: #1f2933;                         /* 颜色 */
        cursor: pointer;                        /* 手型 */
        text-decoration: none;                  /* 去下划线 */
		   transform: translateZ(0);            /* 硬件加速 */
    }

    /* 二级线性箭头 */
    .giftizen-mega-nav .mega-col-title::after {
        content: "";                            /* CSS 箭头 */
        width: 8px;
        height: 8px;
        border-right: 2px solid #6b7280;
        border-bottom: 2px solid #6b7280;
        transform: rotate(45deg) translateX(-5px);         /* 替换margin-right：transform向左移5px */
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
		   transform-origin: center;
        will-change: transform;
    }

    /* 二级展开时箭头向上 */
    .giftizen-mega-nav .mega-col.is-open > .mega-col-title::after {
        transform: rotate(-135deg) translateX(-5px);
    }

    /* =================================================
       【七】三级类目列表（纯内容区）
    ================================================= */
    .giftizen-mega-nav .mega-level-3 {
        overflow: hidden;                       /* 折叠隐藏 */
		   display: block;
		   width: 100%;
        max-height: 0;                          /* 默认折叠 */
        transition: max-height 0.15s cubic-bezier(0.4, 0, 1, 1);   /* 优化：时长0.15s + 快出曲线 */
        margin: 0;                              /* 清外边距 */
        padding: 0;                             /* 清内边距 */
		   transform: translateZ(0);
    }

    /* 二级展开时显示三级 */
    .giftizen-mega-nav .mega-col.is-open > .mega-level-3 {
        max-height: 800px;          /* 减少计算量 */
    }

    /* 三级类目链接 */
    .giftizen-mega-nav .mega-level-3 li a {
        display: block;                         /* 整行可点 */
		   width: 100%;
        padding: 10px 0;                   /* 仅上下padding */
        font-size: 15px;                        /* 字号 */
        color: #4a5568;                         /* 灰色文字 */
        text-decoration: none;                  /* 去下划线 */
    }

    /* 点击反馈 */
    .giftizen-mega-nav .mega-level-3 li a:active {
        background-color: #f1f5f9;              /* 轻微反馈 */
    }

    /* =================================================
       【八】移动端隐藏 Promo 区
    ================================================= */
    .giftizen-mega-nav .mega-promo {
        display: none;                          /* 不显示 */
    }
}