/* =========================================================
   ACCENTERA — SCENT STATE MODULE
   Desktop foundation
   ========================================================= */

html.accentera-module-is-open,
body.accentera-module-is-open {
	overflow: hidden;
}

/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

.accentera-scent-overlay {
	--ss-paper: #f3f0ea;
	--ss-ink: #242321;
	--ss-charcoal: #353432;
	--ss-rule: rgba(36, 35, 33, 0.52);
	--ss-rule-light: rgba(36, 35, 33, 0.22);
	--ss-recognition-rule: #c9c6c0;

	--ss-raleway: "Raleway", sans-serif;
	--ss-poppins: "Poppins", sans-serif;

	--ss-module-width: 1360px;
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.accentera-scent-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	font-family: var(--ss-poppins);
	color: var(--ss-ink);
}


.accentera-scent-overlay[hidden] {
	display: none !important;
}


.accentera-scent-overlay__backdrop {
	position: absolute;
	inset: 0;

	background: rgba(20, 19, 18, 0.42);
	backdrop-filter: blur(1px);
}

.accentera-scent-overlay {
	opacity: 0;
	transition: opacity 220ms ease;
}

.accentera-scent-overlay.is-visible {
	opacity: 1;
}

.accentera-scent-overlay.is-closing {
	opacity: 0;
}

/* =========================================================
   MODULE SHEET
   ========================================================= */

.accentera-scent-module {
	position: relative;
	z-index: 1;

	width: min(100%, var(--ss-module-width));
	max-height: calc(100vh - 48px);

	overflow: auto;

	background:
		linear-gradient(
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.055)
		),
		var(--ss-paper);

	border: 1px solid rgba(36, 35, 33, 0.12);
	border-radius: 11px;

	box-shadow:
		0 3px 8px rgba(20, 18, 15, 0.10),
		0 18px 50px rgba(20, 18, 15, 0.16);

	outline: none;
}


/* Subtle printed paper grain */

.accentera-scent-module::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	pointer-events: none;

	opacity: 0.17;

	background-image:
		repeating-radial-gradient(
			circle at 0 0,
			rgba(60, 55, 48, 0.07) 0,
			rgba(60, 55, 48, 0.07) 0.45px,
			transparent 0.55px,
			transparent 3px
		);
}


/* =========================================================
   CLOSE
   ========================================================= */

.accentera-scent-module__close {
	position: absolute;
	top: 17px;
	right: 22px;
	z-index: 5;

	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	font-family: var(--ss-raleway);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;

	color: var(--ss-ink);

	cursor: pointer;
}


.accentera-scent-module__close-x {
	font-family: var(--ss-poppins);
	font-size: 14px;
	font-weight: 300;
	line-height: 1;
}

/* =========================================================
   CLOSE BUTTON — OVERRIDE ASTRA HOVER
   ========================================================= */

.accentera-scent-module
.accentera-scent-module__close {
	background: transparent !important;
	color: var(--ss-ink) !important;
	border: 0 !important;
	box-shadow: none !important;

	opacity: 1;

	transition: opacity 180ms ease !important;
}


.accentera-scent-module
.accentera-scent-module__close:hover,
.accentera-scent-module
.accentera-scent-module__close:focus-visible {
	background: transparent !important;
	color: var(--ss-ink) !important;
	border-color: transparent !important;
	box-shadow: none !important;

	opacity: 0.5;
}


/* Keep keyboard focus visible without Astra styling */

.accentera-scent-module
.accentera-scent-module__close:focus-visible {
	outline: 1px solid currentColor !important;
	outline-offset: 4px;
}
/* =========================================================
   MAIN TWO-COLUMN EXHIBIT
   ========================================================= */

.accentera-scent-module__main {
	display: grid;
	grid-template-columns: 38% 62%;

	min-height: 760px;

	padding-top: 46px;
}


/* =========================================================
   LEFT — EDITORIAL LABEL
   ========================================================= */

.accentera-scent-module__info {
	display: flex;
	flex-direction: column;

	min-width: 0;

	padding:
		20px
		clamp(34px, 3.2vw, 52px)
		22px
		clamp(40px, 4vw, 62px);

	border-right: 1px solid var(--ss-rule);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.accentera-scent-module__header {
	padding-bottom: 18px;

	border-bottom: 1px solid var(--ss-rule);
}


.accentera-scent-module__number {
	margin-bottom: 8px;

	font-family: var(--ss-poppins);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.04em;
}


.accentera-scent-module__title {
	margin: 0 0 5px;

	font-family: var(--ss-raleway);
	font-size: clamp(38px, 3.5vw, 54px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: var(--ss-ink);
}


.accentera-scent-module__subtitle {
	margin: 0;

	font-family: var(--ss-poppins);
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
}


/* =========================================================
   COMPOSITION
   ========================================================= */

.accentera-scent-module__composition {
	margin-top: 28px;

	max-width: 390px;

	font-family: var(--ss-poppins);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	text-align: left;
}


/* =========================================================
   RECOGNITION
   ========================================================= */

.accentera-scent-module__recognition {
	display: grid;
	grid-template-columns: 6px minmax(0, 1fr);
	column-gap: 20px;

	margin-top: 34px;
	margin-bottom: 62px;

	max-width: 400px;
}


.accentera-scent-module__recognition-rule {
	width: 6px;
	height: 100%;
	min-height: 94px;

	background: var(--ss-recognition-rule);
}


.accentera-scent-module__recognition-copy {
	align-self: center;

	font-family: var(--ss-poppins);
	font-size: 15px;
	font-style: italic;
	font-weight: 400;
	line-height: 2em;

	text-align: left;
}


/* =========================================================
   SCENT NOTES
   ========================================================= */

.accentera-scent-module__notes {
	margin-top: auto;
}


.accentera-scent-module__section-title {
	margin: 0;

	font-family: var(--ss-raleway);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.28em;
	text-transform: uppercase;

	color: var(--ss-ink);
}


.accentera-scent-module__notes .accentera-scent-module__section-title {
	padding-bottom: 12px;

	border-bottom: 1px solid var(--ss-rule);
}


.accentera-scent-module__notes-list {
	list-style: none;

	margin: 0;
	padding: 0;
}


.accentera-scent-module__note {
	margin: 0;
	padding: 9px 10px;

	border-bottom: 1px solid var(--ss-rule-light);

	font-family: var(--ss-poppins);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}


/* =========================================================
   LEFT SECONDARY NAVIGATION
   ========================================================= */

.accentera-scent-module__secondary-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;

	margin-top: 28px;

	border-top: 1px solid var(--ss-rule);
}


.accentera-scent-module__secondary-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;

	min-height: 58px;

	padding: 10px 12px;

	font-family: var(--ss-raleway);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.10em;
	text-transform: uppercase;

	color: inherit;
	text-decoration: none;
}


.accentera-scent-module__secondary-link:first-child {
	border-right: 1px solid var(--ss-rule);
}


.accentera-scent-module__secondary-link:hover,
.accentera-scent-module__secondary-link:focus-visible {
	background: rgba(36, 35, 33, 0.035);
}


/* =========================================================
   RIGHT — MATERIAL EXHIBIT
   ========================================================= */

.accentera-scent-module__exhibit {
	display: flex;
	flex-direction: column;

	min-width: 0;

	padding:
		54px
		clamp(42px, 4vw, 64px)
		36px;
}


/* ---------------------------------------------------------
   MATERIAL SWATCH
   --------------------------------------------------------- */

.accentera-scent-module__material {
	position: relative;

	width: 100%;
	aspect-ratio: 1.88 / 1;

	overflow: hidden;

	background: #252525;

	box-shadow:
		0 2px 3px rgba(20, 18, 15, 0.19),
		0 10px 18px rgba(20, 18, 15, 0.13),
		0 22px 30px rgba(20, 18, 15, 0.065);
}


.accentera-scent-module__material-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

/* =========================================================
   MATERIAL LIGHTING — ADAPTIVE GALLERY LIGHT
   ========================================================= */

.accentera-scent-module__material {
	position: relative;
	isolation: isolate;

	/* Default — works well for darker materials */
	--material-highlight: rgba(255, 255, 255, 0.13);
	--material-highlight-soft: rgba(255, 255, 255, 0.055);
	--material-shadow: rgba(20, 20, 20, 0.035);
}


/* ---------------------------------------------------------
   LIGHT MATERIALS
   Give the moving light a slightly stronger shadow edge.
   --------------------------------------------------------- */

.accentera-scent-overlay[data-state-slug="awaken"]
.accentera-scent-module__material {
	--material-highlight: rgba(255, 255, 255, 0.16);
	--material-highlight-soft: rgba(255, 255, 255, 0.07);
	--material-shadow: rgba(45, 42, 38, 0.095);
}


.accentera-scent-overlay[data-state-slug="boundless"]
.accentera-scent-module__material {
	--material-highlight: rgba(255, 255, 255, 0.18);
	--material-highlight-soft: rgba(255, 255, 255, 0.075);
	--material-shadow: rgba(40, 48, 50, 0.105);
}


/* ---------------------------------------------------------
   LIGHT LAYER
   --------------------------------------------------------- */

.accentera-scent-module__material-light {
	position: absolute;
	inset: 0;
	z-index: 2;

	pointer-events: none;

	opacity: 0;

	background:
		radial-gradient(
			circle at
			var(--material-light-x, 50%)
			var(--material-light-y, 50%),

			var(--material-highlight) 0%,
			var(--material-highlight-soft) 22%,
			transparent 52%
		);

	transition: opacity 450ms ease;
}


/* Extremely subtle cursor response */

@media (hover: hover) {

	.accentera-scent-module__material:hover
	.accentera-scent-module__material-light {
		opacity: 0.42;
	}
}


/* =========================================================
   ONE-TIME GALLERY LIGHT PASS
   ========================================================= */

.accentera-scent-module__material.is-light-pass
.accentera-scent-module__material-light {
	animation:
		accentera-material-light-pass
		1100ms
		cubic-bezier(.35, .05, .2, 1)
		forwards;
}


@keyframes accentera-material-light-pass {

	0% {
		opacity: 0;

		background-position: 150% 50%;
		background-size: 220% 100%;

		background-image:
			linear-gradient(
				110deg,

				transparent 25%,

				var(--material-shadow) 36%,

				var(--material-highlight-soft) 44%,

				var(--material-highlight) 49%,

				var(--material-highlight-soft) 54%,

				transparent 66%
			);
	}


	18% {
		opacity: 0.72;
	}


	72% {
		opacity: 0.48;
	}


	100% {
		opacity: 0;

		background-position: -50% 50%;
		background-size: 220% 100%;

		background-image:
			linear-gradient(
				110deg,

				transparent 25%,

				var(--material-shadow) 36%,

				var(--material-highlight-soft) 44%,

				var(--material-highlight) 49%,

				var(--material-highlight-soft) 54%,

				transparent 66%
			);
	}
}
/* ======================================
    Preserve reduced-motion accessibility
    ==================================== */
@media (prefers-reduced-motion: reduce) {

	.accentera-scent-module__material.is-light-pass
	.accentera-scent-module__material-light {
		animation: none;
	}

	.accentera-scent-module__material-light {
		transition: none;
	}
}
/* =========================================================
   AVAILABLE FORMS
   ========================================================= */

.accentera-scent-module__forms {
	margin-top: 44px;
}


.accentera-scent-module__forms-title {
	padding-bottom: 11px;

	border-bottom: 1px solid var(--ss-rule);
}


.accentera-scent-module__forms-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 14px;

	padding: 24px 0 26px;
}


.accentera-scent-module__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	min-width: 0;
	min-height: 94px;

	color: var(--ss-ink);
	text-decoration: none;
}

/* =========================================================
   AVAILABLE FORM ICONS
   ========================================================= */

.accentera-scent-module__form-icon {
	display: block;
	width: 40px;
	height: 48px;

	margin: 0 auto 7px;

	background-color: var(--ss-ink);

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: contain;
	mask-size: contain;

	opacity: 0.78;
}


/* CANDLE */

.accentera-scent-module__form-icon--candle {
	-webkit-mask-image: url("../svg/candle.svg");
	mask-image: url("../svg/candle.svg");
}


/* REED DIFFUSER */

.accentera-scent-module__form-icon--diffuser {
	-webkit-mask-image: url("../svg/diffuser.svg");
	mask-image: url("../svg/diffuser.svg");
}


/* HAND SOAP */

.accentera-scent-module__form-icon--hand-soap {
	-webkit-mask-image: url("../svg/hand-soap.svg");
	mask-image: url("../svg/hand-soap.svg");
}


/* PERFUME OIL */

.accentera-scent-module__form-icon--perfume-oil {
	-webkit-mask-image: url("../svg/perfume.svg");
	mask-image: url("../svg/perfume.svg");
}


/* LOTION */

.accentera-scent-module__form-icon--lotion {
	-webkit-mask-image: url("../svg/lotion.svg");
	mask-image: url("../svg/lotion.svg");
}
.accentera-scent-module__form {
	transition: opacity 180ms ease;
}

.accentera-scent-module__form:hover,
.accentera-scent-module__form:focus-visible {
	opacity: 0.78;
}


/* Icon Label */


.accentera-scent-module__form-label {
	font-family: var(--ss-raleway);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.accentera-scent-module__form.is-unavailable {
	opacity: 0.35;
}
/* =========================================================
   MAIN CTA
   ========================================================= */

.accentera-scent-module__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;

	width: min(100%, 590px);
	min-height: 62px;

	margin: 0 auto;

	padding: 15px 28px;

	background: var(--ss-charcoal);

	font-family: var(--ss-raleway);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.10em;
	text-align: center;
	text-transform: uppercase;

	color: #f7f5f1;
	text-decoration: none;

	transition:
		background-color 180ms ease,
		opacity 180ms ease;
}


.accentera-scent-module__cta:hover,
.accentera-scent-module__cta:focus-visible {
	background: #292826;
	color: #fff;
}


.accentera-scent-module__cta-arrow {
	font-size: 20px;
	font-weight: 300;
}


/* =========================================================
   BOTTOM STATE NAVIGATION
   ========================================================= */

.accentera-scent-module__state-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;

	min-height: 84px;

	padding: 0 clamp(34px, 4vw, 62px);

	border-top: 1px solid var(--ss-rule);
}


.accentera-scent-module__state-nav a {
	color: inherit;
	text-decoration: none;
}


.accentera-scent-module__state-nav-item > a {
	display: flex;
	align-items: center;
	gap: 16px;
}


.accentera-scent-module__state-nav-item--next {
	justify-self: end;
}


.accentera-scent-module__state-nav-item--next > a {
	text-align: right;
}


.accentera-scent-module__state-nav-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}


.accentera-scent-module__state-nav-label {
	font-family: var(--ss-raleway);
	font-size: 8px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


.accentera-scent-module__state-nav-name {
	font-family: var(--ss-raleway);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}


.accentera-scent-module__state-arrow {
	font-family: var(--ss-poppins);
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
}


.accentera-scent-module__state-nav-all a {
	font-family: var(--ss-raleway);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}


/* =========================================================
   FOCUS
   ========================================================= */

.accentera-scent-module a:focus-visible,
.accentera-scent-module button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}


/* =========================================================
   MEDIUM DESKTOP / SMALL LAPTOP
   Keep same composition, just tighten it
   ========================================================= */

@media (max-width: 1100px) {

	.accentera-scent-module__main {
		grid-template-columns: 40% 60%;
	}

	.accentera-scent-module__info {
		padding-left: 34px;
		padding-right: 30px;
	}

	.accentera-scent-module__exhibit {
		padding-left: 36px;
		padding-right: 36px;
	}

	.accentera-scent-module__title {
		font-size: 40px;
	}

	.accentera-scent-module__recognition {
		margin-bottom: 46px;
	}

	.accentera-scent-module__forms-grid {
		gap: 8px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.accentera-scent-module *,
	.accentera-scent-module *::before,
	.accentera-scent-module *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}
/* =========================================================
   SCENT STATE MODULE — DESKTOP REFINEMENT
   ========================================================= */

@media (min-width: 901px) {

	/* -----------------------------------------------------
	   OVERALL MODULE SIZE
	   ----------------------------------------------------- */

	.accentera-scent-overlay {
		--ss-module-width: 1120px;

		padding: 40px;
	}

	.accentera-scent-module {
		width: min(100%, var(--ss-module-width));
		max-height: calc(100vh - 50px);
	}


	/* Remove the oversized minimum height */

	.accentera-scent-module__main {
		grid-template-columns: 37% 63%;

		min-height: 0;
		padding: 50px 30px 0;
	}


	/* =====================================================
	   LEFT COLUMN
	   ===================================================== */

	.accentera-scent-module__info {
		padding:
			0px
			28px
			0px
			32px;
	}


	/* -----------------------------------------------------
	   STATE HEADER
	   Smaller name + wider tracking
	   ----------------------------------------------------- */

	.accentera-scent-module__header {
		padding-bottom: 10px;
	}


	.accentera-scent-module__number {
		margin-bottom: 5px;

		font-size: 10px;
	}


	.accentera-scent-module__title {
		margin-bottom: 5px !important;

		font-size: 28px;
		font-weight: 700;
		line-height: 1;

		letter-spacing: 0.22em;
	}


	.accentera-scent-module__subtitle {
		font-size: 15px;
		line-height: 1.3;
	}


	/* -----------------------------------------------------
	   COMPOSITION
	   ----------------------------------------------------- */

	.accentera-scent-module__composition {
		margin-top: 32px;
		margin-bottom: 5px;

		max-width: 330px;

		font-size: 13px;
		line-height: 1.6;
	}


	/* -----------------------------------------------------
	   RECOGNITION
	   ----------------------------------------------------- */

	.accentera-scent-module__recognition {
		grid-template-columns: 5px minmax(0, 1fr);
		column-gap: 16px;

		margin-top: 28px;
		margin-bottom: 46px;

		max-width: 345px;
	}


	.accentera-scent-module__recognition-rule {
		width: 5px;
		min-height: 78px;
	}


	.accentera-scent-module__recognition-copy {
		font-size: 14px;

		/* Much tighter than the previous 2em */
		line-height: 0.85;
	}


	/* =====================================================
	   SCENT NOTES
	   ===================================================== */

	.accentera-scent-module__section-title {
		font-size: 13px;
		letter-spacing: 0.26em;
	}


	.accentera-scent-module__notes
	.accentera-scent-module__section-title {
		padding-bottom: 10px;
	}


	.accentera-scent-module__note {
		padding: 7px 8px;

		font-size: 11px;
	}


	/* =====================================================
	   RIGHT COLUMN
	   ===================================================== */

	.accentera-scent-module__exhibit {
		padding:
			18px
			10px
			20px;
	}


	/* -----------------------------------------------------
	   MATERIAL
	   Slightly smaller and centered
	   ----------------------------------------------------- */

	.accentera-scent-module__material {
		width: 90%;
		max-width: 650px;

		margin-left: auto;
		margin-right: auto;

		aspect-ratio: 1.7 / 1;
	}


	/* =====================================================
	   AVAILABLE FORMS
	   Align with material width
	   ===================================================== */

	.accentera-scent-module__forms {
		width: 90%;
		max-width: 650px;

		margin:
			42px
			auto
			0;
	}


	.accentera-scent-module__forms-title {
		padding-bottom: 9px;
	}


	.accentera-scent-module__forms-grid {
		gap: 10px;

		padding:
			18px
			0
			20px;
	}


	.accentera-scent-module__form {
		min-height: 82px;
	}


	.accentera-scent-module__form-icon {
		width: 40px;
		height: 48px;

		margin-bottom: 7px;
	}


	.accentera-scent-module__form-label {
		font-size: 9px;
		letter-spacing: 0.07em;
	}


	/* =====================================================
	   CTA
	   ===================================================== */

	.accentera-scent-module__cta {
		width: 100%;
		min-height: 52px;

		padding: 12px 24px;

		font-size: 11px;
	}


	.accentera-scent-module__cta-arrow {
		font-size: 18px;
	}


	/* =====================================================
	   SECONDARY NAV
	   ===================================================== */

	.accentera-scent-module__secondary-nav {
		margin-top: 28px;
	}


	.accentera-scent-module__secondary-link {
		min-height: 50px;

		padding: 8px 10px;

		font-size: 9px;
	}


	/* =====================================================
	   BOTTOM NAVIGATION
	   ===================================================== */

	.accentera-scent-module__state-nav {
		min-height: 68px;

		padding:
			0
			42px;
	}


	.accentera-scent-module__state-nav-name {
		font-size: 11px;
	}


	.accentera-scent-module__state-nav-all a {
		font-size: 10px;
	}
}
/* =========================================================
   ACCENTERA — SCENT STATE MODULE
   MOBILE EXHIBIT LAYOUT
   ========================================================= */

@media (max-width: 767px) {

	/* -----------------------------------------------------
	   OVERLAY / PAPER SHEET
	   ----------------------------------------------------- */

	.accentera-scent-overlay {
		align-items: flex-start;

		padding: 8px;

		--ss-module-width: 100%;
	}


	.accentera-scent-module {
		width: 100%;
		max-height: calc(100dvh - 16px);

		border-radius: 8px;

		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}


	/* -----------------------------------------------------
	   CLOSE
	   ----------------------------------------------------- */

	.accentera-scent-module__close {
		top: 17px;
		right: 18px;

		font-size: 9px;
		letter-spacing: 0.10em;
	}


	.accentera-scent-module__close-x {
		font-size: 12px;
	}


	/* =====================================================
	   MOBILE CONTENT ORDER
	   
	   1  Header
	   2  Material
	   3  Composition
	   4  Recognition
	   5  Notes
	   6  Forms + CTA
	   7  Secondary Navigation
	   ===================================================== */

	.accentera-scent-module__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr);

		min-height: 0;

		padding:
			54px
			20px
			0;
	}


	/*
	 * Flatten the two desktop column wrappers.
	 *
	 * This lets their children participate in one mobile
	 * grid without duplicating content or changing PHP.
	 */

	.accentera-scent-module__info,
	.accentera-scent-module__exhibit {
		display: contents;
	}


	/* =====================================================
	   1 — STATE NUMBER / NAME / SUBTITLE
	   ===================================================== */

	.accentera-scent-module__header {
		order: 1;

		width: 100%;

		padding: 0 0 15px;

		border-bottom: 1px solid var(--ss-rule);
	}


	.accentera-scent-module__number {
		margin: 0 0 6px;

		font-size: 9px;
		line-height: 1.2;
		letter-spacing: 0.05em;
	}


	.accentera-scent-module__title {
		margin: 0 0 5px !important;

		font-size: 25px;
		font-weight: 500;
		line-height: 1;

		letter-spacing: 0.23em;
	}


	.accentera-scent-module__subtitle {
		margin: 0;

		font-size: 13px;
		line-height: 1.35;
	}


	/* =====================================================
	   2 — MATERIAL IMAGE
	   ===================================================== */

	.accentera-scent-module__material {
		order: 2;

		width: 100%;
		max-width: none;

		margin:
			22px
			0
			0;

		aspect-ratio: 1.72 / 1;

		box-shadow:
			0 2px 3px rgba(20, 18, 15, 0.16),
			0 8px 16px rgba(20, 18, 15, 0.11),
			0 18px 27px rgba(20, 18, 15, 0.06);
	}


	/* =====================================================
	   3 — COMPOSITION
	   ===================================================== */

	.accentera-scent-module__composition {
		order: 3;

		width: 100%;
		max-width: none;

		margin:
			30px
			0
			0;

		font-size: 13px;
		line-height: 1.55;
	}


	/* =====================================================
	   4 — RECOGNITION
	   ===================================================== */

	.accentera-scent-module__recognition {
		order: 4;

		display: grid;
		grid-template-columns: 4px minmax(0, 1fr);
		column-gap: 14px;

		width: 100%;
		max-width: none;

		margin:
			26px
			0
			40px;
	}


	.accentera-scent-module__recognition-rule {
		width: 4px;
		min-height: 0;

		background: var(--ss-recognition-rule);
	}


	.accentera-scent-module__recognition-copy {
		align-self: center;

		font-size: 13px;
		line-height: 1;

		text-align: left;
	}


	/* =====================================================
	   5 — SCENT NOTES
	   Printed inline specimen-label treatment
	   ===================================================== */

	.accentera-scent-module__notes {
		order: 5;

		width: 100%;

		margin: 0 0 40px;
	}


	.accentera-scent-module__notes
	.accentera-scent-module__section-title {
		padding-bottom: 9px;

		font-size: 11px;
		letter-spacing: 0.25em;

		border-bottom: 1px solid var(--ss-rule);
	}


	.accentera-scent-module__notes-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		row-gap: 8px;

		margin: 0;
		padding: 11px 0 0;
	}


	.accentera-scent-module__note {
		position: relative;

		display: inline-flex;
		align-items: center;

		margin: 0;
		padding:
			0
			10px;

		border: 0;

		font-size: 10px;
		line-height: 1.4;

		white-space: nowrap;
	}


	.accentera-scent-module__note:first-child {
		padding-left: 0;
	}


	/* Thin printed dividers between notes */

	.accentera-scent-module__note:not(:first-child)::before {
		content: "";

		position: absolute;
		left: 0;
		top: 15%;

		width: 1px;
		height: 70%;

		background: var(--ss-rule-light);
	}


	/* =====================================================
	   6 — AVAILABLE FORMS
	   ===================================================== */

	.accentera-scent-module__forms {
		order: 6;

		width: 100%;
		max-width: none;

		margin: 0;
	}


	.accentera-scent-module__forms-title {
		padding-bottom: 9px;

		font-size: 11px;
		letter-spacing: 0.25em;

		border-bottom: 1px solid var(--ss-rule);
	}


	/* Keep all five forms on one exhibition row */

	.accentera-scent-module__forms-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));

		gap: 3px;

		padding:
			17px
			0
			18px;
	}


	.accentera-scent-module__form {
		min-height: 66px;
	}


	.accentera-scent-module__form-icon {
		width: 28px;
		height: 35px;

		margin-bottom: 6px;
	}


	.accentera-scent-module__form-label {
		font-size: 7px;
		line-height: 1.2;
		letter-spacing: 0.04em;

		white-space: normal;
	}


	/* -----------------------------------------------------
	   CTA
	   ----------------------------------------------------- */

	.accentera-scent-module__cta {
		width: 100%;
		min-height: 48px;

		margin: 0;

		padding:
			11px
			18px;

		gap: 14px;

		font-size: 9px;
		line-height: 1.2;
		letter-spacing: 0.08em;
	}


	.accentera-scent-module__cta-arrow {
		font-size: 15px;
	}


	/* =====================================================
	   7 — COLLECTION / ALL FORMS
	   ===================================================== */

	.accentera-scent-module__secondary-nav {
		order: 7;

		display: grid;
		grid-template-columns: 1fr 1fr;

		width: 100%;

		margin:
			34px
			0
			0;

		border-top: 1px solid var(--ss-rule);
		border-bottom: 1px solid var(--ss-rule);
	}


	.accentera-scent-module__secondary-link {
		min-height: 48px;

		padding:
			8px
			9px;

		font-size: 8px;
		line-height: 1.25;
		letter-spacing: 0.08em;
	}


	/* =====================================================
	   BOTTOM STATE NAVIGATION
	   ===================================================== */

	.accentera-scent-module__state-nav {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			auto
			minmax(0, 1fr);

		align-items: center;

		min-height: 66px;

		margin-top: 0;

		padding:
			0
			17px;

		border-top: 0;
	}


	.accentera-scent-module__state-nav-item > a {
		gap: 7px;
	}


	.accentera-scent-module__state-nav-label {
		font-size: 6px;
		letter-spacing: 0.08em;
	}


	.accentera-scent-module__state-nav-name {
		font-size: 8px;
		letter-spacing: 0.18em;
	}


	.accentera-scent-module__state-arrow {
		font-size: 15px;
	}


	.accentera-scent-module__state-nav-all {
		padding:
			0
			8px;

		text-align: center;
	}


	.accentera-scent-module__state-nav-all a {
		font-size: 8px;
		line-height: 1.25;
		letter-spacing: 0.09em;
	}


	/* NEXT stays aligned to outer edge */

	.accentera-scent-module__state-nav-item--next {
		justify-self: end;
	}


	/* =====================================================
	   MOBILE INTERACTION
	   ===================================================== */

	/*
	 * Touch devices don't need the ongoing pointer-light
	 * response. The delayed one-time gallery pass remains.
	 */

	.accentera-scent-module__material:hover
	.accentera-scent-module__material-light {
		opacity: 0;
	}

}
/* =========================================================
   NARROW PHONES
   Preserve the five-form exhibition row
   ========================================================= */

@media (max-width: 380px) {

	.accentera-scent-module__main {
		padding-left: 16px;
		padding-right: 16px;
	}


	/* STATE NAME */

	.accentera-scent-module__title {
		font-size: 22px;
		letter-spacing: 0.19em;
	}


	/* INLINE SCENT NOTES */

	.accentera-scent-module__notes-list {
		row-gap: 7px;
	}

	.accentera-scent-module__note {
		padding-left: 8px;
		padding-right: 8px;

		font-size: 9px;
	}

	.accentera-scent-module__note:first-child {
		padding-left: 0;
	}


	/* AVAILABLE FORMS */

	.accentera-scent-module__forms-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));

		gap: 1px;

		padding-top: 15px;
		padding-bottom: 16px;
	}

	.accentera-scent-module__form {
		min-width: 0;
		min-height: 60px;
	}

	.accentera-scent-module__form-icon {
		width: 24px;
		height: 31px;

		margin-bottom: 5px;
	}

	.accentera-scent-module__form-label {
		font-size: 6.5px;
		line-height: 1.15;
		letter-spacing: 0.025em;

		overflow-wrap: normal;
	}


	/* CTA */

	.accentera-scent-module__cta {
		min-height: 45px;

		padding-left: 12px;
		padding-right: 12px;

		font-size: 8px;
	}


	/* FOOTER NAV */

	.accentera-scent-module__state-nav {
		padding-left: 12px;
		padding-right: 12px;
	}

	.accentera-scent-module__state-nav-name {
		font-size: 7px;
	}

	.accentera-scent-module__state-nav-all a {
		font-size: 7px;
	}
}

.accentera-scent-module__form-annotation[hidden],
.accentera-scent-module__cta[hidden] {
	display: none !important;
}

.accentera-scent-module__material-image.is-changing {
	opacity: 0.25;
}

.accentera-scent-module__material-image {
	transition: opacity 180ms ease;
}

.accentera-scent-module__form.is-selected {
	opacity: 0.55;
}

/* =========================================================
   SCENT STATE MODULE
   INTERACTIVE FORM PREVIEW
   ========================================================= */


/* ---------------------------------------------------------
   PREVIEW IMAGE
   Material swatch → selected product variation
   --------------------------------------------------------- */

.accentera-scent-module__material-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	opacity: 1;

	transition:
		opacity 180ms ease,
		transform 280ms ease;
}


.accentera-scent-module__material-image.is-changing {
	opacity: 0.18;

	transform: scale(0.997);
}



/* =========================================================
   SELECTED FORM ANNOTATION
   ========================================================= */

.accentera-scent-module__form-annotation {
	width: 90%;
	max-width: 650px;

	margin:
		15px
		auto
		0;

	padding: 0;
}


.accentera-scent-module__form-annotation[hidden] {
	display: none !important;
}


/* Form name */

.accentera-scent-module__form-annotation-name {
	margin: 0 0 3px;

	font-family: "Raleway", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: #252422;
}


/* Form subtitle */

.accentera-scent-module__form-annotation-copy {
	margin: 0;

	font-family: "Poppins", sans-serif;
	font-size: 11px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;

	color: #252422;
}



/* =========================================================
   AVAILABLE FORMS
   ========================================================= */


/*
 * Preserve the existing five-column grid.
 */

.accentera-scent-module__forms-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 10px;
}


/* ---------------------------------------------------------
   FORM SELECTOR
   Reset theme button behavior
   --------------------------------------------------------- */

.accentera-scent-module
.accentera-scent-module__form {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 112px;

	margin: 0 !important;
	padding:
		13px
		7px
		10px !important;

	border: 1px solid rgba(35, 35, 35, 0.13) !important;
	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	font: inherit;
	color: #252422 !important;

	text-align: center;

	cursor: pointer;

	opacity: 1;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		opacity 160ms ease,
		transform 160ms ease;
}


/* Remove theme hover button treatment */

.accentera-scent-module
.accentera-scent-module__form:hover,
.accentera-scent-module
.accentera-scent-module__form:focus-visible {
	background: #d8d0c5 !important;
	color: #252422 !important;

	border-color: rgba(35, 35, 35, 0.30) !important;

	box-shadow: none !important;
}


/* ---------------------------------------------------------
   SELECTED FORM
   Quiet archival-selection treatment
   --------------------------------------------------------- */

.accentera-scent-module
.accentera-scent-module__form.is-selected {
	background: #d8d0c5 !important;

	border-color: rgba(35, 35, 35, 0.34) !important;

	color: #252422 !important;
}


/*
 * Thin dark marker rather than conventional
 * ecommerce selected-button styling.
 */

.accentera-scent-module
.accentera-scent-module__form.is-selected::after {
	content: "";

	position: absolute;
	left: -1px;
	right: -1px;
	bottom: -1px;

	height: 3px;

	background: #2d2c2a;
}



/* =========================================================
   FORM ICON
   ========================================================= */

.accentera-scent-module__form-icon {
	display: block;

	width: 31px;
	height: 31px;

	margin: 0 auto 9px;

	background-color: currentColor;

	opacity: 0.82;
}


.accentera-scent-module__form.is-selected
.accentera-scent-module__form-icon {
	opacity: 1;
}



/* =========================================================
   FORM LABEL
   ========================================================= */

.accentera-scent-module__form-label {
	display: block;

	max-width: 100%;

	font-family: "Raleway", sans-serif;
	font-size: 8px;
	font-weight: 500;
	line-height: 1.25;

	letter-spacing: 0.07em;
	text-transform: uppercase;

	color: inherit;
}



/* =========================================================
   PRODUCT CTA
   Hidden until a Form is selected
   ========================================================= */

.accentera-scent-module__cta[hidden] {
	display: none !important;
}


.accentera-scent-module__cta {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 22px;

	width: 66%;
	min-height: 42px;

	margin:
		10px
		auto
		0;

	padding:
		10px
		20px;

	background: #373633;

	font-family: "Raleway", sans-serif;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;

	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;

	color: #f5f2ed !important;
	text-decoration: none !important;

	transition:
		background-color 160ms ease,
		opacity 160ms ease;
}


.accentera-scent-module__cta:hover,
.accentera-scent-module__cta:focus-visible {
	background: #2c2b29;

	color: #fff !important;

	opacity: 0.94;
}


.accentera-scent-module__cta-arrow {
	font-family: "Poppins", sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1;
}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.accentera-scent-module__form:focus-visible {
	outline: 1px solid #252422 !important;
	outline-offset: 3px;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	/* -----------------------------------------------------
	   IMAGE
	   ----------------------------------------------------- */

	.accentera-scent-module__material-image {
		width: 100%;
		height: 100%;

		object-fit: cover;
	}


	/* -----------------------------------------------------
	   FORM ANNOTATION

	   On mobile this stays directly attached to the
	   selected product image.
	   ----------------------------------------------------- */

	.accentera-scent-module__form-annotation {
		max-width: 92%;

		margin-top: 14px;
	}


	.accentera-scent-module__form-annotation-name {
		margin-bottom: 4px;

		font-size: 9px;
		letter-spacing: 0.15em;
	}


	.accentera-scent-module__form-annotation-copy {
		font-size: 10px;
		line-height: 1.5;
	}


	/* -----------------------------------------------------
	   FIVE FORMS
	   Keep all five visible in one row
	   ----------------------------------------------------- */

	.accentera-scent-module__forms-grid {
		grid-template-columns:
			repeat(5, minmax(0, 1fr));

		gap: 5px;
	}


	.accentera-scent-module
	.accentera-scent-module__form {
		min-height: 78px;

		padding:
			9px
			3px
			7px !important;
	}


	.accentera-scent-module__form-icon {
		width: 24px;
		height: 24px;

		margin-bottom: 6px;
	}


	.accentera-scent-module__form-label {
		font-size: 6.5px;
		line-height: 1.2;
		letter-spacing: 0.035em;
	}

/* =========================================================
   MOBILE — KEEP FORM ANNOTATION WITH PRODUCT IMAGE
   ========================================================= */

@media (max-width: 767px) {

	/*
	 * Match this order to the existing mobile order
	 * used by the material / preview image container.
	 *
	 * Image comes first in the DOM, annotation second,
	 * so equal order values preserve:
	 *
	 * IMAGE
	 * CANDLE
	 * For intentional moments.
	 */

	.accentera-scent-module__form-annotation {
		order: 2;
		width: 100%;
		margin-left: 0 !important;
	}

}

	/* -----------------------------------------------------
	   CTA
	   ----------------------------------------------------- */

	.accentera-scent-module__cta {
		width: 100%;
		min-height: 45px;

		margin-top: 28px;

		padding:
			10px
			14px;

		font-size: 9px;
		letter-spacing: 0.06em;
	}


	.accentera-scent-module__cta-arrow {
		font-size: 15px;
	}

}



/* =========================================================
   NARROW PHONES
   ========================================================= */

@media (max-width: 380px) {

	.accentera-scent-module__forms-grid {
		gap: 3px;
	}


	.accentera-scent-module
	.accentera-scent-module__form {
		min-height: 72px;

		padding:
			8px
			2px
			6px !important;
	}


	.accentera-scent-module__form-icon {
		width: 21px;
		height: 21px;
	}


	.accentera-scent-module__form-label {
		font-size: 6px;
		letter-spacing: 0.02em;
	}


	.accentera-scent-module__form-annotation {
		width: 100%;
	}


	.accentera-scent-module__cta {
		font-size: 8px;
	}

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.accentera-scent-module__material-image,
	.accentera-scent-module__form,
	.accentera-scent-module__cta {
		transition-duration: 0.01ms !important;
	}

}