/* =============================================================================
 * AI Customizer · 买家端新版排版层（双栏骨架 + Callie 控件观感）
 * -----------------------------------------------------------------------------
 * 加载方式：在 blocks/ai-customizer.html 的 schema.stylesheet 数组中排在
 *           ai-customizer.css 之后，因此本文件以「后置覆盖」的方式生效，
 *           原有基础样式一个字符都未修改，可随时从 schema 移除回滚。
 *
 * 控件规格来源（Callie 定制器原型）：
 *   - 上传：.upload-matting-ui-image-list  →  64×64 虚线格 + "+" + n/max 计数
 *   - 图片卡：.lid-card / .tpl-card        →  1:1 图铺满 + 底部名称条 + 黑边
 *                                              2px 黑环 + 右下 ✓ 角标
 *   - 色卡：.bottle-card / .swatch         →  色块 + 名称条 / 圆点 + 名称
 *   - 输入：.el-input__wrapper             →  11px 14px + 10px 圆角 + focus 环
 *   - 下拉：.c-select-trigger              →  同输入框观感 + 自绘 chevron
 *
 * 边界（不得越界，越界即为破坏功能）：
 *   - 只改排版与皮肤，不触碰任何 data-* 契约、事件绑定与取值逻辑
 *   - 主题同步变量 --ai-theme-color / --ai-theme-surface / --ai-theme-ring /
 *     --ai-card-border-color / --ai-button-* 全部继续沿用，仅换呈现方式
 *   - 需要压过基础样式里 !important 主题同步层时，本文件同样使用 !important，
 *     并一并把 hover / focus / 选中态补齐，保证交互反馈不丢失
 * ========================================================================== */

/* ============================================================ 0. 控件 token
 * 想微调观感只改这里，组件规则一行都不用动。
 * 例：想让选中态跟随店铺主题色，覆写 --aic-checked / --aic-checked-ring 即可。
 * ------------------------------------------------------------------------- */
.ai-customizer {
  /* 选中态（Callie 用近黑描边 + 2px 近黑环，不跟随店铺主题） */
  --aic-checked: #161616;
  --aic-checked-ring: #161616;
  --aic-checked-shadow: 0 6px 14px rgba(20, 20, 40, .10);
  --aic-badge: #161616;

  /* 描边 / 分隔线 / 文字层级 */
  --aic-border: rgba(0, 0, 0, .14);
  --aic-border-strong: rgba(0, 0, 0, .22);
  --aic-hairline: #f0f0f4;
  --aic-text-2: #55555e;
  --aic-muted: #8a8a92;

  /* 控件几何 */
  --aic-radius: 10px;
  /* 输入框 / 下拉 / 选择卡 */
  --aic-cell: 64px;
  /* 上传格边长 */
  --aic-cell-radius: 8px;
  --aic-cell-gap: 8px;

  /* 选择卡栅格列数（image-cards 与 image-swatch 共用同一变量，保证同表单内卡尺寸一致；
     桌面默认 6 列（与 size-small 统一，medium 字段不再与 small 字段列数不同；
     ≤1100 / ≤860 / ≤640 断点按 .ai-customizer 覆写，跟随同一数值序列；
     choiceSize large 由 7.2.1 卡片大小修饰进一步覆写为 3 列大卡） */
  --aic-image-card-cols: 6;
  --aic-card-gap: 12px;
}

/* ============================================================ 1. 外壳扁平化
 * 原 .ai-customizer__card 是 2px 店铺主题描边 + 白底卡片，
 * 这里按新版观感去掉容器背景与描边，让内容直接落在店铺页面底色上。
 * --ai-card-border-color 仍被画布舞台描边使用，主题同步不失效。
 * ------------------------------------------------------------------------- */
.ai-customizer__card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ai-customizer__heading {
  margin-bottom: clamp(14px, 1.4vw, 20px);
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
}

.ai-customizer__heading h2 {
  font-size: clamp(19px, 1.5vw, 23px);
  letter-spacing: -.02em;
}

.ai-customizer__heading p {
  margin-top: 6px;
  font-size: 13px;
}

/* ============================================================ 2. 双栏骨架
 * .ai-customizer__shell 由 ai-customizer.js 在渲染时包裹 canvas + form。
 * canvasEnabled 为 false（如 ai-generator 无画布）时带 --solo 退化成单列。
 * ------------------------------------------------------------------------- */
.ai-customizer__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
}

.ai-customizer__shell--solo {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------- 3. 左栏：预览画布 sticky */
.ai-customizer__shell>.ai-customizer__canvas {
  position: sticky;
  top: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ai-customizer__canvas-stage {
  max-width: 100%;
  border: 1px solid var(--ai-card-border-color);
  border-radius: 12px;
  background-color: var(--ai-theme-selected-surface, #f5f5f5);
}

/* ------------------------------------------------------- 4. 右栏：字段纵向列表 */
.ai-customizer__shell>.ai-customizer__form {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

/* ------------------------------------- 5. 字段标签 / 说明文案（Callie 字号） */
.ai-customizer__field>label,
.ai-customizer__field-label,
.ai-customizer__field--upload>label:first-child,
.ai-customizer__choice legend,
.ai-customizer__field-disclosure>summary {
  /* 延用 SHOPLINE 主题 .body3 加粗规则（字段名与主题原生 Size/Color/Quantity 一致）：
     优先读取店铺主题变量（运行时取真实值），回退值=实测真实值(400+300=700) */
  font-family: var(--sort-body-font, 'Inter', sans-serif);
  font-size: var(--sort-body3-size, 18px);
  font-weight: calc(var(--sort-body-font-weight, 400) + 300) !important;
  line-height: var(--sort-body-line-height, 1.4);
  letter-spacing: var(--sort-body-letter-spacing, normal);
  color: rgb(var(--color-text, 22, 22, 22));
}

.ai-customizer__field small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--aic-muted);
}

/* ------------------------------------- 5b. 提交按钮：延用 SHOPLINE 主题 Buy now（.shopline-element-buy-now 实心主按钮） */
.ai-customizer__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(var(--button-border-thickness) + 9px) calc(var(--button-border-thickness) + 18px);
  font-family: var(--sort-body-font);
  font-size: var(--body2-font-size);
  font-weight: var(--body-bold-font-weight);
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-button-text, 255, 255, 255));
  letter-spacing: var(--sort-body-letter-spacing);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: rgba(var(--color-button-background), var(--button-background-opacity));
  border: none;
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur) rgba(var(--color-shadow), var(--button-shadow-opacity));
  transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out;
}

.ai-customizer__action:disabled,
.ai-customizer__action.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.ai-customizer__action:not([disabled]):hover {
  background-color: rgba(var(--color-button-background), calc(var(--button-background-opacity) - 10%));
}

.ai-customizer__field-disclosure-body {
  margin-top: 8px;
}

.ai-customizer__disclosure-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 6px;
}

/* =========================================================================
 * 6. 上传控件 —— 复刻 .upload-matting-ui-image-list
 *    规格：64×64 虚线格（1.5px，圆角 8，+ 号 22px）+ 右侧 "n / max" 计数，
 *          已上传则整格变成 64×64 圆角 8 的 cover 缩略图。
 *    说明：计数用纯 CSS counter 实现，不新增任何 JS 逻辑；
 *          点击缩略图仍由原有 [data-upload-trigger] 覆盖层接管（可替换图片）。
 * ======================================================================= */
.ai-customizer__field--upload {
  counter-reset: aic-uploads;
}

.ai-customizer__upload.has-file {
  counter-increment: aic-uploads;
}

/* 6.1 单个上传：外层容器退化为 64×64 无装饰盒子 */
.ai-customizer__upload {
  position: relative;
  display: grid;
  place-items: stretch;
  width: var(--aic-cell);
  height: var(--aic-cell);
  min-height: 0;
  padding: 0;
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--aic-cell-radius);
  background: transparent !important;
  cursor: pointer;
  text-align: center;
}

/* 6.2 虚线格本体（原型 .upload-cell） */
.ai-customizer__upload-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1.5px dashed var(--aic-border-strong) !important;
  border-radius: var(--aic-cell-radius);
  color: var(--aic-muted);
  background: #fff !important;
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ai-customizer__upload-trigger::before {
  content: "+";
}

.ai-customizer__upload:hover .ai-customizer__upload-trigger,
.ai-customizer__upload:focus-within .ai-customizer__upload-trigger {
  border-color: rgba(var(--color-text, 22, 22, 22), 0.5) !important;
  /* hover 文字禁止白色：--ai-theme-color 在扩展根被设为 #fff，浅底上白字看不见；改用文字色近实色，任何主题都可见 */
  color: rgba(var(--color-text, 22, 22, 22), 0.92) !important;
  /* hover 背景同样禁用 --ai-theme-surface(#fff 白)，改用极浅文字色做 hover 反馈，深字浅底始终可读 */
  background: rgba(var(--color-text, 22, 22, 22), 0.04) !important;
}

.ai-customizer__upload-trigger:focus-visible {
  /* 焦点轮廓改用文字色近实色：--ai-theme-color 在扩展根被设为 #fff，浅背景上白色轮廓看不见；文字色任何主题都不白 */
  outline: 2px solid rgba(var(--color-text, 22, 22, 22), 0.95);
  outline-offset: 2px;
}

/* 6.3 格内“Upload Photo / 提示”文案：视觉隐藏，保留给读屏与既有逻辑 */
.ai-customizer__upload-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 已上传时基础样式会给文案加 “Change photo” 后缀，这里一并隐藏但不改变逻辑 */
.ai-customizer__upload.has-file .ai-customizer__upload-copy {
  position: absolute;
}

/* 6.4 已上传缩略图：整格铺满（原型 .uploaded-thumb） */
.ai-customizer__upload-preview {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border: 1px solid var(--aic-hairline);
  border-radius: var(--aic-cell-radius);
  background: #fff;
  transition: box-shadow .15s ease;
}

/* 触发层透明覆盖其上，点击即替换；hover 用主题色描边提示可再次点击 */
.ai-customizer__upload.has-file .ai-customizer__upload-trigger {
  border-color: transparent !important;
  background: transparent !important;
}

.ai-customizer__upload.has-file:hover .ai-customizer__upload-preview,
.ai-customizer__upload.has-file:focus-within .ai-customizer__upload-preview {
  /* 浅背景上白环不可见，改用文字色 */
  box-shadow: 0 0 0 2px rgba(var(--color-text, 22, 22, 22), 0.5);
}

/* 6.5 文件名：脱离流，不挤压 64×64 格子 */
.ai-customizer__file-name {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: max-content;
  max-width: 180px;
  overflow: hidden;
  font-size: 11px !important;
  font-weight: 400;
  color: var(--aic-muted) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 6.6 计数：单个上传 → "n / 1"，紧贴格子右侧 */
.ai-customizer__field--upload>.ai-customizer__upload::after {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--aic-cell-gap));
  transform: translateY(-50%);
  color: var(--aic-muted);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  content: counter(aic-uploads) " / 1";
}

/* 6.7 多图：格子组 + "+" 按钮 + 计数（计数插在 + 号之前） */
.ai-customizer__uploads {
  gap: var(--aic-cell-gap);
}

.ai-customizer__uploads>.ai-customizer__upload {
  flex: 0 0 var(--aic-cell);
}

.ai-customizer__uploads>.ai-customizer__add-upload {
  order: 2;
  align-self: center;
}

.ai-customizer__uploads::after {
  order: 1;
  margin-left: 2px;
  color: var(--aic-muted);
  font-size: 12px;
  white-space: nowrap;
  content: counter(aic-uploads) " / " attr(data-max-uploads);
}


.ai-customizer__choice-grid {
  overflow: visible;
}

.ai-customizer__choice-card {
  min-height: 0;
  border: 2px solid var(--aic-border) !important;
  border-radius: var(--aic-radius) !important;
  background: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aic-text-2);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}

.ai-customizer__choice-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, .28) !important;
}

.ai-customizer__choice-card.is-selected,
.ai-customizer__choice-card:has(input:checked) {
  border-color: var(--aic-checked) !important;
  color: #161616 !important;
  background: #fff !important;
}

.ai-customizer__choice-card:has(input:focus-visible) {
  /* 选中高亮轮廓改用文字色近实色：--ai-theme-color 被设为 #fff，浅背景上白色轮廓看不见 */
  outline: 2px solid rgba(var(--color-text, 22, 22, 22), 0.95);
  outline-offset: 2px;
}

/* 7.2 图片卡（image-cards / image-swatch）—— 两种 display 共用同一栅格，
 *    统一列数（--aic-image-card-cols）与间距（--aic-card-gap），保证同表单内
 *    卡片尺寸永远一致（历史 BUG：image-swatch 曾用独立的 --aic-swatch-card-cols
 *    5 列 + gap 10px，导致同一页面两个选择字段卡大小不一致）。 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(var(--aic-image-card-cols), minmax(0, 1fr));
  gap: var(--aic-card-gap);
}

/* 7.2.1 卡片大小（choiceSize: small / medium / large）—— 仅对带图卡 display 生效；
 *       small = 6 列窄卡（视觉小） / medium = 不覆写（跟随断点默认列数）
 *       large = 3 列大卡；≤640 断点在响应式块里再收窄/放宽。 */
.ai-customizer__choice--image-cards.ai-customizer__choice--size-small .ai-customizer__choice-grid,
.ai-customizer__choice--image-swatch.ai-customizer__choice--size-small .ai-customizer__choice-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ai-customizer__choice--image-cards.ai-customizer__choice--size-large .ai-customizer__choice-grid,
.ai-customizer__choice--image-swatch.ai-customizer__choice--size-large .ai-customizer__choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0;
  overflow: hidden !important;
  border-radius: var(--aic-radius) !important;
  text-align: center;
}

/* 缩略图媒体区：严格 1:1 正方形（aspect-ratio 驱动高度），同时作为放大按钮定位锚点 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-thumb,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

/* 图片铺满缩略图区：object-fit:cover 居中裁切，正方形内不变形不压扁 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card img,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: #fff;
}

/* 无图的纯色卡（image-swatch）：色块同样铺满 1:1 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card>.ai-customizer__choice-swatch,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card>.ai-customizer__choice-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 底部名称条（原型 .lid-name / .tpl-name：白底 + hairline 上边） */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-label,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-label {
  display: block;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
  border-top: 1px solid var(--aic-hairline);
  color: var(--aic-text-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card.is-selected .ai-customizer__choice-label,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card.is-selected .ai-customizer__choice-label {
  color: #161616;
}

/* 右上展开按钮：真实 <button>，点击全屏预览原图（不触发卡片选中）。
   展开图标与生成结果卡片保持一致。 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom {
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  color: #fff !important;
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, transform .15s ease;
}

.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom:hover,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom:hover,
.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom:focus-visible,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom:focus-visible {
  background: rgba(0, 0, 0, .52);
  outline: none;
}

.ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom svg,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card .ai-customizer__choice-zoom svg {
  display: block;
}

/* 7.3 纯色点（swatch）—— 原型 .swatch：圆点 + 名称，选中 2px 环 */
.ai-customizer__choice--swatch .ai-customizer__choice-grid {
  gap: 10px;
}

.ai-customizer__choice--swatch .ai-customizer__choice-grid .ai-customizer__choice-card {
  display: inline-flex !important;
  width: auto;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 12px 5px 6px !important;
  border-radius: 999px !important;
  font-size: 12.5px;
}

.ai-customizer__choice--swatch .ai-customizer__choice-grid .ai-customizer__choice-swatch {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 999px;
  background: var(--choice-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* 7.4 胶囊（pills）/ 尺寸格（size-grid）：统一圆角与选中态 */
.ai-customizer__choice--pills .ai-customizer__choice-grid {
  gap: 8px;
}

.ai-customizer__choice--pills .ai-customizer__choice-grid .ai-customizer__choice-card {
  min-height: 38px;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 13px;
}

.ai-customizer__choice--size-grid .ai-customizer__choice-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.ai-customizer__choice--size-grid .ai-customizer__choice-grid .ai-customizer__choice-card {
  min-height: 44px;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}

/* 7.5 单选行（radio）：选中点也切到近黑，保持与卡面一致 */
.ai-customizer__choice--radio .ai-customizer__choice-grid .ai-customizer__choice-card {
  min-height: 44px;
  padding: 11px 13px !important;
  border-radius: var(--aic-radius) !important;
}

.ai-customizer__choice--radio .ai-customizer__choice-grid .ai-customizer__choice-card::before {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(0, 0, 0, .22);
}

.ai-customizer__choice--radio .ai-customizer__choice-grid .ai-customizer__choice-card.is-selected::before {
  border: 1px solid var(--aic-checked) !important;
}

/* =========================================================================
 * 8. 文本 / 多行 / 下拉 —— 复刻 ElementPlus .el-input__inner v2.6 真实规格
 *    高 32px / padding 1px 11px / 圆角 4px / 边框 1px #dcdfe6(---el-border-color)
 *    hover #c0c4cc(---el-border-color-hover) / focus 1px inset 主色 #409eff(无 ring)
 *    placeholder #a8abb2(---el-text-color-placeholder) / 文字 #606266(---el-text-color-regular)
 * ======================================================================= */
.ai-customizer__field {
  position: relative;
  margin-bottom: 18px;
}

.ai-customizer__field textarea,
.ai-customizer__field select,
.ai-customizer__field>input:not([type="checkbox"]) {
  display: block !important;
  width: 100% !important;
  padding: 1px 11px !important;
  /* 边框始终用"文字色"做半透明描边：1) 文字色即正文色，任何主题都不可能是白色，彻底杜绝白底白边框看不见；
     2) alpha 提到 0.5，比之前 0.16 更清晰可见；静止/悬停/聚焦三态都用它，绝不依赖 --color-entry-line / --color-button-text-link 等会被店铺设成白色的变量 */
  border: 1px solid rgba(var(--color-text, 22, 22, 22), 0.5) !important;
  border-radius: 4px !important;
  color: rgb(var(--color-text, 22, 22, 22)) !important;
  background-color: #ffffff !important;
  font-size: 14px !important;
  line-height: 30px !important;
  font-family: inherit;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  box-sizing: border-box;
  margin: 0;
  outline: none;
}

.ai-customizer__field textarea {
  padding: 4px 11px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  transition: min-height .15s ease, border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.ai-customizer__field textarea:hover,
.ai-customizer__field select:hover,
.ai-customizer__field>input:not([type="checkbox"]):hover {
  border-color: rgba(var(--color-text, 22, 22, 22), 0.7) !important;
}

.ai-customizer__field textarea:focus,
.ai-customizer__field select:focus,
.ai-customizer__field>input:not([type="checkbox"]):focus {
  /* 聚焦态：之前跟随 --color-button-text-link(主题链接色)，但 vaymori 该变量解析为白色，导致聚焦输入时边框变白看不见。
     改为文字色近实色(0.95)，任何主题下都是清晰深色描边，绝不发白 */
  border-color: rgba(var(--color-text, 22, 22, 22), 0.95) !important;
  box-shadow: none !important;
  outline: none;
}

/* desc / name 折叠字段的 textarea：聚焦时自动长高到 72px，让用户看到更多内容。
 * 默认 64px 保持视觉紧凑；resize: vertical 仍允许用户手动拉到任意高度。 */
.ai-customizer__field-disclosure-body textarea:focus {
  min-height: 72px;
}

.ai-customizer__field textarea::placeholder,
.ai-customizer__field>input:not([type="checkbox"])::placeholder {
  color: #a8abb2;
}

/* 必填红星 —— ElementPlus .el-form-item.is-required 风格 */
.ai-customizer__required {
  color: #f56c6c;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  margin-right: 4px;
}

/* 8.1 下拉：自绘 chevron（原生 option 面板受系统限制无法样式化，仅对齐触发器） */
.ai-customizer__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
  cursor: pointer;
}

.ai-customizer__field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23409eff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================================================ 9. 结果区 */
.ai-customizer__results {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ============================================================ 11. 响应式 */
/* 各断点列数：6 / 6 / 6 / 4。medium 不再覆写，直接跟随变量，
 * 与 small 在各视口下的列数完全一致（≤640 时 small 与 medium 同为 4 列）。
 * large 仍在各断点单独收窄，是唯一与默认不同的档位。 */
@media (max-width: 1100px) {
  .ai-customizer {
    --aic-image-card-cols: 6;
  }
}

@media (max-width: 860px) {
  .ai-customizer__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ai-customizer__shell>.ai-customizer__canvas {
    position: static;
  }

  .ai-customizer__canvas-stage {
    max-width: 520px;
  }

  .ai-customizer {
    --aic-image-card-cols: 6;
  }
}

@media (max-width: 640px) {

  /* 覆盖基础样式在 640px 断点里给图片卡写死的高度 / 宽度 */
  .ai-customizer__choice--image-cards .ai-customizer__choice-grid .ai-customizer__choice-card img,
  .ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card img {
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .ai-customizer__choice--image-swatch .ai-customizer__choice-grid .ai-customizer__choice-card {
    width: auto !important;
    max-width: none !important;
  }

  .ai-customizer {
    --aic-image-card-cols: 4;
    --aic-card-gap: 10px;
  }

  /* ≤640：size 修饰在窄屏再收窄/放宽，避免卡片过小或与 medium 无差别 */
  .ai-customizer__choice--image-cards.ai-customizer__choice--size-small .ai-customizer__choice-grid,
  .ai-customizer__choice--image-swatch.ai-customizer__choice--size-small .ai-customizer__choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ai-customizer__choice--image-cards.ai-customizer__choice--size-large .ai-customizer__choice-grid,
  .ai-customizer__choice--image-swatch.ai-customizer__choice--size-large .ai-customizer__choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 生成图被选中时，移动端保留商品图库在视口顶部，方便买家一边
 * 查看效果图一边继续填写字段。状态由 JS 只在预览激活期间写入，
 * 取消选择后会移除 class 和 data 属性，主题原有定位完全恢复。 */
@media (max-width: 640px) {
  .ai-customizer__product-gallery--preview-sticky[data-ai-customizer-preview-sticky="true"] {
    position: sticky !important;
    top: max(0px, env(safe-area-inset-top)) !important;
    z-index: 40 !important;
    align-self: flex-start;
    background: var(--color-background, #fff);
    isolation: isolate;
  }

  .ai-customizer__product-gallery--preview-sticky[data-ai-customizer-preview-sticky="true"] .ai-customizer__preview-media-item {
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ai-customizer__choice-card,
  .ai-customizer__choice-card::after {
    transition: none;
  }

  .ai-customizer__choice-card:hover {
    transform: none;
  }
}

/* ============================================================ 12. 折叠字段 disclosure-icon 重设计
   原样式（22×22 + 1px 灰边 #c9cdd3 + 白底 + 1.5px border 画 chevron）偏老式 form 控件，
   改为 24×24 圆角 8 的「幽灵按钮」：透明背景 + 无边框 + SVG chevron +
   hover 主题色柔背景，与字段卡 / 输入框 / 选择卡观感一致。
   折叠/展开动画保留 rotate(-90deg) ↔ rotate(0) 的 0.18s 过渡。 */
.ai-customizer__disclosure-icon {
  border: 0 !important;
  background: transparent !important;
  color: #161616 !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 8px !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ai-customizer__disclosure-icon i {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transform: rotate(0deg) !important;
  transition: transform .18s ease;
}

.ai-customizer__field-disclosure:not([open])>.ai-customizer__disclosure-icon i,
.ai-customizer__field-disclosure:not([open]) .ai-customizer__disclosure-icon i {
  transform: rotate(-90deg) !important;
}

.ai-customizer__field-disclosure>summary:hover .ai-customizer__disclosure-icon,
.ai-customizer__field-disclosure>summary:focus-visible .ai-customizer__disclosure-icon {
  background: rgba(22, 22, 22, .06) !important;
  color: #161616 !important;
}

/* legacy B2 hover-show block removed (superseded by pinned-corner rule below) */

/* =========================================================================
 * C1 字符计数器 —— ElementPlus .el-input__count 风格 "x / y"（右下角绝对定位）
 * ========================================================================= */
.aic-counter {
  position: absolute;
  bottom: -17px;
  right: 0;
  z-index: 1;
  display: inline-block;
  padding: 4px 2px;
  font-size: 12px;
  line-height: 1;
  color: #a8abb2;
  background: #ffffff;
  white-space: nowrap;
  font-feature-settings: "tnum";
  pointer-events: none;
}

.aic-counter.is-over {
  color: #f56c6c;
  font-style: italic;
}

/* =========================================================================
 * D1 ElementPlus .el-form-item__error 风格 —— 浮窗气泡 + ⓘ 图标
 *    白底 + 红色左边框 + 顶部小三角 + 阴影 + absolute 钉input下方
 * ========================================================================= */
.ai-customizer__field.has-error input,
.ai-customizer__field.has-error textarea,
.ai-customizer__field.has-error select {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 1px #f56c6c inset;
}

/* 出错时隐藏计数，避免与浮窗气泡重叠 */
.ai-customizer__field.has-error .aic-counter {
  display: none;
}

.aic-error-popper {
  position: absolute;
  bottom: -18px;
  left: 0;
  z-index: 3;
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: #f56c6c;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  white-space: normal;
  word-break: break-word;
}

/* ElementPlus .el-form-item__error 风格：纯红字、无浮窗、无三角、无图标 */
.aic-error-popper::before,
.aic-error-icon {
  display: none !important;
}

/* Final upload-state overrides. This file is loaded after the base stylesheet,
   so keep the buyer-facing upload affordances here as the source of truth. */
.ai-customizer__upload,
.ai-customizer__upload:hover,
.ai-customizer__upload:focus-within {
  border-color: #b8bec8 !important;
  border-style: dashed !important;
}

.ai-customizer__upload.has-file,
.ai-customizer__upload.has-file:hover,
.ai-customizer__upload.has-file:focus-within {
  border-color: #6f7785 !important;
  border-style: solid !important;
}

.ai-customizer__upload-trigger,
.ai-customizer__upload:hover .ai-customizer__upload-trigger,
.ai-customizer__upload:focus-within .ai-customizer__upload-trigger {
  border: 1.5px dashed #b8bec8 !important;
  border-radius: 8px !important;
  color: #4e5663 !important;
  background: #fff !important;
}

.ai-customizer__upload.has-file .ai-customizer__upload-trigger,
.ai-customizer__upload.has-file:hover .ai-customizer__upload-trigger,
.ai-customizer__upload.has-file:focus-within .ai-customizer__upload-trigger {
  border-color: transparent !important;
  background: transparent !important;
}

.ai-customizer__add-upload {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto !important;
  min-width: 0;
  height: 30px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 12px !important;
  border: 1px solid #c8cdd5 !important;
  border-radius: 999px !important;
  color: #4e5663 !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.ai-customizer__add-upload::after {
  content: none !important;
}

.ai-customizer__add-upload>span:first-child {
  display: inline-flex;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.ai-customizer__add-upload-label {
  display: inline-block;
  overflow: hidden;
  max-width: 150px;
  font-size: 12px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2026-09-10：此处曾有一条 .ai-customizer__add-upload:hover / :focus-visible 覆盖规则，
   用 var(--ai-theme-color) 当「文字色」。--ai-theme-color 是主题主色（本店 = #fff，
   即按钮底色），结果 hover 变成白字白底完全看不见。该规则与 ai-customizer.css 中的
   同名规则完全重复，且因为本文件后加载而在层叠中胜出，导致只改 ai-customizer.css 无效。
   已整块删除：hover/focus 的 border-color / color / background / outline / transform
   现由 ai-customizer.css 单点定义，避免两处打架。 */

.ai-customizer__add-upload[hidden] {
  display: none !important;
}

/* 2026-09-03：参考图删除按钮钉到右上角角点（按钮圆心=容器右上角，悬角一半在卡片外）。
   容器 .ai-customizer__upload 已是 position:relative 且 overflow:visible，可安全溢出。 */
.ai-customizer__remove-upload,
.ai-customizer__upload.has-file:hover .ai-customizer__remove-upload,
.ai-customizer__upload.has-file:focus-within .ai-customizer__remove-upload {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: auto;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: #d92d20;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  transform: translate(50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: background .18s ease, transform .18s ease;
}

.ai-customizer__remove-upload:hover,
.ai-customizer__remove-upload:focus-visible {
  background: #b42318;
  outline: none;
  transform: translate(50%, -50%) scale(1.08);
}

/* 2026-09-03：点击扩散波纹 —— 圆环从圆心向外扩散淡出，不拦截点击 */
.ai-customizer__remove-upload::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(217, 45, 32, .35);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

.ai-customizer__remove-upload:active::after {
  animation: aic-remove-ripple .5s ease-out forwards;
}

@keyframes aic-remove-ripple {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

.ai-customizer__upload:not(.has-file) .ai-customizer__remove-upload {
  display: none !important;
}

/* ============================================================
 * 13. 选择卡图片放大 lightbox（.ai-customizer__lightbox）
 *     独立于结果图 viewer：轻遮罩 + 图片卡片浮层，figure 收缩包裹图片；
 *     关闭按钮钉在卡片右上角内；兼容移动端（fixed inset-0 + 双指缩放）。
 *     由 ai-customizer.js 的 openChoiceLightbox/closeChoiceLightbox 控制。
 * ============================================================ */
html.ai-customizer-lightbox-open,
html.ai-customizer-lightbox-open body {
  overflow: hidden !important;
}

.ai-customizer__lightbox {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: 0 !important;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: clamp(12px, 3vw, 40px);
  box-sizing: border-box;
  pointer-events: auto;
}

.ai-customizer__lightbox,
.ai-customizer__lightbox * {
  box-sizing: border-box !important;
}

.ai-customizer__lightbox-backdrop {
  position: absolute;
  inset: 0;
  /* 轻遮罩：卡片式浮层，不再铺满近黑 */
  background: rgba(10, 10, 12, .38);
  cursor: zoom-out;
}

/* figure 使用统一的响应式舞台，避免按原图 intrinsic size 收缩 */
.ai-customizer__lightbox-figure {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 88vh;
  max-height: 88dvh;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  background: #000;
}

.ai-customizer__lightbox-image {
  /* 关键：图片尺寸用 !important 硬上限 + contain，
     防止 SHOPLINE 主题全局 img 规则(width:100%/object-fit:cover)
     把弹层图片拉满全屏或裁切。 */
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  object-fit: contain !important;
  /* 移动端允许双指缩放查看细节 */
  touch-action: pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

/* 关闭按钮钉在图片卡片右上角（figure 为定位上下文，不再跟全屏容器跑） */
.ai-customizer__lightbox-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 999px;
  color: #fff !important;
  background: rgba(0, 0, 0, .55) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  cursor: pointer;
  font: 400 24px/1 Arial, sans-serif;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ai-customizer__lightbox-close:hover,
.ai-customizer__lightbox-close:focus-visible {
  background: rgba(0, 0, 0, .75) !important;
  outline: none;
}

/* 左右切换选项按钮：钉在图片卡片左右两侧居中，视觉与关闭按钮一致 */
.ai-customizer__lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 999px;
  color: #fff !important;
  background: rgba(0, 0, 0, .55) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  cursor: pointer;
  font: 400 28px/1 Arial, sans-serif;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ai-customizer__lightbox-prev {
  left: 8px;
}

.ai-customizer__lightbox-next {
  right: 8px;
}

.ai-customizer__lightbox-nav:hover,
.ai-customizer__lightbox-nav:focus-visible {
  background: rgba(0, 0, 0, .75) !important;
  outline: none;
}

.ai-customizer__lightbox-nav[hidden] {
  display: none !important;
}

/* 选项计数（1 / N）：钉在卡片底部中间，仅多选项时由 JS 写入文本 */
.ai-customizer__lightbox-counter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 400 11px/1.6 var(--sort-body-font, 'Inter', sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-customizer__lightbox[hidden] {
  display: none !important;
}

/* ============================================================
 * 13.1 选择卡放大视窗固定舞台
 *
 *     选择卡的原图可能只有几十到几百像素。不能让 figure 继续
 *     按图片 intrinsic size 收缩，否则小图打开后仍然只显示一个
 *     很小的弹窗。统一使用响应式正方形舞台，图片在舞台内保持
 *     原比例 contain；桌面端最大约 810px，手机端按可用视口缩小。
 * ============================================================ */
.ai-customizer__lightbox-figure {
  --aic-lightbox-size: min(82vw, 88vh, 810px);
  display: grid;
  place-items: center;
  width: var(--aic-lightbox-size);
  height: var(--aic-lightbox-size);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  background: #fff;
}

.ai-customizer__lightbox-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 640px) {
  .ai-customizer__lightbox-figure {
    --aic-lightbox-size: min(calc(100vw - 24px),
        calc(100vh - 24px),
        calc(100dvh - 24px),
        810px);
  }
}

/* ============================================================
 * 14. 可视选项单行横向滑动
 *     由商家在定制器字段设置中打开 `swipe` 后，ai-customizer.js
 *     会给选择网格追加 .ai-customizer__choice-grid--swipe。
 *
 *     这组规则必须放在文件末尾：前面的响应式网格、图片卡尺寸和
 *     SHOPLINE 主题覆盖规则都可能重新设置 display / overflow /
 *     grid-template-columns。这里用同等或更高优先级并配合
 *     !important，确保开启后永远只有一行且可以左右滚动；开关关闭
 *     时不会命中任何规则，原来的固定多列布局完全不变。
 * ============================================================ */
.ai-customizer__choice-grid--swipe {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: 100%;
  gap: var(--aic-card-gap, 10px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ai-customizer__choice-grid--swipe::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ai-customizer__choice-grid--swipe>.ai-customizer__choice-card {
  flex: 0 0 auto !important;
  min-width: max-content;
  scroll-snap-align: start;
}

/* The rail keeps native touch/trackpad scrolling and adds compact edge
   controls for buyers who do not discover horizontal dragging. */
.ai-customizer__choice-track {
  position: relative;
  min-width: 0;
}

.ai-customizer__choice-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: #161616;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  cursor: pointer;
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity .18s ease, border-color .18s ease, color .18s ease,
    box-shadow .18s ease, transform .18s ease;
}

.ai-customizer__choice-nav svg {
  width: 16px;
  height: 16px;
}

.ai-customizer__choice-nav--prev {
  left: -8px;
}

.ai-customizer__choice-nav--next {
  right: -8px;
}

.ai-customizer__choice-nav:hover,
.ai-customizer__choice-nav:focus-visible {
  border-color: rgba(0, 0, 0, .42);
  color: #000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  outline: none;
  transform: translateY(-50%) scale(1.04);
}

.ai-customizer__choice-nav.is-disabled,
.ai-customizer__choice-track:not(.is-overflowing) .ai-customizer__choice-nav {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .ai-customizer__choice-nav {
    width: 28px;
    height: 28px;
  }

  .ai-customizer__choice-nav--prev {
    left: -5px;
  }

  .ai-customizer__choice-nav--next {
    right: -5px;
  }
}

/* 图片卡保留稳定的卡面宽度。四张卡可在一屏内完整展示，更多
   选项继续向右滑动；窄屏至少保留 104px，避免 3～4 列时卡片被
   压缩成不可读的细条。 */
.ai-customizer__choice--image-cards .ai-customizer__choice-grid--swipe>.ai-customizer__choice-card,
.ai-customizer__choice--image-swatch .ai-customizer__choice-grid--swipe>.ai-customizer__choice-card {
  width: clamp(104px, calc((100% - 30px) / 4), 180px) !important;
  min-width: clamp(104px, calc((100% - 30px) / 4), 180px) !important;
  max-width: 180px !important;
}