@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: "Kumbh Sans", sans-serif;
  font-size: 16px;
}


/*商品展示*/
.wd-full{width: 100% !important;}
/*slider*/
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer;cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}
.slick-track:before,.slick-track:after{display:table;content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none;float:left;height:100%;min-height:1px;object-fit:contain;}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display:block;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:96px;border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}
.slick-dots {display: flex;justify-content: center;margin: 0;padding: 1rem 0;list-style-type: none;position: absolute;bottom: -40px;width: 100%;}
.slick-dots li {margin: 0 0.25rem;}
.slick-dots button {cursor: pointer;display: block;width: 1rem;height: 1rem;padding: 0;border: none;border-radius: 100%;background-color: #999;text-indent: -9999px;}
.slick-dots li.slick-active button {background-color: #666;}
.kv-slider .slick-slide img,.new-slider .slick-slide img{object-fit: cover;width: 100%;height: 100%;}
.slick-slide img{height: 96px;}
/*product-img-gallery*/
.main-product-info{padding: 100px 0 !important;}
.product-img-gallery,.product-info-area{width: 50%;float: left;}
.product-img-gallery > * {float: left;}
.slider-preview{width: 80%;}
.slider-thumb{width: 15% !important;margin-right: 10px;cursor: pointer;}
.slick-track img{height:auto;}
/*product-info-area*/
.product-info-area{float: right;padding-left: 20px;}
.product-info-area h2{font-size: 24px;color: #333;line-height: 40px;}
.product-info-desc{padding: 30px 0 5px 5px;}
.product-info-spec{margin-bottom: 30px;}
.product-info-desc .price{font-size: 28px;margin-right: 20px;margin-top: 15px;}
.product-info-desc .price,.product-info-desc .price-sub{display: inline-block;}
.product-spec{margin-top: 10px;margin-bottom: 20px;width: 30%;float: left;}
.colors ul{list-style:none; padding:0; margin: 0;}
.colors li{margin: 0 0 12px 0;display: inline-block;}
.colors label{cursor: pointer;}
.colors input{display:none;}
.colors input[type="radio"]:checked + .swatch{box-shadow: inset 0 0 0 2px white;}
.swatch{display:inline-block;vertical-align: middle;height: 30px;width:30px;margin: 0 5px 0 0 ;border: 1px solid #d4d4d4;}
.product-spec .size input {display: none;}
.product-spec .size label {display: inline-block;position: relative;cursor: pointer;margin-right: 6px;}
.product-spec .size label span {position: relative;line-height: 22px;}
.product-spec .size label span:before,.product-spec .size label span:after {content: '';}
.product-spec .size label span:before {border: 1px solid #222021;width: 30px;height: 30px;display: inline-block;vertical-align: top;}
.product-spec .size label span:after {background: #333;color: #fff;width: 30px;height: 30px;position: absolute;top: -4px;left: 0;transition: 300ms;opacity: 0;}
.product-spec .size label input:checked+span:after {opacity: 1;}
.product-spec .size label input:checked+span+p{color: #fff}
.product-spec .size label p{position: absolute;top: 2px;left: ;width: 100%;height: 100%;text-align: center;left: 0;vertical-align: middle;}
.product-edit-section{margin-bottom: 50px;}

/* -- quantity box -- */
.quantity{display:inline-block;}
.quantity .input-text.qty{font-size:12px;width:45px;height:36px;padding:0 5px;text-align:center;background-color:#FFFFFF;border:1px solid #023246;}
.quantity.buttons_added{text-align:left;position:relative;white-space:nowrap;vertical-align:top;}
.quantity.buttons_added input{display:inline-block;margin:0;vertical-align:top;box-shadow:none;}
.quantity.buttons_added .minus,.quantity.buttons_added .plus{padding:0px 10px 0px;height:36px;background-color:#ffffff;border:1px solid #023246;;cursor:pointer;}
.quantity.buttons_added .minus{border-right:1;margin-right: 1px}
.quantity.buttons_added .plus{border-left:1;margin-left: 5px}
.quantity.buttons_added .minus:hover,.quantity.buttons_added .plus:hover{background:#E4E4E4;}
.quantity input::-webkit-outer-spin-button,.quantity input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;margin:0;}
.quantity.buttons_added .minus:focus,.quantity.buttons_added .plus:focus{outline:none;}
.slick-arrow {z-index: 8; top: 50%; position: absolute; background-color: transparent; position: ;width: 50px;height: 50px;background-repeat: no-repeat;background-size: contain;background-position: center;text-indent: -999px;overflow: hidden;}
.slick-prev{background-image: url(../img/common/left-arrow.png);left: -10px;}
.slick-next{background-image: url(../img/common/next.png);right: -10px;}
/*多件優惠-桌機版-產品頁*/
.product-special-offer-title h1{display: block;width:100%;font-size: 1.2em;padding: 4px;text-align: center;color: #FFF;font-weight: bold;letter-spacing: 0.05em;}
.product-special-offer-box {margin-top: -5px;border-width:1px;border-style:solid;;padding-top: 0 !important;}
.special-offer-desc{width: 50%;margin:15px;}
.special-offer-desc ul{margin-left: 40px;list-style-type:square !important;}
.special-offer-desc ul li {list-style: outside;color:#000000;font-size: 16px;font-weight: 700;text-align: left;line-height: 2;}
.special-offer-price {margin-bottom: 10px;text-align: center;}
.special-offer-price span{color:#d8396a;font-size: 14px;font-weight: 500;}
.special-offer-picture{width: 50%;margin: 10px;position: relative;}
.special-offer-picture img{width: 80%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
.box-flex{display: flex;}

/*商品介紹*/
.page-section{padding: 30px 0;}
.product-edit-section{margin-bottom: 50px;}
.main-section h3,.page-section h3{
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
    color: #343434;
	font-weight: 400;
}
/*優惠套組*/
.sub_commodities {
  background-color: #F7F7F7;
  padding: 10px;
  float: left;
  width: 100%;
  margin: 10px 0 20px;
}
.sub_commodities h5 {
  font-size: 20px;
  font-weight: 600;
  color: #E75280;
}
.sub_commodities .list {
  max-height: 400px;
  overflow: auto;
  padding-right: 20px;
}
.sub_commodities .list .commodity {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 20px 0;
}
.sub_commodities .list .commodity:first-child {
  padding-top: 10px;
}
.sub_commodities .list .commodity+.commodity {
  border-top: 1px solid #CECECE;
}
.sub_commodities .list .commodity .img {
  width: 100px;
  height: 100px;
}
.sub_commodities .list .commodity .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 10px;
}
.sub_commodities .list .commodity .content .title {
  font-size: 17px;
  font-weight: bolder;
  word-break: break-word;
}
.sub_commodities .list .commodity .content .quantity{
  color: #9A9A9A;
}
.sub_commodities .list .commodity .content select{
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 20px 8px 8px;
  color: #9A9A9A;
  font-weight: 500;
  font-size: 16px;
  height: auto;
}

.ck-content .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1em auto;
}
    /*******分享按鈕******/
.btn-share {
  /*--btn-color: #f6f6f6;*/
    position: relative;
    padding: 10px 100px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: #999999;
    background: none;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
    /*filter: drop-shadow(0 2px 8px rgba(161, 161, 161, 0.32));*/
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    margin-top: -15px;
    border-radius: 10px;
    margin-left: 20px;
  }
.btn-share::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--btn-color);
    border-radius: 10px;
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .btn-share .btn-text,
  .btn-share .btn-icon {
    display: inline-flex;
    vertical-align: middle;
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .btn-share .btn-text {
    transition-delay: 0.05s;
  }
  .btn-share .btn-icon {
    margin-left: 8px;
    transition-delay: 0.1s;
  }
  .btn-share .social-icons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    transform: translateY(-50%);
  }
  .social-icons img{
    width: 35px;
    height: 35px;
  }
  
  .btn-share .social-icons li {
    /*flex: 1;*/
    margin-left: 10px;
  }
  .btn-share .social-icons li a {
    /* display: inline-flex; */
    vertical-align: middle;
    transform: translateY(55px);
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .btn-share .social-icons li a:hover {
    opacity: 0.5;
   
  }
  .btn-share:hover::before {
    transform: scale(1.2);
   
  }
  .btn-share:hover .btn-text,
  .btn-share:hover .btn-icon {
    transform: translateY(-55px);
  }
 .btn-share:hover .social-icons li a {
    transform: translateY(0);
  }
  .btn-share:hover .social-icons li:nth-child(1) a {
    transition-delay: 0.15s;
  }
  .btn-share:hover .social-icons li:nth-child(2) a {
    transition-delay: 0.2s;
  }
  .btn-share:hover .social-icons li:nth-child(3) a {
    transition-delay: 0.25s;
  }
  .product:nth-child(-n+4) {
    display: flex;
  }
@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
  }

  .wd-full {
    width: 100% !important;
  }
  .main-container{
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column; /* 在手機上垂直排列內容 */
    align-items: flex-start; /* 左對齊內容 */
    width: 100%; /* 寬度滿滿螢幕寬度 */
  }
  .page-section {
    margin-left: 10px;
    margin-right: 10px;
  }
  .product-img-gallery, .product-info-area {
    width: 100%;
    float: none;
  }
  /*隱藏小圖示*/
  .slider-thumb {
    display: none !important;
  }
  .slider-preview {
    width: 100%;
    float: none;
  }
  .slick-track img {
    height: 100%;
  }
  .product-info-area {
    padding: 20px 20px;
  }
  /*選擇樣式*/
  .product-spec {
    margin-bottom: 20px;
    width: 50%;
    float: left;
  }
  /*加入購物車*/
  .btn-addcart.btn-lg {
    width: 100%;
    display: block;
    text-align: center;
  }
  /*社群分享*/
  .btn-share {
    margin-top: 15px;
    width: 100%;
    margin-left: 0px;
  }
  .quantity.buttons_added .minus, .quantity.buttons_added .plus{
    padding: 0px 5px 0px;
  }
  /*推薦商品排列*/
  .product {
    flex: 0 0 calc(50% - 20px);
  }
}