/* v3/page/product.css — Product (Available + Custom) */
/* 商品描述 tab 內容滿版 */
.pro_introduction_section .content_section>div {
   width: 100%;
   flex-shrink: 0;
}

/* 篩選區：尺寸區域允許收縮，輸入框寬度還原為 auto（覆蓋 base.css calc） */
.index__filteroptions_outer .index__filteroptions_flex .sizeoption {
   flex: 1 1 0%;
   min-width: 0;
}

.index__filteroptions_outer .index__filteroptions_flex .sizeoption .print_input_flex>div:not(.addbox) {
   width: auto;
}

.index__filteroptions_outer .index__filteroptions_flex .deviation .selectStyleBox {
   min-width: 50px;
}

.pro_custom_dots .owl-dot.active .s_img:after {
   transform: scale(1);
   opacity: 1
}

/* 收藏愛心 — 右上角定位 */
.link_favorite--corner {
   position: absolute;
   top: -20px;
   right: 0;
   z-index: 10;
   border: none;
   background: none;
   font-size: 28px;
   color: #ccc;
   width: auto;
   height: auto;
   padding: 6px 7px;
   cursor: pointer;
   transition: color .2s;
   line-height: 1;
}

.link_favorite--corner:hover {
   color: #e14f00;
}

.link_favorite--corner.active {
   color: #FF6715;
   background: none;
}

.link_favorite--corner i {
   font-size: inherit;
}

/* 列表頁愛心（inline，跟 +/- 同一行） */
.link_favorite--list {
   border: none;
   background: none;
   font-size: 24px;
   color: #ccc;
   cursor: pointer;
   transition: color .2s;
   line-height: 1;
   margin-left: 8px;
}

.link_favorite--list:hover {
   color: #e14f00;
}

.link_favorite--list.active {
   color: #FF6715;
   background: none;
}

.link_favorite--list.active i {
   color: #FF6715;
}

.link_favorite--corner.active i {
   color: #FF6715;
}

/* 標題留空間給右上角愛心 */
.pro_detail_right .page__title .word {
   padding-right: 60px;
}

/* 商品名稱：超過 2 行顯示 ...；line-height + max-height 為硬上限，防止 line-clamp 在某些情況失效時第 3 行溢出蓋住下方價格 */
.avaipro_withnumber_each .infobox_inner .detailbox .prod_name,
.avaipro-index-section .index__subcategory_flex .index__category_linktext {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.4em;
   max-height: 2.8em;
   /* 間距改走 margin：padding 落在 overflow 裁切區內，會讓被 clamp 的下一行從 padding 區露出半截 */
   padding-bottom: 0;
   margin-bottom: 10px;
}

/* --- 3.0 Product Rules --- */
.member_reorder-section .avaipro_withnumber_each .infobox_inner .sp_group .btn_record:hover {
   background: #825723
}

.member_reorder-section .avaipro_withnumber_each .pricebox .addcartbtnbox .btn-cart2:before {
   margin-right: 5px;
   margin-bottom: 0px
}

/* Type2 篩選排序 + 每頁筆數（3.0 XD 設計稿） */
.avaipro-index-section .optionbox {
   align-items: center;
}

.avaipro-index-section .optionbox .sortbox {
   display: flex;
   align-items: center;
   gap: 10px;
   background-color: #DFDFDF;
   border-radius: 5px;
   width: 200px;
   padding: 5px 10px;
   font-size: 16px;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   position: relative;
   cursor: pointer;
   -ms-flex-align: center;
   align-items: center;
}

.avaipro-index-section .optionbox .sortbox .sort-label {
   font-size: 14px;
   color: #333;
   white-space: nowrap;
}

.avaipro-index-section .optionbox .sortbox .sort-select-box {
   background-color: transparent;
}

.avaipro-index-section .optionbox .sortbox .sort-select-box>select {
   font-size: 14px;
   color: #4a8c34;
   height: 30px;
   padding: 0 25px 0 5px;
   min-width: 150px;
}

.avaipro-index-section .optionbox .filterbox {
   display: flex;
   align-items: center;
   padding: 0;
}

.avaipro-index-section .optionbox .filterbox .pagesize-select-box>select {
   font-size: 14px;
   color: #575757;
   height: 30px;
   padding: 0 25px 0 5px;
}

.avaipro-index-section .optionbox .selectStyleBox:after {
   margin-top: -3px
}

.avaipro-index-section .favorite:not(.active) .fas:not(.hd) {
   display: none
}

.avaipro_withnumber_each:first-child {
   margin-top: 0px
}

.avaipro_withnumber_each .infobox_inner:hover {
   box-shadow: 0px 15px 16px -3px #DBDBDB;
   -webkit-box-shadow: 0px 15px 16px -3px #DBDBDB;
   -moz-box-shadow: 0px 15px 16px -3px #DBDBDB;
   -o-box-shadow: 0px 15px 16px -3px #DBDBDB
}

.avaipro_withnumber_each .otherlinkbox .left .share_linklist>a:last-child {
   margin-right: 0px
}

.avaipro_withnumber_each .pricebox .addcartbtnbox .btn-cart:before {
   margin-right: 0;
   margin-bottom: 5px;
   width: 16px;
   height: 17px;
   background-size: 16px
}

/* ==========================================
   Owl Carousel 產品圖片與影片設定
   ========================================== */
#owlcarousel_product .item {
   width: 100%;
   aspect-ratio: 590 / 480.43;
   position: relative;
   overflow: hidden;
   background-color: #f5f5f5;
}

#owlcarousel_product .item>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

#owlcarousel_product .item .video-container {
   width: 100%;
   height: 100%;
   position: relative;
}

#owlcarousel_product .item .video-container iframe {
   width: 100%;
   height: 100%;
   border: none;
}

/* drag shield：手機/桌機滑動時不被 iframe 攔截觸控；點一下才啟用影片 */
#owlcarousel_product .item .video-container .video-overlay {
   position: absolute;
   inset: 0;
   z-index: 2;
   cursor: pointer;
   /* 近乎透明但仍可接收 touch/click，讓滑動事件落在這層交給輪播處理 */
   background: rgba(0, 0, 0, 0.001);
}

/* 點擊啟用後拿掉遮罩，露出 iframe 可正常播放/操作 */
#owlcarousel_product .item .video-container.video-active .video-overlay {
   display: none;
}

/* 商品圖輪播左右箭頭：僅手機版顯示（點箭頭換圖，不必在影片上滑被 iframe 攔截）；
   電腦版不給箭頭，維持滑鼠拖曳 / 點縮圖切換 */
#owlcarousel_product {
   position: relative;
}

/* 電腦版：隱藏箭頭 */
#owlcarousel_product.owl-theme .owl-nav button.owl-prev,
#owlcarousel_product.owl-theme .owl-nav button.owl-next {
   display: none;
}

@media (max-width: 769px) {
   #owlcarousel_product.owl-theme .owl-nav {
      margin-top: 0;
   }

   #owlcarousel_product.owl-theme .owl-nav button.owl-prev,
   #owlcarousel_product.owl-theme .owl-nav button.owl-next {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      margin: 0;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 3;
   }

   #owlcarousel_product.owl-theme .owl-nav button.owl-prev {
      left: 10px;
      background-image: url(../../../images/icon/arrowleft.png);
   }

   #owlcarousel_product.owl-theme .owl-nav button.owl-next {
      right: 10px;
      background-image: url(../../../images/icon/arrowright.png);
   }
}

/* ==========================================
   縮圖 (Dot 分頁) 設定
   ========================================== */
#owlcarousel_product .owl-dots,
.pro_custom_dots {
   display: flex;
   flex-wrap: nowrap;
   gap: 10px;
   margin-top: 15px;
   justify-content: flex-start;
   overflow-x: auto;
   max-width: 578px;
   margin-left: auto;
   margin-right: auto;
   scroll-behavior: smooth;
   padding-bottom: 5px;
   cursor: grab;
   user-select: none;
   -webkit-user-drag: none;
}

#owlcarousel_product .owl-dots .owl-dot,
.pro_custom_dots .owl-dot {
   flex-shrink: 0;
}

.pro_custom_dots .owl-dot .s_img {
   width: 88px;
   aspect-ratio: 590 / 480.43;
   overflow: hidden;
   transition: border-color 0.3s ease;
   position: relative;
}

.pro_custom_dots .owl-dot .s_img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   pointer-events: none;
}

.pro_custom_dots .owl-dot.active .s_img {
   border-color: #3D9738;
}

/* 自訂/美化水平卷軸 (可選，讓電腦版視覺更精緻) */
#owlcarousel_product .owl-dots::-webkit-scrollbar,
.pro_custom_dots::-webkit-scrollbar {
   height: 6px;
   /* 卷軸高度 */
}

#owlcarousel_product .owl-dots::-webkit-scrollbar-thumb,
.pro_custom_dots::-webkit-scrollbar-thumb {
   background-color: #D1AA6D;
   /* 使用網站原本的輔助色調 */
   border-radius: 10px;
}

#owlcarousel_product .owl-dots::-webkit-scrollbar-track,
.pro_custom_dots::-webkit-scrollbar-track {
   background-color: #f0f0f0;
   border-radius: 10px;
}

/* ==========================================
   加工項目 (Additions) 排版與圖片設定
   ========================================== */
.pro_detailbox .pro_standard_each .optionsbox .options_form {
   overflow-x: unset;
}

#Additions_form.options_form {
   overflow-x: unset;
}

#Additions_form .addition_flex {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

#Additions_form .inputbox {
   width: 100%;
}

#Additions_form .inputbox img {
   width: 100%;
   aspect-ratio: 388 / 245;
   object-fit: cover;
   object-position: center;
   display: block;
}

#owlcarousel_other_purchase .oth_p_link .imgbox {
   width: 100%;
   aspect-ratio: 590 / 480.43;
   overflow: hidden;
   transition: border-color 0.3s ease;
   position: relative;
}

#owlcarousel_other_purchase .oth_p_link .imgbox img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.index__subcategory_flex .index__category_linkimg {
   aspect-ratio: 590 / 480.43;
   overflow: hidden;
   transition: border-color 0.3s ease;
   position: relative;
}

.index__subcategory_flex .index__category_linkimg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.applicable {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   margin-right: 20px;
}

.applicable .description {
   font-size: 14px;
   font-weight: 500;
   color: #3D9738;
   position: relative;
   padding-bottom: 4px;
   border: 0;
}

.applicable .description:after {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   /* height: 1px; */
   bottom: 0;
   background-color: #3D9738;
   transition: transform-origin 0s linear, transform 0.7s cubic-bezier(0.9, 0, 0.1, 1) 0s;
   transform-origin: left center;
   border-bottom: 1px solid #3D9738;
}

.selectCustomBox .options_innerbox>div>label img {
   width: 100%;
   aspect-ratio: 388 / 245;
   object-fit: cover;
   object-position: center;
   display: block;
}

/* ==========================================
   RWD 響應式設定 (建議加入)
   ========================================== */
/* 平板尺寸 (例如 768px 以下)：改為一排 2 個 */
@media (max-width: 768px) {
   #Additions_form .addition_flex {
      grid-template-columns: repeat(2, 1fr);
   }

   #owlcarousel_other_purchase .oth_p_link .imgbox {
      width: 100%;
   }

   /* .link_favorite--corner { top: 10px; right: 10px; }
*/
   .link_favorite--corner i {
      font-size: 30px;
   }
}

/* 手機尺寸 (例如 480px 以下)：改為一排 1 個 */
/* @media (max-width: 480px) {
 #Additions_form .addition_flex { grid-template-columns: 1fr; }
 }
*/
/* availableproduct */
.avaipro_withnumber_list .prod_name {
   font-size: 22px;
   font-weight: 500;
   margin-top: 10px;
}

.avaipro_withnumber_each {
   margin-top: 5px;
   margin-bottom: 25px;
}

.avaipro_withnumber_each .infobox .item {
   width: 100%;
   aspect-ratio: 590 / 480.43;
   position: relative;
   overflow: hidden;
   background-color: #f5f5f5;
}

.avaipro_withnumber_each .infobox .item a {
   display: block;
   width: 100%;
   height: 100%;
}

.avaipro_withnumber_each .infobox .item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.avaipro_withnumber_each .infobox_inner .imgbox {
   align-items: flex-start;
}

.index__filteroptions_flex .selectCustomBox .options_innerbox>div>label img {
   margin-right: 5px;
}

/* 材質篩選下拉：名稱與數量(N) 同一文字流，避免長名稱時 (N) 被 flex 推到右側、兩行時垂直置中浮右 */
.index__filteroptions_flex .selectCustomBox .options_innerbox>div>label {
   align-items: center;
}
.index__filteroptions_flex .selectCustomBox .options_innerbox>div>label>span {
   display: block;
}
.index__filteroptions_flex .selectCustomBox .options_innerbox>div>label>span>span {
   display: inline;
}

.avaipro_withnumber_each .payway_box .description {
   border-bottom: 0;
}

.pro_standard_detail .amount_flex .btn__style7 {
   width: 110px;
}

.pro_custom_dots>div {
   width: auto;
}
.pro_standard_detail .amount_calculate_flex{
   /* max-width: calc( ( 100% - 118px ) ); */
   width: 162px;
}
@media (max-width: 1488px){
    .avaipro_withnumber_each .amount_flex>div {
        width: 170px;
    }
}
@media (max-width: 1024px) {
   .avaipro_withnumber_each .infobox_inner {
      position: relative;
   }

   .avaipro_withnumber_each .amount_flex .amount_calculate_flex {
      margin-right: 10px;
      width: calc((100% - 140px));
   }

   .avaipro_withnumber_each .payway_box {
      display: block;
   }
   .avaipro_withnumber_each .pricebox{
      padding: 0 15px 12px 15px;
   }

   .avaipro_withnumber_each .pricebox .pricebox_inner {
      margin-top: 20px;
   }
   .pro_standard_detail .amount_calculate_flex{
   /* width: calc( ( 100% - 118px ) ); */
}
.pro_standard_detail .amount_flex .btn-cart{
   width: auto;
   padding: 0 16px;
}
}

@media (max-width: 768px) {
   /* 現貨列表頁：產生報價按鈕對齊 type1 詳情頁 —— 同寬 110×高 43，且與加入購物車右緣對齊。
      列表用 .amount_quote_box2（type1/再次訂購用無 2 的），原本無 CSS 約束被撐到 130×35。
      加入購物車在 .pricebox_inner(padding-right:10px) 內被右縮 10px，故產生報價也靠右並右縮 10px 對齊同一條線。 */
   .avaipro-index-section .amount_quote_box2 {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
      justify-content: flex-end;
      -ms-flex-align: center;
      align-items: center;
      box-sizing: border-box;
      padding-right: 10px;
   }
   .avaipro-index-section .amount_quote_box2 .btn__style7 {
      width: 110px;
      height: 43px;
   }
   /* 數量框與產生報價同高，對齊 type1（type1 手機版 .amount_calculate_flex 亦為 height:43） */
   .avaipro-index-section .controlsbox .amount_calculate_flex {
      height: 43px;
      box-sizing: border-box;
   }

   .pro_custom_dots {
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      margin-top: -17px;
      margin-bottom: 10px;
      transform: translate(0px, -5px);
   }

   .pro_custom_dots>div {
      width: 10px;
      height: 10px;
      margin: 0 5px;
      border-radius: 50%;
      padding: 0;
      background-color: #D8D8D8;
   }

   .pro_custom_dots>div.active {
      background-color: #3D9738;
   }

   .pro_custom_dots .s_img {
      display: none;
   }

   .pro_standard_detail .amount_flex {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: stretch;
      gap: 10px;
      /* 兩者的中間間距 */
   }

   /* 讓兩個子區塊各佔 50% */
   .pro_standard_detail .amount_flex>div {
      /* flex: 1; */
      /* width: 50%; */
      display: flex;
   }

   /* 數量選擇器內部撐滿 */
   .pro_standard_detail .amount_calculate_flex {
      width: calc( ( 100% - 148px ) ) ;
      justify-content: space-between;
      height: 43px;
      margin-right: 0;
   }
   .avaiprd_detailbox2 .pro_standard_detail .amount_flex>div {
      width: 50%;
   }


   /* 產生報價與下方「加入購物車」同寬並對齊右緣（total_flex 比上排右側內縮 padding+border）*/
   /* 客製頁 total_flex padding 8 + border 1 = 9px */
   .pro_standard_detail .amount_flex .btn__style7{
      width: 110px;
      margin-right: 9px;
   }
   /* 現貨頁外層 .avaiprd_detailbox 的 total_flex padding 10 + border 1 = 11px */
   .avaiprd_detailbox .pro_standard_detail .amount_flex .btn__style7{
      margin-right: 11px;
   }

   .pro_standard_detail .amount_calculate_flex .input {
      flex: 1;
      padding: 0 5px;
   }

   .pro_standard_detail .amount_calculate_flex .input input {
      width: 100%;
      text-align: center;
   }

   /* 加入購物車按鈕撐滿，並修正原本手機版被設為直向排列的問題 */
   .pro_standard_detail .amount_flex .btn-cart {
      width: 100% !important;
      height: auto;
      min-height: 45px;
      flex-direction: row !important;
      /* 強制改回橫向圖文排列 */
   }

   .pro_standard_detail .amount_flex .btn-cart:before {
      margin-right: 8px !important;
      margin-bottom: 0 !important;
   }
}

.index__category_flex .index__category_linkimg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

@media (max-width: 500px) {
   .avaipro-index-section .optionbox .sortbox {
      gap: 5px;
      padding: 5px 5px;
      width: 165px;
   }

   .avaipro-index-section .optionbox .sortbox .sort-select-box>select {
      min-width: 125px;
   }
}

.mention_q1 {
   color: #ffffff;
   font-size: 15px;
   border-radius: 50%;
   width: 21px;
   min-width: 21px;
   height: 21px;
   min-height: 21px;
   background-color: #3D9738;
   background-image: linear-gradient(180deg, #3d9738 25%, #b3d201 100%);
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   z-index: 1;
   padding-top: 3px;
   /* 與前方「出貨/付款/適用」文字留間距：inline-flex 會吃掉 HTML 的空格，靠 margin 補回 */
   margin-left: 5px;
   /* 垂直對齊文字中線，讓現貨列表/詳情頁的 ❓ 與客製頁一致（flex 情境會忽略此值，由 align-items 置中） */
   vertical-align: middle;
}

.mention_q1:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   border-radius: 50%;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.13, 0.89, 0.26, 0.97);
   transition-duration: 0.3s;
   opacity: .2;
   z-index: -1;
}

/* 客製商品詳情頁：讓問號 icon 與文字垂直置中，且 icon 不撐高「出貨/付款/適用」頁籤，
   使其與右側「評價」頁籤上下對齊（scope 限客製頁，不影響現貨頁與收藏頁的同名 icon） */
.cuspro_detail-index-section .applicable .description {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
   align-items: center;
}

.cuspro_detail-index-section .applicable .mention_q1 {
   margin-top: -3.5px;
   margin-bottom: -3.5px;
}

@media (max-width: 860px) {
   .mobile-info-action-row {
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      gap: 15px;
      margin-bottom: 15px;
   }

   .mobile-info-action-row .payway_box {
      flex: 0 0 auto;
      margin-bottom: 0 !important;
   }

   .mobile-info-action-row .other_link {
      flex: 0 0 auto;
      margin-bottom: 0 !important;
   }
}

.avaipro_withnumber_each .pricebox .unitbox_inner {
   border-radius: 5px;
}

@media (max-width: 400px) {
   .index__filteroptions_outer .index__filteroptions_flex .sizeoption .print_input_flex .inputbox input {
      width: 52px;
   }
}

@media (max-width: 1024px) {
    .avaipro_withnumber_each .infobox_inner {
        grid-template-columns: 1fr; 
        -ms-grid-columns: 1fr; /* 相容 IE/Edge */
    }

    .avaipro_withnumber_each .infobox_inner .imgbox {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin-bottom: 15px;
        justify-content: flex-start; 
    }

    .avaipro_withnumber_each .infobox_inner .detailbox {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding-left: 0; 
    }

    .avaipro_withnumber_each .infobox_inner .otherlinkbox {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .avaipro_withnumber_each .infobox_inner .controlsbox {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        padding-left: 0;
    }
    .mobile_bottom_links {
      display: flex !important;
      flex-direction: row; 
      justify-content: flex-start; 
      align-items: baseline;  
      flex-wrap: wrap;              
      gap: 15px;                    
      padding: 0 15px 25px 15px;     
      background-color: #ffffff;
  }

  .mobile_bottom_links .payway_box,
  .mobile_bottom_links .other_link {
      display: block !important;
      margin: 0;
}
  /* 出貨/付款 內層 .applicable 被 base.css `.payway_box>div:first-child` 加了 margin-right:10px，
     會讓它與「評價」的間距比其他多 10px；歸零讓三者間距一致（皆 15px flex gap）。
     需 (0,3,0) 才蓋得過 (0,2,1) 的來源規則 */
  .mobile_bottom_links .payway_box .applicable {
      margin-right: 0;
  }
.mobile_bottom_link .link_opinion{
   display: inline-block;
}
}
.avaiprd_detailbox .pro_standard_each .specinfo_grid .totalprice.value{
   font-size: 18px;
   color:#333;
   padding-top: 16px;
}

/* ============================================================
   現貨列表卡片：統一三個連結（出貨/付款/適用、評價、商品詳細資料）間距
   （覆蓋 screen.prefixer.css 2.0 原值；原 margin-top 桌機18/手機13 不一致）
   ============================================================ */
.avaipro_withnumber_each .controlsbox .other_link {
   margin-top: 13px;
   margin-bottom: 0;
}
.pro_standard_each .specinfo_grid{
   align-items: center;
    justify-content: center;
}
.contentfloat {
   transition: none !important;
}

@media (max-width: 769px){
   .pro_standard_each .specinfo_grid{
      margin: -11px 0px;
   }
}
/* 瓦楞紙板：尺寸範圍錯誤訊息會多串一行「長+寬<=250」（JS 用 \n 串接），需保留換行成兩行 */
.size_grid .inputbox .error_text {
   white-space: pre-line;
   line-height: 1.3;
}