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


Product Listing/ Filter Custimization Page (特殊產品列表頁面/ 可複選次分類選單/ 可 Filter 規格) 

>> #multi_product_category_list (全包外區塊)

>> 大類 Category    >> p-product-heading-contents >> ul.p-local-nav > li.p-local-nav__item > a > i & font

>> 次類 Subcategory (純字模式) >> p-product-heading-contents >> #subcategory_lists.checkbox-box > form > .checkbox > label > span.checkmark/ :after (打勾) & span.checkbox-text font

>> 次類 Subcategory (圖文模式) >> p-product-heading-contents >> #subcategory_lists.checkbox-box > form > .checkbox.checkbox-withimg > label > span.checkmark/ :after (打勾) & span.checkbox-text font & img



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


/*********** for 亞洲 (日文字型) (from Google) ***********/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

.locale_jp-ja *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign):not(.icon-angle-up):not([class*="icon-"]):not([class*="fas_"])::before,
.locale_jp-ja *:not(span):not(a):not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(li):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign):not(.icon-angle-up):not([class*="icon-"]):not([class*="fas_"])::after,
.locale_jp-ja *:not(i):not(.fa):not(.fa_v5):not(.fas_v5):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.icon-question-sign):not(.icon-angle-up):not([class*="icon-"]):not([class*="fas_"]) {
    font-family: "Roboto", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Segoe UI", "Segoe UI Light", "Myriad Set Pro", Microsoft JhengHei, "微軟正黑體", Heiti TC, Microsoft YaHei, "微軟雅黑體", simhei, PMingLiU, 新細明體, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, ＭＳ Ｐゴシック, Malgun Gothic, Dotum, Gulim, Trebuchet MS, Lucida Grande, Verdana, Arial, sans-serif !important;
}




/************************************ 【Others】 ************************************/

/* Filter 清除篩選按鈕 */
.locale_jp-ja #filter_lists .well-filter a.reset, 
.locale_jp-ja .well-filter a.reset {
    font-size: 0.7em !important;
}

/* Filter 清除篩選按鈕::after */
.locale_jp-ja .well-filter a.reset::after {
    font-size: 1em !important;
    top: 6px;
}

/* Sort block 標題 */
.locale_jp-ja #Sortblock .sorttitle {
    font-size: 0.9em;
    margin-left: 5px;
}





/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button {
    display: flex;/* 寬度填滿空間 */
	align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
	align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */ 

	justify-content: center; /* 水平置中 */
}

/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button [class*="icon-"]::before,
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button .i::before,
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button {
    color: #004276;
}

/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button {
    font-size: 1em;
    line-height: 35px;
    background-color: transparent;
    height: auto;
    text-shadow: none;
    /* color: #18b0cf; */
    border: 1px solid #18b0cf;
    border-radius: 3px;

    border: 1px solid #004276;
    background-color: transparent;
}


/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button:hover [class*="icon-"]::before,
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button:hover .i::before,
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button:hover {
    color: #fff;
}

/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button:hover {
    background-color: #333;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}


/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a [class*="icon-"],
#content:has(#multi_product_category_list) .product_button .discontinued-product a .fa {
    top: 0px !important;
}


/* 產品彈出比較區塊 (無比較時平常隱藏) >> 上方間距 */
#product_listing:has(#multi_product_category_list) #comparison_landings .well-compare {
    margin-top: 5%;
}

/* Mobile 用 / 只有搜尋欄位及按鈕時 */
#mobile-product-header .mobile-btn-container:has(form.form-inline) {
    margin-top: 20px;
}

/* Mobile 用 / 只有搜尋欄位及按鈕時 */
#mobile-product-header form.form-inline {
    /* margin-top: 15px; */
    width: 100%;
}

@media (min-width: 700px) {

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    padding-top: unset;
    text-align: center;
    display: flex !important;
    gap: 10px;
    gap: 5px;
    justify-content: flex-start; /* 靠左對齊 */
    }

    /* 上方三顆框線按鈕 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product > div:has(.button) {
    margin-top: unset !important;
    flex-grow: 0;
    margin-right: 10px !important;
    }

}


@media (min-width: 991px) {

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    justify-content: flex-end; /* 改為靠右對齊, 左邊有標題 (行動 899 以下改靠右) */
    /* padding-right: 0; */
    }

}

@media (min-width: 990px) {}

@media (min-width: 1024px) {}


@media (min-width: 1200px) {

    /* Product Item 沒有 Add to Quote Cart >> 要增加高度 */
    .product_list .product-record-single:not(div.product-desc + div) {
    }

    /* Product Item 沒有 Add to Quote Cart >> 要增加高度 */
    .product_list .product-record-single .sect-divider:not(div.product-desc + div) {
    /* min-height: 414px; */
    }

    /* Product Item 有 Add to Quote Cart */
    .product_list .product-record-single .sect-divider:has(div.product-desc + div) {}

}


@media (max-width: 1400px) {

	/* (for JP >> Custimization Page) >> Left Filter Bar >> Cancel */
	.B2C-Style .locale_jp-ja #filter_lists .well-filter a.reset, 
	.B2C-Style .locale_jp-ja .well-filter a.reset {
	font-size: 0.6em !important;
	}

}


/* 1099 以下 */
@media (max-width: 1099px) {

    /* 上方三顆框線按鈕 >> 最後一個右邊不要距離 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product > div:has(.button):last-child {
    margin-right: 0px !important;
    }

}

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

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    justify-content: flex-start; /* 改為靠左對齊 */
    padding-left: 0;
    }

}


/* 767 以下 */
@media (max-width: 767px) {

    #mobile-product-header form.form-inline {
    /*
    margin-left: 5%;
    width: 90%;
    */
    }

}


/* 699 以下 */
@media (max-width: 699px) {

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button {
    padding-left: 15px;
    padding-right: 15px;
    }

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    justify-content: flex-start; /* 改為靠左對齊 */
    padding-left: 0;
    }

    /* 上方三顆框線按鈕 >> 內外層 >> 同寬 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product,
    #content:has(#multi_product_category_list) .product_button {
    width: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
    }

    /* 上方三顆框線按鈕 >> 外層 */
    #content:has(#multi_product_category_list) .product_button .discontinued-product > div:has(.button) {
    margin-right: 0 !important;
    }

}


@media (max-width: 480px) {

    #mobile-product-header form.form-inline {
    /*
    margin-left: 5%;
    width: 90%;
    */
    }

}



/************************************ 【一般共用】>> 大類 Category + 次類 Subcategory ************************************/

/* 主/ 次 Selection 全包外區塊 */
#multi_product_category_list {
    padding: 0 !important;
    margin-top: 10px;
    margin-bottom: 15px;

    /* border-top: 1px solid #ddd; */
}

/* 大類 Category (大區塊) + 次類 Subcategory (大區塊) */
.checkbox-box .checkbox label, 
.checkbox-box,
ul.p-local-nav, 
.p-local-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

/* 大類 Category (大區塊) + 次類 Subcategory (大區塊) */
.checkbox-box,
ul.p-local-nav, 
.p-local-nav {
    flex-direction: row; /* 要設定才能使用不同 gap 屬性 */
    gap: 10px;/* item 間隙 >> 全部 10px */
    gap: 15px 10px;/* item 間隙 >> 下:15px/ 右:10px */
    gap: 10px 8px;/* item 間隙 */
    gap: 12px 8px;/* item 間隙 */

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	box-sizing: inherit;

    margin-bottom: 40px;
}

/* 大類 Category (大區塊) + 次類 Subcategory (大區塊) */
.checkbox-box,
ul.p-local-nav, 
.p-local-nav {
    padding: 15px !important;
}



/* 大類 Category/ li item (一般狀態) + 次類 Subcategory / checkbox (一般狀態) */
.checkbox-box .checkbox, 

li.p-local-nav__item a, 
.p-local-nav__item a, 
li.p-local-nav__item, 
.p-local-nav__item {
    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
    align-content: center;   /* 垂直置中 >> 作用於多行（或多列）的子項目 */
    justify-content: center; /* 水平置中 */
    flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */

    box-sizing: border-box;
}


/* 大類 Category/ li item (一般狀態) + 次類 Subcategory / checkbox (一般狀態) */
.checkbox-box .checkbox, 

li.p-local-nav__item, 
.p-local-nav__item {
    flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */

    position: relative;
    border-style: solid;
    border-color: #cacaca;
    border-width: 1px;
    margin-top: -1px;
    background-color: #fff;
    transition: box-shadow 
    cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;

    box-sizing: border-box;
    overflow: hidden;
}



/* 大類 Category/ li item (一般狀態) */
ul.p-local-nav, 
.p-local-nav {
}


/* 大標題 / 副標題 /類別小標題/ checkbox text */
.checkbox-box .checkbox label .checkbox-text, 
#product_listing .product_button h1/* 大標題 */, 
#product_listing .checkbox-box h2/* 副標題 */,
#product_listing h1/* All 標題 */ {
    line-height: 1.3em !important;
}

/* checkbox text */
.checkbox-box .checkbox label .checkbox-text {
    line-height: 1.4em !important;
}

/* 大標題 / 副標題 /類別小標題/ Category item/ checkbox text */
.checkbox-box .checkbox label .checkbox-text, 
.checkbox-box .checkbox label, 
li.p-local-nav__item a, li.p-local-nav__item a font, 
.p-local-nav__item a, .p-local-nav__item a font, 
#product_listing .product_button h1/* 大標題 */, 
#product_listing .checkbox-box h2/* 副標題 */,
#product_listing h1/* All 標題 */ {
    letter-spacing: -0.05rem;
}

/* Category item text */
li.p-local-nav__item a, li.p-local-nav__item a font, 
.p-local-nav__item a, .p-local-nav__item a font {
    letter-spacing: -0.01rem;
}

/* 大標題 / 副標題 /類別小標題 */
#product_listing .product_button h1/* 大標題 */, 
#product_listing .checkbox-box h2/* 副標題 */,
#product_listing h1/* All 標題 */ {
    font-size: 1.9em !important;
    font-weight: 400 !important;
}

/* 大標題 / 副標題 (不包含 :類別小標題) */
#product_listing .p-product-heading-contents h2.subtitle /* 大類副標 (Mobile 出現用) */,
#product_listing .product_button h1/* 大標題 */, 
#product_listing .checkbox-box h2/* 副標題 */ {
    color: #000;
    font-weight: 500 !important;
}

/* 大類副標 (Mobile 出現用) */
#product_listing .p-product-heading-contents h2.subtitle {
    /*
    margin: 25px 0 15px;
    margin: 25px 0 5px;
    */
}

/* 大類副標 (Mobile 出現用) */
#product_listing:has(.select-indust .dropdown) .p-product-heading-contents h2.subtitle:not(#subcategory_form .subtitle) {
    margin-top: 5px;
    margin-bottom: 10px;
}

/* 副標題 (不包含 :類別小標題) */
#product_listing .checkbox-box h2.subtitle/* 副標題 */ {
    display: inline-block;
}

/* 副標題 (不包含 :類別小標題) */
#product_listing .checkbox-box h2.subtitle + span.ajax-loader/* Loading for 副標題 */ {
    left: 1.5%;
}


/* 縮減單一子類區底部距離 (Listing Item 區塊) */
#product_listing:has(#multi_product_category_list) #product_lists .product_list {
    margin-bottom: 20px;
}

/* 縮減線條 hr 距離高度 (Listing Item 裡面) */
#product_listing:has(#multi_product_category_list) #product_lists hr {
    border-top: 1px solid #eaeaea;
    margin: 0px 0 60px;
    margin: 15px 0 50px;
    margin: 5px 0 50px;
}



/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust:has(.dropdown .btn-default) {
    margin: 0px auto 10px;
    position: relative;
    z-index: 3;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) >> 往上移 */
#product_listing #multi_product_category_list .select-indust:has(.dropdown #category_filter.btn-default) {
    transform: translateY(-5px);
    margin-bottom: 3%;
}


/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .dropdown:has(#category_filter.btn-default) {
    width: 100%;
    /* padding: 0 1.6%; */
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .dropdown #category_filter.btn-default {
    color: #222;
    font-size: 1.2em !important;
    font-weight: 400;
    text-align: left;

    display: block;
    position: relative;
    width: 100% !important;
    min-width: 200px;
    height: 48px;
    padding: 12px 15px;
    margin: 0px auto;
    /* margin: 0px auto 20px; */
    
    border-radius: 4px;
    border: 1px solid #e3e2e2;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
    
    overflow: hidden; 
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing #multi_product_category_list .dropdown #category_filter.btn-default {
    border: 1px solid #cacaca;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing #multi_product_category_list .dropdown #category_filter.btn-default:checked,
#product_listing #multi_product_category_list .dropdown #category_filter.btn-default:hover,
#product_listing #multi_product_category_list .dropdown #category_filter.btn-default:active,
#product_listing #multi_product_category_list .dropdown #category_filter.btn-default:focus,

#product_listing .dropdown #category_filter.btn-default:checked,
#product_listing .dropdown #category_filter.btn-default:active,
#product_listing .dropdown #category_filter.btn-default:focus,
#product_listing .dropdown #category_filter.btn-default:hover {
    background-color: #f2f5f9;
    border: 1px solid #969696;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown span.caret_New, 
#product_listing .dropdown span.caret_New {
    color: #134576;
    font-weight: 500;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown span.caret_New::before, 
#product_listing .dropdown span.caret_New::before {
    font-size: 18px;
    font-family: FontAwesome;
    display: block;
    content: "\f107";
    position: absolute;
    top: 10px;
    right: 11px;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu, 
#product_listing .dropdown ul.dropdown-menu {
    width: 100%;
    padding: 5px 0 !important;
    padding: 0px 0 5px !important;
    font-size: 1em !important;
    left: 0px !important;
    max-height: 300px;
    overflow-y: auto;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu li, 
#product_listing .dropdown ul.dropdown-menu li {
    padding: 0;
    background-color: #fff;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu li:hover, 
#product_listing .dropdown ul.dropdown-menu li:hover {
    background-color: #f2f2f3;
    background-color: #f2f5f9;
}

#product_listing .select-indust .dropdown ul.dropdown-menu li.is-current.active:hover, 
#product_listing .dropdown ul.dropdown-menu li.is-current.active:hover, 
#product_listing .select-indust .dropdown ul.dropdown-menu li.is-current.active, 
#product_listing .dropdown ul.dropdown-menu li.is-current.active {
    background-color: #f2f5f9;
    background-color: rgba(0, 92, 170, 1.0);
    background-color: #005caa;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu li a, 
#product_listing .dropdown ul.dropdown-menu li a {
    color: #333;
    color: #454545;
    font-size: 1em;
    background-color: transparent;
    padding: 0.7% 1%;
    padding: 7px 15px;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu li a:hover, 
#product_listing .dropdown ul.dropdown-menu li a:hover {
    color: #000;
}

/* 大類 Category 下拉選單 (Mobile 用/ Dropdown Button) */
#product_listing .select-indust .dropdown ul.dropdown-menu li.is-current.active:hover a, 
#product_listing .dropdown ul.dropdown-menu li.is-current.active:hover a,
#product_listing .select-indust .dropdown ul.dropdown-menu li.is-current.active a, 
#product_listing .dropdown ul.dropdown-menu li.is-current.active a {
    color: #134576; 
    color: #fff; 
}


/* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
#product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) {
    margin-bottom: 15px;
}

/* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
#product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) .key-list {
    position: relative !important;
    width: auto; 
    float: right;
}

/* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
#product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) .key-list, 
#product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) h1 {
    display: inline-block;
}

/* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
#product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) h1 {
    margin-bottom: 0px !important;
}

/* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
.core-container #product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) .text-right.key-list::after {
    content: none !important;
}

#mobile-product-header form.form-inline:has(.filter-btn.mobile-btn, .mobile-btn + .mobile-btn) {
    text-align: left;
}







/************************* Cable 類別 (無 Left Filter/ 表格條列產品) *************************/


/* Cable 類別 (無 Left Filter/ 表格條列產品) >> .product_list.listmode >> h1 */
#product_listing:has(#multi_product_category_list) #product_lists .product_list.listmode .category_name:has(h1 + .key-list) h1 {
    margin-top: 0;
}

/* Cable 類別 (無 Left Filter/ 表格條列產品) >> #product_lists:has(.product_list.listmode) >> hr */
#product_listing:has(#multi_product_category_list) #product_lists:has(.product_list.listmode) hr {
    margin-top: 60px;
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th + th >> a */
#product_listing .product_list.listmode .cabletable th a.dynatable-sort-header,
#product_listing .product_list.listmode #cabletable th a.dynatable-sort-header, 
#product_listing .product_list.listmode .cabletable th, 
#product_listing .product_list.listmode #cabletable th {
    color: #000;

    transition: all .3s ease-in-out 0s;
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th */
#product_listing .product_list.listmode .cabletable th, 
#product_listing .product_list.listmode #cabletable th {
    background-color: #e9eced;
    background-color: #e0e3e5;
}

#product_listing .product_list.listmode .cabletable th a.dynatable-sort-header {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th >> a:hover */
#product_listing .product_list.listmode .cabletable th a.dynatable-sort-header:hover,
#product_listing .product_list.listmode #cabletable th a.dynatable-sort-header:hover {
    color: #004276;
}


/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th >> arrow */
#product_listing .product_list.listmode .cabletable .dynatable-arrow,
#product_listing .product_list.listmode #cabletable .dynatable-arrow {
    color: #004276;
    font-size: 0.7em;

    transform: scaleX(1.5);
    font-size: 0.52em;

    display: none;
    display: inline-block;
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th >> a:hover >> .dynatable-arrow */
#product_listing .product_list.listmode .cabletable th a.dynatable-sort-header:hover .dynatable-arrow,
#product_listing .product_list.listmode #cabletable th a.dynatable-sort-header:hover .dynatable-arrow {
    color: #005caa;
    color: rgba(0, 92, 170, 0.7);
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> td */
#product_listing .product_list.listmode .cabletable td, 
#product_listing .product_list.listmode #cabletable td {
    color: #555;
    vertical-align: middle;
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> td:has(img) */
#product_listing .product_list.listmode .cabletable td:has(img), 
#product_listing .product_list.listmode #cabletable td:has(img) {
    text-align: center;
}


/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> tr:hover >> td */
#product_listing .product_list.listmode .cabletable tr:hover td, 
#product_listing .product_list.listmode #cabletable tr:hover td {
    color: #000;
    background-color: #bbe1ef;
    background-color: #f2f5f9;
    background-color: #f2f8fa;
}

/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> td >> img */
#product_listing .product_list.listmode .cabletable td img,
#product_listing .product_list.listmode #cabletable td img {
    mix-blend-mode: multiply;
}


/* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> tr:hover >> td >> img */
#product_listing .product_list.listmode .cabletable tr:hover td img, 
#product_listing .product_list.listmode #cabletable tr:hover td img {
    filter: contrast(120%);
}







/* 700px 以上 */
@media (min-width: 700px) {}



/* 768px 以上 */
@media (min-width: 768px) {

    /* 大標題 / 副標題 >> 靠齊左 */
    #product_listing .product_button div[class*="col-"]:has(h1) /* 大標題 */, 
    #product_listing .checkbox-box div[class*="col-"]:has(h2) /* 副標題 */ {
    padding-left: 5px !important;
    }

    #product_listing .product_button:has(.discontinued-product) {
    margin-top: 15px;

    height: auto;
    position: relative;
    }

    /* 大標題 */
    #product_listing .product_button h1 {
    font-size: 42px !important;
    font-size: 2.8em !important;
    font-size: 2.5em !important;

    top: -7px;
    position: relative;
    }

    /* 副標題 */
    #product_listing .checkbox-box h2 {
    font-size: 32px !important;
    font-size: 2.1em !important;
    font-size: 2em !important;
    }

    /* 改為跟列表 item 同高 */
    #product_listing:has(#multi_product_category_list) #filter_form {
    margin-top: 0;
    }

    /* 縮減 item 底部距離高度 */
    #product_listing:has(#multi_product_category_list) div.product-record-single {
    margin-bottom: 15px;
    }

    #mobile-product-header .mobile-btn-container:has(form.form-inline) {
    width: 750px; /* 同 container 寬度 */
    width: 90%; 
    width: 87%; 
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding: 20px 0px;  
    }

    /* 只有搜尋欄位及按鈕時 */
    #mobile-product-header form.form-inline {
    /* 
    width: 750px; 
    width: 90%; 
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;

    padding: 20px 15px;
    */
    }

}


/* 980px 以上 */
@media (min-width: 980px) {

    /* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> th */
    #product_listing .product_list.listmode .cabletable th, 
    #product_listing .product_list.listmode #cabletable th {
    min-width: 131px;
    }

}


/* 1500 以上 */
@media (min-width: 1500px) {

    /* Cable 類別 Table (無 Left Filter/ 表格條列產品) >> td >> img */
    #product_listing .product_list.listmode .cabletable td img,
    #product_listing .product_list.listmode #cabletable td img {
    max-width: 70px;
    }

}


@media (min-width: 700px) and (max-width: 768px) {

    #product_listing .product_button:has(.discontinued-product) {
    margin-top: 3.5%;
    }

}


/* 991px 以上/ @media print, screen and (min-width: 48em) */
@media (min-width: 992px) {

    #mobile-product-header .mobile-btn-container:has(form.form-inline) {
    width: 970px;
    padding: 20px 2%;
    }

    /* 只有搜尋欄位及按鈕時/ 寬度設定要大部分跟 conttainer 相同 */
    #mobile-product-header form.form-inline {
    text-align: right;
    text-align: left;
    /* 跟 container 同寬
    width: 970px; 
    */
    }

}


@media (min-width: 980px) and (max-width: 1100px) {

    #mobile-product-header .mobile-btn-container:has(form.form-inline) {
    width: 940px;
    }

}



@media (max-width: 1199px) {

    #logo img {
    margin-top: 15px;
    }

    #wrapper:has(#product_listing #multi_product_category_list #category_filter) .row.desktop-product-header {
    display: none !important;
    }

    #wrapper:has(#product_listing #multi_product_category_list #category_filter) #mobile-product-header {
    display: block !important;
    }

    #wrapper:has(#product_listing #multi_product_category_list #category_filter) .row.desktop-product-header > [class*="col-"]:has(.breadcrumb), 
    #wrapper:has(#product_listing #multi_product_category_list #category_filter) .row.desktop-product-header > div:has(.breadcrumb) {
    display: none !important;
    }

    #wrapper:has(#product_listing #multi_product_category_list #category_filter) #filter_lists {
    display: none !important;
    }

    #wrapper:has(#product_listing #multi_product_category_list #category_filter) .row.desktop-product-header .product_search #search_form {
    /* text-align: left; */
    }




    /* 只有搜尋欄位及按鈕時 */
    #mobile-product-header form.form-inline {
    /* 
    margin: 0 auto;
    width: 90%;
    width: 85%;
    width: 83%;
    padding: 20px 0;
    padding-bottom: 0;
    */
    }

    /* 同時有兩顆按鈕時 */
    #mobile-product-header form.form-inline:has(.filter-btn.mobile-btn, .mobile-btn + .mobile-btn) {
    /* width: 85%; */
    }

    #mobile-product-header .form-inline .form-control {
    /* max-width: 25%; */
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    max-width: 20%;
    }

    #wrapper:has(#product_listing #multi_product_category_list) .discontinued-product {
    margin-bottom: 25px;
    /* transform: translateY(-15px); */
    }


}


/* 1024 以下 */
@media (max-width: 1024px) {}



/* 990 ~ 1199 */
@media (min-width: 990px) and (max-width: 1199px) {

    #product_listing .product_button h1 {
    font-size: 2.2em !important;
    }
    
}



/* 769 ~ 990 */
@media (min-width: 769px) and (max-width: 1199px) {

    /* 減少變成 Mobile 時的大標題上方距離 */
    .content-wrap:has(#multi_product_category_list .p-product-heading-contents > div > .subtitle) {
    padding-top: 10px;
    }

}






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

    /* 大標題 / 副標題 /類別小標題 */
    .p-product-heading-contents h2.subtitle /* 大類副標 (Mobile 出現用) */,
    #product_listing .product_button h1/* 大標題 */, 
    #product_listing .checkbox-box h2/* 副標題 */,
    #product_listing h1/* All 標題 */ {
    font-size: 1.9em !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    }

}



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

    #product_listing .product_button {
    margin-top: 1.5%;
    }

    /* 大標題 / 副標題 /類別小標題 */
    .p-product-heading-contents h2.subtitle /* 大類副標 (Mobile 出現用) */,
    #product_listing .product_button h1/* 大標題 */, 
    #product_listing .checkbox-box h2/* 副標題 */,
    #product_listing h1/* All 標題 */ {
    font-size: 1.9em !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    }

    /* 只有搜尋欄位及按鈕時 */
    #mobile-product-header form.form-inline {
    text-align: left;
    }

    #mobile-product-header .form-inline .form-control {
    max-width: unset;
    max-width: 25%;
    }

}


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

    #wrapper:has(#product_listing #multi_product_category_list) .discontinued-product {
    /* margin-bottom: 25px; */
    transform: translateY(-15px);
    }

    #product_listing .product_list.listmode .cabletable th a.dynatable-sort-header, 
    #product_listing .product_list.listmode .cabletable td, 
    #product_listing .product_list.listmode #cabletable td {
    font-size: 0.8em;
    }

}


/* 840 以下 */
@media (max-width: 855px) {

    #product_listing:has(#multi_product_category_list) #search_form .form-group button[aria-controls] {
    max-width: 220px;
    max-width: 25%;
    }

    #product_listing input#search_keyword {
    max-width: 25%;
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    min-width: 130px;
    }

}



/* 768 以下 */
@media (max-width: 768px) {

    .content-wrap:has(#product_listing #multi_product_category_list #category_filter) {
    padding-top: 10px;
    }

    #product_listing .checkbox-box div[class*="col-"]:has(h2) {
    padding-left: 0;
    }

    #product_lists:has(#multi_product_category_list) .product_list .category_name h1, 
    #product_lists .product_list .category_name h1 {
    padding-left: 2%;
    }

    #mobile-product-header form.form-inline {
    /*
    margin: 0 auto;
    width: 100%;
    width: 95%;
    padding: 20px;
    */
    }

    #mobile-product-header .form-inline .form-control {
    /*
    max-width: 35%;
    max-width: 30%;
    max-width: 25%;
    max-width: unset;
    */
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    max-width: 25%;
    max-width: 20%;
    min-width: 130px;
    }

}

/* 767 以下 */
@media (max-width: 767px) {

    #mobile-product-header .mobile-btn-container:has(form.form-inline) {
    width: 90%;
    max-width: 700px;
    }

    #mobile-product-header .mobile-btn-container:has(form.form-inline),
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    padding: 0 1%;
    }

}

/* 755 以下 */
@media (max-width: 755px) {

    #mobile-product-header form.form-inline {
    padding-bottom: 0;
    }

}


/* 699 以下 */
@media (max-width: 699px) {

    #mobile-product-header .form-inline .form-control {
    /*
    max-width: 35%;
    max-width: 30%;
    max-width: 23%;

    max-width: unset;
    width: 88%;
    */
    width: 90%;
    width: 88%;
    }

    #mobile-product-header form.form-inline {
    /* width: 86%; */
    }

    #mobile-product-header .form-inline .form-control {
    max-width: 90%;
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    max-width: 25%;
    max-width: 20%;
    }

    #wrapper:has(form.form-inline .mobile-btn + .mobile-btn) #product_listing:has(.select-indust .dropdown) .p-product-heading-contents h2.subtitle:not(#subcategory_form .subtitle) {
    margin-top: 5px;
    }

    #mobile-product-header button.btn.mobile-btn {
    width: 100%;
    max-width: unset !important;
    display: block;

    width: 50%;/* 變兩顆 */
    float: left;

    margin-top: 3px;
    }
        
}



/* 677 以下 */
@media (max-width: 677px) {

    #mobile-product-header .form-inline .form-control {
    /*
    max-width: 35%;
    max-width: 30%;
    max-width: 23%;

    max-width: unset;
    width: 84%;
    */
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    max-width: 25%;
    max-width: 20%;
    }

    #mobile-product-header button.btn.mobile-btn {
    display: block;
    width: 100%;
    max-width: unset !important;

    width: 50%;/* 變兩顆 */
    float: left;

    margin-top: 3px;
    }

    #multi_product_category_list {
    transform: translateY(-10px);
    }

}

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

    #mobile-product-header .form-inline .form-control {
    width: 82%;
    }

}



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

    /* 大標題 / 副標題 /類別小標題 */
    .p-product-heading-contents h2.subtitle /* 大類副標 (Mobile 出現用) */,
    #product_listing .product_button h1/* 大標題 */, 
    #product_listing .checkbox-box h2/* 副標題 */,
    #product_listing h1/* All 標題 */ {
    font-size: 1.9em !important;
    font-size: 27px !important;
    }

    #mobile-product-header .form-inline .form-control,
    #mobile-product-header #mobile_search_form button,
    #product_listing:has(#multi_product_category_list) #search_form .form-group button[aria-controls] {
    max-width: unset;;
    }

    #mobile-product-header .mobile-btn-container:has(form.form-inline), 
    #content:has(#multi_product_category_list) .product_button .discontinued-product {
    padding: 0px 0%;
    }

    #mobile-product-header .form-inline .form-control + .btn-go + button {
    margin-top: 3px;
    }

    #mobile-product-header .form-inline .form-control{
    width: 80%; 
    }

    #mobile-product-header #mobile_search_form button:not([type="submit"]) {
    }

    #mobile-product-header button.btn.mobile-btn {
    display: block;
    width: 100%;
    max-width: unset !important;
    float: none;

    margin-top: 3px;
    }

    /* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
    #product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) h1, 
    #product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) .key-list {
    float: left;
    padding-left: 0;
    }

    /* 類別小標題 (New, Coming Soon.. Icon/ Product List 裡面的小標題最右邊) */
    #product_listing:has(#multi_product_category_list) #product_lists .product_list .category_name:has(h1 + .key-list) .key-list {
    margin-bottom: 15px;
    }

}


/* 384 以下 */
@media (max-width: 394px) {

    #mobile-product-header .form-inline .form-control{
    width: 80%; 
    width: 79%;
    }

}


/* 346 以下 */
@media (max-width: 346px) {

    #mobile-product-header .form-inline .form-control{
    width: 79%; 
    width: 77%; 
    }

}


/* 321 以下 */
@media (max-width: 321px) {

    #mobile-product-header .form-inline .form-control{
    width: 77%;
    width: 73%;
    }

}














/******************************* 【上方三顆框線按鈕】/ 僅 Icon + 文字 *******************************/



/* 上方三顆框線按鈕 */
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button [class*="icon-"]::before,
#content:has(#multi_product_category_list) .product_button .discontinued-product a.button .i::before {}


/* 上方三顆框線按鈕 >> New Products */
#content:has(#multi_product_category_list) .product_button a.button .fa-asterisk::before {
    font-family: 'FontAwesome' !important;
    content: "\f069";

    font-family: 'Material Symbols Rounded' !important;
    font-family: 'Material Symbols Outlined' !important;
    content: "new_releases";
    content: "\e031";

    font-variation-settings: 'FILL' 0;
    font-variation-settings: 'FILL' 1;
    top: 1px;
    top: 2px;
}




/******************************* 【大類 Category】/ 僅 Icon + 文字 *******************************/


/* 大類 Category (大區塊) */
ul.p-local-nav, 
.p-local-nav {
    border-radius: 0.8rem;
    background-color: #f9f9fa;
    background-color: #f7f9fb;

    margin-bottom: 40px !important;
    overflow: hidden;

    background-color: #f2f5f8;
}

/* 大類 Category/  li item (一般狀態) */
li.p-local-nav__item, 
.p-local-nav__item {
    min-height: 52px;
    border-radius: 0.7rem;
    border-radius: 0.5rem;
    border-radius: 8px;
    border-width: 2px;
	box-shadow: 0 7px 11px rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.1);

    /* width: 50%; */
    padding: 0 !important;
    background-color: #fff;

    border: 1px solid rgba(195, 198, 203, 0.6);
    border: 1px solid #dcdee1;

    border: 2px solid rgba(195, 198, 203, 0.6);
    border: 2px solid #dcdee1;
    border-bottom: 2px solid rgba(188, 191, 195, 0.9);

    box-shadow: 1px 2px 3px 0px rgba(235, 236, 236, 0.9);
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.05);
}

/* 大類 Category/  li item (一般狀態) */
li.p-local-nav__item:hover, 
.p-local-nav__item:hover {
    background-color: #000;
    border: 2px solid #000;
    border-bottom: 2px solid rgba(0, 0, 0, 1.0);
}

/* 大類 Category/  li item (選中狀態/ .active) */
li.p-local-nav__item.is-current, 
li.p-local-nav__item.active,

.p-local-nav__item.is-current, 
.p-local-nav__item.active {
    background-color: #004276;
    border-color: #004276;

    border-color: #005caa;
    background-color: #005caa;

    border-color: rgba(0, 92, 170, 1.0);
    background-color: rgba(0, 92, 170, 1.0);
    border-width: 2px;
    pointer-events: none;
    position: relative;

    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);
}


/* 大類 Category/  li item (四個一排時) */
li.p-local-nav__item.col-lg-3, 
.p-local-nav__item.col-lg-3 {
    width: calc(25% - 8px) !important; /* 如果 gap 是 8px */
    width: calc(25% - 6px) !important; /* 如果 gap 是 8px */
}



/* 大類 Category/ li item (一般狀態) >> a */
li.p-local-nav__item a font, 
.p-local-nav__item a font,

li.p-local-nav__item a, 
.p-local-nav__item a {
    font-size: 16px;
    font-size: 1.1em;
    font-size: 1.12em;
    font-weight: 500 !important;
    color: #004276;
}


/* 大類 Category/ li item (一般狀態) >> a */
li.p-local-nav__item a, 
.p-local-nav__item a {
    flex-wrap: nowrap;/* 若 items 過多也不換行, 會壓縮items (若有需要讓所有的 flex items 元素壓縮在同一行) */
    justify-content: flex-start !important; /* 從 Icon 對齊左開始 */
    height: 100%;
    width: 100%;
    padding: 10px 15px;
}

/* (JP 專用) 大類 Category/ li item (一般狀態) >> a */
.locale_jp-ja li.p-local-nav__item a font, 
.locale_jp-ja .p-local-nav__item a font,
.locale_jp-ja li.p-local-nav__item a, 
.locale_jp-ja .p-local-nav__item a {
    font-size: 1.12em;
    font-size: 1.1em;
    font-size: 1.05em;
    font-weight: 500 !important;
}

/* 日本文字特調 >> 文字變粗 */
.locale_jp-ja li.p-local-nav__item a font, 
.locale_jp-ja .p-local-nav__item a font {
    font-weight: 600 !important;
}

li.p-local-nav__item:hover, 
.p-local-nav__item:hover

/* 大類 Category/ li item (active 狀態 + hover) >> a */
li.p-local-nav__item:hover a::after, 
.p-local-nav__item:hover a::after,

li.p-local-nav__item:hover i::before, 
.p-local-nav__item:hover i::before, 
li.p-local-nav__item:hover [class*="fa-"]::before,
.p-local-nav__item:hover [class*="fa-"]::before,

li.p-local-nav__item:hover a font, 
.p-local-nav__item:hover a font, 
li.p-local-nav__item:hover a, 
.p-local-nav__item:hover a, 

li.p-local-nav__item.is-current a font, 
.p-local-nav__item.active a font,
.p-local-nav__item.is-current a font, 
.p-local-nav__item.active a font,

li.p-local-nav__item.is-current a, 
li.p-local-nav__item.active a,
.p-local-nav__item.is-current a, 
.p-local-nav__item.active a {
    color: #fff;
}


/* 大類 Category (Icon 統一) >> Icon 固定在最左邊 */
li.p-local-nav__item a i.icon-category {
    flex-shrink: 0; /* Icon 不縮小 */
    margin-right: 8px; /* Icon 和文字的間距 */
    margin-right: 0.4em; /* Icon 和文字的間距 */
}

/* 文字區域自動擴展並置中 */
li.p-local-nav__item a font, 
.p-local-nav__item a font {
    flex-grow: 1; /* 文字區域自動擴展，佔據中間所有空間 */
    text-align: center; /* 文字在區域內置中 */
    
    /* 微調：抵消右箭頭的寬度，讓文字真正置中 */
    margin-right: 8px; /* 根據右箭頭的寬度調整 */
    margin-right: 0.4em; /* 根據右箭頭的寬度調整 */
}



/* 大類 Category (Icon) */
li.p-local-nav__item a::after, 
li.p-local-nav__item a i::before, 
li.p-local-nav__item a i {
    top: 0px !important;
}

/* 大類 Category (Icon) >> 一般狀態 */
li.p-local-nav__item a::after, 
li.p-local-nav__item a i::before {
    font-family: 'FontAwesome' !important;
    font-family: 'Material Symbols Rounded' !important;
    font-family: 'Material Symbols Outlined' !important;
    content: '';
    font-variation-settings: 'FILL' 0;

    font-size: 23px;
    font-size: 2.3em;
    font-size: 1.3em;
    font-weight: 500 !important;

    font-size: 1.5em;
    font-size: 1.7em;

    display: inline-block;
    /* width: 15px;
    height: 15px;
    */
    top: 0px !important;

    /* margin-right: 7px; (用 i 來作間距) */
}

/* 大類 Category (Icon) >> 右邊箭頭 */
li.p-local-nav__item a::after {
    font-weight: 400 !important;
}

/* 大類 Category (Icon) >> 放大 Icon */
li.p-local-nav__item i.fa-storage::before, 
li.p-local-nav__item .fa-storage::before, 

li.p-local-nav__item i.fa-cable::before, 
li.p-local-nav__item .fa-cable::before, 

li.p-local-nav__item i.fa-usb::before, 
li.p-local-nav__item .fa-usb::before, 

li.p-local-nav__item i.fa-power::before, 
li.p-local-nav__item .fa-power::before {
    font-size: 1.9em;
}

/* 大類 Category (Icon) >> 放大 Icon */
li.p-local-nav__item i.fa-storage::before, 
li.p-local-nav__item .fa-storage::before {
    font-size: 1.8em;
}

/* 大類 Category (Icon) >> 縮小 Icon (KVM) */
li.p-local-nav__item i.fa-dns::before, 
li.p-local-nav__item .fa-dns::before {
    font-size: 1.5em;
}


/* 大類 Category (Icon/ 一般狀態) >> 右箭頭統一 */
li.p-local-nav__item a::after {
    font-size: 1.5em !important;
    font-size: 1.6em !important;
    font-weight: 400 !important;
    content: "keyboard_arrow_right";
    content: "\e315"; 

    color: #005caa;
    color: rgba(0, 92, 170, 0.7);
    color: rgba(0, 92, 170, 0.5);

    /* 位置固定在右邊 
    position: absolute !important; 
    right: 10px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    margin-left: 0 !important; 
    */
}


/* 大類 Category (Icon/ 選中 active) >> 右箭頭統一 */
li.p-local-nav__item.is-current a::after, 
li.p-local-nav__item.active a::after {
    color: #fff;
    color: rgba(255, 255, 255, 1.0);
}

/* 大類-1 Category >> KVM Icon */
li.p-local-nav__item i.fa-dns::before, 
li.p-local-nav__item .fa-dns::before {
    content: "hard_drive";
    content: "\f80e";

    content: "category";
    content: "\e875";
    font-variation-settings: 'FILL' 1;
}

/* 大類-2 Category >> ProAV Icon */
li.p-local-nav__item i.fa-settings_input_hdmi::before, 
li.p-local-nav__item .fa-settings_input_hdmi::before {
    content: "settings_input_hdmi";
    content: "\e8c2";
    font-variation-settings: 'FILL' 1;
}

/* 大類-3 Category >> Consumer Elec Icon */
li.p-local-nav__item i.fa-devices::before, 
li.p-local-nav__item .fa-devices::before {
    content: "devices";
    content: "\e1b1";
}

/* 大類-4 Category >> PDU Icon */
li.p-local-nav__item i.fa-power::before, 
li.p-local-nav__item .fa-power::before {
    content: "power";
    content: "\e63c";
    font-variation-settings: 'FILL' 1;
}

/* 大類-5 Category >> Racks Icon */
li.p-local-nav__item i.fa-storage::before, 
li.p-local-nav__item .fa-storage::before {
    content: "host";
    content: "\f3d9";

    content: "storage";
    content: "\e1db";
    font-weight: 500 !important;
}

/* 大類-6 Category >> USB Icon */
li.p-local-nav__item i.fa-usb::before, 
li.p-local-nav__item .fa-usb::before {
    content: "usb";
    content: "\e1e0";
    font-variation-settings: 'FILL' 1;
}

/* 大類-7 Category >> Serial Icon  */
li.p-local-nav__item i.fa-settings_ethernet::before, 
li.p-local-nav__item .fa-settings_ethernet::before {
    content: "settings_ethernet";
    content: "\e8be";
}

/* 大類-8 Category >> Serial Icon  */
li.p-local-nav__item i.fa-cable::before, 
li.p-local-nav__item .fa-cable::before {
    content: "cable";
    content: "\efe6";
}



/* 【Mobile 產品頁大分類次標題】 */
.p-product-heading-contents h2.subtitle {}



/* 768px 以上*/
@media (min-width: 767px) {

    /* 大類 Category/  li item (一般狀態) */
    li.p-local-nav__item, 
    .p-local-nav__item {
    min-height: 55px;
    min-height: 65px;
    }

}


/* Bowei 筆電寬螢幕(5個排一起) */
@media (min-width: 1200px) and (max-width: 1366px) {

    /* (JP 專用) 大類 Category/ li item (一般狀態) >> a */
    .locale_jp-ja li.p-local-nav__item a font, 
    .locale_jp-ja .p-local-nav__item a font,
    .locale_jp-ja li.p-local-nav__item a, 
    .locale_jp-ja .p-local-nav__item a {
    font-size: 1em;
    }

}


/* 1199px 以下 */
@media (max-width: 1199px) {

    /* (JP 專用) 大類 Category/ li item (一般狀態) >> a */
    .locale_jp-ja li.p-local-nav__item a font, 
    .locale_jp-ja .p-local-nav__item a font,
    .locale_jp-ja li.p-local-nav__item a, 
    .locale_jp-ja .p-local-nav__item a {
    font-size: 0.9em;
    }

}






/******************************* 【次類 Subcategory/ 簡易模式】 checkbox (純文字)  *******************************/

/* #product_listing >> 比較區塊跟 #subcategory_lists >> margin-bottom 調整 */
#product_listing:has(#comparison_landings.collapse.in + .product_button) #comparison_landings {
    margin-bottom: 5%;
}

/* #subcategory_lists >> Clear All 外層 */
#subcategory_lists div:has(h2 + .ajax-loader + a.reset, h2 + a.reset) {
    display: flex;
    align-items: center; align-items: center; /* 項目垂直置中 */
    flex-direction: row; /* 水平排列 (所有物件排在一行) */ 
    flex-wrap: wrap; /* 若 items 過多就換行, 不會壓縮items (若不設定會將所有的 flex items 壓縮在同一行) */
    justify-content: space-between; /* 讓 h2 在最左，按鈕在最右 */
}

/* #subcategory_lists >> Clear All >> a */
#subcategory_lists a.reset {
    color: #2292d3;
    color: #005caa;
    font-size: 0.9em;
    text-decoration: none !important;
    cursor: pointer;
    padding: 0 10px;
    float: right;

    display: flex;
    align-items: center; /* 項目垂直置中 */
    justify-content: space-between; /* 讓文字在最左，符號在最右 */
    margin-left: auto; /* [重點] 這會把按鈕推到最右邊！ */

    transition: all .3s ease-in-out 0s;
}

/* #subcategory_lists >> Clear All >> a::after */
#subcategory_lists a.reset::after {
    font-family: "Font Awesome 5 Free";
    content: "\f057" !important;
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 600;
    font-style: normal;
    color: #2292d3;
    color: #005caa;
    font-variant: normal;
    display: block;
    position: relative;
    float: right;
    float: none; /* [重點] Flexbox 下 float 無效，建議移除 */
    margin: 0;
    margin-left: 5px;
    top: 0px !important;

    flex-shrink: 0;

    opacity: 0.6;
    transition: all .3s ease-in-out 0s;
}

/* #subcategory_lists >> Clear All >> a:hover */
#subcategory_lists a.reset:hover {
    color: #005caa;
    color: #2292d3;

    transition: all .3s ease-in-out 0s;
}

/* #subcategory_lists >> Clear All >> a:hover.reset::after */
#subcategory_lists a:hover.reset::after {
    color: #005caa;
    color: #2292d3;
    opacity: 1.0;
    transition: all .3s ease-in-out 0s;
}

/* 次類 Subcategory (大區塊) >> 副標題外層 */
form#subcategory_form {
    width: 100%;
}


/* 次類 Subcategory (大區塊) >> 副標題外層 */
form#subcategory_form div:has(h2) {
    width: 100%;
    margin-bottom: 15px;
}


/* 次類 Subcategory (大區塊) + checkbox Item */
.checkbox-box .checkbox label, 
.checkbox-box .checkbox,
.checkbox-box {
    margin: 0px !important;
}

/* 次類 Subcategory >> checkbox Item + label */
.checkbox-box .checkbox label, 
.checkbox-box .checkbox {
    padding: 0 !important;
    margin: 0px !important;
}

/* 次類 Subcategory 外框 */
.checkbox-box {
    gap: 0px;/* item 間隙 */
    
    margin-bottom: 40px !important;
    margin-bottom: 50px !important;
}

/* 次類 Subcategory (大區塊) >> checkbox Item::hover/ 滑過狀態 */
div.checkbox-box .checkbox:has(input.cp_chk:checked), 
.checkbox-box .checkbox:hover {
    position: relative;
    z-index: 1; /* 避免被鄰近元素蓋住 border */
}

/* 次類 Subcategory (大區塊) >> checkbox Item::hover/ 選中狀態 */
/* 避免被鄰近元素蓋住 border */
div.checkbox-box .checkbox:has(input.cp_chk:checked) {
    z-index: 2; 
}


/* 次類 Subcategory (大區塊) >> checkbox Item::hover/ 滑過狀態 */
.checkbox-box .checkbox:hover {
    border: 1px solid #a3a2a2;
    border: 1px solid #9b9b9b;
    border: 1px solid #969696;
    background-color: #f9f9fa;
}

/* 次類 Subcategory (大區塊) >> checkbox Item::checked/ 選中狀態 */
div.checkbox-box .checkbox:has(input.cp_chk:checked) {
    border: 1px solid #004276;
    background-color: #f2f5f9;;
}


/* 次類 Subcategory (大區塊) >> checkbox Item:hover >> .checkbox-text/ 滑過狀態 */
.checkbox-box .checkbox:hover label .checkbox-text {
    color: #000;
}

/* 次類 Subcategory >> checkbox Item >> lable */
.checkbox-box .checkbox label {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    height: 100%;
    width: 100%;
    min-height: 40px;

    padding: 10px 15px !important;
    padding: 15px !important;

    padding: 17px 15px !important;

    line-height: 1em !important;
}


/* 次類 Subcategory >> checkbox Item */
.checkbox-box .checkbox.col-lg-3 {
}

/* 次類 Subcategory >> checkbox Item >> lable > text */
.checkbox-box .checkbox label .checkbox-text, 
.checkbox-box .checkbox label {
    font-size: 0.9em !important;
    font-weight: 400 !important;
    font-weight: 500 !important;

    font-size: 0.92em !important;
}

/* 次類 Subcategory >> checkbox Item >> lable > text >> 位移 */
.checkbox-box .checkbox label .checkbox-text {
    position: relative;
    top: 1px;
    top: 0.15em;
    top: 0.1em;
    top: 0.05em;
}

/* 次類 Subcategory >> checkbox Item >> lable */
.checkbox-box .checkbox label .checkmark, 
.container .checkbox-box .checkmark, 
.container .checkbox-box .checkmark {
    flex-shrink: 0; /* 裡面文字一長會擠壓寬度 >> checkbox 關鍵：不允許被壓縮 */
    height: 19px;
    width: 19px;
    margin-right: 8px;
}

.checkbox-box .checkbox.col-lg-3 .checkmark {
    margin-right: 8px;
}

/* 次類 Subcategory >> checkbox Item >> lable */
.container .checkbox-box input:checked ~ .checkmark {
    border-color: #005caa;
    background-color: #005caa;
}


/* 次類 Subcategory >> checkbox Item >> checked 打勾 */
.checkbox-box input:checked ~ .checkmark::after {
    /*
    font-family: 'FontAwesome' !important;
    font-family: 'Material Symbols Rounded' !important;
    font-family: 'Material Symbols Outlined' !important;
    content: '';
    font-variation-settings: 'FILL' 0;
    content: "check";
    content: "\e5ca";
    font-weight: 500 !important;
    */

    border-width: 0 3px 3px 0;
    width: 6px;
    left: 5px;
    
    /* 框框變成 19px x 19px */
    left: 0.45em;
    top: 1px;
    top: 0.15em;
}

/* 768px 以上/ @media print, screen and (min-width: 48em) */
@media (min-width: 767px) {

    /* 大類 Category/  li item (四個一排時) */
    .checkbox-box .checkbox {
    /* 因為 border 撐寬內容 width: calc(25% - 8px) !important; */
    margin-left: -1px !important;
    margin-top: -1px !important;
    }

    /* 次類 Subcategory >> checkbox Item >> lable */
    .checkbox-box .checkbox.col-lg-3 label, 
    .checkbox-box .checkbox label {
    min-height: 45px;
    height: 56px;

    height: 61px;
    height: 4.5em;
    }

    /* 次類 Subcategory >> checkbox Item >> lable */
    .checkbox-box .checkbox.col-lg-3 {
    width: calc(25% - 0px) !important; /* 如果 gap 是 8px */
    }

    /* 次類 Subcategory / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.col-lg-4 label {
    font-size: 0.95em !important;
    }

}


@media (max-width: 480px) {

    /* #subcategory_lists >> Clear All >> a */
    #subcategory_lists a.reset {
    font-size: 0.8em;
    margin-left: unset;
    padding-left: 0 !important;
    margin: 10px 0 0;
    }

}






/******************************* 【次類 Subcategory/ 圖文模式】 checkbox (checkbox + 文字 + 圖)  *******************************/

/* 次類 Subcategory/ 圖文模式 checkbox >> checkbox-withimg */
.checkbox-box .checkbox.checkbox-withimg label .checkbox-text {
    flex-grow: 1;
    text-align: left;
}



/* 768px 以上/ @media print, screen and (min-width: 48em) */
@media (min-width: 767px) {

    /* 次類 Subcategory / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 label, 
    .checkbox-box .checkbox.checkbox-withimg label {
    height: 61px;
    height: 4.5em;

    height: 71px;
    height: 5.2em;

    height: auto; /* 移除圖片時 (剩下文字) >> 高度自適應 */
    }

    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 .checkmark, 
    .checkbox-box .checkbox.col-lg-4 .checkmark {
    margin-right: 10px;
    }

    /* 次類 Subcategory / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 label, 
    .checkbox-box .checkbox.col-lg-4 label {
    font-size: 0.95em !important;
    }

    /* 次類 Subcategory / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 label img, 
    .checkbox-box .checkbox.checkbox-withimg label img {
    border-radius: 4px;
    max-width: 75px;
    min-height: 35px;
    min-height: 45px;
    min-height: 42px;

    margin-left: 15px;
    position: relative;
    top: -5px;
    top: -0.3em;
    }

}



/* 766px 以下/ @media print, screen and (min-width: 48em) */
@media (max-width: 766px) {

/*************** Mobile 移除圖片時 (剩下文字) / .check-item (Product Item) *******************/

    /* 次類 Subcategory/ Mobile 移除圖片時 (剩下文字) / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 label, 
    .checkbox-box .checkbox.checkbox-withimg label {
    height: auto; /* 移除圖片時 (剩下文字) >> 高度自適應 */
    }

    /* 次類 Subcategory/ Mobile 移除圖片時 (剩下文字) / 圖文模式 >> checkbox >> checkbox-withimg */
    .checkbox-box .checkbox.checkbox-withimg.col-lg-4 label img, 
    .checkbox-box .checkbox.checkbox-withimg label img {
    display: none;
    }

}





























/* ========================================================================================================================
                    【Filter Bar in Listing】 >> Accordion Item Menu (篩選收闔選單 / Filter Item 可收闔)
======================================================================================================================== */

/* 篩選收闔選單 Filter Item >> 標題文字 (包含 h4 a) */
#filter_form .well-filter .checkbox,
#filter_form .well-filter h4 a,
#filter_form .well-filter h4, 

#filter_form .checkbox, 
#filter_form .h4 a,
#filter_form .h4 {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    display: block;
    position: relative;
    margin-bottom: 10px;
}


/* 篩選收闔選單 Filter Item >> 標題文字 (不包含 h4 a) */
#filter_form .well-filter .checkbox,
#filter_form .well-filter h4, 

#filter_form .checkbox, 
#filter_form .h4 {
padding: 0 5px;
}

/* 篩選收闔選單 Filter Item >> 標題文字 */
#filter_form .well-filter h4 a, 
#filter_form .well-filter h4, 
#filter_form .h4 a, 
#filter_form .h4 {
    color: #134576;
}

/* 篩選收闔選單 Filter Item >> 標題文字 >> a */
#filter_form .well-filter h4 a, 
#filter_form .h4 a {
    display: flex;
    align-items: flex-start; /* 垂直對齊：靠上 (針對多行文字最佳化) */
    justify-content: space-between; /* 水平對齊：兩端對齊 */
    width: 100%; /* 確保點擊區域佔滿整行 */

    cursor: pointer;
    text-decoration: none; /* 去除連結底線 */
}

/* 篩選收闔選單 Filter Item >> 標題文字 >> a::before */
#filter_form .well-filter h4 a::before, 
#filter_form h4 a::before {
    order: 2; /* 將 ::before 左邊符號的順序移到第 2 順位 >> 右手邊 */
    flex-shrink: 0; /* 防止符號被壓縮的保險設定 */
    top: 0.5rem;
    left: 0;
    margin-left: 5px;

    filter: invert(0.1) sepia(1) saturate(4) hue-rotate(150.9deg) brightness(0.5) !important; /* 調整顏色為深藍色系 */
}

/* 篩選收闔選單 Filter Item >> 標題文字 >> a:hover */
#filter_form .well-filter h4 a:hover, 
#filter_form .h4 a:hover {
    color: #2292d3;
}

/* 篩選收闔選單 Filter Item >> 標題文字 >> a:hover::before */
#filter_form .well-filter h4 a:hover::before, 
#filter_form .h4 a:hover::before {
    filter: invert(0.1) sepia(1) saturate(4) hue-rotate(150.9deg) brightness(1) !important; /* 調整顏色為亮藍色系 */
}






























/* ========================================================================================================================
                    【Mobile Ver Filter/ Lightbox 】 >> 手機版彈出式選單 (Mobile Filter Lightbox)
======================================================================================================================== */

/* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> Filter Item */
#filtermodal .modal-content a.list-group-item {
    display: flex;
    align-items: center;

    background-color: #fff;
}

/* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> Filter Item */
#filtermodal .modal-content a.list-group-item.active {
    background-color: rgba(0, 92, 170, 1.0);
    background-color: #005caa;
}

/* Mobile Ver Filter/ Lightbox (手機版彈出式選單) >> 打勾按鈕 */
#filtermodal .modal-content a.list-group-item .icon-ok {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    margin-left: 15px;
    margin-left: auto;
}
























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

/* Category item text */
.locale_jp-ja li.p-local-nav__item a, 
.locale_jp-ja li.p-local-nav__item a font, 
.locale_jp-ja .p-local-nav__item a, 
.locale_jp-ja .p-local-nav__item a font {
    letter-spacing: -0.01rem;
}