/* =========================================================================
   DecantQ Home
   Same tokens and type as the product, cart and checkout pages (tokens.css).
   The kit reset, buttons, the drawn vial and the product card live in
   catalog.css, shared with the shop; this file is the home-only layout.
   Scoped to .dq-home.
   ====================================================================== */

/* Let the page run edge to edge (Hello boxes plain pages at 1140px). */
body.dq-home-page #content.site-main,
body.dq-home-page .site-main .page-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
body.dq-home-page {
	overflow-x: clip;
}

.dq-home {
	--dq-gutter: clamp(16px, 3vw, 32px);
	--dq-space: clamp(64px, 9vw, 120px);
	box-sizing: border-box;
	color: var(--dq-ink);
	font-size: 16px;
	line-height: 1.55;
}
/* Shared container */
.dq-hero,
.dq-section,
.dq-band__inner,
.dq-final {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--dq-gutter);
}

/* ---------- Hero ---------- */

.dq-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	padding-block: clamp(32px, 6vw, 88px) var(--dq-space);
}
.dq-home.dq-home .dq-hero__title {
	max-width: 13ch;
	margin: 0;
	font-family: var(--dq-display);
	font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.75rem);
	font-weight: 500;
	line-height: 1.02;
	color: var(--dq-ink);
	text-wrap: balance;
}
html:not([dir="rtl"]) .dq-home.dq-home .dq-hero__title {
	letter-spacing: -0.02em;
}
.dq-home.dq-home .dq-hero__lead {
	max-width: 46ch;
	margin: 24px 0 0;
	font-size: clamp(16px, 0.95rem + 0.3vw, 18.5px);
	line-height: 1.65;
	color: var(--dq-muted);
}
.dq-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.dq-hero__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: clamp(320px, 38vw, 540px);
	padding: 40px 24px 70px;
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(60% 55% at 50% 72%, rgba(200, 156, 76, 0.28), rgba(200, 156, 76, 0) 70%),
		var(--dq-panel);
}
.dq-hero__stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: clamp(18px, 3vw, 38px);
}
.dq-hero__shelf {
	position: absolute;
	right: 12%;
	left: 12%;
	bottom: 52px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(43, 33, 27, 0.2), rgba(43, 33, 27, 0));
}

/* ---------- Sections ---------- */

.dq-section {
	padding-block: 0 var(--dq-space);
}
.dq-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}
.dq-section__head--stack {
	flex-direction: column;
	align-items: flex-start;
}
.dq-home.dq-home .dq-section__title {
	margin: 0;
	font-family: var(--dq-display);
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
	font-weight: 500;
	line-height: 1.08;
	color: var(--dq-ink);
	text-wrap: balance;
}
html:not([dir="rtl"]) .dq-home.dq-home .dq-section__title {
	letter-spacing: -0.012em;
}
.dq-home.dq-home .dq-section__title--center {
	text-align: center;
}
.dq-home.dq-home .dq-section__text {
	max-width: 60ch;
	margin: 0;
	font-size: 16px;
	color: var(--dq-muted);
}

/* ---------- How it works ---------- */

.dq-band {
	margin-bottom: var(--dq-space);
	padding-block: clamp(56px, 8vw, 104px);
	background: var(--dq-panel);
	scroll-margin-top: 100px;
}
.dq-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(32px, 4vw, 56px);
	counter-reset: none;
}
.dq-step {
	text-align: center;
}
.dq-home.dq-home .dq-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--dq-gold);
	border-radius: 50%;
	font-family: var(--dq-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--dq-amber);
	font-variant-numeric: tabular-nums;
}
.dq-home.dq-home .dq-step__title {
	margin: 20px 0 8px;
	font-family: var(--dq-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-step__text {
	max-width: 32ch;
	margin: 0 auto;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--dq-muted);
}

/* ---------- Size guide ---------- */

.dq-sizes-guide {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 20px);
}
.dq-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 18px 26px;
	border: 1px solid var(--dq-line);
	border-radius: 20px;
	background: #fff;
	text-align: center;
}
.dq-size-card__vial {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 152px; /* tallest vial: body + cap (0.42) + collar at 100px */
	margin-bottom: 18px;
}
.dq-home.dq-home .dq-size-card__ml {
	font-family: var(--dq-display);
	font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-size-card__sprays {
	margin-top: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-size-card__use {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dq-muted);
}

/* ---------- Categories ---------- */

.dq-cats {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.dq-cats--2 {
	--cols: 2;
}
.dq-cats--3 {
	--cols: 3;
}
.dq-cats--4 {
	--cols: 4;
}
.dq-home .dq-cat__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--dq-line);
	border-radius: 22px;
	background: #fff;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dq-home .dq-cat__link:hover {
	border-color: var(--dq-ink);
	box-shadow: 0 16px 40px -28px rgba(43, 33, 27, 0.55);
}

/* The product photos come on white backgrounds: sit them on the panel colour,
   contained rather than cropped, so no bottle is cut off. */
.dq-cat__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 4;
	padding: clamp(16px, 2.5vw, 28px);
	background:
		radial-gradient(58% 52% at 50% 62%, rgba(200, 156, 76, 0.18), rgba(200, 156, 76, 0) 72%),
		var(--dq-panel);
}
.dq-home .dq-cat__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dq-cat__link:hover .dq-cat__img {
	transform: scale(1.05);
}
.dq-cat__placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.dq-home.dq-home .dq-cat__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px clamp(16px, 2vw, 22px);
	background: #fff;
	color: var(--dq-ink);
}
.dq-cat__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dq-home.dq-home .dq-cat__name {
	font-family: var(--dq-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-cat__count {
	font-size: 13.5px;
	color: var(--dq-muted);
	font-variant-numeric: tabular-nums;
}
.dq-cat__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dq-line);
	border-radius: 999px;
	color: var(--dq-amber);
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dq-cat__link:hover .dq-cat__arrow {
	border-color: var(--dq-amber);
	background: var(--dq-amber-tint);
	transform: translateX(-3px);
}

/* ---------- Brands ---------- */

.dq-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}
.dq-home.dq-home .dq-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 16px;
	border: 1px solid var(--dq-line);
	border-radius: 16px;
	background: #fff;
	height: 100%;
	font-family: var(--dq-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--dq-ink);
	text-align: center;
	text-wrap: balance;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dq-home.dq-home .dq-brand:hover {
	border-color: var(--dq-ink);
	background: var(--dq-panel);
}

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

.dq-final {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--dq-space);
	text-align: center;
}
.dq-final > * {
	max-width: 640px;
}
.dq-final__vial {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 96px;
}
.dq-home.dq-home .dq-final__title {
	margin: 22px 0 10px;
	font-family: var(--dq-display);
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
	font-weight: 500;
	line-height: 1.08;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-final__text {
	margin: 0;
	font-size: 17px;
	color: var(--dq-muted);
}
.dq-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
	.dq-sizes-guide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dq-cats--3,
	.dq-cats--4 {
		--cols: 2;
	}
}
@media (max-width: 859px) {
	.dq-hero {
		grid-template-columns: minmax(0, 1fr);
	}
	.dq-home.dq-home .dq-hero__title {
		max-width: 16ch;
	}
	.dq-hero__visual {
		min-height: 300px;
	}
	.dq-steps {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
		margin-inline: auto;
	}
}
@media (max-width: 599px) {
	.dq-hero__actions .dq-btn {
		flex: 1 1 auto;
	}
	.dq-hero__visual {
		min-height: 0;
		height: 300px;
		padding: 0 0 46px;
	}
	.dq-hero__stage {
		transform: scale(0.62);
		transform-origin: 50% 100%;
	}
	.dq-hero__shelf {
		bottom: 34px;
	}
	.dq-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.dq-home.dq-home .dq-brand {
		min-height: 76px;
		font-size: 1.05rem;
	}
	.dq-cats {
		--cols: 2 !important;
	}
	.dq-cat__media {
		aspect-ratio: 1;
		padding: 12px;
	}
	.dq-home.dq-home .dq-cat__label {
		gap: 8px;
		padding: 13px 14px;
	}
	.dq-home.dq-home .dq-cat__name {
		font-size: 1.15rem;
	}
	.dq-home.dq-home .dq-cat__count {
		font-size: 12.5px;
	}
	.dq-cat__arrow {
		width: 32px;
		height: 32px;
	}
	.dq-sizes-guide {
		gap: 10px;
	}
	.dq-size-card {
		padding: 22px 12px;
	}
}

/* ---------- Hero photo (optional; sits behind the drawn vials) ---------- */

.dq-hero__visual.has-photo {
	position: relative;
	padding: 0;
	overflow: hidden;
}
.dq-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}
.dq-hero__visual.has-photo .dq-hero__stage,
.dq-hero__visual.has-photo .dq-hero__shelf {
	display: none;
}

/* ---------- Photo band ---------- */

.dq-photo-band {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	max-width: 1240px;
	margin: 0 auto var(--dq-space);
	padding-inline: var(--dq-gutter);
}
.dq-photo-band__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 28px;
	background: var(--dq-panel);
}
.dq-photo-band__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}
.dq-photo-band__text .dq-btn {
	margin-top: 26px;
}
.dq-home.dq-home .dq-photo-band__text .dq-section__text {
	margin-top: 16px;
	font-size: 16.5px;
	line-height: 1.65;
}
@media (max-width: 859px) {
	.dq-photo-band {
		grid-template-columns: minmax(0, 1fr);
	}
	.dq-photo-band__media {
		aspect-ratio: 16 / 11;
	}
}

/* =========================================================================
   v2.6 sections: brand strip, scrolling rows, scent bento, occasions, FAQ
   ====================================================================== */

/* Six tones from the palette, used by the scent and occasion cards */
.dq-home .tone-amber { --t-bg: #f4e3cf; --t-glow: rgba(200, 120, 50, 0.38); --t-title: #7a3713; --t-dot: #b8611f; }
.dq-home .tone-rose  { --t-bg: #f6e4df; --t-glow: rgba(196, 110, 120, 0.32); --t-title: #803f55; --t-dot: #b35a73; }
.dq-home .tone-sand  { --t-bg: #efe6da; --t-glow: rgba(170, 130, 90, 0.3); --t-title: #5b4230; --t-dot: #9a7552; }
.dq-home .tone-gold  { --t-bg: #f4ebd4; --t-glow: rgba(200, 156, 76, 0.42); --t-title: #74551a; --t-dot: #b88a2e; }
.dq-home .tone-sage  { --t-bg: #e7ebe0; --t-glow: rgba(110, 140, 100, 0.3); --t-title: #3f5436; --t-dot: #6b8a5c; }
.dq-home .tone-ink   { --t-bg: #2b211b; --t-glow: rgba(200, 156, 76, 0.34); --t-title: #f3e6d4; --t-dot: #c89c4c; }

/* ---------- Brand strip ---------- */

.dq-brandstrip {
	max-width: 1240px;
	margin: 0 auto var(--dq-space);
	padding: 18px var(--dq-gutter);
	border-block: 1px solid var(--dq-line);
}
.dq-home.dq-home .dq-brandstrip__label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dq-muted);
}
.dq-brandstrip__list {
	display: flex;
	gap: clamp(22px, 3vw, 44px);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.dq-brandstrip__list::-webkit-scrollbar {
	display: none;
}
.dq-brandstrip__list li {
	flex: none;
	scroll-snap-align: start;
}
.dq-home.dq-home .dq-brandstrip__item {
	font-family: var(--dq-display);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 500;
	white-space: nowrap;
	color: var(--dq-muted);
	transition: color 0.2s ease;
}
.dq-home.dq-home .dq-brandstrip__item:hover {
	color: var(--dq-ink);
}

/* ---------- Scrolling rows ---------- */

.dq-row .dq-section__head {
	align-items: flex-end;
}
.dq-row__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dq-row__nav .dq-link-arrow {
	margin-inline-end: 8px;
}
.dq-home.dq-home .dq-row__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--dq-line);
	border-radius: 999px;
	background: #fff;
	color: var(--dq-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.dq-home.dq-home .dq-row__btn:hover:not(:disabled) {
	border-color: var(--dq-ink);
}
.dq-home.dq-home .dq-row__btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.dq-row.is-static .dq-row__btn {
	display: none;
}
.dq-home .dq-row__btn:focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 2px;
}
.dq-home .dq-row__track.dq-grid,
.dq-home .dq-occ__track {
	display: flex;
	gap: clamp(14px, 2vw, 22px);
	margin: 0;
	padding: 4px 2px 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	scrollbar-width: none;
}
.dq-home .dq-row__track::-webkit-scrollbar,
.dq-home .dq-occ__track::-webkit-scrollbar {
	display: none;
}
.dq-home .dq-row__track > .dq-card {
	flex: 0 0 calc((100% - 3 * clamp(14px, 2vw, 22px)) / 4);
	scroll-snap-align: start;
}
@media (max-width: 1023px) {
	.dq-home .dq-row__track > .dq-card {
		flex-basis: calc((100% - 2 * clamp(14px, 2vw, 22px)) / 3);
	}
}
@media (max-width: 719px) {
	/* one and a half cards: the next one peeks in, so people know to swipe */
	.dq-home .dq-row__track > .dq-card {
		flex-basis: 64%;
	}
	.dq-home .dq-row__btn {
		display: none;
	}
	.dq-home .dq-row__track.dq-grid,
	.dq-home .dq-occ__track {
		margin-inline: calc(-1 * var(--dq-gutter));
		padding-inline: var(--dq-gutter);
		scroll-padding-inline: var(--dq-gutter);
	}
}

/* ---------- Scent family bento ---------- */

.dq-bento {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	grid-auto-rows: minmax(190px, auto);
	gap: clamp(12px, 1.6vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-bento__cell {
	margin: 0;
}
.dq-bento__cell.is-feature {
	grid-row: span 2;
}
.dq-bento--6 .dq-bento__cell:nth-child(6) {
	grid-column: 1 / -1;
}
.dq-bento--6 .dq-bento__cell:nth-child(6) .dq-bento__card {
	min-height: 150px;
}
.dq-home .dq-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	height: 100%;
	padding: clamp(18px, 2vw, 26px);
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(60% 70% at 85% 20%, var(--t-glow), transparent 70%),
		var(--t-bg);
	color: var(--t-title);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.dq-home .dq-bento__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -26px rgba(43, 33, 27, 0.6);
}
.dq-bento__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.dq-home.dq-home .dq-bento__count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	font-weight: 600;
	color: #2b211b;
	font-variant-numeric: tabular-nums;
}
.dq-bento__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t-dot);
}
.dq-bento__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--t-title);
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.dq-home .dq-bento__card:hover .dq-bento__arrow {
	background: rgba(255, 255, 255, 0.9);
	transform: translateX(-3px);
}
.dq-home .tone-ink .dq-bento__arrow {
	background: rgba(255, 255, 255, 0.12);
	color: #f3e6d4;
}
.dq-home.dq-home .dq-bento__title {
	font-family: var(--dq-display);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
	font-weight: 500;
	line-height: 1.05;
	color: var(--t-title);
}
.dq-home.dq-home .is-feature .dq-bento__title {
	font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem);
}
.dq-home.dq-home .dq-bento__text {
	max-width: 34ch;
	margin-top: -8px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--t-title);
	opacity: 0.85;
}
.dq-home .dq-bento__card:focus-visible,
.dq-home .dq-occ__card:focus-visible {
	outline: 3px solid var(--dq-amber);
	outline-offset: 3px;
}
@media (max-width: 719px) {
	.dq-bento {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: minmax(140px, auto);
	}
	.dq-bento__cell.is-feature {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.dq-bento__cell.is-feature .dq-bento__card {
		min-height: 200px;
	}
	.dq-bento__arrow {
		width: 34px;
		height: 34px;
	}
	.dq-home.dq-home .dq-bento__count {
		padding: 6px 10px;
		font-size: 12px;
	}
}

/* ---------- Occasions ---------- */

.dq-occ__item {
	flex: 0 0 min(380px, 82%);
	margin: 0;
	scroll-snap-align: start;
}
.dq-home .dq-occ__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	min-height: 300px;
	padding: clamp(20px, 2.4vw, 30px);
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(70% 60% at 80% 15%, var(--t-glow), transparent 70%),
		linear-gradient(-160deg, var(--t-bg), color-mix(in srgb, var(--t-bg) 70%, #2b211b));
	color: var(--t-title);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dq-home .dq-occ__card:hover {
	transform: translateY(-3px);
}
.dq-home .dq-occ__card.has-photo {
	color: #fff;
}
.dq-occ__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}
.dq-occ__card.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(-180deg, rgba(43, 33, 27, 0.05) 20%, rgba(43, 33, 27, 0.82));
}
.dq-occ__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dq-home.dq-home .dq-occ__title {
	font-family: var(--dq-display);
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
}
.dq-home.dq-home .dq-occ__text {
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
	opacity: 0.88;
}
.dq-home.dq-home .dq-occ__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
}
.dq-home .dq-occ__cta svg {
	transition: transform 0.2s ease;
}
.dq-home .dq-occ__card:hover .dq-occ__cta svg {
	transform: translateX(-3px);
}

/* ---------- FAQ ---------- */

.dq-home-faq__list {
	max-width: 860px;
	margin-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--dq-line);
}
.dq-home-faq__item {
	border-bottom: 1px solid var(--dq-line);
}
.dq-home.dq-home .dq-home-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	font-family: var(--dq-display);
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--dq-ink);
	list-style: none;
	cursor: pointer;
}
.dq-home-faq__item summary::-webkit-details-marker {
	display: none;
}
.dq-home-faq__item summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-left: 1.8px solid var(--dq-muted);
	border-bottom: 1.8px solid var(--dq-muted);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}
.dq-home-faq__item[open] summary::after {
	margin-top: 5px;
	transform: rotate(-225deg);
}
.dq-home.dq-home .dq-home-faq__item p {
	max-width: 70ch;
	margin: 0;
	padding: 0 0 22px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--dq-muted);
}
.dq-home .dq-home-faq__item summary:focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 3px;
}

@media (max-width: 719px) {
	/* phones swipe; the arrows are for mouse users */
	.dq-home.dq-home .dq-row__btn {
		display: none;
	}
	/* small scent cards: count on one line, arrow only on the large card */
	.dq-home.dq-home .dq-bento__count {
		white-space: nowrap;
	}
	.dq-bento__cell:not(.is-feature):not(:nth-child(6)) .dq-bento__arrow {
		display: none;
	}
}

/* =========================================================================
   Brand marquee (v2.6.1) — replaces the plain brand strip
   ====================================================================== */

.dq-marquee {
	position: relative;
	margin: 0 0 var(--dq-space);
	padding: clamp(28px, 4vw, 44px) 0 clamp(26px, 3.5vw, 40px);
	overflow: hidden;
	background:
		radial-gradient(40% 90% at 15% 0%, rgba(200, 156, 76, 0.22), transparent 70%),
		radial-gradient(35% 90% at 90% 100%, rgba(147, 70, 26, 0.35), transparent 70%),
		#2b211b;
	color: #f3e6d4;
}
.dq-marquee__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	max-width: 1240px;
	margin: 0 auto clamp(18px, 2.5vw, 26px);
	padding-inline: var(--dq-gutter);
}
.dq-home.dq-home .dq-marquee__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #c89c4c;
}
.dq-home.dq-home .dq-marquee__meta {
	margin: 0;
	font-size: 13px;
	color: rgba(243, 230, 212, 0.6);
	font-variant-numeric: tabular-nums;
}

.dq-marquee__row {
	/* names fade in and out at the edges instead of being cut */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dq-marquee__row + .dq-marquee__row {
	margin-top: clamp(6px, 1vw, 12px);
}
.dq-marquee__track {
	display: flex;
	width: max-content;
	animation: dq-marquee var(--dq-marquee-duration, 40s) linear infinite;
	will-change: transform;
}
.dq-marquee__row--right .dq-marquee__track {
	animation-direction: reverse;
	animation-duration: calc(var(--dq-marquee-duration, 40s) * 1.15);
}
/* pause while someone is pointing at or tabbing through a row */
.dq-marquee__row:hover .dq-marquee__track,
.dq-marquee__row:focus-within .dq-marquee__track {
	animation-play-state: paused;
}
@keyframes dq-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}
html[dir="rtl"] .dq-marquee__track {
	animation-name: dq-marquee-rtl;
}
@keyframes dq-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.dq-marquee__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-marquee__list li {
	display: flex;
	align-items: center;
	flex: none;
	margin: 0;
}
.dq-home.dq-home .dq-marquee__item {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	padding: 6px clamp(14px, 2vw, 26px);
	font-family: var(--dq-display);
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
	color: #f3e6d4;
	text-decoration: none;
	transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease;
}
.dq-home.dq-home .dq-marquee__item.is-outline {
	color: transparent;
	-webkit-text-stroke: 1px rgba(243, 230, 212, 0.75);
}
.dq-home.dq-home .dq-marquee__item:hover,
.dq-home.dq-home .dq-marquee__item:focus-visible {
	color: #c89c4c;
	-webkit-text-stroke-color: #c89c4c;
}
.dq-home.dq-home .dq-marquee__item.is-outline:hover,
.dq-home.dq-home .dq-marquee__item.is-outline:focus-visible {
	color: #c89c4c;
}
.dq-home .dq-marquee__item:focus-visible {
	outline: 2px solid #c89c4c;
	outline-offset: 2px;
	border-radius: 6px;
}
.dq-home.dq-home .dq-marquee__count {
	margin-top: 0.35em;
	font-family: var(--dq-body, inherit);
	font-size: 12px;
	font-weight: 600;
	color: rgba(243, 230, 212, 0.55);
	-webkit-text-stroke: 0;
	font-variant-numeric: tabular-nums;
}
/* gold diamond between names */
.dq-marquee__sep {
	flex: none;
	width: 9px;
	height: 9px;
	background: linear-gradient(-135deg, #e8cd93, #9c7630);
	transform: rotate(-45deg);
	opacity: 0.85;
}

/* Reduced motion: a still row you can scroll by hand, without the duplicate copy. */
@media (prefers-reduced-motion: reduce) {
	.dq-marquee__row {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.dq-marquee__track {
		animation: none;
		padding-inline: var(--dq-gutter);
	}
	.dq-marquee__list[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 719px) {
	.dq-marquee__head {
		flex-direction: column;
		gap: 2px;
	}
	.dq-home.dq-home .dq-marquee__item {
		padding: 4px 14px;
	}
	.dq-marquee__sep {
		width: 7px;
		height: 7px;
	}
}  /* slider v2.8: the slide layout follows the photo, not the text direction */
/* =========================================================================
   Banner slider (v2.8)
   ====================================================================== */

.dq-home .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dq-slider {
	position: relative;
	max-width: 1480px;
	margin: clamp(12px, 2vw, 24px) auto var(--dq-space);
}
.dq-slider__track {
	display: flex;
	gap: clamp(10px, 1.4vw, 18px);
	padding: 0 var(--dq-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--dq-gutter);
	scrollbar-width: none;
}
.dq-slider__track::-webkit-scrollbar {
	display: none;
}

/* Each slide leaves a sliver of the next one showing, so it reads as a set. */
.dq-slide {
	position: relative;
	flex: 0 0 calc(100% - clamp(28px, 4vw, 56px));
	aspect-ratio: 2.75 / 1;
	min-height: 380px;
	max-height: 640px;
	overflow: hidden;
	border-radius: clamp(20px, 2.4vw, 30px);
	background: var(--dq-slide-bg, #2b211b);
	scroll-snap-align: start;
	transform: scale(0.97);
	opacity: 0.7;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}
.dq-slide.is-active {
	transform: none;
	opacity: 1;
}
.dq-slide__media,
.dq-slide__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}
.dq-slide__media img {
	object-fit: cover;
	object-position: var(--dq-slide-pos, center);
}
/* Portrait image on a wide slide: on the side, fading into the slide colour. */
.dq-slide.is-side .dq-slide__media {
	inset: 0 0 0 auto;
	width: 46%;
}
.dq-slide.is-side.is-right .dq-slide__media {
	inset: 0 auto 0 0;
}
.dq-slide.is-side .dq-slide__media img {
	object-position: var(--dq-slide-pos, center 62%);
}
.dq-slide.is-side .dq-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--dq-slide-bg) 0%, color-mix(in srgb, var(--dq-slide-bg) 0%, transparent) 38%);
}
.dq-slide.is-side.is-right .dq-slide__media::after {
	background: linear-gradient(270deg, var(--dq-slide-bg) 0%, transparent 38%);
}
/* Legibility: a soft shade on the side where the text sits (full-bleed images only). */
.dq-slide:not(.is-side)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(20, 14, 10, 0.55) 0%, rgba(20, 14, 10, 0) 48%);
}
.dq-slide.is-right:not(.is-side)::after {
	background: linear-gradient(270deg, rgba(20, 14, 10, 0.5) 0%, rgba(20, 14, 10, 0) 50%);
}

.dq-slide__content {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: clamp(28px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: min(46%, 520px);
	transform: translateY(-50%);
	color: #fff;
}
.dq-slide.is-right .dq-slide__content {
	right: clamp(28px, 5vw, 72px);
	left: auto;
	align-items: flex-end;
	text-align: right;
}
.dq-home.dq-home .dq-slide__eyebrow {
	margin: 0 0 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}
.dq-home.dq-home .dq-slide__title {
	margin: 0;
	font-family: var(--dq-display);
	font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem);
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
	text-wrap: balance;
}
html:not([dir="rtl"]) .dq-home.dq-home .dq-slide__title {
	letter-spacing: -0.02em;
}
.dq-home.dq-home .dq-slide__text {
	margin: 14px 0 0;
	max-width: 40ch;
	font-size: clamp(15px, 0.9rem + 0.3vw, 17px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}
.dq-home.dq-home .dq-slide__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	margin-top: 24px;
	padding: 0 28px;
	border-radius: 999px;
	background: #fff;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--dq-ink);
	text-decoration: none;
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.5);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dq-home.dq-home .dq-slide__cta:hover {
	background: var(--dq-amber);
	color: #fff;
	transform: translateY(-1px);
}
.dq-home .dq-slide__cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Dots: the active one stretches and fills while its slide is showing. */
.dq-slider__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
.dq-home.dq-home .dq-slider__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: #d9d0c7;
	cursor: pointer;
	transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease;
}
.dq-home.dq-home .dq-slider__dot.is-active {
	width: 44px;
	background: #e6ddd4;
}
.dq-slider__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: var(--dq-amber);
}
.dq-slider__dot.is-active .dq-slider__fill {
	width: 100%;
}
.dq-slider.is-playing .dq-slider__dot.is-active .dq-slider__fill {
	animation: dq-slide-progress var(--dq-slide-seconds, 6s) linear forwards;
}
.dq-slider.is-paused .dq-slider__dot.is-active .dq-slider__fill {
	animation-play-state: paused;
}
@keyframes dq-slide-progress {
	from { width: 0; }
	to   { width: 100%; }
}
.dq-home .dq-slider__dot:focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 3px;
}

@media (max-width: 719px) {
	.dq-slider {
		margin-top: 10px;
	}
	.dq-slide {
		flex-basis: calc(100% - 28px);
		aspect-ratio: 4 / 5.4;
		min-height: 0;
		max-height: 72vh;
	}
	.dq-slide__media img,
	.dq-slide.is-side .dq-slide__media img {
		object-position: var(--dq-slide-pos-m, center);
	}
	.dq-slide.is-side .dq-slide__media,
	.dq-slide.is-side.is-right .dq-slide__media {
		inset: 0;
		width: 100%;
	}
	.dq-slide.is-side .dq-slide__media::after {
		content: none;
	}
	/* on phones the text always sits at the bottom, over a shade */
	.dq-slide::after,
	.dq-slide.is-right::after,
	.dq-slide.is-side::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(0deg, rgba(20, 14, 10, 0.72) 0%, rgba(20, 14, 10, 0) 55%);
	}
	.dq-slide__content,
	.dq-slide.is-right .dq-slide__content {
		top: auto;
		right: 22px;
		bottom: 24px;
		left: 22px;
		align-items: flex-start;
		max-width: none;
		text-align: left;
		transform: none;
	}
	.dq-home.dq-home .dq-slide__cta {
		min-height: 48px;
		margin-top: 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dq-slide {
		transition: none;
	}
	.dq-slider__track {
		scroll-behavior: auto;
	}
}

@media (max-width: 719px) {
	/* phones: label, title and button only, so the product stays visible */
	.dq-home.dq-home .dq-slide__text {
		display: none;
	}
	.dq-home.dq-home .dq-slide__title {
		font-size: clamp(2.1rem, 1.4rem + 3.4vw, 2.7rem);
	}
	.dq-home.dq-home .dq-slide__eyebrow {
		margin-bottom: 10px;
	}
}
/* =========================================================================
   v2.9 home audit: promises strip, merged how + sizes, consistent rhythm
   ====================================================================== */

/* ---------- Promises (right under the slider) ---------- */

.dq-promises {
	max-width: 1240px;
	margin: calc(-1 * var(--dq-space) + clamp(20px, 3vw, 36px)) auto var(--dq-space);
	padding-inline: var(--dq-gutter);
}
.dq-promises__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: clamp(18px, 2.4vw, 26px) 0;
	border-block: 1px solid var(--dq-line);
	list-style: none;
}
.dq-promise {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0 clamp(12px, 2vw, 24px);
}
.dq-promise + .dq-promise {
	border-inline-start: 1px solid var(--dq-line);
}
.dq-promise:first-child {
	padding-inline-start: 0;
}
.dq-promise__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dq-amber-tint);
	color: var(--dq-amber);
}
.dq-promise__icon .dq-icon {
	width: 20px;
	height: 20px;
}
.dq-promise__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dq-home.dq-home .dq-promise__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-promise__text {
	font-size: 13px;
	line-height: 1.45;
	color: var(--dq-muted);
}

/* ---------- How decants work + sizes (one section) ---------- */

.dq-howsizes .dq-section__head {
	margin-bottom: clamp(24px, 3vw, 36px);
}
.dq-howsizes__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.dq-howsizes__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}
.dq-howsizes__step::before {
	content: none;
}
.dq-home.dq-home .dq-howsizes__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dq-gold);
	border-radius: 50%;
	font-family: var(--dq-display);
	font-size: 15px;
	color: var(--dq-amber);
	font-variant-numeric: tabular-nums;
}
.dq-home.dq-home .dq-howsizes__step-title {
	display: block;
	margin: 2px 0 4px;
	font-family: var(--dq-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-howsizes__step-text {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dq-muted);
}
.dq-home.dq-home .dq-howsizes__sub {
	margin: clamp(36px, 4.5vw, 52px) 0 18px;
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid rgba(43, 33, 27, 0.1);
	font-family: var(--dq-display);
	font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dq-ink);
}
.dq-howsizes .dq-size-card {
	background: #fff;
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(43, 33, 27, 0.05);
}
.dq-home.dq-home .dq-howsizes__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--dq-muted);
}

/* ---------- Rhythm and type: one heading alignment, fewer near-identical sizes ---------- */

.dq-home.dq-home .dq-section__title--center {
	text-align: right;
}
.dq-home .dq-final {
	/* the closing call to action stays centred: it is a full stop, not a list */
	text-align: center;
}
.dq-home.dq-home .dq-card__price,
.dq-home.dq-home .dq-slide__cta,
.dq-home.dq-home .dq-btn {
	font-size: 15px;
}

@media (max-width: 859px) {
	.dq-promises__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}
	.dq-promise:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
	.dq-howsizes__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}
@media (max-width: 719px) {
	.dq-promises {
		margin-top: calc(-1 * var(--dq-space) + 14px);
	}
	.dq-promise {
		flex-direction: column;
		gap: 8px;
		padding-inline: 12px 0;
	}
	.dq-promise__icon {
		width: 34px;
		height: 34px;
	}
	.dq-home.dq-home .dq-promise__title {
		font-size: 14px;
	}
	.dq-home.dq-home .dq-promise__text {
		font-size: 12.5px;
	}
}

/* the promises belong to the top of the page: a shorter gap before the first section */
.dq-home .dq-promises {
	margin-bottom: clamp(48px, 6.5vw, 84px);
}  /* slider v3.0: the slide layout follows the photo, not the text direction */
/* ---------- Slider v3.0: banners with their own text, pause button ---------- */

/* Our title and text step aside where the banner has its own; the button stays, lower down. */
@media (min-width: 720px) {
	.dq-slide.is-bare-desktop::after {
		content: none;
	}
	.dq-slide.is-bare-desktop .dq-slide__eyebrow,
	.dq-slide.is-bare-desktop .dq-slide__title,
	.dq-slide.is-bare-desktop .dq-slide__text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.dq-slide.is-bare-desktop .dq-slide__content {
		top: auto;
		bottom: clamp(26px, 4.5vw, 60px);
		transform: none;
	}
	.dq-slide.is-bare-desktop.is-left .dq-slide__content {
		left: clamp(40px, 5.9vw, 90px);
	}
	.dq-home.dq-home .dq-slide.is-bare-desktop .dq-slide__cta {
		margin-top: 0;
		background: var(--dq-ink);
		color: #fff;
	}
	.dq-home.dq-home .dq-slide.is-bare-desktop .dq-slide__cta:hover {
		background: var(--dq-amber);
	}
}
@media (max-width: 719px) {
	.dq-slide.is-bare-mobile .dq-slide__eyebrow,
	.dq-slide.is-bare-mobile .dq-slide__title {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

.dq-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}
.dq-slider__controls .dq-slider__dots {
	margin-top: 0;
}
.dq-home.dq-home .dq-slider__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--dq-line);
	border-radius: 999px;
	background: #fff;
	color: var(--dq-ink);
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.dq-home.dq-home .dq-slider__toggle:hover {
	border-color: var(--dq-ink);
}
.dq-home .dq-slider__toggle:focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 2px;
}
.dq-slider__icon-play,
.dq-slider.is-stopped .dq-slider__icon-pause {
	display: none;
}
.dq-slider.is-stopped .dq-slider__icon-play {
	display: block;
}
/* portrait photos on desktop: a little wider so the product has room (desktop only) */
@media (min-width: 720px) {
	.dq-slide.is-side .dq-slide__media {
		width: 52%;
	}
}
/* =========================================================================
   v3.3: scent family cards with photos
   ====================================================================== */

.dq-bento {
	grid-auto-rows: minmax(220px, auto);
}
.dq-home .dq-bento__card.has-photo {
	isolation: isolate;
	background: #2b211b;
	color: #fff;
}
.dq-bento__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* a shade from the bottom keeps the title readable on any photo */
.dq-home .dq-bento__card.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(-180deg, rgba(20, 14, 10, 0.18) 0%, rgba(20, 14, 10, 0) 30%, rgba(20, 14, 10, 0) 45%, rgba(20, 14, 10, 0.72) 100%);
	transition: background-color 0.3s ease;
}
.dq-home .dq-bento__card.has-photo:hover .dq-bento__img {
	transform: scale(1.06);
}
.dq-home.dq-home .dq-bento__card.has-photo .dq-bento__title {
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.dq-home.dq-home .dq-bento__card.has-photo .dq-bento__text {
	color: rgba(255, 255, 255, 0.9);
	opacity: 1;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.dq-home .dq-bento__card.has-photo .dq-bento__arrow {
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}
.dq-home .dq-bento__card.has-photo:hover .dq-bento__arrow {
	background: #fff;
	color: #2b211b;
}
.dq-bento--6 .dq-bento__cell:nth-child(6) .dq-bento__card.has-photo {
	min-height: 220px;
}
@media (max-width: 719px) {
	.dq-bento {
		grid-auto-rows: minmax(160px, auto);
	}
	.dq-bento__cell.is-feature .dq-bento__card.has-photo {
		min-height: 260px;
	}
	.dq-bento--6 .dq-bento__cell:nth-child(6) .dq-bento__card.has-photo {
		min-height: 170px;
	}
	.dq-home.dq-home .dq-bento__card.has-photo .dq-bento__title {
		font-size: 1.45rem;
	}
	.dq-home.dq-home .is-feature .dq-bento__card.has-photo .dq-bento__title {
		font-size: 2.3rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dq-bento__img {
		transition: none;
	}
	.dq-home .dq-bento__card.has-photo:hover .dq-bento__img {
		transform: none;
	}
}

/* Large card: the title sits just above its description, at the bottom, not floating mid-card */
.dq-home .is-feature .dq-bento__card {
	justify-content: flex-start;
}
.dq-home .is-feature .dq-bento__title {
	margin-top: auto;
}
.dq-home.dq-home .is-feature .dq-bento__text {
	margin-top: 10px;
}

/* =========================================================================
   v3.3.1: scent families — equal cards, text below the photo
   ====================================================================== */

.dq-families {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-families__item {
	margin: 0;
}
/* very light frames in each family's colour: they tell the families apart without competing with the photos */
.dq-home .dq-family.tone-amber { --f-bg: #f7ece0; --f-dot: #b8611f; }
.dq-home .dq-family.tone-rose  { --f-bg: #f8ece9; --f-dot: #b35a73; }
.dq-home .dq-family.tone-sand  { --f-bg: #f4eee6; --f-dot: #9a7552; }
.dq-home .dq-family.tone-gold  { --f-bg: #f7f1e1; --f-dot: #b88a2e; }
.dq-home .dq-family.tone-sage  { --f-bg: #eef1ea; --f-dot: #6b8a5c; }
.dq-home .dq-family.tone-ink   { --f-bg: #f1ece7; --f-dot: #2b211b; }

.dq-home.dq-home .dq-family {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 8px;
	border-radius: 22px;
	background: var(--f-bg, var(--dq-panel));
	color: var(--dq-ink);
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.dq-home.dq-home .dq-family:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -30px rgba(43, 33, 27, 0.55);
}
.dq-family__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.5);
}
.dq-family__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dq-home .dq-family:hover .dq-family__img {
	transform: scale(1.05);
}
.dq-family__vial {
	padding-bottom: 14px;
}
.dq-family__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 10px 8px;
}
.dq-family__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.dq-home.dq-home .dq-family__title {
	font-family: var(--dq-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--dq-ink);
}
.dq-family__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--dq-ink);
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.dq-home .dq-family:hover .dq-family__arrow {
	background: var(--dq-ink);
	color: #fff;
	transform: translateX(-2px);
}
.dq-home.dq-home .dq-family__notes {
	font-size: 14px;
	line-height: 1.4;
	color: var(--dq-muted);
}
.dq-home.dq-home .dq-family__count {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dq-ink);
	font-variant-numeric: tabular-nums;
}
.dq-home .dq-family__count::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--f-dot, var(--dq-amber));
}
.dq-home .dq-family:focus-visible {
	outline: 3px solid var(--dq-amber);
	outline-offset: 3px;
}

@media (max-width: 859px) {
	.dq-families {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 719px) {
	.dq-families {
		gap: 10px;
	}
	.dq-home.dq-home .dq-family {
		padding: 6px;
		border-radius: 18px;
	}
	.dq-family__media {
		border-radius: 13px;
	}
	.dq-family__body {
		gap: 2px;
		padding: 10px 6px 6px;
	}
	.dq-home.dq-home .dq-family__title {
		font-size: 1.1rem;
	}
	.dq-family__arrow {
		display: none; /* the whole card is the link; on a phone the arrow is only clutter */
	}
	.dq-home.dq-home .dq-family__notes {
		overflow: hidden;
		font-size: 12.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.dq-home.dq-home .dq-family__count {
		font-size: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dq-home .dq-family,
	.dq-family__img {
		transition: none;
	}
	.dq-home .dq-family:hover .dq-family__img {
		transform: none;
	}
}

/* desktop: slightly wider photos keep the section compact */
@media (min-width: 720px) {
	.dq-family__media {
		aspect-ratio: 3 / 2;
	}
}
/* rows line up: the body fills the card and the count sits at its bottom */
.dq-family__body {
	flex: 1;
}
.dq-home.dq-home .dq-family__count {
	margin-top: auto;
	padding-top: 6px;
}
@media (max-width: 719px) {
	/* two lines reserved for the title, so "Amber & oriental" and "Floral" start their notes at the same height */
	.dq-home.dq-home .dq-family__title {
		display: -webkit-box;
		min-height: 2.3em;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.dq-family__top {
		align-items: flex-start;
	}
}

/* =========================================================================
   v3.3.2: soft photos in the scent family bento
   The photo is a translucent, slightly desaturated layer over the family's colour, so it reads as a
   texture; text is in the family's colour (no dark shade needed). Full photo on hover.
   ====================================================================== */

.dq-home .dq-bento__card.has-photo.is-soft {
	background: var(--t-bg);
	color: var(--t-title);
}
.dq-home .dq-bento__card.is-soft .dq-bento__img {
	opacity: var(--dq-photo, 0.45);
	filter: saturate(0.8) contrast(0.92);
	transition: opacity 0.5s ease, filter 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the corner where the title sits fades into the family's colour, so the text rests on calm ground */
.dq-home .dq-bento__card.has-photo.is-soft::before {
	background:
		linear-gradient(-20deg, var(--t-bg) 0%, color-mix(in srgb, var(--t-bg) 70%, transparent) 30%, transparent 62%);
}
.dq-home.dq-home .dq-bento__card.is-soft .dq-bento__title {
	color: var(--t-title);
	text-shadow: none;
}
.dq-home.dq-home .dq-bento__card.is-soft .dq-bento__text {
	color: var(--t-title);
	opacity: 0.85;
	text-shadow: none;
}
.dq-home .dq-bento__card.is-soft .dq-bento__arrow {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--t-title);
}
/* interest brings the photo back */
.dq-home .dq-bento__card.is-soft:hover .dq-bento__img,
.dq-home .dq-bento__card.is-soft:focus-visible .dq-bento__img {
	opacity: min(1, calc(var(--dq-photo, 0.45) + 0.35));
	filter: none;
}
.dq-home .dq-bento__card.is-soft:hover .dq-bento__arrow {
	background: var(--t-title);
	color: var(--t-bg);
}
/* the dark family (Spicy) keeps cream text on its dark colour */
.dq-home .dq-bento__card.is-soft.tone-ink .dq-bento__arrow {
	background: rgba(255, 255, 255, 0.14);
	color: #f3e6d4;
}
@media (prefers-reduced-motion: reduce) {
	.dq-home .dq-bento__card.is-soft .dq-bento__img {
		transition: none;
	}
}

/* =========================================================================
   v4.0 home: labels, tabbed showcase, occasions + Nafha, compact how-it-works,
   help + closing call
   ====================================================================== */

.dq-home.dq-home .dq-home-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dq-amber);
}
.dq-home.dq-home .dq-home-eyebrow:empty {
	display: none;
}

/* ---------- Showcase ---------- */

.dq-showcase__head {
	align-items: flex-end;
}
.dq-showcase__tabs {
	display: flex;
	gap: clamp(18px, 3vw, 32px);
	margin: 0 0 clamp(18px, 2.5vw, 26px);
	border-bottom: 1px solid var(--dq-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.dq-showcase__tabs::-webkit-scrollbar {
	display: none;
}
.dq-home.dq-home .dq-showcase__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 2px;
	border: 0;
	background: none;
	font-family: var(--dq-display);
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	color: var(--dq-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.dq-home.dq-home .dq-showcase__tab:hover,
.dq-home.dq-home .dq-showcase__tab[aria-selected="true"] {
	color: var(--dq-ink);
}
.dq-home .dq-showcase__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--dq-amber);
}
.dq-home.dq-home .dq-showcase__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--dq-panel);
	font-family: var(--dq-body, inherit);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--dq-muted);
}
.dq-home .dq-showcase__tab[aria-selected="true"] .dq-showcase__count {
	background: var(--dq-amber-tint);
	color: var(--dq-amber);
}
.dq-home .dq-showcase__tab:focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 4px;
	border-radius: 4px;
}
.dq-showcase.is-static .dq-row__btn {
	display: none;
}

/* ---------- Occasions + Nafha ---------- */

.dq-occ2__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 2vw, 22px);
}
.dq-occ2.has-nafha .dq-occ2__grid {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
}
.dq-home.dq-home .dq-nafha-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: clamp(24px, 3vw, 36px);
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(60% 55% at 50% 78%, rgba(200, 156, 76, 0.3), transparent 72%),
		radial-gradient(40% 50% at 0% 0%, rgba(147, 70, 26, 0.35), transparent 70%),
		#221a15;
	color: #f3e6d4;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.dq-home.dq-home .dq-nafha-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 30px 60px -36px rgba(20, 14, 10, 0.8);
}
.dq-nafha-card__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dq-home.dq-home .dq-nafha-card__eyebrow {
	font-family: var(--dq-display);
	font-size: 1.5rem;
	line-height: 1;
	background: linear-gradient(-90deg, #f1dcaa, #c89c4c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dq-home.dq-home .dq-nafha-card__title {
	font-family: var(--dq-display);
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.08;
	color: #f3e6d4;
}
.dq-home.dq-home .dq-nafha-card__lead {
	max-width: 36ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(243, 230, 212, 0.72);
}
.dq-nafha-card__case {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}
.dq-nafha-card__lid {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin: 0 14px -6px;
	border-radius: 14px 14px 5px 5px;
	background:
		repeating-linear-gradient(-115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px),
		linear-gradient(-180deg, #4a372b, #2b211b);
	box-shadow: inset 0 0 0 1px rgba(200, 156, 76, 0.45), inset 0 0 0 5px #2b211b, inset 0 0 0 6px rgba(200, 156, 76, 0.25);
	transform: perspective(700px) rotateX(24deg);
	transform-origin: 50% 100%;
}
.dq-home.dq-home .dq-nafha-card__lid span {
	font-family: var(--dq-display);
	font-size: 1.35rem;
	background: linear-gradient(-90deg, #9c7630, #f1dcaa 45%, #c89c4c 60%, #9c7630);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dq-nafha-card__tray {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(6px, 1.2vw, 12px);
	padding: 22px 12px 14px;
	border-radius: 16px;
	background: radial-gradient(120% 90% at 50% 0%, #3a2c23, #1a130f);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.05), inset 0 -12px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(200, 156, 76, 0.2);
}
.dq-nafha-card__slot {
	display: inline-flex;
	align-items: flex-end;
	padding: 8px 5px 4px;
	border-radius: 10px 10px 5px 5px;
	background: linear-gradient(-180deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.04));
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
.dq-home.dq-home .dq-nafha-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: #c89c4c;
	font-size: 15px;
	font-weight: 700;
	color: #221a15;
}
.dq-home .dq-nafha-card:hover .dq-nafha-card__cta {
	background: #e8cd93;
}

.dq-occ2__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-occ2:not(.has-nafha) .dq-occ2__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dq-occ2__list li {
	margin: 0;
}
.dq-home.dq-home .dq-occ2__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	min-height: 150px;
	padding: 20px 20px 16px;
	border-radius: 20px;
	background:
		radial-gradient(70% 90% at 100% 0%, var(--t-glow), transparent 70%),
		var(--t-bg);
	color: var(--t-title);
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.dq-home.dq-home .dq-occ2__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -26px rgba(43, 33, 27, 0.6);
}
.dq-home.dq-home .dq-occ2__title {
	font-family: var(--dq-display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.15;
	color: var(--t-title);
}
.dq-home.dq-home .dq-occ2__mood {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--t-title);
	opacity: 0.8;
}
.dq-occ2__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 10px;
}
.dq-home.dq-home .dq-occ2__count {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--t-title);
}
.dq-occ2__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	color: var(--t-title);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.dq-home .dq-occ2__card:hover .dq-occ2__arrow {
	background: #fff;
	transform: translateX(-2px);
}
.dq-home .dq-occ2__card.tone-ink {
	color: #f3e6d4;
}
.dq-home .dq-occ2__card.tone-ink .dq-occ2__arrow {
	background: rgba(255, 255, 255, 0.12);
}
.dq-home .dq-occ2__card:focus-visible,
.dq-home .dq-nafha-card:focus-visible {
	outline: 3px solid var(--dq-amber);
	outline-offset: 3px;
}

/* ---------- How it works, compact ---------- */

.dq-how2__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.dq-how2__steps {
	display: grid;
	gap: 16px;
	margin: clamp(22px, 3vw, 30px) 0 0;
	padding: 0;
	list-style: none;
}
.dq-how2__steps li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}
.dq-home.dq-home .dq-how2__num {
	flex: none;
	width: 38px;
	font-family: var(--dq-display);
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--dq-gold);
}
.dq-home.dq-home .dq-how2__step-title {
	display: block;
	font-family: var(--dq-display);
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-how2__step-text {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dq-muted);
}
.dq-how2__ruler {
	padding: clamp(20px, 3vw, 32px);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(43, 33, 27, 0.05);
}
.dq-home.dq-home .dq-how2__ruler-title {
	margin: 0 0 18px;
	font-family: var(--dq-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
	color: var(--dq-ink);
}
.dq-how2__shelf {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-how2__shelf li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	text-align: center;
}
.dq-how2__vial {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 160px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--dq-line);
	background: radial-gradient(50% 30% at 50% 100%, rgba(200, 156, 76, 0.25), transparent 72%);
}
.dq-home.dq-home .dq-how2__ml {
	font-family: var(--dq-display);
	font-size: 1.3rem;
	color: var(--dq-ink);
}
.dq-home.dq-home .dq-how2__sprays {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--dq-amber);
}
.dq-home.dq-home .dq-how2__use {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--dq-muted);
}
.dq-home.dq-home .dq-how2__note {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--dq-muted);
}

/* ---------- Help + closing ---------- */

.dq-faq2 {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.dq-faq2__side {
	position: sticky;
	top: calc(var(--dq-hd-height, 80px) + 24px);
}
.dq-faq2__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.dq-home .dq-faq2__list {
	max-width: none;
	margin-top: 0;
}
.dq-home.dq-home .dq-faq2__label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--dq-muted);
}

/* ---------- Tablets and phones ---------- */

@media (max-width: 959px) {
	.dq-occ2.has-nafha .dq-occ2__grid,
	.dq-how2__inner,
	.dq-faq2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.dq-faq2__side {
		position: static;
	}
}
@media (max-width: 599px) {
	.dq-occ2__list,
	.dq-occ2:not(.has-nafha) .dq-occ2__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.dq-home.dq-home .dq-occ2__card {
		min-height: 124px;
		padding: 14px 14px 12px;
		border-radius: 16px;
	}
	.dq-home.dq-home .dq-occ2__mood {
		display: none;
	}
	.dq-occ2__arrow {
		width: 28px;
		height: 28px;
	}
	.dq-nafha-card__slot .dq-hv {
		transform: scale(0.8);
		transform-origin: 50% 100%;
	}
	.dq-how2__shelf {
		gap: 6px;
	}
	.dq-how2__vial {
		height: 120px;
	}
	.dq-how2__vial .dq-hv {
		transform: scale(0.78);
		transform-origin: 50% 100%;
	}
	.dq-home.dq-home .dq-how2__use {
		display: none;
	}
	.dq-faq2__actions {
		flex-direction: column;
	}
	.dq-faq2__actions .dq-btn {
		justify-content: center;
	}
}
/* the tabs are buttons: the kit's button style (capitals, spacing) must not reach them */
.dq-home.dq-home .dq-showcase__tab,
.dq-home.dq-home .dq-showcase__count {
	text-transform: none;
	letter-spacing: normal;
}

@media (max-width: 599px) {
	/* size ruler: vials at their real size (they fit four across); a scaled vial kept its full height
	   and reached over the title */
	.dq-how2__vial {
		height: 160px;
		overflow: hidden;
	}
	.dq-how2__vial .dq-hv {
		transform: none;
	}
	/* occasions: one row that scrolls sideways, like the other rows on the page */
	.dq-occ2__list,
	.dq-occ2:not(.has-nafha) .dq-occ2__list {
		display: flex;
		gap: 10px;
		margin-inline: calc(-1 * var(--dq-gutter));
		padding: 2px var(--dq-gutter) 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dq-gutter);
		scrollbar-width: none;
	}
	.dq-occ2__list::-webkit-scrollbar {
		display: none;
	}
	.dq-occ2__list li {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}
}
@media (max-width: 599px) {
	.dq-how2__vial {
		height: 176px; /* the 30 ml cap fits whole */
	}
}
/* the tallest vial (30 ml, with its cap) sets the shelf height, on every screen */
.dq-how2__vial,
.dq-how2__vial {
	height: 186px;
	overflow: visible;
}
@media (max-width: 599px) {
	.dq-how2__vial {
		height: 186px;
		overflow: visible;
	}
}
/* v4.3: step numbers in a gold that reads on the light band */
.dq-home.dq-home .dq-how2__num {
	color: #9c7630;
}

/* v5.0.21: each dot is a 24×24 px touch target (WCAG 2.5.8) while the visible pill keeps its size: the button is
   transparent and the pill is drawn inside it (::before), with the progress fill on top of the pill. */
.dq-slider__dots {
	gap: 0;
}
.dq-home.dq-home .dq-slider__dot {
	width: 24px;
	height: 24px;
	overflow: visible;
	border-radius: 0;
	background: transparent;
}
.dq-home.dq-home .dq-slider__dot::before {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #d9d0c7;
	transition: right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease;
}
.dq-home.dq-home .dq-slider__dot.is-active {
	width: 44px;
	background: transparent;
}
.dq-home.dq-home .dq-slider__dot.is-active::before {
	right: 0;
	width: 44px;
	background: #e6ddd4;
}
.dq-home.dq-home .dq-slider__dot:focus-visible {
	outline: 2px solid var(--dq-amber, #93461a);
	outline-offset: 0;
	border-radius: 999px;
}
.dq-home .dq-slider__fill {
	top: 7px;
	bottom: 7px;
	z-index: 1;
	border-radius: 999px;
}