@charset "utf-8";
#Product_container{position:relative;
	&::before{content:'';display:block;height:max(calc(var(--VHeight) - var(--site-header-height) * 1px),60em);position:absolute;inset-block-start:0;inset-inline:0;z-index:-1;pointer-events:none;background-color:var(--background-color);background-image:url("../images/art/gradient_bg-c876d8c53b.svg"),linear-gradient(180deg,transparent,var(--body-background-color)),linear-gradient(calc(var(--angle-reverse,1) * 135deg),hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-repeat:repeat-x;background-position:top center;background-size:clamp(60em,var(--VWidth),100em) auto,cover,cover;
		@media only screen and (max-width:480px){content:unset;}
	}
}


/* product cover */
#Product_cover{color:var(--color);
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid:"cover name func" 1fr "cover feature func" auto "cover info func" auto/auto 1fr auto;gap:1em var(--spacing);align-items:end;
		.cover{grid-area:cover;}
		.name{grid-area:name;}
		.feature{grid-area:feature;}
		.info{grid-area:info;}
		.func{grid-area:func;}
	}
	.cover{
		.img{width:var(--cover-width);border-radius:calc(var(--cover-width) / 10);overflow:hidden;background:var(--body-text-color-a5);box-shadow:var(--color-img-bdc) 0 0 0 1px;
			&:has(img.CardPic){--cover-width:12em;height:calc(var(--cover-width) / 3 * 4);}
			&:has(img.MaterialPic){--cover-width:15em;height:var(--cover-width);}
			&:has(img.IconPic){--cover-width:10em;height:var(--cover-width);border-radius:25%;}
			&>img{display:block;width:100%;height:100%;object-fit:cover;}
		}
	}
	.name{
		& h1{font-size:var(--SiteFS-XXXL);font-weight:var(--SiteFW-EB);text-transform:uppercase;}
	}
	.feature{display:flex;flex-wrap:wrap;gap:1em var(--spacing);
		.data{display:flex;gap:.75em;box-shadow:var(--color) 0 0 0 1px inset;padding:.25em .75em;border-radius:.5em;cursor:pointer;transition:color 300ms,background-color 300ms;
			&:hover{color:var(--background-color);background-color:var(--color);}
			&>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.333334em;
				&::before{content:attr(icon);font-size:1.166667em;}
			}
		}
		.tag{
			&:is([icon],[region]){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75em;
				&[icon]::before{content:attr(icon);font-size:1.5em;opacity:.5;}
			}
			& b{font-weight:var(--SiteFW-EB);}
		}
		.platform{display:flex;flex-wrap:wrap;gap:1em;
			&>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;
				&::before{--platform-icon-size:1.5em;filter:invert(var(--lightness-trend));}
			}
		}
	}
	.info{display:flex;flex-direction:column;gap:1em;
		&:not(:has(.note)){display:none;}
		.note{display:grid;grid-template-columns:auto 1fr;gap:.5em;align-items:center;max-width:60em;
			&::before{content:attr(icon);font-size:1.5em;opacity:.5;align-self:start;}
			.msg{
				& *{display:inline !important;}
				& a{color:inherit;text-decoration:underline;
					&[icon]{display:inline-grid !important;grid-template-columns:1fr auto;align-items:center;gap:.25em;vertical-align:top;
						&::before{content:attr(icon);font-size:1.25em;order:9;}
						&>span{font-weight:var(--SiteFW-B);}
					}
				}
				& strong,& b{font-weight:var(--SiteFW-EB);}
				& p{display:inline;margin:unset;}
				& br{display:none !important;}
				& [color],& [style]{all:unset !important;}
			}
			.bundle_link{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;width:fit-content;max-width:100%;color:inherit;text-decoration:none;
				&::before{content:attr(icon);font-size:1em;width:1.5em;height:1.5em;order:99;background:var(--color-img-bgc);border-radius:1em;box-sizing:border-box;padding:.25em;align-self:start;}
				&>span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;hyphens:auto;}
			}
		}
	} 
	.func{display:flex;gap:1em;flex-direction:column;
		.btw{--color:inherit;--border-color:var(--color-img-bdc);}
		#favorite_bt.added>span::before{content:'favorite';--icon-color:var(--SiteTHM);}
	}
	@media only screen and (max-width:1280px){
		.func .btw>span{display:block;width:var(--icon-size);height:var(--icon-size);padding:unset;margin:calc((var(--CPT-US) - var(--icon-size)) / 2);overflow:hidden;}
	}
	@media only screen and (max-width:1000px){
		&>.inner{position:relative;}
		.name h1{font-size:var(--SiteFS-XXL);}
		.feature,.info{font-size:var(--SiteFS-S);}
	}
	@media only screen and (max-width:800px){
		&>.inner{grid-template-rows:auto auto 1fr;align-items:start;max-width:calc(var(--spacing) * 2 + 40em);}
		.cover{
			.img{
				&:has(img.CardPic){--cover-width:10em;}
				&:has(img.MaterialPic){--cover-width:12em;}
				&:has(img.IconPic){--cover-width:8em;}
			}
		}
		.func .btw{--border-color:transparent;
			&>span{margin:.333334em;}
		}
	}
	@media only screen and (max-width:480px){background-color:var(--background-color);background-image:url("../images/art/gradient_bg-c876d8c53b.svg"),linear-gradient(calc(var(--angle-reverse,1) * 135deg),hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-repeat:repeat-x;background-position:top center;background-size:clamp(60em,var(--VWidth),100em) auto,cover;padding-block-end:1em;margin-block-end:-1em;
		&>.inner{grid:"cover name func" auto "cover feature feature" 1fr/auto 1fr;
			.info{grid-area:unset;grid-column:1/-1;}
		}
		.cover .img{
			&:has(img.CardPic){--cover-width:8em;}
			&:has(img.MaterialPic){--cover-width:9em;}
			&:has(img.IconPic){--cover-width:6em;}
		}
		.name h1{font-size:var(--SiteFS-XL);}
		.feature{row-gap:.75em;
			.platform{row-gap:.75em;}
		}
	}
}


/* product purchase */
#Product_purchase{
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding-inline:var(--spacing);box-sizing:border-box;display:grid;grid:"item_form item_function"/1fr clamp(30em,33%,35em);gap:var(--spacing);
		&:has(#promotion_banner){grid:"item_form promotion_banner" auto "item_form item_function" 1fr/1fr clamp(30em,33%,35em);}
		#promotion_banner{grid-area:promotion_banner;}
		#item_form_ctrl_on{grid-area:item_form_ctrl_on;}
		.item_form{grid-area:item_form;}
		.item_function{grid-area:item_function;}
		@media only screen and (max-width:800px){grid:"item_form_ctrl_on" "item_function";gap:1em;max-width:40em;padding:unset;padding-block-end:var(--spacing);
			&:has(#promotion_banner){grid:"promotion_banner" "item_form_ctrl_on" "item_function";}
		}
	}
	#promotion_banner{display:flex;flex-direction:column;gap:1em;}
	#item_form_ctrl_on{display:none;
		@media only screen and (max-width:800px){display:block;background:var(--background-color-L1);border-radius:1em;overflow:hidden;padding:var(--spacing);position:relative;
			&>.inner{display:grid;grid:"img T icon"/auto 1fr auto;align-items:center;gap:1em;
				&::before{grid-area:icon;content:attr(icon);display:flex;align-items:center;justify-content:center;font-size:1em;width:1.5em;height:1.5em;border-radius:100%;background:var(--body-text-color-a5);}
				.img{grid-area:img;width:4em;height:4em;border-radius:25%;overflow:hidden;background-color:#fff;box-shadow:var(--body-text-color-a10) 0 0 0 1px;
					&>img{display:block;width:100%;height:100%;object-fit:cover;}
				}
				.T{grid-area:T;display:flex;flex-direction:column;gap:.25em;overflow:hidden;
					.sku{
						&>span{font-weight:var(--SiteFW-EB);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-height:3em;overflow:hidden;text-overflow:ellipsis;}
						&>i{display:none;}
						&:has(~.Mark)>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					}
					.Mark{display:flex;flex-wrap:wrap;gap:.25em .5em;font-size:var(--SiteFS-S);max-height:3.25em;overflow:hidden;
						.promotion{
							&:has(+.promotion)::after{content:'; ';}
						}
					}
				}
				.C{display:none;}
				/* CDK */
				&:has(img.CardPic){grid:"img T icon" 1fr "img C icon" auto/auto 1fr auto;align-items:start;gap:.5em var(--spacing);
					&::before{align-self:center;}
					.img{--width:5em;width:var(--width);height:calc(var(--width) / 3 * 4);border-radius:calc(var(--width) / 10);}
					.T{gap:.5em;
						.sku:has(~.Mark)>span{-webkit-line-clamp:2;line-clamp:2;max-height:3em;white-space:normal;}
					}
					.C{grid-area:C;display:block;
						.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em 1em;
							& b{color:var(--SiteTHM);font-weight:var(--SiteFW-EB);
								&.price_origional{order:-1;color:var(--body-text-color-a50);font-size:var(--SiteFS-S);font-weight:var(--SiteFW);text-decoration:line-through;}
							}
						}
					}
				}
			}
		}
	}
	.item_form{display:flex;flex-direction:column;
		.item_sku{flex:auto;display:flex;flex-direction:column;gap:1.5em;padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
			&>.title{font-weight:var(--SiteFW-B);}
			&>.btc{display:none;
				.btw{display:block;text-transform:uppercase;}
			}
		}
		@media only screen and (max-width:800px){justify-content:end;position:fixed;inset:0;z-index:1000;background:var(--background-color-mask-a50);
			&:not(.item_form_activated){display:none;}
			&.item_form_activated{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;
				@starting-style{opacity:0;}
				.item_sku{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;
					@starting-style{transform:translateY(5em);}
				}
			}
			.item_sku{flex:none;width:min(40em,100%);max-height:calc(var(--VHeight) - var(--main-nav-height) * 1px);min-height:calc(var(--VHeight) * .66);margin-inline:auto;padding:unset;box-sizing:border-box;overflow:hidden;box-shadow:rgba(0 0 0/10%) 0 0 2em;display:grid;grid:"title" auto "SKU_list" 1fr "btc" auto;gap:unset;border-end-start-radius:unset;border-end-end-radius:unset;
				&>.title{grid-area:title;padding:var(--spacing);}
				&>#SKU_list{grid-area:SKU_list;padding:var(--spacing);overflow:hidden auto;background-color:var(--background-color-L2);box-shadow:var(--body-text-color-a5) 0 1px 0,var(--body-text-color-a5) 0 -1px 0;}
				&>.btc{grid-area:btc;display:block;padding:1.25em var(--spacing);}
			}
		}
	}
	.item_function{display:flex;flex-direction:column;gap:1em;
		@media only screen and (min-width:1001px){position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;align-self:start;}
		.order{display:flex;flex-direction:column;gap:var(--spacing);background:var(--background-color-L1);border-radius:1em;overflow:hidden;padding:var(--spacing);
			&.hide{display:none}
			.item_qtt{display:grid;grid-template-columns:1fr auto;column-gap:1em;align-items:center;
				&.hide{display:none;}
				&>.title{font-weight:var(--SiteFW-B);}
				#SKU_quantity{align-self:start;grid-row:span 2;
					.cpt-quantity>input[type=number]{min-width:calc(var(--CPT-US) * 1.5);
						&[disabled]~a.btw{pointer-events:none;}
					}
				}
				.tips_wrp{font-size:var(--SiteFS-S);}
				&:not(.hide)~.item_table{padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgb(0 0 0 / 5%)) 0 1px 0 inset}
			}
			/*addtional info*/
			.item_table{display:flex;flex-direction:column;gap:1.5em;
				&.hide{display:none}
				&>.title{font-weight:var(--SiteFW-B)}
			}
			#SKU_table{display:flex;flex-direction:column;gap:1.5em;
				.cpt-text>input[type="number"]{text-align:start;}
				#game_top_up_field{display:flex;flex-direction:column;gap:1.5em;
					.field{display:grid;row-gap:1em;width:min(30em,100%);
						&>.title,&>.tips_wrp{grid-column:1/-1;}
						&:has(.tips_img_ctrl){grid-template-columns:1fr auto;}
						.tips_img_ctrl{--icon-opacity:.5;}
						&.hide,& .hide{display:none !important;}
					}
				}
				#game_top_up_field_check_account:not(:has(.field:not(.hide))){display:none;}
				#game_top_up_field_autofill{display:flex;flex-direction:column;gap:1em;
					&.hide,&:empty{display:none}
					&>.title{font-weight:var(--SiteFW-B);}
					.field_wrp{display:flex;flex-wrap:wrap;gap:.5em 1em;
						.field_autofill{counter-increment:fields;display:grid;grid-template-columns:auto 1fr;gap:1em;
							&::before{content:counter(fields);display:block;width:1.5em;height:1.5em;text-align:center;background:var(--body-text-color-a5);color:var(--body-text-color-a50);border-radius:100%;font-weight:var(--SiteFW-EB);}
							&>div{display:flex;flex-wrap:wrap;align-items:center;gap:.75em;cursor:pointer;transition:color 300ms,background-color 300ms;
								&:hover{color:var(--SiteTHM);background-color:var(--SiteTHM-A10);}
								&>span:not(:last-child){display:flex;align-items:center;gap:.75em;
									&::after{content:'/';color:var(--body-text-color-a25);}
								}
							}
						}
					}
				}
			}
		}
		.calculate{background:var(--background-color-L1);border-radius:1em;overflow:hidden;
			&>.inner{display:flex;flex-direction:column;gap:1em;padding:var(--spacing);}
			.details{display:flex;flex-direction:column;gap:.75em;margin-block-end:calc(var(--spacing) - .75em);
				.total{display:flex;justify-content:space-between;gap:1em;
					&:has(~.field:not(.hide)){padding-block-end:var(--spacing);margin-block-end:calc(var(--spacing) - .75em);box-shadow:var(--body-text-color-a5) 0 1px 0;}
					.T{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
					.C{text-align:end;
						.price{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);color:var(--SiteTHM);}
						.credits{font-size:var(--SiteFS-S);color:var(--body-text-color-a50);
							#totalCredits{font-weight:var(--SiteFW-EB);}
						}
					}
				}
				.field{display:grid;grid-template-columns:max(8em,30%) 1fr;gap:.5em 1em;
					&.hide{display:none !important;}
					.T{}
					.C{grid-column:2/-1;text-align:end;
						.tips{font-size:var(--SiteFS-S);margin-inline-start:auto;width:fit-content;color:var(--body-text-color-a50);
							&[icon]{display:grid;grid-template-columns:auto 1fr;gap:.75em;text-align:start;
								&::before{content:attr(icon);font-size:1.5em;}
							}
						}
					}
				}
				.pri{font-weight:var(--SiteFW-EB);}
				.promotion{color:var(--text-color-promotion);}
				.warning{color:var(--text-color-warning);}
				.alert{color:var(--text-color-alert);}
				.shipping_info{width:fit-content;margin-inline-start:auto;
					&::before{content:attr(icon);font-size:1.5em;display:inline-block;vertical-align:top;margin-inline-end:.333334em;}
				}
				.region_info{display:flex;flex-direction:column;gap:.75em;
					.text{display:grid;grid-template-columns:1fr auto;gap:1em;cursor:pointer;
						&::before{order:9;content:attr(icon);font-size:1em;width:1.5em;height:1.5em;display:flex;align-items:center;justify-content:center;background-color:var(--body-text-color-a5);border-radius:100%;}
					}
					.info{display:flex;flex-direction:column;gap:.75em;padding:1em 1.5em;font-size:var(--SiteFS-S);border-radius:.5em;box-shadow:var(--body-text-color-a10) 0 0 0 1px inset;background-color:var(--background-color-L3);text-align:start;
						&>ul{display:flex;flex-wrap:wrap;column-gap:1em;
							&>li{list-style-type:disc;list-style-position:inside;font-weight:var(--SiteFW-B);
								&::marker{color:var(--body-text-color-a50);}
							}
						}
					}
					&:not(.show) .info{display:none;}
					&.show .text::before{content:'keyboard_arrow_down';}
				}
				.coupon_info{display:grid;grid-template-columns:1fr auto;gap:1em;cursor:pointer;
					&:has(.coupon_available){align-items:center;}
					&::before{order:9;content:attr(icon);font-size:1em;width:1.5em;height:1.5em;display:flex;align-items:center;justify-content:center;background-color:var(--body-text-color-a5);border-radius:100%;					}
					.coupon_available{display:flex;flex-wrap:wrap;justify-content:end;gap:.5em;max-height:2em;overflow:hidden;}
					.coupon_empty{}
				}
				.coupon_special{display:grid;grid-template-columns:1fr auto;gap:.5em;width:fit-content;padding:.25em .75em;margin-inline-start:auto;border-radius:.333334em;color:var(--SiteTHM-text-invert);background-color:var(--text-color-promotion);
					.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				}
			}
			.btc{display:grid;grid-template-columns:max(8em,30%) 1fr;gap:1em;
				.btw{--font-weight:var(--SiteFW-EB);text-transform:uppercase;
					&:only-child{grid-column:1/-1;}
					&.stockout{}
				}
				#addToCardButton>span{width:auto;
					&::before{margin-inline:auto;}
				}
			}
			.btc_paypal{display:flex;flex-direction:column;gap:1em;
				#paypalBuyButton{display:block;--icon-size:2em;--font-weight:var(--SiteFW-EB);}
				#paypalSave{margin-inline:auto;--font-weight:var(--SiteFW);}
			}
		}
	}
}
@media only screen and (max-width:800px){body:has(.item_form.item_form_activated){overflow:hidden;}}


/* product purchase - topup direct purchase 直购v2 */
#Product_purchase3{
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding-inline:var(--spacing);box-sizing:border-box;display:grid;grid-template-columns:1fr clamp(30em,33%,35em);gap:var(--spacing);align-items:start;}
	@media only screen and (max-width:800px){
		&>.inner{display:flex;flex-direction:column;align-items:unset;max-width:40em;padding-inline:unset;}
	}
	#DPItem_content{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);
		[data-step]{counter-increment:step;display:grid;grid:"step title" auto ". content" 1fr / auto 1fr;gap:1.5em;align-items:center;scroll-margin-block-start:calc((var(--site-header-height) - var(--global-nav-height)) * 1px + 1.5em);
			&+&{padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;}
			&::before{grid-area:step;content:counter(step);display:block;width:2em;height:2em;line-height:2;overflow:hidden;text-align:center;background:var(--body-text-color-a5);font-weight:var(--SiteFW-B);border-radius:.5em;}
			&>.title{grid-area:title;font-weight:var(--SiteFW-B);}
			&>.inner{grid-area:content;display:flex;flex-direction:column;gap:var(--spacing);}
			@media only screen and (max-width:800px){gap:1em;}
			@media only screen and (max-width:480px){grid:"step title" auto "content content" 1fr / auto 1fr;}
		}
		#orderInfo{display:grid;grid-template-columns:repeat(auto-fill,minmax(25em,1fr));gap:1em var(--spacing);align-items:start;
			.field{display:grid;row-gap:1em;width:min(30em,100%);
				[class*="cpt-"]>input[type="number"]{text-align:start;}
				.tips_img_ctrl{--icon-opacity:.5;}
				.hide{display:none!important;}
				&>.title,&.tips_wrp{grid-column:1/-1;}
				&:has(.tips_img_ctrl){grid-template-columns:1fr auto;}
			}
		}
		#SKU_list{
			#cardType{--column-size:18em;
				&:not(.fold) .fold_ctrl{display:none;}
				.fold_ctrl{grid-column:1/-1;display:block;margin-inline:auto;--icon-order:9;--font-weight:var(--SiteFW);}
				@media only screen and (min-width:801px){
					&:not(:has(label:nth-of-type(13))) .fold_ctrl{display:none;}
					&.fold label:nth-of-type(12)~label{display:none;}
				}
				@media only screen and (max-width:800px){
					&:not(:has(label:nth-of-type(7))) .fold_ctrl{display:none;}
					&.fold label:nth-of-type(6)~label{display:none;}
				}
			}
		}
		#ChannelList{display:flex;flex-direction:column;gap:1em;
			&>.load{}
			&>.empty{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--spacing);
				.art{width:12em;aspect-ratio:4/3;
					&>img{display:block;width:100%;height:100%;object-fit:contain;}
				}
				.tips_wrp{max-width:30em;}
			}
			.group_name{}
			.group{display:grid;grid-template-columns:repeat(auto-fill,minmax(18em,1fr));gap:.75em;align-items:start;
				&>label{
					& input[type="radio"]{display:none;
						&:not(:checked,:disabled)+.channel::before{background-color:var(--CPT-BGC);background-image:unset;box-shadow:var(--body-text-color-a5) 0 0 0 var(--CPT-BDW) inset;}
						&:checked+.channel{box-shadow:var(--SiteTHM-A75) 0 0 0 var(--CPT-BDW) inset,var(--SiteTHM-A10) 0 0 0 999em inset;
							&::before{background-color:var(--SiteTHM);}
						}				
						&:disabled+.channel{cursor:not-allowed;
							&::before{background-color:var(--CPT-COLOR-A5);background-position-x:-1em;background-position-y:calc(100% - var(--brightness-filter) * -1em);box-shadow:var(--CPT-BDC) 0 0 0 var(--CPT-BDW) inset;}
						}
					}
				}
				.channel{display:grid;grid:"icon img price"/auto 1fr auto;gap:.5em 1.5em;align-items:center;padding:1.25em 1.5em;min-height:4em;box-sizing:border-box;border-radius:var(--CPT-BDR);background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a10) 0 0 0 var(--CPT-BDW) inset;transition:box-shadow 300ms;cursor:pointer;overflow:hidden;
					&::before{grid-area:icon;content:'';font-size:1.5em;width:1em;height:1em;border-radius:25%;background:var(--SiteTHM) var(--checkbox-background-image) no-repeat 0 calc(var(--brightness-filter) * -1em) / 2em 2em;transition:background-color 300ms,box-shadow 300ms;}
					.img{grid-area:img;min-width:2em;max-width:10em;height:2em;box-sizing:border-box;overflow:hidden;
						&>img{display:block;width:auto;max-width:calc(100% - var(--brightness-filter) * var(--CPT-BDW) * 2);height:calc(100% - var(--brightness-filter) * var(--CPT-BDW) * 2);object-fit:contain;border-radius:calc(var(--brightness-filter) * .333334em);color:#000;background:rgba(255 255 255/var(--brightness-filter));padding:calc(var(--brightness-filter) * var(--CPT-BDW));}
					}
					.price{grid-area:price;text-align:end;color:var(--SiteTHM);font-weight:var(--SiteFW-EB);
						.seagmcredits_price{grid-area:price;}
					}
					.credits{text-align:end;font-size:var(--SiteFS-S);}
					.tips_wrp{grid-column:2/-1;font-size:var(--SiteFS-S);}
				}
				&:not(.fold) .fold_ctrl{display:none;}
				.fold_ctrl{grid-column:1/-1;display:block;margin-inline:auto;--icon-order:9;--font-weight:var(--SiteFW);}
				@media only screen and (min-width:801px){
					&:not(:has(label:nth-of-type(7))) .fold_ctrl{display:none;}
					&.fold label:nth-of-type(6)~label{display:none;}
				}
				@media only screen and (max-width:800px){
					&:not(:has(label:nth-of-type(5))) .fold_ctrl{display:none;}
					&.fold label:nth-of-type(4)~label{display:none;}
				}
				@media only screen and (max-width:480px){grid-template-columns:repeat(auto-fill,minmax(12em,1fr));
					.channel{
						&::before{content:unset;}
						.tips_wrp{grid-column:1/-1;}
					}
					& input[type="radio"]:disabled+.channel{
						.img>img{filter:grayscale(1);opacity:.5;}
						.price{display:none;}
					}
					&>label:only-of-type{grid-column:1/-1;
						.channel{grid:"img price"/1fr auto;}
					}
					&>label:not(:only-of-type) .channel{display:flex;flex-direction:column;align-items:start;}
				}
			}
		}
	}
	#DPItem_calculate{
		&>.inner{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);background:var(--background-color-L1);border-radius:1em;overflow:hidden;}
		.details{display:flex;flex-direction:column;gap:var(--spacing);
			.total{display:grid;grid-template-columns:1fr auto;column-gap:var(--spacing);padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0;
				.T{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
				.C{text-align:end;
					.price{color:var(--SiteTHM);font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
					.credits{color:var(--body-text-color-a50);font-size:var(--SiteFS-S);}
					#totalCredits{font-weight:var(--SiteFW-EB);}
				}
			}
			.info{display:grid;grid-template-columns:auto 1fr;gap:1em;
				.hr{grid-column:1/-1;margin-block:1em;height:1px;background-color:var(--body-text-color-a5);}
				.T{}
				.C{text-align:end;
					.sku,.channel,.pri{font-weight:var(--SiteFW-EB);}
					.promotion{color:var(--text-color-promotion);}
				}
			}
		}
		.btc{display:flex;flex-direction:column;gap:1em;
			.btw{--CPT-US:4em;--font-weight:var(--SiteFW-EB);text-transform:uppercase;}
			.stockout{}
		}
		.hide{display:none !important;}
		@media only screen and (min-width: 801px){position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;}
	}
}


/*sku list*/
#SKU_list{display:flex;flex-direction:column;gap:var(--spacing);
	#cardType{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--column-size,26em),1fr));align-items:start;gap:.75em;--spacing:1.25em;
		& label{display:flex;flex-direction:column;gap:.75em;
			&>input[type="radio"]{display:none;
				&:not(:checked,:disabled)+.SKU_type::before{background-color:var(--CPT-BGC);background-image:unset;box-shadow:var(--body-text-color-a5) 0 0 0 var(--CPT-BDW) inset;}
				&:checked+.SKU_type{box-shadow:var(--SiteTHM-A75) 0 0 0 var(--CPT-BDW) inset,var(--SiteTHM-A10) 0 0 0 999em inset;
					&::before{background-color:var(--SiteTHM);}
				}
				&:disabled+.SKU_type{cursor:not-allowed;
					&::before{background-color:var(--CPT-COLOR-A5);background-position-x:-1em;background-position-y:calc(100% - var(--brightness-filter) * -1em);box-shadow:var(--CPT-BDC) 0 0 0 var(--CPT-BDW) inset;}
					.img,.T .sku,.C{opacity:.5;}
				}
			}
		}
		.SKU_type{display:grid;grid:"icon T C"/auto 1fr auto;align-items:center;gap:.5em var(--spacing);padding:var(--spacing);box-sizing:border-box;cursor:pointer;border-radius:var(--border-radius,var(--CPT-BDR));background-color:var(--background-color-L3);transition:box-shadow 300ms;box-shadow:var(--body-text-color-a10) 0 0 0 var(--CPT-BDW) inset;
			&:not(:has(.C)){grid:"icon T"/auto 1fr;}
			&::before{grid-area:icon;content:'';display:none;font-size:1.5em;width:1em;height:1em;border-radius:25%;background:var(--SiteTHM) var(--checkbox-background-image) no-repeat 0 calc(var(--brightness-filter) * -1em)/2em 2em;transition:background-color 300ms,box-shadow 300ms;}
			.img{grid-area:icon;width:var(--sku-img-width,4em);height:var(--sku-img-width,4em);border-radius:25%;overflow:hidden;background-color:var(--body-text-color-a5);box-shadow:var(--body-text-color-a10) 0 0 0 1px;align-self:start;
				&:has(img.CardPic){--sku-img-width:6em;height:calc(var(--sku-img-width) / 3 * 4);border-radius:calc(var(--sku-img-width) / 10);}
				&>img{display:block;width:100%;height:100%;object-fit:cover;}
			}
			.T{grid-area:T;display:flex;flex-direction:column;gap:.25em;
				.sku{
					& span{font-weight:var(--SiteFW-EB);}
					&:has(i[icon]){
						& i[icon]{display:inline-block;vertical-align:top;margin-block:.125em;
							&::before{content:var(--i);font-size:1.25em;color:var(--color);}
							&.instantdelivery{--i:'offline_bolt';--color:var(--text-color-promotion);}
							&.promo{--i:'local_mall';--color:var(--text-color-promotion);}
						}
					}
				}
				.Mark{display:flex;flex-wrap:wrap;gap:.25em .5em;font-size:var(--SiteFS-S);
					.promotion{
						&:has(+.promotion)::after{content:'; ';}
					}
				}
			}
			.C{grid-area:C;display:flex;flex-direction:column;
				.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em 1em;
					& b{color:var(--SiteTHM);font-weight:var(--SiteFW-EB);
						&.price_origional{order:-1;color:var(--body-text-color-a50);font-size:var(--SiteFS-S);font-weight:var(--SiteFW);text-decoration:line-through;}
					}
				}
			}
			&:has(.Mark,img.sku_img) .C .price{flex-direction:column-reverse;align-items:end;}
			&:has(img.sku_img){
				&::before{display:none;}
				.img{display:block;}
			}
			&:has(img.CardPic){grid:"icon T" 1fr "icon C" auto/auto 1fr;align-items:start;--border-radius:calc(var(--CPT-BDR) * 2);
				&::before{display:none;}
				.img{display:block;}
				.T{gap:.5em;}
				.C .price{flex-direction:row;justify-content:start;}
			}
		}
		.SKU_notification{display:grid;grid-template-columns:auto 1fr;gap:.75em;margin-inline-start:auto;padding-inline:var(--spacing);color:var(--body-text-color-a50);cursor:pointer;transition:color 300ms;
			&:hover{color:var(--SiteTHM);}
			&::before{content:attr(icon);font-size:calc(var(--SiteFS-S) * 1.5);}
			&>span{font-size:var(--SiteFS-S);}
		}
		&:has(label:nth-child(9)){
			.SKU_type{--border-radius:inherit;
				&:not(:has(img.sku_img)){align-items:start;--spacing:1.5em;
					&::before{display:block;}
					.img{display:none;}
				}
				&:has(img.CardPic){grid:"icon T C" / auto 1fr auto;
					.T{gap:.25em;}
					.C .price{flex-direction:column-reverse;align-items:end;}
				}
			}
		}
		@media only screen and (min-width:801px){
			&:has(label:only-child){--sku-img-width:5em;}
		}
	}
}

/* product information */
#Product_information{
	&>.inner{max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid-template-columns:1fr clamp(30em,33%,35em);gap:var(--spacing);align-items:start;
		&>.content{
			&>.inner{display:flex;flex-direction:column;gap:var(--spacing);}
		}
		&>.aside{display:grid;gap:var(--spacing);
			&>.inner{background:var(--background-color-L3);border-radius:1em;overflow:hidden;}
		}
	}
	@media only screen and (max-width:800px){margin:unset;background:unset;
		&>.inner{display:flex;flex-direction:column;align-items:unset;max-width:40em;padding:unset;margin-inline:auto;
			&>.aside{margin-block-end:var(--spacing);}
		}
	}
	#product_content_tab{display:block;position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px);inset-inline:0;z-index:3;height:0;margin-block-end:calc(var(--spacing) * -1);
		&>.inner{display:flex;align-items:center;justify-content:center;overflow:hidden;overflow-x:auto;scroll-snap-type:x mandatory;background-color:var(--background-color-L3);box-shadow:var(--body-text-color-a5) 0 1px 0 inset,var(--body-text-color-a5) 0 1px 0;visibility:hidden;opacity:0;transform:translateY(-2em);}
		&.float{
			&>.inner{visibility:visible;opacity:1;transform:none;transition:opacity 300ms,transform 300ms;}
		}
		.tab{display:flex;align-items:center;height:5em;padding-inline:var(--spacing);color:inherit;position:relative;scroll-snap-align:center;
			&>span{display:block;white-space:nowrap;}
		}
		@media only screen and (max-width:480px){
			&>.inner{justify-content:start;}
		}
	}
	#item_description,#item_instruction,#item_reviews,#item_promotion{background:var(--background-color-L3);border-radius:1em;}
	#item_description{scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));}
	#item_instruction,#item_reviews,#item_promotion{scroll-margin-block-start:calc(var(--main-nav-height) * 1px + var(--spacing) + 5em);}
	#item_description,#item_instruction{padding-inline:var(--spacing);
		&>.inner{max-width:60em;margin-inline:auto;
			.title{display:flex;align-items:center;height:5em;font-weight:var(--SiteFW-B);box-shadow:var(--body-text-color-a5) 0 1px 0;}
			& article.docs{padding-block:var(--spacing);}
		}
	}
	#item_reviews{padding:var(--spacing);
		&>.inner{display:flex;flex-direction:column;gap:var(--spacing);max-width:60em;margin-inline:auto;
			.title{display:flex;gap:1em var(--spacing);align-items:start;justify-content:space-between;flex-wrap:wrap;padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0;
				&>span{font-weight:var(--SiteFW-B);}
				.all_reviews{display:block;color:var(--body-text-color-a50);white-space:nowrap;
					&>span{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;
						&::before{content:attr(icon);font-size:1.5em;order:9;}
					}
				}
			}
			.statistic{display:flex;flex-wrap:wrap;align-items:center;gap:1em var(--spacing);
				.stat{display:flex;align-items:baseline;gap:1em;
					& span{}
					& b{font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);line-height:1;}
				}
			}
			.review_list{display:grid;grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:var(--spacing) calc(var(--spacing) * 2);
				.review{display:grid;grid:"avatar name name" auto "avatar rate time" auto ". comment comment" 1fr/auto auto 1fr;align-items:center;column-gap:1em;box-sizing:border-box;min-height:100%;grid-template-rows:auto auto 1fr;
					.avatar{grid-area:avatar;width:3em;height:3em;border-radius:100%;overflow:hidden;background:var(--body-text-color-a5);box-shadow:var(--body-text-color-a5) 0 0 0 1px;
						&>img{display:block;width:100%;height:100%;object-fit:cover;}
					}
					.name{grid-area:name;font-weight:var(--SiteFW-B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
					.rate{grid-area:rate;--RateStarSize:1em;}
					.time{grid-area:time;font-size:var(--SiteFS-S);color:var(--body-text-color-a50);line-height:1;}
					.comment{grid-area:comment;margin-block-start:1em;align-self:start;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;max-height:4.5em;overflow:hidden;text-overflow:ellipsis;}
				}
			}
		}
	}
	#item_promotion{padding:var(--spacing);
		&>.inner{display:flex;flex-direction:column;gap:var(--spacing);max-width:60em;margin-inline:auto;
			.title{font-weight:var(--SiteFW-B);}
			.NewsList{--newslist-column:15em;}
		}
	}
	.aside_nav{display:flex;overflow:hidden;
		.tab{flex:auto;display:flex;align-items:center;justify-content:center;height:5em;padding-inline:var(--spacing);color:var(--body-text-color-a50);border-start-start-radius:1em;border-start-end-radius:1em;cursor:pointer;overflow:hidden;transition:box-shadow 300ms;
			&.on{color:inherit;box-shadow:rgb(0 0 0/calc(var(--brightness-filter) * 40% + 10%)) 0 0 2em;}
			&:only-child{justify-content:start;padding-inline:unset;margin-inline:var(--spacing);box-shadow:var(--body-text-color-a5) 0 -1px 0 inset;}
			&>span{display:block;font-weight:var(--SiteFW-B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		}
	}
	.recommend_wrp{
		.recommend{padding:var(--spacing);
			&:not(.show){display:none;}
			&:only-child{display:block}
			.ItemList{max-width:25em;margin-inline:auto;}
		}
	}
	#aside_activity{
		&>.inner{
			#slide_show{background:var(--background-color-L3);border-radius:1em;overflow:hidden;touch-action:pan-y;
				.list{display:flex;
					.slide{flex:none;width:100%;aspect-ratio:3/2;
						&>img{display:block;width:100%;height:100%;object-fit:cover;}
					}
				}
			}
		}
		@media only screen and (max-width:480px){padding-inline:var(--spacing);}
	}
}