.characteristic-collection-list-wrapper {
  background-color: rgb(var(--color-background));
}

/* 商品分类卡片列表样式 */
.characteristic-block-collection-list {
  display: grid;
  width: 100%;
  gap: 20px;
}

/* 统一卡片内边距 */
/*.characteristic-block-collection-list .characteristic-block-collection-card {
  padding: 0;
}*/

/* 优化标题文字样式 */
.characteristic-block-collection-list .content-group__heading {
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 两张布局 - 水平并排 1+1 */
.characteristic-block-collection-list.list-column-2 {
  grid-template-areas: "card1 card2";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 20px;
}

/* 三张布局 - 水平并排 1+1+1 */
.characteristic-block-collection-list.list-column-3 {
  grid-template-areas: "card1 card2 card3";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 20px;
}

/* 四张布局 - 上2下2 */
.characteristic-block-collection-list.list-column-4 {
  grid-template-areas:
    "card1 card2"
    "card3 card4";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 20px;
}

/* 五张布局 - 上3下2 */
.characteristic-block-collection-list.list-column-5 {
  grid-template-areas:
    "card1 card1 card2 card2 card3 card3"
    "card4 card4 card4 card5 card5 card5";
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  justify-items: stretch;
}

/* 两张布局 - 第一张卡片 */
.characteristic-block-collection-list.list-column-2
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: card1;
  aspect-ratio: 920/518;
}

/* 两张布局 - 第二张卡片 */
.characteristic-block-collection-list.list-column-2
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: card2;
  aspect-ratio: 920/518;
}

/* 三张布局 - 第一张卡片 */
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: card1;
  aspect-ratio: 606.67/455;
}

/* 三张布局 - 第二张卡片 */
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: card2;
  aspect-ratio: 606.67/455;
}

/* 三张布局 - 第三张卡片 */
.characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: card3;
  aspect-ratio: 606.67/455;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: card1;
  aspect-ratio: 607/455;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: card2;
  aspect-ratio: 607/455;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: card3;
  aspect-ratio: 607/455;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(4) {
  grid-area: card4;
  aspect-ratio: 920/518;
}

.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(5) {
  grid-area: card5;
  aspect-ratio: 920/518;
}

.characteristic-block-collection-list.list-column-2
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
.characteristic-block-collection-list__item:nth-child(1)
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}


/* 两张布局 - 内容区域对齐方式（垂直居中，距离左边50px）*/
.characteristic-block-collection-list.list-column-2 
  .characteristic-collection-content-group {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  top: 50%;
  left: 50px;
  bottom: auto;
  right: auto;
  transform: translateY(-50%);
}

/* 两张布局 - 标题自动换行 */
.characteristic-block-collection-list.list-column-2 .content-group__heading {
  max-width: 210px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 三张布局 - 内容区域对齐方式（左上角，距顶部和左边各50px）*/
.characteristic-block-collection-list.list-column-3 
  .characteristic-collection-content-group {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  top: 50px;
  left: 50px;
  bottom: auto;
  right: auto;
  transform: none;
}

/* 三张布局 - 标题自动换行 */
.characteristic-block-collection-list.list-column-3 .content-group__heading {
  max-width: 280px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 五张布局 - 所有标题左对齐 */
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 五张布局 - 第4和第5个卡片内容垂直居中 */
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(4)
  .characteristic-collection-content-group,
.characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item:nth-child(5)
  .characteristic-collection-content-group {
  top: 50%;
  transform: translateY(-50%);
}

/* 四张布局 - 卡片尺寸（上2下2）*/
.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(1) {
  grid-area: card1;
  aspect-ratio: 920/518;
}

.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(2) {
  grid-area: card2;
  aspect-ratio: 920/518;
}

.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(3) {
  grid-area: card3;
  aspect-ratio: 920/518;
}

.characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item:nth-child(4) {
  grid-area: card4;
  aspect-ratio: 920/518;
}

/* 四张布局 - 内容区域样式（垂直居中，左边距50px）*/
.characteristic-block-collection-list.list-column-4 .characteristic-collection-content-group {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
}

/* 四张布局 - 标题样式（左对齐+自动换行）*/
.characteristic-block-collection-list.list-column-4 .content-group__heading {
  width: auto;
  max-width: 280px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.characteristic-block-collection-list
  .characteristic-block-collection-list__item {
  position: relative;
  overflow: hidden;
}
.characteristic-block-collection-list
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__image-wrapper {
  height: 100%;
  border: none;
}
.characteristic-block-collection-list
  .characteristic-block-collection-list__item
  img {
  width: 100%;
  height: 100%;
}
.characteristic-block-collection-list
  .block-collection-card__image-title-wrapper {
  width: 100%;
  height: 100%;
}

/* 桌面端 - 通用标题和按钮样式优化 */
.characteristic-block-collection-list .characteristic-collection-content-group {
  flex-direction: column;
  align-items: flex-start;
}

/* 桌面端 - 5张布局标题自动换行 */
.characteristic-block-collection-list.list-column-5 .content-group__heading {
  max-width: 230px;
}

/* 桌面端 - 3张布局标题自动换行 */
.characteristic-block-collection-list.list-column-3 .content-group__heading {
  max-width: 280px;
}

/* 桌面端 - 2张布局标题自动换行 */
.characteristic-block-collection-list.list-column-2 .content-group__heading {
  max-width: 210px;
}

@media screen and (max-width: 959px) {
  .characteristic-block-collection-list {
    width: 100%;
    gap: 10px;
  }

  /* 移动端 - 优化内容容器和标题 */
  .characteristic-block-collection-list .characteristic-collection-content-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .characteristic-block-collection-list .content-group__heading {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 144px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* 移动端 - 优化按钮样式 */
  .characteristic-block-collection-list .characteristic-collection-content-group .button,
  .characteristic-block-collection-list .characteristic-collection-content-group .button--secondary {
    display: inline-block;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0;
    text-transform: capitalize;
    text-decoration: underline;
    text-decoration-color: #000000;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: #000000;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    background-color: transparent;
    min-height: auto;
    border-radius: 0;
    white-space: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .characteristic-block-collection-list .characteristic-collection-content-group .button:hover,
  .characteristic-block-collection-list .characteristic-collection-content-group .button:focus,
  .characteristic-block-collection-list .characteristic-collection-content-group .button--secondary:hover,
  .characteristic-block-collection-list .characteristic-collection-content-group .button--secondary:focus {
    text-decoration: underline;
    text-decoration-color: #000000;
    text-decoration-thickness: 1px;
    color: #000000;
    background: transparent;
    background-color: transparent;
    border: none;
  }

  /* 移动端 - 两张布局（水平并排 1+1）*/
  .characteristic-block-collection-list.list-column-2 {
    grid-template-areas: "card1 card2";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .characteristic-block-collection-list.list-column-2
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: card1;
    aspect-ratio: 279/406;
  }

  .characteristic-block-collection-list.list-column-2
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: card2;
    aspect-ratio: 279/406;
  }
  
  /* 移动端 - 2张布局所有卡片内容样式优化 */
  .characteristic-block-collection-list.list-column-2 .characteristic-collection-content-group {
    align-items: flex-start;
    justify-content: flex-start;
    top: 20px;
    left: 20px;
    transform: none;
  }
  
  /* 移动端 - 2张布局标题优化 */
  .characteristic-block-collection-list.list-column-2 .content-group__heading {
    max-width: 120px;
    text-align: left;
  }

  /* 移动端 - 三张布局（左1右2）*/
  .characteristic-block-collection-list.list-column-3 {
    grid-template-areas:
      "card1 card2"
      "card1 card3";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: card1;
    aspect-ratio: 279/406;
  }
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: card2;
    aspect-ratio: 267/195;
  }

  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: card3;
    aspect-ratio: 267/195;
  }
  
  /* 移动端 - 3张布局所有卡片内容样式优化 */
  .characteristic-block-collection-list.list-column-3 .characteristic-collection-content-group {
    align-items: flex-start;
    justify-content: flex-start;
    top: 20px;
    left: 20px;
    transform: none;
  }
  
  /* 移动端 - 3张布局标题优化 */
  .characteristic-block-collection-list.list-column-3 .content-group__heading {
    max-width: 120px;
    text-align: left;
  }
  
  /* 移动端 - 3张布局右边两个小卡片位置调整 */
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(2)
    .characteristic-collection-content-group,
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(3)
    .characteristic-collection-content-group {
    top: 15px;
    left: 15px;
  }
  
  /* 移动端 - 3张布局右边两个小卡片（第2、3张）标题宽度限制 */
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(2)
    .content-group__heading,
  .characteristic-block-collection-list.list-column-3
    .characteristic-block-collection-list__item:nth-child(3)
    .content-group__heading {
    max-width: 100px;
  }

  /* 移动端 - 四张布局（左1右2，下1）*/
  .characteristic-block-collection-list.list-column-4 {
    grid-template-areas:
      "card1 card2"
      "card1 card3"
      "card4 card4";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  
  /* 第1张 - 左侧大图占2行 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: card1;
    aspect-ratio: 279/406;
  }
  
  /* 第2张 - 右上 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: card2;
    aspect-ratio: 267/195;
  }
  
  /* 第3张 - 右下 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: card3;
    aspect-ratio: 267/195;
  }
  
  /* 第4张 - 宽屏卡片 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(4) {
    grid-area: card4;
    aspect-ratio: 342/117;
  }
  
  /* 移动端 - 4张布局所有卡片内容样式优化 */
  .characteristic-block-collection-list.list-column-4 .characteristic-collection-content-group {
    align-items: flex-start;
    justify-content: flex-start;
    top: 20px;
    left: 20px;
    transform: none;
  }
  
  /* 移动端 - 4张布局标题优化 */
  .characteristic-block-collection-list.list-column-4 .content-group__heading {
    max-width: 120px;
    text-align: left;
  }
  
  /* 移动端 - 4张布局右边两个小卡片（第2、3张）样式优化 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(2)
    .content-group__heading,
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(3)
    .content-group__heading {
    max-width: 160px;
  }
  
  /* 移动端 - 4张布局右边两个小卡片位置调整 */
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(2)
    .characteristic-collection-content-group,
  .characteristic-block-collection-list.list-column-4
    .characteristic-block-collection-list__item:nth-child(3)
    .characteristic-collection-content-group {
    top: 20px;
    left: 20px;
  }

  /* 移动端 - 五张布局（左1右2，下2）*/
  .characteristic-block-collection-list.list-column-5 {
    grid-template-areas:
      "card1 card2"
      "card1 card3"
      "card4 card4"
      "card5 card5";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
  }
  
  /* 第1张 - NEW ARRIVALS 左侧大图占2行 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(1) {
    grid-area: card1;
    aspect-ratio: 182/270;
  }
  
  /* 第2张 - TOP BRANDS 右上 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(2) {
    grid-area: card2;
    aspect-ratio: 182/116.5;
  }
  
  /* 第3张 - BEST SELLERS 右下 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(3) {
    grid-area: card3;
    aspect-ratio: 182/116.5;
  }
  
  /* 第4张 - FOR MAN 宽屏卡片 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(4) {
    grid-area: card4;
    aspect-ratio: 374/117;
  }
  
  /* 第5张 - FOR WOMAN 宽屏卡片 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(5) {
    grid-area: card5;
    aspect-ratio: 374/117;
  }

  /* 移动端 - 5张布局所有卡片内容样式优化 */
  .characteristic-block-collection-list.list-column-5 .characteristic-collection-content-group {
    align-items: flex-start;
    justify-content: flex-start;
    top: 20px;
    left: 20px;
    transform: none;
  }
  
  /* 移动端 - 5张布局第1张大图内容容器左内边距 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(1)
    .characteristic-collection-content-group {
    left: 15px !important;
  }
  
  /* 移动端 - 5张布局标题优化 */
  .characteristic-block-collection-list.list-column-5 .content-group__heading {
    max-width: 120px;
    text-align: left;
    max-width: 120px !important;
    text-align: left !important;
  }
  
  /* 移动端 - 5张布局右边两个小卡片（第2、3张）样式优化 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(2)
    .content-group__heading,
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(3)
    .content-group__heading {
    max-width: 160px !important;
  }
  
  /* 移动端 - 5张布局右边两个小卡片位置调整 */
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(2)
    .characteristic-collection-content-group,
  .characteristic-block-collection-list.list-column-5
    .characteristic-block-collection-list__item:nth-child(3)
    .characteristic-collection-content-group {
    top: 15px !important;
    left: 15px !important;
    padding: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
  }
    
  .characteristic-block-collection-list.list-column-2
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
  .characteristic-block-collection-list.list-column-4
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
  .characteristic-block-collection-list.list-column-5
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title,
  .characteristic-block-collection-list.list-column-3
  .characteristic-block-collection-list__item
  .characteristic-block-collection-card__title {
    right: auto;
    left: 0;
  }
}