/* FAQ Page geometry and native Details disclosure styling. */
.faq-page { background: var(--dermobliss-background-primary); }
.faq-page__intro {
	margin-block-start: -1px;
	padding-block: 64px;
	border-block-end: 1px solid var(--dermobliss-border-default);
}
.faq-page__eyebrow,
.faq-page__inner > h2 {
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.faq-page__intro h1 { margin-block-start: 16px; font-size: 36px; font-weight: 300; line-height: 40px; }
.faq-page__description {
	max-inline-size: 680px;
	margin-block-start: 16px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
}
.faq-page__content { padding-block: 64px 120px; }
.faq-page__inner { max-inline-size: 768px; }
.faq-page__inner > h2 { margin: 0 0 24px; }
.faq-page__inner > h2:not(:first-child) { margin-block-start: 56px; }
.faq-page__inner > details { margin: 0; border-block-end: 1px solid var(--dermobliss-border-default); }
.faq-page__inner > h2 + details { border-block-start: 1px solid var(--dermobliss-border-default); }
.faq-page__inner > details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-block-size: 60px;
	padding-block: 16px;
	color: var(--dermobliss-text-primary);
	font-family: var(--dermobliss-font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	list-style: none;
	cursor: pointer;
}
.faq-page__inner > details > summary::-webkit-details-marker { display: none; }
.faq-page__inner > details > summary::after {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	margin-inline: 0;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.faq-page__inner > details[open] > summary::after { transform: rotate(225deg); }
.faq-page__inner > details > summary:hover { color: var(--dermobliss-accent-gold-dark); }
.faq-page__inner > details > summary:focus-visible { outline: 2px solid var(--dermobliss-accent-gold-dark); outline-offset: 2px; }
.faq-page__inner > details > :not(summary) {
	margin: 0;
	padding-block: 0 16px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 22.75px;
}
.faq-page__inner > details > :not(summary) + :not(summary) { padding-block-start: 8px; }
@media (min-width: 1024px) {
	.faq-page__intro { padding-block: 96px; }
	.faq-page__intro h1 { font-size: 48px; line-height: 48px; }
	.faq-page__content { padding-block: 96px 152px; }
}