/**
 * Amaskin Natural Consultation
 *
 * Built on a token layer rather than ad-hoc values: one type scale, one
 * spacing scale, three elevation levels. Colours derive from the site's
 * Breakdance global settings, and the button treatment matches the contact
 * form on page 37, so the consultation reads as part of the site.
 *
 * Design language: deep olive as the anchor, gold as a hairline accent
 * rather than a fill, generous whitespace, square corners, and hairline
 * rules instead of boxes wherever a box is not doing real work.
 */

.amaskin-quiz,
.amaskin-gate,
.amaskin-result,
.amaskin-account,
.amaskin-modal {
	/* Brand ------------------------------------------------------ */
	--ama-primary: var(--bde-palette-color-1, #4a5240);
	--ama-primary-dark: #3a4132;
	--ama-sage: var(--bde-palette-color-4, #96a797);
	--ama-rose: var(--bde-palette-color-3, #986b69);
	--ama-gold: #cea458;
	--ama-gold-soft: rgba(206, 164, 88, 0.16);
	--ama-stone: #e4dfdb;
	--ama-cream: #fdfcfa;
	--ama-grey: #f5f5f5;
	--ama-white: #fff;
	--ama-gold-gradient: linear-gradient(90deg, var(--ama-gold) 0%, #e0c084 45%, var(--ama-sage) 100%);

	/* Text ------------------------------------------------------- */
	--ama-text: #2f3229;
	--ama-text-soft: #5a6069;
	--ama-border: #ded9d4;

	/* Type scale ------------------------------------------------- */
	--ama-font: var(--bde-body-font-family, "Inter", sans-serif);
	--ama-text-xs: 12px;
	--ama-text-sm: 13px;
	--ama-text-base: 15px;
	--ama-text-md: 17px;
	--ama-text-lg: 20px;
	--ama-text-xl: 26px;
	--ama-text-2xl: 32px;

	--ama-leading-tight: 1.25;
	--ama-leading-snug: 1.45;
	--ama-leading-normal: 1.65;

	/* Spacing scale (4px base) ----------------------------------- */
	--ama-space-1: 4px;
	--ama-space-2: 8px;
	--ama-space-3: 12px;
	--ama-space-4: 16px;
	--ama-space-5: 24px;
	--ama-space-6: 32px;
	--ama-space-7: 48px;
	--ama-space-8: 64px;

	/* Surface ---------------------------------------------------- */
	--ama-radius: 0;
	--ama-radius-input: 3px;
	--ama-hairline: 1px solid #e4dfdb;

	--ama-elev-1: 0 1px 2px rgba(47, 50, 41, 0.04);
	--ama-elev-2: 0 4px 16px rgba(47, 50, 41, 0.07);
	--ama-elev-3: 0 18px 48px rgba(47, 50, 41, 0.16);

	--ama-transition: var(--bde-transition-duration, 260ms);
	--ama-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	font-family: var(--ama-font);
	color: var(--ama-text);
	max-width: 880px;
	margin-inline: auto;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.amaskin-quiz *,
.amaskin-gate *,
.amaskin-result *,
.amaskin-account *,
.amaskin-modal * {
	box-sizing: border-box;
}

/* The site theme uppercases headings inside page content, which shouted the
   question titles and phase headings. Reset on headings only: the small
   eyebrow labels below are uppercase by design. */
.amaskin-quiz h1, .amaskin-quiz h2, .amaskin-quiz h3, .amaskin-quiz h4,
.amaskin-result h1, .amaskin-result h2, .amaskin-result h3, .amaskin-result h4,
.amaskin-account h1, .amaskin-account h2, .amaskin-account h3, .amaskin-account h4,
.amaskin-gate h1, .amaskin-gate h2, .amaskin-gate h3, .amaskin-gate h4,
.amaskin-modal h1, .amaskin-modal h2, .amaskin-modal h3, .amaskin-modal h4,
.amaskin-quiz__question-title,
.amaskin-quiz__intro-title,
.amaskin-phase__heading,
.amaskin-product__name,
.amaskin-quiz__help,
.amaskin-tip__text {
	text-transform: none;
}

/* =====================================================================
 * Buttons
 * Matched to the contact form submit: square, inverts on hover.
 * ================================================================== */

.amaskin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ama-space-2);
	padding: 15px var(--ama-space-6);
	border: 1px solid transparent;
	border-radius: var(--ama-radius);
	font-family: var(--ama-font);
	font-size: var(--ama-text-base);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ama-transition) var(--ama-ease),
		color var(--ama-transition) var(--ama-ease),
		border-color var(--ama-transition) var(--ama-ease);
}

.amaskin-btn--primary {
	background-color: var(--ama-primary);
	color: var(--ama-white);
}

.amaskin-btn--primary:hover:not(:disabled) {
	background-color: var(--ama-primary-dark);
	color: var(--ama-white);
}

.amaskin-btn--ghost {
	background-color: transparent;
	color: var(--ama-primary);
	border-color: var(--ama-gold);
}

.amaskin-btn--ghost:hover:not(:disabled) {
	background-color: var(--ama-primary);
	color: var(--ama-white);
	border-color: var(--ama-primary);
}

.amaskin-btn--sm {
	padding: 10px var(--ama-space-4);
	font-size: var(--ama-text-sm);
}

.amaskin-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.amaskin-btn:focus-visible {
	outline: 2px solid var(--ama-gold);
	outline-offset: 2px;
}

/* WooCommerce and the theme both set a link colour that beats a single
   class, which turned anchor buttons red. */
a.amaskin-btn,
.woocommerce a.amaskin-btn,
.woocommerce-account a.amaskin-btn {
	text-decoration: none;
}

a.amaskin-btn--primary,
.woocommerce a.amaskin-btn--primary,
.woocommerce-account a.amaskin-btn--primary {
	color: var(--ama-white);
	background-color: var(--ama-primary);
}

a.amaskin-btn--primary:hover,
.woocommerce a.amaskin-btn--primary:hover,
.woocommerce-account a.amaskin-btn--primary:hover {
	color: var(--ama-white);
	background-color: var(--ama-primary-dark);
}

a.amaskin-btn--ghost,
.woocommerce a.amaskin-btn--ghost,
.woocommerce-account a.amaskin-btn--ghost {
	color: var(--ama-primary);
	border-color: var(--ama-gold);
	background-color: transparent;
}

a.amaskin-btn--ghost:hover,
.woocommerce a.amaskin-btn--ghost:hover,
.woocommerce-account a.amaskin-btn--ghost:hover {
	color: var(--ama-white);
	background-color: var(--ama-primary);
	border-color: var(--ama-primary);
}

/* =====================================================================
 * Logged-out gate
 * ================================================================== */

.amaskin-gate {
	background-color: var(--ama-cream);
	border: var(--ama-hairline);
	border-top: 2px solid var(--ama-gold);
	padding: var(--ama-space-8) var(--ama-space-5);
	text-align: center;
}

.amaskin-gate__inner {
	max-width: 34rem;
	margin-inline: auto;
}

.amaskin-gate__title {
	font-size: var(--ama-text-xl);
	font-weight: 600;
	line-height: var(--ama-leading-tight);
	margin: 0 0 var(--ama-space-3);
}

.amaskin-gate__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	margin: 0 0 var(--ama-space-6);
	color: var(--ama-text-soft);
}

.amaskin-gate__actions {
	display: flex;
	gap: var(--ama-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* =====================================================================
 * Quiz shell
 * ================================================================== */

.amaskin-quiz {
	background-color: var(--ama-white);
	padding: var(--ama-space-7) var(--ama-space-6);
	border: var(--ama-hairline);
}

.amaskin-quiz--done {
	padding: 0;
	border: 0;
}

.amaskin-quiz__progress {
	margin-bottom: var(--ama-space-6);
}

.amaskin-quiz__progress-track {
	height: 2px;
	background-color: var(--ama-stone);
	overflow: hidden;
}

.amaskin-quiz__progress-bar {
	height: 100%;
	width: 0;
	background: var(--ama-gold-gradient);
	transition: width var(--ama-transition) var(--ama-ease);
}

.amaskin-quiz__progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: var(--ama-space-3);
	font-size: var(--ama-text-sm);
	color: var(--ama-text-soft);
}

.amaskin-quiz__section-name {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-size: var(--ama-text-xs);
	color: var(--ama-gold);
}

.amaskin-quiz__intro-title,
.amaskin-quiz__question-title {
	font-size: var(--ama-text-xl);
	font-weight: 600;
	line-height: var(--ama-leading-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ama-space-3);
}

.amaskin-quiz__intro-body {
	font-size: var(--ama-text-md);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-4);
	max-width: 62ch;
}

.amaskin-quiz__help {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-4);
}

.amaskin-quiz__resume {
	background-color: var(--ama-cream);
	border-left: 2px solid var(--ama-gold);
	padding: var(--ama-space-5);
	margin-bottom: var(--ama-space-6);
}

.amaskin-quiz__resume p {
	margin: 0 0 var(--ama-space-4);
	font-size: var(--ama-text-base);
}

.amaskin-quiz__resume-actions {
	display: flex;
	gap: var(--ama-space-3);
	flex-wrap: wrap;
}

/* =====================================================================
 * Fields
 * ================================================================== */

.amaskin-field {
	margin-bottom: var(--ama-space-5);
}

.amaskin-field__required {
	color: var(--ama-gold);
	margin-left: 2px;
}

.amaskin-field__input,
.amaskin-field__select {
	width: 100%;
	padding: 14px var(--ama-space-4);
	background-color: var(--ama-grey);
	border: 1px solid var(--ama-border);
	border-radius: var(--ama-radius-input);
	font-family: var(--ama-font);
	font-size: var(--ama-text-md);
	color: var(--ama-text);
	transition: border-color var(--ama-transition) var(--ama-ease),
		background-color var(--ama-transition) var(--ama-ease);
}

.amaskin-field__input::placeholder {
	color: var(--ama-text-soft);
}

.amaskin-field__input:focus,
.amaskin-field__select:focus {
	outline: none;
	border-color: var(--ama-primary);
	background-color: var(--ama-white);
}

/* Yes / No -------------------------------------------------------- */

.amaskin-yesno {
	display: flex;
	gap: var(--ama-space-3);
}

.amaskin-yesno__option {
	flex: 1;
	position: relative;
}

.amaskin-yesno__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amaskin-yesno__label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px var(--ama-space-5);
	background-color: var(--ama-white);
	border: 1px solid var(--ama-border);
	border-radius: var(--ama-radius-input);
	font-size: var(--ama-text-md);
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--ama-transition) var(--ama-ease),
		background-color var(--ama-transition) var(--ama-ease),
		color var(--ama-transition) var(--ama-ease);
}

.amaskin-yesno__label:hover {
	border-color: var(--ama-gold);
}

.amaskin-yesno__option input:checked + .amaskin-yesno__label {
	background-color: var(--ama-primary);
	border-color: var(--ama-primary);
	color: var(--ama-white);
}

.amaskin-yesno__option input:focus-visible + .amaskin-yesno__label {
	outline: 2px solid var(--ama-gold);
	outline-offset: 2px;
}

/* Ranked choice --------------------------------------------------- */

.amaskin-ranked__slot {
	margin-bottom: var(--ama-space-5);
}

.amaskin-ranked__slot-label {
	text-transform: uppercase;
	display: block;
	font-size: var(--ama-text-xs);
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--ama-gold);
	margin-bottom: var(--ama-space-2);
}

.amaskin-ranked__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ama-space-2);
}

.amaskin-ranked__option {
	position: relative;
}

.amaskin-ranked__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.amaskin-ranked__label {
	display: block;
	padding: 15px var(--ama-space-4);
	background-color: var(--ama-white);
	border: 1px solid var(--ama-border);
	border-radius: var(--ama-radius-input);
	font-size: var(--ama-text-base);
	cursor: pointer;
	transition: border-color var(--ama-transition) var(--ama-ease),
		background-color var(--ama-transition) var(--ama-ease),
		color var(--ama-transition) var(--ama-ease);
}

.amaskin-ranked__label:hover {
	border-color: var(--ama-gold);
}

.amaskin-ranked__option input:checked + .amaskin-ranked__label {
	background-color: var(--ama-primary);
	border-color: var(--ama-primary);
	color: var(--ama-white);
}

.amaskin-ranked__option input:disabled + .amaskin-ranked__label {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Consent --------------------------------------------------------- */

.amaskin-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ama-space-3);
	margin-bottom: var(--ama-space-4);
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-snug);
	cursor: pointer;
	max-width: 62ch;
}

.amaskin-consent input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--ama-primary);
	flex-shrink: 0;
}

/* Tips ------------------------------------------------------------ */

.amaskin-tip {
	display: block;
	margin: 0 0 var(--ama-space-5);
}

.amaskin-tip__label {
	display: block;
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ama-gold);
	margin-bottom: var(--ama-space-1);
}

/* Deliberately quiet: the tip supports the question rather than competing
   with it, so no panel and no rule, just italic secondary text. */
.amaskin-tip__text {
	display: block;
	font-size: var(--ama-text-base);
	font-style: italic;
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
}

/* Navigation ------------------------------------------------------ */

.amaskin-quiz__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--ama-space-3);
	margin-top: var(--ama-space-6);
	padding-top: var(--ama-space-5);
	border-top: var(--ama-hairline);
}

.amaskin-quiz__error {
	background-color: #fdf2f2;
	border-left: 2px solid var(--ama-rose);
	padding: var(--ama-space-4);
	margin-bottom: var(--ama-space-5);
	font-size: var(--ama-text-base);
	color: #8f3b39;
}

.amaskin-important {
	background-color: var(--ama-cream);
	border-left: 2px solid var(--ama-rose);
	padding: var(--ama-space-5);
	margin: var(--ama-space-5) 0 var(--ama-space-2);
	max-width: 62ch;
}

.amaskin-important__label {
	text-transform: uppercase;
	display: inline-block;
	font-size: var(--ama-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ama-rose);
	margin-bottom: var(--ama-space-2);
}

.amaskin-important__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	margin: 0;
	color: var(--ama-text-soft);
}

/* =====================================================================
 * Result
 * ================================================================== */

.amaskin-result__header {
	position: relative;
	background-color: var(--ama-primary);
	color: var(--ama-white);
	padding: var(--ama-space-7) var(--ama-space-6);
	text-align: center;
	overflow: hidden;
}

/* The gold strip: the one flourish, kept to 3px. */
.amaskin-result__header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ama-gold-gradient);
}

.amaskin-result__eyebrow {
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--ama-gold);
	margin: 0 0 var(--ama-space-3);
}

.amaskin-result__profile {
	font-size: var(--ama-text-2xl);
	font-weight: 600;
	line-height: var(--ama-leading-tight);
	letter-spacing: -0.015em;
	margin: 0 auto;
	color: var(--ama-white);
	max-width: 22ch;
}

.amaskin-result__body {
	padding: var(--ama-space-7) var(--ama-space-6);
	background-color: var(--ama-white);
	border: var(--ama-hairline);
	border-top: 0;
}

.amaskin-result__section-title {
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: var(--ama-space-3);
	font-size: var(--ama-text-xs);
	letter-spacing: 0.16em;
	font-weight: 600;
	color: var(--ama-gold);
	margin: 0 0 var(--ama-space-2);
}

.amaskin-result__section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--ama-gold), transparent);
}

/* Delivery confirmation ------------------------------------------- */

.amaskin-delivered {
	display: flex;
	align-items: flex-start;
	gap: var(--ama-space-4);
	background-color: var(--ama-cream);
	border: var(--ama-hairline);
	border-left: 2px solid var(--ama-gold);
	padding: var(--ama-space-4) var(--ama-space-5);
	margin-bottom: var(--ama-space-6);
}

.amaskin-delivered__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--ama-gold);
	color: var(--ama-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ama-text-sm);
}

.amaskin-delivered__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	margin: 0;
	color: var(--ama-text-soft);
}

.amaskin-delivered__text strong {
	color: var(--ama-primary);
	font-weight: 600;
}

/* Phases ---------------------------------------------------------- */

.amaskin-phase {
	margin-bottom: var(--ama-space-7);
}

.amaskin-phase__heading {
	font-size: var(--ama-text-lg);
	font-weight: 600;
	line-height: var(--ama-leading-tight);
	margin: 0 0 var(--ama-space-1);
	letter-spacing: -0.01em;
}

.amaskin-phase__note {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-5);
	max-width: 62ch;
}

.amaskin-group {
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-4);
	padding-bottom: var(--ama-space-2);
	border-bottom: var(--ama-hairline);
}

.amaskin-group--second {
	margin-top: var(--ama-space-6);
}

/* Product cards --------------------------------------------------- */

.amaskin-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--ama-space-4);
}

.amaskin-product {
	display: flex;
	flex-direction: column;
	background-color: var(--ama-white);
	border: var(--ama-hairline);
	box-shadow: var(--ama-elev-1);
	transition: border-color var(--ama-transition) var(--ama-ease),
		box-shadow var(--ama-transition) var(--ama-ease),
		transform var(--ama-transition) var(--ama-ease);
}

.amaskin-product:hover {
	border-color: var(--ama-gold);
	box-shadow: var(--ama-elev-2);
	transform: translateY(-2px);
}

.amaskin-product__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--ama-grey);
}

.amaskin-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms var(--ama-ease);
}

.amaskin-product:hover .amaskin-product__media img {
	transform: scale(1.04);
}

.amaskin-product__content {
	padding: var(--ama-space-4);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ama-space-2);
}

.amaskin-product__name {
	font-size: var(--ama-text-base);
	font-weight: 500;
	line-height: var(--ama-leading-snug);
	margin: 0;
	overflow-wrap: anywhere;
}

.amaskin-product__name a {
	color: var(--ama-text);
	text-decoration: none;
}

.amaskin-product__name a:hover {
	color: var(--ama-primary);
}

.amaskin-product__price {
	font-size: var(--ama-text-base);
	font-weight: 600;
	color: var(--ama-primary);
	margin: 0;
}

.amaskin-product__price del {
	opacity: 0.45;
	font-weight: 400;
	margin-right: var(--ama-space-1);
}

.amaskin-product__actions {
	margin-top: auto;
	padding-top: var(--ama-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--ama-space-2);
}

.amaskin-product__pick {
	display: flex;
	align-items: center;
	gap: var(--ama-space-2);
	font-size: var(--ama-text-sm);
	cursor: pointer;
	color: var(--ama-text-soft);
}

.amaskin-product__pick input {
	width: 16px;
	height: 16px;
	accent-color: var(--ama-primary);
}

.amaskin-product--oos {
	opacity: 0.5;
}

.amaskin-product__oos {
	font-size: var(--ama-text-xs);
	color: var(--ama-rose);
	font-weight: 500;
}

/* Either/or pair -------------------------------------------------- */

.amaskin-products--choice {
	display: flex;
	align-items: stretch;
	gap: var(--ama-space-4);
}

.amaskin-products--choice .amaskin-product {
	flex: 1 1 0;
	min-width: 0;
	max-width: 260px;
}

.amaskin-products__or {
	text-transform: uppercase;
	flex-shrink: 0;
	align-self: center;
	font-size: var(--ama-text-xs);
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--ama-text-soft);
}

.amaskin-product--choice:has( input[type="radio"]:checked ),
.amaskin-product--choice.is-selected {
	border-color: var(--ama-primary);
	box-shadow: var(--ama-elev-2);
}

.amaskin-product__pick--radio input {
	accent-color: var(--ama-primary);
}

/* Cart bar -------------------------------------------------------- */

.amaskin-cartbar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ama-space-4);
	flex-wrap: wrap;
	background-color: var(--ama-primary);
	color: var(--ama-white);
	padding: var(--ama-space-4) var(--ama-space-5);
	margin-top: var(--ama-space-5);
	box-shadow: var(--ama-elev-3);
}

.amaskin-cartbar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--ama-gold-gradient);
}

.amaskin-cartbar__summary {
	font-size: var(--ama-text-base);
}

.amaskin-cartbar__total {
	font-weight: 600;
	margin-left: var(--ama-space-2);
}

.amaskin-cartbar__reward {
	display: block;
	font-size: var(--ama-text-sm);
	color: var(--ama-gold);
	margin-top: var(--ama-space-1);
}

.amaskin-cartbar__reward strong {
	color: var(--ama-white);
	letter-spacing: 0.04em;
}

.amaskin-cartbar__actions {
	display: flex;
	gap: var(--ama-space-2);
	flex-wrap: wrap;
}

.amaskin-cartbar .amaskin-btn--primary,
.amaskin-cartbar a.amaskin-btn--primary {
	background-color: var(--ama-white);
	color: var(--ama-primary);
}

.amaskin-cartbar .amaskin-btn--primary:hover:not(:disabled),
.amaskin-cartbar a.amaskin-btn--primary:hover {
	background-color: var(--ama-stone);
	color: var(--ama-primary);
}

.amaskin-cartbar .amaskin-btn--ghost,
.amaskin-cartbar a.amaskin-btn--ghost {
	color: var(--ama-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.amaskin-cartbar .amaskin-btn--ghost:hover:not(:disabled),
.amaskin-cartbar a.amaskin-btn--ghost:hover {
	background-color: var(--ama-white);
	color: var(--ama-primary);
	border-color: var(--ama-white);
}

/* Routine --------------------------------------------------------- */

.amaskin-routine {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ama-space-5);
	margin-bottom: var(--ama-space-7);
}

.amaskin-routine__col {
	background-color: var(--ama-cream);
	border: var(--ama-hairline);
	padding: var(--ama-space-5);
}

.amaskin-routine__title {
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ama-primary);
	margin: 0 0 var(--ama-space-4);
	padding-bottom: var(--ama-space-3);
	border-bottom: 1px solid var(--ama-gold);
}

.amaskin-routine__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ama-step;
}

.amaskin-routine__item {
	display: flex;
	gap: var(--ama-space-3);
	align-items: baseline;
	padding: var(--ama-space-2) 0;
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-snug);
	counter-increment: ama-step;
}

.amaskin-routine__item::before {
	content: counter(ama-step);
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: 1px solid var(--ama-gold);
	color: var(--ama-gold);
	font-size: 10px;
	font-weight: 700;
	border-radius: 50%;
	transform: translateY(2px);
}

.amaskin-routine__item a {
	color: var(--ama-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ama-stone);
}

.amaskin-routine__item a:hover {
	color: var(--ama-primary);
	border-bottom-color: var(--ama-gold);
}

.amaskin-routine__item--note {
	color: var(--ama-text-soft);
	font-style: italic;
}

.amaskin-routine__item--note::before {
	content: "\2600";
	border-color: var(--ama-sage);
	color: var(--ama-sage);
	font-style: normal;
}

.amaskin-routine__choice {
	display: block;
	font-size: var(--ama-text-sm);
	font-style: italic;
	color: var(--ama-text-soft);
	margin-top: 2px;
}

/* Guidance accordions --------------------------------------------- */

.amaskin-guidance {
	margin-bottom: var(--ama-space-6);
	border: var(--ama-hairline);
	background-color: var(--ama-cream);
}

.amaskin-guidance--after {
	margin-top: var(--ama-space-6);
}

.amaskin-guidance__lead {
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--ama-primary);
	margin: 0;
	padding: var(--ama-space-3) var(--ama-space-5);
	border-bottom: var(--ama-hairline);
}

.amaskin-guidance__item {
	border-bottom: var(--ama-hairline);
}

.amaskin-guidance__item:last-child {
	border-bottom: 0;
}

.amaskin-guidance__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ama-space-3);
	padding: var(--ama-space-4) var(--ama-space-5);
	font-size: var(--ama-text-base);
	font-weight: 500;
	color: var(--ama-text);
	cursor: pointer;
	list-style: none;
	transition: color var(--ama-transition) var(--ama-ease);
}

.amaskin-guidance__title::-webkit-details-marker {
	display: none;
}

.amaskin-guidance__title:hover {
	color: var(--ama-primary);
}

.amaskin-guidance__chevron {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--ama-gold);
	border-bottom: 1.5px solid var(--ama-gold);
	transform: rotate(45deg);
	transition: transform var(--ama-transition) var(--ama-ease);
	margin-right: var(--ama-space-1);
}

.amaskin-guidance__item[open] .amaskin-guidance__chevron {
	transform: rotate(-135deg);
}

.amaskin-guidance__body {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	margin: 0;
	padding: 0 var(--ama-space-5) var(--ama-space-5);
	color: var(--ama-text-soft);
	max-width: 70ch;
}

/* Notes ----------------------------------------------------------- */

.amaskin-notes {
	margin-bottom: var(--ama-space-5);
}

.amaskin-notes__list {
	margin: var(--ama-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.amaskin-notes__list li {
	position: relative;
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin-bottom: var(--ama-space-3);
	padding-left: var(--ama-space-5);
	max-width: 70ch;
}

.amaskin-notes__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 12px;
	height: 1px;
	background-color: var(--ama-gold);
}

.amaskin-notes__list li:last-child {
	margin-bottom: 0;
}

.amaskin-finprint {
	font-size: var(--ama-text-xs);
	line-height: var(--ama-leading-snug);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-6);
	max-width: 70ch;
	opacity: 0.85;
}

/* Reward ---------------------------------------------------------- */

.amaskin-reward {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--ama-space-5);
	background-color: var(--ama-cream);
	border: 1px solid var(--ama-stone);
	padding: var(--ama-space-5) var(--ama-space-6);
	margin-bottom: var(--ama-space-6);
	overflow: hidden;
}

.amaskin-reward__ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ama-gold-gradient);
}

.amaskin-reward__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ama-gold);
	color: var(--ama-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--ama-space-1);
}

.amaskin-reward__content {
	flex: 1;
	min-width: 0;
}

.amaskin-reward__eyebrow {
	text-transform: uppercase;
	font-size: var(--ama-text-xs);
	letter-spacing: 0.16em;
	font-weight: 600;
	color: var(--ama-gold);
	margin: 0 0 var(--ama-space-1);
}

.amaskin-reward__title {
	font-size: var(--ama-text-md);
	font-weight: 600;
	margin: 0 0 var(--ama-space-2);
	color: var(--ama-text);
}

.amaskin-reward__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	margin: 0 0 var(--ama-space-4);
	color: var(--ama-text-soft);
	max-width: 62ch;
}

.amaskin-reward__code {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	border: 1px dashed var(--ama-gold);
	background-color: var(--ama-white);
}

.amaskin-reward__code-label {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--ama-text-soft);
	padding: var(--ama-space-3);
	border-right: 1px dashed var(--ama-gold);
	display: flex;
	align-items: center;
}

.amaskin-reward__code-value {
	text-transform: uppercase;
	font-size: var(--ama-text-base);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ama-primary);
	padding: var(--ama-space-3) var(--ama-space-4);
	display: flex;
	align-items: center;
}

/* Result actions -------------------------------------------------- */

.amaskin-result__actions {
	display: flex;
	gap: var(--ama-space-3);
	flex-wrap: wrap;
	padding-top: var(--ama-space-5);
	border-top: var(--ama-hairline);
}

/* Notices --------------------------------------------------------- */

.amaskin-notice {
	padding: var(--ama-space-4);
	margin-bottom: var(--ama-space-5);
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-snug);
	border-left: 2px solid;
}

.amaskin-notice--success {
	background-color: #eef6f0;
	border-color: #3f7d52;
	color: #2f5f3e;
}

.amaskin-notice--error {
	background-color: #fdf2f2;
	border-color: var(--ama-rose);
	color: #8f3b39;
}

.amaskin-notice--info {
	background-color: var(--ama-cream);
	border-color: var(--ama-gold);
	color: var(--ama-text);
}

/* Spinner --------------------------------------------------------- */

.amaskin-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: amaskin-spin 700ms linear infinite;
}

@keyframes amaskin-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =====================================================================
 * My Account
 * ================================================================== */

.amaskin-history {
	margin-bottom: var(--ama-space-6);
}

.amaskin-history__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ama-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--ama-space-4);
}

.amaskin-history__title {
	font-size: var(--ama-text-md);
	font-weight: 600;
	margin: 0;
}

.amaskin-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--ama-hairline);
}

.amaskin-history__item {
	display: flex;
	align-items: stretch;
	border-bottom: var(--ama-hairline);
	background-color: var(--ama-white);
	transition: background-color var(--ama-transition) var(--ama-ease);
}

.amaskin-history__item:last-child {
	border-bottom: 0;
}

.amaskin-history__item:hover {
	background-color: var(--ama-cream);
}

.amaskin-history__item.is-active {
	background-color: var(--ama-cream);
	box-shadow: inset 2px 0 0 var(--ama-gold);
}

.amaskin-history__link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ama-space-4);
	flex-wrap: wrap;
	padding: var(--ama-space-4) var(--ama-space-5);
	text-decoration: none;
	color: var(--ama-text);
}

.amaskin-history__date {
	font-size: var(--ama-text-base);
	font-weight: 500;
}

.amaskin-history__profile {
	font-size: var(--ama-text-sm);
	color: var(--ama-text-soft);
}

.amaskin-history__actions {
	display: flex;
	align-items: stretch;
}

.amaskin-history__pdf,
.amaskin-history__delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	background: none;
	border: 0;
	border-left: var(--ama-hairline);
	color: var(--ama-text-soft);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--ama-transition) var(--ama-ease),
		background-color var(--ama-transition) var(--ama-ease);
}

.amaskin-history__pdf:hover {
	color: var(--ama-white);
	background-color: var(--ama-gold);
}

.amaskin-history__delete:hover:not(:disabled) {
	color: var(--ama-white);
	background-color: var(--ama-rose);
}

.amaskin-history__delete:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.amaskin-history__delete.is-confirming {
	background-color: var(--ama-rose);
	color: var(--ama-white);
	width: auto;
	padding: 0 var(--ama-space-4);
	font-size: var(--ama-text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.amaskin-account .amaskin-result__body {
	padding-left: 0;
	padding-right: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

.amaskin-prompt {
	text-align: center;
	padding: var(--ama-space-7) var(--ama-space-5);
	background-color: var(--ama-cream);
	border: var(--ama-hairline);
	border-top: 2px solid var(--ama-gold);
}

.amaskin-prompt__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ama-gold);
	color: var(--ama-gold);
	font-size: var(--ama-text-lg);
	margin-bottom: var(--ama-space-4);
}

.amaskin-prompt__title {
	font-size: var(--ama-text-lg);
	font-weight: 600;
	margin: 0 0 var(--ama-space-2);
	color: var(--ama-text);
}

.amaskin-prompt__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 auto;
	max-width: 46ch;
}

/* =====================================================================
 * Cart modal
 * ================================================================== */

.amaskin-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ama-space-5);
	background-color: rgba(47, 50, 41, 0.55);
	opacity: 0;
	transition: opacity 220ms var(--ama-ease);
	max-width: none;
}

.amaskin-modal.is-open {
	opacity: 1;
}

.amaskin-modal__panel {
	position: relative;
	background-color: var(--ama-white);
	max-width: 26rem;
	width: 100%;
	text-align: center;
	padding: var(--ama-space-7) var(--ama-space-6) var(--ama-space-6);
	border-top: 3px solid var(--ama-gold);
	transform: translateY(12px);
	transition: transform 220ms var(--ama-ease);
	box-shadow: var(--ama-elev-3);
}

.amaskin-modal.is-open .amaskin-modal__panel {
	transform: translateY(0);
}

.amaskin-modal__tick {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--ama-space-4);
	border-radius: 50%;
	background-color: var(--ama-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ama-white);
	font-size: var(--ama-text-lg);
	line-height: 1;
}

.amaskin-modal__title {
	font-size: var(--ama-text-lg);
	font-weight: 600;
	margin: 0 0 var(--ama-space-2);
	color: var(--ama-text);
}

.amaskin-modal__text {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-2);
}

.amaskin-modal__total {
	font-size: var(--ama-text-base);
	font-weight: 600;
	color: var(--ama-primary);
	margin: 0 0 var(--ama-space-5);
}

.amaskin-modal__reward {
	background-color: var(--ama-cream);
	border: 1px dashed var(--ama-gold);
	padding: var(--ama-space-3);
	margin: 0 0 var(--ama-space-4);
	font-size: var(--ama-text-sm);
	line-height: var(--ama-leading-snug);
	color: var(--ama-text-soft);
}

.amaskin-modal__reward strong {
	color: var(--ama-primary);
}

.amaskin-modal__code {
	text-transform: uppercase;
	display: inline-block;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ama-primary);
	background-color: var(--ama-white);
	border: 1px solid var(--ama-gold);
	padding: 2px var(--ama-space-2);
}

.amaskin-modal__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ama-space-2);
}

.amaskin-modal__actions .amaskin-btn {
	width: 100%;
}

.amaskin-modal__close {
	position: absolute;
	top: var(--ama-space-3);
	right: var(--ama-space-4);
	background: none;
	border: 0;
	font-size: var(--ama-text-lg);
	line-height: 1;
	color: var(--ama-text-soft);
	cursor: pointer;
	padding: var(--ama-space-1) var(--ama-space-2);
}

.amaskin-modal a.amaskin-btn--ghost {
	color: var(--ama-primary);
	border-color: var(--ama-gold);
}

/* =====================================================================
 * Responsive — breakpoints copied from the site's Breakdance config
 * ================================================================== */

@media (max-width: 1023px) {
	.amaskin-quiz,
	.amaskin-result__body,
	.amaskin-result__header {
		padding: var(--ama-space-6) var(--ama-space-5);
	}
}

@media (max-width: 767px) {
	.amaskin-routine,
	.amaskin-ranked__options {
		grid-template-columns: 1fr;
	}

	.amaskin-products--choice {
		flex-direction: column;
	}

	.amaskin-products--choice .amaskin-product {
		max-width: none;
	}

	.amaskin-products__or {
		align-self: flex-start;
	}

	.amaskin-result__profile {
		font-size: var(--ama-text-xl);
	}

	.amaskin-cartbar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.amaskin-cartbar__actions .amaskin-btn {
		flex: 1;
	}

	.amaskin-reward {
		flex-direction: column;
		gap: var(--ama-space-4);
	}
}

@media (max-width: 479px) {
	.amaskin-quiz,
	.amaskin-result__body,
	.amaskin-result__header {
		padding: var(--ama-space-5) var(--ama-space-4);
	}

	.amaskin-quiz__intro-title,
	.amaskin-quiz__question-title {
		font-size: var(--ama-text-lg);
	}

	.amaskin-products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ama-space-3);
	}

	.amaskin-quiz__nav {
		flex-direction: column-reverse;
	}

	.amaskin-quiz__nav .amaskin-btn {
		width: 100%;
	}

	.amaskin-reward__code {
		width: 100%;
	}

	.amaskin-reward__code-value {
		flex: 1;
		justify-content: center;
	}

	.amaskin-history__link {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ama-space-1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.amaskin-quiz *,
	.amaskin-result *,
	.amaskin-account *,
	.amaskin-modal * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =====================================================================
 * Print
 * ================================================================== */

@media print {
	.amaskin-cartbar,
	.amaskin-result__actions,
	.amaskin-history,
	.amaskin-product__actions,
	.amaskin-notice,
	.amaskin-delivered {
		display: none !important;
	}

	.amaskin-result__header {
		background-color: var(--ama-primary) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.amaskin-phase,
	.amaskin-routine {
		page-break-inside: avoid;
	}

	.amaskin-guidance__item {
		break-inside: avoid;
	}
}

/* Essential marker, sitting inside the existing step badge so it does not
   add another element to scan. */
@media (max-width: 479px) {
		}

/* =====================================================================
 * Badges
 *
 * Two only. The reason sits over the image where it is caught at a
 * glance; "Essential" replaces the old step label, since Cleanse /
 * Treat / Moisturise repeated what the product name already said.
 * ================================================================== */

.amaskin-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	padding: 4px var(--ama-space-2);
	white-space: nowrap;
}

/* Over the product image, top left. */
.amaskin-badge--why {
	position: absolute;
	top: 0;
	left: 0;
	/* Full sentences, so allow a second line rather than truncating and
	   hiding the reason the customer is meant to read. */
	max-width: 100%;
	white-space: normal;
	background-color: rgba(47, 50, 41, 0.84);
	color: var(--ama-white);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
	padding: 5px var(--ama-space-2);
}

.amaskin-badge--essential {
	align-self: flex-start;
	background-color: var(--ama-gold-soft);
	border-left: 2px solid var(--ama-gold);
	color: var(--ama-primary);
	text-transform: uppercase;
}

/* The media wrapper anchors the overlay badge. */
.amaskin-product__media {
	position: relative;
}

/* The essentials explanation, with the badge rendered inline. */
.amaskin-phase__essentials {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	/* Follows the phase note, so no negative pull: it would overlap the
	   paragraph above at narrower widths. */
	margin: 0 0 var(--ama-space-5);
	max-width: 70ch;
}

.amaskin-phase__essentials .amaskin-badge {
	margin: 0 2px;
	vertical-align: baseline;
}

@media (max-width: 479px) {
	.amaskin-badge--why {
		font-size: 9.5px;
		padding: 4px 6px;
	}
}

/* =====================================================================
 * Phase instructions
 *
 * Later phases depend on whether the skin improved, so they read as
 * conditional guidance rather than a list of products to buy now.
 * ================================================================== */

.amaskin-steps {
	list-style: none;
	margin: 0 0 var(--ama-space-5);
	padding: var(--ama-space-4) var(--ama-space-5);
	background-color: var(--ama-cream);
	border-left: 2px solid var(--ama-gold);
	max-width: 70ch;
}

.amaskin-steps__item {
	position: relative;
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	padding-left: var(--ama-space-5);
	margin-bottom: var(--ama-space-2);
}

.amaskin-steps__item:last-child {
	margin-bottom: 0;
}

.amaskin-steps__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 1px;
	background-color: var(--ama-gold);
}

/* The line explaining how two interchangeable products differ. */
/* Sits above the pair it describes. No negative margin: it was pulling the
   note up over the cards above it. */
.amaskin-choice-note {
	font-size: var(--ama-text-sm);
	font-style: italic;
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-4);
	max-width: 70ch;
}

/* The routine heading. It follows the sticky cart bar, which carries no
   bottom margin, so the gap belongs here. Given its own class rather than a
   sibling selector, since the cart bar is absent in the account view and the
   PDF, where the spacing is still wanted. */
.amaskin-routine-title {
	margin-top: var(--ama-space-7);
}

/* The chosen concern, named beside the phase heading so the customer is
   reminded what they picked without scrolling back. */
.amaskin-phase__goal {
	font-weight: 400;
	color: var(--ama-text-soft);
}

/* =====================================================================
 * Cleansing guidance
 *
 * Follows the essentials sentence and shares its treatment: plain
 * paragraphs at body size, no panel. It is advice to read, not another
 * block to scan.
 * ================================================================== */

.amaskin-cleansenote {
	display: block;
	margin: 0 0 var(--ama-space-5);
	max-width: 70ch;
}

.amaskin-cleansenote__title {
	font-size: var(--ama-text-base);
	font-weight: 600;
	color: var(--ama-text);
	margin: 0 0 var(--ama-space-2);
}

.amaskin-cleansenote__body {
	font-size: var(--ama-text-base);
	line-height: var(--ama-leading-normal);
	color: var(--ama-text-soft);
	margin: 0 0 var(--ama-space-3);
}

.amaskin-cleansenote__body:last-child {
	margin-bottom: 0;
}