/* Product page actions aligned with the featured product block. */
.page-product .columns-container.container {
  width: min(1539px, calc(100% - 48px));
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.page-product .breadcrumb__wrapper {
  margin-bottom: 14px;
  border: 0;
  background: transparent;
}

.page-product .breadcrumb__wrapper .container {
  display: flex;
  width: min(1539px, calc(100% - 48px));
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.page-product .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 12px 0 0;
  overflow: hidden;
  color: #625d60;
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  list-style: none;
}

.page-product .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #625d60;
}

.page-product .breadcrumb-item + .breadcrumb-item::before {
  flex: 0 0 auto;
  margin: 0 7px;
  color: #c7c1c4;
  content: "\e5cc";
  font-family: "Material Icons", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.page-product .breadcrumb-link {
  color: var(--bs-primary);
  text-decoration: none;
}

.page-product .breadcrumb-link:hover,
.page-product .breadcrumb-link:focus-visible {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-product .breadcrumb-item:not(:last-child) {
  flex: 0 0 auto;
}

.page-product .breadcrumb-item:last-child {
  flex: 0 1 auto;
  font-weight: 400;
}

.page-product .breadcrumb-item:last-child > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-product .product__prices-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-product .product__prices-inline,
.page-product .product__discount-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-product .product__price {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.page-product .product__regular-price {
  color: #a5a5a5;
  font-size: 16px;
  line-height: 1.1;
  text-decoration-thickness: 1px;
}

.page-product .product__discount-percentage,
.page-product .product__discount-amount {
  --bs-primary-text-emphasis: #e07a8b;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff0f2;
  color: #e07a8b !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
}

.page-product #notifications .alert.alert-info {
  --bs-alert-color: #6b5057;
  --bs-alert-bg: #fffafb;
  --bs-alert-border-color: #f2d7db;
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  width: 400px;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  margin: 12px auto 40px;
  padding: 4px 40px 4px 10px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.page-product #notifications .alert.alert-info::before {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f9e5e8;
  color: #d96678;
  content: "\2713";
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}

.page-product #notifications .alert.alert-info .btn-close {
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  padding: 0;
  opacity: .58;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}

.page-product #notifications .alert.alert-info .btn-close:hover,
.page-product #notifications .alert.alert-info .btn-close:focus-visible {
  opacity: .9;
}

@media (max-width: 575.98px) {
  /* 手机端缩小缩略图与产品标题之间的间隔（主题默认 32px） */
  .page-product .product__images {
    margin-bottom: 16px;
  }

  /* 手机端标题→星星评论行 22→16px */
  .page-product .product__name {
    margin-bottom: 16px;
  }

  .page-product #notifications .alert.alert-info {
    width: 100%;
    height: 34px;
    min-height: 34px;
    margin: 10px auto 16px;
    border-radius: 19px;
    font-size: 12px;
  }

  .page-product #notifications .alert.alert-info::before {
    display: inline-grid;
  }
}

.page-product .product__tax-infos {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 8px;
}

/* 2026-09-14 fade 轮播的 .carousel-item.active 是 z-index:1 且 DOM 在旗帜之后，
   会把同 z-index 的旗帜压在图底下（表现为切到某些图标签消失），抬到 z-index:5 */
.page-product .product-flags {
  z-index: 5;
}

.page-product .product-flags .badge.new {
  border-color: #e07a8b;
  background: #e07a8b;
  color: #fff;
}

.page-product .product-flags .badge.discount {
  border-color: #e07a8b;
  background: #fff7f8;
  color: #e07a8b;
}

/* 2026-09-14 商品卡旗帜（New/折扣）：配色与产品页统一，压住卡片图 */
.beautys-featured-product .product-flags {
  z-index: 6;
}

.beautys-featured-product .product-flags .badge:not(.discount) {
  border-color: #e07a8b;
  background: #e07a8b;
  color: #fff;
}

.beautys-featured-product .product-flags .badge.discount {
  border-color: #e07a8b;
  background: #fff7f8;
  color: #e07a8b;
}

.page-product .product-variant__colors {
  gap: 10px;
}

.page-product .product-variant__color {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px;
}

/* FIX 2026-09-12 (品85): 视觉隐藏的 radio 用 absolute 定位时随布局流动（通常在页面
   顶部 558px 处）。用户滚到页面中部点色块 → 浏览器原生聚焦该 radio（这条路径不走
   JS，preventScroll 劫持无效）→ 聚焦视口外元素触发浏览器自动滚动 → 整页跳回顶部，
   头部公告栏滚出视口。改 fixed 定位：radio 永远钉在视口 (0,0)，聚焦不再引发滚动。
   clip rect(0,0,0,0) 与 pointer-events:none 原样继承，视觉与交互零变化 */
.page-product .product-variant__color .input-color__input {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
}

.page-product .product-variant__color .input-color__label {
  display: block;
  box-sizing: border-box;
  width: 76px !important;
  height: 76px !important;
  padding: 3px;
}

.page-product .product-variant__color .input-color__label .color {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.page-product .product-variant__color .input-color__label--active,
.page-product .product-variant__color .input-color__input:focus-visible + .input-color__label {
  border-color: #d8d8d8 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Recolor the theme's original selected-color outline instead of stacking
   a second outline on the label. */
.page-product .product-variant__color .input-color__label--active .color.active,
.page-product .product-variant__color .input-color__input:focus-visible + .input-color__label .color,
.page-product .product-variant__color .input-color__label .color:hover {
  outline: 2px solid #e07a8b !important;
  outline-offset: -2px;
  box-shadow: none !important;
}

/* Present radio-based options (such as Size) as compact theme-matched
   buttons while keeping the native inputs available to keyboards and AT. */
.page-product .product-variant__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-product .product-variant__radio {
  position: relative;
  margin: 0;
  padding: 0;
}

.page-product .product-variant__radio .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.page-product .product-variant__radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 14px;
  color: #2f2a2c;
  font-size: 15px;
  line-height: 1;
  background: #fff;
  border: 1px solid #d9dfe4;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-product .product-variant__radio label:hover,
.page-product .product-variant__radio .form-check-input:focus-visible + label {
  border-color: #e07a8b;
  background: #fff7f8;
}

.page-product .product-variant__radio .form-check-input:focus-visible + label {
  outline: 2px solid #e07a8b;
  outline-offset: 2px;
}

.page-product .product-variant__radio .form-check-input:checked + label {
  color: #c94f68;
  background: #fff7f8;
  border-color: #e07a8b;
  box-shadow: inset 0 0 0 1px #e07a8b;
}

.page-product .product-variant__radio .form-check-input:disabled + label {
  color: #a7a1a3;
  background: #f7f5f5;
  border-color: #e5dfe0;
  cursor: not-allowed;
  opacity: .7;
}

/* FIX 2026-09-12: Text-only color options (no texture image, no HTML color code)
   render as text chip buttons instead of invisible empty swatches. */
.page-product .product-variant__color.input-color--text {
  width: auto !important;
  height: auto !important;
  flex: 0 1 auto;
  max-width: 100%;
}

.page-product .product-variant__color.input-color--text .input-color__label {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  padding: 6px 16px;
  background: #fff;
  border: 1px solid #d9dfe4;
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.page-product .product-variant__color.input-color--text .input-color__label--text {
  color: #2f2a2c;
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
  text-align: left;
}

.page-product .product-variant__color.input-color--text .input-color__label:hover,
.page-product .product-variant__color.input-color--text .input-color__input:focus-visible + .input-color__label {
  border-color: #e07a8b;
  background: #fff7f8;
}

.page-product .product-variant__color.input-color--text .input-color__input:focus-visible + .input-color__label {
  outline: 2px solid #e07a8b;
  outline-offset: 2px;
}

.page-product .product-variant__color.input-color--text .input-color__label--active {
  color: #c94f68;
  background: #fff7f8;
  border-color: #e07a8b !important;
  box-shadow: inset 0 0 0 1px #e07a8b;
}

.page-product .product-variant__color.input-color--text .input-color__label--active .input-color__label--text,
.page-product .product-variant__color.input-color--text .input-color__input:checked + .input-color__label .input-color__label--text {
  color: #c94f68;
}

/* FIX 2026-09-12: Out-of-stock variants (aggregate combination qty = 0) render
   greyed-out and unselectable, matching the source platform behaviour. */
.page-product .product-variant__color.input-color--oos .input-color__label,
.page-product .product-variant__radio--oos label {
  background: #f7f5f5;
  border-color: #e5dfe0;
  cursor: not-allowed;
  opacity: .55;
}

.page-product .product-variant__color.input-color--oos .input-color__label .input-color__label--text,
.page-product .product-variant__radio--oos label .form-check-label {
  color: #a7a1a3;
}

.page-product .product-variant__color.input-color--oos .input-color__label:hover,
.page-product .product-variant__radio--oos label:hover {
  border-color: #e5dfe0;
  background: #f7f5f5;
}

.page-product .product-variant__color.input-color--oos .color.texture,
.page-product .product-variant__color.input-color--oos .color {
  filter: grayscale(1);
  opacity: .45;
}

@media (max-width: 767px) {
  .page-product .product__carousel {
    touch-action: pan-y;
  }

  .page-product .breadcrumb__wrapper .container,
  .page-product .columns-container.container {
    width: calc(100% - 24px);
  }

  .page-product .breadcrumb {
    padding: 10px 0 0;
    font-size: 13px;
  }

  .page-product .breadcrumb__wrapper {
    margin-bottom: 12px;
  }

  .page-product .breadcrumb-item + .breadcrumb-item::before {
    margin: 0 6px;
    font-size: 15px;
  }
}

.page-product .product__actions-qty-add {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
}

.page-product .product__action-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.page-product .product__quantity,
.page-product .product__add-to-cart {
  width: 100%;
}

/* Kylie-style quantity selector: one rounded bordered box with
   borderless -/+ buttons and a centered, divider-separated input. */
.page-product .product__quantity .quantity-button__group {
  width: 118px;
  height: 45px;
  border: 1px solid #e2d6d9;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.page-product .product__quantity .quantity-button__group .decrement,
.page-product .product__quantity .quantity-button__group .increment {
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3d3436;
  font-size: 15px;
}

.page-product .product__quantity .quantity-button__group .decrement .material-icons,
.page-product .product__quantity .quantity-button__group .increment .material-icons {
  font-size: 15px;
}

.page-product .product__quantity .quantity-button__group .decrement:hover,
.page-product .product__quantity .quantity-button__group .increment:hover {
  background: #faf3f4;
  color: #d96678;
}

.page-product .product__quantity .quantity-button__group .form-control {
  flex: 1 1 auto;
  width: 30px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #3d3436;
  background: transparent;
}

.page-product .product__primary-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  width: 100%;
  overflow: visible;
}

.page-product .product__primary-action-row .product__add-to-cart {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}

.page-product .product__actions {
  position: relative;
}

.page-product .product__wishlist-action {
  display: flex;
  flex: 0 0 54px;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}

/* Wishlist icon sits right of the Add to cart button (same hook as before,
   rendered into the --dynamic slot next to the button). */
.page-product:not(.page-product--quickview) .product__wishlist-action--dynamic {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.page-product .product__wishlist-action--dynamic .wishlist-button-add {
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: #303030;
  background: transparent !important;
}

.page-product .product__wishlist-action--dynamic .wishlist-button-add:hover,
.page-product .product__wishlist-action--dynamic .wishlist-button-add:focus-visible {
  color: #e07a8b;
  background: transparent !important;
}

.page-product .product__wishlist-action .wishlist-button-add {
  position: static;
  inset: auto;
  width: 54px;
  min-width: 54px;
  height: 54px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page-product .product__images {
  position: relative;
}

.page-product .product__wishlist-action .wishlist-button-add {
  background: transparent !important;
  background-image: none !important;
  border: 0;
  box-shadow: none !important;
}

.page-product .ps-categoryproducts .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 54px;
  color: #191919;
  font-family: "Josefin Sans", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.page-product .ps-viewedproduct .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 54px;
  color: #191919;
  font-family: "Josefin Sans", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.page-product .ps-categoryproducts .section-title::after,
.page-product .ps-viewedproduct .section-title::after {
  display: block;
  width: 275px;
  height: 30px;
  margin-top: 30px;
  background: url("../../../../modules/beautysspecialcollection/views/img/section-divider.svg") center / contain no-repeat;
  content: "";
}

.page-product .module-products__carousel {
  position: relative;
}

.page-product .module-products__pagination {
  display: none;
}

/* Viewed products: stretch to full page width (module wraps its own .container). */
.page-product .ps-viewedproduct .module-products.container {
  width: 100%;
  max-width: 100%;
}

/* Viewed products / You may also like: keep product names to a single line
   with ellipsis. The title is a flex child of __details (align-items:center)
   and would shrink-wrap to its nowrap content, so stretch it to the card width. */
.page-product .ps-viewedproduct .beautys-featured-product__title,
.page-product .ps-categoryproducts .beautys-featured-product__title {
  display: block;
  align-self: stretch;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 575px) {
  .page-product .module-products__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .page-product .module-products__viewport::-webkit-scrollbar {
    display: none;
  }

  .page-product .module-products__viewport > .beautys-product-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
    margin: 0;
  }

  .page-product .module-products__viewport > .beautys-product-list > .beautys-featured-product {
    flex: 0 0 calc(100vw - 72px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .page-product .module-products__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 26px;
    margin-top: 14px;
  }

  .page-product .module-products__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid #bdbdbd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  .page-product .module-products__dot.is-active {
    border-color: #eba2ab;
    background: #eba2ab;
  }
}

@media (max-width: 991px) {
  .page-product .ps-categoryproducts .section-title,
  .page-product .ps-viewedproduct .section-title {
    margin-bottom: 24px;
    font-size: 34px;
  }

  .page-product .ps-categoryproducts .section-title::after,
  .page-product .ps-viewedproduct .section-title::after {
    width: 220px;
    margin-top: 20px;
  }
}

@media (max-width: 575px) {
  .page-product .ps-categoryproducts .section-title,
  .page-product .ps-viewedproduct .section-title {
    margin-bottom: 24px;
    font-size: 22px;
  }
}

.page-product .blockreassurance--product svg path {
  fill: var(--bs-primary, #c34f67) !important;
}

.page-product .blockreassurance--product .reassurance__image {
  width: 35px;
  min-width: 35px;
  height: 35px;
}

.page-product .blockreassurance--product .reassurance__image svg {
  width: 35px;
  height: 35px;
}

.page-product .blockreassurance--accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  width: 100%;
  max-width: 600px;
  border: 0;
}

.page-product .reassurance-accordion {
  margin: 0;
  border: 0;
  background: transparent;
}

.page-product .reassurance-accordion summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  background: transparent;
  color: #292526;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.page-product .reassurance-accordion summary::-webkit-details-marker {
  display: none;
}

.page-product .reassurance-accordion summary:focus-visible {
  outline: 1px solid #e9a5ad;
  outline-offset: -1px;
}

.page-product .reassurance-accordion .reassurance__image {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin-right: 16px;
}

.page-product .reassurance-accordion .reassurance__image img,
.page-product .reassurance-accordion .reassurance__image svg {
  display: block;
  width: 28px;
  height: 28px;
}

.page-product .reassurance-accordion:nth-child(2) .reassurance__image img,
.page-product .reassurance-accordion:nth-child(2) .reassurance__image svg,
.page-product .reassurance-accordion:nth-child(3) .reassurance__image img,
.page-product .reassurance-accordion:nth-child(3) .reassurance__image svg {
  width: 28px;
  height: 28px;
}

.page-product .reassurance-accordion .reassurance__title {
  flex: 0 1 auto;
}

.page-product .reassurance-accordion .reassurance__chevron {
  flex: 0 0 auto;
  margin-left: 10px;
  color: #292526;
  font-size: 18px;
  transition: transform .2s ease;
}

.page-product .reassurance-accordion[open] .reassurance__chevron {
  transform: rotate(180deg);
}

.page-product .reassurance-accordion .reassurance__desc {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0 14px 44px;
  color: #666;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  .page-product .reassurance-accordion summary {
    min-height: 40px;
    padding: 0;
  }

  .page-product .reassurance-accordion .reassurance__desc {
    padding-right: 0;
    padding-left: 44px;
  }
}

/* Keep product details below the gallery and purchase panel as one full-width section. */
@media (min-width: 992px) {
  .page-product .product__bottom {
    display: block;
  }

  .page-product .product__bottom-left {
    width: 100%;
  }

  .page-product .product__bottom-right {
    display: none;
  }
}

.page-product .product__thumbnails-nav {
  display: none;
}

.page-product .product__thumbnails-icon--mobile {
  display: none;
}

/* Product information tabs, matching the Essentia3 presentation. */
.page-product .beautys-product-tabs {
  background: #fff;
}

.page-product .beautys-product-tabs__nav {
  display: flex;
  align-items: stretch;
  min-height: 66px;
  padding: 0 28px;
  border-bottom: 1px solid #dedede;
  gap: 22px;
}

.page-product .beautys-product-tabs__tab {
  position: relative;
  min-height: 66px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.page-product .beautys-product-tabs__tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
  content: '';
}

.page-product .beautys-product-tabs__tab.is-active {
  color: #e47167;
}

.page-product .beautys-product-tabs__tab.is-active::after {
  background: #e47167;
}

.page-product .beautys-product-tabs__tab:focus-visible {
  outline: 2px solid #e47167;
  outline-offset: -2px;
}

.page-product .beautys-product-tabs__content {
  padding: 30px 28px 32px;
}

.page-product .beautys-product-tabs__panel[hidden] {
  display: none;
}

.page-product .beautys-product-tabs__panel .product__description {
  color: #707070;
  font-size: 16px;
  line-height: 1.7;
}

.page-product .beautys-product-tabs__panel .js-product-details {
  display: block;
}

.page-product .beautys-product-tabs__panel .js-product-details .accordion-header {
  display: none;
}

.page-product .beautys-product-tabs__panel .js-product-details .accordion-collapse {
  display: block !important;
  height: auto !important;
}

.page-product .beautys-product-tabs__panel .js-product-details .accordion-body {
  padding: 0;
}

.page-product .beautys-product-tabs__panel .js-product-details .accordion-item {
  border: 0;
}

.page-product .beautys-product-tabs__extras {
  padding: 0 28px 28px;
}

@media (max-width: 767.98px) {
  .page-product .beautys-product-tabs__nav {
    min-height: 54px;
    padding: 0 12px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .page-product .beautys-product-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .page-product .beautys-product-tabs__tab {
    min-height: 54px;
    padding: 0 12px;
    flex: 0 0 auto;
    font-size: 15px;
  }

  .page-product .beautys-product-tabs__content {
    padding: 22px 16px 24px;
  }

  .page-product .beautys-product-tabs__extras {
    padding: 0 16px 20px;
  }
}

@media (min-width: 768px) {
  body.page-product:not(.page-product--quickview) .product__right > .product__name,
  body.page-product:not(.page-product--quickview) .product__right > .product__header-with-wishlist > .product__name {
    margin-bottom: 20px;
  }

  body.page-product:not(.page-product--quickview) .product__right > .cp-product-review-summary {
    margin: 0 0 25px;
  }

  body.page-product:not(.page-product--quickview) .product__right > .product__prices .product__prices-block {
    row-gap: 5px;
  }

  body.page-product:not(.page-product--quickview) .product__right > .product__prices .product__tax-infos {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  body.page-product:not(.page-product--quickview) .product__right > .product__name,
  body.page-product:not(.page-product--quickview) .product__right > .product__header-with-wishlist > .product__name {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.2;
  }

  body.page-product:not(.page-product--quickview) .product__right > .product__prices .product__prices-block {
    row-gap: 22px;
  }

  body.page-product:not(.page-product--quickview) .product__right > .product__prices .product__tax-infos {
    margin-top: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images > .product__thumbnails--vertical {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 22px 0 0;
    overflow: hidden;
    background: #fffafb;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav {
    display: grid;
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 24px;
    min-width: 24px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #3d3436;
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition: color .2s ease, opacity .2s ease;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav--previous {
    left: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav--next {
    right: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:hover:not(:disabled),
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:focus-visible:not(:disabled) {
    color: #d96678;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:disabled {
    cursor: default;
    opacity: .52;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-icon--desktop {
    display: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-icon--mobile {
    display: inline-block;
    font-size: 23px;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-viewport {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-viewport::-webkit-scrollbar {
    display: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-list {
    display: grid;
    grid-auto-columns: calc((100% - 36px) / 4);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 12px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-item,
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail,
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail-image {
    width: 100%;
    height: 100%;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-item {
    aspect-ratio: 6 / 7;
    min-width: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail-image {
    display: block;
    border-radius: 0;
    object-fit: cover;
    outline: 1px solid #e3dfe0 !important;
    outline-offset: -1px;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail.active .product__thumbnail-image,
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail:focus-visible .product__thumbnail-image {
    outline: 1px solid #e07a8b !important;
    outline-offset: -1px;
  }
}

@media (min-width: 992px) {
  body.page-product:not(.page-product--quickview) .product__left > .product__images {
    padding-left: 122px;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images > .product__thumbnails--vertical {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 104px;
    overflow: hidden;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav {
    display: grid;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    width: 100%;
    height: 32px;
    border: 0;
    background: #fff8f9;
    color: #3d3436;
    cursor: pointer;
    place-items: center;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav--previous {
    top: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav--next {
    bottom: 0;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:hover:not(:disabled),
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:focus-visible:not(:disabled) {
    background: #fbe8ec;
    color: #d96678;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-nav:disabled {
    cursor: default;
    opacity: 0;
    pointer-events: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-viewport::-webkit-scrollbar {
    display: none;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc((100% - 40px) / 6);
    gap: 8px;
    min-height: 100%;
    height: 100%;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnails-item,
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail,
  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail-image {
    width: 100%;
    height: 100%;
  }

  body.page-product:not(.page-product--quickview) .product__left > .product__images .product__thumbnail-image {
    object-fit: cover;
  }
}

.page-product .product__add-to-cart-button {
  width: 100%;
  height: 45px;
  min-height: 45px;
  border: 1px solid #d8d8d8;
  border-radius: 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-size .3s cubic-bezier(.5, .24, 0, 1), border-color .3s ease, color .3s ease;
}

.page-product .product__add-to-cart-button {
  background: #e07a8b;
  border-color: #e07a8b;
  color: #fff;
}

.page-product .product__add-to-cart-button:hover:not(:disabled),
.page-product .product__add-to-cart-button:focus-visible:not(:disabled) {
  background: #d96678;
  border-color: #d96678;
  color: #fff;
}

.page-product .product__add-to-cart-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* Keep the stock alert and Share row visually connected. */
.page-product:not(.page-product--quickview) .product__add-to-cart-container {
  margin-block-end: 1.5rem !important;
}

/* >=576px: quantity selector and Add to cart share one row (reference
   layout); Buy it now stays full-width in the buttons column below.
   Quickview keeps its own compact layout. */
@media (min-width: 576px) {
  body.page-product:not(.page-product--quickview) .product__actions-qty-add {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    max-width: none;
  }

  /* Stock alert keeps its own full-width row under qty + add to cart. */
  body.page-product:not(.page-product--quickview) .product__actions-qty-add > .cp-stock-alert-simple {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.page-product:not(.page-product--quickview) .product-actions__quantity.product__quantity {
    flex: 0 0 auto;
    width: auto;
  }

  body.page-product:not(.page-product--quickview) .product__action-buttons {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.page-product:not(.page-product--quickview) .product__primary-action-row .product__add-to-cart {
    flex: 0 1 300px;
    width: auto;
  }
}

@media (max-width: 575.98px) {
  body.page-product:not(.page-product--quickview) .product-variant__colors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  body.page-product:not(.page-product--quickview) .product-variant__color {
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    aspect-ratio: 1 / 1;
    flex: none;
  }

  body.page-product:not(.page-product--quickview) .product-variant__color .input-color__label {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .page-product:not(.page-product--quickview) .product__add-to-cart-button {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin-right: auto;
    margin-left: auto;
  }

  .page-product:not(.page-product--quickview) .product__quantity .quantity-button__group {
    height: 44px;
  }

  .page-product .product__primary-action-row {
    gap: 14px;
  }

  /* Button shrinks to leave room for the wishlist heart on the same row. */
  .page-product .product__primary-action-row .product__add-to-cart {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .page-product .product__primary-action-row .product__wishlist-action--dynamic {
    flex: 0 0 36px;
    width: 36px;
    height: 44px;
  }

  .page-product .product__primary-action-row .product__wishlist-action--dynamic .wishlist-button-add {
    width: 36px;
    min-width: 36px;
    height: 44px;
  }
}

/* Quick look mirrors the product sheet while keeping the gallery compact. */
.quickview__body.page-product--quickview {
  overflow-x: hidden;
}

.page-product--quickview .product__primary-action-row .product__add-to-cart {
  flex: 1 1 auto;
  width: auto;
}

.page-product--quickview .product__primary-action-row .product__wishlist-action--dynamic {
  display: flex;
  flex: 0 0 54px;
}

.page-product--quickview .product__right > .product__name {
  margin-bottom: 20px;
}

.page-product--quickview .product__right > .cp-product-review-summary {
  margin: 0 0 25px;
}

.page-product--quickview .product__right > .product__prices .product__prices-block {
  row-gap: 25px;
}

.page-product--quickview .product__right > .product__prices .product__tax-infos {
  margin-top: 0;
}

.page-product--quickview .product__thumbnails--vertical {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 22px 0 0;
  overflow: hidden;
  background: #fffafb;
}

.page-product--quickview .product__thumbnails-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.page-product--quickview .product__thumbnails-viewport::-webkit-scrollbar {
  display: none;
}

.page-product--quickview .product__thumbnails-list {
  display: grid;
  grid-auto-columns: calc((100% - 64px) / 5);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 16px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.page-product--quickview .product__thumbnails-item,
.page-product--quickview .product__thumbnail,
.page-product--quickview .product__thumbnail-image {
  width: 100%;
  height: 100%;
}

.page-product--quickview .product__thumbnails-item {
  aspect-ratio: 6 / 7;
  min-width: 0;
}

.page-product--quickview .product__thumbnail {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-product--quickview .product__thumbnail-image {
  display: block;
  border-radius: 0;
  object-fit: cover;
  outline: 1px solid #e3dfe0 !important;
  outline-offset: -1px;
}

.page-product--quickview .product__thumbnail.active .product__thumbnail-image,
.page-product--quickview .product__thumbnail:focus-visible .product__thumbnail-image {
  outline: 1px solid #e07a8b !important;
  outline-offset: -1px;
}

.page-product--quickview .product__thumbnails-nav {
  display: grid;
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 24px;
  min-width: 24px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #3d3436;
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
  transition: color .2s ease, opacity .2s ease;
}

.page-product--quickview .product__thumbnails-nav--previous {
  left: 0;
}

.page-product--quickview .product__thumbnails-nav--next {
  right: 0;
}

.page-product--quickview .product__thumbnails-nav:hover:not(:disabled),
.page-product--quickview .product__thumbnails-nav:focus-visible:not(:disabled) {
  color: #d96678;
}

.page-product--quickview .product__thumbnails-nav:disabled {
  cursor: default;
  opacity: .45;
}

.page-product--quickview .product__thumbnails-icon--desktop {
  display: none;
}

.page-product--quickview .product__thumbnails-icon--mobile {
  display: inline-block;
  font-size: 23px;
}

@media (max-width: 767.98px) {
  .page-product--quickview .product__thumbnails-list {
    grid-auto-columns: calc((100% - 36px) / 4);
    gap: 12px;
  }

  .page-product--quickview .product__right > .product__name {
    margin-bottom: 22px;
    font-size: 18px;
    line-height: 1.2;
  }

  .page-product--quickview .product__right > .cp-product-review-summary {
    margin-bottom: 22px;
  }

  .page-product--quickview .product__right > .product__prices .product__prices-block {
    row-gap: 22px;
  }
}

/* ------------------------------------------------------------------
 * Fix: LSCache ESI marker injects   for empty hook outputs
 * (e.g. ps_viewedproduct returns empty on displayProductAdditionalInfo).
 * The   (U+00A0, non-collapsible) becomes an anonymous flex item
 * in this flex-column container and inflates the gap between Share
 * and blockreassurance. font-size:0 collapses that anonymous item
 * without affecting visible children (which inherit 1rem below).
 * ------------------------------------------------------------------ */
.product__additional-info {
  font-size: 0 !important;
  gap: 0 !important;
}
.product__additional-info > * {
  font-size: 1rem;
}

/* ------------------------------------------------------------------
 * Tighten vertical spacing around the reassurance block:
 * - add-to-cart block  -> reassurance list  (was ~28px, now 10px)
 * - reassurance list   -> Share buttons row (was 32px, now 12px)
 * ------------------------------------------------------------------ */
.page-product:not(.page-product--quickview) .product__add-to-cart-container {
  margin-block-end: 20px !important;
}

.page-product .blockreassurance--accordion {
  margin-top: 0;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------
 * Desktop (>=1200px): unify the main rhythm gaps in the buy column
 * to 20px (review summary / countdown / prices / variants).
 * The reassurance (10px above) and Share (12px below) gaps are
 * intentionally kept tighter -- they were tuned separately.
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  .page-product .cp-countdown-simple {
    margin-top: 20px;
  }
  .page-product .product__prices {
    margin-block-end: 20px;
  }
  .page-product .product__variants {
    margin-block-end: 35px;
  }
}

/* ------------------------------------------------------------------
 * Keep countdown separate from the variants when the short description
 * is empty, matching the 25px variants-to-quantity spacing.
 * ------------------------------------------------------------------ */
.page-product .cp-countdown-simple {
  display: block;
  margin-bottom: 0;
}

body.page-product:not(.page-product--quickview) .product__right .cp-countdown-simple {
  margin-bottom: 25px;
}

/* ------------------------------------------------------------------
 * .product__description-short renders empty on most products but its
 * theme margin-block-end (1.25rem mobile / 2rem desktop) still occupies
 * space between the prices block and the variants block, making the
 * countdown->color gap inconsistent with color->qty. Zero it out.
 * ------------------------------------------------------------------ */
.page-product .product__description-short:empty {
  margin-block-end: 0 !important;
  margin-top: 0 !important;
}
.page-product .product__description-short:not(:empty) {
  margin-block-end: 25px !important;
  margin-top: 20px;
}

/* Review summary sits directly under the product title (moved out of the
   price row). The title row is the flex .product__header-with-wishlist;
   this block is its next sibling, so no extra positioning is needed.
   Spacing below matches the buy-column rhythm: 20px desktop, 12px mobile. */
.page-product .product__review-summary-under-title {
  margin-block-end: 20px;
}

.page-product .product__review-summary-under-title .gali-product-review-summary {
  margin: 0;
}

.page-product .gali-product-review-summary__read-group {
  gap: 8px;
  white-space: nowrap;
}

body.page-product .product__right .gali-product-review-summary__link {
  display: inline-flex;
  align-items: center;
  /* Match the visual gap between the stars and the rating number (28px:
     the stars box is 108px wide but its glyphs end ~8px earlier). */
  gap: 28px;
  margin: 0;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  body.page-product:not(.page-product--quickview) .product__right .product__header-with-wishlist > .product__name {
    margin-bottom: 8px;
  }

  body.page-product:not(.page-product--quickview) .product__right .product__price-reviews--mobile {
    width: 100%;
    margin: 8px 0 16px;
  }

  body.page-product:not(.page-product--quickview) .product__right .product__review-summary-under-title {
    margin-bottom: 12px;
  }

  body.page-product:not(.page-product--quickview) .product__right .product__prices-block {
    row-gap: 0 !important;
  }

  body.page-product:not(.page-product--quickview) .product__right .product__prices {
    margin-bottom: 12px;
  }

  body.page-product:not(.page-product--quickview) .product__right .cp-countdown-simple {
    margin-top: 12px;
  }
}

@media (min-width: 768px) {
  body.page-product:not(.page-product--quickview) .product__right .product__name {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
  }
}

body.page-product:not(.page-product--quickview) .product__right .product__price {
  font-size: 28px;
  font-weight: 700;
}

body.page-product:not(.page-product--quickview) .product__right .product__regular-price {
  font-size: 14px;
  font-weight: 400;
}

body.page-product:not(.page-product--quickview) .product__right .gali-product-review-summary__link,
body.page-product:not(.page-product--quickview) .product__right .cp-countdown-simple__label,
body.page-product:not(.page-product--quickview) .product__right .ps-sharebuttons__label {
  font-size: 14px;
  font-weight: 400;
}

body.page-product:not(.page-product--quickview) .product__right .product__add-to-cart-button {
  font-size: 16px;
  font-weight: 600;
}

body.page-product:not(.page-product--quickview) .product__right .cp-countdown-simple__item small {
  font-size: 12px;
  line-height: 14px;
}

body.page-product:not(.page-product--quickview) .product__right .cp-stock-alert-text-simple,
body.page-product:not(.page-product--quickview) .product__right .cp-stock-alert-text-simple span {
  font-size: 14px !important;
  font-weight: 400;
}

body.page-product:not(.page-product--quickview) .product__right .cp-stock-alert-number-simple {
  font-size: 14px !important;
  font-weight: 600;
}

body.page-product:not(.page-product--quickview) .product__right .reassurance__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

/* 2026-09-12 属性组间距：Size/Color 组之间 16px → 25px（覆盖 hummingbird theme.css 的 gap:1rem） */
.page-product .product__variants {
  gap: 25px;
}

/* 2026-09-14 alt 占位透明：图片未就绪时浏览器会以 alt 文字占位（图廊闪现标题的根源），
   置为透明后占位文字永不可见；已加载图片渲染不受影响，alt 仍在 DOM（SEO/可访问性不变） */
.page-product .js-product-carousel img,
.page-product .product__thumbnail-image,
.page-product--quickview .js-product-carousel img,
.page-product--quickview .product__thumbnail-image {
  color: transparent;
}