@charset "utf-8";

#Breadcrumbs{}
#Breadcrumbs li{display:inline;}
#Breadcrumbs li:not(:last-child)::after{content:'/';margin:0 .5em;opacity:.25;}
#Breadcrumbs a{display:inline-block;vertical-align:top;color:currentColor;opacity:.7;}


#product_list_content{flex:auto;}
#product_list_content>.inner{max-width:var(--MaxContentWidth);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:clamp(25em,25%,30em) 1fr;gap:var(--spacing);align-items:start;}

#product_list_menu{position:sticky;z-index:1;top:calc(var(--main-nav-height) * 1px + var(--spacing));}
#product_list_menu>.inner{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:1em;background:var(--background-color-L2,#fff);max-height:calc(var(--VHeight) - var(--main-nav-height) * 1px - var(--spacing) * 2);}
#product_list_wrp{padding:var(--spacing);border-radius:1em;background:var(--background-color-L3,#fff);align-self:stretch;}
#product_list_wrp>.inner{display:flex;flex-direction:column;gap:var(--spacing);}

.product_list_menu_ctrl_on,
.product_list_menu_ctrl_off{display:none;}

@media only screen and (max-width:1280px){}
@media only screen and (max-width:1000px){
	.product_list_menu_ctrl_on,
	.product_list_menu_ctrl_off{display:inherit;}

	#product_list_content>.inner{display:block;}

	#product_list_title{display:flex;flex-wrap:wrap;gap:1em var(--spacing);align-items:center;}

	body:has(#product_list_menu.show){overflow:hidden;}
	#product_list_menu:not(.show){display:none;}
	#product_list_menu.show{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;}
	#product_list_menu.show>.inner{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;}
	@starting-style{
		#product_list_menu.show{opacity:0;}
		#product_list_menu.show>.inner{transform:translateX(calc(var(--translate-reverse,1) * -5em));}
	}
	#product_list_menu{position:fixed;inset:0;z-index:999;background:var(--background-color-mask-a50,rgba(255 255 255/75%));}
	#product_list_menu>.product_list_menu_ctrl_off{position:absolute;inset:0;z-index:-1;}
	#product_list_menu>.inner{max-width:min(25em,calc(100% - 5em));height:calc(100% - 2em);max-height:unset;box-shadow:rgba(0 0 0/10%) 0 0 2em;margin:1em;}
}
@media only screen and (max-width:480px){
	#product_list_wrp{margin-inline:calc(var(--spacing) * -1);}
	#product_list_title{flex-direction:column-reverse;align-items:start;}
	.product_list_menu_ctrl_on{--CPT-US:3em;}
}


.ItemMenu_title{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;height:5em;padding-inline:var(--spacing) 1em;box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;}
.ItemMenu_title h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);text-transform:uppercase;}
.ItemMenu_title .btw{--icon-opacity:.5;}
.ItemMenu{display:flex;flex-direction:column;gap:1px;padding:1em;overflow:hidden;overflow-y:auto;}
.ItemMenu .bt{flex:none;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:center;padding-inline:1.25em;height:var(--CPT-US);border-radius:var(--CPT-BDR);color:inherit;transition:background-color 300ms;}
.ItemMenu .bt::before{content:'';display:block;font-size:2em;width:1em;height:1em;background:url('../images/category_icons-bda5098a45.svg') no-repeat calc((var(--x,10) - 1) * -1em) calc((var(--y,5) - 1) * -1em)/10em 5em;}
.ItemMenu .bt::after{content:attr(data-item-count);display:block;text-align:center;opacity:.5;min-width:2em;}
.ItemMenu .bt:hover{background-color:rgba(var(--r) var(--g) var(--b)/10%);}
.ItemMenu .bt.on{background-color:rgba(var(--r) var(--g) var(--b)/10%);font-weight:var(--SiteFW-B);}
.ItemMenu .bt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


#hot_card_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(24em,1fr));gap:1em;--W:10em;}
#hot_card_list .card{display:grid;grid-template-columns:auto 1fr;border-radius:calc(var(--W) / 10);color:var(--color);box-shadow:var(--color-img-bdc) 0 0 0 1px;background-color:var(--background-color);background-image:url("../images/art/gradient_bg-f5a8237834.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:150% auto,cover;overflow:hidden;}
#hot_card_list .img{width:var(--W);height:calc(var(--W) / 3 * 4);border-radius:calc(var(--W) / 10);background-color:var(--body-text-color-a5,rgba(0 0 0/5%));overflow:hidden;}
#hot_card_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#hot_card_list .T{display:flex;flex-direction:column;gap:1em;padding:1.5em;overflow:hidden;}
#hot_card_list .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
#hot_card_list .info{display:flex;flex-wrap:wrap;gap:.25em;opacity:.75;}
#hot_card_list .info span{font-size:var(--SiteFS-S);}
#hot_card_list .info span:not(:last-child)::after{content:' / ';opacity:.5;margin-inline:.25em;}
#hot_card_list .data{display:flex;flex-wrap:wrap;gap:1em;opacity:.5;margin-block-start:auto}
#hot_card_list .data span[icon]{display:grid;grid-template-columns:auto 1fr;gap:.5em;line-height:1}
#hot_card_list .data span[icon]::before{content:attr(icon);display:block;font-size:1em;width:1em;height:1em;line-height:1;overflow:hidden}
#hot_card_list .data[data-sales="0"]{display:none}

#card_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--W) + 2em),1fr));gap:1em;--W:10em;}
#card_list .card{display:flex;flex-direction:column;gap:1em;color:inherit;transition:color 300ms;}
#card_list .card:hover{color:var(--SiteTHM);}
#card_list .img{width:var(--W);height:calc(var(--W) / 3 * 4);border-radius:calc(var(--W) / 10);background-color:var(--body-text-color-a5,rgba(0 0 0/5%));box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px;overflow:hidden;position:relative;}
#card_list .img[region]::before{position:absolute;inset-block-start:0;inset-inline-end:0;z-index:0;margin:5% 7%;--H:1.5em;}
#card_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#card_list .T{display:flex;flex-direction:column;gap:.5em;}
#card_list .name{font-weight:var(--SiteFW-B);}
@media only screen and (max-width:480px){
	#hot_card_list,
	#card_list{--W:8em;}
	#card_list .card{align-items:center;text-align:center;}
	#card_list .img[region]::before{--H:1.25em;}
}


#hot_topup_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(24em,1fr));gap:1em;--W:11em;}
#hot_topup_list .topup{display:grid;grid-template-columns:auto 1fr;border-radius:calc(var(--W) / 10);color:var(--color);box-shadow:var(--color-img-bdc) 0 0 0 1px;background-color:var(--background-color);background-image:url("../images/art/gradient_bg-f5a8237834.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:150% auto,cover;overflow:hidden;}
#hot_topup_list .img{width:var(--W);height:var(--W);border-radius:calc(var(--W) / 10);background-color:var(--background-color-L4,#fff);overflow:hidden;}
#hot_topup_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#hot_topup_list .T{display:flex;flex-direction:column;gap:1em;padding:1.5em;overflow:hidden;}
#hot_topup_list .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:var(--SiteFS-L);font-weight:var(--SiteFW-EB);}
#hot_topup_list .data{display:flex;flex-wrap:wrap;gap:1em;opacity:.5;margin-block-start:auto}
#hot_topup_list .data span[icon]{display:grid;grid-template-columns:auto 1fr;gap:.5em;line-height:1}
#hot_topup_list .data span[icon]::before{content:attr(icon);display:block;font-size:1em;width:1em;height:1em;line-height:1;overflow:hidden}
#hot_topup_list .data[data-sales="0"]{display:none}

#topup_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--W) + 1em),1fr));gap:1em;--W:11em;}
#topup_list .topup{display:flex;flex-direction:column;gap:1em;color:inherit;transition:color 300ms;}
#topup_list .topup:hover{color:var(--SiteTHM);}
#topup_list .img{width:var(--W);height:var(--W);border-radius:calc(var(--W) / 10);background-color:var(--background-color-L4,#fff);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 0 0 1px;overflow:hidden;}
#topup_list .img img{display:block;width:100%;height:100%;object-fit:cover;}
#topup_list .T{display:flex;flex-direction:column;gap:.5em;}
#topup_list .name{font-weight:var(--SiteFW-B);}
@media only screen and (max-width:480px){
	#hot_topup_list,
	#topup_list{--W:9em;}
	#topup_list .topup{align-items:center;text-align:center;}
}