/*產品型錄和詳細頁、購物流程相關css*/
/*------------------------------------*\
RWD版產品詳細頁--新版產品詳細頁也有用到，是在加了style上面做修正
\*------------------------------------*/
/*----RWD版產品詳細頁///start----*/
.sm-product-detail {
  padding-bottom: 10px;
}
.sm-product-detail h4 {
  color: var(--product-detail-title-color,#212529);
  font-weight: bold;
}
.sm-product-detail h4 .subtitle {
margin-top: 8px;
font-size: 70%;
line-height: 1.6;
}
.sm-product-detail .thumbnail {
  margin-top: 10px;
}
.sm-product-detail .thumbnail img {
  margin-right: 5px;
}
.sm-product-detail .memo {
  margin-top: 10px;
  float: left;
  width: 100%;
}
.sm-product-detail .dl-horizontal {
  display: flex;/*原本是float改flex*/
  border-bottom: 1px var(--sm-outline) dashed;
  padding-top: 1px;/*避免被select foucs時截掉的問題*/
}
.sm-product-detail .dl-horizontal dt {
  width: 90px;
  text-align: left;
  margin-bottom: 10px;
}
/* .sm-product-detail .dl-horizontal dd {
  margin-left: 100px;
} */
.sm-product-detail .member-price dd {
  color: var(--sm-accent);
  font-weight: bold;
}
.sm-product-detail .member-price dd .product_detail_price {
  color: var(--sm-accent);
  font-size: 1.125rem;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
}
.sm-product-detail .add_product ul {
  list-style-type: none;
  padding: 0;
}
/*右邊價格不要降行*/
.product_detail_item_right{
  white-space: nowrap;
}
.product_detail_picture img {
  margin: 0 auto;
  display: block;
}

/*----產品詳細頁///end----*/
/*----------------------------*/
/*----產品詳細的分頁///start----*/
#product_tab ul {
  display:flex;
  gap: 4px;
  list-style-type: none;
  margin-bottom: 10px;
  padding: 0px;
  width: auto;
  height: 42px;
  border-bottom: 1px solid var(--tab-list-border-color,#ccc);
}
  #product_tab ul li {
    flex: 1;
    max-width:200px;
  }
    #product_tab ul li a {
      display: block;
      text-decoration: none;
      background:  var(--primary);
      color: var(--on-primary,#ffffff);
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-weight:bold;
      padding: 0 16px;
      border-radius: 4px 4px 0 0;
      border-bottom: 1px solid var(--tab-list-border-color,#ccc) 
    }
    #product_tab ul li a:hover, #product_tab ul li a.on {
      color: var(--primary);
      color: var(--on-primary,#ffffff);
      border-bottom: 1px solid var(--tab-list-border-color,#ccc) ;
      border-bottom: 0px; 
    }

@media (max-width: 767px) {
  #product_tab ul li a {
    font-size: 0.95rem;
    width: auto; 
    padding: 0 4px;
  } 
  }
/*----產品詳細的分頁///end----*/ 
/*------------------------------------*\
(是否要拆開)帶有.do_sm-product-detail是RWD版並且有雙規格的版本-如FZ
\*------------------------------------*/
/*----- RWD版雙規格產品內容頁-和/productDetail/5/style.css有重疊的地方 ///start----*/

/*包住產品和資訊的大框*/
.do_sm-product-detail {
  padding-bottom: 10px;
}
/*產品大圖*/
.do_product_detail_picture {
  border: 0px solid #CCCCCC;
  padding: 0px;
}
.do_product_detail_picture img {
  margin: 0 auto;
  display: block;
}
/*產品小圖*/
.do_product_spec_picture {
  margin-top: 13px;
  margin-left: -3px;
  margin-right: -3px;
}
.do_product_spec_picture ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.do_product_spec_picture ul li {
  display: block;
  float: left;
  padding: 3px;
  margin: 0px;
  width: 16.6%;
}
.do_product_spec_picture ul li img {
  border: 1px solid #cccccc;
  display: block;
  max-width: 100%;
}
/*包住標題與說明*/
.product_detail_content {
  border-bottom: 1px solid #cccccc;
  padding-left: 0px;
  padding-right: 0px;
}
/*產品大標*/
.do_sm-product-detail h4 {
  color: #000000;
  font-weight: bold;
  font-size: 1rem;
  margin-top: 0px;
  margin-bottom: 7px;
  line-height: 1.4;
}
/*商品編號*/
.product_detail_item_number {
  color: #999999;
}
/*自行編輯的內容區塊*/
.product_detail_main {
  margin-top: 10px;
  margin-bottom: 10px;
}
/*產品資訊*/
.product_detail_info {
  background: #fff;
  padding: 1px 0px 20px 0px;
}
/*產品資訊欄位*/
.do_sm-product-detail .dl-horizontal {
  padding: 12px 0px;
  margin: 0;
  border-bottom: 0px #666666 dashed;
}
.do_sm-product-detail .dl-horizontal dt {
  width: 65px;
  text-align: left;
  float: left;
  margin-bottom: 0px;
}
.do_sm-product-detail .dl-horizontal dd {
  margin-left: 65px;
}
/*會員價*/
.do_sm-product-detail .member-price dt {
  line-height: 20px;
}
/*紅色特價*/
.do_sm-product-detail .product_detail_price {
  color: var(--accent);
  font-size: 1.125rem;
  line-height: 20px;
  margin: 0 3px;
}
/*商品全館活動*/
.all_product_activity {
  border-bottom: 0px #666666 dashed;
  padding: 0px 0px;
  margin: 0 0 10px 0;
}
.all_product_activity dd {
  width: 100%;
  background: url(../images/all_product_activity_icon.png) no-repeat left center;
  padding-left: 20px;
  line-height: 24px;
  color: var(--accent);
}

/*商品特別活動*/
.product_activity {
  border-bottom: 0px #666666 dashed;
  padding: 0px 0px;
  margin: 0 0 10px 0;
}
.product_activity dd {
  width: 100%;
  background: url(../images/product_activity_icon.png) no-repeat left center;
  padding-left: 20px;
  line-height: 24px;
}
.product_activity dd a {
  color: #990000;
}
.product_activity dd a:hover {
  color: #e75d9a;
}
/*雙規格-顏色(無論是否為RWD版或新版，雙規格都是以下這段)*/
.product_color,.product_size{
  padding: 0 0 8px 8px;
}
.product_color ul {
  margin: 0px;
  padding: 0;
}
.product_color ul li {
  display: inline-block;
  margin: 3px;
  line-height: initial;
  list-style-type: none;
}
.product_color ul li a {
  display: inline-block;
  border: 2px solid transparent;
}
.product_color li a:hover,
.product_color li a:active,
.product_color li a.current {
  border: 2px solid var(--primary);
}
.product_color ul li a img{
  vertical-align: top;
}
/*尺寸*/
.product_size ul {
  margin: 0px;
  padding: 0px;
}
.product_size ul li {
  display: inline-block;
  margin: 2px;
  list-style-type: none;
}
.product_size ul li a {
  display: inline-block;
  line-height: 20px;
  color: #333333;
  background: #eeeeee;
  border: 2px solid #fff;
  padding: 2px 6px;
}
.product_size li a:hover,
.product_size li a.current {
  color: #333333;
  padding: 2px 6px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px var(--primary);
}
/*沒有尺寸時*/
.product_size_no {
  color: #999999;
  line-height: 20px;
  background: #cccccc;
  border: 2px solid #f5f5f5;
  padding: 2px 6px;
}
/*數量*/
.product_quantity {
  overflow: hidden;
}
.product_quantity_left {
  /* float: left; 清除float 避免和加購重疊*/
}
/*數量可以增減的欄位--productDetail5有重複的刪除、productDetail6裡面的css有部分重複*/
.product_quantity_left .input-group.bootstrap-touchspin {
  display: flex;
  flex-wrap: nowrap;
  width: 110px;
  font-weight: bold;
  margin-right: 5px;
}
/*加減的按鈕大小*/
.product_quantity_left .btn {
  font-size: 1.25rem;
  padding: 2px 8px;
  width: 32px;
  background-color: #eee;
  border-radius:4px;
}
  /*數量欄的高度*/
.product_quantity_left .form-control {
  height: 34px;
}
/*試穿報告等欄位--productDetail5、productDetail6裡面的css也有重複的.但不完全是，是否要拆出去?**/
.product_try {
  float:right;
  /*float:left; 在樣板裡面都被列在right裡 */
}
.product_try ul {
  margin: 0px;
  padding: 0px;
}
.product_try li {
  display: inline-block;
  margin: 2px;
  list-style-type: none;
  border-right: 1px solid #333;
  padding: 0 3px;
  line-height: 15px;
}
.product_try li a {
  color: var(--on-surface);
  background: #fff;
}
.product_try li a:hover {
  color: var( --primary);
  background: #fff;
}
.product_try li:first-child {
  border-left: 1px solid #333;
}
/*RWD版的雙規格-裡面的加購商品*/
.do_sm-product-detail .add_product ul {
  margin: 0px;
  padding: 0;
}
.do_sm-product-detail .add_product li {
  list-style-type: none;
  padding: 0;
}
.do_sm-product-detail .add_product .price {
  color: var( --accent);
}
.do_sm-product-detail .add_product .product_detail_price_unit {
  color: var(--surface);
  margin-right: 6px;
}

/*購物車按鈕*/
.product_detail_cart_icon {
  padding-top: 15px;
  text-align: left;
}
.product_list_discount,.product_detail_discount,.product_list_event,.product_list_bonus,
.product_detail_bonus,.cart_bonus{
  background-position: left center;
  background-repeat: no-repeat;
  text-indent: 30px;
  display: inline-block;
}
/*商品限時特價*/
.product_list_discount {
  background-image: url("../images/product_list_discount_icon.gif");
  color: var(--sm-accent);
}

/*限時特價圖示*/
.product_detail_discount {
  background-image: url("../images/product_list_discount_icon.gif");
  margin-left: 0px;
}

/*商品組合優惠*/
.product_list_event {
  background-image: url("../images/product_list_event_icon.gif");
  /* width: 60px;
  height: 20px; */
}
/*產品列表商品紅利*/
.product_list_bonus{
    background-image:url("../images/cart_bonus.gif");
    display:inline-block;
    color:var(--sm-accent);
}

/*RWD產品詳細頁商品紅利*/
.product_detail_bonus{
    background-image:url("../images/cart_bonus.gif");
    margin-left:10px;
}
/*產品折扣活動列*/
.cart_bonus {
  margin-top: 2px;
  margin-bottom: 5px;
  text-indent: 38px;
  background-image: url("../images/cart_bonus.gif");

}
/*紅配綠、贈品等icon*/
.label_red_tag_product, .label_green_tag_product ,.label_add_tag_product{
  border-radius: 4px;
  padding: 0px 3px;
  margin-right: 4px;
  font-size: 0.875rem;
  line-height: 1;
  color: #fff;
}

.label_red_tag_product {
  background-color: var(--sm-badge--red);
}

.label_green_tag_product {
  background-color: var(--sm-badge--green);
}
.label_add_tag_product{
  background-color: #ff4709;
}

/*內頁的限時特價數字*/
.product_detail_price_other {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  line-height: 2;
  font-weight: bold;
  color: var(--sm-accent);
  padding-left: 5px;
  padding-right: 5px;
}
/*售出件數的設定*/
.sold_number_block {
  padding: 0px 0px;
  margin: 0;
}
.sold_mumber {
  font-size: 1rem;
}
.stock_number {
  color: var(--sm-accent);
  font-size: 1rem;
}
/*倒數計時*/
#product_countdown,
.product_countdown {
  display:table;
  width: 270px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background-color: var(--accent) !important;
  color: #FFF;
  margin-bottom: 10px;
  font-size: 1.25rem;
  padding:0 4px;
  border-radius: 4px; 
}

/*----- 新版雙規格產品內容頁 ///end----*/

/*----商品詳細-問與答調整///start----*/
#guestbook_by_product td.poster_field {
  white-space: nowrap;
  width: 80px;
}

#guestbook_by_product td.q_content p{
margin: 0px;
}
#guestbook_by_product td.a_field {
color:var(--on-surface);
background-color:var(--surface);
}
#guestbook_by_product td.a_content {
color:var(--on-surface);
background-color:var(--surface);
}
#guestbook_by_product td.line hr {
  margin: 16px 0;
}
/*----商品詳細-問與答調整///end----*/


.cart_block {
  border: 1px solid #ccc;
  padding: 14px;
}
/*----產品分類按鈕///start----*/
#product_content_button {
  float: right;
}
#product_content_button div {
  margin: 0 5px;
  float: left;
}
/*----產品分類按鈕///end----*/
/*------------------------------------*\
購物車.購物流程
\*------------------------------------*/


/*購物有開海外地區的按鈕*/
#abroad_area .btn {
  margin: 2px 0;
  padding: 2px 12px;
  border-radius: 2px;
}
/*購物歡迎字句*/
#cart_welcome {
  margin: 15px;
}
/*---------------------*/
/*----購物流程表格css///start----*/ 
 .cart_product_block {
      display: flex;
      flex-wrap: wrap;
    }

/*產品圖片大小*/
.cart_product_pic {
  width: 67px;
  margin-right: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
}
 .cart_product_pic img {
  border: 1px solid #CCC;
 }
/*產品內容資訊*/
.cart_product_data {
	min-width: 130px;
	flex: 1;
  margin-top: 4px;
  margin-bottom: 4px;
  border: 0px;
  word-break: normal;
  line-height: 1.2;
  font-size: 0.9rem;
}
/*產品名稱*/
.cart_product {
  margin-top: 2px;
  margin-bottom: 5px;
  text-indent: 0px;
  background-repeat: no-repeat;
  background-position: left top;
  font-size: 1rem;
}
.cart_product a{
 	color: var(--on-surface,#333333);
  }  
.cart_product a:hover{
 	color: var(--primary);
  }  
/*各種標籤共通設定*/
.cart_preorder_product ,.cart_event,.cart_now_event ,.cart_add_product,.cart_price,.cart_size{
  margin-top: 2px;
  margin-bottom: 5px;
  text-indent: 38px;
  background-repeat: no-repeat;
  background-position: left top;
  line-height: 1.2;
}

/*產品名稱*/
.cart_preorder_product {
  background-image: url(../images/cart_preorder.gif);
}

/*產品折扣活動列*/
.cart_event {
  background-image: url(../images/cart_event.gif);
}

/*產品全館活動列*/
.cart_now_event {
  background-image: url(../images/cart_now_event.gif);
}

/*加購商品*/
.cart_add_product {
  background-image: url(../images/cart_add_product.gif);
}
/*產品價格*/
.cart_price {
  background-image: url(../images/cart_price.gif);
}
/* 尺寸*/
.cart_size{
   background-image: url(../images/cart_size.gif) ;
  }

/*刪除的icon-(原bs3-icon已拿掉)*/
.glyphicon-trash{
text-indent: 20px; 
width: 1rem;
height: 1rem;
display: inline-block;
background:url(../images/icon-delete.svg) no-repeat;
background-size: 100% auto;
}

/*產品規格*/
/*產品總金額*/
#total_price {
  color:  var(--primary);
}
/*住址等欄位的間距*/
.form-control {
  margin-bottom: 5px;
}

#order_product_list {
  width: 99%;
}
/*----購物流程表格css///end----*/

/*購物列表的表格*/
#cart_list .table{
  margin-bottom:0px;
  }
/*付款方式置左*/
.payment_block .control-label, .deliver_block .control-label {
   text-align: left !important;
   padding-top: 0px!important;
}
.product_detail_line {
  border: 0;
}
/*此為加購商品的tag*/
.add_product_msg_show {
  color: var(--sm-badge--add);
  font-weight: bold;
  display: inline-block;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}
/*----加購商品列表///strat----*/
.plus_list{
  background:#FDEFEF;
  }
.plus_list_icon{
  background:var(--sm-badge--add);
  color:#fff;
  padding:2px 3px;
  border-radius:5px;
  word-break: keep-all;
  display: inline-block;
  font-size: 90%;
  text-indent: 0px;
  }
/*---加購商品區塊---*/
/*加購商品標題*/
.plus_product_title{
  padding:3px 5px 3px 35px;
  margin-top:30px;
  margin-bottom:15px;
  display:block;
  border-bottom:1px solid #ccc;
  font-size:1.4rem;
  background: url(../images/plus_icon.gif) no-repeat  ;
  }
/*加購商品*/
.plus_products{
  width: 16.666666%;
    padding-right: 10px;
    padding-left: 10px;
  margin-bottom: 25px;
  }
.plus_products .photo{
 }
.plus_products .title{
  font-weight: bold;
  height:56px;
  text-align:center;
  }
.plus_products  .price_title {
    margin-top: 5px;
    text-align:center;
}
.plus_products  .normal_price_number {
  text-decoration: line-through;
  color: #999;
}
.plus_size{
  display: block;
  width: 100%;
  margin-bottom: 3px;
  overflow:hidden;
    }
.plus_amount{
  float:left;
  } 
.plus-button{
  float:right;
  padding: 2px 4px!important;
  }

@media (max-width: 1200px) {
  .plus_products{
  width: 16.6%;
  }
}
@media (max-width: 991px) {
  .plus_products{
  width: 25%;
  }
 }
@media (max-width: 767px){ 
.plus_products{
  width: 25%;
  }

.plus_products  .normal_price_number::after{
 display: block;
 content: "";
}
}
@media (max-width: 480px){ 
.plus_products{
  width: 50%;
  }
}
/*----加購商品列表///end----*/
/*----運費等資訊///strat----*/
.cart_col_amount_all{
  min-width:500px;
  float:right;
  margin-bottom:25px;
background:#FFF;
  }
.cart_col_amount_all td{
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  }

.total_price{
  border-top: 1px #d5d5d5 dotted;
  }
.total_price_text {
  color:var(--accent);
  font-size:1.3rem;
  line-height: 24px;
  } 

.total_bonus{
  background:#eee;
  border-radius:5px;
  padding:3px;
  }
.total_bonus_text{
  color:var(--accent);
  font-size:1rem;
  }

/*強調點數數字class*/
.cart_remind{
    color: var(--accent);
    margin-right: 4px;
  }
 /*點數有多種類拆行列*/
 .total_bonus_row{
  border-right: 1px solid var(--sm-on-surface-variant);
  padding-right:6px;
  display: inline-block
}
.total_bonus_row:last-child{
  padding-right:0px;
  border-right:0;
}
.total_bonus_row .cart_remind{
  margin: 0  4px;
}

@media (max-width: 767px){
  .cart_col_amount_all {
    min-width: 100px;
    margin-right: 0px;
}
  .total_bonus_row{
    display: block;
    margin: 4px 0;
    padding-right:0px;
  border-right:0;
  } 
 }

/*----運費等資訊///end----*/  
/*同意條款*/
textarea#agreement {
  line-height: 1.6;
}


/*------------------------------------*\
產品與部落格文章關聯
\*------------------------------------*/
/*====== 產品頁的blog文章-圖文版 ====== */
.related-article h4 {
    font-size: 1.5rem;
    border-left: 4px solid var(--primary);
    border-bottom: 1px solid #eeeeee;
    padding: 4px;
    margin-bottom: 0.5rem;
  }
  .related-article ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem 0;
    padding: 0;
    list-style-type: none;
  }
  .related-article ul li {
    width: 33.33%;
    margin-bottom: 1rem;
  /*   padding: 8px; */
  }
  .related-article-item {
    display: flex;
    padding: 8px;
  /*   border-right: 1px solid #eeeeee; */
  }
  .related-article-item figure {
    padding: 4px;
    width: 30%;
    margin-right: 8px;
  }
  .related-article-item figure:hover {
    opacity: 0.8;
  }
  .related-article-info {
    flex: 1;
    margin-left: 8px;
  }
  .related-article-title {
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  
  .related-article-title  a {
    color: var(--on-surface);
  }
  
  .related-article-title  a:hover {
    color: var(--primary);
  }
  .related-article-text {
    font-size: 0.875rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .related-article-btn {
    display: none;
  }
  
  @media (max-width: 767px) {
    .related-article ul li {
      width: 50%;
      margin-bottom: 0rem;
    }
    .related-article-item {
  /*     border-right: 0px solid #eeeeee; */
    }
  }
  @media (max-width: 577px) {
    .related-article ul li {
      width: 100%;
    }
  }
  /*====== 產品頁的blog文章-列表版 ====== */
  .related-article--list{
    margin-bottom: 2rem;
  }
  .related-article--list ul li {
    width: 100%;
    padding: 0;
    margin-bottom: 0rem;
  }
  .related-article--list .related-article-item {
    padding: 0;
    margin: 0;
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
  }
  .related-article--list .related-article-item figure {
       width: 60px;
      margin-top: 4px;
  }
  .related-article--list .related-article-info {
    display: grid;
    grid-template-columns: 40% 50% 80px;
    /*定義欄寬*/
  }
  .related-article--list .related-article-info > div {
    padding: 0px;
    margin: 8px;
    height: fit-content;
  }
  .related-article--list .related-article-btn {
    display: block;
  }
  
  @media (max-width: 577px) {
    .related-article--list .related-article-info {
      grid-template-columns: auto  70px
      /*定義欄寬*/
    }
    .related-article--list .related-article-text {
      display: none;
    }
  }