/* ===== 溯源查询页（07-溯源查询.psd 还原） 依赖 style.css 的变量与公共组件 ===== */

/* 整页米白底（溯源查询区采样 250,248,244） */
body { background: #faf8f4; }

/* ---- 页头横幅（设计稿 y 92-492 → 400px 高） ----
   PSD“首屏渐变遮罩”层与官方 1.jpg 逐点比对无压暗 → 本页 hero 无遮罩（异于 industry/partners） */
.page-hero {
  position: relative; height: 400px;
  background: url('../images/trace/hero.webp') center / 100% 100% no-repeat;
}
/* PSD 标题 x=250：1420 容器（同产业布局/合作伙伴页，非共享 1320） */
.hero-inner { width: 1420px; max-width: 92%; margin: 0 auto; padding-top: 158px; }
/* 标题 FontSize 58 / Tracking 65(≈3.8px) 白色；墨迹 252-305（section 内 160-213） */
.hero-inner h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: 58px; line-height: 1; letter-spacing: 3.8px; color: #fff;
}
/* 副标题 14px / Tracking 130(≈1.8px) #F4EFE6；墨迹 343-354，与标题墨迹底 305 间距 38 */
.hero-inner p { margin-top: 30px; font-size: 14px; line-height: 1.5; letter-spacing: 1.8px; color: #f4efe6; }

/* ---- 溯源查询区（y 492-1104）：左表单 + 右全链路信息，容器 1320 ---- */
.query-wrap { padding: 115px 0 112px; }  /* 内容顶 607（-492=115）；步骤竖线底 992→1104=112 */
.q-flex { display: flex; align-items: flex-start; }
.q-form { flex: 1 1 auto; min-width: 0; }
.q-tip { font-size: 16px; line-height: 1.4; color: #706a62; }  /* 16px #706A62，墨迹 613-626 */
/* 产品溯源码 14px / Tracking 25(≈0.35px) #5B5144，墨迹 671-682 */
.q-label { display: block; margin-top: 38px; font-size: 14px; line-height: 1.4; letter-spacing: .35px; color: #5b5144; }
.q-row { display: flex; align-items: center; gap: 1px; margin-top: 13px; }
/* 输入框：PSD x300-1088（宽随容器 flex 复算 788）、高 59，内底 #FFFDF9、1px 边框 #D4C8B7（横纵扫描实测） */
.q-row input {
  flex: 1 1 auto; min-width: 0; height: 59px;
  padding: 0 17px;  /* placeholder 字 x317 = 框左 300+17 */
  background: #fffdf9; border: 1px solid #d4c8b7; border-radius: 0; outline: none;
  font-family: var(--sans); font-size: 15px; color: #282725;
}
.q-row input::placeholder { color: #938a7d; }  /* 15px #938A7D */
.q-row input:focus { border-color: #ad8963; }
/* 查询按钮：官方切图 014_PC_查询（自带默认/悬停双态），紧贴输入框 1px 缝
   高度按切图原生比例 228×122 换算（114×122/228≈61），避免 100% 100% 非等比拉伸 */
.q-btn { width: 114px; height: 61px; flex: none; background: url('../icons/014_PC_查询_默认@2x.png') center / 100% 100% no-repeat; }
.q-btn:hover { background-image: url('../icons/014_PC_查询_悬停@2x.png'); }
/* 扫码提示 13px #706A62；输入框底 759 → 墨迹 781 */
.q-scan { margin-top: 18px; font-size: 13px; line-height: 1.5; color: #706a62; }

/* ---- 查询结果（驰亚 SecurityQuery 返回；延续表单区暖棕体系） ---- */
.q-result { margin-top: 30px; padding: 28px 32px; background: #fffdf9; border: 1px solid #d4c8b7; }
/* 状态徽标：正品金棕 / 异常砖红 / 未激活灰棕 */
.qr-badge {
  display: inline-block; padding: 9px 22px;
  font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: 2px;
  color: #ad8963; border: 1px solid #ad8963; background: #faf4ea;
}
.qr-badge.qr-bad { color: #b04a3a; border-color: #b04a3a; background: #f9efec; }
.qr-badge.qr-idle { color: #938a7d; border-color: #b9ad9d; background: #f4f0e8; }
.qr-prompt { margin-top: 14px; font-size: 15px; line-height: 1.8; color: #5a554e; }
.q-result.is-err .qr-badge { color: #b04a3a; border-color: #b04a3a; background: #f9efec; }
.q-result.is-err .qr-prompt { color: #b04a3a; }
.qr-body { display: flex; align-items: flex-start; gap: 24px; margin-top: 18px; }
.qr-goods { width: 132px; height: 132px; flex: none; object-fit: contain; background: #fff; border: 1px solid #e2dacf; }
.qr-info { flex: 1 1 auto; min-width: 0; }
.qr-goods-name { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.4; color: #282725; }
.qr-goods-name + .qr-prompt { margin-top: 8px; }
.qr-meta { margin-top: 10px; font-size: 13px; line-height: 1.7; letter-spacing: .3px; color: #938a7d; }

/* ---- 溯源栏目列表（驰亚溯源接口 traceNameInfo） ---- */
.qr-trace-list { list-style: none; margin-top: 20px; border-top: 1px solid #e2dacf; padding-top: 6px; }
.qr-trace-item { border-bottom: 1px solid #eee7da; }
.qr-trace-head { display: flex; align-items: center; min-height: 46px; gap: 12px; }
.qr-trace-icon { width: 24px; height: 24px; flex: none; object-fit: contain; }
.qr-trace-name { font-size: 15px; line-height: 1.6; color: #5a554e; }
.qr-trace-toggle { margin-left: auto; flex: none; font-size: 12px; color: #ad8963; cursor: pointer; user-select: none; letter-spacing: .5px; }
.qr-trace-toggle:hover { color: #8a6d4a; }

/* ---- 溯源栏目详情（GetAllTraceInfo 返回的节点明细） ---- */
.qr-trace-detail { padding: 6px 0 16px 36px; }
.qr-trace-detail-inner { border-left: 1px solid #eee7da; padding-left: 18px; }
.qr-td-row { padding: 10px 0; }
.qr-td-row + .qr-td-row { border-top: 1px dashed #f0eadf; }
.qr-td-name { display: block; font-size: 13px; line-height: 1.6; letter-spacing: .3px; color: #a89272; margin-bottom: 3px; }
.qr-td-text { display: block; font-size: 14px; line-height: 1.9; color: #3d3a34; word-break: break-word; white-space: pre-wrap; }
.qr-td-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.qr-td-img { width: 120px; height: 120px; object-fit: cover; border: 1px solid #e2dacf; background: #fff; }
.qr-td-videos { margin-top: 8px; }
.qr-td-video { display: block; max-width: 340px; width: 100%; background: #000; }

/* ---- 查询加载效果 ---- */
.q-result.is-loading { display: flex; align-items: center; justify-content: center; min-height: 90px; }
.qr-loading { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #5a554e; }
.qr-spin {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2px solid #e2dacf; border-top-color: #ad8963;
  animation: qr-rotate .8s linear infinite;
}
@keyframes qr-rotate { to { transform: rotate(360deg); } }

/* ---- 图片灯箱放大 ---- */
.qr-td-img { cursor: zoom-in; }
.qr-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); cursor: zoom-out;
}
.qr-lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; background: #fff; box-shadow: 0 6px 40px rgba(0,0,0,.5); }
.qr-lightbox-close {
  position: absolute; top: 18px; right: 26px;
  font-size: 42px; line-height: 1; color: #fff; cursor: pointer; user-select: none; opacity: .9;
}
.qr-lightbox-close:hover { opacity: 1; }

/* ---- 右列：全链路信息（竖线 x1315 y604-992 → 1px #E2DACF；内容 x1361-1620） ---- */
.q-steps {
  flex: none; width: 305px; margin-left: 112px;  /* 表单右缘 1203 → 竖线 1315 */
  margin-top: -4px; padding: 4px 0 25px 45px;    /* 竖线顶 604（内容顶上方 4px）、底到 992 */
  border-left: 1px solid #e2dacf;
}
/* 全链路信息 13px / Tracking 100(≈1.3px) #706A62 */
.q-steps h3 { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 1.3px; color: #706a62; }
/* 步骤行：以 22px 图标定行高，行距 73（图标 bbox 653/726/799/872/945 实测 pitch） */
.q-steps li { display: flex; align-items: center; height: 22px; margin-top: 51px; }
.q-steps li:first-child { margin-top: 26px; }  /* 全链路信息行底 626 → 首图标 653 */
.q-num { width: 16px; font-family: var(--serif); font-size: 14px; line-height: 1; color: #a89272; }
.q-steps li img { width: 22px; height: 22px; margin-left: 13px; }  /* 数字右 1377 → 图标 1390 */
.q-name { margin-left: 14px; font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1; color: #282725; }  /* 图标右 1412 → 文字 1426 */

/* ---- 标准体系区（y 1104-1865，底色采样 #F0EBE3） ---- */
.std-wrap { background: #f0ebe3; padding: 154px 0 149px; }  /* 标题行框顶 1255（墨迹 1270）；图底 1716→1865 */
/* 标题 46px / Tracking 15(≈0.69px) #282725，行框 66.7 → lh 1.45 */
.std-title { font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1.45; letter-spacing: .69px; color: #282725; }
/* 标题行框底 1322 → 图顶 1364 */
.std-flex { display: flex; align-items: flex-start; margin-top: 40px; }
/* 官方 02.jpg（产业链溯源监控系统看板）完整展示，PSD 622×352 */
.std-flex img { width: 622px; height: auto; flex: none; }
.std-text { width: 622px; margin-left: 76px; padding-top: 98px; }  /* 图顶 1364 → 正文首行墨迹 1471 */
/* 正文 16px / Leading 32.8(行高 2.05) / Tracking 12(≈0.7px) #5A554E */
.std-text p { font-size: 16px; line-height: 2.05; letter-spacing: .7px; color: #5a554e; }
/* 了解标准与溯源：官方切图 015（文字+↗圆圈+下划线整体，双态），159×60 @x998 y1617 */
.std-link {
  display: block; width: 159px; height: 60px; margin-top: 24px;
  font-size: 0; overflow: hidden;  /* 文案已含在按钮切图内 */
  background: url('../icons/015_PC_了解标准与溯源_默认@2x.png') center / 100% 100% no-repeat;
}
.std-link:hover { background-image: url('../icons/015_PC_了解标准与溯源_悬停@2x.png'); }

/* 响应式：主体由 footer.php 公共脚本锁定 1200px 布局整体 zoom 仅缩放，不再重排 */
/* 窄屏容器仅 1104px，图 622+缝76+文 622 固定 1320 超宽：按 1104/1320 比例（×.8364）等比缩放 */
@media (max-width: 1220px) {
  .std-flex img { width: 520px; }
  .std-text { width: 520px; margin-left: 64px; }
}