/**
 * System page shell — layout / crumb / title.
 * Theme overrides: --xy-skin-* / --xy-page-* / xy-commerce-skin.css
 */
.xy-page{display:block;min-width:0}
.xy-page-wrap{
	max-width:var(--xy-page-max,1440px);
	margin:0 auto;
	padding:0 var(--xy-page-gutter,32px);
	box-sizing:border-box;
}
@media (max-width:1200px){.xy-page-wrap{padding:0 24px}}
@media (max-width:768px){.xy-page-wrap{padding:0 16px}}

.xy-crumb{
	background:linear-gradient(
		180deg,
		color-mix(in srgb,var(--xy-skin-primary,#666) 6%,#f7f8f9) 0%,
		color-mix(in srgb,var(--xy-skin-primary,#666) 10%,#eef1f3) 100%
	);
	border-bottom:1px solid color-mix(in srgb,var(--xy-skin-primary,#666) 18%,transparent);
}
@supports not (background:color-mix(in srgb,red 6%,#fff)){
	.xy-crumb{
		background:linear-gradient(180deg,#f7f8f9 0%,#eef1f3 100%);
		border-bottom-color:var(--xy-ui-line,#e6e8eb);
	}
}
.xy-crumb-list{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:2px 0;
	margin:0;
	padding:8px 0;
	list-style:none;
}
.xy-crumb-item{
	display:inline-flex;
	align-items:center;
	min-width:0;
	max-width:100%;
	margin:0;
	padding:0;
	font-size:13px;
	line-height:1.45;
	color:var(--xy-ui-muted,#6a727c);
}
.xy-crumb-item > a,
.xy-crumb-item > span{
	display:inline;
	padding:2px 4px;
	border-radius:3px;
	color:inherit;
	text-decoration:none;
	word-break:break-word;
	overflow-wrap:anywhere;
	transition:color .2s ease,background-color .2s ease;
}
.xy-crumb-item > a:hover{
	color:var(--xy-skin-primary,#666);
	background:color-mix(in srgb,var(--xy-skin-primary,#666) 10%,transparent);
}
.xy-crumb-item.is-current,
.xy-crumb-item:last-child{
	flex:1 1 120px;
	min-width:0;
	font-weight:600;
	color:var(--xy-skin-primary,#666);
}
.xy-crumb-item.is-current > a,
.xy-crumb-item:last-child > a{pointer-events:none;color:inherit}
.xy-crumb-item.is-current > a:hover,
.xy-crumb-item:last-child > a:hover{background:transparent}
.xy-crumb-home > a::before{
	content:"\f015";
	font-family:FontAwesome;
	font-size:13px;
	line-height:1;
	margin-right:5px;
	color:var(--xy-skin-primary,#666);
	speak:none;
	-webkit-font-smoothing:antialiased;
}
.xy-crumb-sep{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:14px;
	margin:0 2px;
	flex-shrink:0;
}
.xy-crumb-sep::before{
	content:"";
	width:6px;
	height:6px;
	border-right:1.5px solid color-mix(in srgb,var(--xy-skin-primary,#666) 35%,#a8b0b8);
	border-top:1.5px solid color-mix(in srgb,var(--xy-skin-primary,#666) 35%,#a8b0b8);
	transform:rotate(45deg);
}
@supports not (border-color:color-mix(in srgb,red 35%,#aaa)){
	.xy-crumb-sep::before{border-color:#a8b0b8}
}
@media (max-width:1200px){
	.xy-crumb-list{padding:6px 0}
	.xy-crumb-item{font-size:12px}
}
@media (max-width:768px){.xy-crumb-list{padding:4px 0}}

.xy-page-body{padding:28px 0 48px}
@media (max-width:768px){.xy-page-body{padding:16px 0 32px}}
.xy-page-header{
	position:relative;
	text-align:center;
	margin:0 0 28px;
}
.xy-page-title{
	margin:0;
	padding:0 0 16px;
	font-size:clamp(22px,3vw,30px);
	font-weight:600;
	line-height:1.25;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--xy-skin-primary,#333);
	position:relative;
}
.xy-page-title::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:72px;
	height:2px;
	transform:translateX(-50%);
	background:color-mix(in srgb,var(--xy-skin-primary,#666) 35%,#d9d9d9);
}
@supports not (background:color-mix(in srgb,red 35%,#ddd)){
	.xy-page-title::after{background:#d9d9d9}
}
.xy-page-desc{
	margin:12px 0 0;
	font-size:15px;
	line-height:1.55;
	color:var(--xy-ui-ink,#1a1d21);
	text-align:left;
}
@media (max-width:768px){
	.xy-page-header{margin-bottom:18px}
	.xy-page-title{padding-bottom:12px}
}