.section-showcase {
    padding: var(--bz-sc-pad-top, 40px) 80px var(--bz-sc-pad-bottom, 100px);
    width: 100%;
}

.section-showcase_title {
    text-align: center;
    font-size: 34px;
    color: #000;
    line-height: 43px;
    width: 100%;
}

.section-showcase_title img {
    width: 100%;
    height: 100%;
    max-height: 45px;
    object-fit: contain;
}

.section-showcase_follow-us {
    margin-top: var(--bz-sc-follow-gap, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-showcase_follow-us_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 35px;
    background: linear-gradient(100.78deg, #9E34C0 -3.89%, #A735BA 10.07%, #FA117E 53.09%, #FE8465 83.73%, #FCC155 93.77%);
    border-radius: 32px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
}

.section-showcase .slick-arrow {
    width: 40px;
    height: 40px;
}

.section-showcase .slick-prev {
    left: -40px;
}

.section-showcase .slick-next {
    right: -40px;
}

.section-showcase .slick-arrow::before {
    color: #BF77F9;
    font-size: 40px;
}

.section-showcase_slider_slide_item {
    margin: 70px 15px 56px;
}

.section-showcase_slider_slide_item_image {
    width: 100%;
    height: 100%;
}

.section-showcase_slider_slide_item_image img {
    width: 100%;
    height: 100%;
}

.section-showcase_third-layer .section-showcase_slider_slide_item {
  margin-top: 0;
  margin-bottom: 0;
}

.section-showcase_third-layer {
    /* display: flex;
    width: 100%;
    overflow-x: auto;
    padding: 0 15px;
    gap: 30px; */

    /* 层间距。原本写死在模板的 .m-t-60 工具类里（固定 60px），后台调不了。
       这条同时作用于第3层与第4层 —— 第4层复用了本类名，所以两层的上间距一致。
       默认值取 60px，与原来的 m-t-60 完全相同，不改配置就不会有任何视觉变化。
       移动端（≤768px）另有一条 --bz-sc-content-gap 的规则在文件后方覆盖它，
       那是主题原有行为，这里不动。 */
    margin-top: var(--bz-sc-layer-gap, 32px);
}

.section-showcase_third-layer_item {
  margin: 0 15px;
}

/* .section-showcase_third-layer_item {
    margin-left: 30px;
}

.section-showcase_third-layer_item:first-child {
    margin-left: 0;
} */

.section-showcase_slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.section-showcase_slider_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
}

.section-showcase_slider_btn svg {
    width: 40px;
    height: 40px;
    color: var(--arrow-button-bg, #BF77F9);
}

.section-showcase_slider_btn[name="previous"],
.section-showcase_slider_btn[name="next"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.section-showcase_slider_btn[name="previous"] {
    transform: translateY(-50%) rotate(-180deg);
    left: -46px;
}

.section-showcase_slider_btn[name="next"] {
    right: -46px;
}

.section-showcase_slider_btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.section-showcase_slider .product-card-wrapper .card__colors {
    padding-left: 2px;
}

.section-showcase_slider_slider {
    display: flex;
    width: 100%;
}

.section-showcase_slider_slider.center-slider,
.section-showcase_third-layer.center-slider {
    justify-content: center;
}

.section-showcase_slider .section-showcase_slider_slide:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1200px) {
  .section-showcase {
    /*padding: 40px 60px 100px;*/
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .section-showcase {
    padding: 30px 12px 40px;
  }

  .section-showcase_title {
    font-size: 24px;
    line-height: 32px;
    height: 32px;

    svg {
      width: 90%;
    }
  }

  /* Follow Us 按钮样式 */
  .section-showcase_follow-us {
    margin-top: 12px;
  }

  .section-showcase_follow-us_btn {
    width: 100px;
    height: 30px;
    font-size: 14px;
    line-height: 18px;
  }

  /* 这条原本把三层一起设了 --bz-sc-content-gap，等于让「Follow Us 与商品的间距」
     在移动端偷偷兼任了层间距，跟桌面端的 --bz-sc-layer-gap 各管一半，
     改一个另一个不动。现在只留第1层（它上面确实是 Follow Us），
     第2/3/4 层的间距统一交给文件末尾那条两端通用的规则。 */
  .section-showcase_first-layer {
    margin-top: var(--bz-sc-content-gap, 6px);
  }

  /* 隐藏导航按钮 */
  .section-showcase_slider_btn {
    display: none;
  }

  /* 调整滑块布局为网格 */
  .section-showcase_slider_slider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  /* 调整卡片样式 */
  .section-showcase_slider_slide_item {
    margin: 0;
    width: 100%;
  }

  /* 调整图片容器 */
  .section-showcase_slider_slide_item_image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
  }

  .section-showcase_slider_slide_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 调整商品信息 */
  .section-showcase_third-layer {
    display: grid;
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    gap: 8px;
    padding: 0;
    margin-top: 20px;
    overflow: visible;
  }

  .section-showcase_third-layer_item {
    margin: 0;
    position: relative;
  }

  /* 商品图片容器 */
  .section-showcase_third-layer_item .showcase-card-3 {
    width: 100%;
    height: auto;
    aspect-ratio: 0.8;
    border-radius: 10px;
    overflow: hidden;
  }

  /* 商品信息卡片 */
  .section-showcase_third-layer_item .showcase-card-3_product {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 8px;
    padding: 5px;
    border-radius: 8px;
    background: #F5F4F673;
    backdrop-filter: blur(4.75px);
    display: flex;
    align-items: center;
  }

  /* 商品缩略图 */
  .section-showcase_third-layer_item .showcase-card-3_product_image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
  }

  /* 商品信息 */
  .section-showcase_third-layer_item .showcase-card-3_product_info {
    flex: 1;
    margin-left: 5px;
    min-width: 0;
  }

  .section-showcase_third-layer_item .showcase-card-3_product_info_title {
    font-size: 10px;
    line-height: 12px;
    color: #000;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .section-showcase_third-layer_item .showcase-card-3_product_info_price {
    font-size: 10px;
    line-height: 12px;
    color: var(--theme-color);
    margin: 0;
  }

  /* 添加到购物车按钮 */
  .section-showcase_third-layer_item .showcase-card-3_product_btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  .section-showcase_third-layer_item .showcase-card-3_product_btn svg {
    width: 14px;
    height: 14px;
    color: #fff;
  }

  /* 播放按钮 */
  .section-showcase_third-layer_item .showcase-card-3_video-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .section-showcase_third-layer_item .showcase-card-3_video-icon svg {
    width: 12px;
    height: 12px;
    color: #666;
  }

  /* 用户头像和名称 */
  .section-showcase_slider_slide_item .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .section-showcase_slider_slide_item .user-name {
    font-size: 12px;
    line-height: 16px;
    margin-left: 4px;
  }

  /* Instagram 图标 */
  .section-showcase_slider_slide_item .instagram-icon {
    width: 16px;
    height: 16px;
    margin-left: 4px;
  }

  /* 商品价格 */
  .section-showcase_slider_slide_item .product-price {
    font-size: 14px;
    line-height: 18px;
    margin-top: 8px;
  }

  /* 添加购物车按钮 */
  .section-showcase_slider_slide_item .add-to-cart {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    bottom: 8px;
  }

  .section-showcase_slider_slide_item .add-to-cart svg {
    width: 14px;
    height: 14px;
    color: #fff;
  }
}


/* ================= 间距语义归位（两端统一） =================
   原来的分工是乱的：
     --bz-sc-content-gap（后台「Follow Us 与商品的间距」）桌面端完全不生效，
       移动端却兼任了所有层的间距；
     --bz-sc-layer-gap（后台「样例层之间的间距」）只在桌面端生效，
       且只写了 .third-layer，第4层靠类名重叠蹭到，第2层彻底漏掉。
   结果就是同一件事被两个设置分管、改一个另一个不动。

   现在按名字归位，两端一致：
     content-gap = Follow Us 到第一排商品
     layer-gap   = 层与层之间

   第1层的 content-gap 已在上面的移动端块和下面的通用块里给了；第1层没配内容时
   它高度为 0 但仍占位，此时 content-gap 依然把 Follow Us 和第2层撑开，
   所以第2层只在「第1层真有卡片」时才吃 layer-gap，否则保持 0，不会叠加。 */

/* Follow Us 到第一排商品 —— 桌面端原本写死 0，这里补上，与移动端同一个设置 */
.section-showcase_first-layer {
  margin-top: var(--bz-sc-content-gap, 6px);
}

/* 层与层之间 —— 每层一个设置，桌面和移动端共用同一份值。
   各层用的卡片样式不一样（有的卡片挂在图下面、有的叠在图里），
   同一个数值在视觉上并不等距，所以拆开让每层能单独微调。
   第3层的选择器要排除第4层：第4层的类名里也带 third-layer。 */
.section-showcase_first-layer:has(.section-showcase_slider_slide_item)
  + .section-showcase_second-layer {
  margin-top: var(--bz-sc-layer-gap, 32px);
}

.section-showcase_third-layer:not(.section-showcase_fourth-layer) {
  margin-top: var(--bz-sc-layer-gap-3, 28px);
}

.section-showcase_fourth-layer {
  margin-top: var(--bz-sc-layer-gap-4, 80px);
}