.root {
    padding:0px;
    margin-top:16px;
}
/** 關注按鈕 **********************************************************************************************************/
[name="btn_plp_collect"] {
    background:var(--color_primary_bg, #000000);
    color:var(--btn_primary_text, #ffffff);
    padding:8px;
    margin-bottom:24px;
}
/** Banner **********************************************************************************************************/
.freeze_height_kv{
    overflow: hidden;
    visibility: hidden;
}
@media (max-width: 767px) {
    .freeze_height_kv{
        overflow: hidden;
    }
}
/** 商品數 ***********************************************************************************************************/
.div_list_cnt_outer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    margin-bottom:24px;
    color:#6C757D;
}
@media(max-width:767px){
	.div_list_cnt_outer {
	    margin-left:0;
	}
}
.div_list_cnt_outer b{
    font-weight:500;
    color:var(--color_primary, #000000) !important;
}
.div_list_cnt_outer i{
	display:flex;
    font-size:24px;
    line-height:1.6;
    color:var(--color_primary, #000000) !important;
}
#span_product_total_cnt {
    margin-right: auto;
    display:flex;
    align-items:center;
    margin-top:0;
    line-height:14px;
}
#a_m_filter_display{
	color:var(--color_main_text);
    border: 1.5px solid var(--gray_500);
    padding: 13px 8px 11px 11px;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:40px;
}
#a_m_filter_display:active {
	border:2px solid var(--black_color);
}
#a_m_filter_display i{
    font-size:20px;
    margin-top:-2px;
}
@media (max-width: 767px) {
    #span_product_total_cnt{
        margin-top:0px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: baseline;
        text-align:left !important;
    }
    .div_list_cnt_outer{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 16px;
        margin-bottom:16px;
    }
    .div_list_cnt_outer.clearfix::after{
    	display:none;
   	}
    #a_filter_display{
        width:100%;
    }
    .div_filter_condition_display .div_filter_item_sort select{
    	height:40px!important;
    	padding: 9px 8px 11px 11px;
    }
}
@media(max-width:575px){
    .div_list_cnt_outer i{
        font-size:20px;
    }
}
/** 篩選側選單Web *********************************************************************************************************/
.div_filter_item {
    border-top: none;
}

.filter_main_type_area{
    border-bottom: 1px solid var(--gray_400);
}
@media(max-width:767px){
	.filter_main_type_area:first-child{
		padding-bottom:16px;
	    border-bottom: 1px solid var(--color_primary_border);
	}
	.filter_main_type_area:first-child .filter-title-area{
		margin:0;
	}
}
.filter_main_type_area .filter-title-area.block4:not(:has(a)) {
    font-size:24px;
    font-weight:700;
    line-height:26.4px;
}
.filter-title-area{
    margin:24px 0px;
    font-size:16px;
    font-weight:600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.filter-title-area.block4,
.filter-title-area.page-title-area {
    margin: 24px 0 16px;
}
.filter-title-area > a{
    position: absolute;
    inset: 0;
    z-index: 1;
    text-align:right;
}
.brand-des .small{
	color:#212529;
	font-size: 15px!important;
	font-weight: 400;
	line-height: 22.5px;
	text-align:justify;
}
.filter-title-area [class^="icon-"],
.ul_filter_category [class^="icon-"]{
	font-size:24px;
}
.task-checklist{
	display:flex;
	flex-direction:column;
	gap:20px;
    line-height: 2;
    padding-bottom:24px;
}
@media(max-width:767px){
	.task-checklist{
		gap:16px;
	}
}
.task-checklist li:first-child {
    margin-top: 0px;
}
.task-checklist li:last-child {
    margin-bottom: unset;
}
.task-checklist li:hover .form-check-input:not(:checked) {
    border-color: var(--primary_border)!important;
    background:var(--bg_primary);
}
.task-checklist li:hover .form-check-input{
	position:relative;
}
.task-checklist li,
.div_kid_layer_outer{
	position:relative;
}
.task-checklist li:hover .form-check-input:not(:checked) + div::before{
    content: "\f00c";
    font-family: "Font Awesome 5 Light";
    position: absolute;
    left: 6px;
    top: 1px;
    transform: translateY(-1%);
    color:#ffffff;
}
.task-checklist .div_kid_layer_outer .form-check-input:not(:checked) + div::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Light";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color:#ffffff;
}
@media(max-width:767px){
	.task-checklist li:hover .form-check-input:not(:checked) + div::before,
	.task-checklist .div_kid_layer_outer .form-check-input:not(:checked) + div::before {
	    left: 4px;
	}
}
.task-checklist .form-check-input + div::before {
    content: none;
}

#Reset_PLP_Filter{
	color:#212529;
    margin-top: 20px;
    padding-top:4px;
    font-size:14px;
    font-weight:500;
    border-bottom: 1.5px solid #212529;
    letter-spacing: 0.42px;
}
[name="li_filter_category"] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
[class*='btn_display_kid_layer_']{
    display: grid;
    gap: 20px;
    margin-top:20px;
}
.ul_filter_brand .form-check-label,
.task-checklist .form-check-label {
    display: grid;
    grid-template-columns: max-content max-content auto;
    gap: 12px;
    align-items: center;
    line-height:1.5;
    font-size: 15px;
}
.div_kid_layer_outer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
@media (max-width: 767px) {
    .filter-title-area {
        padding: 0px;
        margin:0 0 8px 0;
    }
    .d-block.d-md-none .filter-title-area{
    	font-size: 22px;
		font-weight: 700;
		line-height: 26.4px;
    }
    .filter_main_type_area .filter-title-area{
    	font-size: 16px!important;
    	font-weight: 600!important;
    	line-height:19.2px!important;
    }
    .filter-title-area.block4{
    	font-size: 15px!important;
    	font-weight: 600!important;
    	line-height:18px!important;
    	margin:19px 0 18px;
    }
    .filter-title-area.block4 > a{
    	top:-3px;
    }
}
#div_filter_list > div > .filter_main_type_area:last-of-type {
    border-color:#212529 !important;
}
#div_filter_list .btn{
	font-size:14px;
	line-height: 18px;
}
#div_filter_list .btn:hover{
	color:#ffffff;
}
/** 側選單Mobile ******************************************************************************************************/
#div_filter_list_mobile {
    position: fixed;
    left: -84%;
    top: 0;
    width: 84vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 40px 24px 24px 24px;
    z-index: 1002;
    background: #ffffff;
    transition: transform 0.3s ease-in-out;
}
#div_filter_list_mobile.active {
    transform: translateX(100%); /* 向右滑入螢幕 */
}
#div_filter_list_mobile input[type="checkbox"]:checked::after{
	padding: 2px 2px 2px 4px;
    line-height: 16px;
}
#div_filter_list_mobile .task-checklist li:hover .form-check-input:not(:checked) + div::before,
#div_filter_list_mobile .task-checklist .div_kid_layer_outer .form-check-input:not(:checked) + div::before {
    left:6px;
}
#btn_close_filter_area{
    position: absolute;
    top: 60px;
    right: -10vw;
    font-size: 35px;
    color: #ffffff;
}
#btn_close_filter_area:last-child{
    position: absolute;
    top: 60px;
    right: -10vw;
    font-size: 35px;
    color: #ffffff;
}
.filter-border-no{
    border-radius: unset;
    font-size: unset;
    border: unset;
    padding: unset;
    margin-left:unset;
}
/** 頁碼 ***************************************************************************************************************/
.page-pagination__link:hover, .page-pagination__link.active{
    border:1.5px solid var(--color_primary, #000000);
    border-bottom: 1.5px solid var(--color_primary, #000000) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/** 類別區塊排版 ********************************************************************************************************/
#div_init_plp_brand_sort a:hover{
	color:unset!important;
}
#div_init_plp_brand_sort .slick-slide{
	padding: 12px;
}
#div_init_plp_brand_sort .slick-list{
    margin-left: -4px;
}

@media (max-width: 767px) {
    #div_init_plp_brand_sort .slick-slide {
        padding: 12px 16px 0 0;
    }

    #div_init_plp_brand_sort .slick-list {
        margin-left: 8px;
    }
}

#div_init_plp_brand_sort .hero-slider__arrow{
	color:var(--color_primary, #000000);
	transform: translateY(-100%);
}
#div_init_plp_brand_sort .hero-slider__arrow--right{
	margin-right:-15px;
}
@media(max-width:767px){
	#div_init_plp_brand_sort{
		margin-top:12px;
		margin-bottom:20px;
	}
}
.plp_brand_sort_title{
	font-size:17px;
	font-weight:600!important;
	line-height:20.4px;
	margin-top:16px;
}
@media(max-width:767px){
	.plp_brand_sort_title{
		font-size:15px;
		font-weight:500!important;
		line-height:18px;
	}
}
.short_desc_content{
    	font-size:15px;
    	color:var(--gray_900);
    }
/** Empty *************************************************************************************************************/
.empty-message{
    width: 100%;
    min-height:409px;
    text-align: center;
    display:flex;
    flex-direction:column;
    justify-content: center;
    margin-top:-44px;
}
.empty-message i{
	padding:15px;
}
.empty-message img{
    width:5vw;
    margin-bottom:20px;
}
.empty-message div{
    letter-spacing: 1.5px;
}
@media(max-width:991px){
    .empty-message img{
        width:10vw;
    }
}
@media(max-width:575px){
    .empty-message img{
        width:15vw;
    }
}

@media (max-width: 767px) {
    #close_mobile_filter {
        display: block !important;
        margin-top: 20px;
    }
}
