/** Shopify CDN: Minification failed

Line 750:0 Expected "}" to go with "{"

**/
/* ========== 产品卡片核心样式文件 ========== */
/* 包含：卡片布局、外观样式、交互效果、响应式适配、特殊形状设计
   依赖全局变量（如--border-radius、--color-foreground），支持主题配置 */


/* ========== 1. 卡片外层容器 ========== */
/* 卡片最外层包装，承载整体布局，继承父元素颜色和高度，清除文本装饰 */
.card-wrapper {
  color: inherit; /* 继承父容器文本颜色，保证主题一致性 */
  height: 100%; /* 100%高度，确保卡片在网格中对齐 */
  position: relative; /* 为内部绝对定位元素提供参考 */
  text-decoration: none; /* 清除链接默认下划线 */
}


/* ========== 2. 核心卡片基础样式 ========== */
/* 卡片主体容器，控制文本对齐、布局方向，区分横向/纵向卡片 */
.card {
  text-decoration: none; /* 清除卡片内链接装饰 */
  text-align: var(--text-alignment); /* 文本对齐方式（由变量控制，默认居中） */
}

/* 非比例卡片（无固定宽高比）：纵向flex布局，100%高度填充父容器 */
.card:not(.ratio) {
  display: flex;
  flex-direction: column; /* 纵向排列内容（图片/文字） */
  height: 100%; /* 确保卡片高度统一 */
}


/* ========== 3. 横向卡片专属样式 ========== */
/* 横向卡片：强制横向布局，文本左对齐，清除图片内边距 */
.card.card--horizontal {
  --text-alignment: left; /* 横向卡片文本左对齐（覆盖默认居中） */
  --image-padding: 0rem; /* 横向卡片图片无内边距 */
  flex-direction: row; /* 横向排列（图片在左，文字在右） */
  align-items: flex-start; /* 顶部对齐，避免内容错位 */
  gap: 1.5rem; /* 图片与文字间距 */
}

/* 横向比例卡片：清除伪元素底部内边距（避免比例计算导致的空白） */
.card--horizontal.ratio:before {
  padding-bottom: 0;
}

/* 带边框的横向卡片：内边距控制，避免内容紧贴边框 */
.card--card.card--horizontal {
  padding: 1.2rem;
}

/* 纯文本横向卡片：清除列间距（适配纯文字场景） */
.card--card.card--horizontal.card--text {
  column-gap: 0;
}


/* ========== 4. 卡片外观样式（边框/阴影） ========== */
/* 带边框的卡片：100%高度，确保边框完整包裹内容 */
.card--card {
  height: 100%; /* 100%高度，确保边框完整包裹内容 */
}

/* 带边框的卡片 + 标准卡片内层容器：控制边框、圆角、盒模型 */
.card--card,
.card--standard .card__inner {
  position: relative; /* 为伪元素阴影层提供参考 */
  box-sizing: border-box; /* 边框/内边距计入总尺寸，避免布局偏移 */
  border-radius: var(--border-radius); /* 圆角（全局变量，支持主题配置） */
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity)); /* 边框（颜色/透明度由变量控制） */
}

/* 卡片阴影层（伪元素实现）：独立阴影层，避免与内容遮挡 */
.card--card:after,
.card--standard .card__inner:after {
  content: '';
  position: absolute;
  z-index: -1; /* 阴影层在底层，不遮挡卡片内容 */
  width: calc(var(--border-width) * 2 + 100%); /* 宽度 = 卡片宽度 + 2倍边框（阴影向外扩散） */
  height: calc(var(--border-width) * 2 + 100%); /* 高度同上 */
  top: calc(var(--border-width) * -1); /* 向上偏移边框宽度，与卡片边框对齐 */
  left: calc(var(--border-width) * -1); /* 向左偏移边框宽度，与卡片边框对齐 */
  border-radius: var(--border-radius); /* 阴影层圆角与卡片一致 */
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity)); /* 阴影（全局变量控制） */
}


/* ========== 5. 渐变与背景兼容样式 ========== */
/* 渐变卡片：修复渐变连续性（动画开启/关闭时保持一致）
   perspective(0) 强制创建独立渲染上下文，避免渐变溢出 */
.card--card.gradient,
.card__inner.gradient {
  transform: perspective(0);
}

/* 配色方案1的卡片内层：透明背景（适配带透明PNG图片场景，避免背景色干扰） */
.card__inner.color-scheme-1 {
  background: transparent;
}


/* ========== 6. 媒体区域（图片容器）样式 ========== */
/* 卡片内层的图片容器：控制溢出、层级、圆角，修复Safari兼容性 */
.card .card__inner .card__media {
  overflow: hidden; /* 裁剪超出容器的图片，避免变形 */
  z-index: 0; /* 图片层级低于内容，避免遮挡文字 */
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding)); /* 图片圆角 = 卡片圆角 - 边框宽度 - 内边距（避免与边框重叠） */
}

/* 带边框卡片的图片容器：底部圆角清除（适配“图片+文字”上下布局，避免图片底部圆角与文字区域重叠） */
.card--card .card__inner .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* 纯文本标准卡片：透明背景（适配无图纯文字场景） */
.card--standard.card--text {
  background-color: transparent;
}

/* 媒体区域定位：绝对定位覆盖父容器，确保图片填充完整 */
.card__media,
.card .media {
  bottom: 0;
  position: absolute; /* 绝对定位，填满父容器 */
  top: 0;
}

/* 媒体容器（图片外层）：100%宽度，确保图片横向填充 */
.card .media {
  width: 100%;
}

/* 图片容器：内边距控制，计算宽度（容器宽度 - 2倍内边距） */
.card__media {
  margin: var(--image-padding); /* 内边距（变量控制，适配不同卡片类型） */
  width: calc(100% - 2 * var(--image-padding)); /* 宽度自适应，减去两侧内边距 */
}

/* 标准卡片的图片容器：统一内边距 */
.card--standard .card__media {
  margin: var(--image-padding);
}

/* 卡片内层容器：100%宽度，确保内容横向填充 */
.card__inner {
  width: 100%;
}


/* ========== 7. 卡片内容区域（文字/按钮）样式 ========== */
/* 带媒体的卡片内容区：相对定位，内边距 = 图片内边距 + 基础内边距（保证与图片对齐） */
.card--media .card__inner .card__content {
  position: relative;
  padding: calc(var(--image-padding) + 1rem);
}

/* 通用内容区域：网格布局，控制行高分配，100%宽度 */
.card__content {
  display: grid;
  /* 网格行分配：上下两行自适应高度，中间行为内容高度（文字/价格） */
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 1rem; /* 基础内边距 */
  width: 100%;
  flex-grow: 1; /* 自适应剩余高度，确保内容区填满卡片 */
}

/* 自动边距内容区：网格行改为自动高度（适配内容较少的场景） */
.card__content--auto-margins {
  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
}

/* 卡片信息区（文字/价格）：网格第2行，内边距控制 */
.card__information {
  grid-row-start: 2; /* 放在网格中间行 */
  padding: 1.3rem 1rem;
}

/* 非比例卡片的内容区：网格行调整（适配无固定比例的内容布局） */
.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}


/* ========== 8. 批量定价提示样式 ========== */
/* 批量定价提示文本：上间距、行高、浅色调（次要信息） */
.card-information .card__information-volume-pricing-note {
  margin-top: 0.6rem;
  line-height: calc(0.5 + 0.4 / var(--font-body-scale)); /* 行高适配字体缩放 */
  color: rgba(var(--color-foreground), 0.75); /* 文字透明度降低，突出主信息 */
}

/* 批量定价提示按钮：相对定位（适配弹出层），清除内边距，文本对齐 */
.card__information-volume-pricing-note--button,
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
  position: relative; /* 为弹出层提供定位参考 */
  z-index: 1; /* 按钮层级高于内容，确保可点击 */
  cursor: pointer; /* 鼠标悬浮为指针，提示可点击 */
  padding: 0;
  margin: 0;
  text-align: var(--text-alignment); /* 文本对齐与卡片一致 */
  min-width: auto; /* 清除默认最小宽度，适配文本长度 */
}

/* 提示按钮hover效果：下划线，提示可交互 */
.card__information-volume-pricing-note--button:hover {
  text-decoration: underline;
}

/* 定价提示弹出层：定位在按钮上方，宽度适配 */
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
  transform: initial; /* 清除默认变形 */
  top: auto;
  bottom: 4rem; /* 距离按钮底部4rem，避免重叠 */
  max-width: 20rem; /* 最大宽度限制，避免过宽 */
  width: calc(95% + 2rem); /* 宽度 = 父容器95% + 2rem，适配小屏 */
}

/* 弹出层内首个文本：右间距，优化排版 */
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
  padding-right: 0.3rem;
}

/* 右对齐弹出层：定位在按钮右侧 */
.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
  right: 0;
  left: auto;
}

/* 居中弹出层：水平居中（向左偏移50% + transform平移） */
.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
  left: 50%;
  transform: translate(-50%);
}

/* 弹出层内规则文本：左对齐（提升可读性） */
.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
  text-align: left;
}


/* ========== 9. 响应式适配（桌面端 ≥990px） ========== */
@media screen and (min-width: 990px) {
  /* 6列桌面网格的数量选择器：宽度自适应 */
  .grid--6-col-desktop .card__content quick-add-bulk .quantity {
    width: auto;
  }

  /* 6列桌面网格的数量按钮：宽度适配字体缩放 */
  .grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
    width: calc(3rem / var(--font-body-scale));
  }

  /* 6列桌面网格的定价弹出层：水平居中，宽度适配 */
  .grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
    width: calc(100% + var(--border-width) + 3.5rem);
  }

  /* 6列桌面网格的标准卡片弹出层：宽度调整 */
  .grid--6-col-desktop
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 1rem);
  }
}


/* ========== 10. 响应式适配（移动端 ≤749px） ========== */
@media screen and (max-width: 749px) {
  /* 2列移动网格的数量按钮：宽度适配（比桌面端稍大，方便触控） */
  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
    width: calc(3.5rem / var(--font-body-scale));
  }

  /* 2列移动网格的弹出层：水平居中（避免小屏溢出） */
  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info,
  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
  }

  /* 2列移动网格的标准卡片弹出层：100%宽度（适配小屏） */
  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: 100%;
  }

  /* 2列移动网格的带边框卡片弹出层：宽度适配 */
  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 4rem);
  }

  /* 2列移动网格的数量选择器：宽度自适应 */
  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
    width: auto;
  }
}


/* ========== 11. 定价组件适配 ========== */
/* 定价组件：清除上间距（适配信息区排版） */
.card-information quantity-popover volume-pricing {
  margin-top: 0;
}

/* 平板以下屏幕的定价组件：间距调整（避免与数量选择器重叠） */
@media screen and (max-width: 989px) {
  .card-information quantity-popover .quantity__rules ~ volume-pricing {
    margin-top: 0;
  }

  .card-information quantity-popover volume-pricing {
    margin-top: 4.2rem; /* 增加上间距，避免与数量选择器重叠 */
  }
}


/* ========== 12. 平板及以上屏幕（≥750px）内容区调整 ========== */
@media screen and (min-width: 750px) {
  /* 信息区上下内边距增加（适配大屏排版，提升呼吸感） */
  .card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
  }
}


/* ========== 13. 卡片标签（Badge）样式 ========== */
/* 标签默认位置：右下角（网格第3行，右侧对齐） */
.card__badge {
  align-self: flex-end; /* 垂直方向底部对齐 */
  grid-row-start: 3; /* 放在网格第3行（底部） */
  justify-self: flex-start; /* 水平方向左侧对齐 */
}

/* 顶部标签：垂直方向顶部对齐，放在网格第1行 */
.card__badge.top {
  align-self: flex-start;
  grid-row-start: 1;
}

/* 右侧标签：水平方向右侧对齐 */
.card__badge.right {
  justify-self: flex-end;
}

/* 非横向卡片的标签：上下左右间距，避免紧贴边框 */
.card:not(.card--horizontal) > .card__content > .card__badge {
  margin: 1.3rem;
}


/* ========== 14. 图片样式优化 ========== */
/* 卡片图片：100%宽高，居中填充，避免变形 */
.card__media .media img {
  height: 100%;
  object-fit: cover; /* 图片填充容器，裁剪超出部分（保持比例） */
  object-position: center center; /* 图片居中显示 */
  width: 100%;
}

/* 非比例卡片的内容区：100%高度，确保内容填满 */
.card__inner:not(.ratio) > .card__content {
  height: 100%;
}


/* ========== 15. 卡片标题样式 ========== */
/* 标题：清除默认margin，避免排版偏移 */
.card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* 最后一个标题：清除底部margin（适配单个标题场景） */
.card__heading:last-child {
  margin-bottom: 0;
}

/* 横向卡片的标题/价格/快速添加按钮：字体大小适配（基于全局字体缩放） */
.card--horizontal .card__heading,
.card--horizontal .price__container .price-item,
.card--horizontal__quick-add {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

/* 横向卡片信息区：相邻元素间距清除（适配横向紧凑布局） */
.card--horizontal
  .card-information
  > *:not(.visually-hidden:first-child)
  + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0;
}

/* 横向卡片快速添加按钮：清除阴影（适配纯文本按钮场景） */
.card--horizontal__quick-add:before {
  box-shadow: none;
}


/* ========== 16. 平板及以上屏幕（≥750px）标题/价格调整 ========== */
@media only screen and (min-width: 750px) {
  .card--horizontal .card__heading,
  .card--horizontal .price__container .price-item,
  .card--horizontal__quick-add {
    font-size: calc(var(--font-heading-scale) * 1.3rem); /* 字体稍大，适配大屏 */
  }
}


/* ========== 17. 带媒体的边框卡片内容区 ========== */
/* 内容区上间距清除（适配图片与内容无缝衔接） */
.card--card.card--media > .card__content {
  margin-top: calc(0rem - var(--image-padding));
}


/* ========== 18. 卡片链接交互样式 ========== */
/* 纯文本标准卡片 + 边框卡片标题链接：下划线覆盖整个卡片（提升点击区域） */
.card--standard.card--text a::after,
.card--card .card__heading a::after {
  bottom: calc(var(--border-width) * -1); /* 下划线底部与卡片边框对齐 */
  left: calc(var(--border-width) * -1); /* 下划线左侧与卡片边框对齐 */
  right: calc(var(--border-width) * -1); /* 下划线右侧与卡片边框对齐 */
  top: calc(var(--border-width) * -1); /* 下划线顶部与卡片边框对齐 */
}

/* 通用标题链接：下划线覆盖整个标题区域（提升点击体验） */
.card__heading a::after {
  bottom: 0;
  content: ''; /* 伪元素必须有content */
  left: 0;
  position: absolute; /* 绝对定位，覆盖标题 */
  right: 0;
  top: 0;
  z-index: 1; /* 下划线层级高于标题，确保可见 */
}

/* 标题链接焦点样式：外边框偏移（提升可访问性） */
.card__heading a:after {
  outline-offset: 0.3rem;
}

/* 链接:focus状态：阴影+边框（突出焦点，适配键盘导航） */
.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

/* 链接:focus-visible状态（仅键盘导航可见）：同:focus样式 */
.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

/* 链接:focus非:focus-visible状态（鼠标点击）：清除样式（避免冗余） */
.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

/* 标题链接:focus状态：清除默认阴影（避免冲突） */
.card__heading a:focus {
  box-shadow: none;
  outline: 0;
}


/* ========== 19. 桌面端（≥990px）图片hover动画 ========== */
@media screen and (min-width: 990px) {
  /* 单张图片hover：添加过渡（平滑缩放） */
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  /* 单张图片hover效果：轻微放大（提升交互感） */
  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  /* 多张图片hover：第一张图透明（切换显示第二张） */
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

  /* 多张图片hover：第二张图显示+放大（图片切换效果） */
  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }

  /*  hover时链接下划线：提升交互提示 */
  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 0.3rem; /* 下划线偏移，避免紧贴文字 */
  }
}


/* ========== 20. 标准卡片特殊场景样式 ========== */
/* 带媒体的标准卡片：隐藏信息区（适配纯图片场景）
   非横向纯文本标准卡片：隐藏标题/标签/信息区/说明文字（适配极简场景） */
.card--standard.card--media .card__inner .card__information,
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

/* 非横向标准卡片的占位SVG：100%宽度（适配无图场景） */
.card--standard:not(.card--horizontal) .placeholder-svg {
  width: 100%;
}

/* 标准卡片内容区：清除内边距（适配纯图片场景） */
.card--standard > .card__content {
  padding: 0;
}

/* 标准卡片信息区：清除左右内边距（适配全屏内容） */
.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}


/* ========== 21. 边框卡片特殊场景样式 ========== */
/* 带媒体的边框卡片：隐藏信息区（适配纯图片场景）
   纯文本边框卡片：隐藏内层容器（适配纯文字场景）
   带媒体的边框卡片：隐藏标签（适配纯图片场景） */
.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
  display: none;
}

/* 横向卡片：隐藏标签和纯文本内层容器（适配横向布局） */
.card--horizontal .card__badge,
.card--horizontal.card--text .card__inner {
  display: none;
}


/* ========== 22. 高扩展卡片样式 ========== */
/* 高扩展卡片：100%高度（适配父容器高度） */
.card--extend-height {
  height: 100%;
}

/* 高扩展纯文本/媒体标准卡片：纵向flex布局（适配高度拉伸） */
.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
  display: flex;
  flex-direction: column;
}

/* 高扩展卡片内层容器：自适应剩余高度（填满卡片） */
.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
  flex-grow: 1;
}


/* ========== 23. 图标容器样式 ========== */
/* 图标容器：左间距，不换行，过渡效果（适配按钮/链接图标） */
.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap; /* 避免图标与文字换行 */
  transition: transform var(--duration-short) ease; /* 变换过渡（如hover平移） */
  overflow: hidden; /* 裁剪超出部分 */
}


/* ========== 24. 卡片信息区文本样式 ========== */
/* 信息区相邻元素：上间距（优化排版） */
.card-information > * + * {
  margin-top: 0.5rem;
}

/* 信息区：100%宽度（确保内容横向填满） */
.card-information {
  width: 100%;
}

/* 信息区文本：行高适配字体缩放，主色调（突出主信息） */
.card-information > * {
  line-height: calc(1 + 0.4 / var(--font-body-scale)); /* 行高 = 1 + 0.4/字体缩放比（适配不同字体大小） */
  color: rgb(var(--color-foreground));
  

/* 信息区价格：主色调（突出价格） */
.card-information > .price {
  color: rgb(var(--color-foreground));
}

/* 横向卡片价格：浅色调（次要信息，突出标题） */
.card--horizontal .card-information > .price {
  color: rgba(var(--color-foreground), 0.75);
}

/* 信息区评分：上间距（与价格/标题区分） */
.card-information > .rating {
  margin-top: 0.4rem;
}


/* ========== 25. 信息区特殊元素间距调整 ========== */
/* 优先级样式：信息区非隐藏首元素后的定价组件/提示按钮，清除上间距 */
.card-information
  > *:not(.visually-hidden:first-child)
  + quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
  margin-top: 0;
}

/* 信息区非隐藏首元素后的普通元素：上间距（区分不同信息块） */
.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0.7rem;
}

/* 信息区说明文本：字母间距（提升可读性） */
.card-information .caption {
  letter-spacing: 0.07rem;
}

/* 文章信息区：上间距（与其他内容区分） */
.card-article-info {
  margin-top: 1rem;
}


/* ========== 26. 特殊形状卡片样式 ========== */
/* 形状卡片内容区：清除上内边距（适配形状图片） */
.card--shape .card__content {
  padding-top: 0;
}

/* 非文本形状标准卡片：清除边框，透明背景，阴影过滤（适配异形图片） */
.card--shape.card--standard:not(.card--text) .card__inner {
  border: 0; /* 形状卡片不支持边框，清除 */
  background-color: transparent;
  /* 阴影过滤（替代伪元素阴影，适配异形） */
  filter: drop-shadow(
    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
      rgba(var(--color-shadow), var(--shadow-opacity))
  );
}

/* 非文本形状标准卡片：清除伪元素阴影（使用filter替代） */
.card--shape.card--standard:not(.card--text) .card__inner:after {
  display: none;
}

/* 不同位置的Blob形状卡片：不同裁剪路径（创建异形效果） */
.grid__item:nth-child(2n) .shape--blob {
  clip-path: polygon(var(--shape--blob-2)); /* 第2n个卡片使用Blob形状2 */
}

.grid__item:nth-child(3n) .shape--blob {
  clip-path: polygon(var(--shape--blob-3)); /* 第3n个卡片使用Blob形状3 */
}

.grid__item:nth-child(4n) .shape--blob {
  clip-path: polygon(var(--shape--blob-4)); /* 第4n个卡片使用Blob形状4 */
}

.grid__item:nth-child(5n) .shape--blob {
  clip-path: polygon(var(--shape--blob-5)); /* 第5n个卡片使用Blob形状5 */
}

.grid__item:nth-child(7n) .shape--blob {
  clip-path: polygon(var(--shape--blob-6)); /* 第7n个卡片使用Blob形状6 */
}

.grid__item:nth-child(8n) .shape--blob {
  clip-path: polygon(var(--shape--blob-1)); /* 第8n个卡片使用Blob形状1 */
}


/* ========== 27. 特殊形状卡片hover动画 ========== */
/* 优先尊重用户减少动画的设置（prefers-reduced-motion: no-preference = 允许动画） */
@media (prefers-reduced-motion: no-preference) {
  /* 圆形形状卡片：裁剪路径过渡（平滑变形） */
  .product-card-wrapper .shape--round {
    transition: clip-path var(--duration-long) ease;
  }

  /* 圆形形状卡片hover：椭圆变形（交互反馈） */
  .product-card-wrapper:hover .shape--round {
    clip-path: ellipse(47% 47% at 50% 50%);
  }

  /* Blob形状卡片：裁剪路径过渡（平滑变形） */
  .product-card-wrapper .shape--blob {
    transition: clip-path var(--duration-long) ease-in-out;
  }

  /* 不同位置Blob卡片hover：切换不同形状（交互反馈） */
  .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }

  .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-6));
  }

  .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-1));
  }

  .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-2));
  }

  .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-3));
  }

  .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-4));
  }

  .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }
}