featured-collection-slider {
  position: relative;
  display: block;
}

.featured-collection-new .collection__description > * {
  margin: 0;
}
.featured-collection-new .card__bottom-actions {
  display: none;
}
.featured-collection-new .collection__view-all {
  margin-top: 40px;
}

/* PC: 左右各占 5%，产品列表区域占 95%（同时覆盖 JS 读取的 --page-padding） */
.featured-collection-new {
  --page-padding: 5%;
}

/* 首页：section padding-bottom 响应式覆盖（其他页面不变） */
body[data-template="index"] .featured-collection-new.section-padding {
  padding-bottom: 80px !important;
}
@media screen and (max-width: 1279px) {
  body[data-template="index"] .featured-collection-new.section-padding {
    padding-bottom: 64px !important;
  }
}
@media screen and (max-width: 767px) {
  body[data-template="index"] .featured-collection-new.section-padding {
    padding-bottom: 48px !important;
  }
}

body[data-template="index"] .featured-collection-new .card-shadow-pb {
  padding-block-end: 0 !important;
  padding-inline: 0;
}

.featured-collection-new .page-width {
  padding-inline: 5%;
}

.featured-collection-new .collection__title {
  text-align: center;
  margin-block-end: 40px;
}

.featured-collection-new .collection__title .title:not(:only-child) {
  margin-block-end: 10px;
}

.featured-collection-new__title {
  text-align: var(--title-algin);
  font-size: 32px;
  line-height: 38px;
}

.featured-collection-new__title--ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.featured-collection-new .splide__list {
  flex-wrap: nowrap;
  gap: 8px;
}

.featured-collection-new .splide__list:not(.slider--desktop) {
  flex-wrap: wrap;
}

.splide[data-desktop-slider="false"] {
  visibility: unset;
}

.splide[data-desktop-slider="false"] .slider-buttons {
  display: none;
}

.featured-collection-new .slider--desktop {
  scroll-padding-left: var(--page-padding);
}

/* fix:safari svg  */

.featured-collection-new .product-card-wrapper .placeholder svg {
  width: 100%;
}

.featured-collection-new .featured-control__arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background 0.3s;
  border: none;
}

.featured-collection-new .featured-control__arrow-button svg {
  width: 12.5px;
  height: 12.5px;
}

.featured-collection-new .featured-control__arrow-button[name="previous"] {
  position: absolute;
  inset-inline-start: 42px;
  inset-block-start: 50%;
  transform: rotate(90deg);
}

.featured-collection-new
  .featured-control__arrow-button[name="previous"]:hover {
  background-color: rgba(255, 255, 255);
}

.featured-collection-new .featured-control__arrow-button[name="next"] {
  position: absolute;
  inset-inline-end: 46px;
  inset-block-start: 50%;
  transform: rotate(-90deg);
}

.featured-collection-new .featured-control__arrow-button[name="next"]:hover {
  background-color: rgba(255, 255, 255);
}

.featured-collection-new .featured-control__arrow-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
  display: none;
}

.featured-collection__mb-view-all {
  position: relative;
  display: block;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--color-text), 0.05);
  border-radius: var(--product-card-border-radius);
}

.featured-collection__mb-view-all .mb-view-all__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  position: relative;
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text));
  transform: rotate(-90deg);
}

.featured-collection__mb-view-all .mb-view-all__text {
  margin-block-start: 16px;
  text-align: center;
  color: rgb(var(--color-text));
}

/* ===== Tablet: 768px - 1279px ===== */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .featured-collection-new .grid-cols-1-tablet > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .featured-collection-new .grid-cols-2-tablet > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .featured-collection-new .grid-cols-3-tablet > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .featured-collection-new .grid-cols-4-tablet > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .featured-collection-new .grid-cols-5-tablet > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .featured-collection-new .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .featured-collection-new .slider.slider--tablet {
    margin-block-end: 15px;
  }

  .featured-collection-new .collection__title {
    margin-block-end: 32px;
  }
  .featured-collection-new__title {
    font-size: 28px;
    line-height: 34px;
  }
  .featured-collection-new .collection__view-all {
    margin-top: 32px;
  }

  .featured-collection-new .splide__list:not(.slider--tablet) {
    flex-wrap: wrap;
  }

  .splide[data-tablet-slider="false"] {
    visibility: unset;
  }

  .splide[data-tablet-slider="false"] .slider-buttons {
    display: none;
  }

  .featured-collection-new .featured-control__arrow-button {
    display: none !important;
  }
}

/* ===== Mobile: < 768px ===== */
@media screen and (max-width: 767px) {
  .featured-collection-new .splide__list:not(.slider--mobile) {
    flex-wrap: wrap;
  }

  .featured-collection-new .slider-buttons {
    display: none;
  }

  .featured-collection-new .collection__title {
    margin-block-end: 28px;
  }
  .featured-collection-new__title {
    font-size: 24px;
    line-height: 29px;
  }
  .featured-collection-new .collection__view-all {
    margin-top: 32px;
  }

  .splide[data-mobile-slider="false"] {
    visibility: unset;
  }

  .slider-mobile--full {
    padding-inline: 0 !important;
  }

  .slider--full {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    scroll-padding-left: 0;
    scroll-padding-right: 0;
  }

  .slider--full .slider__slide,
  .slider--full .grid__item {
    padding-inline: 0;
  }

  .slider--full.slider--mobile .slider__slide,
  .slider--full.slider--mobile .grid__item {
    width: calc(
      (100% - (33.3% / var(--mobile-cols))) / var(--mobile-cols)
    ) !important;
    flex-grow: 1;
  }

  .slider--full .card .card__content {
    padding: 0 8%;
  }

  .slider--full .card__bottom-actions {
    padding: 0 8%;
  }

  .slider--full .global-product-card-border-shadow,
  .slider--full .card__media {
    border-radius: 0 !important;
  }
}