@charset "utf-8";
/* ============================================================================
* 讯鹤礼品代发网 · 移动端适配层 v1.19
* ----------------------------------------------------------------------------
* 设计依据：用户确认的效果图（01-礼品下单-移动端对照.html）
* ① 顶栏只留 LOGO + 汉堡，搜索/注册/登录收进抽屉
* ② 主导航变横滑标签条
* ③ 左侧栏折叠成左上角汉堡抽屉（滑出式，遮罩可关）
* ④ 表格改「一单一张卡」，信息纵向排列
* ⑤ 输入框 16px 防 iOS 自动放大
* ⑥ 客服按钮圆形化，底部栏取消 fixed
*
* 引入方式：由 public/header.html 在 common.css 之后引入，保证优先级最高。
* 断点：≤1024 平板 / ≤768 手机 / ≤480 小屏
* ========================================================================== */
/* 版本历史
* ---------------------------------------------------------------------------
* v1.19 顶栏层级对齐设计稿 + auth 页收尾（用户 2026-09-29 反馈）
* + 1.2 修「注册/登录掉到第二行」：原站 header 内联样式
* @media(max-width:900px){#header .auth{flex:0 0 100%}} +
* @media(max-width:1300px){#header .htop .wrap{flex-wrap:wrap}}
* 与本文件同为 (0,2,0) 权重、且内联样式在 之后 → 内联赢。
* 必须 !important 才能压回「顶栏右侧小胶囊」。
* + 0.6 修「红色介绍栏没隐藏」：原站 xh-auth.css 的
* .xh-auth-page .xh-auth-intro{display:flex!important} 与本文件同权重、
* 且 xh-auth.css 在该页后加载 → 它赢。改成更高权重 + !important。
* + 0.7 auth 页隐藏右下角客服浮球（.rightqq），它固定定位会压住表单。
* v1.18 下单页对齐设计稿（用户 2026-09-29 反馈）
* + 8.6 礼品信息「图左 + 名称/标签右」重排（设计稿 .g-head 写法）
* + 11 会员菜单横滑胶囊条（设计稿 .m-menu 写法），JS 注入
* v1.17 下单页吸底栏接入业务元素 + 表格卡片化缺陷修复（坑 5 / 坑 6）
* v1.15 首版：顶栏汉堡 + 导航横滑 + 侧栏抽屉 + 表格卡片化 + 表单 16px
* ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
* 0. 全局：解除桌面端锁宽（common.css:8 的 body{min-width:1200px} 是全站锁死源头）
* ------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
html, body {
min-width: 0 !important;
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%; /* 防横屏字号被放大 */
}
body {
font-size: 15px;
}
/* 所有固定宽度容器一律改为流式。
⚠ 坑 7（v1.18 踩到并修复）：这里早期写的是裸 `.wrap` `img` `table`，
没有任何父级限定 —— 结果命中了登录页/注册页自己的网格布局
（.xh-auth-shell 是 `display:grid;grid-template-columns:300px minmax(0,1fr)`），
把 `minmax(0,1fr)` 那列压成了 38px，整个表单挤成一条竖线、按钮溢出到屏外。
修法两条：
① 给通用容器加父级限定，让它们只作用于「主内容区」，不再全站裸奔
② 用 :where() 把选择器权重降到 0，这样页面自己的样式永远能赢
③ 顺手把 .xh-auth-page（登录/注册/找回密码）整体排除在外 */
:where(.outer-wrap, .page-body, .site-main) :where(.wrap):not(#header .wrap),
:where(#header) :where(.wrap),
:where(.wrapper):not(#header .wrapper),
:where(.center),
:where(.main-wrap),
:where(.col-main) {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
/* 登录 / 注册 / 找回密码页：它们是独立布局，有自己完整的响应式规则
（xh-auth.css 的 @media(max-width:780px)），移动端适配层不得介入其内部结构 */
.xh-auth-page,
.xh-auth-page * {
/* 只保留「不越界」这一条底线，不碰任何尺寸/布局 */
max-width: 100%;
}
.xh-auth-page { min-width: 0; }
/* 图片/表格限宽同样排除 auth 页（否则 .xh-control 会被压） */
img, video, iframe, table {
max-width: 100%;
}
.xh-auth-page img,
.xh-auth-page video,
.xh-auth-page iframe,
.xh-auth-page table { max-width: 100%; }
img {
height: auto;
}
/* 触控目标最小 44px 高，避免误点 */
a, button, input[type="submit"], .btn {
-webkit-tap-highlight-color: rgba(230, 0, 18, .08);
}
}
/* ===========================================================================
* 0.5 登录 / 注册 / 找回密码页 —— 修 xh-auth.css 自带的 `!important` 死锁
*
* 现象（v1.18 排查）：
* .xh-auth-shell 在任何手机尺寸下都保持 display:grid 且
* 列宽 = 300px + 1fr，实测 390px 屏上算出 "300px 68px"，
* 表单区只剩 38~68px，输入框挤成一条竖线、提交按钮溢出到屏外。
*
* 根因：
* xh-auth.css:5 .xh-auth-page .xh-auth-shell{display:grid!important} ← 权重 0,2,0 + !important
* xh-auth.css:95 @media(max-width:780px){ .xh-auth-shell{display:block} } ← 权重 0,1,0，无 !important
* 后者永远打不过前者，所以手机端从未真正变成单列。
* 这是原站样式自带的缺陷（不是本次适配引入），只是以前没人用手机看。
*
* 修法：用同等权重 + !important 覆盖，把 780px 以下的单列布局真正生效。
* ======================================================================== */
@media screen and (max-width: 1024px) {
/* 先把 781~1024 的夹缝区间也收成单列（原站只管到 780） */
.xh-auth-page .xh-auth-shell,
.xh-auth-page .xh-login-shell,
.xh-auth-shell,
.xh-login-shell {
display: block !important;
width: 100% !important;
max-width: 660px !important;
min-height: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
grid-template-columns: none !important;
}
.xh-auth-page {
padding: 18px 10px 30px !important;
}
/* 介绍栏在窄屏不再与表单并排争宽 */
.xh-auth-page .xh-auth-intro { display: none !important; }
/* 表单区铺满、内边距收紧 */
.xh-auth-panel,
.xh-login-shell .xh-auth-panel {
display: block !important;
width: auto !important;
max-width: 100% !important;
padding: 20px 17px 24px !important;
box-sizing: border-box !important;
}
.xh-login-form,
.xh-forgot-form { width: auto !important; max-width: 100% !important; }
/* 字段从「左标签 + 右输入」改为上下堆叠 */
.xh-login-form .xh-field,
.xh-forgot-form .xh-field,
.xh-field,
.xh-field-full {
display: block !important;
grid-template-columns: none !important;
margin-bottom: 12px !important;
}
.xh-login-form .xh-field > label,
.xh-forgot-form .xh-field > label,
.xh-field > label {
display: block !important;
width: auto !important;
text-align: left !important;
margin-bottom: 5px !important;
}
.xh-form-grid { display: block !important; }
.xh-submit { width: 100% !important; }
/* 验证码行：输入 + 按钮，保证不溢出 */
.xh-code-group {
grid-template-columns: minmax(0, 1fr) 104px !important;
gap: 7px !important;
}
.xh-code-btn { width: auto !important; min-width: 0 !important; }
.xh-auth-heading { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; }
.xh-secure { flex: none; }
.xh-auth-page .xh-control,
.xh-auth-page input,
.xh-auth-page textarea { max-width: 100% !important; box-sizing: border-box !important; }
.xh-login-tools { padding-left: 0 !important; flex-wrap: wrap; gap: 10px; }
}
/* ===========================================================================
* 0.6 auth 页：左侧红色介绍栏 .xh-auth-intro → 收成「顶部品牌条」
*
* ★ 为什么改了两次才对（坑 9，值得记下来）：
* 第一版我写 display:none 想直接藏掉，压不动。原因是 login.html / reg.html
* 在