.block-product-image__layer-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.block-product-image__layer-image-wrapper.has-luxe-badge
  .block-product-image__layer-wrapper {
  inset: 44px 0 0;
}

@layer theme {
  .block-product-image__layer-wrapper * {
    pointer-events: auto;
  }
}
.block-product-image__layer-image-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  padding: var(--padding);
  overflow: hidden;
  isolation: isolate;
}
.block-product-image__layer-image-wrapper > a {
  position: absolute;
  inset: 0;
  display: block;
}
@media (min-width: 960px) {
  .block-product-image__layer-image-wrapper.desktop-hover:hover
    .block-product-image__image:nth-of-type(1) {
    opacity: 0;
  }

  .block-product-image__layer-image-wrapper.desktop-hover:hover
    .block-product-image__image:nth-of-type(2) {
    opacity: 1;
  }
}
@media (max-width: 959px) {
  .block-product-image__layer-image-wrapper.mobile-hover:hover
    .block-product-image__image:nth-of-type(1) {
    opacity: 0;
  }

  .block-product-image__layer-image-wrapper.mobile-hover:hover
    .block-product-image__image:nth-of-type(2) {
    opacity: 1;
  }
}
.block-product-image__image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
  pointer-events: none;
  background-color: rgb(243 243 243 / 100%);
  border-radius: var(--border-radius);
}
@layer theme {
  .block-product-image__image-wrapper * {
    pointer-events: auto;
  }
}
.block-product-image__image-wrapper > svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.block-product-image__image-wrapper > .block-product-image__image {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: var(--fit-type);
  transition: 1s;
}
.block-product-image__image-wrapper > .block-product-image__image * {
  pointer-events: all;
}
.block-product-image__image-wrapper
  > .block-product-image__image:nth-of-type(1) {
  opacity: 1;
}
.block-product-image__image-wrapper
  > .block-product-image__image:nth-of-type(2) {
  opacity: 0;
}

/* ================= 1. PC 端（默认样式） ================= */
.swatch-pill-tag {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 图标与文字间距 */
    padding: 6px 12px 6px 8px;

    /* 淡雅半透明磨砂背景 */
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* 极细高光边框（左侧贴边无边框） */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-left: none;

    /* 右侧半圆角 */
    border-radius: 0 16px 16px 0;

    /* 文字规范 */
    color: #111111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 消除文字行高带来的上下错位 */
.swatch-pill-tag span {
    display: inline-block;
    line-height: 1;
}

/* 图标容器与 SVG 样式 */
.swatch-pill-tag__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.swatch-pill-tag__icon svg {
    display: block;
    width: 1em;
    height: 1em;
    stroke: #111111;
    stroke-width: 0.8;
    flex-shrink: 0;
}

/* ================= 2. 移动端 (屏幕宽度 <= 768px) ================= */
@media (max-width: 768px) {
    .swatch-pill-tag {
        top: 8px;
        padding: 5px 10px 5px 6px;
        gap: 4px;
        font-size: 11.5px;
        /* 移动端字号缩小后，SVG 自动保持等比对齐 */
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}

/* 1. 将商品卡片容器定义为容器查询上下文 */
.block-product-image__layer-image-wrapper {
    container-type: inline-size;
    container-name: product-card;
}

.luxe-badge-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding, 0px);
    pointer-events: none;
}

.luxe-badge {
    /* 外边距：随卡片宽度在 6px 到 14px 之间平滑变大 */
    margin-block-start: clamp(6px, 2.5cqw, 14px);
    margin-inline-start: clamp(6px, 2.5cqw, 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 内边距：上下 3.5px~6px，左右 10px~18px */
    padding: clamp(3.5px, 1.5cqw, 6px) clamp(10px, 4cqw, 18px);
    background: linear-gradient(135deg, #f6f5f3 0%, #e2e0dc 50%, #f1f0ee 100%);
    border: 1px solid #b8b5b0;
    border-radius: 999px;
    box-shadow: 0 3px 8px -3px rgb(70 68 64 / 22%);
    font-family: "Lora", Georgia, serif;
    user-select: none;
    pointer-events: none;
}

.luxe-badge span {
    color: #3d3a36;
    /* 字号：卡片很小时保持 10.5px，随卡片变宽递增，最大放至 15px */
    font-size: clamp(10.5px, 4.2cqw, 15px);
    font-weight: 500;
    /* 字间距：最小 1.8px，最大 3px */
    letter-spacing: clamp(1.8px, 0.8cqw, 3px);
    /* 负外边距：自动跟随字间距动态修正右侧视觉偏移 */
    margin-right: calc(-1 * clamp(1.8px, 0.8cqw, 3px));
    line-height: 1;
    white-space: nowrap;
}

/* 2. 避让距离同步流式缩放（取代原先死板的 50px / 86px） */
.block-product-image__layer-image-wrapper.has-luxe-badge .swatch-pill-tag,
.block-product-image__layer-image-wrapper.has-luxe-badge .block-product-image__ship_in_48hrs {
    top: clamp(38px, 14cqw, 56px);
}

.block-product-image__layer-image-wrapper.has-luxe-badge.has-free-swatches .block-product-image__ship_in_48hrs {
    top: clamp(68px, 24cqw, 92px);
}

/* 视频样式 */
.block-product-image__video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 视频始终撑满，不受图片 fit_type 设置影响 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* hover 时：有视频优先播放视频，没视频才显示第二张图 */
/* 只在桌面端启用视频播放 */
@media (min-width: 960px) {
  .block-product-image__layer-image-wrapper.has-video.desktop-hover:hover
    .block-product-image__video {
    opacity: 1;
  }

  .block-product-image__layer-image-wrapper.has-video.desktop-hover:hover
    .block-product-image__image:nth-of-type(1) {
    opacity: 0;
  }
}

/* 移动端不启用视频播放 hover 效果 */