/* ============================================================
   One palette for every intention page — dark purple + gold.
   These four pages used to carry a per-intention hue (green for money, blue for
   calm, olive for vitality), which read as four unrelated sites next to the
   herbal series. The client asked for the herbal colour family throughout, so
   the palette below mirrors herbal-energy.css (#16071d ground, #d8a743 gold)
   and the per-theme blocks now only swap photography.
   ============================================================ */
.intention-page {
	--intention-bg: #16071d;
	--intention-bg-2: #220a2c;
	--intention-panel: rgba(34, 12, 44, 0.86);
	--intention-panel-strong: rgba(24, 8, 32, 0.94);
	--intention-panel-soft: rgba(54, 22, 70, 0.68);
	--intention-border: rgba(216, 167, 67, 0.36);
	--intention-border-strong: rgba(242, 212, 150, 0.7);
	--intention-heading: #d8a743;
	--intention-title: #f4ddaa;
	--intention-text: #f6e7c8;
	--intention-muted: #cfb783;
	--intention-accent: #9d61d1;
	--intention-accent-2: #d8a743;
	--intention-button: linear-gradient(180deg, #e9c879, #a86f1f);
	--intention-button-hover: linear-gradient(180deg, #f3d992, #bd842e);
	--intention-button-text: #1a0722;
	--intention-hero-image: url("../images/intention-bracelets/overview/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/overview/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/overview/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/overview/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/overview/cta-journal.jpg?v=20260719p");
	color: var(--intention-text);
	background:
		radial-gradient(circle at 18% 10%, rgba(157, 97, 209, 0.16), transparent 30%),
		linear-gradient(180deg, #1a0722 0%, var(--intention-bg) 48%, #0d0413 100%);
	font-family: var(--ei-body-font);
	overflow: hidden;
}

.intention-overview {
	--intention-hero-image: url("../images/intention-bracelets/overview/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/overview/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/overview/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/overview/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/overview/cta-journal.jpg?v=20260719p");
}

.intention-money-career {
	--intention-hero-image: url("../images/intention-bracelets/money-career/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/money-career/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/money-career/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/money-career/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/money-career/cta-journal.jpg?v=20260719p");
}

.intention-love-attraction {
	--intention-hero-image: url("../images/intention-bracelets/love-attraction/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/love-attraction/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/love-attraction/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/love-attraction/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/love-attraction/cta-journal.jpg?v=20260719p");
}

.intention-calm-sleep {
	--intention-hero-image: url("../images/intention-bracelets/calm-sleep/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/calm-sleep/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/calm-sleep/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/calm-sleep/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/calm-sleep/cta-journal.jpg?v=20260719p");
}

.intention-health-vitality {
	--intention-hero-image: url("../images/intention-bracelets/health-vitality/hero.jpg?v=20260719p");
	--intention-reset-image: url("../images/intention-bracelets/health-vitality/reset-bg.jpg?v=20260719p");
	--intention-cta-studio: url("../images/intention-bracelets/health-vitality/cta-studio.jpg?v=20260719p");
	--intention-cta-gift: url("../images/intention-bracelets/health-vitality/cta-gift.jpg?v=20260719p");
	--intention-cta-journal: url("../images/intention-bracelets/health-vitality/cta-journal.jpg?v=20260719p");
}

.intention-container {
	width: min(100% - 32px, 1360px);
	margin-inline: auto;
}

.intention-hero {
	position: relative;
	isolation: isolate;
	min-height: 620px;
	background-color: var(--intention-bg);
	overflow: hidden;
}

.intention-hero::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	content: "";
	background-image: var(--intention-hero-image);
	background-position: center;
	background-size: cover;
	filter: brightness(1.08) contrast(1.1) saturate(1.08);
	transform: scale(1.01);
}

.intention-hero::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background:
		linear-gradient(90deg, rgba(18, 6, 24, 0.91) 0%, rgba(18, 6, 24, 0.72) 38%, rgba(18, 6, 24, 0.16) 74%),
		linear-gradient(180deg, rgba(18, 6, 24, 0.2) 0%, rgba(18, 6, 24, 0.05) 52%, var(--intention-bg) 100%);
}

.intention-hero__inner {
	width: min(100% - 48px, 1360px);
	margin-inline: auto;
	padding: 28px 0 54px;
}

.intention-breadcrumb {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 58px;
	color: rgba(245, 234, 213, 0.7);
	font-family: var(--ei-ui-font);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}

.intention-breadcrumb a {
	color: rgba(245, 234, 213, 0.78);
	text-decoration: none;
}

.intention-breadcrumb a:hover {
	color: var(--intention-title);
}

.intention-hero__copy {
	max-width: 640px;
}

.intention-eyebrow {
	margin: 0 0 10px;
	color: var(--intention-heading);
	font-family: var(--ei-ui-font);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.intention-hero h1,
.intention-section-heading h2,
.intention-overview-cta h2 {
	margin: 0;
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: 0;
	text-wrap: balance;
}

.intention-hero h1 {
	max-width: 780px;
	font-size: 4.8rem;
}

.intention-hero__suffix {
	max-width: 620px;
	margin: 18px 0 0;
	color: var(--intention-heading);
	font-size: 1.48rem;
	font-weight: 700;
	line-height: 1.24;
}

.intention-hero__description {
	max-width: 590px;
	margin: 18px 0 0;
	color: var(--intention-text);
	font-size: 1.25rem;
	line-height: 1.55;
}

.intention-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.intention-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--ei-ui-font);
	font-size: 0.84rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.intention-button:hover {
	transform: translateY(-2px);
}

.intention-button--primary {
	border-color: rgba(255, 236, 183, 0.66);
	color: var(--intention-button-text);
	background: var(--intention-button);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

.intention-button--primary:hover {
	color: var(--intention-button-text);
	background: var(--intention-button-hover);
}

.intention-button--ghost {
	border-color: var(--intention-border-strong);
	color: var(--intention-title);
	background: rgba(22, 8, 29, 0.4);
}

.intention-button--ghost:hover {
	color: #fff8e7;
	border-color: rgba(255, 239, 199, 0.9);
}

.intention-hero__features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	max-width: 930px;
	margin: 72px 0 0;
	padding: 0;
	list-style: none;
}

.intention-hero__features li {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 76px;
	padding: 14px;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	color: var(--intention-text);
	background: rgba(22, 8, 29, 0.54);
	backdrop-filter: blur(14px);
}

.intention-hero__features img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex: 0 0 auto;
	filter: drop-shadow(0 0 12px rgba(255, 236, 185, 0.2));
}

.intention-hero__features span {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.24;
}

.intention-section {
	position: relative;
	padding: 74px 0;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intention-bg) 86%, #1d1430) 0%, var(--intention-bg) 100%);
}

.intention-section + .intention-section {
	border-top: 1px solid rgba(216, 167, 67, 0.18);
}

.intention-section-heading {
	max-width: 820px;
	margin-bottom: 28px;
}

.intention-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.intention-section-heading h2,
.intention-overview-cta h2 {
	font-size: 3rem;
	line-height: 1.05;
}

.intention-section-heading p:not(.intention-eyebrow),
.intention-overview-cta p,
.intention-quiz__copy > p,
.intention-purchase p,
.intention-ritual-card p,
.intention-review-card p,
.intention-cta-card em {
	color: var(--intention-muted);
	font-size: 1.16rem;
	line-height: 1.55;
}

.intention-section-heading p:not(.intention-eyebrow) {
	margin: 16px 0 0;
}

.intention-pathway-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.intention-pathway-card {
	position: relative;
	display: flex;
	min-height: 430px;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	color: var(--intention-text);
	text-decoration: none;
	overflow: hidden;
	background: var(--intention-panel);
}

.intention-pathway-card::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(180deg, rgba(22, 8, 29, 0.08) 0%, rgba(22, 8, 29, 0.4) 46%, rgba(22, 8, 29, 0.84) 100%),
		linear-gradient(90deg, rgba(216, 167, 67, 0.12), transparent 52%);
}

.intention-pathway-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.intention-pathway-card:hover img {
	transform: scale(1.04);
}

.intention-pathway-card__number,
.intention-pathway-card strong,
.intention-pathway-card em {
	position: relative;
	z-index: 1;
}

.intention-pathway-card__number {
	width: fit-content;
	margin-bottom: 14px;
	padding: 7px 10px;
	border: 1px solid rgba(255, 239, 199, 0.38);
	border-radius: 8px;
	color: var(--intention-heading);
	font-family: var(--ei-ui-font);
	font-size: 0.72rem;
	font-weight: 800;
}

.intention-pathway-card strong {
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 1.42rem;
	line-height: 1.08;
}

.intention-pathway-card em {
	margin-top: 8px;
	color: var(--intention-muted);
	font-size: 1.02rem;
	font-style: normal;
	line-height: 1.35;
}

.intention-overview-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	padding: 34px;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(22, 7, 29, 0.94), rgba(40, 15, 52, 0.76)),
		var(--intention-cta-studio) center / cover no-repeat;
}

.intention-overview-cta p {
	max-width: 720px;
	margin: 16px 0 0;
}

/*
 * The client's effect mockups (X水晶效果图.png) lay this band out as a centred
 * question over one row of five icon columns, with the "Keep reading …" line under
 * it — not as a two-column panel over a photo.
 */
.intention-reset__panel {
	position: relative;
	display: block;
	min-height: 0;
	/*
	 * The band artwork carries a floral spray across the outer ~10% at each end
	 * (measured off gold-band.jpg), so the content is inset clear of them — the
	 * longest question, Health & Vitality's, otherwise ran straight through both.
	 */
	padding: 34px clamp(28px, 11%, 160px) 28px;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	/*
	 * Gold foil, matching the Herbal "Is This You?" band the client pointed at — same
	 * artwork (floral corners and all) rather than a second gold of our own. The text
	 * and the client's gold line icons both flip to dark ink below; leave them light
	 * and the whole band disappears into the background.
	 */
	color: var(--intention-ink, #24140b);
	background:
		linear-gradient(rgba(216, 167, 67, 0.32), rgba(216, 167, 67, 0.32)),
		url("../images/herbal-energy/deep-grounding/gold-band.jpg") center / cover no-repeat;
	overflow: hidden;
}

.intention-reset__panel .intention-reset__copy h2,
.intention-reset__panel .intention-mini-card span {
	color: #24140b;
}

/* Sized to wrap rather than stretch into the florals; matches the Herbal band's scale. */
.intention-reset__panel .intention-reset__copy h2 {
	max-width: 30ch;
	margin-inline: auto;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.12;
}

.intention-reset__panel .intention-reset__more {
	color: #4a2f18;
}

/* Dividers were hairlines of light on dark; on gold they need to be ink. */
.intention-reset__panel .intention-mini-card {
	border-left-color: rgba(56, 32, 12, 0.34);
}

/*
 * The client's reset-icon-*.png are gold line art drawn for the dark mockups, so on a
 * gold band they are invisible. Darkening them keeps their artwork (and their
 * per-intention meanings) while reading as the dark ink icons the Herbal band uses.
 */
.intention-reset__panel .intention-mini-card img {
	filter: brightness(0.28) contrast(1.05);
}

.intention-reset__copy h2,
.intention-quiz__copy h2 {
	margin: 0;
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0;
}

.intention-reset__copy p:not(.intention-eyebrow) {
	margin: 16px 0 0;
	color: var(--intention-muted);
	font-size: 1.18rem;
	line-height: 1.5;
}

.intention-reset__copy {
	text-align: center;
	margin-bottom: 26px;
}

.intention-reset__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
}

/* Hairline dividers between the columns, as in the mockup. */
.intention-mini-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 6px 18px;
	text-align: center;
	border-left: 1px solid rgba(255, 239, 199, 0.18);
}

.intention-mini-card:first-child {
	border-left: 0;
}

.intention-mini-card img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	filter: drop-shadow(0 0 14px rgba(255, 238, 190, 0.2));
}

.intention-mini-card span {
	color: var(--intention-text);
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.4;
}

.intention-reset__more {
	margin: 26px 0 0;
	text-align: center;
	color: var(--intention-gold, #e7c66b);
	font-size: 1.02rem;
}

@media (max-width: 900px) {
	.intention-reset__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 0;
	}

	.intention-mini-card:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 560px) {
	.intention-reset__grid {
		grid-template-columns: 1fr;
	}

	.intention-mini-card {
		border-left: 0;
	}
}

/* Quiz result card — the mockup closes the step row with it, gift mark included. */
.intention-quiz__result {
	margin-top: 18px;
	padding: 18px 20px 20px;
	text-align: center;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	background: rgba(22, 8, 29, 0.5);
}

.intention-quiz__result strong {
	display: block;
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 1.34rem;
	font-weight: 600;
}

.intention-quiz__result p {
	margin: 8px 0 12px;
	color: var(--intention-muted);
	font-size: 0.98rem;
	line-height: 1.45;
}

.intention-quiz__result img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	filter: drop-shadow(0 0 14px rgba(255, 238, 190, 0.22));
}

.intention-quiz__inner,
.intention-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: center;
}

.intention-quiz__media,
.intention-shop__media,
.intention-variant-card,
.intention-purchase,
.intention-review-card,
.intention-ritual-card {
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	background: var(--intention-panel);
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

.intention-quiz__media img,
.intention-shop__media > img,
.intention-variant-card img {
	display: block;
	width: 100%;
	height: auto;
}

.intention-quiz__media img {
	aspect-ratio: 1.18 / 1;
	object-fit: cover;
}

.intention-quiz__copy {
	padding: 16px 0 16px 20px;
}

.intention-quiz__copy > p {
	margin: 16px 0 0;
}

.intention-quiz__steps {
	display: grid;
	gap: 12px;
	margin: 24px 0;
}

.intention-step-row {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 14px;
	border: 1px solid rgba(255, 239, 199, 0.2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.035);
}

.intention-step-row > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: var(--intention-button-text);
	background: var(--intention-button);
	font-family: var(--ei-ui-font);
	font-size: 0.78rem;
	font-weight: 900;
}

.intention-step-row strong {
	display: block;
	color: var(--intention-title);
	font-family: var(--ei-ui-font);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
}

.intention-step-row em {
	display: block;
	margin-top: 3px;
	color: var(--intention-muted);
	font-size: 1.06rem;
	font-style: normal;
	line-height: 1.32;
}

.intention-shop__media {
	background: var(--intention-panel-strong);
}

.intention-shop__media > img {
	aspect-ratio: 1.12 / 1;
	object-fit: cover;
}

.intention-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid var(--intention-border);
}

.intention-tag-row span {
	padding: 7px 10px;
	border: 1px solid rgba(255, 239, 199, 0.24);
	border-radius: 999px;
	color: var(--intention-muted);
	font-family: var(--ei-ui-font);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.intention-shop__details {
	display: grid;
	gap: 18px;
}

.intention-variant-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.intention-variant-card img {
	aspect-ratio: 1.22 / 1;
	object-fit: cover;
	border-bottom: 1px solid var(--intention-border);
}

.intention-variant-card div {
	padding: 16px;
}

.intention-variant-card span {
	color: var(--intention-heading);
	font-family: var(--ei-ui-font);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.intention-variant-card h3,
.intention-ritual-card h3 {
	margin: 8px 0 0;
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
}

.intention-variant-card p {
	margin: 8px 0 0;
	color: var(--intention-muted);
	font-size: 1.02rem;
	line-height: 1.38;
}

.intention-purchase {
	padding: 22px;
	background:
		linear-gradient(135deg, var(--intention-panel-strong), var(--intention-panel-soft));
}

.intention-purchase p {
	margin: 8px 0 0;
}

.intention-size-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.intention-size-row span {
	display: grid;
	gap: 2px;
	min-height: 70px;
	place-items: center;
	padding: 10px;
	border: 1px solid rgba(255, 239, 199, 0.24);
	border-radius: 8px;
	color: var(--intention-muted);
	font-size: 0.95rem;
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
}

.intention-size-row strong {
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 1.38rem;
	line-height: 1;
}

.intention-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.intention-benefits li {
	position: relative;
	padding-left: 18px;
	color: var(--intention-text);
	font-size: 1.02rem;
}

.intention-benefits li::before {
	position: absolute;
	top: 0.66em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	content: "";
	background: var(--intention-heading);
}

.intention-price-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 22px;
}

.intention-price-row strong {
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 2.35rem;
	line-height: 1;
}

.intention-review-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.intention-review-card {
	padding: 24px;
}

.intention-stars {
	margin-bottom: 14px;
	color: var(--intention-heading);
	font-size: 1rem;
	letter-spacing: 0;
}

.intention-review-card p {
	margin: 0 0 18px;
	color: var(--intention-text);
	font-size: 1.22rem;
}

.intention-review-card strong {
	display: block;
	color: var(--intention-title);
	font-family: var(--ei-ui-font);
	font-weight: 800;
}

.intention-review-card span {
	display: block;
	margin-top: 4px;
	color: var(--intention-muted);
	font-size: 0.98rem;
}

.intention-ritual-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.intention-ritual-card {
	padding: 24px;
	background:
		linear-gradient(180deg, var(--intention-panel-soft), var(--intention-panel));
}

.intention-ritual-card > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--intention-border-strong);
	border-radius: 50%;
	color: var(--intention-heading);
	font-family: var(--ei-ui-font);
	font-size: 0.78rem;
	font-weight: 900;
}

.intention-ritual-card p {
	margin: 12px 0 0;
	font-size: 1.05rem;
}

.intention-cta-grid__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.intention-cta-card {
	position: relative;
	display: flex;
	min-height: 310px;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	border: 1px solid var(--intention-border);
	border-radius: 8px;
	color: var(--intention-text);
	text-decoration: none;
	overflow: hidden;
	background: var(--intention-panel);
}

.intention-cta-card::before {
	position: absolute;
	inset: 0;
	content: "";
	background-position: center;
	background-size: cover;
	filter: brightness(0.76) saturate(1.08);
	transition: transform 0.45s ease;
}

.intention-cta-card::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(180deg, rgba(20, 7, 26, 0.1), rgba(20, 7, 26, 0.78) 72%, rgba(20, 7, 26, 0.92));
}

.intention-cta-card:hover::before {
	transform: scale(1.04);
}

.intention-cta-card--studio::before {
	background-image: var(--intention-cta-studio);
}

.intention-cta-card--gift::before {
	background-image: var(--intention-cta-gift);
}

.intention-cta-card--journal::before {
	background-image: var(--intention-cta-journal);
}

.intention-cta-card span,
.intention-cta-card strong,
.intention-cta-card em {
	position: relative;
	z-index: 1;
}

.intention-cta-card span {
	color: var(--intention-heading);
	font-family: var(--ei-ui-font);
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
}

.intention-cta-card strong {
	margin-top: 8px;
	color: var(--intention-title);
	font-family: var(--ei-heading-font);
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.08;
}

.intention-cta-card em {
	margin-top: 8px;
	font-style: normal;
	font-size: 1.04rem;
}

@media (max-width: 1180px) {
	.intention-hero h1 {
		font-size: 4rem;
	}

	.intention-hero__features,
	.intention-pathway-grid,
	.intention-ritual-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.intention-shop__layout,
	.intention-quiz__inner,
	.intention-reset__panel {
		grid-template-columns: 1fr;
	}

	.intention-quiz__copy {
		padding: 0;
	}
}

@media (max-width: 860px) {
	.intention-hero {
		min-height: 0;
	}

	.intention-hero__inner {
		width: min(100% - 28px, 1360px);
		padding: 22px 0 38px;
	}

	.intention-breadcrumb {
		margin-bottom: 34px;
	}

	.intention-hero h1 {
		font-size: 3rem;
		line-height: 1.04;
	}

	.intention-hero__suffix {
		font-size: 1.24rem;
	}

	.intention-hero__description {
		font-size: 1.12rem;
	}

	.intention-hero__features,
	.intention-pathway-grid,
	.intention-reset__grid,
	.intention-variant-grid,
	.intention-review-grid,
	.intention-ritual-grid,
	.intention-cta-grid__inner,
	.intention-overview-cta__inner {
		grid-template-columns: 1fr;
	}

	.intention-section {
		padding: 54px 0;
	}

	.intention-section-heading h2,
	.intention-overview-cta h2,
	.intention-reset__copy h2,
	.intention-quiz__copy h2 {
		font-size: 2.28rem;
	}

	.intention-pathway-card {
		min-height: 320px;
	}

	.intention-reset__panel {
		padding: 22px;
	}

	.intention-overview-cta__inner {
		padding: 24px;
	}
}

@media (max-width: 560px) {
	.intention-container {
		width: min(100% - 24px, 1360px);
	}

	.intention-hero::after {
		background:
			linear-gradient(90deg, rgba(18, 6, 24, 0.94) 0%, rgba(18, 6, 24, 0.72) 100%),
			linear-gradient(180deg, rgba(18, 6, 24, 0.14) 0%, var(--intention-bg) 100%);
	}

	.intention-hero h1 {
		font-size: 2.34rem;
	}

	.intention-hero__features {
		margin-top: 44px;
	}

	.intention-actions,
	.intention-price-row {
		align-items: stretch;
		flex-direction: column;
	}

	.intention-button {
		width: 100%;
	}

	.intention-size-row {
		grid-template-columns: 1fr;
	}

	.intention-step-row {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.intention-step-row > span {
		width: 40px;
		height: 40px;
	}
}

/* ============================================================
   粉水晶效果图 structure (细节问题.docx 一)
   5 stones · wearing carousel · zoomable main image ·
   in-place sub-variant swap · size selector · related carousel
   ============================================================ */

/* --- The 5 Stones --- */
.intention-stone-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 20px);
}
/*
 * Per the effect mockups: large bare stone spheres on the page, gold name, then the
 * note — no card chrome. The boxed 64px version read as tiny dots next to the client's
 * design, where the stones are the focus of the section.
 */
.intention-stone-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 8px 10px;
}
.intention-stone-card img {
	width: clamp(96px, 9vw, 132px);
	height: clamp(96px, 9vw, 132px);
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(216, 167, 67, 0.14);
}
.intention-stone-card strong {
	font-size: 1.12rem;
	font-weight: 600;
	color: var(--intention-gold, #e7c66b);
}
.intention-stone-card span {
	font-size: 0.94rem;
	color: var(--intention-text, #f4ead6);
	line-height: 1.45;
}

/* --- Wearing / related carousels --- */
.intention-wear-carousel,
.intention-related-carousel { position: relative; }
.intention-wear-track,
.intention-related-track {
	display: flex;
	gap: clamp(12px, 1.4vw, 18px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px 2px 10px;
}
.intention-wear-track::-webkit-scrollbar,
.intention-related-track::-webkit-scrollbar { display: none; }
.intention-wear-slide {
	flex: 0 0 auto;
	width: clamp(240px, 26vw, 340px);
	margin: 0;
	scroll-snap-align: start;
}
.intention-wear-slide img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(216, 167, 67, 0.2);
}
.intention-wear-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff0c4;
	background: rgba(20, 7, 26, 0.82);
	border: 1px solid rgba(216, 167, 67, 0.5);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background 200ms ease;
}
.intention-wear-arrow:hover { background: rgba(216, 167, 67, 0.32); }
/*
 * The arrows used to sit on top of the track (left/right: -6px), which put a 46px
 * dead zone over the first and last visible cards — clicking those cards hit the
 * arrow instead of the product link. Give every carousel a gutter and park the
 * arrows in it, so no card is ever behind one.
 */
.intention-wear-carousel,
.intention-related-carousel,
.intention-variant-carousel {
	padding-inline: 54px;
}

.intention-wear-arrow--prev { left: 0; }
.intention-wear-arrow--next { right: 0; }

/* --- Zoomable main image + scenes --- */
.intention-shop__stage {
	position: relative;
	cursor: zoom-in;
	border-radius: 20px;
	overflow: hidden;
}
.intention-shop__main-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 600ms ease;
}
.intention-shop__stage:hover .intention-shop__main-image { transform: scale(1.03); }
.intention-shop__zoom-hint {
	position: absolute;
	bottom: 12px;
	right: 12px;
	padding: 6px 12px;
	font-family: var(--ei-ui-font, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff0c4;
	background: rgba(20, 7, 26, 0.7);
	border: 1px solid rgba(216, 167, 67, 0.4);
	border-radius: 999px;
	pointer-events: none;
}
.intention-shop__scenes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 10px;
}
.intention-shop__scenes img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(216, 167, 67, 0.18);
}

/* --- Sub-variant selectable cards (now buttons) --- */
.intention-variant-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	text-align: left;
	background: rgba(26, 10, 34, 0.5);
	border: 1px solid rgba(216, 167, 67, 0.22);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
/* Rendered as a link once its sub-variant has its own product page. */
.intention-variant-card {
	text-decoration: none;
	color: inherit;
}
.intention-variant-card:hover { transform: translateY(-3px); }
.intention-variant-card.is-active {
	border-color: var(--ei-primary, #d8a743);
	box-shadow: 0 0 0 1px var(--ei-primary, #d8a743), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.intention-variant-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 6px;
}
.intention-variant-card__tag {
	font-family: var(--ei-ui-font, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ei-primary, #d8a743);
}
.intention-variant-card strong { color: #fff0c4; font-size: 1rem; }
.intention-variant-card em { color: var(--ei-muted, #c7ac7a); font-style: normal; font-size: 0.86rem; line-height: 1.4; }

/* --- Size selector buttons --- */
.intention-size-option {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 18px;
	color: var(--ei-text, #f7ecd5);
	background: rgba(26, 10, 34, 0.5);
	border: 1px solid rgba(216, 167, 67, 0.3);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}
.intention-size-option strong { color: #fff0c4; font-size: 1.05rem; }
.intention-size-option.is-active {
	border-color: var(--ei-primary, #d8a743);
	background: rgba(216, 167, 67, 0.16);
}

.intention-shop__customise {
	display: inline-block;
	margin-top: 12px;
	color: var(--ei-muted, #c7ac7a);
	font-size: 0.92rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.intention-shop__customise:hover { color: var(--ei-primary, #d8a743); }

/* --- Related product carousel --- */
.intention-related-card {
	flex: 0 0 auto;
	width: clamp(200px, 20vw, 250px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}
/* Circular product medallions, as the mockups show "Customers Also Viewed" (and as the
   herbal series pages already render their related grid). */
.intention-related-card__media {
	width: min(100%, 168px);
	margin-inline: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--intention-border, rgba(216, 167, 67, 0.36));
	background: rgba(26, 10, 34, 0.5);
}
.intention-related-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intention-related-card strong { color: #fff0c4; font-size: 0.98rem; margin-top: 8px; }
.intention-related-card__price { color: var(--ei-primary, #d8a743); font-weight: 600; }

/* --- Zoom lightbox --- */
.ei-zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vw;
	background: rgba(13, 4, 18, 0.9);
	cursor: zoom-out;
}
.ei-zoom-overlay.is-open { display: flex; }
.ei-zoom-overlay img {
	max-width: min(96vw, 1100px);
	max-height: 92vh;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.ei-zoom-overlay__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 46px;
	height: 46px;
	font-size: 1.8rem;
	color: #fff0c4;
	background: rgba(20, 7, 26, 0.7);
	border: 1px solid rgba(216, 167, 67, 0.5);
	border-radius: 50%;
}

@media (max-width: 900px) {
	.intention-stone-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.intention-stone-grid { grid-template-columns: repeat(2, 1fr); }
	.intention-shop__scenes { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Gold product panel — 还原 X水晶效果图 的金箔产品区
   The mockups put the whole product block on gold foil with dark ink text; the
   herbal series pages already ship this exact treatment (.herbal-gold-wrap), so
   this reuses their texture rather than inventing a second gold.
   ============================================================ */
.intention-shop {
	--intention-ink: #24140b;
	--intention-ink-soft: #4a2f18;
	color: var(--intention-ink);
	background-color: #d7a949;
	/*
	 * Own gold leaf now, rather than the herbal texture flattened under a 0.78 wash —
	 * the lighter veil lets the foil's sheen and corner filigree read while keeping
	 * the ink text above 4.5:1 (measured against the panel's brightest 5%).
	 */
	background-image:
		linear-gradient(rgba(216, 167, 67, 0.34), rgba(216, 167, 67, 0.34)),
		url("../images/intention-bracelets/shared/gold-panel.jpg?v=20260721");
	background-position: center;
	background-size: cover;
}

.intention-shop .intention-section-heading h2,
.intention-shop .intention-shop__details h2,
.intention-shop h3,
.intention-shop .intention-price-row strong {
	color: var(--intention-ink);
}

.intention-shop .intention-eyebrow,
.intention-shop .intention-shop__details p,
.intention-shop .intention-section-heading p {
	color: var(--intention-ink-soft);
}

/*
 * Ink only where the gold actually shows through. .intention-tag-row lives inside the
 * dark .intention-shop__media panel, so it keeps light text — scoping ink to the whole
 * section turned those tags into dark-on-dark.
 */
.intention-shop .intention-purchase .intention-size-row span,
.intention-shop .intention-purchase .intention-size-row button,
.intention-shop .intention-purchase .intention-benefits span,
.intention-shop .intention-purchase .intention-benefits li {
	color: var(--intention-ink);
	border-color: rgba(36, 20, 11, 0.45);
}

.intention-shop .intention-purchase .intention-benefits svg {
	color: var(--intention-ink-soft);
}

/* Four variant cards across, as the mockup lays them out (was 3 + orphan). */
.intention-shop .intention-variant-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The purchase card sits on the gold, so it needs its own light surface. */
.intention-shop .intention-purchase {
	background: rgba(255, 244, 214, 0.42);
	border-color: rgba(36, 20, 11, 0.35);
	box-shadow: none;
}

.intention-shop .intention-purchase h3,
.intention-shop .intention-purchase p,
.intention-shop .intention-purchase span,
.intention-shop .intention-purchase strong {
	color: var(--intention-ink);
}

.intention-shop .intention-shop__customise {
	color: var(--intention-ink-soft);
}

.intention-shop .intention-shop__customise:hover {
	color: var(--intention-ink);
}

/* Media tiles stay dark — the product photography is dark, as in the mockup. */
.intention-shop .intention-shop__media,
.intention-shop .intention-variant-card {
	border-color: rgba(36, 20, 11, 0.4);
}

.intention-shop .intention-variant-card {
	background: rgba(24, 14, 8, 0.9);
}

.intention-shop .intention-variant-card h3,
.intention-shop .intention-variant-card span,
.intention-shop .intention-variant-card em,
.intention-shop .intention-variant-card strong {
	color: var(--intention-title, #fff0c4);
}

.intention-shop .intention-variant-card.is-active,
.intention-shop .intention-variant-card[aria-current="true"] {
	border-color: var(--intention-ink);
	box-shadow: 0 0 0 1px var(--intention-ink);
}

/* Primary CTA inverts to dark-on-gold so it still reads as the action. */
.intention-shop .intention-button--primary {
	color: #f7e6bd;
	background: linear-gradient(135deg, #2f1a0e, #1b0f08);
	border-color: rgba(36, 20, 11, 0.6);
}

.intention-shop .intention-button--primary:hover {
	background: #150b05;
}

/* ============================================================
   "Choose your style" strip → a carousel of the category's products.
   It used to be a fixed four-column grid of theme artwork, so a fifth product
   had nowhere to go. Same track mechanics as the wear/related carousels.
   ============================================================ */
.intention-variant-carousel {
	position: relative;
	margin-bottom: 18px;
}

/*
 * The details column is a grid item, and a grid item defaults to min-width:auto —
 * so the flex track's intrinsic width (all cards laid end to end) blew the column
 * out to 1190px inside a 733px cell, and .intention-page's overflow:hidden quietly
 * clipped the purchase box. Let the column win and the track scroll.
 */
.intention-shop__details {
	min-width: 0;
	/*
	 * Its single implicit column was auto-sized, so it grew to the track's max-content
	 * (1190px inside a 733px cell) and .intention-page's overflow:hidden clipped the
	 * purchase box off the right edge. minmax(0,1fr) caps the column at the cell.
	 */
	grid-template-columns: minmax(0, 1fr);
}

.intention-variant-track {
	min-width: 0;
}

.intention-variant-track {
	display: flex;
	gap: clamp(10px, 1.1vw, 14px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px 2px 8px;
}

.intention-variant-track::-webkit-scrollbar {
	display: none;
}

.intention-variant-track .intention-variant-card {
	flex: 0 0 auto;
	width: clamp(150px, 15vw, 186px);
	scroll-snap-align: start;
}

/* The arrows sit on the gold panel here, so they need ink rather than cream. */
.intention-shop .intention-variant-carousel .intention-wear-arrow {
	color: #24140b;
	background: rgba(255, 244, 214, 0.72);
	border-color: rgba(36, 20, 11, 0.4);
}

.intention-shop .intention-variant-carousel .intention-wear-arrow:hover {
	background: #fff4d6;
}

@media (max-width: 900px) {
	.intention-variant-track .intention-variant-card {
		width: clamp(140px, 42vw, 170px);
	}
}

/* --- Quick-buy zone (2026-07-24): selected line, details link, add feedback --- */
.intention-purchase__selected {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	margin-top: 18px;
	font-size: 0.98rem;
}

.intention-purchase__selected span {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.intention-purchase__selected strong {
	font-family: var(--ei-heading-font);
	font-size: 1.12rem;
}

.intention-shop .intention-purchase .intention-purchase__details {
	margin-left: auto;
	color: var(--intention-ink-soft);
	font-size: 0.92rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.intention-shop .intention-purchase .intention-purchase__details:hover {
	color: var(--intention-ink);
}

/* WooCommerce's post-add "View cart" link — make it a visible confirmation
 * instead of an unstyled ghost (加购"没反应"的一部分原因). */
.intention-price-row .added_to_cart {
	flex-basis: 100%;
	color: var(--intention-ink-soft, #4a2f18);
	font-size: 0.9rem;
	text-align: right;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.intention-button--primary.is-added-flash {
	background: #35104a;
	color: #f4ddaa;
}

/* Spec cards select in place now — make the active one unmistakably a chosen
 * "spec", not just a hovered card. */
.intention-shop .intention-variant-card {
	cursor: pointer;
}

.intention-shop .intention-variant-card.is-active {
	border-color: var(--ei-primary, #d8a743);
	box-shadow: 0 0 0 2px var(--ei-primary, #d8a743);
}

/* Size options on the gold panel: cream resting state (the old dark fill put
   ink text on brown), solid gold when chosen — same accent as the detail page. */
.intention-shop .intention-purchase .intention-size-option {
	background: rgba(255, 250, 235, 0.55);
	border-color: rgba(56, 32, 12, 0.38);
}

.intention-shop .intention-purchase .intention-size-option strong {
	color: #24140b;
}

.intention-shop .intention-purchase .intention-size-option.is-active {
	background: linear-gradient(180deg, #f0c56e, #ad7229);
	border-color: rgba(143, 97, 35, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 246, 206, 0.4);
}