/*************************************************************************************************************************

	for CPC【 (沒有大邊框間距/ .dark-product-listing-image ) Product Listing Page Optimization】產品列表頁面 ( >> 2025)		
	
	>> Product Listing Page
	>> New Products Listing Page
	>> Discussed Products Listing Page

	** 實體檔案放在 : https://www.aten.com/file/snippet/22/Product-Listing-Item-Optimization_for-dark-product-listing-image.css


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


/*  (不包含推薦產品區) 沒有大邊框間距/ 沒有.dark-listing >> Listing Item Block >> Product Listing >> .sect-divider */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider, 
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider {
	padding: 0 !important;
}

/*  (不包含推薦產品區) 沒有大邊框間距/ 沒有.dark-listing >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image, 

.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider div.product-image {
	padding: 0% !important;
	padding: 3% !important;
	padding: 0.35rem !important;
	padding: 0.4rem !important;
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img, 

.product_list .product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img, 
.product-record-single:not(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img {
	padding: 5% !important;
	padding: 4% !important;
	padding: 3% !important;
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image, 

.product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image, 
.product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image {
	padding-bottom: 6% !important;
	padding-bottom: 0.65rem !important;
	padding-bottom: 0.7rem !important;
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-image */
.B2C-Style .product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img, 

.product_list .product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img, 
.product-record-single:is(.dark-product-listing-image):not(.promote-wide, .promote-half) .sect-divider div.product-image img {
	border-radius: 5px;
	border-radius: 5px 5px 0px 0px;
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .product-desc + btn-group */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group, 
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc, 

.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group, 
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .product-desc {
	padding: 0 8%;
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> btn-group */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group,

.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group {
	padding-bottom: 8%;
}

/* (有 Buy Now 變成兩顆 Button/ 底部不能有距離) (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> btn-group */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group:has(.buynow),
.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group:has(.buynow), 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .btn-group:has(.buynow) {
	padding-bottom: 0%;
	transform: translateY(-5px);
}

/* (不包含推薦產品區) (圖有間距/ 是.dark-listing) 沒有大邊框間距 >> Listing Item Block >> Product Listing >> .checkbox.product-list */
.B2C-Style .product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list, 

.product_list .product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list, 
.product-record-single:not(.promote-wide, .promote-half) .sect-divider .checkbox.product-list {
	margin: 0 8% 20px;
}

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

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


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


/*************************************************************************************************************************
	        (新的 New Icon 類)【Default Style】產品列表頁面 				
======================================================================================================================== */

#wrapper .icon-remove-sign::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.icon-remove-sign::before /* Product Listing Page (新品小 Icon) > Icon::before */, 

#wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */, 

#wrapper .fa-asterisk::before,
.fa-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */ {
	display: inline-block;
	position: relative;
	line-height: 1rem;

	font-variation-settings: 'GRAD' 0;/* 影響 Icon 粗細 >> 除 weight 之外, 還可以再微調 (for Google Material Icon 變數 : -25 / 0 / 200) */

	margin-right: 4px;
}


.icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */, 
.fa-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */ {
	font-weight: 700;
}

#wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */,
.icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */ {
	font-variation-settings: 'FILL' 1; /* 滿底, (default 則為 Fill:0) */
}

/* New Symbol Button (新品 *) >> 產品頁 (Product Page) */
.product_button .discontinued-product a.button .fa-asterisk::before/* Subcategory Product Page > 新品 Icon::before */,
.fa.fa-asterisk::before, 
#wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */, 
.icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */, 
#wrapper .fa-asterisk::before, 
.fa-asterisk::before {
	font-family: 'font-icons', 'Lato';
	content: "\e71f";

	font-family: 'FontAwesome' !important;
	content: "\f069";

	font-family: 'Material Symbols Rounded' !important; /* Google Material Icon (圓角) */
	font-family: 'Material Symbols Outlined' !important; /* Google Material Icon (方角) */

	content: "\e031";
	top: 1px;
}




/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before, 
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before, 

.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-asterisk::before, 
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-asterisk::before {
	top: 2px;
}

/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
.B2C-Style .core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before, 
.B2C-Style .core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before {
	top: 1px;
}





/* 簡中用 (CN) >> New Symbol Button (新品 *) >> 產品頁 (Product Page) */
.B2C-Style.locale_cn-zh .product_button .discontinued-product a.button .fa-asterisk::before/* Subcategory Product Page > 新品 Icon::before */,
.B2C-Style.locale_cn-zh .fa.fa-asterisk::before, 
.B2C-Style.locale_cn-zh #wrapper .icon-asterisk::before/* Product Listing Page (新品小 Icon) > Icon::before */, 
.B2C-Style.locale_cn-zh .icon-asterisk::before /* Product Listing Page (新品小 Icon) > Icon::before */, 
.B2C-Style.locale_cn-zh #wrapper .fa-asterisk::before, 
.B2C-Style.locale_cn-zh .fa-asterisk::before {
	font-family: 'FontAwesome' !important;
	content: "\f069";
}










/*************************************************************************************************************************
	        (新的 New Icon 類)【 Product Listing Page Optimization】產品列表頁面 				
======================================================================================================================== */

.product_list .key-list li span, 
.key-list li span {
    letter-spacing: -0.01em !important;
}

.product_list .key-list li/* Product Listing Page >> New Icon (note) */,
.product_list .key-list li span/* Product Listing Page >> New Icon (note) */, 
.key-list li span,
.key-list li {
	color: #2292d3 !important;
}



.product_list .key-list li, 
.key-list li {
	display: inline-block;
	display: none;/* 一般情況下隱藏文字 */
	font-size: .8em;
	padding-left: 15px;
}

/* New Icon >> Product Listing Page */
.product_list .key-list li span, 
.key-list li span {
	display: inline-block;
	display: none;/* 一般情況下隱藏文字 */
	margin-left: 1px;
}

/* 有 :has(.icons.active) 的時候，顯示文字 */ 
.product_list .key-list:has(.icons.active) li, 
.key-list:has(.icons.active) li {
  display: inline-block;/* 有 :has(.icons.active) 的時候，顯示文字 */ 
}

/* New Icon >> Product Listing Page */
/* 有 :has(.icons.active) 的時候，顯示文字 */ 
.product_list .key-list:has(.icons.active) li span, 
.key-list:has(.icons.active) li span {
	display: inline-block;/* 有 :has(.icons.active) 的時候，顯示文字 */ 
}


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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list, 
	.core-container #product_listing .text-right.key-list {
	width: auto;
	position: absolute;
	float: right;
	text-align: right;
	display: inline-flex;
	align-items: center;
	align-content: center;

	right: 0;
	top: 15px;

	display: none;/* 一般情況下隱藏文字 */
	}

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list li, 
	.core-container #product_listing .text-right.key-list li {
	display: inline-block;
	}

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before, 
	.core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before, 

	.core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-asterisk::before, 
	.core-container #product_listing .text-right.key-list .icons.active li .icon-asterisk::before {
	top: 2px;
	}

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list .icons.active li .icon-remove-sign::before, 
	.core-container #product_listing .text-right.key-list .icons.active li .icon-remove-sign::before {
	top: 1px;
	}

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing:has(.icons.active) .text-right.key-list::after {
	line-height: 1rem;
	top: 0;
	}

	/* 有 :has(.icons.active) 的時候，顯示文字 */ 
	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list:has(.icons.active), 
	.core-container #product_listing .text-right.key-list:has(.icons.active) {
	display: inline-flex;/* 有 :has(.icons.active) 的時候，顯示文字 */ 
	align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
    align-content: center;   /* 垂直置中 >> 作用於多行（或多列）的子項目 */
    justify-content: center; /* 水平置中 */
	justify-content: flex-end; /* 內容物靠右 */

	line-height: 1rem;
	width: auto !important;
	min-width: 110px;

    top: unset !important;
    top: 0.5rem !important;
	top: 12px !important;
	top: 0.9em !important;

	right: unset !important;
    right: -28px !important;
    right: -1.5rem !important;

	flex-wrap: nowrap;
	min-width: 240px;
	min-width: 205px;
	}

	/* 有 :has(.icons.active) 的時候，顯示文字 */ 
	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing #categoryheader .row:has(.key-list ul.icons.active) {
	display: inline-block;
	position: relative;
	float: right;
	}

}




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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list, 
	.core-container #product_listing .text-right.key-list {
	top: 15px;
	right: 226px;
	right: 24%;

	right: 170px;
    right: 20%;
	}


	/* 分隔線 (New Icon) >> Note 註解 > 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .text-right.key-list::after {
	content: '|';
	color: #e7e7e7;
	padding-left: 5px;
	position: relative;
	top: -4px;
	right: -5px;
	}

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing:has(.icons.active) .text-right.key-list::after {
	line-height: 1rem;
	top: 0;
	}

}


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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list, 
	.core-container #product_listing .text-right.key-list {
	right: 210px;
	right: 24%;

	right: 170px;
    right: 20%;
	}

}



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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.core-container #product_listing .col-sm-12.text-right.key-list, 
	.core-container #product_listing .text-right.key-list {
	right: 210px;
	right: 21%;

	right: 170px;
    right: 17.5%;
	}

}




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



@media (min-width: 1200px) {

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
	right: 226px;
	right: 24%;
	}

}


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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
	right: 275px;
	right: 31%;
	}

}




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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {
	right: 275px;
	right: 28%;
	}

}




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

	/* New Icon >> Note 註解 >> 移動到 Sort by 左邊 (本來會引響 Product Listing Item 多出一行高度) */
	.B2C-Style[class*="locale_pl-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_la-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_de-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_es-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_pt-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_fr-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_se-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ru-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ua-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_bg-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_ro-"] #content .core-container #product_listing .text-right.key-list,
	.B2C-Style[class*="locale_tr-"] #content .core-container #product_listing .text-right.key-list {

	}

}