/* =========================================================================
   Nafha — ready-made decant boxes (page + home teaser)
   ====================================================================== */

.dq-boxes {
	--dq-ink: #2b211b;
	--dq-muted: #6e6258;
	--dq-line: #e6e0da;
	--dq-panel: #f3f1ee;
	--dq-amber: #93461a;
	--dq-amber-hover: #7c3a15;
	--dq-amber-tint: #f6ece4;
	--dq-gold: #c89c4c;
	--dq-gold-hi: #e8cd93;
	--dq-gold-lo: #9c7630;
	--dq-glass-top: #f0e2d2;
	--dq-glass-bottom: #d9bb98;
	--dq-liquid: 168, 92, 32;
	--dq-display: var(--e-global-typography-primary-font-family, Georgia), serif;
	--dq-gutter: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) var(--dq-gutter) clamp(56px, 8vw, 104px);
	color: var(--dq-ink);
}
.dq-boxes *,
.dq-boxes *::before,
.dq-boxes *::after {
	box-sizing: border-box;
}
.dq-boxes.dq-boxes :where(h1, h2, h3, p, a, li, span, button, del) {
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}
.dq-boxes .tone-amber { --b-bg: #f6eadc; --b-ink: #7a3713; }
.dq-boxes .tone-rose  { --b-bg: #f8ebe8; --b-ink: #803f55; }
.dq-boxes .tone-sand  { --b-bg: #f3ece3; --b-ink: #5b4230; }
.dq-boxes .tone-gold  { --b-bg: #f6efdd; --b-ink: #74551a; }
.dq-boxes .tone-sage  { --b-bg: #edf0e8; --b-ink: #3f5436; }
.dq-boxes .tone-ink   { --b-bg: #efe9e3; --b-ink: #2b211b; }

/* ---------- Home teaser ---------- */

.dq-home .dq-nafha-band {
	max-width: none;
	padding-inline: 0;
}
.dq-nafha-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 52px);
	border-radius: 28px;
	background:
		radial-gradient(50% 90% at 100% 0%, rgba(200, 156, 76, 0.2), transparent 70%),
		#f3ece3;
}
.dq-home.dq-home .dq-nafha-band__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dq-amber);
}
.dq-home .dq-nafha-band .dq-section__text {
	margin: 10px 0 22px;
}
.dq-home.dq-home .dq-nafha-band .dq-btn--light {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 0 26px;
	border-radius: 14px;
	background: var(--dq-ink);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.dq-home.dq-home .dq-nafha-band .dq-btn--light:hover {
	background: var(--dq-amber);
}

@media (max-width: 859px) {
	.dq-nafha-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* the case is filled by the vials, not by empty space */
.dq-box__case {
	min-height: 180px;
	padding-top: 26px;
}
@media (max-width: 599px) {
	.dq-box__case {
		min-height: 150px;
	}
}

/* nothing to show yet: a friendly message instead of a blank page */
.dq-boxes__empty {
	max-width: 620px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 24px;
	background: var(--dq-panel);
}
.dq-boxes.dq-boxes .dq-boxes__empty-title {
	margin: 0 0 8px;
	font-family: var(--dq-display);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-boxes__empty-text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dq-muted);
}
.dq-boxes.dq-boxes .dq-boxes__empty .dq-box__add {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* admin-only diagnosis */
.dq-boxes__diag {
	margin-top: clamp(32px, 5vw, 56px);
	padding: 20px;
	overflow-x: auto;
	border: 2px dashed #c89c4c;
	border-radius: 16px;
	background: #fffaf0;
	font-size: 14px;
}
.dq-boxes.dq-boxes .dq-boxes__diag-title {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-boxes__diag-note {
	margin: 0 0 12px;
	color: var(--dq-muted);
}
.dq-boxes__diag table {
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
}
.dq-boxes__diag :is(th, td) {
	padding: 8px 10px;
	border-bottom: 1px solid var(--dq-line);
	text-align: left;
	white-space: nowrap;
}
.dq-boxes__diag tr.is-bad td:last-child {
	font-weight: 700;
	color: #a4321d;
}
.dq-boxes__diag tr.is-ok td:last-child {
	font-weight: 700;
	color: #40663a;
}

/* =========================================================================
   Nafha v3.6 — the box builder
   ====================================================================== */

.dq-nafha {
	padding-top: 0;
}
/* home teaser slots reuse the case slot look */
.dq-nafha-band__case .dq-box__slot {
	display: inline-flex;
	align-items: flex-end;
	padding: 8px 6px 0;
	border-radius: 10px 10px 4px 4px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---------- The case (hero + preview) ---------- */

.dq-case {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	filter: drop-shadow(0 30px 40px rgba(20, 14, 10, 0.35));
}
.dq-case__lid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 92px;
	margin: 0 10px -6px;
	border-radius: 18px 18px 6px 6px;
	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 6px #2b211b, inset 0 0 0 7px rgba(200, 156, 76, 0.28);
	transform-origin: 50% 100%;
}
.dq-boxes.dq-boxes .dq-case__foil {
	font-family: var(--dq-display);
	font-size: 2rem;
	line-height: 1;
	background: linear-gradient(90deg, #9c7630, #f1dcaa 40%, #c89c4c 60%, #9c7630);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dq-boxes.dq-boxes .dq-case__occ {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(241, 220, 170, 0.8);
}
.dq-case__tray {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(8px, 1.6vw, 16px);
	min-height: 196px;
	padding: 30px 18px 18px;
	border-radius: 20px;
	background:
		radial-gradient(60% 80% at 50% 100%, rgba(200, 156, 76, 0.3), transparent 72%),
		radial-gradient(120% 90% at 50% 0%, #3a2c23, #1f1712);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.06), inset 0 -14px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(200, 156, 76, 0.22);
}
.dq-case__slot {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 8px 6px;
	border-radius: 12px 12px 6px 6px;
	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), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dq-boxes.dq-boxes .dq-case__num {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(200, 156, 76, 0.18);
	font-family: var(--dq-display);
	font-size: 11.5px;
	color: #f1dcaa;
}
.dq-case__slot.is-in {
	animation: dq-slot-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes dq-slot-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

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

.dq-nafha__hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	margin: 0 calc(50% - 50vw) clamp(40px, 6vw, 80px);
	padding: clamp(40px, 7vw, 96px) max(var(--dq-gutter), calc(50vw - 620px));
	overflow: hidden;
	background:
		radial-gradient(40% 60% at 80% 60%, rgba(200, 156, 76, 0.28), transparent 70%),
		radial-gradient(35% 60% at 10% 0%, rgba(147, 70, 26, 0.35), transparent 70%),
		#221a15;
	color: #f3e6d4;
}
.dq-boxes.dq-boxes .dq-nafha__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #c89c4c;
}
.dq-boxes.dq-boxes .dq-nafha__title {
	margin: 0;
	font-family: var(--dq-display);
	font-size: clamp(3.6rem, 2.2rem + 6vw, 7rem);
	font-weight: 500;
	line-height: 0.9;
	background: linear-gradient(90deg, #f3e6d4, #f1dcaa 55%, #c89c4c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dq-boxes.dq-boxes .dq-nafha__lead {
	max-width: 22ch;
	margin: 18px 0 0;
	font-family: var(--dq-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.25;
	color: #f3e6d4;
}
.dq-boxes.dq-boxes .dq-nafha__intro {
	max-width: 44ch;
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(243, 230, 212, 0.72);
}
.dq-boxes.dq-boxes .dq-nafha__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	margin-top: 26px;
	padding: 0 26px;
	border-radius: 999px;
	background: #c89c4c;
	font-size: 15.5px;
	font-weight: 600;
	color: #221a15;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.dq-boxes.dq-boxes .dq-nafha__cta:hover {
	background: #e8cd93;
	transform: translateY(-1px);
}
.dq-nafha__hero-art {
	perspective: 1100px;
}
.dq-case.is-hero {
	max-width: 520px;
	margin-inline: auto;
	transform: rotateX(8deg) rotateZ(-2deg);
}
.dq-case.is-hero .dq-case__lid {
	height: 110px;
	transform: translateY(-34px) rotateX(38deg);
	box-shadow: inset 0 0 0 1px rgba(200, 156, 76, 0.5), inset 0 0 0 7px #2b211b, inset 0 0 0 8px rgba(200, 156, 76, 0.3), 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}
.dq-case.is-hero .dq-boxes.dq-boxes .dq-case__foil,
.dq-boxes.dq-boxes .dq-case.is-hero .dq-case__foil {
	font-size: 2.6rem;
}
.dq-case.is-hero .dq-case__tray {
	min-height: 220px;
}

/* ---------- Builder ---------- */

.dq-nafha__builder {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	scroll-margin-top: 90px;
}
.dq-nafha__steps {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 40px);
}
.dq-boxes.dq-boxes .dq-step__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: var(--dq-display);
	font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
	font-weight: 500;
	color: var(--dq-ink);
}
.dq-step__label span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--dq-gold);
	border-radius: 50%;
	font-size: 15px;
	color: var(--dq-amber);
}

/* occasion tiles */
.dq-occs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-occs li {
	margin: 0;
}
.dq-boxes.dq-boxes .dq-occ {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	height: 100%;
	min-height: 96px;
	padding: 16px 16px 14px;
	border: 0;
	border-radius: 18px;
	background: var(--b-bg);
	text-align: left;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(43, 33, 27, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dq-boxes.dq-boxes .dq-occ:hover {
	transform: translateY(-2px);
}
.dq-boxes.dq-boxes .dq-occ.is-on {
	box-shadow: inset 0 0 0 2px var(--dq-ink), 0 14px 26px -20px rgba(43, 33, 27, 0.6);
}
.dq-occ.is-on::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dq-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.dq-occ__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--b-ink);
}
.dq-boxes.dq-boxes .dq-occ__title {
	margin-top: 6px;
	font-family: var(--dq-display);
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--b-ink);
}
.dq-boxes.dq-boxes .dq-occ__mood {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--dq-muted);
}

/* box and size choices */
.dq-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.dq-choices.is-sizes {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dq-boxes.dq-boxes .dq-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 12px 16px;
	border: 1px solid var(--dq-line);
	border-radius: 18px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dq-boxes.dq-boxes .dq-choice:hover {
	border-color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-choice.is-on {
	border-color: var(--dq-ink);
	box-shadow: inset 0 0 0 1px var(--dq-ink);
	background: #fffdf9;
}
.dq-boxes.dq-boxes .dq-choice:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.dq-boxes.dq-boxes .dq-choice:disabled .dq-choice__name {
	text-decoration: line-through;
}
.dq-choice__slots {
	display: flex;
	gap: 5px;
	padding: 8px 10px;
	border-radius: 10px;
	background: #2b211b;
}
.dq-choice__slots i {
	width: 12px;
	height: 26px;
	border-radius: 3px 3px 4px 4px;
	background: linear-gradient(180deg, #e8cd93 0 26%, #d9a15c 26%, #9c5a24);
}
.dq-choice__vial {
	display: flex;
	align-items: flex-end;
	height: 70px;
}
.dq-boxes.dq-boxes .dq-choice__name {
	font-family: var(--dq-display);
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-choice__note {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--dq-muted);
}
.dq-boxes :is(.dq-occ, .dq-choice, .dq-result__add, .dq-nafha__cta):focus-visible {
	outline: 2px solid var(--dq-amber);
	outline-offset: 3px;
}

/* ---------- Live preview ---------- */

.dq-nafha__result {
	position: sticky;
	top: calc(var(--dq-hd-height, 80px) + 20px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(18px, 2.4vw, 26px);
	border: 1px solid var(--dq-line);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 30px 60px -44px rgba(43, 33, 27, 0.55);
}
.dq-boxes.dq-boxes .dq-result__label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--dq-amber);
}
.dq-nafha__result .dq-case__lid {
	height: 70px;
}
.dq-nafha__result .dq-case__tray {
	min-height: 172px;
}
.dq-nafha__result .dq-case__tray[data-count="5"] .dq-case__slot {
	padding-inline: 5px;
}
.dq-result__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-boxes.dq-boxes .dq-result__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 12px;
	background: var(--dq-panel);
}
.dq-boxes.dq-boxes .dq-result__n {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #2b211b;
	font-family: var(--dq-display);
	font-size: 12px;
	color: #f1dcaa;
}
.dq-result__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.dq-boxes.dq-boxes .dq-result__brand {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--dq-amber);
}
.dq-boxes.dq-boxes .dq-result__name {
	overflow: hidden;
	font-family: var(--dq-display);
	font-size: 1.02rem;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-result__none {
	margin: 0;
	font-size: 14px;
	color: #a4321d;
}
.dq-result__buy {
	display: grid;
	gap: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--dq-line);
}
.dq-boxes.dq-boxes .dq-result__summary {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dq-muted);
}
.dq-boxes.dq-boxes .dq-result__price {
	margin: 2px 0 0;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--dq-ink);
	font-variant-numeric: tabular-nums;
}
.dq-boxes.dq-boxes .dq-result__price del {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--dq-muted);
}
.dq-boxes.dq-boxes .dq-result__each {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--dq-muted);
}
.dq-boxes.dq-boxes .dq-result__save {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: #40663a;
}
.dq-boxes.dq-boxes .dq-result__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0 22px;
	border: 0;
	border-radius: 16px;
	background: var(--dq-amber);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.dq-boxes.dq-boxes .dq-result__add:hover {
	background: var(--dq-amber-hover);
}
.dq-boxes.dq-boxes .dq-result__add:disabled {
	background: var(--dq-line);
	color: var(--dq-muted);
	cursor: default;
}
.dq-boxes.dq-boxes .dq-result__add.is-added {
	background: var(--dq-ink);
}

/* phones: price and add always in reach */
.dq-nafha__bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--dq-line);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -12px 30px -20px rgba(43, 33, 27, 0.5);
}
.dq-nafha__bar[hidden] {
	display: none;
}
.dq-boxes.dq-boxes .dq-nafha__bar-summary {
	margin: 0;
	font-size: 12px;
	color: var(--dq-muted);
}
.dq-boxes.dq-boxes .dq-nafha__bar-price {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-nafha__bar .dq-result__add {
	width: auto;
	min-height: 48px;
}

/* ---------- Rules ---------- */

.dq-nafha__rules {
	margin-top: clamp(48px, 7vw, 88px);
	padding-top: clamp(28px, 4vw, 40px);
	border-top: 1px solid var(--dq-line);
}
.dq-boxes.dq-boxes .dq-nafha__rules-title {
	margin: 0 0 20px;
	font-family: var(--dq-display);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: 500;
	color: var(--dq-ink);
}
.dq-nafha__rules ol {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-boxes.dq-boxes .dq-nafha__rules li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dq-ink);
}
.dq-boxes.dq-boxes .dq-nafha__rule-n {
	font-family: var(--dq-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--dq-gold);
}

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

@media (max-width: 959px) {
	.dq-nafha__hero,
	.dq-nafha__builder {
		grid-template-columns: minmax(0, 1fr);
	}
	.dq-nafha__result {
		position: static;
	}
	.dq-nafha__rules ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	.dq-nafha__hero {
		padding-top: 36px;
		padding-bottom: 44px;
	}
	.dq-case.is-hero {
		transform: none;
	}
	.dq-case.is-hero .dq-case__lid {
		height: 84px;
		transform: translateY(-20px) rotateX(34deg);
	}
	.dq-boxes.dq-boxes .dq-case.is-hero .dq-case__foil {
		font-size: 2rem;
	}
	.dq-case__tray,
	.dq-case.is-hero .dq-case__tray {
		min-height: 150px;
		gap: 6px;
		padding: 22px 8px 12px;
	}
	.dq-case__slot {
		padding: 8px 4px 4px;
	}
	.dq-case__slot .dq-hv {
		transform: scale(0.82);
		transform-origin: 50% 100%;
	}
	/* occasions scroll sideways: all six stay one swipe away */
	.dq-occs {
		display: flex;
		gap: 10px;
		margin-inline: calc(-1 * var(--dq-gutter));
		padding: 2px var(--dq-gutter) 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.dq-occs::-webkit-scrollbar {
		display: none;
	}
	.dq-occs li {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
	.dq-choices.is-sizes .dq-choice__note {
		display: none;
	}
	.dq-nafha__rules ol {
		grid-template-columns: minmax(0, 1fr);
	}
	.dq-boxes.dq-boxes .dq-nafha__rules li {
		flex-direction: row;
		align-items: baseline;
		gap: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dq-case__slot.is-in {
		animation: none;
	}
}
@media (max-width: 599px) {
	/* snapping respects the page margin, so the first occasion is not flush with the screen edge */
	.dq-occs {
		scroll-padding-inline: var(--dq-gutter);
	}
}

/* ---------- v3.7: who the box is for ---------- */

.dq-choices.is-fors {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dq-choice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--dq-panel);
	color: var(--dq-ink);
}
.dq-choice.is-for-him .dq-choice__icon { background: #efe6da; color: #5b4230; }
.dq-choice.is-for-her .dq-choice__icon { background: #f6e4df; color: #803f55; }
.dq-choice.is-for-couple .dq-choice__icon { background: #f4ebd4; color: #74551a; }
.dq-boxes.dq-boxes .dq-choice.is-on .dq-choice__icon {
	background: var(--dq-ink);
	color: #f1dcaa;
}
.dq-boxes.dq-boxes .dq-occ:disabled {
	opacity: 0.38;
	cursor: not-allowed;
	transform: none;
}
.dq-boxes.dq-boxes .dq-result__g {
	margin-inline-start: auto;
	flex: none;
	font-size: 16px;
	line-height: 1;
}
.dq-result__g.is-men { color: #5b4230; }
.dq-result__g.is-women { color: #9a4a64; }
.dq-result__g.is-unisex { color: #93461a; }
@media (max-width: 599px) {
	.dq-choices.is-fors .dq-choice__note {
		display: none;
	}
	.dq-choice__icon {
		width: 44px;
		height: 44px;
	}
}

/* =========================================================================
   v3.7.1: text always stays inside its frame, whatever font or size the site uses
   ====================================================================== */

.dq-nafha :is(.dq-occ, .dq-choice, .dq-case, .dq-case__lid, .dq-case__tray, .dq-nafha__result, .dq-result__list li, .dq-result__who, .dq-nafha__rules li, .dq-nafha__bar > div, .dq-nafha__hero-text, .dq-step) {
	min-width: 0;
	max-width: 100%;
}
.dq-nafha :is(.dq-occ__title, .dq-occ__mood, .dq-choice__name, .dq-choice__note, .dq-step__label, .dq-result__summary, .dq-result__each, .dq-result__save, .dq-nafha__rules li, .dq-nafha__lead, .dq-nafha__intro, .dq-nafha__title) {
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.dq-boxes.dq-boxes .dq-occ,
.dq-boxes.dq-boxes .dq-choice {
	overflow: hidden;
}
/* the box lid: its words are cut with "…" rather than spilling over the edge */
.dq-case__lid {
	overflow: hidden;
	padding-inline: 16px;
}
.dq-boxes.dq-boxes :is(.dq-case__foil, .dq-case__occ) {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.dq-boxes.dq-boxes .dq-case__foil {
	padding: 0.08em 0.1em; /* room for the tall letters of a display font */
	line-height: 1.1;
}
/* numbers of the rules: line height that fits the whole figure */
.dq-boxes.dq-boxes .dq-nafha__rule-n {
	line-height: 1.15;
}
/* bottom bar on phones: long summaries shorten instead of pushing the button off */
.dq-boxes.dq-boxes .dq-nafha__bar-summary {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* the price stays on one line, the per-decant note may wrap */
.dq-boxes.dq-boxes .dq-result__price {
	white-space: nowrap;
}
/* v4.3: the large rule numbers in a gold that reads on white (3:1 for large text) */
.dq-boxes.dq-boxes .dq-nafha__rule-n {
	color: #9c7630;
}