/* =============================================================================================================================

         【 Comparison Table 比較表格統一 】 >> Product Listing (列表頁) / Detail Page (內頁) (Lightbox & Embeded Table)

                0. 通用格式 Table 相同結構 >>
                table.comparisontable

                1-1. 分享連結內頁 >> 頁面比較表 : (Share Page)
                #content .content-wrap .fluid-container.core-container:has(.table-responsive)
                #content .content-wrap .fluid-container.core-container div.table-responsive table.comparisontable

                1-2. 產品內頁 >> 崁入頁面比較表 : (頁面中) (#Product-Comparison)
                #product_detail .All-Rich-Content-Section section#Product-Comparison .container table.comparisontable

                2. 產品內頁 >> 跳 Lightbox 比較表 :
                #product_detail div#comparison_listing .modal-dialog .modal-content .modal-body div.table-responsive table.comparisontable

                3. 產品 Listing 列表頁 >> 跳 Lightbox 比較表 :
                #product_listing div#comparison_listing .modal-dialog .modal-content .modal-body div.table-responsive table.comparisontable


                >> 兩個 Lightbox 相同結構 :
                div#comparison_listing .modal-dialog .modal-content .modal-body div.table-responsive table.comparisontable


                >> Detail Page 內頁表格超過四個 or 五個產品 Embeded Table (Rich Content) >> .product-count-4 / .product-count-5
                table.comparisontable.product-count-4
                table.comparisontable.product-count-5


============================================================================================================================= */


/* 下方一般按鈕 (藍色通用按鈕/ 高度) >> 上方彈出式【 Comparison Basket 】+【 Lightbox 樣式 】+【 Share Link 頁面 】 */
.fluid-container.core-container:has(.table-responsive.comparison_share) .btn.btn-info,
#comparison_landings .btn.btn-info, 
#dialog_sharelink .btn.btn-info, 
#comparison_listing .btn {
    min-height: 36px;
}

/* 下方一般按鈕 (藍色通用按鈕/ 最少寬度) >> 【 Lightbox 樣式 】+【 Share Link 頁面 】 */
#dialog_sharelink .btn.btn-info, 
#comparison_listing .btn {
    min-width: 110px !important;
}

/* 下方一般按鈕 (藍色按鈕(頁面中)/ 最少寬度) >> 上方彈出式【 Comparison Basket 】+【 Share Link 頁面 】 */
.fluid-container.core-container:has(.table-responsive.comparison_share) .btn.btn-info,
#comparison_landings .btn.btn-info {
    min-width: 200px !important;
}


/* Lightbox 標題 */
.modal-header h4 {
    font-size: 1.2em !important;
}


/* 481 以上 */
@Media (min-width: 481px) {

    /* 下方一般按鈕 (藍色按鈕) >> 上方彈出式【 Comparison Basket 】+【 Share Link 頁面 】 >> 有兩個按鈕以上 >> 第一個按鈕 */
    .table-responsive.comparison_share + .modal-footer .btn.btn-info:has(+ .btn.btn-info), 
    #comparison_landings .btn.btn-info:has(+ .btn.btn-info) {
    margin-right: 8px;
    }

    /* 下方一般按鈕 (藍色按鈕) >> 上方彈出式【 Comparison Basket 】+【 Share Link 頁面 】 >> 有兩個按鈕以上 >> 第二個按鈕 */
    .modal-footer .btn+.btn {
    /* margin-left: 10px; */
    }

}



/* 480 以下 */
@Media (max-width: 480px) {

    /* 下方一般按鈕 (藍色通用按鈕/ 高度) >> 上方彈出式【 Comparison Basket 】+【 Lightbox 樣式 】+【 Share Link 頁面 】 */
    .fluid-container.core-container:has(.table-responsive.comparison_share) .btn.btn-info,
    #comparison_landings .btn.btn-info, 
    #dialog_sharelink .btn.btn-info, 
    #comparison_listing .btn {
    min-height: 30px;
    }

    /* 下方一般按鈕 (藍色通用按鈕/ 在同一排) >> 【 Lightbox 樣式 】+【 Share Link 頁面 】+上方彈出式【 Comparison Basket 】 */
    #comparison_landings .btn.btn-info,  
    #dialog_sharelink .btn.btn-info, 
    #comparison_listing .btn {
    min-width: 100px !important;
    min-width: 85px !important;
    width: auto;
    /* padding: 6px 20px; */
    }

    /* 下方一般按鈕 (藍色/ 上下排列) >> 上方彈出式【 Comparison Basket 】+【 Share Link 頁面 】 */
    .table-responsive.comparison_share + .modal-footer .btn.btn-info:has(+ .btn.btn-info), 
    .fluid-container.core-container:has(.table-responsive.comparison_share) .btn.btn-info, 
    #comparison_landings .btn.btn-info {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 2% !important;
    }

    /* 下方一般按鈕 (Only Lightbox/ 上下排列) (藍色按鈕) >> 上方彈出式【 Comparison Basket 】+【 Share Link 頁面 】 >> 有兩個按鈕以上 >> 第二個按鈕 */
    #comparison_landings .modal-footer .btn+.btn {
    margin-left: 0px;
    }

}










/* =====================================================================================================
	        0-1. 上方彈出式【 Comparison Basket 】 >> #comparison_landings .well.well-compare
===================================================================================================== */

/* 上方彈出式 【 *** Comparison Basket 】 */
#comparison_landings .well-compare {
    margin: 20px 0;
    padding-top: 20px !important;

    padding: 19px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* 上方彈出式 【 *** Comparison Basket 】>> 與下方的距離 */
/* Compare Model >> Compare Box:last-Child (會有兩個以上同時存在) */
#comparison_landings .container:last-child .well-compare {
    margin-bottom: 6% !important;
}

/* 上方彈出式 【 *** Comparison Basket 】>> 內部下方產品區 (不包含 Title) */
#comparison_landings .well-compare .compare-modal {
    padding: 0 2%;
}

/* 上方彈出式 【 *** Comparison Basket 】 >> 移除按鈕 Button */
.well.well-compare hr {
    margin-top: 20px;
    margin-bottom: 60px;
}

/* 表格內 + 上方彈出式 【 *** Comparison Basket 】 >> 統一圖片樣式 */
.well.well-compare .compare-modal img, 
.compare-modal img {
    width: 100%;
    max-width: 120px;
}

/* 表格內 + 上方彈出式 【 *** Comparison Basket 】 >> 統一圖片樣式 */
.well.well-compare .compare-modal img:hover, 
.compare-modal img:hover {
    opacity: 0.75;
}

/* 上方彈出式 【 *** Comparison Basket 】 >> 移除按鈕 Button */
.well.well-compare .compare-modal .compare-modal.remove-btn {
    font-size: .85em;
}



/* 480 以下 */
@Media (max-width: 480px) {

    /* 上方彈出式/ 展開時 【 *** Comparison Basket 】>> 與 .single-product 下方的距離增加 */
    /* Compare Model >> Compare Box:last-Child (會有兩個以上同時存在) */
    #product_detail:has(#comparison_landings.in) .single-product {
    /* margin-top: -50px; */
    margin-top: 0px; /* 把原本 -50px 恢復為 0 */
    }

    /* 上方彈出式 【 *** Comparison Basket 】>> 與下方的距離 */
    /* Compare Model >> Compare Box:last-Child (會有兩個以上同時存在) */
    #comparison_landings.in .container:last-child .well-compare {
    margin-bottom: 10% !important;
    }

}










/* =====================================================================================================
	                                0-2. 比較表格【 通用樣式 】 >> Default Style
===================================================================================================== */


/* 比較表格 (通用) >> 總表格樣式 */
.table.comparisontable {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 比較表格 (通用) >> 文字大小 */
.table.comparisontable tr th, 
.table.comparisontable tr td {
     font-size: 0.95em;
     font-size: 0.85em;
     padding: 10px;
}

/* 比較表格 (通用) >> 表格內容樣式 */
.table.comparisontable th, 
.table.comparisontable td {
    border: 1px solid #eee;
    text-align: left;
    vertical-align: top;
    /* width: 100px; */
}


/* 比較表格 (通用) >> 表格內容樣式 >> td 按鈕置中 */
.table.comparisontable td.text-center, 
.table.comparisontable th.text-center.ftitle {
    text-align: center;
}

/* 比較表格 (通用) >> 文字加粗 */
.table.comparisontable th, 
.table.comparisontable b {
    font-weight: bold;
}

/* 比較表格 (通用) >> 表格內容樣式 >> 最靠左 Features 標題 */
.table.comparisontable th.ftitle{
    height: 50px;
    vertical-align: top;
    width:5%;
}


/* 比較表格 (通用) >> Product Name (for Link) */
.table.comparisontable .compare-modal .product-name a {
    font-size: 1.1em !important;
    display: inline-block;
    margin: 8px 0;
}

/* 比較表格 (通用) >> Product Name (for Link) */
.table.comparisontable .compare-modal .product-name a:hover {
    color: #00a8ff !important;
}


/* 比較表格 (通用) >> 圖片樣式 */
table.table.comparisontable .compare-modal img {
    padding: 0;
    width: auto;
    max-width: 200px;
    max-height: 60px;
    margin: 0 auto;
    mix-blend-mode: multiply !important;
}


/* 表格內 >> 圖片樣式 */
.compare-modal img {
    width: 100%;
    max-width: 120px;
}

/* 表格內 >> 圖片樣式 (Hover) */
.compare-modal img:hover {
    opacity: 0.75;
}



/* 比較表格 (通用) >> After打勾 >> Print 頁面時不能用 Font Awesome, 要用一般打勾 */
table.table.comparisontable .fa-check.Icon-Option::before, 
table.table.comparisontable .fa-check::before {
    content: '✔';
    font-size: 0.85em;

    font-family: "Font Awesome 5 Free";
    content: "\f00c";
}

/* (非簡中) 比較表格 (通用) >> After打勾 >> Print 頁面時不能用 Font Awesome, 要用一般打勾 */
body:not(.locale_cn-zh) table.table.comparisontable .fa-check.Icon-Option::before, 
body:not(.locale_cn-zh) table.table.comparisontable .fa-check::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";

    font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
	font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */
	content: "check"; /* 打勾 */
	content: "\e5ca";
    font-weight: 500;
    font-weight: 600;
    font-size: 1.6em;
}



/* 比較表格 (通用) >> 表格內容樣式 >> 【 最靠左固定區 】最靠左(含左上角空白處) */
#comparison_listing .table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
#comparison_listing table.table.comparisontable tr:first-child td:first-child, /* 空白 */
.table.comparisontable tr th:first-child, /* 左邊標題字 */

.table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
.table.table.comparisontable tr:first-child td:first-child, /* 空白 */
.table.comparisontable tr th:first-child /* 左邊標題字 */ {
    z-index: 1;
    position: sticky;
    left: 0;

    z-index: 10;
    width: 5% !important;
    min-width: 165px;
}



/* 比較表格 (通用) >> 表格內容樣式 >> 【 最靠左固定區 】>> Line Left + Line Right */
.table.comparisontable tr th:first-child::before, 
.comparisontable th.ftitle:first-child::before, 
#comparison_listing table tr td:first-child::before, 

.table.comparisontable tr th:first-child::after, 
.comparisontable th.ftitle:first-child::after, 
#comparison_listing table tr td:first-child::after {
    content: '';
    display: block;
    width: 1px;
    background-color: #e5e5e5;
    position: absolute;
    z-index: 11;
    height: 100%;
    top: 0px;
}


/* 比較表格 (通用線條) >> 表格內容樣式 >> 【 最靠左固定區 】>> Line Left */
.table.comparisontable tr th:first-child::before, 
.comparisontable th.ftitle:first-child::before, 
#comparison_listing table tr td:first-child::before {
    left: 0px;
}

/* 比較表格 (通用線條) >> 表格內容樣式 >> 【 最靠左固定區 】>> Line Right */
.table.comparisontable tr th:first-child::after, 
.comparisontable th.ftitle:first-child::after, 
#comparison_listing table tr td:first-child::after {
    right: -1px;
}




/* 990 以下 */
@Media (max-width: 990px) {

    /* 比較表格 (通用) >> 表格內容樣式 >> 【 最靠左固定區 】 Features 標題區(不含左上角空白處) */
    #comparison_listing .table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
    #comparison_listing table.table.comparisontable tr:first-child td:first-child, /* 空白 */
    .table.comparisontable tr th:first-child, /* 左邊標題字 */
    
    .table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
    .table.table.comparisontable tr:first-child td:first-child, /* 空白 */
    .table.comparisontable tr th:first-child /* 左邊標題字 */ {
    width: 140px !important;
    min-width: 140px;
    white-space: unset;/* j文字自動斷行 */

    background-color: #fff; 
    }

    /* 【 Lightbox 樣式 】 >> Show Less(最左) >> Option 字樣隱藏 (否則會變成跑版) */
    #comparison_listing .table.comparisontable tr:first-child th.ftitle:first-child b {
    display: none !important;
    }

}




/* 480 以下 */
@Media (max-width: 480px) {

    /* 比較表格 (通用) >> 表格內容樣式 >> 【 最靠左固定區 】 Features 標題區(不含左上角空白處) */
    #comparison_listing .table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
    #comparison_listing table.table.comparisontable tr:first-child td:first-child, /* 空白 */
    .table.comparisontable tr th:first-child, /* 左邊標題字 */
    
    .table.comparisontable tr:first-child th.ftitle:first-child, /* Show Less(最左) */
    .table.table.comparisontable tr:first-child td:first-child, /* 空白 */
    .table.comparisontable tr th:first-child /* 左邊標題字 */ {
    width: 140px !important;
    min-width: 140px;
    white-space: unset;/* j文字自動斷行 */

    background-color: #fff; 
    }

    /* 【 Lightbox 樣式 】 >> Show Less(最左) >> Option 字樣隱藏 (否則會變成跑版) */
    #comparison_listing .table.comparisontable tr:first-child th.ftitle:first-child b {
    display: none !important;
    }

}














/* =====================================================================================================
	                        1-1. 比較表格 【 Share Link 頁面 】中樣式 >> for Share Link 頁面中
===================================================================================================== */

/* Share Link 頁面中 >> 比較表格上一層寬度 container */
.fluid-container.core-container:has(.table-responsive.comparison_share) {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 45px;
    margin-bottom: 4%;
}

/* (不包含產品列表及內頁) Share Link 頁面中 >> 比較表格上一層寬度 container 
.fluid-container.core-container:has(#product_detail, #product_listing) {
    width: unset;
}
*/


/* 【 Share Link + Print 頁面 】空白格 : Optioin 文字隱藏 */
.table-responsive.comparison_print .table.comparisontable tr:first-child th, 
.table-responsive.comparison_share .table.comparisontable tr:first-child th {
    color: transparent !important;
    opacity: 1 !important;
    /* 透明度設成 0 >> 會無法固定在左邊
    opacity: 0 !important; 
    */
}


/* Share Link 頁面中 >> 比較表格上一層 >> H2 */
.fluid-container.core-container:has(.table-responsive.comparison_share) h2 {
    margin-bottom: 10px;
}


/* 480 以下 */
@Media (max-width: 480px) {

    /* Share Link 頁面中 >> 比較表格上一層寬度 container */
    .fluid-container.core-container:has(.table-responsive.comparison_share) {
    width: 95%;
    margin: 0 auto;
    }

    /* (不包含產品列表及內頁) Share Link 頁面中 >> 比較表格上一層寬度 container 
    .fluid-container.core-container:has(#product_detail, #product_listing) {
    width: unset;
    }
    */

}



















/* =====================================================================================================
	                1-2. 比較表格 【 Embeded 產品內頁 】中樣式 >> for 崁入頁面中
===================================================================================================== */


/* All 比較表格區的 (Comparison Table) >> td + th >> 字級大小 */
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table > tfoot > tr > td, 

.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table > tfoot > tr > td {
    font-size: 0.95em;
    padding: 10px;
}


/* All 比較表格區的 (.product-count-4/ 超過 5 個 Item) (Comparison Table) >> td + th >> 字級大小 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-4 > tfoot > tr > td, 

.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-4 > tfoot > tr > td {
    font-size: 0.85em;
}
*/


/* All 比較表格區的 (.product-count-5/ 超過 5 個 Item) (Comparison Table) >> td + th >> 字級大小 */
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison .Rich-Content-Section[class*="image_"] .table.product-count-5 > tfoot > tr > td, 

.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > thead > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > tbody > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > tfoot > tr > th, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > thead > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > tbody > tr > td, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal .table.product-count-5 > tfoot > tr > td {
    font-size: 0.85em;
}


/* 【 Embeded 產品內頁 】空白格 (Option) */
.single-product .product #overview-tab .All-Rich-Content-Section table.table.comparisontable tr:first-child th:first-child {
    color: transparent !important;
    opacity: 1 !important;
}


.single-product #overview-tab.tab-content .All-Rich-Content-Section table.table.comparisontable tr:first-child th:first-child, /* 空白格 */
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] tr:first-child, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .table.comparisontable tr:first-child, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section[class*="image_"] .compare-modal, 
.single-product #overview-tab.tab-content .All-Rich-Content-Section .Rich-Content-Section[class*="image_"].compare .compare-modal {
    background-color: #f9f9fa;
}


@media (max-width: 480px) {

    /* 比較表的最外層要能滑動 >> 否則連下面的 .comparisontable 也沒辦法動 */
    .single-product .product #overview-tab .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section, 
    .single-product .product #overview-tab #Product-Comparison {
    overflow-x: unset !important; 
    }

    /* 比較表的中間層要能滑動 >> 否則連下面的 .comparisontable 也沒辦法動 */
    .single-product .product #overview-tab .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section .wording_block > div:has(.table.comparisontable), 
    .single-product .product #overview-tab #Product-Comparison .wording_block > div:has(.table.comparisontable), 

    .single-product .product #overview-tab .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section #compareid, 
    .single-product .product #overview-tab #Product-Comparison #compareid {
    overflow-x: auto; 
    }

    /* 比較表的最外層要能滑動 >> 下面的 .comparisontable */
    .single-product .product #overview-tab .All-Rich-Content-Section #Product-Comparison.Rich-Content-Section .comparisontable, 
    .single-product .product #overview-tab #Product-Comparison .comparisontable {
    /* overflow-x: auto; */
    }

}














/* =====================================================================================================
	                    2. 比較表格 【 Lightbox 樣式 】 >> 列表頁面 + 產品內頁
===================================================================================================== */

/* 比較表格 (Lightbox) >> 跳出視窗寬度 (Desktop) */
div#comparison_listing .modal-dialog {
    width: 90% !important;
    width: 87% !important;
    margin: 0 auto;
}


/* 最上最左區 */
#comparison_listing .comparisontable th, 
#comparison_listing th {
    /* 桌機 Desktop 不能填白色, 因為滑過無法變灰色 
    background: #fff !important; 
    */
}


/* 比較表格 (Lightbox) >> 文字大小 */
#comparison_listing table.table.comparisontable tr td, 
#comparison_listing table.table.comparisontable tr th {
    font-size: .85em;
    padding: 8px;
}


/* 比較表格 (Lightbox) >> 表格內容樣式 >> 最靠左 Features 標題 */
#comparison_listing .table.comparisontable th.ftitle{
    border-left: none;
    border-right: none;
}


/* 比較表格 (Lightbox) >> 跳出視窗寬度 (Desktop) >> 通用 Button */
#comparison_listing .comparisontable a.btn_border, 
#comparison_listing .comparisontable .btn_border {
    color: #00a8ff !important;
    border: 2px solid #00a8ff;
    border-radius: 30px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    width: auto;
}

/* 比較表格 (Lightbox) >> 跳出視窗寬度 (Desktop) >> 通用 Button (Hover) */
#comparison_listing .comparisontable a.btn_border:hover, 
#comparison_listing .comparisontable .btn_border:hover {
    color: #fff !important;
    border-color: #00b7de;
    background-color: #00b7de;
}


/* 比較表格 (Lightbox) >> 跳出視窗寬度 (Desktop) >> Only Option Button (Show More/ Less) >> 位置特調 */
#comparison_listing .comparisontable tr th:first-child .btn_border {
    margin-left: 10px;
}

/* 空白格 : Optioin 文字隱藏 */
#comparison_listing .table.comparisontable tr:first-child th {
    color: unset !important;
    opacity: unset !important;
}

/* 比較表格 (Lightbox) >> 跳出視窗寬度 (Desktop) >> 通用 Button >> Icon */
#comparison_listing .table.comparisontable .icon-plus, 
#comparison_listing .table.comparisontable .icon-minus, 

.table.comparisontable .icon-plus, 
.table.comparisontable .icon-minus {
    margin-right: 5px;
    vertical-align: bottom;
}



/* 比較表格 (Lightbox) >> 圖片樣式 */
div#comparison_listing table.comparisontable .compare-modal img {
    padding: 0;
    max-width: 120px;
}



/* 比較表格 (Lightbox) >> Line Left (刪除 .ftitle (Show Less) ) */
#comparison_listing .table.comparisontable th.ftitle:first-child::before,
#comparison_listing .comparisontable th.ftitle:first-child::before {
    content: none !important;
}

/* 比較表格 (Lightbox) >> Line Rigth (刪除 .ftitle (Show Less) ) */
#comparison_listing .table.comparisontable th.ftitle:first-child::after, 
#comparison_listing .comparisontable th.ftitle:first-child::after {
    content: none !important; 
}




/* 480 以下 */
@Media (max-width: 480px) {

    /* 比較表格 (Lightbox) >> 跳出視窗寬度 (Mobile) */
    div#comparison_listing .modal-dialog {
    width: unset !important;
    max-width: unset;
    }

}
















/* =====================================================================================================
	*** 多國語言優化 【Multi-Language_Modify】 >> Adjustment for All Page (多國別語言 / 客製內容修改)
===================================================================================================== */





/******************** for 比較表格【 通用樣式 】 >> Default Style ********************/

/*************** 第一欄寬度 ****************/
body[class*="locale_ru-"] .table.comparisontable tr th:first-child,
body[class*="locale_ru-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_la-"] .table.comparisontable tr th:first-child,
body[class*="locale_la-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_pl-"] .table.comparisontable tr th:first-child,
body[class*="locale_pl-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_de-"] .table.comparisontable tr th:first-child,
body[class*="locale_de-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_es-"] .table.comparisontable tr th:first-child,
body[class*="locale_es-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_it-"] .table.comparisontable tr th:first-child,
body[class*="locale_it-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_nl-"] .table.comparisontable tr th:first-child,
body[class*="locale_nl-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_pt-"] .table.comparisontable tr th:first-child,
body[class*="locale_pt-"] .comparisontable th.ftitle:first-child, 
body[class*="locale_se-"] .table.comparisontable tr th:first-child,
body[class*="locale_se-"] .comparisontable th.ftitle:first-child {
    min-width: 200px;
}

/*************** Table 內圓形按鈕 ****************/
body[class*="locale_ru-"] .table.comparisontable .btn_border, 
body[class*="locale_ru-"] .comparisontable .btn_border, 
body[class*="locale_la-"] .table.comparisontable .btn_border, 
body[class*="locale_la-"] .comparisontable .btn_border, 
body[class*="locale_pl-"] .table.comparisontable .btn_border, 
body[class*="locale_pl-"] .comparisontable .btn_border, 
body[class*="locale_de-"] .table.comparisontable .btn_border, 
body[class*="locale_de-"] .comparisontable .btn_border,
body[class*="locale_es-"] .table.comparisontable .btn_border,  
body[class*="locale_es-"] .comparisontable .btn_border, 
body[class*="locale_it-"] .table.comparisontable .btn_border, 
body[class*="locale_it-"] .comparisontable .btn_border, 
body[class*="locale_nl-"] .table.comparisontable .btn_border,
body[class*="locale_nl-"] .comparisontable .btn_border, 
body[class*="locale_pt-"] .table.comparisontable .btn_border,
body[class*="locale_pt-"] .comparisontable .btn_border, 
body[class*="locale_se-"] .table.comparisontable .btn_border, 
body[class*="locale_se-"] .comparisontable .btn_border {
    font-size: 11px;
}









/******************** for 比較表格 【 Lightbox 樣式 】 >> 列表頁面 + 產品內頁 ********************/

/*************** 第一欄寬度 ****************/
body[class*="locale_ru-"] #comparison_listing table tr td, 
body[class*="locale_ru-"] #comparison_listing table tr th, 
body[class*="locale_la-"] #comparison_listing table tr td, 
body[class*="locale_la-"] #comparison_listing table tr th, 
body[class*="locale_pl-"] #comparison_listing table tr td, 
body[class*="locale_pl-"] #comparison_listing table tr th, 
body[class*="locale_de-"] #comparison_listing table tr td, 
body[class*="locale_de-"] #comparison_listing table tr th, 
body[class*="locale_es-"] #comparison_listing table tr td, 
body[class*="locale_es-"] #comparison_listing table tr th, 
body[class*="locale_it-"] #comparison_listing table tr td, 
body[class*="locale_it-"] #comparison_listing table tr th, 
body[class*="locale_nl-"] #comparison_listing table tr td, 
body[class*="locale_nl-"] #comparison_listing table tr th, 
body[class*="locale_pt-"] #comparison_listing table tr td, 
body[class*="locale_pt-"] #comparison_listing table tr th, 
body[class*="locale_se-"] #comparison_listing table tr td, 
body[class*="locale_se-"] #comparison_listing table tr th {
    font-size: .8em;
}