/*
 * ponytail: 頁首 18 右欄內頁標題區（breadcrumbs + h1）統一對齊與順序。
 * 由 html/page_header/header-18.html 載入；桌機 breakpoint 對齊 in_nav_18（1100px）。
 */
body:has(.header-v18) {
	--h18-page-rail-gap: clamp(20px, 3vw, 40px);
	--h18-page-rail-gap-bottom: 48px;
	--h18-page-rail-gap-bottom-mobile: 40px;
	--h18-page-header-title-gap: clamp(12px, 1.25vw, 20px);
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > .num {
	order: 0;
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(
	.breadcrumbs,
	.breadcrumbs-wrapper,
	nav.breadcrumbs-wrapper
) {
	order: 1;
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(h1, .page_header_title) {
	order: 2;
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) :is(.breadcrumbs, .breadcrumbs-wrapper, nav.breadcrumbs-wrapper) {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > h1 {
	margin-top: var(--h18-page-header-title-gap) !important;
}

body:has(.header-v18) :is(
	#news_list,
	#product11,
	#about,
	#contact,
	#faq,
	#photobook,
	#activity11,
	#news_detail,
	#product_detail11,
	#albums_detail,
	#investor
).inpage > .page_header:not(.inv11-subpage-head) {
	padding-bottom: var(--h18-page-rail-gap-bottom) !important;
	padding-top: clamp(20px, 1.5vw, 28px) !important;
}

@media (min-width: 1100px) {
	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(
		.breadcrumbs,
		.breadcrumbs-wrapper,
		nav.breadcrumbs-wrapper
	) {
		padding: clamp(10px, 1.2vw, 14px) var(--h18-page-rail-gap);
	}

	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(h1, .num, .page_header_title) {
		padding-left: var(--h18-page-rail-gap);
		padding-right: var(--h18-page-rail-gap);
	}

	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > .container_inside {
		padding-left: var(--h18-page-rail-gap);
		padding-right: var(--h18-page-rail-gap);
	}
}

@media (max-width: 1099px) {
	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) {
		padding-left: var(--v11-gutter-page-xs, 40px) !important;
		padding-right: var(--v11-gutter-page-xs, 40px) !important;
	}

	body:has(.header-v18) :is(
		#news_list,
		#product11,
		#about,
		#contact,
		#faq,
		#photobook,
		#activity11,
		#news_detail,
		#product_detail11,
		#albums_detail,
		#investor
	).inpage > .page_header:not(.inv11-subpage-head) {
		padding-bottom: var(--h18-page-rail-gap-bottom-mobile) !important;
	}

	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(
		.breadcrumbs,
		.breadcrumbs-wrapper,
		nav.breadcrumbs-wrapper
	) {
		padding-left: 0;
		padding-right: 0;
	}

	body:has(.header-v18) :is(main.inpage[id], div.inpage[id]) > .page_header:not(.inv11-subpage-head) > :is(h1, .num, .page_header_title) {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * about11.css / contact11.css 會把 page_header 收成置中版心（56px / 80px inset），
 * 與其他 v11 內頁 + header-v18 右欄全寬不一致；在此統一覆写。
 */
body:has(.header-v18) #about.about11.inpage > section.page_header,
body:has(.header-v18) #contact.contact11 > section.page_header,
body:has(.header-v18) #contact.contact11 > section.inpage.page_header,
body:has(.header-v18) #contact.contact11 > section.inpage.container.page_header,
body:has(.header-v18) #contact.contact11 > section.inpage.container_inside.page_header,
body:has(.header-v18) #contact > section.page_header,
body:has(.header-v18) #contact > section.inpage.container.page_header,
body:has(.header-v18) #contact > section.inpage.container_inside.page_header {
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body:has(.header-v18) #about.about11.inpage > section.page_header,
body:has(.header-v18) #contact.contact11.inpage > section.page_header,
body:has(.header-v18) #contact.contact11.inpage > section.inpage.page_header,
body:has(.header-v18) #contact.contact11.inpage > section.inpage.container.page_header,
body:has(.header-v18) #contact.contact11.inpage > section.inpage.container_inside.page_header {
	padding-bottom: var(--h18-page-rail-gap-bottom) !important;
	padding-top: clamp(20px, 1.5vw, 28px) !important;
}

@media (min-width: 1100px) {
	body:has(.header-v18) #about.about11.inpage > section.page_header,
	body:has(.header-v18) #contact.contact11 > section.page_header,
	body:has(.header-v18) #contact.contact11 > section.inpage.page_header,
	body:has(.header-v18) #contact.contact11 > section.inpage.container.page_header,
	body:has(.header-v18) #contact.contact11 > section.inpage.container_inside.page_header,
	body:has(.header-v18) #contact > section.page_header,
	body:has(.header-v18) #contact > section.inpage.container.page_header,
	body:has(.header-v18) #contact > section.inpage.container_inside.page_header {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 1099px) {
	body:has(.header-v18) html body #about.about11 > section.page_header,
	body:has(.header-v18) html body #contact.contact11.inpage_main_body > section.page_header,
	body:has(.header-v18) html body #contact.contact11.inpage_main_body > section.inpage.page_header,
	body:has(.header-v18) html body #contact.contact11.inpage_main_body > section.inpage.container.page_header,
	body:has(.header-v18) html body #contact.contact11.inpage_main_body > section.inpage.container_inside.page_header {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		padding-left: var(--v11-gutter-page-xs, 40px) !important;
		padding-right: var(--v11-gutter-page-xs, 40px) !important;
		padding-bottom: var(--h18-page-rail-gap-bottom-mobile) !important;
		width: 100% !important;
	}
}