@keyframes cardActionAni {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.card {
  --tag-pc-gap: 8px;
  --tag-mobile-gap: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  z-index: 0;
}

.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card-wrapper .full-unstyled-link {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

.card-main {
  position: relative;
  flex: 1 0 0;
}

.card .card__inner--wrapper {
  background-color: rgba(var(--color-image-background));
  padding: var(--card-image-padding, 0px);
}

.card.collection-card-wrapper .card__inner .card__media {
  border-radius: calc(
    var(--collection-card-border-radius) -
      var(--collection-card-border-thickness)
  );
}

.card.collection-card-wrapper .card__inner.card__inner--round .card__media {
  border-radius: 50%;
}

.card.collection-card-wrapper.collection-card-style-card {
  background-color: rgba(var(--color-card-background));
}

.card.collection-card-wrapper.collection-card-style-card .card__inner--wrapper {
  background-color: transparent;
}

.card.collection-card-wrapper.collection-card-style-card
  .card__inner--wrapper
  .card__inner.card__inner--round {
  margin: 8px;
}

@media (max-width: 959px) {
  .card.collection-card-wrapper.collection-card-style-card
    .card__inner--wrapper
    .card__inner.card__inner--round {
    margin: 4px;
  }
}

.card.collection-card-wrapper.collection-card-style-card
  .card__inner--wrapper
  .card__inner:not(.card__inner--round)
  .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card.collection-card-wrapper.collection-card-style-card .card__content {
  padding: 8px;
  margin-top: 0;
}

@media (max-width: 959px) {
  .card.collection-card-wrapper.collection-card-style-card .card__content {
    padding-bottom: 4px;
  }
}

.card.collection-card-wrapper.collection-card-style-card
  .card__content.collection__item__name {
  color: rgba(var(--color-card-text));
}

.card.product-card-wrapper .card__inner--wrapper.card__visible {
  overflow: visible;
}

.card.product-card-wrapper .card__inner--wrapper .card__inner .card__media {
  border-radius: calc(
    var(--product-card-border-radius) - var(--product-card-border-thickness)
  );
}

.card.product-card-wrapper
  .card__inner--wrapper
  .card__inner.card__inner--round
  .card__media {
  border-radius: 50%;
}

.card.product-card-wrapper.product-card-style-card {
  background-color: rgba(var(--color-card-background));
}

.card.product-card-wrapper.product-card-style-card .card__inner--wrapper {
  background-color: transparent;
}

.card.product-card-wrapper.product-card-style-card
  .card__inner--wrapper
  .card__inner.card__inner--round {
  margin: 8px;
}

@media (max-width: 959px) {
  .card.product-card-wrapper.product-card-style-card
    .card__inner--wrapper
    .card__inner.card__inner--round {
    margin: 4px;
  }
}

.card.product-card-wrapper.product-card-style-card
  .card__inner--wrapper
  .card__inner:not(.card__inner--round)
  .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card.product-card-wrapper.product-card-style-card .card__content {
  padding: 0 4px;
}

@media (max-width: 959px) {
  .card.product-card-wrapper.product-card-style-card .card__content {
    padding: 0 8px;
  }
}

.card.product-card-wrapper.product-card-style-card
  .card__content
  .product__title {
  color: rgba(var(--color-card-text));
}

.card.product-card-wrapper.product-card-style-card .card__bottom-actions,
.card.product-card-wrapper.product-card-style-card

@media (max-width: 959px) {
  .card.product-card-wrapper.product-card-style-card .card__bottom-actions,
  .card.product-card-wrapper.product-card-style-card
    .card__bottom-actions--empty-placeholder {
    margin: 0 8px 8px 8px;
  }
}

.card .card__media {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
  background-color: rgb(var(--color-image-background));
}

.card .card__media > img {
  height: 100%;
  object-fit: var(--image-fill-type, cover);
  object-position: var(--image-object-position, center center);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity var(--duration-long) ease;
  transition-property: opacity, transform;
}

.card .card__media > .card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--image-fill-type, cover);
  object-position: var(--image-object-position, center center);
  display: block;
  pointer-events: none;
  background-color: rgb(var(--color-image-background));
}

.card .card__media > .placeholder {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .card__media.mobile--media--hover-effect > img + img,
.card .card__media.media--hover-effect > img + img {
  opacity: 0;
}

.card .card__badge:not(:empty) {
  z-index: 2;
  position: absolute;
  padding: 4px 8px;
  background-color: rgb(
    var(--card-badge-bg, var(--color-discount-tag-background))
  );
  color: rgb(var(--card-badge-text-color, var(--color-discount-tag-text)));
  border-radius: var(--badge-border-radius);
}

.card .card__badge:not(:empty).card__badge--mini {
  padding: 2px 4px;
}

.card .card__badge.sold-out-message {
  --card-badge-text-color: var(--color-page-background);
  --card-badge-bg: var(--color-text);
}

.card .card__badge.left_top {
  top: var(--tag-pc-gap);
  left: var(--tag-pc-gap);
}

.card .card__badge.left_bottom {
  bottom: var(--tag-pc-gap);
  left: var(--tag-pc-gap);
}

.card .card__badge.right_top {
  top: var(--tag-pc-gap);
  right: var(--tag-pc-gap);
}

.card .card__badge.right_bottom {
  bottom: var(--tag-pc-gap);
  right: var(--tag-pc-gap);
}

@media (max-width: 959px) {
  .card .card__badge.left_top {
    top: var(--tag-mobile-gap);
    left: var(--tag-mobile-gap);
  }
  .card .card__badge.left_bottom {
    bottom: var(--tag-mobile-gap);
    left: var(--tag-mobile-gap);
  }
  .card .card__badge.right_top {
    top: var(--tag-mobile-gap);
    right: var(--tag-mobile-gap);
  }
  .card .card__badge.right_bottom {
    bottom: var(--tag-mobile-gap);
    right: var(--tag-mobile-gap);
  }
}

.card .card__content {
  position: relative;
}

.card .card__content .product__title {
  margin: 0;
  margin-bottom: 12px;
  text-align: var(--product-card-content-align);
}

@media (max-width: 959px) {
  .card .card__content {
    margin-top: 10px;
  }
  .card .card__content .product__title {
    margin-bottom: 6px;
  }
}

.card .card__content .card__content-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card .card__content .card__content-bottom .price__sale {
  justify-content: unset;
}

@media (min-width: 960px) {
  .card .card__content .card__content-bottom {
    justify-content: center;
  }
}

.card .card__content .card__content-bottom-center {
  justify-content: center;
}

.card .card__content .card__content-bottom-left {
  justify-content: flex-start;
}
.card .card__content .card__content-bottom-center {
  justify-content: center;
}

/* 2026-08-05: product card subtitle (商品摘要).
   Sits between the title and the price row. Inherits
   the align from the .card__content wrapper. */
.product-card-subtitle {
  font-size: 13px;
  line-height: 18px;
  color: rgba(var(--color-text), 0.7);
  margin: 2px 0 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 2026-08-05: product card title and price row typography.
   text-align is driven by the theme setting
   product_card_content_align via the CSS variable
   --product-card-content-align (defined in
   snippets/theme-css-var.html on :root). The old
   theme version had the same var-driven text-align
   but later someone added hardcoded "text-align:
   center" rules here that overrode the var, so the
   "left" setting became a no-op. We restore the
   var-driven approach and remove the hardcoded
   center so the toggle works again for the title,
   the subtitle and the rate-star bottom row. */
.card .card__content .product__title {
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  margin: 2px 0 0 0;
  text-align: var(--product-card-content-align);
}
.card .card__content .product-card-subtitle {
  text-align: var(--product-card-content-align);
}
.card .card__content .card__content-bottom {
  justify-content: var(--product-card-content-align);
  text-align: var(--product-card-content-align);
  margin-top: 2px;
}

.card .card__content .card__content-bottom .price,
.card .card__content .card__content-bottom .price .price__sale,
.card .card__content .card__content-bottom .price .price__regular {
  line-height: 18px;
}

/* Keep the original price first and the sale price second on one
   row in product cards. The order is applied with flex order so the
   shared price snippet can keep its original DOM structure. */
.card .card__content .card__content-bottom .price .price__sale {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  column-gap: 6px;
}

.card .card__content .card__content-bottom .price .price__sale .price-position-origin {
  order: 1;
}

.card .card__content .card__content-bottom .price .price__sale .price-position-sale {
  order: 2;
}

.card .card__content .card__content-bottom .price .price__sale .price-position-origin,
.card .card__content .card__content-bottom .price .price__sale .price-position-sale {
  white-space: nowrap;
}

.card .card__content .card__content-bottom .price .price__sale .price-item--sale {
  font-size: 15px;
  font-weight: bold;
}

/* Center rate-star plugin (SHOPLINE plugin) */
.product-card-rate-star,
.card__button.product-card-rate-star {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
.product-card-rate-star .product-plugin-comment-rate-star,
.product-card-rate-star [class*="product-plugin-comment-rate-star"],
.card__button .product-plugin-comment-rate-star,
.card__button [class*="product-plugin-comment-rate-star"] {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}
.product-card-rate-star .product-plugin-comment-rate-star *,
.product-card-rate-star [class*="product-plugin-comment-rate-star"] *,
.card__button [data-plugin-product-item-a] {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  float: none !important;
}

/* 2026-08-05: the SHOPLINE rate-star plugin above sets
   text-align: center !important on .product-card-rate-star
   (which the bottom row also carries). Our var-driven
   rule (L363-367) has no !important and is loaded BEFORE
   the plugin, so the plugin wins. We mirror the var with
   !important here, AFTER the plugin rules, so the
   merchant's left / center choice is honoured even with
   the rate-star plugin active. We also override
   justify-content because the bottom row is a flex
   container and the var-driven value (left/center)
   controls the cross-axis flow of the price + star
   children — text-align alone is not enough. */
.card__content-bottom.product-card-rate-star {
  text-align: var(--product-card-content-align) !important;
  justify-content: var(--product-card-content-align) !important;
}

/* 2026-08-05: the rate-star plugin ALSO sets
   justify-content: center !important + text-align: center
   !important on the inner .product-plugin-comment-rate-star
   element (L402-417 above) so the actual star glyphs
   cluster in the middle. Override that too — same
   var + !important pattern, scoped to the inner
   element. The plugin's margin: 0 auto (L410) auto-
   centres an inline-flex element inside its block
   parent; that still works for "center" so we leave
   it alone. For "left" the var resolves to "left"
   which is a valid text-align / justify-content
   value, so the stars and "(N)" label sit at the
   left of the .product-card-rate-star row. */
.product-card-rate-star .product-plugin-comment-rate-star,
.product-card-rate-star [class*="product-plugin-comment-rate-star"] {
  justify-content: var(--product-card-content-align) !important;
  text-align: var(--product-card-content-align) !important;
}

/* 2026-07-01: centered column layout — title 13px, price 14px,
   discount 13px, strikethrough 13px.
   2026-08-05: removed the hardcoded "text-align: center" on
   the wrapper. The old theme drove the column text-align
   through --product-card-content-align on the title /
   subtitle / bottom-row rules (see L288, L353+). A wrapper
   level text-align would force every descendant to center
   (price, etc.) and override the per-element var rules.
   Children that need centering now have their own
   text-align: var(--product-card-content-align). */

.card .card__content .product__title {
  font-size: 13px;
}

.card .card__content .card__content-bottom .price .price__sale .price-item--regular {
  font-size: 15px;
  font-weight: bold;
  margin-right: 0;
}

.card .card__content .card__content-bottom .price .price__sale .price-item--sale {
  margin-right: 0;
}

.card .card__content .card__content-bottom .price .price__regular .price-item--regular {
  font-size: 15px;
  font-weight: bold;
}

/* Discount text: 14px, not bold, inline */
.price .price__sale .price-item--discount {
  font-size: 14px;
  font-weight: normal;
  color: rgb(var(--color-sale));
}

/* 2026-07-01: price + discount (14px sale price, 13px discount) */
.card .card__content .price .price__sale .price-item--sale {
  font-size: 14px;
}
.card .card__content .price .price__sale .price-item--discount {
  font-size: 13px;
}
.card .card__content .price .price__sale .price-item--regular {
  font-size: 13px;
}
/* 2026-08-05: only stack + center on the "center" content-align
   case (same reason as the .price__sale rule above). For "left"
   align, leave the price column at flex-start. The fallback
   `, center` in the var() preserves the original visual when
   the var is somehow unset. */
.card .card__content-bottom .price {
  display: flex;
  flex-direction: column;
  align-items: var(--product-card-content-align, center);
}

/* Center elements in plugin-color-board high-layer */
.plugin-color-board.high-layer {
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 0 0 8px;
}

.card .card__button {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  bottom: calc(100% + 20px);
  white-space: nowrap;
  overflow: hidden;
  padding: 20px;
  border-bottom-left-radius: var(--product-card-border-radius);
  border-bottom-right-radius: var(--product-card-border-radius);
}

.card .card__button.is-expanded {
  padding: 0;
}

.card .card__button.is-expanded .card__button-inner {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
}

.card .card__button .card__button-inner {
  width: 100%;
  display: block;
}

.card .card__button .card__button-inner {
  width: 100%;
  transform: translateY(100%);
  opacity: 0;
  transition: color var(--duration-long) ease,
    transform var(--duration-default) ease, opacity var(--duration-default) ease;
  will-change: transform;
}

.card .quick-add {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
}

@media (max-width: 959px) {
  .card .quick-add {
    padding: 10px;
  }
}

.card .quick-add.quick-add--tiled {
  position: unset;
  width: 32px;
  height: 24px;
}

@media (max-width: 959px) {
  .card .quick-add.quick-add--tiled {
    padding: 0 4px;
  }
}

.card .quick-add.quick-add--tiled .quick-add-icon__opener {
  border: none;
  width: 24px;
  height: 24px;
}

.card .quick-add.quick-add-button {
  position: unset;
  padding: 0;
}

.card:hover .card__center-actions {
  animation: cardActionAni 0.4s ease both;
}

.card .card__center-actions {
  --padding-inline: 20px;
  display: block;
  position: absolute;
  top: 50%;
  left: var(--padding-inline);
  width: calc(100% - 2 * var(--padding-inline));
  z-index: 2;
  opacity: 0;
}

.card .card__bottom-actions > * {
  display: block;
  margin-top: 10px;
}

.card .quick-add-icon__opener {
  border-radius: 16px;
  width: 32px;
  height: 32px;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-page-background));
  border: 1px solid rgba(var(--color-text), 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.card .quick-add-icon__opener i {
  line-height: 0;
}

.card .quick-add-icon__opener .icon-zoom {
  width: 18px;
  height: 18px;
}

.card .quick-add-icon__opener.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.card .quick-add-icon__opener.loading > .loading-hidden,
.card .color-swatch-radio__remain.loading > .loading-hidden {
  display: none;
}

@media (min-width: 960px) {
  .card__media.media--hover-effect:hover > img:first-child:not(:only-child) {
    opacity: 0;
  }
  .card__media.media--hover-effect:hover > img + img {
    opacity: 1;
    transform: scale(1.03);
  }

  .hover-effect-container .hover-effect-target {
    --duration-long: 400ms;
    transition: transform var(--duration-long) ease;
  }

  .hover-effect-container:hover .hover-effect-target {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (max-width: 959px) {
  .card__media.mobile--media--hover-effect:hover
    > img:first-child:not(:only-child) {
    opacity: 0;
  }
  .card__media.mobile--media--hover-effect:hover > img + img {
    opacity: 1;
    transform: scale(1.03);
  }
}

@media (min-width: 960px) {
  .card__button {
    z-index: 2;
  }
  .card:hover .card__button .card__button-inner {
    opacity: 1;
    transform: translateY(0);
  }
}

.display-1-row,
.display-2-rows {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  padding-right: 4px;
  -webkit-box-orient: vertical;
}

.display-1-row {
  -webkit-line-clamp: 1;
}

.display-2-rows {
  -webkit-line-clamp: 2;
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */