/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/less-loader/dist/cjs.js!./app/web/page/storeMarket/list/index.less ***!
  \***************************************************************************************************************************************************************/
/**
 * CJ 店铺售卖一期 · T-6.1 店铺市场列表页样式
 *
 * 需求依据：方案 §2.1-1（3列×3行=9/页、平台与行业两行胶囊筛选、空态；26年10月09日平台由下拉改胶囊）、
 * §2.1-1b（顶部 Banner 统计）、§2.1-2b（卡片悬停动效 + 快速预览）、
 * §2.1-11（营销博文入口卡片）。
 *
 * <p><b>本仓库对 .less 强制开启 CSS Modules</b>
 * （webpack.config.js：`localIdentName: '[name]__[local]___[hash:base64:5]'`），
 * 所以这里的类名是**局部**的，必须经 `import style from './index.less'`
 * 以 `style.xxx` 的形式引用。在 jsx 里写死 `className="market"` 匹配不上任何规则。
 */
/*
 * 26年10月09日真页面对照 PRD F01 / 原型整体订正（用户：验收标准对比 PRD 和原型）：
 * 主色取原型 `--primary: #E88B30`；页面铺满主内容区（原型 `.store-header` / `.store-filters` /
 * `.store-grid` 都没有 max-width，各自留左右内边距），不再是居中 1200 宽的盒子。
 */
.index__market___1ZIck {
  --cj-primary: #e88b30;
  --cj-text: #1d2129;
  --cj-text-dim: #999;
  --cj-border: #e5e6eb;
  --cj-bg-soft: #f7f8fa;
  --cj-radius: 8px;
  /* 原型 PC 页面底色 `--bg: #F8F4F0`：Banner 深色、筛选条白底，卡片网格浮在米色上（26年10月10日补，
     第 1 页验收时漏了这一处）；移动端原型 `.screen-body` 是白底 */
  background: #f8f4f0;
  color: var(--cj-text);
}
@media (max-width: 768px) {
  .index__market___1ZIck {
    background: #fff;
  }
}
/*
 * PC 顶部 Banner（原型 `.store-header` :157-205）：深棕渐变底 + 右上一团橙色光晕，
 * 白→浅橙渐变大标题、橙色 tagline 胶囊、底部一条细线隔开四项统计。
 * 26年10月09日前是浅橙底、深色标题，与 PRD F01 / 原型都不符（技术方案 v5.21 ⑨ 早就定过背景渐变按原型）。
 */
.index__hero___1_W-t {
  position: relative;
  overflow: hidden;
  padding: 28px 48px 22px;
  background: radial-gradient(circle at 80% 20%, rgba(232, 139, 48, 0.18) 0%, transparent 45%), radial-gradient(circle at 15% 85%, rgba(255, 180, 90, 0.1) 0%, transparent 40%), linear-gradient(135deg, #1f1410 0%, #2e1f12 50%, #3d2a18 100%);
  color: #fff;
}
.index__hero___1_W-t::after {
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(232, 139, 48, 0.05), rgba(232, 139, 48, 0.18), rgba(232, 139, 48, 0.05));
  filter: blur(40px);
  content: '';
  pointer-events: none;
}
.index__hero___1_W-t h1 {
  margin: 0 0 6px;
  background: linear-gradient(135deg, #fff 0%, #ffe5c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.5px;
  -webkit-text-fill-color: transparent;
}
.index__hero___1_W-t p {
  max-width: 600px;
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  opacity: 0.65;
}
/* 原型 `.store-header-inner`：左文案、右「我的订购」，底边对齐 */
.index__heroInner___3wdlM {
  display: flex;
  position: relative;
  z-index: 1;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}
.index__heroText___1uQ5j {
  flex: 1;
  max-width: 720px;
}
/* tagline 胶囊（原型 `.store-header-tagline` :171，PC 专属）：星形图标 + 大写小字 */
.index__tagline___2K9iN {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(232, 139, 48, 0.3);
  border-radius: 20px;
  background: rgba(232, 139, 48, 0.15);
  color: #ffc890;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/*
 * 移动端 hero（移动端原型 `.hero`）：浅橙渐变底 + 右上白色光晕，标题 + 一行说明 +「我的订购」白色胶囊。
 * 不含统计条（T-7.1②）。
 */
.index__heroMobile___2ovju {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, #fff1e0 0%, #ffe4c7 70%, #ffd9b0 100%);
}
.index__heroMobile___2ovju::before {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
  content: '';
}
.index__heroMobile___2ovju h1 {
  position: relative;
  margin: 0 0 8px;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.index__heroMobile___2ovju p {
  position: relative;
  margin: 0;
  color: #6b5848;
  font-size: 11px;
  line-height: 1.6;
}
/* T-6.12 顶部横幅统计（原型 `.store-header-stats` :200）：在售店铺 / 行业覆盖 / 主流平台（接口）+ 业务员对接 24h（静态文案） */
.index__stat___1e3FV {
  display: flex;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  gap: 36px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}
.index__stat___1e3FV b {
  display: block;
  color: #ffc890;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.index__stat___1e3FV span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/*
 * 筛选：两行「标签 + 胶囊」（PC 原型 `.filter-group` / `.filter-label` / `.filter-tab` :213-224；
 * 移动端原型 `.filter-row` / `.filter-label` / `.filter-tab`：标签在胶囊上方、胶囊一行横向滚动）。
 */
.index__filterGroup___2jA8T {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.index__filterGroup___2jA8T:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .index__filterGroup___2jA8T {
    display: block;
  }
}
.index__filterLabel___V6pQ7 {
  min-width: 65px;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* PC 原型是「Platform：」「Industry：」（标签与胶囊同一行）；移动端标签在上方、不带冒号 */
}
.index__filterLabel___V6pQ7::after {
  content: '：';
}
@media (max-width: 768px) {
  .index__filterLabel___V6pQ7 {
    display: block;
    min-width: 0;
    margin-bottom: 6px;
    padding-left: 2px;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }
  .index__filterLabel___V6pQ7::after {
    content: none;
  }
}
.index__tabs___DFZca {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  /* 移动端不换行、横向滚动，避免两行筛选撑高首屏 */
}
.index__tabs___DFZca a {
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #f5f1ed;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}
.index__tabs___DFZca a:hover {
  background: #ede5dc;
  color: #333;
}
.index__tabs___DFZca em {
  margin-left: 4px;
  font-style: normal;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .index__tabs___DFZca {
    flex-wrap: nowrap;
    gap: 6px;
    /* 4px 沿用移动端原型 .filter-tabs；顺带让选中态投影（.tabActive box-shadow）底边少被裁一些——
       overflow-x: auto 会连带裁掉纵向溢出。Agents 的按钮没有投影，它那边是 0 */
    padding-bottom: 4px;
    overflow-x: auto;
    /* 滚动条与 M 站 Discovery 同一菜单下的 Agents 页签筛选同一种写法（paidService.less .btnList）：
       只给 ::-webkit-scrollbar 定 2px、不定 thumb/track。Chrome / 安卓 WebView 下就不画默认滑块，看不到灰条、照样能滑；
       iOS 用原生滚动指示条、不认这些尺寸，两个页签在 iOS 上也一样都是系统指示条 */
  }
  .index__tabs___DFZca::-webkit-scrollbar {
    height: 2px;
  }
  .index__tabs___DFZca a {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 14px;
    background: #f5efe6;
    white-space: nowrap;
  }
}
/* 选中态（原型 `.filter-tab.active`）：主色实底白字 + 投影。
   写成 `.tabs .tabActive` 是为了压过上面 `.tabs a` 的特异性；
   用单独的局部类而不是全局 `.is-active`：CSS Modules 下全局类名不会被导出，写了也挂不上 */
.index__tabs___DFZca .index__tabActive___38NyP {
  border-color: var(--cj-primary);
  background: var(--cj-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 139, 48, 0.3);
}
.index__tabs___DFZca .index__tabActive___38NyP:hover {
  background: var(--cj-primary);
  color: #fff;
}
/* 空态：插画 + 主文案 + 副文案 + 重置入口（方案 §2.1-1 第⑤条、PRD §6.9、
   原型 renderEmptyState :1453-1459）。flex 纵向居中：插画与文字必须共用同一条
   中轴线，两个块各自 text-align:center 在窄屏下会错开 */
.index__empty___nKoK9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px;
  text-align: center;
}
/* 插画与标题之间的 20px 取自原型的 `margin-bottom:20px` */
.index__emptyIllustration___3CyWj {
  margin-bottom: 20px;
}
.index__emptyTitle___2DbDf {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--cj-text);
}
.index__emptySub___1Fe0H {
  margin: 0;
  font-size: 14px;
  color: var(--cj-text-dim);
}
.index__emptyReset___2R69A {
  display: inline-block;
  margin-top: 16px;
  color: var(--cj-primary);
  font-size: 14px;
}
/*
 * 列表网格（NEW-7 · 方案 T-6.1「PC端卡片列表响应式布局确认」，26年07月23日用户确认保留原型现状）：
 * 视口 >1024px 3 列、769–1024px 2 列、≤768px 1 列——逐字对应原型 `.store-grid` 的
 * `repeat(3,1fr)` + `@media(max-width:1024px){repeat(2,1fr)}` + `@media(max-width:768px){1fr}`。
 * 此前少了 1024 这一档，769–1024 的窗口里三列硬挤，卡片宽不到 300px，
 * 封面徽标与底部两个按钮互相顶。
 *
 * 两条 @media 的先后不能换：max-width:1024 也命中 ≤768 的视口，写在后面的 768 才能盖住它。
 * 两列时卡片（.card）照旧 `overflow: hidden`，店名过长仍是省略号，不会把列撑宽。
 */
/* 当前页筛选/翻页取数期间：旧结果变淡、点不了（列表与空态共用）。不整块清空——
   清空再填回来会闪一下，且页面高度骤减会把滚动位置带跑 */
.index__listBusy___2T-9Z {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s;
}
.index__list___1GUlD {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 32px 36px 48px;
  list-style: none;
  /* 移动端原型 `.store-list`：单列、间距 14、左右 16 */
}
@media (max-width: 1024px) {
  .index__list___1GUlD {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .index__list___1GUlD {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 16px 24px;
  }
}
/**
 * 卡片（原型 `.store-card` :229）。
 *
 * <p>结构与原型一致：`.cardImg`（可点，开预览弹窗）+ `.cardBody`（名称/辅助文案/价格/双按钮）。
 * 这里**没有** `a` 的样式了——卡片自 26年08月13日裁决起不再整块跳详情页
 * （详情页已撤，职能搬进预览弹窗）。
 */
.index__card___2MIhy {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #f0ebe5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}
@media (max-width: 768px) {
  .index__card___2MIhy {
    border-color: #f2ede5;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
}
/* 封面图区。`overflow: hidden` + `position: relative` 是三个绝对定位徽标
   （平台/行业/快速预览）的定位基准；少了 relative 它们会跑到整页左上角 */
.index__cardImg___1IvoZ {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* 键盘 focus 必须看得见：这是个 role=button 的 div，
     没有原生按钮的默认焦点框，去掉就等于键盘用户不知道自己在哪 */
  /* 悬停时封面底部压一层渐暗（原型 `.card-img::after` :244），把「快速预览」托出来 */
}
.index__cardImg___1IvoZ:focus-visible {
  outline: 2px solid var(--cj-primary);
  outline-offset: -2px;
}
.index__cardImg___1IvoZ img {
  display: block;
  width: 100%;
  aspect-ratio: 1.33333333;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.index__cardImg___1IvoZ::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  content: '';
  pointer-events: none;
}
.index__cardBody___nVlb8 {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 22px;
}
@media (max-width: 768px) {
  .index__cardBody___nVlb8 {
    padding: 12px 14px 14px;
  }
}
/* 店名一行截断 + 后面跟预览码标签（原型 `.card-name` :279）。
   用 flex 而不是让标签 inline 跟在文字后面：文字过长时 inline 标签会被挤到第二行，
   而 `min-width: 0` + ellipsis 能让标签始终贴在截断处 */
.index__cardName___2dauw {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 6px;
  overflow: hidden;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .index__cardName___2dauw {
    font-size: 14px;
  }
}
/* 店名自己截断（flex 子项要 min-width:0 才缩得下去），预览码标签贴在截断处 */
.index__cardNameText___1_aK6 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/**
 * Shopify 预览码标签（原型 previewCodeBadge :1424 逐字：11px、#5B6B85 字色、
 * #F0F4FA 底、圆角 10px、monospace、letter-spacing 1px）。
 *
 * <p>`flex-shrink: 0`：店名过长时该被截断的是店名，不是这个标签——
 * 标签被压成半个圆角比店名少几个字更难看懂。
 */
.index__previewCodeBadge___1oISr {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
  /* 码上限 20 位（26年10月21日反馈），存量码仍可能更长（旧口径 6~100 位）：
     标签限宽，超出省略，完整码在 title 里 */
  max-width: 140px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f0f4fa;
  color: #5b6b85;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
}
.index__previewCodeBadge___1oISr svg {
  flex-shrink: 0;
}
.index__previewCodeText___2ZX9I {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 平台徽标（原型 `.card-badge` :262）。压在封面左上角，
   两个平台颜色不同——这是列表里唯一能一眼分出平台的地方 */
.index__cardBadge___32TJ2 {
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  gap: 4px;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}
/* 平台名前的白点（原型 `.card-badge .dot` :270） */
.index__cardBadgeDot___1Qpvf {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
/* 颜色逐字取自原型 :268-269 */
.index__badgeShopify___1BgOB {
  background: rgba(150, 191, 72, 0.95);
}
.index__badgeWed2c___1G_Ka {
  background: rgba(24, 144, 255, 0.95);
}
/* 认不出来的平台（原型只画了两个）。中性灰，**不借用**上面任何一个平台的颜色：
   颜色是列表里唯一能一眼分平台的东西，把第三个平台涂成 WED2C 蓝，
   等于告诉用户它是 WED2C，而页面不会有任何异常（bug#No.13） */
.index__badgeOther___6SPmD {
  background: rgba(85, 95, 110, 0.95);
}
/* 行业徽标（原型 `.card-industry` :270）：白底深字，压在封面右上角 */
.index__cardIndustry___2cUuZ {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}
/* §2.1-2b 悬停动效（原型 `.store-card:hover` :234-251）：上浮 8px + 带橙色的长投影 + 封面放大 1.08、
   底部渐暗，并让「快速预览」浮层浮现。触摸设备没有 hover，所以浮层在窄屏下改为常驻——
   否则移动端用户永远看不到这个入口 */
.index__cardHover___vidoN {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.index__cardHover___vidoN:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 139, 48, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(232, 139, 48, 0.15);
}
.index__cardHover___vidoN:hover .index__cardQuick___1Wjx2 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.index__cardHover___vidoN:hover .index__cardImg___1IvoZ img {
  transform: scale(1.08);
}
.index__cardHover___vidoN:hover .index__cardImg___1IvoZ::after {
  opacity: 1;
}
/* 卡片固定辅助文案（v5.20 裁决第⑪条 / 原型 `.card-meta` :283）。
   纯静态、每张卡都有，视觉上不能压过价格（bug#70） */
.index__cardMeta___1GUOm {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--cj-text-dim);
  font-size: 11px;
}
/* 两段辅助文案之间的圆点分隔（原型 `.card-meta .dot-sep` :291）。
   用一个空 `<i>` 而不是文本里的「·」：那个点夹在两段文字之间
   就是三个相邻文本节点，水化时整段判不匹配（bug#178） */
.index__dotSep___3t-YZ {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ddd;
}
/* 价格行（原型 `.card-price-row` :292）：「起售」+ 金额 +「/ 店」，
   底部一条虚线把它与两个按钮隔开 */
.index__cardPriceRow___3z4ad {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #efe9e2;
}
.index__cardPriceLabel___J9vU-,
.index__cardPriceUnit___2GtQv {
  color: var(--cj-text-dim);
  font-size: 11px;
}
.index__cardPriceUnit___2GtQv {
  font-size: 12px;
  font-weight: 500;
}
.index__cardPrice___EU23z {
  color: var(--cj-primary);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
}
/* 双按钮（原型 `.card-actions` :302）。等宽（flex:1）且并排：
   「预览店铺」次级、「立即购买」主操作，主次一眼可辨 */
.index__cardActions___25teA {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
/* 原型 .btn-preview / .btn-buy：图标与文字横排居中、间距 6px；
   移动端原型（.btn-preview/.btn-buy @≤768）更紧凑：9px 8px、8 圆角、12px 加粗、间距 4px，「Buy Now」不带对勾 */
.index__btnPreview___2P4x6,
.index__btnBuy___3l4ja {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.index__btnPreview___2P4x6 svg,
.index__btnBuy___3l4ja svg {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .index__btnPreview___2P4x6,
  .index__btnBuy___3l4ja {
    gap: 4px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .index__btnBuy___3l4ja svg {
    display: none;
  }
}
.index__btnPreview___2P4x6 {
  border: 1.5px solid #e0d8d0;
  background: #fff;
  color: #1a1a1a;
}
.index__btnPreview___2P4x6:hover {
  border-color: var(--cj-primary);
  background: #fff4ec;
  color: var(--cj-primary);
}
.index__btnBuy___3l4ja {
  border: none;
  background: linear-gradient(135deg, #e88b30, #d07a20);
  color: #fff;
  box-shadow: 0 2px 6px rgba(232, 139, 48, 0.3);
}
.index__btnBuy___3l4ja:hover {
  box-shadow: 0 6px 20px rgba(232, 139, 48, 0.45);
}
.index__btnBuy___3l4ja:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}
/* 「快速预览」浮层（原型 `.card-quick-preview` :252）：
   底部居中、悬停时从下方浮起。它只是提示，点击由整个 .cardImg 接住 */
.index__cardQuick___1Wjx2 {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  /* 原型：眼睛图标 + 文字横排，间距 6px，毛玻璃底 */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  /* 无 hover 能力的设备（触屏）常驻显示 */
  /* 移动端原型（与 PRD 截图 img12）的卡片上没有「快速预览」浮层：点封面 / 「Preview」即可预览 */
}
@media (hover: none) {
  .index__cardQuick___1Wjx2 {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@media (max-width: 768px) {
  .index__cardQuick___1Wjx2 {
    display: none;
  }
}
/*
 * PC 翻页器（No.20）：站点 jqPaginator 形态 `<< < 1 2 3 4 5 > >>` + 「Showing [ ] of N」+「Go」，
 * 尺寸与配色参照站点 `public/egg/style/less/search-page.less` 的 .page-index / .to-go。
 * 页码与跳页框一行排开、整体居中；窄一点的 PC 窗口里允许折成两行，不撑破容器。
 */
.index__pager___3j0w3 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  color: var(--cj-text-dim);
  font-size: 13px;
}
.index__pagerLinks___1i3Ir {
  display: flex;
  gap: 4px;
  align-items: center;
}
.index__pagerLinks___1i3Ir a,
.index__pagerLinks___1i3Ir span {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--cj-border);
  border-radius: 4px;
  color: var(--cj-text);
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}
.index__pagerLinks___1i3Ir a:hover {
  border-color: var(--cj-primary);
  color: var(--cj-primary);
}
/* 当前页：实心主色（.pagerLinks span 的边框/尺寸照旧，这里只覆盖配色，放在其后） */
.index__pagerLinks___1i3Ir .index__pagerActive___1GscU {
  border-color: var(--cj-primary);
  color: #fff;
  background: var(--cj-primary);
}
/* 已在首页/末页时的 << < / > >>：灰态、不可点 */
.index__pagerLinks___1i3Ir .index__pagerDisabled___G-bLG {
  color: #c9cdd4;
  cursor: not-allowed;
}
.index__pagerJump___3lRs8 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.index__pagerJump___3lRs8 input {
  width: 48px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--cj-border);
  border-radius: 4px;
  color: var(--cj-text);
  font-size: 13px;
  text-align: center;
  /* 校验不过（非 1..N 的整数）只标红、不跳页 */
}
.index__pagerJump___3lRs8 input[aria-invalid='true'] {
  border-color: #f53f3f;
}
.index__pagerJump___3lRs8 button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--cj-border);
  border-radius: 4px;
  background: var(--cj-bg-soft);
  color: var(--cj-primary);
  font-size: 13px;
  cursor: pointer;
}
/**
 * 移动端滚动加载（T-7.1 · bug#176）。
 *
 * <p>这一块同时是 IntersectionObserver 的哨兵节点，所以**必须占据高度**：
 * 高度为 0 的元素在部分浏览器上不会触发 intersecting，自动加载就永远不来，
 * 而按钮还在、点了也有反应——症状是"有时候要手点、有时候不用"，极难复现。
 *
 * <p>与「我的订购」`my-order/index.less` 的同名一组保持同构：
 * 同一个站里两处滚动加载长得不一样，用户会以为其中一处坏了。
 */
.index__loadMore___1ge6F {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 0;
}
.index__loadMore___1ge6F button {
  padding: 8px 24px;
  border: 1px solid var(--cj-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cj-text);
  font-size: 13px;
}
.index__loadMore___1ge6F button:disabled {
  color: var(--cj-text-dim);
}
.index__loadMoreError___TEp_- {
  margin: 0;
  color: #f53f3f;
  font-size: 12px;
}
.index__loadMoreEnd___1Vqaw {
  margin: 16px 0;
  color: var(--cj-text-dim);
  font-size: 12px;
  text-align: center;
}
/* T-6.11 ① 营销博文入口卡片（PRD img17）：浅灰底细边框，左缩略图、中间标题 + 副文、右侧描边「Learn More」。
   上下外边距相等，卡片在 Banner 与下方白色筛选区之间上下居中（26年10月21日验收反馈；此前下边距 4px，卡片贴着筛选区） */
.index__blogCard___32QjG {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 20px 36px;
  padding: 14px 20px;
  border: 1px solid #ebeef2;
  border-radius: 10px;
  background: #f9fafb;
  color: inherit;
  text-decoration: none;
  /* 缩略图照 PRD img17：一张「博文小卡片」——上面是封面、下面三行正文摘要，白底圆角带细阴影，约 117×80。
     此前只放封面（16:9、没有摘要行），与截图不一致（26年10月13日用户指出）。摘要已画进图片里：
     这么小的字用 CSS 渲染会被浏览器最小字号（中文环境常为 12px）撑大 */
}
.index__blogCard___32QjG img {
  flex: none;
  width: 117px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.index__blogCard___32QjG h3 {
  margin: 0 0 4px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
}
.index__blogCard___32QjG p {
  margin: 0;
  color: var(--cj-text-dim);
  font-size: 13px;
}
.index__blogText___OmaQO {
  flex: 1;
  min-width: 0;
}
.index__blogBtn___1mqEh {
  flex-shrink: 0;
  padding: 6px 18px;
  border: 1px solid #d9b48c;
  border-radius: 6px;
  background: #fff;
  color: #b07a3c;
  font-size: 13px;
  font-weight: 500;
}
/**
 * 「我的订购」入口（PRD 第 1 节 555 行 · bug#87）。
 * PC：原型 `.btn-my-orders` :182——Banner 右侧的橙色渐变按钮，红色角标跟在文字后面。
 * 移动端：原型 `.hero-orders-btn`——hero 文案下方的白色胶囊，主色角标。
 * （26年10月09日从 Banner 上方的白色按钮挪进 Banner，见 index.jsx 里的说明）
 */
.index__myOrderEntry___1_iB0 {
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid rgba(255, 220, 180, 0.6);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 200, 144, 0.95), rgba(232, 139, 48, 0.95));
  color: #1f1410;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(232, 139, 48, 0.35);
  transition: all 0.25s;
}
.index__myOrderEntry___1_iB0:hover {
  background: linear-gradient(135deg, #ffd9ac, #f0a050);
  color: #1f1410;
  box-shadow: 0 8px 24px rgba(232, 139, 48, 0.5);
  transform: translateY(-2px);
}
.index__myOrderEntryMobile___B9QLx {
  display: inline-flex;
  position: relative;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 18px;
  background: #fff;
  color: var(--cj-primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(232, 139, 48, 0.2);
}
/* 角标跟在文字后面（不再绝对定位到按钮外角）。用 min-width + 圆角而不是固定宽度：
   订单数上三位时固定宽度会把数字裁掉一半，而"14"和"143"都很常见 */
.index__myOrderBadge___58VSm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 1px 6px;
  /* 26年11月06日用户反馈：描边 1px 深红 #ab0437、底色浅红 #ff4d4f（PC 与手机版同一套） */
  border: 1px solid #ab0437;
  border-radius: 10px;
  background: #ff4d4f;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  /* 手机版尺寸略大；描边与底色同 PC（26年11月06日用户：移动端一起改） */
}
.index__myOrderEntryMobile___B9QLx .index__myOrderBadge___58VSm {
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
}
/*
 * 筛选区吸顶（bug#186，TC-484/485）：平台、行业两行整体吸附在顶部，滚动时不随内容滚出可视区
 * （原型 `.store-filters` :207：白底、下边线、sticky）。
 *
 * PC 吸在站点头部的 mini 条下面（`top: 60px`，原型同位置是吸在 56px 高的导航下）：
 * 本站头部（微前端 CjHeader）一滚动就收成 `position: fixed` 的 mini 条——`#searchBox.mini`，
 * 0~60px，z-index 1003。此前这里贴 0（理由是「头部高度会变、写死数值会重叠」），
 * 26年10月13日真页面实测恰好相反：筛选区吸顶的那一刻头部早已是 mini 条，贴 0 时
 * 平台一整行（All / Shopify / WED2C）被 mini 条盖住，吸顶态点「Shopify」命中的是头部的
 * 「Products」（TC-484/485 判 FAIL）。手机直访时头部不吸顶、内嵌 Tab 里头部被藏掉，仍贴 0。
 *
 * 必须给背景色：sticky 元素脱离常规流后，下方卡片会从它**背后**穿过，没有背景就是文字叠文字。
 */
.index__filterBar___3RSpb {
  position: sticky;
  top: 60px;
  z-index: 20;
  padding: 18px 36px;
  border-bottom: 1px solid #efe9e2;
  background: #fff;
}
@media (max-width: 768px) {
  .index__filterBar___3RSpb {
    top: 0;
    padding: 14px 16px 6px;
    border-bottom-color: #f2ede5;
  }
}
/**
 * 已售出/售卖中拦截弹窗（PRD 第 7 节 739~741 行 · bug#85）。
 *
 * <p>与详情页/结算页那两份**同构**（`checkout/index.less` 同名一组）：
 * PRD 明确几个入口的拦截表现一致，长得不一样用户会以为其中一处坏了。
 *
 * <p>z-index 取 1100，**高于预览弹窗的 1010**（2026-08-21 前，预览弹窗是 1000；
 * 因为站点公共头 `#searchBox` 自带 `z-index:1003`、会盖住整屏后的预览顶栏，
 * 那边抬到了 1010，见 `previewModal.less .mask` 的实测记录）：两者会同时开着
 * （用户在预览弹窗里点了「立即购买」），此时必须让"买不到了"这条盖在上面——
 * 它是终止性的，而预览只是参考信息。遮罩没有层级 = 有遮罩等于没遮罩。
 *
 * <p>⚠️ 改这里或改 previewModal 的层级时两处一起看：**1100 > 1010 > 1004(#cj-menu) > 1003(#searchBox)**
 * 这条不等式是三方共同约束，只调一边就会出现"拦截弹窗被预览弹窗盖住"或
 * "预览顶栏被公共头盖住"两种没有报错的故障。
 */
.index__soldOutMask___1N9Rw {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 原型 .modal-overlay：深棕半透明 + 背景模糊 */
  background: rgba(15, 10, 5, 0.65);
  backdrop-filter: blur(6px);
}
@media (max-width: 768px) {
  .index__soldOutMask___1N9Rw {
    background: rgba(0, 0, 0, 0.55);
  }
}
/*
 * 已售出拦截弹窗（PC 原型 #soldOutModal：.login-modal 480 宽、44/40 内边距、16 圆角；
 * 移动端原型 .m-sheet + .success-icon.warn + .success-msg-block.warn + .modal-btn.primary）。
 * 26年10月09日真页面对照原型订正：此前是 420 宽、红字标题拼 ⚠️、灰字说明、蓝色按钮。
 */
.index__soldOutModal___2YF-5 {
  box-sizing: border-box;
  width: 480px;
  max-width: 92vw;
  padding: 44px 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  text-align: center;
}
@media (max-width: 768px) {
  .index__soldOutModal___2YF-5 {
    width: calc(100% - 32px);
    padding: 20px 18px 22px;
    border-radius: 18px;
  }
}
/* 圆形浅红渐变底的 ⚠️（原型 68px；移动端 .success-icon 64px） */
.index__soldOutIcon___3sdN2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff1f0, #ffd6d4);
  font-size: 34px;
  box-shadow: 0 8px 20px rgba(255, 77, 79, 0.18);
}
@media (max-width: 768px) {
  .index__soldOutIcon___3sdN2 {
    width: 64px;
    height: 64px;
    margin: 4px 0 14px;
    font-size: 32px;
  }
}
.index__soldOutTitle___185LY {
  margin: 0 0 12px;
  color: #1a1a1a;
  font-size: 22px;
  font-weight: 800;
}
@media (max-width: 768px) {
  .index__soldOutTitle___185LY {
    margin-bottom: 6px;
    font-size: 17px;
  }
}
/* 浅红底说明框（原型 #FFF7F7 底、#FFCDC8 边、左对齐、深红字） */
.index__soldOutMessage___Kr_xr {
  margin: 20px 0;
  padding: 18px 22px;
  border: 1px solid #ffcdc8;
  border-radius: 12px;
  background: #fff7f7;
  color: #7a2a26;
  font-size: 13px;
  line-height: 1.9;
  text-align: left;
}
@media (max-width: 768px) {
  .index__soldOutMessage___Kr_xr {
    margin: 14px 0;
    padding: 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.8;
  }
}
/* CTA 做成整块按钮而不是一条文字链：它是这个弹窗里唯一的出口，PRD 741 行也把它写成「按钮」。
   原型 .btn-login-submit：通栏、主色渐变（此前是 160 宽的蓝色按钮） */
.index__soldOutCta___3PZta {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  /* 移动端购买拦截弹窗里它是 <button>（「我知道了」只关弹窗），要去掉按钮默认边框 */
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #e88b30, #d07a20);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(232, 139, 48, 0.25);
}
.index__soldOutCta___3PZta:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(232, 139, 48, 0.45);
}
@media (max-width: 768px) {
  .index__soldOutCta___3PZta {
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 700;
  }
}

/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/less-loader/dist/cjs.js!./app/web/page/storeMarket/list/previewModal.less ***!
  \**********************************************************************************************************************************************************************/
/**
 * CJ 店铺售卖一期 · T-6.2/6.3 店铺预览弹窗样式
 *
 * 需求依据：原型 `前台原型-CJ店铺售卖.html`
 *  · :326-372   `.modal-overlay` / `.preview-modal` / `.preview-header` / `.preview-device-btn` / `.preview-buy-small`
 *  · :1119-1136 `#shopifyCodeGate`（inset:0 + backdrop-filter:blur(6px) 的 Gate 蒙层）
 *  · :1318-1350 Shopify 预览码 Step1 弹窗
 *
 * <p><b>本仓对 .less 强制开启 CSS Modules</b>（webpack.config.js:
 * `localIdentName: '[name]__[local]___[hash:base64:5]'`），所以这里的类名是**局部**的，
 * 必须经 `import style from './previewModal.less'` 以 `style.xxx` 引用。
 * 在 jsx 里写死 `className="mask"` 匹配不上任何一条规则——页面不报错，
 * 只是"弹窗"退化成一段贴在页脚的裸文字（`storeMarket.styles.test.js` 开篇讲的就是这件事）。
 */
.previewModal__mask___3ufQZ {
  --cj-primary: #e88b30;
  --cj-text: #1d2129;
  --cj-text-dim: #86909c;
  --cj-border: #e5e6eb;
  position: fixed;
  /* 四个方向分开写，不用 `inset: 0`：CJ 安卓 App 的内置 WebView 不认 inset（26年10月12日用户真机反馈），
     遮罩会落到页面最底下、看不见，而滚动锁照样生效——表现为一点卡片 / 预览 / 购买，整页就卡住不动 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*
   * 必须高于列表页的吸顶筛选条（z-index:20），否则筛选条会从遮罩里穿出来浮在弹窗上面。
   *
   * <p><b>1010 而不是「隐私弹窗那一档」的 1000</b>（2026-08-21 移动端真机实测）：
   * 站点公共头不是 fixed、却自带层级——`#searchBox` 是 `position: relative; z-index: 1003`，
   * 布局里的 `#cj-menu` 是 1004。写 1000 时它们**盖在遮罩之上**：
   * <pre>
   *   iPhone 390×844，弹窗整屏后 .modal = 0,0,390×844
   *   「返回」按钮 rect = 12,12,36×36
   *   document.elementFromPoint(30,30) → DIV.globalWarehouseBox--FRq8L（公共头里的元素）
   *   → 返回按钮命中不到，而遮罩本身不支持点击关闭：弹窗**没有任何出口**
   * </pre>
   * PC 端弹窗是 92vh 居中浮层，与 60px 高的公共头只重叠顶部十几像素，
   * 所以这条一直没被发现；移动端整屏后整行顶栏（返回 + 店铺名 + 平台/行业/价格）全被吃掉。
   *
   * <p>上限由「已售出拦截弹窗」的 1100 约束（见 `index.less .soldOutMask`）：
   * 那一层必须仍在预览弹窗之上（两者会同时开着），所以这里取 1010 而不是随手一个大数。
   */
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 10, 5, 0.65);
  /*
   * 移动端整屏（原型 `前台原型-CJ店铺售卖-移动端.html:224` 注释逐字
   * 「PREVIEW MODAL (Full screen inside phone)」= `inset: 0` + 无圆角 + 无外边距）。
   *
   * <p>这 16px padding 在 390 宽的屏上是**双向**各吃掉 16px，弹窗四周露出一圈遮罩底，
   * 与原型的整屏形态不符（No.109）。PC 端那圈留白是对的（弹窗是 94vw 的浮层），
   * 所以只在窄屏去掉，不动 PC。
   */
}
@media (max-width: 768px) {
  .previewModal__mask___3ufQZ {
    padding: 0;
  }
}
/* ============ 预览弹窗本体（原型 .preview-modal :328） ============ */
.previewModal__modal___2JikN {
  display: flex;
  flex-direction: column;
  width: 94vw;
  height: 92vh;
  overflow: hidden;
  border-radius: 18px;
  background: #1a1a1a;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5);
  /*
   * 移动端整屏（原型 :224-228 `.preview-modal { position:absolute; inset:0 }`，
   * 无圆角、无阴影、贴满四边）。
   *
   * <p>94vw/92vh 在手机上留下的那 6%/8% 不是"呼吸感"：预览弹窗要在一块 390px 宽的屏上
   * 同时摆返回、店铺信息、PC/移动端切换、立即购买四组控件，外加一个 iframe 舞台，
   * 少 24px 就是少一行可用高度。圆角与阴影在贴边整屏下也失去意义（看不到边框外的底）。
   */
}
@media (max-width: 768px) {
  .previewModal__modal___2JikN {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}
/* 顶栏：返回 + 店铺信息 + 居中设备切换 + 立即购买（原型 .preview-header :333） */
.previewModal__header___vCuPU {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 60px;
  padding: 14px 24px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  /* 窄屏一行摆不下四组控件，换行而不是让「立即购买」被挤出可视区 */
}
@media (max-width: 768px) {
  .previewModal__header___vCuPU {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
}
.previewModal__back___1IQNC {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fafafa;
  color: #555;
  cursor: pointer;
}
.previewModal__back___1IQNC:hover {
  border-color: var(--cj-primary);
  background: #f0ece8;
  color: var(--cj-primary);
}
.previewModal__storeInfo___TWZ2J {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.previewModal__storeName___y6-CE {
  overflow: hidden;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.previewModal__storeSub___23yty {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--cj-text-dim);
  font-size: 11px;
}
/* 平台/行业/价格三段各自一个 em（bug#178：不能写成 `{a} · {b}`）。
   三者视觉上要分得开，否则挤成一串读不出边界 */
.previewModal__platformTag___3OXof {
  padding: 1px 6px;
  border-radius: 4px;
  background: #f0ece8;
  color: #666;
  font-style: normal;
  font-weight: 600;
}
.previewModal__industryTag___3fb1j {
  font-style: normal;
}
/* 行业与价格之间的「·」（原型 :1060）。价格与行业同色同字重——原型 `.store-sub` 整行都是浅灰 11px，
   26年10月09日真页面对照前价格是橙色加粗、也没有这个点 */
.previewModal__subSep___2dSTI {
  font-style: normal;
}
.previewModal__priceTag___1pCBg {
  font-style: normal;
}
/* 设备切换（原型 .preview-center :347）。margin:0 auto 让它居中，
   两侧的店铺信息与购买按钮各自靠边 */
.previewModal__deviceSwitch___CkXkd {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0 auto;
  padding: 4px;
  border-radius: 10px;
  background: #f2eee9;
}
.previewModal__deviceBtn___2lRAi {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.previewModal__deviceBtn___2lRAi:hover {
  color: #333;
}
/* 选中态必须有**背景色**差异，不能只改文字颜色：
   这是"当前在看哪个端"的唯一指示，只靠颜色深浅在弱光屏幕上分不出来 */
.previewModal__deviceBtnActive___3GGYr {
  /* 与 .deviceBtn 的盒模型逐条对齐（不用 Less mixin：CSS Modules 下
     mixin 出来的选择器不参与导出，改起来两边容易漂）——尺寸一旦不一致，
     点切换时按钮会跳一下宽度 */
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 7px;
  background: #fff;
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* 「立即购买」（原型 .preview-buy-small :362，PRD 590 行「橙色按钮」）。
   与切换/返回那两个中性控件在同一行里必须一眼分得出主次，
   做成同样的灰底就等于把这个入口藏起来了（bug#88） */
.previewModal__buyBtn___3qJFR {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  padding: 9px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #e88b30, #d07a20);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.previewModal__buyBtn___3qJFR:hover {
  box-shadow: 0 6px 20px rgba(232, 139, 48, 0.45);
}
/* 不可内嵌时没有设备切换，「立即购买」靠右（原来是被居中的切换按钮推到右边的） */
.previewModal__buyBtnEnd___H13XA {
  margin-left: auto;
}
/* 正文舞台。`position: relative` 是 Gate 蒙层 `inset: 0` 的定位基准——
   少了它蒙层会相对视口铺满，把顶栏（含「立即购买」与「返回」）一起盖掉 */
.previewModal__body___3hYHd {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  background: radial-gradient(circle at 50% 20%, #2a2520 0%, #1a1a1a 70%);
}
.previewModal__hint___1uKZ4,
.previewModal__hintError___2lP2k {
  margin: 0;
  font-size: 14px;
}
.previewModal__hint___1uKZ4 {
  color: #bbb;
}
.previewModal__hintError___2lP2k {
  color: #ff7875;
}
.previewModal__stageWrap___3SaeD {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
}
/* 设备标签（原型 .device-label-bar :1094 / .device-label :1105） */
.previewModal__deviceLabel___3jnx7 {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}
/**
 * Web 视图 = 模拟浏览器（原型 `.preview-stage-web` :386 + `.browser-chrome` :394 + `.device-label-bar` :470）：
 * 白底圆角卡片，顶部浏览器外框（红黄绿三点 / 带店名的标签页 / 地址栏 / ⋮），中间是店铺，
 * 底栏左「Simulated 1280×800 · Desktop browser」、右绿色「Desktop Preview」。
 * 26年10月09日真页面对照原型补齐：此前只有 iframe 和上方一行说明。
 */
.previewModal__stageWeb___3Qw4m {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
/* 舞台内容区：iframe 与加载中遮罩（inset:0）的定位基准 */
.previewModal__stageContent___1F6KM {
  position: relative;
  flex: 1;
  min-height: 0;
}
.previewModal__browserChrome___189q9 {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #ddd;
  background: #ececec;
  /* 手机上整屏预览时没有地方摆一整条浏览器外框，只留内容 */
}
@media (max-width: 768px) {
  .previewModal__browserChrome___189q9 {
    display: none;
  }
}
.previewModal__browserDots___3jgSk {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.previewModal__browserDots___3jgSk span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.previewModal__dotRed___3PD-H {
  background: #ff5f57;
}
.previewModal__dotYellow___3vLNw {
  background: #febc2e;
}
.previewModal__dotGreen___2_sR6 {
  background: #28c840;
}
.previewModal__browserTab___fSrt_ {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  max-width: 200px;
  padding: 6px 14px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #fff;
  color: #333;
  font-size: 11px;
  white-space: nowrap;
}
.previewModal__browserFav___125-N {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #e88b30, #d07a20);
}
.previewModal__browserTabName___1GprP {
  overflow: hidden;
  text-overflow: ellipsis;
}
.previewModal__browserUrlBar___2MD_l {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-family: -apple-system, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.previewModal__browserLock___1oqoA {
  color: #34a853;
  font-size: 10px;
}
.previewModal__browserUrl___RQ9Vl {
  color: #333;
  font-weight: 500;
}
.previewModal__browserUrlPath___3Mn_I {
  overflow: hidden;
  color: #888;
  text-overflow: ellipsis;
}
.previewModal__browserActions___2r90u {
  flex-shrink: 0;
  color: #888;
}
.previewModal__deviceLabelBar___3kfFa {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid #ececec;
  background: #fafafa;
  color: #999;
  font-size: 11px;
  letter-spacing: 0.5px;
}
@media (max-width: 768px) {
  .previewModal__deviceLabelBar___3kfFa {
    display: none;
  }
}
.previewModal__deviceLabelBadge___YHmdO {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
}
/**
 * 手机框形态（PRD 588 行「移动端以手机框形态展示」· bug#89；原型 `.preview-stage-mobile` :427 起）：
 * 深色渐变机身 + 两道描边 + 阴影，屏幕 390 宽、32px 圆角，屏幕顶部状态栏（9:41 / 信号 / 电量）
 * 与刘海、机身底部 Home 条。26年10月09日真页面对照原型补齐刘海与状态栏。
 *
 * <p>类名沿用已撤详情页的 `.phoneFrame`（不改叫 stageMobile）：它是这一期
 * 讨论手机框形态时的既有词，改个名会让 bug#89 的记录、用例与代码对不上。
 */
.previewModal__phoneFrame___Pgwej {
  position: relative;
  flex: none;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(135deg, #2c2c2e, #1c1c1e);
  box-shadow: 0 0 0 2px #3a3a3c, 0 0 0 4px #1c1c1e, 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.previewModal__phoneScreen___39baC {
  position: relative;
  width: 390px;
  max-width: calc(100vw - 48px);
  height: calc(92vh - 200px);
  min-height: 420px;
  max-height: 780px;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
}
.previewModal__phoneStatusbar___1wJgR {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 14px 28px 0;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
}
.previewModal__phoneStatusIcons___k4hah {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
}
.previewModal__phoneNotch___1p9eF {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  background: #1c1c1e;
  transform: translateX(-50%);
}
.previewModal__phoneSpeaker___2es5d {
  width: 50px;
  height: 5px;
  border-radius: 3px;
  background: #2c2c2e;
}
.previewModal__phoneCamera___DQ4_7 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2a2c;
  box-shadow: inset 0 0 0 2px #1c1c1e;
}
.previewModal__phoneHomeBar___2VIKS {
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: 10;
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: #1a1a1a;
  transform: translateX(-50%);
}
/*
 * 双 iframe 里当前没在看的那个视图（NEW-4 · 原型 `.preview-stage-web` / `.preview-stage-mobile`
 * 不带 `.active` 时就是 display:none）。只隐藏、不卸载：iframe 留在 DOM 里原地不动，
 * 切回来不会重新加载。必须写在 .stageWeb / .phoneFrame 之后（同优先级，后者胜）。
 */
.previewModal__stageHidden___1632c {
  display: none;
}
.previewModal__iframeWeb___377rj {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  background: #fff;
}
/* 视图切换靠两个外壳的**宽度**区分（手机屏 390、Web 铺满）——两者必须真的不同，
   否则"切到移动端"点了没反应，看着像按钮坏了。390 取原型标注的 iPhone 14 Pro。
   iframe 在手机屏里铺满，顶部让出 44px 给状态栏（原型 `.preview-stage-mobile .preview-frame`） */
.previewModal__iframeMobile___kObG2 {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 44px;
  border: 0;
  background: #fff;
  box-sizing: border-box;
}
/*
 * 加载中遮罩（TC-493）：iframe 挂上到 onload / 10s 超时之间盖在它上面，
 * 让这段时间显示「加载中」而不是一块白板。底色与 iframe 的 #fff 一致，撤掉时不闪色块；
 * 圆角跟随外壳（手机框里也是圆角屏）。外壳 .stageWeb / .phoneFrame 都是 position: relative，
 * inset: 0 才铺得住它们而不是整个弹窗。pointer-events: none——它只是提示，不拦交互。
 */
.previewModal__frameLoading___3xnIT {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: #fff;
  pointer-events: none;
}
.previewModal__frameSpinner___LCvUs {
  width: 32px;
  height: 32px;
  border: 3px solid #f0e6da;
  border-top-color: #e88b30;
  border-radius: 50%;
  animation: previewModal__frameSpin___23ogr 0.9s linear infinite;
}
.previewModal__frameLoadingText___2XYBa {
  color: #8a8178;
  font-size: 13px;
}
@keyframes previewModal__frameSpin___23ogr {
  to {
    transform: rotate(360deg);
  }
}
/* 超时提示浮在底部，不盖住 iframe：内容可能只是慢，遮住反而挡了正在出来的东西 */
.previewModal__frameTimeout___2SzW- {
  position: absolute;
  bottom: 12px;
  left: 50%;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  transform: translateX(-50%);
}
/* ============ Shopify 预览码 Gate 蒙层（原型 #shopifyCodeGate :1119） ============ */
.previewModal__gateMask___FmCJ7 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(245, 247, 250, 0.96);
  /* 原型逐字的高斯模糊。`backdrop-filter` 在不支持的浏览器上直接忽略，
     所以底色必须自带 0.96 的不透明度——只靠模糊会让下面的封面图清晰可见 */
  backdrop-filter: blur(6px);
}
/* 毛玻璃背后的"底子"：只是一张列表页上本来就公开的封面图，
   不是真实预览地址（见 PreviewModal.jsx 里 iframe 那段说明） */
.previewModal__gatePeek___1zRC- {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
  /* 只留一点影子（原型 #shopifyCodeGate 0.96 浅灰几乎盖满，底下的店铺只隐约可见）。
     z-index:-1 的子元素画在蒙层自身背景之上，0.5 时封面清晰可见，与原型 / PRD F04 不符（26年10月09日真页面对照订正） */
  opacity: 0.06;
}
/* 「再次获取预览码」挂在 Gate 的右上角（原型 :1121 是贴在边框上的一个小按钮）。
   它必须在蒙层**之上**（z-index 51 > 50），否则点不到 */
.previewModal__refetchBtn___gZYDc {
  position: absolute;
  top: 0;
  right: 60px;
  z-index: 51;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #d07a20;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--cj-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.previewModal__refetchBtn___gZYDc:disabled {
  opacity: 0.6;
}
.previewModal__gateCard___Nvp3A {
  width: 440px;
  max-width: 92vw;
  padding: 36px 40px;
  border: 1px solid var(--cj-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.previewModal__gateIcon___bb0V2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5eb, #ffe8d0);
  color: var(--cj-primary);
}
.previewModal__gateTitle___3pwj8 {
  margin: 0 0 6px;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 800;
}
.previewModal__gateSub___2Y-gj {
  margin: 0 0 18px;
  color: var(--cj-text-dim);
  font-size: 12px;
}
/**
 * 预览码输入框。
 *
 * <p>等宽字体 + letter-spacing 照原型 :1113；但**不写死宽度按 6 位排版**——
 * 预览码旧口径 6~100 位（26年10月21日反馈起新录为 1~20 位），按 6 位设计的
 * 格子在上界码上会溢出；这段排版参数按长码取，对存量长码仍成立。
 *
 * <p><b>⚠️ 不许加 `text-transform: uppercase`</b>（26年07月24日裁决 +
 * 26年08月14日用户复核确认：不做大小写转换，预览码大小写敏感，运营录什么买家就输什么）。
 * 它只改渲染、不改 `value`：屏幕上是大写、提交上去的是原值，一旦有人据此
 * 以为"前端已经转过了"而去动后端比对，排查方向会被彻底带偏。
 */
.previewModal__gateInput___u7541 {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e0d8d0;
  border-radius: 10px;
  color: var(--cj-primary);
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  outline: none;
}
.previewModal__gateInput___u7541:focus {
  border-color: var(--cj-primary);
}
.previewModal__gateActions___1J7qY,
.previewModal__step1Actions___3w1it {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
/* ============ Step1：明文展示 + 一键复制（原型 :1318-1350） ============ */
.previewModal__step1___3QPqd {
  width: 460px;
  max-width: 92vw;
  padding: 40px 36px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  text-align: center;
}
.previewModal__step1Icon___3yVDY {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f4fa, #dbe5f4);
  color: #5b6b85;
}
.previewModal__step1Title___1dBrT {
  margin: 0 0 6px;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 800;
}
.previewModal__step1Store___E7bmT {
  margin: 0 0 20px;
  color: var(--cj-text-dim);
  font-size: 13px;
}
.previewModal__codeBox___2rzjg {
  margin-bottom: 18px;
  padding: 18px;
  border: 1.5px dashed #e88b30;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8f0, #fff5eb);
}
.previewModal__codeLabel___3iHe6 {
  display: block;
  margin-bottom: 6px;
  color: var(--cj-text-dim);
  font-size: 11px;
  letter-spacing: 1px;
}
.previewModal__codeRow___FB9tx {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
/**
 * 明文预览码。等宽字体 + letter-spacing + 可换行（原型 :1330）。
 *
 * <p>`word-break` 不能省：原型按 6 位码排的版（font-size 32 + letter-spacing 8），
 * 换成一个 40 位的真实预览码会**横向溢出弹窗**，右半截看不见也复制不到。
 * 字号相应降到 24——长码（旧口径上界 100 位；26年10月21日反馈起新录 1~20 位）
 * 里可读与不溢出只能这么折中。
 */
.previewModal__codeText___JAyHk {
  color: var(--cj-primary);
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4px;
  word-break: break-all;
}
.previewModal__copyBtn___4mrEr {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--cj-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* 「码要拿去哪儿用」那段说明（原型 :1338）。用浅黄提示块而不是灰色小字：
   它是整条 Shopify 预览链路里唯一的操作指引，排版上不能被当成脚注 */
.previewModal__step1Tip___2D2LN {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid #ffe0a6;
  border-radius: 8px;
  background: #fff7e6;
  color: #8b5e20;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}
.previewModal__error___1Xak4 {
  margin: 8px 0 0;
  color: #f53f3f;
  font-size: 12px;
  font-style: normal;
  text-align: left;
}
/* 两个弹窗底部的一对按钮（原型 :1343-1346 / :1131-1134）：
   左「取消」为次级、右「确认进入预览」为主操作。两者宽度相同（flex:1） */
.previewModal__btnGhost___2OSj_,
.previewModal__btnPrimary___3rBd4 {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.previewModal__btnGhost___2OSj_ {
  border: 1px solid #e0d8d0;
  background: #f5f1ed;
  color: var(--cj-text);
}
/* 主按钮照原型 .btn-login-submit：135° 主色渐变 + 浅橙投影，悬停投影加深、上浮 1px */
.previewModal__btnPrimary___3rBd4 {
  border: none;
  background: linear-gradient(135deg, var(--cj-primary), #d07a20);
  box-shadow: 0 2px 8px rgba(232, 139, 48, 0.25);
  color: #fff;
  transition: all 0.25s;
}
.previewModal__btnPrimary___3rBd4:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(232, 139, 48, 0.4);
  transform: translateY(-1px);
}
.previewModal__btnPrimary___3rBd4:disabled {
  opacity: 0.6;
}
/*
 * 不可内嵌预览时的说明块（bug#244）。
 *
 * Shopify 对所有店铺下发 x-frame-options: DENY，iframe 里只有一片灰 + 破损图标。
 * 这一块顶替那片灰，把「为什么看不到、去哪看、拿什么进去」说完，并给出唯一能走的路。
 * 尺寸跟着 .stageWeb / .phoneFrame 走，两种视图下都居中。
 */
.previewModal__embedBlocked___3zQR6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  min-height: 320px;
  padding: 32px 28px;
  box-sizing: border-box;
  text-align: center;
}
.previewModal__embedBlockedText___X04Bo {
  max-width: 520px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  /*
   * 正文色：26年10月09日起这一块套进了模拟浏览器外壳（.stageWeb 白底），此前为深色台面配的
   * rgba(255,255,255,.82) 成了白底白字、整句看不见（10-12 WED2C 改新窗口打开后真页面截图发现，Shopify 同样受影响）
   */
  color: #5c5347;
}
.previewModal__embedBlockedBtn___3uKK6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 26px;
  border-radius: 8px;
  /* 主色渐变，与弹窗里其它主按钮一致（此前 #ff6a00 是旧主色） */
  background: linear-gradient(135deg, var(--cj-primary), #d07a20);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.previewModal__embedBlockedBtn___3uKK6:hover {
  background: linear-gradient(135deg, #d07a20, #b8691a);
  color: #fff;
}
/* ============ PC / 手机两版措辞按宽度显隐（Gate 说明文字） ============ */
.previewModal__labelMobile___270vq {
  display: none;
}
/* PC 上工具栏不成盒子：设备切换与「立即购买」照旧直接是顶栏这一行的成员（位置、居中都不变） */
.previewModal__toolbar___1YH3s {
  display: contents;
}
/*
 * ============ 手机浏览器（≤768px）：照移动端原型 `前台原型-CJ店铺售卖-移动端-英文版.html` ============
 * 26年10月10日测试环境逐页回验第 11 页时对照订正。PC 原型与移动端原型在这一屏差别很大，
 * 统一收在这一段里，PC 的规则一条不动：
 *  · 顶栏（.preview-header）：白底，圆形返回、14px 店名、「平台 · 行业 · 价格」三段用小圆点隔开、价格橙色；
 *  · 工具栏（.preview-toolbar）：顶栏下单独一条 #2A2520 深色条，左半透明设备切换（文案仍按 PRD「Desktop / Mobile」，bug#89）、右小号「Buy Now」；
 *  · Web 视图：缩小的浏览器外框（8px 三点、9px 标签页与地址栏），不要底栏；
 *  · Mobile 视图：220 宽的「手机里的手机」，不要刘海/状态栏/机型说明，iframe 按 390 宽排版后整体缩放；
 *  · Gate：深色半透明毛玻璃蒙层，300 宽卡片，灰蓝锁图标，只有一颗通栏「Confirm & Preview」（返回在顶栏）；
 *  · Step1：.m-overlay.center .m-sheet 的尺寸（88% / 340 / 26px 22px），按钮 12px 不折行（.modal-btn）。
 */
@media (max-width: 768px) {
  .previewModal__labelPc___C88ES {
    display: none;
  }
  .previewModal__labelMobile___270vq {
    display: inline;
  }
  /* ---------- 顶栏 ---------- */
  /* 下沿由深色工具栏收边，顶栏自己不再画底线（否则两条之间露一道白线） */
  .previewModal__header___vCuPU {
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    border-bottom: none;
  }
  .previewModal__back___1IQNC {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f2ede5;
    color: #1a1a1a;
  }
  .previewModal__storeInfo___TWZ2J {
    flex: 1;
    flex-shrink: 1;
  }
  .previewModal__storeName___y6-CE {
    font-size: 14px;
  }
  .previewModal__storeSub___23yty {
    gap: 6px;
    color: #999;
    font-size: 11px;
  }
  .previewModal__platformTag___3OXof {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: normal;
  }
  /* 平台与行业之间也是一个小圆点（移动端原型三段之间各一个 .dot） */
  .previewModal__platformTag___3OXof::after,
  .previewModal__subSep___2dSTI {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ddd;
    vertical-align: middle;
  }
  .previewModal__platformTag___3OXof::after {
    content: '';
    margin-left: 6px;
  }
  /* 原型是一个空的圆点 span；这里把「·」字符藏起来、画成同样的圆点 */
  .previewModal__subSep___2dSTI {
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }
  .previewModal__priceTag___1pCBg {
    color: var(--cj-primary);
    font-weight: 700;
  }
  /* ---------- 深色工具栏：贴着顶栏下沿、左右通栏 ---------- */
  .previewModal__toolbar___1YH3s {
    display: flex;
    /* 左右各用负外边距吃掉顶栏的 14px 内边距，宽度要把这 28px 加回来才能通栏 */
    flex: 0 0 calc(100% + 28px);
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 2px -14px -12px;
    padding: 10px 14px;
    background: #2a2520;
  }
  .previewModal__deviceSwitch___CkXkd {
    gap: 0;
    margin: 0;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
  }
  .previewModal__deviceBtn___2lRAi,
  .previewModal__deviceBtnActive___3GGYr {
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: none;
  }
  .previewModal__deviceBtn___2lRAi {
    color: #bbb;
  }
  .previewModal__deviceBtn___2lRAi:hover {
    color: #fff;
  }
  .previewModal__deviceBtnActive___3GGYr {
    background: #fff;
    color: #1a1a1a;
  }
  .previewModal__buyBtn___3qJFR {
    gap: 4px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(232, 139, 48, 0.4);
  }
  /* ---------- 舞台 ---------- */
  .previewModal__body___3hYHd {
    align-items: flex-start;
    padding: 16px 12px;
  }
  .previewModal__stageWeb___3Qw4m {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  /* 缩小的浏览器外框（原型 .browser-chrome @mobile）：只留三点、标签页、地址栏 */
  .previewModal__browserChrome___189q9 {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
  }
  .previewModal__browserDots___3jgSk {
    gap: 4px;
  }
  .previewModal__browserDots___3jgSk span {
    width: 8px;
    height: 8px;
  }
  .previewModal__browserTab___fSrt_ {
    max-width: 100px;
    padding: 4px 10px;
    border-radius: 6px 6px 0 0;
    color: #555;
    font-size: 9px;
  }
  .previewModal__browserFav___125-N,
  .previewModal__browserLock___1oqoA,
  .previewModal__browserActions___2r90u {
    display: none;
  }
  .previewModal__browserUrlBar___2MD_l {
    gap: 0;
    padding: 3px 8px;
    border: none;
    border-radius: 10px;
    color: #777;
    font-family: inherit;
    font-size: 9px;
  }
  .previewModal__browserUrl___RQ9Vl {
    color: #777;
    font-weight: normal;
  }
  /* 「手机里的手机」（原型 .mobile-frame / .mobile-screen：220 宽、9:16） */
  .previewModal__deviceLabel___3jnx7,
  .previewModal__phoneStatusbar___1wJgR,
  .previewModal__phoneNotch___1p9eF,
  .previewModal__phoneHomeBar___2VIKS {
    display: none;
  }
  .previewModal__phoneFrame___Pgwej {
    margin: 6px auto;
    padding: 8px;
    border-radius: 24px;
    background: #1a1a1a;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  }
  .previewModal__phoneScreen___39baC {
    width: 204px;
    max-width: none;
    height: 363px;
    min-height: 0;
    max-height: none;
    border-radius: 18px;
  }
  /* 店铺移动版仍按 390 宽排版（否则 204px 下就是一张挤坏的页面），再整体缩到 204 宽（204 / 390） */
  .previewModal__iframeMobile___kObG2 {
    width: 390px;
    height: 694px;
    padding-top: 0;
    transform: scale(0.523);
    transform-origin: 0 0;
  }
  /* ---------- Shopify Gate ---------- */
  .previewModal__gateMask___FmCJ7 {
    padding: 0 24px;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(8px);
  }
  .previewModal__gatePeek___1zRC- {
    opacity: 0.45;
  }
  .previewModal__refetchBtn___gZYDc {
    top: -1px;
    right: 14px;
    padding: 6px 12px;
    border: none;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(232, 139, 48, 0.4);
  }
  .previewModal__refetchBtn___gZYDc svg {
    display: none;
  }
  .previewModal__gateCard___Nvp3A {
    width: 100%;
    max-width: 300px;
    padding: 24px 20px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }
  .previewModal__gateIcon___bb0V2 {
    width: 50px;
    height: 50px;
    margin: 4px auto 14px;
    background: linear-gradient(135deg, #f0f4fa, #dbe5f4);
    box-shadow: 0 8px 20px rgba(91, 107, 133, 0.15);
    color: #5b6b85;
  }
  .previewModal__gateTitle___3pwj8 {
    font-size: 15px;
    font-weight: 700;
  }
  .previewModal__gateSub___2Y-gj {
    margin-bottom: 14px;
    color: #888;
    font-size: 11px;
  }
  .previewModal__gateInput___u7541 {
    padding: 12px;
    border-color: #e0d8cc;
    border-radius: 8px;
    color: #1a1a1a;
    font-family: monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 6px;
  }
  /* 只有一颗通栏确认（返回在顶栏，原型移动端 Gate 没有「取消」） */
  .previewModal__gateActions___1J7qY {
    margin-top: 14px;
  }
  .previewModal__gateActions___1J7qY .previewModal__btnGhost___2OSj_ {
    display: none;
  }
  .previewModal__gateActions___1J7qY .previewModal__btnPrimary___3rBd4 {
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
  }
  /* ---------- Step1 ---------- */
  .previewModal__step1___3QPqd {
    width: 88%;
    max-width: 340px;
    padding: 26px 22px;
    border-radius: 18px;
  }
  .previewModal__step1Icon___3yVDY {
    width: 64px;
    height: 64px;
    margin: 4px auto 14px;
    box-shadow: 0 8px 20px rgba(91, 107, 133, 0.15);
  }
  .previewModal__step1Title___1dBrT {
    font-size: 17px;
  }
  .previewModal__step1Store___E7bmT {
    margin-bottom: 14px;
  }
  .previewModal__codeBox___2rzjg {
    margin-bottom: 14px;
    padding: 16px;
  }
  .previewModal__codeRow___FB9tx {
    gap: 10px;
  }
  .previewModal__codeText___JAyHk {
    font-size: 28px;
    letter-spacing: 6px;
  }
  .previewModal__copyBtn___4mrEr {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 7px 12px;
    font-size: 11px;
  }
  .previewModal__step1Tip___2D2LN {
    margin-bottom: 14px;
    padding: 10px;
    font-size: 11px;
  }
  .previewModal__step1Actions___3w1it {
    gap: 8px;
    margin-top: 16px;
  }
  .previewModal__step1Actions___3w1it .previewModal__btnGhost___2OSj_,
  .previewModal__step1Actions___3w1it .previewModal__btnPrimary___3rBd4 {
    padding: 10px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
}