/*
 * Shopline 原生图片变体适配层。
 *
 * 视觉规格直接复刻普通定制器的图片选项卡：正方形图片区、底部名称条、
 * 右上角展开按钮、右下角选中勾以及 small / medium / large 三档尺寸。
 * 本文件由主题扩展同步加载，先稳定首屏几何尺寸；JavaScript 只补充名称与交互。
 */
:root {
  --ai-native-variant-size: 136px;
  --ai-native-variant-min-size: 104px;
  --ai-native-variant-gap: 10px;
  --ai-native-variant-radius: 8px;
  --ai-native-variant-border: rgba(0, 0, 0, .18);
  --ai-native-variant-selected: #161616;
  --ai-native-variant-surface: #fff;
}

/* 只增强带图片的原生变体；文字尺码继续使用 Shopline 主题样式。 */
.variant-picker__options:has(> .variant-picker__option .variant-picker__button--image),
.ai-native-variant__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--ai-native-variant-min-size), var(--ai-native-variant-size))) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: var(--ai-native-variant-gap) !important;
  max-width: 100%;
  overflow: visible;
}

/* Shopline 桌面主题默认把变体标题和选项列表排成左右两列。图片卡需要与普通
 * 定制器一致：字段名称独占一行，卡片列表从下一行开始。 */
.variant-picker__group:has(.ai-native-variant__list) > .product-detail__row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.variant-picker__group:has(.ai-native-variant__list) .variant-picker__group-head,
.variant-picker__group:has(.ai-native-variant__list) .ai-native-variant__list {
  width: 100% !important;
  max-width: 100% !important;
}

.variant-picker__group:has(.ai-native-variant__list) .variant-picker__group-head {
  flex: 0 0 auto !important;
}

/* 文字型原生变体（尺码等）保留 Shopline 主题的按钮外观，只调整排版：
 * 主题桌面端默认把字段名与选项排成左右两列，这里改为字段名独占一行、
 * 选项列表从下一行开始并按可用宽度自动换行，与普通定制器的字段结构一致。
 * 图片卡组一律带 .ai-native-variant__list，由上面的规则处理，两条规则互斥。 */
.variant-picker__group:not(:has(.ai-native-variant__list)) > .product-detail__row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.variant-picker__group:not(:has(.ai-native-variant__list)) .variant-picker__group-head {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.variant-picker__group:not(:has(.ai-native-variant__list)) .variant-picker__options {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}

/* 文字型原生变体的选项行必须与字段名同侧靠左。主题把「字段名 | 选项」当作
 * 规格表行，选项单元格（.product-detail__row-main）按规格表习惯右对齐，改成
 * 上下两行后就暴露成「标签靠左、选项靠右」的错位。这里用自选择器锁定「不含
 * 图片按钮的选项容器」（即文字型），不依赖具体祖先类名，内外两侧一起扭回左对齐：
 *   · margin-right:auto → 吸收父容器剩余空间，无视父级 justify-content；
 *   · justify-content / text-align → 单元格内部主轴与文本都改回左端。
 * 图片卡组含 .variant-picker__button--image，被 :not(:has(...)) 排除，零影响。 */
.variant-picker__options:not(:has(.variant-picker__button--image)) {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  text-align: left !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}

/* 图片和名称已经直接展示在卡片中，Shopline 原生 hover tooltip 属于重复信息。
 * 同时禁用承载 tooltip 的自定义元素事件，避免主题把提示内容传送到页面浮层。 */
.ai-native-variant__option > theme-popover,
.ai-native-variant__option > theme-popover * {
  --popover-display: none;
}

.ai-native-variant__option theme-popover-content,
.ai-native-variant__option [role="tooltip"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.variant-picker__option:has(.variant-picker__button--image) {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: var(--ai-native-variant-size) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ai-native-variant-border) !important;
  border-radius: var(--ai-native-variant-radius) !important;
  color: #4b4b4b !important;
  background: var(--ai-native-variant-surface) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Shopline 的图片 tooltip 与空 slash 是原生卡片的辅助节点；取消它们产生的
 * flex 间距，最终高度才会与普通定制器“图片区 + 名称条”一模一样。 */
.ai-native-variant__option > theme-popover {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ai-native-variant__option > .variant-picker__slash {
  display: none !important;
}

.variant-picker__option:has(.variant-picker__button--image):hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, .28) !important;
}

/* 原生变体本身是加购必选项，标题也要沿用普通定制器的必填标记。只作用于
 * 已被适配为图片卡的变体组，不会误改 Size 等文字型原生选项。 */
.variant-picker__group:has(.ai-native-variant__list) .ai-native-variant__list + .ai-native-variant__group-label::before,
.variant-picker__group:has(.ai-native-variant__list) .variant-picker__group-label::before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  color: #e5484d;
}

/* 图片区与普通定制器一样严格保持 1:1。 */
.variant-picker__option:has(.variant-picker__button--image) .variant-picker__button--image,
.variant-picker__option.ai-native-variant__option .variant-picker__button.variant-picker__button--image {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.variant-picker__option:has(.variant-picker__button--image) .variant-picker__image,
.variant-picker__option.ai-native-variant__option .variant-picker__button--image > .variant-picker__image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: var(--ai-native-variant-image-fit, cover) !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: #fff;
}

/* 名称条复刻普通定制器的白底、上分隔线和字号。 */
.ai-native-variant__label:not([hidden]) {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, .10);
  color: #4b4b4b;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 展开按钮复刻普通定制器：右上角、半透明圆底、对角展开图标。 */
.ai-native-variant__zoom {
  position: absolute !important;
  right: 3px !important;
  top: 3px !important;
  bottom: auto !important;
  z-index: 3;
  display: grid !important;
  place-items: center;
  width: 25px !important;
  min-width: 25px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .25) !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35) !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.ai-native-variant__zoom:hover,
.ai-native-variant__zoom:focus-visible {
  color: #fff !important;
  background: rgba(0, 0, 0, .52) !important;
  outline: none !important;
}

.ai-native-variant__zoom svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* 选中态与普通定制器一致：2px 深色边框 + 右下角勾选角标。 */
.ai-native-variant__option.is-selected,
.ai-native-variant__option:has(.variant-picker__input:checked) {
  border: 2px solid var(--ai-native-variant-selected) !important;
  color: #161616 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ai-native-variant__option::after {
  right: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px 0 0 1px !important;
}

.ai-native-variant__option:has(.variant-picker__input:focus-visible) {
  outline: 2px solid var(--ai-native-variant-selected) !important;
  outline-offset: 2px;
}

/* 自动换行、横向滑动和固定列网格只改变排列，不改变单卡结构。 */
.ai-native-variant__list--wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--ai-native-variant-min-size), var(--ai-native-variant-size))) !important;
}

.ai-native-variant__list--scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--ai-native-variant-gap) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ai-native-variant__list--scroll::-webkit-scrollbar {
  display: none;
}

.ai-native-variant__list--scroll > .variant-picker__option {
  flex: 0 0 var(--ai-native-variant-size) !important;
  width: var(--ai-native-variant-size) !important;
  min-width: var(--ai-native-variant-size) !important;
  scroll-snap-align: start;
}

.ai-native-variant__list--grid {
  display: grid !important;
  grid-template-columns: repeat(var(--ai-native-variant-columns, 4), minmax(0, 1fr)) !important;
  gap: var(--ai-native-variant-gap) !important;
}

.ai-native-variant__list--grid > .variant-picker__option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.ai-native-variant__list--size-small {
  --ai-native-variant-min-size: 76px;
  --ai-native-variant-size: 102px;
  --ai-native-variant-gap: 8px;
}

.ai-native-variant__list--size-medium {
  --ai-native-variant-min-size: 104px;
  --ai-native-variant-size: 136px;
}

.ai-native-variant__list--size-large {
  --ai-native-variant-min-size: 128px;
  --ai-native-variant-size: 172px;
  --ai-native-variant-gap: 12px;
}

/* 文本卡和下拉仍保留原生 radio 作为真实变体状态载体。 */
.ai-native-variant__list[data-ai-native-display-mode="text-card"] .variant-picker__button--image {
  opacity: 0;
}

.ai-native-variant__list[data-ai-native-display-mode="text-card"] .ai-native-variant__label {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 13px;
  white-space: normal;
}

.variant-picker__options.ai-native-variant__list > .ai-native-variant__select {
  display: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
}

/* 普通定制器依赖 `.ai-customizer__field select` 隐藏辅助 select；原生 Style
 * 位于商品变体 DOM 中，需在此补齐同一套无障碍隐藏规则，页面只展示自定义面板。 */
.ai-native-variant__select > select.ai-customizer__select-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* 下拉模式严格复用普通定制器的自定义触发器与图片面板，不显示浏览器原生菜单。 */
.variant-picker__options.ai-native-variant__list--select {
  display: block !important;
}

.variant-picker__options.ai-native-variant__list--select > .ai-native-variant__select {
  display: block;
}

.ai-native-variant__list--select > .variant-picker__option {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
}

@media (max-width: 749px) {
  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="select"] {
    display: block !important;
  }

  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="select"] > .ai-native-variant__select {
    display: block;
  }

  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="select"] > .variant-picker__option {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%);
  }

  /*
   * Shopline 主题的基础选择器带有 :has()，特异性高于普通 data 选择器。
   * 这里补上原生 options 类，确保移动端配置真正覆盖桌面网格：
   * horizontal-scroll 必须是一行可滑动，wrap 必须按普通定制器两列换行。
   */
  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="scroll"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  /* 横向滑动时卡片仍沿用普通定制器的固定卡宽，不能被 flex 自动压缩成
   * 一排四个小缩略图；超出容器的卡片通过滚动查看。 */
  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="scroll"] > .variant-picker__option {
    flex: 0 0 var(--ai-native-variant-size) !important;
    width: var(--ai-native-variant-size) !important;
    min-width: var(--ai-native-variant-size) !important;
    max-width: var(--ai-native-variant-size) !important;
  }

  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="wrap"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: visible !important;
  }

  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="wrap"].ai-native-variant__list--size-small {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .variant-picker__options.ai-native-variant__list[data-ai-native-mobile-layout="wrap"] > .variant-picker__option {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .variant-picker__option:has(.variant-picker__button--image),
  .ai-native-variant__zoom {
    transition: none;
  }
}