<!-- ============================= -->
<!-- Track Your Order (17TRACK wrapper for Flawless) -->
<!-- ============================= -->
<section class="trk-wrap">
<div class="trk-grid">
<!-- 左侧：文案与说明，可自定义要点/图标 -->
<aside class="trk-info">
<h1 class="trk-title">Track Your Order</h1>
<p class="trk-lead">
Enter your tracking number to see real-time updates. We’ll keep you informed at every step.
</p>
<ul class="trk-bullets">
<li>
<img src="{{ 'trk-icon-1.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
Real-time status & ETA
</li>
<li>
<img src="{{ 'trk-icon-2.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
2800+ global carriers
</li>
<li>
<img src="{{ 'trk-icon-3.webp' | asset_url }}" alt="" width="20" height="20" loading="lazy">
Email/SMS updates (optional)
</li>
</ul>
<!-- 可选：信息横幅图（换成你的 KV） -->
<figure class="trk-banner">
<img src="{{ 'trk-banner.jpg' | asset_url }}" alt="Tracking banner" loading="lazy">
</figure>
</aside>
<!-- 右侧：17TRACK 容器卡片（外观我们负责，功能由 17TRACK 脚本注入） -->
<div class="trk-card">
<h3 class="trk-card__title">Start Tracking</h3>
<p class="trk-hint">Paste your tracking number below and click “Track”.</p>
<!-- 17TRACK 容器：官方脚本会在此渲染输入框/结果 -->
<div id="YQContainer"></div>
<!-- 可选：自己再放一个品牌提醒或客服按钮 -->
<div class="trk-help">
<img src="{{ 'trk-help.webp' | asset_url }}" alt="" width="18" height="18" loading="lazy">
Need help? <a href="/pages/contact-us">Contact support</a>
</div>
</div>
</div>
</section>
<style>
/* ============================= */
/* 视觉规范变量（请按你的《配色/字号规范》替换） */
/* ============================= */
:root{
--brand: #0B0F1A;
--brand-2: #2C7CF6;
--text-1: #111111;
--text-2: #5A5F6A;
--bg-0: #fffff3; /* 按你网站背景色一致 */
--panel: #FFFFFF;
--line: #E6E8EC;
--font-head: "Inter","Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
--font-body: "Inter","Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
--fs-h: 28px; --lh-h: 1.25;
--fs-b: 16px; --lh-b: 1.65;
--fs-s: 13px; --lh-s: 1.45;
--radius-lg: 14px;
--radius-md: 10px;
--shadow: 0 10px 28px rgba(0,0,0,.06);
}
/* ============================= */
/* 布局与基础样式（Flawless 友好） */
/* ============================= */
.trk-wrap{
background: var(--bg-0);
padding: 36px 16px 56px;
}
.trk-grid{
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
align-items: start;
}
.trk-info{}
.trk-title{
font-family: var(--font-head);
font-size: var(--fs-h);
line-height: var(--lh-h);
color: var(--text-1);
margin: 4px 0 10px;
font-weight: 800;
}
.trk-lead{
font-family: var(--font-body);
font-size: var(--fs-b);
line-height: var(--lh-b);
color: var(--text-2);
margin-bottom: 14px;
}
.trk-bullets{
list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px;
}
.trk-bullets li{
display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center;
color: var(--text-1);
}
.trk-bullets img{ display: block; width: 20px; height: 20px; }
.trk-banner{
margin: 14px 0 0; border-radius: var(--radius-lg); overflow: hidden; border:1px solid var(--line);
}
.trk-banner img{ width: 100%; height: auto; display: block; }
/* 右侧卡片（承载 17TRACK 容器） */
.trk-card{
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow);
}
.trk-card__title{
font-size: 22px; font-weight: 800; color: var(--text-1); margin: 2px 0 4px;
}
.trk-hint{ font-size: var(--fs-s); color: var(--text-2); margin-bottom: 10px; }
/* 让 17TRACK 的容器有最低高度，避免闪烁抖动 */
#YQContainer{ min-height: 420px; }
/* 帮助提示 */
.trk-help{
margin-top: 12px; font-size: var(--fs-s); color: var(--text-2);
display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center;
}
.trk-help a{ color: var(--brand-2); text-decoration: none; }
.trk-help a:hover{ text-decoration: underline; }
/* 响应式 */
@media (max-width: 989px){
.trk-grid{ grid-template-columns: 1fr; }
}
</style>
<!-- ============================= -->
<!-- 在下方粘贴 17TRACK 官方小部件脚本（从 17TRACK 控制台复制） -->
<!-- 参考：Widget Embed 文档 https://extcall.17track.net/en -->
<!-- ============================= -->
<!-- 示例结构（请用你的正式脚本替换下方示例）：
<script src="https://www.17track.net/externalCall.js"></script>
<script>
// 下面只是伪示例，实际以 17TRACK 后台给你的初始化代码为准
YQV5.trackSingle({
YQ_ContainerId: "YQContainer",
YQ_Height: 560,
YQ_Fc: "0",
YQ_Lang: "en",
YQ_Num: ""
});
</script>
-->
