/* =============== 页面与UI（保持你原来的外观） =============== */
:root{
  --promo-price-offset-currency: .85cm;  /* $ 再下 0.4cm（原 .25 → .65） */
  --promo-price-offset-decimals: 1.85cm;   /* .42 再下（顶部与整数对齐） */
  --promo-extra: 1cm;   /* 仅特价：在中部价格区域增加 1cm 高度 */
  --print-zoom: 0.95; /* 等比例缩小到 96%，不够就调小：0.95 / 0.94 */
  --print-nudge-x: 0.40cm; /* 正数=整体向左挪；负数=向右挪。先试 0.40cm */
  /* 价签纸尺寸与边框 */
  --label-w: 7.00cm;
  --label-h: 4.00cm;
  --gap: 0.30cm;
  --border: #111;
  --page-margin: .35cm;

  /* 顶部 LOGO 与间距 */
  --logo-h: .70cm;
  --logo-gap: .10cm;
  --content-offset: calc(var(--logo-h) + var(--logo-gap));

  /* 标题 */
  --title-font: .45cm;
  --title-top: calc(.20cm + var(--content-offset));

  /* 价格字号 */
  --price-currency: 0.95cm;
  --price-int:      1.00cm;
  --price-dot:      0.85cm;
  --price-cents:    0.60cm;

  /* 价格位置与微调 */
  --price-top-base: 1.45cm;
  --price-top: calc(var(--content-offset) + var(--price-top-base));
  --int-offset: .05cm;
  --cents-offset: -.26cm;
  --dot-offset: 0cm;

  /* 条码 */
  --barcode-w: 4.30cm;
  --barcode-h: .40cm;
  --barcode-bottom: .10cm;
}

/* 页面UI */
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
  background:#f6f7f9;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid #e5e7eb;
  padding:.9rem .9rem .7rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:flex-end;
}
header h1{ font-size:1.25rem; margin:0 1rem 0 0; font-weight:800; }
input,button{ font-size:.95rem; padding:.45rem .6rem; }
input{ border:1px solid #cbd5e1; border-radius:8px; background:#fff; }
button{ cursor:pointer; border-radius:8px; border:1px solid #111; background:#111; color:#fff; }
button.secondary{ background:#fff; color:#111; }
button.soft{ background:#2563eb; border-color:#2563eb; }
.note{ font-size:.82rem; color:#64748b; }
.note.full{ width:100%; }

/* —— 每页容器 —— */
.pages{
  width:21cm; max-width:100%;
  margin:1rem auto;
}
.sheet{
  background:#fff; padding:.7cm; border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.06);
  margin:0 auto 1rem;
  width:21cm; max-width:100%;
}

/* =============== 价签网格 =============== */
.labels{
  display:grid;
  grid-template-columns:repeat(3, var(--label-w));
  grid-auto-rows:var(--label-h); /* 固定行高：3×7=21/页 */
  gap:var(--gap);
  justify-content:center;
}
.label{
  width:var(--label-w);
  height:var(--label-h);
  background:#fff; color:#000;
  border:.04cm solid var(--border); border-radius:.05cm;
  position:relative; overflow:hidden;
  break-inside:avoid; page-break-inside:avoid;
  font-family:"Times New Roman", Georgia, "Noto Serif SC", serif;
}

.logo{
  position:absolute; 
  top:0; left:0; 
  width:100%; 
  height:var(--logo-h);
  background:#000;               /* 强制填充黑色背景 */
  display:flex; 
  align-items:center; 
  justify-content:center;
  overflow:hidden;               /* 避免 img 超出 */
}
.logo img{
  max-height:100%; 
  max-width:100%;
  object-fit:contain;            /* 保持比例，不裁切 */
}

/* 标题 */
.title{
  position:absolute; left:.28cm; right:.28cm; top:var(--title-top);
  text-align:center; font-weight:800; font-size:var(--title-font); line-height:1.08;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  line-clamp: 2;   /* 标准属性，消除编辑器警告 */
}

/* Why Pay */
.why-pay{
  position:absolute;
  left:0.8cm;
  top:calc(var(--price-top) + 0.05cm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.2; color:#000; text-align:center; z-index:1;
}
.why-pay .why-label{ font-size:0.5cm; font-weight:600; }
.why-pay .why-price{ font-size:0.5cm; font-weight:700; }

/* 价格 */
.right-col{ position:absolute; right:.25cm; top:var(--price-top); width:4.80cm; }
.price-block{ position:relative; width:100%; display:flex; justify-content:flex-end; align-items:flex-end; gap:.10cm; text-align:right; }
.currency{ font-size:var(--price-currency); font-weight:800; line-height:1; }
.price   { font-size:var(--price-int);     font-weight:800; line-height:1; transform:translateY(var(--int-offset)); }
.dot     { font-size:var(--price-dot);     font-weight:800; line-height:1; transform:translateY(var(--dot-offset)); }
.cents   { font-size:var(--price-cents);   font-weight:800; line-height:1; transform:translateY(var(--cents-offset)); }

/* 条码 */
.barcode-anchored{ position:absolute; right:.25cm; bottom:var(--barcode-bottom); width:var(--barcode-w); height:var(--barcode-h); overflow:hidden; }
.barcode{ position:absolute; right:0; bottom:0; width:100%; height:100%; display:block; }

/* —— 手机端预览：让标签区可横向滑动 —— */
@media (max-width: 900px){
  /* 1) 用 .pages 当“横向滚动容器” */
  .pages{
    width: 100%;
    overflow-x: auto;                 /* 允许左右滑动 */
    -webkit-overflow-scrolling: touch;/* iOS 惯性滚动 */
    padding-left: max(8px, env(safe-area-inset-left));  /* 刘海/圆角安全区 */
    padding-right:max(8px, env(safe-area-inset-right));
  }

  /* 2) 每页保持物理宽度 21cm，不要被 max-width 缩掉 */
  .sheet{
    width: 21cm;
    max-width: none;                  /* 关键：去掉 100% 限制才能溢出产生滚动 */
    margin: 0 auto 1rem;              /* 宽屏时仍居中，窄屏时可左右滑动 */
  }

  /* 3) 不要再做预览用的 transform 缩放，避免看起来“超出边框” */
  .labels{
    transform: none !important;
    width: auto !important;
  }
}

/* 弹窗 */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; z-index:2000; }
.modal.open{ display:grid; }
.modal-card{ background:#fff; padding:1rem; border-radius:10px; width:min(92vw,520px); }
.modal video{ width:100%; border-radius:8px; display:block; }

/* 一致性细节 */
html, body, .labels, .label, .label * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
.price-block { display:flex; align-items:flex-end; line-height:1; }
.currency, .price, .dot, .cents { line-height:1; letter-spacing:0; }
.title { line-height:1.2; -webkit-text-size-adjust:100%; white-space:normal; }
.barcode-anchored svg { display:block; transform-origin: bottom right !important; }

/* iOS 预览小 hack（仅预览） */
.label .logo{ overflow: hidden; }
@supports (-webkit-touch-callout: none) {
  .label .logo img{ transform: translateZ(0) scale(1.03); transform-origin: center; }
}

/* =============== 打印 =============== */
@media print{
  /* A4 满页；打印对话框里建议关闭“页眉页脚”，边距选“无/最小” */
  @page { size: A4; margin: 0; }

  /* 隐藏顶部工具栏，其余保持正常文档流 */
  header{ display:none !important; }
  body{ background:#fff; }

  /* 版心与分页：和前端一致，一页一张 .sheet */
  .pages{
    width: 21cm;        /* 和前端相同的版心宽度 */
    margin: 0 auto;
  }
  .sheet{
    /* 关键：用 zoom 等比缩放；为保证最终宽度仍是 21cm，这里用 21cm/zoom */
    width: calc(21cm / var(--print-zoom));
    zoom: var(--print-zoom);

    margin: 0 auto;
    padding: .7cm;      /* 沿用前端的内边距 → 每页顶部空白会被保留 */
    box-shadow: none;   /* 打印不需要阴影 */
    border-radius: 10px;

    break-after: page;      /* 每个 .sheet 独占一页 */
    page-break-after: always;
  }
  .sheet{
    /* 原来是 padding: .7cm; 这里改成左右不对称，实现水平偏移 */
    padding-top: .7cm;
    padding-bottom: .7cm;
    padding-left:  calc(.3cm - var(--print-nudge-x)); /* 正数 -> 内容整体左移 */
    padding-right: calc(.7cm + var(--print-nudge-x));
  }
}

/* ========= 移动端打印修复（只在手机/平板 + print 下生效；不影响电脑端） ========= */
/* 说明：避免 iOS Safari/Android Chrome 因缩放取整造成左右裁切与底部错位 */
@media print and (max-device-width: 820px) {
  /* 不改 @page，避免部分 iOS 机型触发奇怪行为；只调整内容自身 */
  html, body { width: 210mm; }

  /* 外层容器略收窄，避免贴边 */
  .pages {
    box-sizing: border-box !important;
    width: 205mm !important;   /* 210 - 安全余量 */
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 单页：固定安全宽度 + 轻微等比缩小，确保内部不乱位、不越界 */
  .sheet {
    box-sizing: border-box !important;
    width: 204mm !important;       /* 安全布局宽度（如仍裁 -> 改 203mm） */
    margin: 0 auto !important;
    padding-left: 6mm !important;  /* 左右各留一点缓冲 */
    padding-right: 6mm !important;

    transform-origin: top center !important;
    transform: scale(0.97) !important;  /* 如仍裁 -> 0.965 或 0.96 */
    zoom: 1 !important;                 /* 避免移动端的 zoom 差异 */
    overflow: visible !important;
  }

  /* 网格与标签不要在打印中裁切 */
  .labels, .label { overflow: visible !important; }

  /* 条码 SVG：禁止二次拉伸（防止与价格叠位） */
  .barcode {
    width: 34mm !important;   /* 结合你当前版式，可按需微调 32–36mm */
    height: 12mm !important;
    transform: none !important;
  }
}

/* 仅 iOS 再微调 0.965（可按实际预览把 0.97 改成 0.965～0.96） */
@media print and (max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2) {
  .sheet { transform: scale(0.965) !important; }
}


/* ==================== Promo Label (scoped) ==================== */
:root{
  --promo-price-offset-currency: .85cm;  /* $ 再下 0.4cm（原 .25 → .65） */
  --promo-price-offset-decimals: 1.85cm;   /* .42 再下（顶部与整数对齐） */
  --promo-extra: 1cm;   /* 仅特价：在中部价格区域增加 1cm 高度 */
  --promo-mult: 2.20;
  --promo-top-blank: 1.60cm;
  --promo-banner-h: 2.80cm;
  --promo-title-font: .50cm;
  --promo-price-currency: .80cm;
  --promo-price-int: 1.60cm;
  --promo-price-dot: .60cm;
  --promo-price-cents: .80cm;
}

/* Promo grid: 3 x 3 */
.labels.promo{
  display:grid;
  grid-template-columns: repeat(3, var(--label-w));
  grid-auto-rows: calc(var(--label-h) * var(--promo-mult) + var(--promo-extra));
  gap: var(--gap);
  justify-content:center;
}

/* Promo label box */
.label.promo{
  width: var(--label-w);
  height: calc(var(--label-h) * var(--promo-mult) + var(--promo-extra));
  border:.04cm solid var(--border);
  border-radius:.05cm;
  position:relative;
  background:#fff; color:#000;
  overflow:hidden;
  break-inside:avoid; page-break-inside:avoid;
}

/* Banner full-bleed */
.label.promo .promo-banner{
  position:absolute; left:0; top:var(--promo-top-blank);
  width:100%; height:var(--promo-banner-h);
  background-image:url('grandopening.svg');
  background-repeat:no-repeat;
  background-size:120% 120%;
  background-position:center;
}

/* Product title (DIN) */
@font-face{
  font-family:"DIN-Bold-Regular";
  src: local("DIN-Bold"), local("DIN Bold"), local("DIN Alternate Bold"), local("DIN Condensed Bold");
  font-weight:700; font-style:normal; font-display:swap;
}
.label.promo .promo-title{
  position:absolute; left:.20cm; right:.20cm;
  top: calc(var(--promo-top-blank) + var(--promo-banner-h) + .50cm);
  text-align:center;
  font-family:"DIN-Bold-Regular","DIN Alternate","Helvetica Neue",Arial,sans-serif;
  font-weight:700; font-size:var(--promo-title-font); line-height:1.15;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* Price (Mentor) */
@font-face{
  font-family:"MentorW01-Bold-Regular";
  src: local("Mentor W01 Bold"), local("Mentor W01 Bold Regular"), local("Mentor Bold"), local("Arial Black");
  font-weight:700; font-style:normal; font-display:swap;
}
.label.promo .promo-price{
  position:absolute; left:.25cm; right:.25cm; bottom: calc(var(--barcode-h) + 0.90cm);
  text-align:center;
}
.label.promo .promo-price .price-block{
  font-family:"MentorW01-Bold-Regular","Arial Black","Helvetica Neue",Arial,sans-serif;
  display:flex; align-items:flex-start !important; justify-content:center; gap:.1cm;
}
.label.promo .promo-price .currency{ font-size:var(--promo-price-currency); font-weight:800; line-height:0.5;  margin-top: var(--promo-price-offset-currency); margin-top: var(--promo-price-offset-currency);}
.label.promo .promo-price .price   { font-size:var(--promo-price-int);     font-weight:800; line-height:1; }
.label.promo .promo-price .dot     { font-size:var(--promo-price-dot);     font-weight:800; line-height:2.1; }
.label.promo .promo-price .cents   { font-size:var(--promo-price-cents);   font-weight:800; line-height:2.1; }

/* Barcode (match normal label) */
.label.promo .barcode-anchored{ position:absolute; right:.25cm; bottom:var(--barcode-bottom);
  width:var(--barcode-w); height:var(--barcode-h); overflow:hidden;
}
.label.promo .barcode{
  position:absolute; right:0; bottom:0; width:100%; height:100%; display:block;
}
.label.promo .barcode-legend{
  position:absolute;
  left: 42px;           /* 和普通价签一致 */
  bottom: 2px;          /* 和普通价签一致 */
  font-size:.30cm; 
  font-weight:700; 
  font-family:"Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif; }