@charset "utf-8";

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

#product_list_content{flex:auto;
	&>.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;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));
		&>.inner{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:1em;background:var(--background-color-L0);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);align-self:stretch;
		&>.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:1000px){
		&>.inner{display:block;}
		.product_list_menu_ctrl_on,
		.product_list_menu_ctrl_off{display:inherit;}
		#product_list_menu{position:fixed;inset:0;z-index:999;background:var(--background-color-mask-a50);
			&:not(.show){display:none;}
			&.show{opacity:1;transition:opacity 300ms;transition-behavior:allow-discrete;
				@starting-style{opacity:0;}
				&>.inner{transform:translateX(0);transition:transform 300ms;transition-behavior:allow-discrete;
					@starting-style{transform:translateX(calc(var(--translate-reverse,1) * -5em));}
				}
			}
			&>.product_list_menu_ctrl_off{position:absolute;inset:0;z-index:-1;}
			&>.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;}
		}
		#product_list_title{display:flex;flex-wrap:wrap;gap:1em var(--spacing);align-items:center;}
	}
	@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;}
		}
	}
}
@media only screen and (max-width:1000px){body:has(#product_list_menu.show){overflow:hidden;}}


/* product menu */
.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) 0 1px 0;
	& h3{font-size:var(--SiteFS);font-weight:var(--SiteFW);}
	.btw{--icon-opacity:.5;}
}
.ItemMenu{display:flex;flex-direction:column;gap:1px;padding:1em;overflow:hidden;overflow-y:auto;
	.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;
		&::after{content:attr(data-item-count);display:block;text-align:center;color:var(--body-text-color-a50);min-width:2em;}
		&>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		&[data-category-icon]{
			&:hover{background-color:rgba(var(--r) var(--g) var(--b)/10%);}
			&.on{background-color:rgba(var(--r) var(--g) var(--b)/10%);font-weight:var(--SiteFW-B);}
		}
		&[data-platform-icon]{
			&:hover{background-color:var(--SiteTHM-A10);}
			&.on{background-color:var(--SiteTHM-A10);font-weight:var(--SiteFW-B);}
		}
	}
}
/* product list */
.ItemList{--itemlist-gap:var(--spacing);--itemlist-column-size:calc(var(--itemlink-img-w) + 1em);
	&:has(img.CardPic){--itemlink-img-w:10em;}
	&:has(img.MaterialPic){--itemlink-img-w:11.5em;}
	@media only screen and (max-width:480px){--itemlist-column-fill:2;--itemlist-column-count:1fr;
		&:has(img.CardPic){--itemlink-img-w:8em;}
		&:has(img.MaterialPic){--itemlink-img-w:9.166667em;}
		.ItemLink{justify-items:center;text-align:center;
			.T{align-items:center;}
			.tags{justify-content:center;}
		}
	}
	&:is(#hot_card_list,#hot_topup_list){--itemlist-column-size:20em;--itemlist-gap:1em;
		.ItemLink{display:grid;grid-template-columns:auto 1fr;grid-template-rows:unset;gap:unset;align-items:unset;border-radius:calc(var(--itemlink-img-w,10em) / 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-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:200% auto,cover;overflow:hidden;
			.T{padding:1.5em;
				.name{font-size:var(--SiteFS-L);-webkit-line-clamp:2;line-clamp:2;max-height:3em;}
				.tags>span{color:inherit;opacity:.7;}
				.data{margin-block-start:auto;display:flex;flex-wrap:wrap;gap:.5em 1em;
					&>span{color:inherit;opacity:.7;}
				}
			}
		}
		@media only screen and (max-width:480px){--itemlist-column-fill:1;--itemlist-column-count:1fr;
			.ItemLink{justify-items:unset;text-align:start;
				.T{align-items:start;
					.name{font-size:var(--SiteFS);}
				}
			}
		}
	}
}