/* The reference's local three-step chooser; portrait is reserved for approved media. */
.home-routine {
	background: rgb(236 229 221 / 60%);
	scroll-margin-block-start: 73px;
}

.home-routine__grid {
	display: grid;
	align-items: start;
	gap: 48px;
}

.home-routine__intro,
.home-routine__panel { min-inline-size: 0; }

.home-routine__eyebrow,
.home-routine__panel-head,
.home-routine__back,
.home-routine__restart { font-family: var(--dermobliss-font-mono); }

.home-routine__eyebrow {
	color: var(--dermobliss-accent-gold-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
}

.home-routine__intro h2 {
	margin-block-start: 24px;
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
}

.home-routine__description {
	margin-block-start: 24px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
}

.home-routine__media { display: none; }
.home-routine__media img { display: block; inline-size: 100%; block-size: 100%; padding: 8%; object-fit: contain; }
.home-routine__catalog-action { display: inline-flex; margin-block-start: 28px; padding-block-end: 5px; border-block-end: 1px solid currentColor; color: var(--dermobliss-accent-gold-dark); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-decoration: none; }

.home-routine__panel {
	padding: 32px;
	border: 1px solid var(--dermobliss-border-default);
	background: #fff;
}

.home-routine__step[hidden] { display: none; }

.home-routine__panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	color: var(--dermobliss-accent-gold-dark);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
}

.home-routine__panel-head span {
	flex: none;
	color: var(--dermobliss-text-secondary);
	font-weight: 400;
	letter-spacing: 0.1em;
}

.home-routine__step h3 {
	margin-block-start: 16px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: -0.025em;
}

.home-routine__step h3:focus { outline: none; }
.home-routine__step h3:focus-visible { outline: 2px solid var(--dermobliss-accent-gold-dark); outline-offset: 4px; }

.home-routine__options {
	display: grid;
	gap: 12px;
	margin-block-start: 32px;
}

.home-routine__options button {
	min-inline-size: 0;
	min-block-size: 54px;
	padding: 16px 20px;
	border: 1px solid var(--dermobliss-border-default);
	border-radius: 0;
	background: var(--dermobliss-background-primary);
	font-size: 14px;
	line-height: 20px;
	text-align: start;
	transition: border-color 300ms ease, background-color 300ms ease;
}

.home-routine__options button:hover,
.home-routine__options button[aria-pressed="true"] {
	border-color: rgb(184 150 92 / 50%);
	background: #f9f5ec;
}

.home-routine__options button[aria-pressed="true"] { box-shadow: inset 3px 0 var(--dermobliss-accent-gold-dark); }

.home-routine__back,
.home-routine__restart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dermobliss-text-secondary);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.16em;
}

.home-routine__back { margin-block-start: 24px; }
.home-routine__back:hover,
.home-routine__restart:hover { color: var(--dermobliss-accent-gold-dark); }
.home-routine__summary { margin-block-start: 16px; color: var(--dermobliss-text-secondary); font-size: 14px; line-height: 24px; }
.home-routine__notice { margin-block-start: 16px; color: var(--dermobliss-text-secondary); font-size: 12px; line-height: 20px; }
.home-routine__restart { margin-block-start: 56px; }

@media (min-width: 640px) {
	.home-routine__panel { padding: 48px; }
	.home-routine__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-routine__intro h2 { font-size: 30px; line-height: 36px; }
	.home-routine__step h3 { font-size: 30px; line-height: 36px; }
}

@media (min-width: 1024px) {
	.home-routine__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
	.home-routine__intro h2 { font-size: 36px; line-height: 40px; }
	.home-routine__media {
		display: block;
		aspect-ratio: 4 / 3;
		margin-block-start: 24px;
		clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
		background: var(--dermobliss-background-muted);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-routine__options button { transition: none; }
}