/* ============================================================
   样图风格版式 · deal layout
   ------------------------------------------------------------
   对标三张样图：
     01 封面 —— 门店实拍背景 + 巨字白标题 + 深蓝副标条 + 菱形 logo
                + 4 个白色胶囊 + 黄色价签 + 底部红色 CTA
     02 榜单 —— 满幅红底 + 深蓝圆角框 + 红色头块 + 2 列 12 张图卡
     03 详情 —— 虚化超市背景 + 白色大卡 + 红色头 + 红色价格气泡
                + 2 个描边标签 + 蓝色底栏（整条铺满，整组居中，箭头居中）

   ★ 尺寸全部用 cqw（容器 = .screen 自身），所以：
       浏览器里 420px 宽 → 导出时 1080px 宽 → 自动等比放大，
       不需要再写一套「导出尺寸」，改一处两处同步。
   ============================================================ */

html[data-layout="deal"]{
  --dl-blue:#0B3B8C;        /* 山姆招牌深蓝 */
  --dl-blue-2:#0057B8;
  --dl-blue-3:#003D7A;
  --dl-red:#E4002B;         /* 鲜红 */
  --dl-red-2:#BE0016;
  --dl-yellow:#FFD400;      /* 价签黄 */
  --dl-ink:#1B1B2F;         /* 深墨蓝 */
  --dl-gray:#9A9AA6;
  --dl-paper:#FFFFFF;
}

html[data-layout="deal"] .screen{
  container-type:inline-size;   /* cqw 的参照物 */
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
}

/* ============================================================
   01 · 封面
   ============================================================ */
html[data-layout="deal"] .cover{
  background:var(--dl-blue-3);
  color:#fff;padding:0;position:relative;overflow:hidden;
  display:block;
}

/* 门店实拍：铺满
   ★ 素材 cover-bg.jpg 比例 0.753 ≈ 成图 0.75，几乎无需裁切。
     background-position 用 center 50%，让招牌（画面中上部）
     落在标题下方、胶囊按钮的上方 —— 与样图 01 的层次一致：
       巨字标题 → 深蓝副标条 → 菱形招牌 → 白色胶囊 → 红色 CTA
   ⚠️ 路径相对 CSS 文件自身（assets/），写 bg/ 而非 assets/bg/。 */
html[data-layout="deal"] .dc-bg{
  position:absolute;inset:0;
  background:url("bg/cover-bg.jpg") center 46% / cover no-repeat;
}
/* 上暗下亮：顶部压暗让白色巨字更清楚，底部保持明亮让停车场有细节 */
html[data-layout="deal"] .dc-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(4,26,60,.50) 0%,
    rgba(4,26,60,.18) 22%,
    rgba(4,26,60,0) 40%,
    rgba(4,26,60,.16) 72%,
    rgba(4,26,60,.46) 100%);
}

html[data-layout="deal"] .dc-wrap{
  position:relative;z-index:2;
  height:100%;display:flex;flex-direction:column;
  padding:6cqw 5.5cqw 5cqw;
}

/* 巨字主标题
   样图 01 的「山姆必逛」几乎占满屏宽（约 92%），
   15.5cqw 会偏小，这里提到 17cqw 并允许极窄屏略缩。 */
html[data-layout="deal"] .dc-title{
  margin:0;font-size:17cqw;line-height:1.02;font-weight:900;
  letter-spacing:-.03em;text-align:center;
  color:#fff;
  text-shadow:0 .8cqw 1.6cqw rgba(3,26,58,.5);
  white-space:nowrap;
}
/* 标题右上角的红色小装饰（样图里的手绘感） */
html[data-layout="deal"] .dc-title-wrap{position:relative;display:block}
html[data-layout="deal"] .dc-title-wrap::before,
html[data-layout="deal"] .dc-title-wrap::after{
  content:"";position:absolute;right:1.2cqw;background:var(--dl-red);
  border-radius:.3cqw;
}
html[data-layout="deal"] .dc-title-wrap::before{
  top:.6cqw;width:2.4cqw;height:1cqw;transform:rotate(28deg);
}
html[data-layout="deal"] .dc-title-wrap::after{
  top:2.6cqw;width:1.8cqw;height:.8cqw;transform:rotate(-18deg);
}

/* 深蓝副标条 */
html[data-layout="deal"] .dc-subbar{
  margin:2.4cqw auto 0;max-width:88%;
  background:var(--dl-blue);border-radius:.8cqw;
  padding:1.5cqw 2cqw;
  font-size:4.3cqw;font-weight:900;letter-spacing:.02em;
  text-align:center;line-height:1.25;
  box-shadow:0 .5cqw 0 rgba(0,0,0,.18);
}

/* 中部：4 个白色胶囊
   ★ 背景素材里已有真实的 Sam's 菱形招牌（画面中上部），
     不再叠加额外的 logo 图层 —— 那样会重影。
     胶囊按钮往上提，落在招牌下方，与样图 01 的层次一致。 */
html[data-layout="deal"] .dc-mid{
  flex:1;min-height:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
html[data-layout="deal"] .dc-pills{
  display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 2.8cqw;
  width:86%;margin-top:2cqw;position:relative;z-index:3;
}
html[data-layout="deal"] .dc-pill{
  background:#fff;color:var(--dl-blue);
  border-radius:4.5cqw;
  padding:2.4cqw 1cqw;
  font-size:4.6cqw;font-weight:900;letter-spacing:.02em;
  text-align:center;line-height:1.1;
  box-shadow:0 .6cqw 1.4cqw rgba(3,26,58,.28);
  white-space:nowrap;
}

/* 黄色价签（贴右侧，随机角度） */
html[data-layout="deal"] .dc-tag{
  position:absolute;z-index:4;
  background:var(--dl-yellow);color:#111;
  font-size:3.1cqw;font-weight:900;letter-spacing:-.01em;
  padding:.9cqw 1.4cqw;border-radius:.5cqw;
  box-shadow:0 .4cqw .8cqw rgba(3,26,58,.35);
  white-space:nowrap;
}
html[data-layout="deal"] .dc-tag.t1{right:3cqw;top:30cqw;transform:rotate(-13deg)}
html[data-layout="deal"] .dc-tag.t2{right:2.4cqw;top:44cqw;transform:rotate(9deg)}
html[data-layout="deal"] .dc-tag.t3{right:3.4cqw;top:66cqw;transform:rotate(-8deg)}

/* 底部红色 CTA */
html[data-layout="deal"] .dc-cta{
  position:relative;z-index:3;
  align-self:center;
  background:var(--dl-red);
  border-radius:5cqw;
  padding:2.4cqw 8cqw;
  font-size:5.6cqw;font-weight:900;letter-spacing:.04em;
  display:flex;align-items:center;gap:2cqw;
  box-shadow:0 .8cqw 0 var(--dl-red-2), 0 1.2cqw 2cqw rgba(3,26,58,.4);
  white-space:nowrap;
}
html[data-layout="deal"] .dc-cta .tri{
  width:0;height:0;border-top:1.5cqw solid transparent;
  border-bottom:1.5cqw solid transparent;
}
html[data-layout="deal"] .dc-cta .tri.l{border-right:2cqw solid #fff}
html[data-layout="deal"] .dc-cta .tri.r{border-left:2cqw solid #fff}

/* 封面右下角小字（来源 + 日期） */
html[data-layout="deal"] .dc-foot{
  position:absolute;right:4cqw;bottom:3.2cqw;z-index:3;
  display:flex;gap:1.6cqw;align-items:center;
  font-size:2.4cqw;font-weight:700;color:rgba(255,255,255,.88);
  text-shadow:0 .2cqw .4cqw rgba(3,26,58,.6);
}

/* ============================================================
   02 · 榜单（红底 + 蓝框 + 白底 + 2 列图卡）
   ============================================================ */
html[data-layout="deal"] .list{
  background:var(--dl-red);
  padding:2.6cqw;display:flex;flex-direction:column;height:100%;min-height:0;
}

/* 深蓝圆角框 */
html[data-layout="deal"] .dl-frame{
  flex:1;min-height:0;height:0;
  border:.95cqw solid var(--dl-blue);
  border-radius:3.4cqw;
  background:var(--dl-paper);
  display:flex;flex-direction:column;overflow:hidden;
}

/* 红色头块 */
html[data-layout="deal"] .dl-head{
  background:var(--dl-red);
  padding:2.4cqw 2cqw 2.2cqw;
  text-align:center;flex:0 0 auto;
}
html[data-layout="deal"] .dl-head h2{
  margin:0;font-size:8.2cqw;line-height:1.08;font-weight:900;
  color:#fff;letter-spacing:.01em;
  text-shadow:.35cqw .35cqw 0 var(--dl-blue), 0 .4cqw .8cqw rgba(0,0,0,.35);
}
html[data-layout="deal"] .dl-head .dl-sub{
  margin-top:1.2cqw;font-size:4.4cqw;font-weight:900;color:#fff;letter-spacing:.02em;
}

/* 2 列网格
   ⚠️ 关键：grid-auto-rows:1fr 需要容器有确定高度才能算出行高。
   父级 .dl-frame 是 flex:1（有确定高度），.dl-grid 也给 flex:1，
   再加 min-height:0 允许收缩 —— 否则行高会被内容撑开或压缩到 0。 */
html[data-layout="deal"] .dl-grid{
  flex:1;min-height:0;height:0;
  display:grid;grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:1.4cqw;padding:1.6cqw;
  overflow:hidden;
}

/* 单张商品卡：三栏 —— 图 ｜ 名称+小价 ｜ 大价+折扣标
   卡片高度有限（约 17cqw），所有文字必须能压进去：
   名称 1 行截断、小价 1 行、大价与折扣标上下叠放。 */
html[data-layout="deal"] .dl-card{
  position:relative;overflow:hidden;
  background:#fff;
  border:.26cqw solid var(--dl-red);
  border-radius:1.1cqw;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:1cqw;row-gap:.2cqw;
  padding:1cqw .9cqw .8cqw;
  align-items:center;
  overflow:hidden;
}

/* 左上角蓝色序号牌 */
html[data-layout="deal"] .dl-no{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--dl-blue);color:#fff;
  font-size:2.9cqw;font-weight:900;line-height:1;
  padding:.8cqw 1.3cqw 1cqw 1.1cqw;
  border-bottom-right-radius:1.3cqw;
  letter-spacing:.02em;
}

/* 商品图 */
html[data-layout="deal"] .dl-img{
  grid-column:1;grid-row:1 / span 2;
  width:10.5cqw;height:10.5cqw;
  border-radius:.8cqw;overflow:hidden;
  background:#F3F3F6;
  border:.18cqw solid rgba(11,59,140,.14);
}
html[data-layout="deal"] .dl-img img{width:100%;height:100%;object-fit:cover;display:block}

/* 名称 + 价签
   ★ 中栏必须放得下「名称 + 特价¥X + 原价¥Y」三段，
     否则「原价¥239.9」会被大价格挤掉（overflow 截断成「原价¥2…」）。
     做法：名称单行省略，小价两行独立排（特价 / 原价）。 */
html[data-layout="deal"] .dl-info{grid-column:2;grid-row:1;align-self:center;min-width:0;overflow:hidden}
html[data-layout="deal"] .dl-name{
  font-size:2.55cqw;font-weight:900;color:var(--dl-blue);
  line-height:1.18;margin-bottom:.35cqw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-layout="deal"] .dl-subprice{
  font-size:2.05cqw;font-weight:700;color:#3D3D48;line-height:1.35;
}
html[data-layout="deal"] .dl-subprice .op{
  display:block;color:var(--dl-gray);text-decoration:line-through;
}

/* 右侧大价格 —— 与折扣标同列，垂直排列不重叠 */
html[data-layout="deal"] .dl-price{
  grid-column:3;grid-row:1;align-self:end;justify-self:end;
  display:flex;align-items:baseline;gap:.2cqw;
  color:var(--dl-red);
  line-height:1;
}
html[data-layout="deal"] .dl-price b{
  font-size:5.4cqw;font-weight:900;line-height:.9;letter-spacing:-.04em;
}
html[data-layout="deal"] .dl-price i{
  font-style:normal;font-size:2.4cqw;font-weight:900;
}

/* 折扣标签 + 黄箭头 */
html[data-layout="deal"] .dl-off{
  grid-column:3;grid-row:2;justify-self:end;align-self:start;
  display:flex;align-items:center;gap:.4cqw;
  background:var(--dl-red);color:#fff;
  border-radius:.6cqw;
  padding:.35cqw .8cqw;
  font-size:2.1cqw;font-weight:900;line-height:1.1;
  white-space:nowrap;
  margin-top:.3cqw;
}
html[data-layout="deal"] .dl-off::after{
  content:"";width:0;height:0;
  border-top:.75cqw solid transparent;
  border-bottom:.75cqw solid transparent;
  border-left:1.1cqw solid var(--dl-yellow);
}

/* 榜单底部说明 */
html[data-layout="deal"] .dl-foot{
  flex:0 0 auto;text-align:center;
  color:#fff;font-size:2.7cqw;font-weight:700;
  padding-top:1.6cqw;
  text-shadow:0 .2cqw .4cqw rgba(0,0,0,.3);
}

/* ============================================================
   03 · 详情（虚化背景 + 白卡 + 红色价格气泡）
   ============================================================ */
html[data-layout="deal"] .detail{
  background:#20242C;padding:0;height:100%;min-height:0;
  position:relative;
}
/* 商品详情滚动轨道 */
html[data-layout="deal"] .d-track{
  gap:0;background:transparent;
  position:relative;
}

/* 虚化超市背景
   ★ 放在 .detail（轨道容器）上做整屏固定背景，而不是每张 .d-slide 各放一张 ——
     每张各放的话：① 滑动时背景跟着动，看得出接缝
                  ② inset:-10% 溢出部分被 .d-slide 的 overflow:hidden 裁出硬边
     放轨道上则整屏只有一张，滑动时纹丝不动，正是样图 03 的观感。 */
html[data-layout="deal"] .detail::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("bg/detail-bg.jpg") center / cover no-repeat;
  filter:blur(38px) saturate(1.3) brightness(1.04);
  transform:scale(1.12);
}
html[data-layout="deal"] .detail::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(14,18,26,.30);
  pointer-events:none;
}

/* 详情页：背景是整屏的虚化超市，白卡浮在中间
   ★ 卡片四周留出足够外边距（样图里背景大面积外露），
     .d-slide 不能有 overflow:auto（会把超出部分裁掉，背景就只剩一条边）。 */
html[data-layout="deal"] .d-slide{
  position:relative;z-index:1;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  padding:4.2cqw 4cqw 5.4cqw;
  background:transparent;
  /* 覆盖经典版的 overflow-y:auto —— 纵向滚动会把超出卡片的虚化背景裁掉，
     背景就只剩卡片边缘一条，达不到样图那种大面积景深的效果 */
  overflow:hidden;
}

/* 白色大卡
   ★ 卡片不能占满（width/height 100%），否则虚化背景只剩边缘窄条，
     达不到样图 03 那种整屏景深。留出约 4% 外边距。 */
/* 白色大卡
   ★ 底部不留圆角：卡片圆角 + overflow:hidden 会把底栏两角切出缺口，
     露出后面的虚化背景（看着像「有空白」）。
     所以改成「上圆角、下直角」—— 底部是平齐的一条蓝色带，
     两角自然填满。 */
html[data-layout="deal"] .d-card{
  position:relative;z-index:2;
  width:100%;height:100%;
  background:#fff;border:none;
  border-radius:3.2cqw 3.2cqw 0 0;
  box-shadow:0 1.6cqw 3.4cqw rgba(0,0,0,.42);
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:0;
}
/* 清掉经典版的左侧色条 */
html[data-layout="deal"] .d-card::before{display:none}

/* 红色头块 */
html[data-layout="deal"] .d-card .dd-head{
  flex:0 0 auto;
  background:var(--dl-red);
  padding:2.4cqw 2cqw;
  text-align:center;
  font-size:6.4cqw;font-weight:900;color:#fff;letter-spacing:.06em;
  line-height:1.1;
}

/* 右上角黄色折标 —— 样图里压在红头下缘、右侧出血 */
html[data-layout="deal"] .dd-tag{
  position:absolute;right:-1.6cqw;top:5.4cqw;z-index:6;
  background:var(--dl-yellow);color:#111;
  font-size:3.4cqw;font-weight:900;
  padding:1cqw 1.8cqw;border-radius:.5cqw;
  transform:rotate(-14deg);
  box-shadow:0 .5cqw 1cqw rgba(0,0,0,.3);
  white-space:nowrap;
}

/* 商品名 */
html[data-layout="deal"] .d-title{
  flex:0 0 auto;
  font-size:6.2cqw;font-weight:900;line-height:1.2;
  color:#141420;text-align:center;
  padding:2.4cqw 3cqw 1.2cqw;
  letter-spacing:-.01em;
}

/* 商品图 + 价格气泡叠放
   ★ 样图 03 的层次是：
       产品图居中（包装袋居中占位）
       红色「特价」气泡 —— 压在产品图的右上边缘，是浮层不是并列块
       灰色划掉原价 —— 同样浮在图上，位于气泡右下方
     所以：
       ① .dd-stage 不要留右侧 padding（那会把图挤偏左）
       ② 图限宽居中，右侧留出气泡压上来的空间
       ③ 气泡/原价改为相对 .d-img 定位，真正「浮在图上」 */
html[data-layout="deal"] .dd-stage{
  flex:1;min-height:0;height:0;overflow:hidden;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0 2cqw 1cqw;
}
html[data-layout="deal"] .d-img{
  margin:0;flex:1 1 auto;min-height:0;width:100%;height:100%;
  border:none;background:transparent;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  /* 相对定位的锚：气泡和原价标签都挂在它上面 */
  position:relative;
}
html[data-layout="deal"] .d-img img{
  /* 浮层已移除，图片可以居中放大 */
  max-width:88%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.14));
}

/* 描边标签（2 个：家庭囤货 / 会员好物）
   数量可变，用 flex 居中排布，间距固定 —— 2 个和 3 个都不会偏。 */
html[data-layout="deal"] .dd-tags{
  flex:0 0 auto;
  display:flex;justify-content:center;align-items:center;gap:3cqw;
  padding:1.2cqw 2cqw 2cqw;
}
html[data-layout="deal"] .dd-tags span{
  border:.28cqw solid var(--dl-red);
  color:#181824;border-radius:4cqw;
  padding:.9cqw 2.6cqw;
  font-size:2.9cqw;font-weight:900;line-height:1.1;
  white-space:nowrap;
}

/* 底栏 —— 整条一色蓝铺满，内容居中
   ★ 两块统一用 --dl-blue：之前左边深蓝、右边招牌蓝，
     中间那道色差看起来像「有空白」，实际是分栏色。
     现在整条同色，靠「白字原价 / 红字特价」区分信息层级。
   ★ 卡片已改为「上圆角、下直角」（见 .d-card），
     所以底栏自然铺满底边、两角无缺口，不需要负 margin。
   ★ 箭头单独成段（.arrow），三段整体水平居中 ——
     「原价 → 特价」作为一组居中排布，箭头正好落在正中。 */
html[data-layout="deal"] .dd-bar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:2.2cqw;
  font-weight:900;color:#fff;
  background:var(--dl-blue);
  padding:1.8cqw 3cqw;
}
html[data-layout="deal"] .dd-bar .old{
  flex:0 0 auto;
  background:transparent;
  font-size:4.4cqw;
  white-space:nowrap;
}
html[data-layout="deal"] .dd-bar .arrow{
  flex:0 0 auto;
  font-size:4.8cqw;line-height:1;
  color:rgba(255,255,255,.9);
}
html[data-layout="deal"] .dd-bar .now{
  flex:0 0 auto;
  background:transparent;
  font-size:5.8cqw;
  display:flex;align-items:baseline;gap:.6cqw;
  white-space:nowrap;
  /* ★ 整个「特价¥数字」都用红色 —— 与卡片顶部红色头（.dd-head）同一色。
     红字压蓝底形成强调，视线直接落在价格上。 */
  color:var(--dl-red);
}
html[data-layout="deal"] .dd-bar .now b{
  font-size:1.45em;letter-spacing:-.03em;line-height:1;
  color:var(--dl-red);
}

/* 详情页脚注 */
html[data-layout="deal"] .detail-foot{
  position:absolute;right:3cqw;bottom:1.6cqw;z-index:4;
  color:rgba(255,255,255,.9);font-size:2.3cqw;font-weight:700;
  text-shadow:0 .2cqw .4cqw rgba(0,0,0,.6);
  gap:1.4cqw;
}
html[data-layout="deal"] .detail-foot .go{display:none}
html[data-layout="deal"] .detail-foot .src{opacity:1}

/* ============================================================
   经典版残留元素在 deal 版式下全部隐藏
   ============================================================ */
html[data-layout="deal"] .stats,
html[data-layout="deal"] .cover-foot,
html[data-layout="deal"] .list-head,
html[data-layout="deal"] .list-desc,
html[data-layout="deal"] .rank-list,
html[data-layout="deal"] .list-foot,
html[data-layout="deal"] .rank-tag,
html[data-layout="deal"] .price-panel,
html[data-layout="deal"] .save-line{display:none !important}

/* ============================================================
   满幅成图（导出 PNG 时由 xhs-frame 之外单独处理）
   ------------------------------------------------------------
   deal 版式的一切尺寸都是 cqw（相对 .screen 宽度），
   所以只要把 .phone 拉宽到 1080，屏内所有元素等比放大，
   不需要为导出再写一套字号。
   ============================================================ */
html[data-layout="deal"].deal-export .stage{
  padding:0;gap:0;width:100%;height:100%;
}
html[data-layout="deal"].deal-export body{
  background:var(--dl-paper);
  background-image:none;
  overflow:visible;
}
html[data-layout="deal"].deal-export .phone{
  width:1080px;max-width:1080px;
  height:1440px;
  border-radius:0;box-shadow:none;border:none;
  margin:0;
}
html[data-layout="deal"].deal-export .viewport{position:absolute;inset:0}