.header__top-inner:has(.header-notice) {
	flex-wrap: wrap;
	row-gap: var(--spacing-10);
}

.header-notice {
	display: flex;
	align-items: center;
	gap: var(--spacing-10);
	order: 5;
	flex: 0 0 100%;
	min-width: 0;
	padding: var(--spacing-6) var(--spacing-10) var(--spacing-6) var(--spacing-14);
	border-radius: var(--radius-sm);
	background: var(--surface-light);
	color: var(--color-gray);
}

.header-notice[hidden],
.has-dismissed-header-notice .header-notice {
	display: none;
}

.header-notice__text {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-heading);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.header-notice__close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--spacing-32);
	height: var(--spacing-32);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--color-gray);
	cursor: pointer;
	transition: color var(--transition-base), background-color var(--transition-base);
}

.header-notice__close::after {
	content: '';
	position: absolute;
	inset: calc(-1 * var(--spacing-6));
}

.header-notice__close[hidden] {
	display: inline-flex;
	visibility: hidden;
}

.header-notice__close .iconoir-xmark {
	font-size: var(--font-size-md);
}

.header-notice__close:hover {
	background: var(--color-warm-bg);
	color: var(--color-off-black);
}

.header-notice__close:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: var(--spacing-5);
}

.header-notice__close:active {
	background: var(--color-warm-surface);
}

.header-notice__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 900px) {
	.header__top-inner:has(.header-notice) {
		flex-wrap: nowrap;
	}

	.header-notice {
		order: 0;
		flex: 1 1 0%;
	}
}

@media (max-width: 899px) {
	.header__top-inner:has(.header-notice) {
		row-gap: var(--spacing-5);
	}

	.header-notice {
		gap: var(--spacing-6);
		padding: var(--spacing-5) var(--spacing-6) var(--spacing-5) var(--spacing-10);
	}

	.header-notice__text {
		font-size: var(--font-size-xs);
	}

	.header-notice__close {
		width: var(--spacing-20);
		height: var(--spacing-20);
	}

	.header-notice__close .iconoir-xmark {
		font-size: var(--font-size-sm);
	}
}