.card {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.card + .card-information {
  margin-top: 1.3rem;
}

@media screen and (min-width: 750px) {
  .card + .card-information {
    margin-top: 1.7rem;
  }
}

.card.card--soft {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgb(var(--color-foreground));
}

.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform var(--duration-short) ease;
  overflow: hidden;
}

.card .h1 .icon-arrow,
.card .h2 .icon-arrow {
  padding-bottom: 0.3rem;
  padding-top: 0.3rem;
}

.card--media {
  display: block;
  text-decoration: none;
}

.card--text-only {
  display: flex;
  justify-content: center;
}

.card--text-only::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.card--product {
  position: relative;
}

.product-card-wrapper{
  border-radius: 1.2rem;
}

.product-card-wrapper .card--product .media > img{
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  object-fit: contain;
  border-radius: 8px;
}

.product-card-wrapper .card-information{
  margin-top: 0;
  padding: 0 1rem 1rem;
}

.card--stretch {
  height: 100%;
}

.card--outline:not(.card--soft) {
  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.card--light-border {
  border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.card--light-border:hover {
  border: 0.1rem solid rgba(var(--color-foreground), 0.3);
  box-shadow: none;
}

.card__text-spacing {
  padding: 3rem;
}

.card-colored.color-background-1 {
  background-color: rgba(var(--color-foreground), 0.04);
}

.card--media .card__text-spacing {
  padding: 2rem;
}

@media screen and (min-width: 750px) {
  .card--media .card__text-spacing {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .product-card-wrapper .card--product .media > img{
    top: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
  }
  
  .product-card-wrapper .card-information{
    margin-top: 0;
    padding: 0 2rem 2rem;
  }

  .badge.addToClassList:not(.transparent){
    display: none;
  }

  .product-card-wrapper:hover .badge.addToClassList{
    display: flex;
  }
}

.card-information > * + * {
  margin-top: 0.5rem;
}

.card--text-only .card__inner {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  width: 100%;
}

.card__content {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.card__content > * {
  margin: 0;
}

.card--text-only .card__content {
  grid-row: 2;
  justify-self: flex-start;
  margin-bottom: 6rem;
  margin-top: 5rem;
}

.card--text-only .card__badge {
  align-self: flex-end;
  grid-row: 3;
}

.card--search .card__badge > *,
.card--text-only .card__badge > * {
  margin: 0 1.2rem 1.2rem;
}

.card--search .card__badge,
.card--text-only .card__badge {
  position: initial;
}

.card--text-only .card__content + .card__badge {
  margin-top: -5rem;
}

.media + .card__content {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .card--text-only .card__content {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

  .card--text-only .card__content + .card__badge {
    margin-top: -7rem;
  }
}

.card__text-spacing > * {
  margin: 0;
}

.card__text-spacing > *:not(.overlay-card) + * {
  margin-top: 1.5rem;
}

.card__text {
  margin: 0;
  word-break: break-word;
}

.card-information__text {
  font-weight: bold;
  display: block;
  padding-right: 1.2rem;
}

.card-information__wrapper {
  width: 100%;
}

.card-information__wrapper > * {
  line-height: 1.4;
  color: rgb(var(--color-foreground));
}

.card-information__wrapper > .price {
  color: rgb(var(--color-foreground));
}

.card-information__wrapper > .rating {
  margin-top: 0.4rem;
}

.card-information__wrapper
  > *:not(.visually-hidden:first-child)
  + *:not(.rating) {
  margin-top: 0.7rem;
}

.card-information__wrapper .caption {
  letter-spacing: 0.07rem;
}

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

.card-wrapper:focus-within .card {
  box-shadow: none;
}

.card__media-spacer {
  padding: 2rem 2rem 0;
}

@media screen and (min-width: 750px) {
  .card__media-spacer {
    padding: 3rem 3rem 0;
  }
}

.card__media-full-spacer {
  padding: 2rem;
}

.card-article-info {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.card__badge {
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  left: 1rem;
  position: absolute;
  z-index: 1;
}

.card__badge.card__badge-bottom-right {
  left: initial;
  right: 1rem;
}

.card__badge.card__badge-top-right {
  left: initial;
  bottom: initial;
  top: 0;
  right: 1rem;
}

.card__badge.card__badge-top-left {
  left: 1em;
  bottom: initial;
  top: 0;
}

.card__badge.card__badge-top-right.card__badge-float-edge {
  right: 0;
  margin: -0.6em;
}

.card__badge.card__badge-top-left.card__badge-float-edge {
  left: 0;
  margin: -0.6em;
}

.card__badge > .badge--bottom-right,
.card__badge .loading-overlay {
  margin: 0;
}

.badge.addToClassList .icon{
  width: 1.2em;
  height: 1.2em;
}

.overlay-card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: transparent;
  transition: background-color var(--duration-long) ease;
}

.card:hover .card-colored .overlay-card {
  background-color: rgba(var(--color-card-hover), 0.06);
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }

  .card-wrapper:hover .card-information__text {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .card--search img {
    transition: transform var(--duration-default) ease;
  }

  .card-wrapper:hover .card--search img {
    transform: scale(1.05);
  }

  .card-wrapper:hover .card__text {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .card-wrapper:hover .card--soft {
    background-color: rgba(var(--color-card-hover), 0.06);
    transition: background-color var(--duration-long) ease;
  }

  .card__badge.card__badge-top-right.card__badge-float-edge {
    margin: -1em;
  }

  .card__badge.card__badge-top-left.card__badge-float-edge {
    margin: -1em;
  }

}
/* VALIS 商品列表色票基本樣式 */
.valis-color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.valis-color-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  border-radius: 2px;
  background: #eeeeee;
}
/* =========================================
   VALIS 色票對應表
   直接取代原本舊的顏色 mapping 即可
========================================= */

/* 黑白灰 */
.valis-color-swatch[data-color="黑"],
.valis-color-swatch[data-color="black"] {
  background: #111111;
}

.valis-color-swatch[data-color="炭黑"] {
  background: #1c1a1a;
}

.valis-color-swatch[data-color="深灰"] {
  background: #5c5c5c;
}

.valis-color-swatch[data-color="霧灰"] {
  background: #8b8b8b;
}

.valis-color-swatch[data-color="銀灰"] {
  background: #b6b6b6;
}

.valis-color-swatch[data-color="花灰"],
.valis-color-swatch[data-color="花灰色"] {
  background: #A7A19B;
}

.valis-color-swatch[data-color="淺灰"], {
  background: #dddddd;
}

.valis-color-swatch[data-color="灰"], {
  background: #9b9b9b;
}

.valis-color-swatch[data-color="黑棕"],
.valis-color-swatch[data-color="黑咖"],
.valis-color-swatch[data-color="黑褐"] {
  background: #2a201b;
}

.valis-color-swatch[data-color="泥灰"] {
  background: #8d8478;
}

.valis-color-swatch[data-color="白"],
.valis-color-swatch[data-color="white"] {
  background: #ffffff;
}

.valis-color-swatch[data-color="米白"] {
  background: #f7f2e8;
}

.valis-color-swatch[data-color="奶白"] {
  background: #f8f5ee;
}

.valis-color-swatch[data-color="白杏"] {
  background: #f5eadb;
}

.valis-color-swatch[data-color="白灰"] {
  background: #ececeb;
}

/* 米杏膚 */
.valis-color-swatch[data-color="米"],
.valis-color-swatch[data-color="beige"] {
  background: #e8dfd2;
}

.valis-color-swatch[data-color="杏"] {
  background: #e8c9a8;
}

.valis-color-swatch[data-color="燕麥"] {
  background: #d9ccb8;
}

.valis-color-swatch[data-color="膚"],
.valis-color-swatch[data-color="膚色"],
.valis-color-swatch[data-color="nude"] {
  background: #e7c2a7;
}

.valis-color-swatch[data-color="淺膚"],
.valis-color-swatch[data-color="淺膚色"] {
  background: #EBCBB7;
}

.valis-color-swatch[data-color="深膚"],
.valis-color-swatch[data-color="深膚色"] {
  background: #C99273;
}

.valis-color-swatch[data-color="裸色"] {
  background: #ddb79e;
}

.valis-color-swatch[data-color="膚咖"] {
  background: #c79e84;
}

.valis-color-swatch[data-color="膚杏"],
.valis-color-swatch[data-color="杏膚"] {
  background: #E3BE9F;
}

.valis-color-swatch[data-color="膚棕"] {
  background: #b98d72;
}

.valis-color-swatch[data-color="膚粉"],
.valis-color-swatch[data-color="粉膚"] {
  background: #e7b6b2;
}

/* 香草 / 米黃 */
.valis-color-swatch[data-color="香草"],
.valis-color-swatch[data-color="香草色"],
.valis-color-swatch[data-color="米黃"] {
  background: #E8D8A8;
}

/* 太妃色 / 太妃糖 */
.valis-color-swatch[data-color="太妃色"],
.valis-color-swatch[data-color="太妃糖"] {
  background: #B9855C;
}

/* 沙色 */
.valis-color-swatch[data-color="沙色"] {
  background: #CBB89A;
}

/* 咖啡棕卡其 */
.valis-color-swatch[data-color="咖啡"],
.valis-color-swatch[data-color="咖"] {
  background: #6b4a34;
}

.valis-color-swatch[data-color="深咖"],
.valis-color-swatch[data-color="深咖啡"] {
  background: #5a3b2e;
}

.valis-color-swatch[data-color="淺咖"],
.valis-color-swatch[data-color="淺咖啡"] {
  background: #b98f74;
}

.valis-color-swatch[data-color="深棕"] {
  background: #4b2f22;
}

.valis-color-swatch[data-color="淺棕"] {
  background: #b98b68;
}

.valis-color-swatch[data-color="奶茶"] {
  background: #c9ab91;
}

.valis-color-swatch[data-color="焦糖"] {
  background: #b76b36;
}

.valis-color-swatch[data-color="卡其"],
.valis-color-swatch[data-color="卡"] {
  background: #b89b72;
}

.valis-color-swatch[data-color="奶咖"] {
  background: #b99174;
}

.valis-color-swatch[data-color="棕"],
.valis-color-swatch[data-color="brown"] {
  background: #8a5a3b;
}

.valis-color-swatch[data-color="奶杏"] {
  background: #ecd3ba;
}

.valis-color-swatch[data-color="可可"] {
  background: #7a5640;
}

.valis-color-swatch[data-color="咖灰"] {
  background: #8b7b71;
}

.valis-color-swatch[data-color="米黃"] {
  background: #e7d69b;
}

.valis-color-swatch[data-color="裸杏"] {
  background: #e5c3a6;
}

.valis-color-swatch[data-color="乳杏"] {
  background: #f0d5bc;
}

.valis-color-swatch[data-color="杏咖"] {
  background: #c7a187;
}

/* 紅粉色系 */
.valis-color-swatch[data-color="紅"],
.valis-color-swatch[data-color="正紅"],
.valis-color-swatch[data-color="大紅"] {
  background: #d93a42;
}

.valis-color-swatch[data-color="酒紅"] {
  background: #7d2434;
}

.valis-color-swatch[data-color="深紅"] {
  background: #8f2f36;
}

.valis-color-swatch[data-color="磚紅"] {
  background: #a14f43;
}

.valis-color-swatch[data-color="西瓜紅"] {
  background: #ef5c64;
}

.valis-color-swatch[data-color="桃紅"] {
  background: #e84b7f;
}

.valis-color-swatch[data-color="玫紅"],
.valis-color-swatch[data-color="玫紅色"] {
  background: #C63D74;
}

.valis-color-swatch[data-color="櫻花粉"] {
  background: #f4c7d4;
}

.valis-color-swatch[data-color="珊瑚粉"] {
  background: #f29c8f;
}

.valis-color-swatch[data-color="藕粉"] {
  background: #d7a7aa;
}

.valis-color-swatch[data-color="螢光粉"] {
  background: #ff4fa3;
}

.valis-color-swatch[data-color="豆沙"],
.valis-color-swatch[data-color="豆沙粉"],
.valis-color-swatch[data-color="豆沙紅"] {
  background: #c58d8b;
}

.valis-color-swatch[data-color="橘粉"],
.valis-color-swatch[data-color="粉橘"] {
  background: #f4ad93;
}

.valis-color-swatch[data-color="紫紅"] {
  background: #b1456f;
}

.valis-color-swatch[data-color="深紫紅"] {
  background: #7A2F4F;
}

.valis-color-swatch[data-color="蜜桃粉"] {
  background: #f7b7a6;
}

.valis-color-swatch[data-color="赤紅"] {
  background: #b92d2b;
}

.valis-color-swatch[data-color="芭比粉"] {
  background: #ff71b8;
}

.valis-color-swatch[data-color="洋紅"] {
  background: #d81b60;
}

.valis-color-swatch[data-color="桃粉"],
.valis-color-swatch[data-color="桃粉色"] {
  background: #EFA3B5;
}

.valis-color-swatch[data-color="粉紫"],
.valis-color-swatch[data-color="粉紫色"] {
  background: #C8A4D6;
}

.valis-color-swatch[data-color="雅粉"] {
  background: #e8b9c2;
}

.valis-color-swatch[data-color="深粉"] {
  background: #d86e8e;
}

.valis-color-swatch[data-color="玫瑰粉"],
.valis-color-swatch[data-color="玫瑰粉色"] {
  background: #D89AA5;
}

.valis-color-swatch[data-color="淺粉"],
.valis-color-swatch[data-color="粉"],
.valis-color-swatch[data-color="粉紅"] {
  background: #e7bfc3;
}

/* 藍色系 */
.valis-color-swatch[data-color="淺藍"] {
  background: #bcd6ee;
}

.valis-color-swatch[data-color="天空藍"] {
  background: #8fc8f2;
}

.valis-color-swatch[data-color="牛仔藍"] {
  background: #5f7fa3;
}

.valis-color-swatch[data-color="藏青"] {
  background: #24364f;
}

.valis-color-swatch[data-color="寶藍"] {
  background: #295cc5;
}

.valis-color-swatch[data-color="湖水藍"],
.valis-color-swatch[data-color="湖水藍色"] {
  background: #35B7C9;
}

.valis-color-swatch[data-color="霧藍"] {
  background: #9fb5c8;
}

.valis-color-swatch[data-color="暗藍"],
.valis-color-swatch[data-color="暗藍色"] {
  background: #314A63;
}

.valis-color-swatch[data-color="灰青"],
.valis-color-swatch[data-color="灰青色"] {
  background: #6F8E8B;
}

.valis-color-swatch[data-color="灰藍"],
.valis-color-swatch[data-color="藍灰"] {
  background: #7b93a8;
}

.valis-color-swatch[data-color="水藍"] {
  background: #8ed8e8;
}

.valis-color-swatch[data-color="海軍藍"] {
  background: #1f3552;
}

.valis-color-swatch[data-color="湖藍"] {
  background: #5fb9c9;
}

.valis-color-swatch[data-color="海藍"] {
  background: #3e84a8;
}

.valis-color-swatch[data-color="皇家藍"] {
  background: #4169e1;
}

.valis-color-swatch[data-color="艷藍"] {
  background: #006dff;
}

.valis-color-swatch[data-color="天藍"],
.valis-color-swatch[data-color="天藍色"] {
  background: #87BEE6;
}

.valis-color-swatch[data-color="黛藍"] {
  background: #42506a;
}

.valis-color-swatch[data-color="孔雀藍"] {
  background: #1e7f88;
}

.valis-color-swatch[data-color="淡青"] {
  background: #a7d5d8;
}

.valis-color-swatch[data-color="深青"] {
  background: #2d6f73;
}

.valis-color-swatch[data-color="藍"],
.valis-color-swatch[data-color="blue"] {
  background: #4f7db8;
}

.valis-color-swatch[data-color="深藍"] {
  background: #264d77;
}

.valis-color-swatch[data-color="螢光藍"],
.valis-color-swatch[data-color="螢光藍色"] {
  background: #36B8FF;
}

/* 綠色系 */
.valis-color-swatch[data-color="淺綠"] {
  background: #bdd4ad;
}

.valis-color-swatch[data-color="薄荷綠"] {
  background: #B9DBC9;
}

.valis-color-swatch[data-color="冰綠"],
.valis-color-swatch[data-color="水綠"] {
  background: #A8DAD5;
}

.valis-color-swatch[data-color="軍綠"] {
  background: #78866b;
}

.valis-color-swatch[data-color="墨綠"] {
  background: #355244;
}

.valis-color-swatch[data-color="孔雀綠"],
.valis-color-swatch[data-color="藍綠"] {
  background: #284B60;
}

.valis-color-swatch[data-color="橄欖綠"] {
  background: #7d8450;
}

.valis-color-swatch[data-color="螢光綠"] {
  background: #8ef030;
}

.valis-color-swatch[data-color="灰綠"] {
  background: #8b9d84;
}

.valis-color-swatch[data-color="果綠"] {
  background: #8acb5a;
}

.valis-color-swatch[data-color="抹茶"],
.valis-color-swatch[data-color="抹茶綠"] {
  background: #8aa56a;
}

.valis-color-swatch[data-color="聖誕綠"] {
  background: #0f7a3b;
}

.valis-color-swatch[data-color="亮綠"] {
  background: #5dc15d;
}

.valis-color-swatch[data-color="草綠"] {
  background: #6faa4c;
}

.valis-color-swatch[data-color="青綠"],
.valis-color-swatch[data-color="青綠色"] {
  background: #3F8F84;
}

.valis-color-swatch[data-color="青檸綠"] {
  background: #b4d83c;
}

.valis-color-swatch[data-color="淡綠"] {
  background: #cfe3b8;
}

.valis-color-swatch[data-color="赤綠"] {
  background: #6b8b5e;
}

.valis-color-swatch[data-color="綠"],
.valis-color-swatch[data-color="green"] {
  background: #6e9b72;
}

/* 紫／黃／橘／金銀 */
.valis-color-swatch[data-color="紫"],
.valis-color-swatch[data-color="purple"] {
  background: #8d6bb8;
}

.valis-color-swatch[data-color="深紫"] {
  background: #5b3b72;
}

.valis-color-swatch[data-color="暗紫"] {
  background: #6a5873;
}

.valis-color-swatch[data-color="丁香紫"] {
  background: #c6b3df;
}

.valis-color-swatch[data-color="淺紫"] {
  background: #c9b4e4;
}

.valis-color-swatch[data-color="藕紫"] {
  background: #A88F9F;
}

.valis-color-swatch[data-color="芋紫"] {
  background: #b89ac8;
}

.valis-color-swatch[data-color="灰紫"],
.valis-color-swatch[data-color="紫灰"] {
  background: #9a8ea4;
}

.valis-color-swatch[data-color="葡萄紫"] {
  background: #6f4b8b;
}

.valis-color-swatch[data-color="煙紫"] {
  background: #9b8ca3;
}

.valis-color-swatch[data-color="鵝黃"] {
  background: #f3df7b;
}

.valis-color-swatch[data-color="螢光黃"],
.valis-color-swatch[data-color="螢光黃色"] {
  background: #EFFF3A;
}

.valis-color-swatch[data-color="黃"],
.valis-color-swatch[data-color="yellow"] {
  background: #e7c94c;
}

.valis-color-swatch[data-color="淺黃"],
.valis-color-swatch[data-color="淺黃色"] {
  background: #F3E5A6;
}

.valis-color-swatch[data-color="芥黃"] {
  background: #c9a238;
}

.valis-color-swatch[data-color="檸檬黃"],
.valis-color-swatch[data-color="檸檬黃色"] {
  background: #F4E64A;
}

.valis-color-swatch[data-color="芒果黃"],
.valis-color-swatch[data-color="芒果黃色"] {
  background: #F2B94B;
}

.valis-color-swatch[data-color="金黃"],
.valis-color-swatch[data-color="金黃色"] {
  background: #D9A321;
}

.valis-color-swatch[data-color="蜂蜜黃"],
.valis-color-swatch[data-color="蜂蜜黃色"] {
  background: #D8A94E;
}

.valis-color-swatch[data-color="橘黃"] {
  background: #f2b447;
}

.valis-color-swatch[data-color="橘"],
.valis-color-swatch[data-color="orange"] {
  background: #f28c38;
}

.valis-color-swatch[data-color="橘紅"],
.valis-color-swatch[data-color="橘紅色"] {
  background: #E85A3F;
}

.valis-color-swatch[data-color="螢光橘"],
.valis-color-swatch[data-color="螢光橘色"] {
  background: #FF6A00;
}

.valis-color-swatch[data-color="南瓜"] {
  background: #d9782d;
}

.valis-color-swatch[data-color="金"],
.valis-color-swatch[data-color="gold"] {
  background: linear-gradient(135deg, #c89f2d 0%, #f3d77a 45%, #b8891d 100%);
}

.valis-color-swatch[data-color="銀"],
.valis-color-swatch[data-color="silver"] {
  background: linear-gradient(135deg, #b7b7b7 0%, #f0f0f0 45%, #9b9b9b 100%);
}

/* 圖案 */
/* ===== VALIS 精品豹紋系列 ===== */

/* 原始豹紋 */
.valis-color-swatch[data-color="豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #2a1b14 0 12%, #7a5438 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #241711 0 10%, #8c6243 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #2b1b13 0 11%, #6f4a34 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #22150f 0 9%, #8b5f3d 10% 16%, transparent 17%),
    radial-gradient(ellipse at 12% 78%, #2b1b13 0 8%, #7b5539 9% 14%, transparent 15%),
    #c6a173;
  background-size: 22px 22px;
}

/* 白豹紋 / 白色豹紋 / 雪豹 */
.valis-color-swatch[data-color="白豹紋"],
.valis-color-swatch[data-color="白色豹紋"],
.valis-color-swatch[data-color="雪豹"] {
  background-color: #f7f5f2;
  background-image:
    radial-gradient(ellipse 6px 4px at 18% 22%, rgba(45, 40, 38, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 42% 30%, rgba(95, 88, 84, 0.9) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 72% 24%, rgba(55, 50, 48, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 30% 62%, rgba(120, 112, 108, 0.85) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 62% 68%, rgba(50, 45, 42, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 82% 58%, rgba(110, 102, 98, 0.85) 0 55%, transparent 56%);
  background-size: 22px 22px;
  background-repeat: repeat;
}

/* 灰豹紋 / 灰色豹紋 */
.valis-color-swatch[data-color="灰豹紋"],
.valis-color-swatch[data-color="灰色豹紋"] {
  background-color: #b7b2ae;
  background-image:
    radial-gradient(ellipse 6px 4px at 18% 22%, rgba(42, 39, 38, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 42% 30%, rgba(80, 75, 73, 0.9) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 72% 24%, rgba(50, 46, 45, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 30% 62%, rgba(95, 90, 88, 0.85) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 62% 68%, rgba(45, 42, 40, 0.95) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 82% 58%, rgba(88, 83, 81, 0.85) 0 55%, transparent 56%);
  background-size: 22px 22px;
  background-repeat: repeat;
}

/* 粉豹紋 */
.valis-color-swatch[data-color="粉豹紋"],
.valis-color-swatch[data-color="粉色豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #3a2520 0 12%, #9a665d 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #2d1d18 0 10%, #7f5148 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #3a2520 0 11%, #a46a62 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #2a1a16 0 9%, #8f5a52 10% 16%, transparent 17%),
    #efc3cd;
  background-size: 22px 22px;
}

/* 桃紅豹紋 */
.valis-color-swatch[data-color="桃紅豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #391f29 0 12%, #8c405d 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #2e1820 0 10%, #7a3550 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #391f29 0 11%, #9b4867 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #2e1820 0 9%, #813a58 10% 16%, transparent 17%),
    #e65b8f;
  background-size: 22px 22px;
}

/* 暗紫豹紋 */
.valis-color-swatch[data-color="暗紫豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #2c2230 0 12%, #624d69 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #211922 0 10%, #53405a 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #2c2230 0 11%, #6e5875 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #211922 0 9%, #57445f 10% 16%, transparent 17%),
    #67546f;
  background-size: 22px 22px;
}

/* 紫豹紋 */
.valis-color-swatch[data-color="紫豹紋"],
.valis-color-swatch[data-color="紫色豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #35253c 0 12%, #71527c 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #261b2b 0 10%, #65456f 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #35253c 0 11%, #7d5a89 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #261b2b 0 9%, #684975 10% 16%, transparent 17%),
    #9d7bc0;
  background-size: 22px 22px;
}

/* 卡其豹紋 */
.valis-color-swatch[data-color="卡豹紋"],
.valis-color-swatch[data-color="卡其豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #39291c 0 12%, #7b5d3f 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #2b2018 0 10%, #6b5037 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #39291c 0 11%, #866547 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #2b2018 0 9%, #71543a 10% 16%, transparent 17%),
    #bca27d;
  background-size: 22px 22px;
}

/* 裸杏豹紋 */
.valis-color-swatch[data-color="裸杏豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #3a291f 0 12%, #8c654d 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #2d2018 0 10%, #75533f 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #3a291f 0 11%, #956d54 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #2d2018 0 9%, #7a5843 10% 16%, transparent 17%),
    #dfbaa0;
  background-size: 22px 22px;
}

/* 杏豹紋 */
.valis-color-swatch[data-color="杏豹紋"],
.valis-color-swatch[data-color="米豹紋"],
.valis-color-swatch[data-color="杏色豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #3c2c21 0 12%, #8f694f 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #2f2119 0 10%, #795842 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #3c2c21 0 11%, #9b7257 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #2f2119 0 9%, #7d5a44 10% 16%, transparent 17%),
    #e8c6a7;
  background-size: 22px 22px;
}

/* 咖啡豹紋 / 咖啡色豹紋 */
.valis-color-swatch[data-color="咖啡豹紋"],
.valis-color-swatch[data-color="咖啡色豹紋"] {
  background-color: #8a6449;
  background-image:
    radial-gradient(ellipse 6px 4px at 18% 22%, rgba(43, 28, 19, 0.96) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 42% 30%, rgba(96, 64, 43, 0.92) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 72% 24%, rgba(49, 31, 22, 0.96) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 30% 62%, rgba(112, 75, 50, 0.9) 0 55%, transparent 56%),
    radial-gradient(ellipse 6px 4px at 62% 68%, rgba(46, 29, 20, 0.96) 0 55%, transparent 56%),
    radial-gradient(ellipse 5px 3px at 82% 58%, rgba(102, 68, 46, 0.9) 0 55%, transparent 56%);
  background-size: 22px 22px;
  background-repeat: repeat;
}

/* 奶咖豹紋 */
.valis-color-swatch[data-color="奶咖豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #33241c 0 12%, #73543f 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #261a14 0 10%, #654834 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #33241c 0 11%, #7a5943 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #261a14 0 9%, #684a36 10% 16%, transparent 17%),
    #b99274;
  background-size: 22px 22px;
}

/* 藍豹紋 */
.valis-color-swatch[data-color="藍豹紋"],
.valis-color-swatch[data-color="藍色豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #25303c 0 12%, #55697d 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #1d252f 0 10%, #46596b 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #25303c 0 11%, #60758a 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #1d252f 0 9%, #4c6073 10% 16%, transparent 17%),
    #5d82b3;
  background-size: 22px 22px;
}

/* 水藍豹紋 */
.valis-color-swatch[data-color="水藍豹紋"] {
  background:
    radial-gradient(ellipse at 22% 28%, #2c3337 0 12%, #5b6d73 13% 18%, transparent 19%),
    radial-gradient(ellipse at 68% 24%, #22292d 0 10%, #4c5d63 11% 17%, transparent 18%),
    radial-gradient(ellipse at 42% 68%, #2c3337 0 11%, #657a81 12% 18%, transparent 19%),
    radial-gradient(ellipse at 82% 72%, #22292d 0 9%, #52656b 10% 16%, transparent 17%),
    #8fcfdd;
  background-size: 22px 22px;
}

.valis-color-swatch[data-color="斑馬紋"] {
  background:
    repeating-linear-gradient(
      120deg,
      #ffffff 0 6px,
      #111111 6px 12px
    );
}

/* 咖啡斑馬紋 */
.valis-color-swatch[data-color="咖啡斑馬紋"],
.valis-color-swatch[data-color="咖啡色斑馬紋"] {
  background:
    repeating-linear-gradient(
      120deg,
      #6B4A34 0 6px,
      #E7D8C8 6px 12px
    );
}

.valis-color-swatch[data-color="花卉"] {
  background:
    radial-gradient(circle at 30% 30%, #f4b7c8 0 18%, transparent 19%),
    radial-gradient(circle at 70% 35%, #d7b4e8 0 16%, transparent 17%),
    radial-gradient(circle at 45% 70%, #f6d59a 0 14%, transparent 15%),
    #f8f4ef;
}

.valis-color-swatch[data-color="格紋"] {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 100%),
    linear-gradient(rgba(0,0,0,0.15) 0 2px, transparent 2px 100%),
    #e9e4dc;
  background-size: 10px 10px;
}

.valis-color-swatch[data-color="點點"],
.valis-color-swatch[data-color="斑點"] {
  background:
    radial-gradient(circle, #8d8d8d 18%, transparent 19%),
    #f7f7f7;
  background-size: 8px 8px;
}

.valis-color-swatch[data-color="粉條紋"] {
  background:
    repeating-linear-gradient(
      90deg,
      #f5d0da 0 6px,
      #ffffff 6px 12px
    );
}

.valis-color-swatch[data-color="黑白條紋"],
.valis-color-swatch[data-color="條紋"] {
  background:
    repeating-linear-gradient(
      90deg,
      #111111 0 6px,
      #ffffff 6px 12px
    );
}
valis-color-swatch {
  cursor: pointer;
}

.valis-color-swatch.is-active {
  outline: 1px solid #333333;
  outline-offset: 2px;
}
@media screen and (max-width: 749px) {
  .valis-color-swatches {
    gap: 6px;
    margin-top: 8px;
  }

  .valis-color-swatch {
    width: 22px;
    height: 22px;
  }
}
.valis-color-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  font-size: 13px;
  line-height: 1;
  color: #333333;
  margin-left: 2px;
}

@media screen and (max-width: 749px) {
  .valis-color-more {
    height: 22px;
    font-size: 14px;
    margin-left: 2px;
  }
}
/* 電腦版：顯示 desktop +N，隱藏 mobile +N */
.valis-color-more-mobile {
  display: none;
}

/* 手機版：只顯示前 9 個色票 + mobile +N */
@media screen and (max-width: 749px) {
  .valis-color-more-desktop {
    display: none;
  }

  .valis-color-more-mobile {
    display: inline-flex;
  }

  .valis-color-swatches .valis-color-swatch:nth-of-type(n+10) {
    display: none;
  }
}