/* Homepage top: Draft 3 phone-first bento, scoped to the shortcode. */

/* ------------------------------------------------------------------------- */
/* Band, column and headline                                                 */
/* ------------------------------------------------------------------------- */
.dht {
	--dht-col: 1080px;
	--dht-edge: 20px;
	--dht-gap: 14px;
	--dht-band: var(--blue-5);
	--dht-soft: var(--blue-50);
	--dht-ink: var(--color-text-strong);
	--dht-quiet: var(--gray-600);
	--dht-accent: var(--lightblue-600);
	--dht-shade: linear-gradient(0deg, rgb(3 14 32 / .78) 0%, rgb(3 14 32 / .32) 34%, rgb(3 14 32 / 0) 64%);
	--dht-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background: var(--dht-band);
	padding-block: 48px 64px;
	color: var(--color-text);
	font-family: var(--font-body);
}

.dht * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------- */
/* Parent-theme resets inside the band                                        */
/* Foxiz styles every link, button and image in page content (underlined bold */
/* links, padded filled buttons, auto-height images). These resets sit at    */
/* .dht-element weight; every component rule below is .dht .dht-… and wins.   */
/* ------------------------------------------------------------------------- */
.dht a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.dht button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	min-height: 0;
}

.dht ul,
.dht li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dht .rb-container {
	max-width: var(--dht-col);
	margin-inline: auto;
}

.dht .edge-padding {
	padding-inline: var(--dht-edge);
}

.dht img,
.dht video {
	display: block;
	max-width: 100%;
}

.dht button,
.dht input {
	font: inherit;
	color: inherit;
}

.dht :focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

.dht .dht-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dht .dht-head {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-bottom: 24px;
}

.dht .dht-head h1 {
	margin: 0;
	max-width: 11.5em;
	font: var(--font-weight-bold) 3rem/1.1 var(--font-display);
	letter-spacing: -0.025em;
	color: var(--dht-ink);
	text-wrap: balance;
}

.dht .dht-head p {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--blue-600);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------------- */
/* Bento layout and shared tile primitives                                   */
/* ------------------------------------------------------------------------- */
.dht .dht-bento {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 24fr) minmax(0, 29fr);
	grid-template-rows: auto 1fr auto;
	gap: var(--dht-gap);
	height: 552px;
}

.dht .dht-actions {
	grid-area: 1 / 1 / 2 / 2;
	display: flex;
	gap: 14px;
	padding-bottom: 24px;
}

.dht .dht-search {
	grid-area: 2 / 1 / 4 / 2;
}

.dht .dht-swipe {
	display: contents;
}

.dht .dht-gear {
	grid-area: 1 / 2 / 3 / 3;
}

.dht .dht-news {
	grid-area: 3 / 2 / 4 / 3;
}

.dht .dht-dest {
	grid-area: 1 / 3 / 4 / 4;
}

.dht .dht-dots {
	display: none;
}

.dht .dht-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radius);
	font: var(--font-weight-semibold) 0.875rem/1 var(--font-body);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 200ms var(--dht-ease), color 200ms var(--dht-ease), transform 200ms var(--dht-ease), box-shadow 200ms var(--dht-ease);
}

.dht .dht-btn svg {
	width: 13px;
	height: 13px;
	flex: none;
	transition: transform 300ms var(--dht-ease);
}

.dht .dht-btn--solid {
	background: var(--color-primary);
	color: var(--color-text-inverse);
}

.dht .dht-btn--line {
	color: var(--dht-ink);
	box-shadow: inset 0 0 0 1.5px var(--dht-ink);
}

.dht .dht-btn:active {
	transform: translateY(0) scale(.98);
}

.dht .dht-tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
	padding: 26px;
	border-radius: var(--radius);
	background: var(--blue-800);
	color: var(--color-text-inverse);
	text-decoration: none;
	transition: transform 160ms var(--dht-ease);
}

/* Press feedback only on the link tiles: the search tile holds a field, so a click in it
   must not shrink the box (owner's note, 2 October). */
.dht a.dht-tile:active {
	transform: scale(.985);
}

.dht .dht-tile__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 600ms var(--dht-ease);
}

.dht .dht-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--dht-shade);
	pointer-events: none;
}

.dht .dht-tile__title {
	margin: 0;
	max-width: 17em;
	font: var(--font-weight-bold) 1.125rem/1.25 var(--font-display);
	color: var(--color-text-inverse);
	text-wrap: balance;
}

.dht .dht-tile__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 0;
	font-size: 0.7rem;
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.dht .dht-tile__meta svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.dht .dht-tile__go {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--color-surface);
	color: var(--dht-ink);
	box-shadow: 0 2px 12px rgb(3 14 32 / .22);
	transition: background-color 250ms var(--dht-ease), color 250ms var(--dht-ease);
}

.dht .dht-tile__go svg {
	width: 15px;
	height: 15px;
}

/* ------------------------------------------------------------------------- */
/* Search, gear and newsletter tiles                                         */
/* ------------------------------------------------------------------------- */
.dht .dht-search .dht-tile__media {
	object-position: 42% 32%;
}

.dht .dht-search .dht-tile__title {
	font-size: 1.25rem;
}

.dht .dht-search form {
	margin-top: 10px;
}

.dht .dht-field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 6px 0 18px;
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: 0 10px 30px rgb(3 14 32 / .28);
	transition: box-shadow 200ms var(--dht-ease);
}

.dht .dht-field:focus-within {
	box-shadow: 0 0 0 3px var(--lightblue-300), 0 10px 30px rgb(3 14 32 / .28);
}

.dht .dht-field > svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--dht-ink);
}

.dht .dht-field input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: none;
	font-size: 1rem;
}

.dht .dht-field input::placeholder {
	color: var(--color-text-placeholder);
}

.dht .dht-field > button {
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius-inner-4);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-weight: var(--font-weight-semibold);
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 200ms var(--dht-ease);
}

.dht .dht-gear .dht-tile__media {
	object-position: 47% 50%;
}

.dht .dht-news {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--dht-soft);
}

.dht .dht-news h2 {
	margin: 0 0 6px;
	font: var(--font-weight-bold) 1.125rem/1.25 var(--font-display);
	color: var(--dht-ink);
	text-wrap: balance;
}

.dht .dht-news__text {
	margin: 0 0 14px;
	max-width: 30em;
	font-size: 11px;
	line-height: 1.3;
	color: var(--blue-600);
}

.dht .dht-news form {
	display: grid;
	gap: 8px;
}

.dht .dht-news input {
	width: 100%;
	height: 46px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-inner-4);
	background: var(--color-surface);
	font-size: 0.9375rem;
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--blue-300);
}

.dht .dht-news input::placeholder {
	color: var(--gray-600);
}

.dht .dht-news input:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--lightblue-500);
}

.dht .dht-news__row {
	position: relative;
}

.dht .dht-news__row input {
	padding-right: 74px;
}

.dht .dht-news__row button {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-inner-8);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 0.875rem;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: background-color 200ms var(--dht-ease);
}

.dht .dht-news__note {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	color: var(--green-700);
}

/* ------------------------------------------------------------------------- */
/* Video pause control and carousel                                          */
/* ------------------------------------------------------------------------- */
.dht .dht-dest {
	position: relative;
}

.dht .dht-dest > .dht-tile {
	height: 100%;
	background: var(--lightblue-800);
}

.dht .dht-pause {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	background: rgb(3 14 32 / .38);
	color: var(--color-text-inverse);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 200ms ease, transform 160ms var(--dht-ease);
}

.dht .dht-pause {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 1;
}

.dht .dht-pause:active {
	transform: scale(.94);
}

.dht .dht-pause svg {
	width: 14px;
	height: 14px;
}

.dht .dht-pause .i-play {
	display: none;
}

.dht .dht-pause[aria-pressed="true"] .i-play {
	display: block;
}

.dht .dht-pause[aria-pressed="true"] .i-pause {
	display: none;
}

.dht .dht-ads {
	margin-top: 32px;
}

.dht .dht-ads .dvp-carousel-section {
	max-width: none;
	margin: 0;
}

/* ------------------------------------------------------------------------- */
/* Fluent Forms and mounted Algolia field                                    */
/* ------------------------------------------------------------------------- */
.dht .dht-news__form .ff-el-form-control {
	width: 100%;
	height: 46px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-inner-4);
	background: var(--color-surface);
	font-size: 0.9375rem;
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--blue-300);
}

.dht .dht-news__form .ff-el-form-control:focus {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--lightblue-500);
}

/* Fluent Form markup laid out like the approved draft: first name on its own row,
   the submit button sitting inside the right end of the email field. */
.dht .dht-news__form fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.dht .dht-news__form .ff-name-field-wrapper {
	grid-column: 1 / -1;
}

.dht .dht-news__form .ff-t-container,
.dht .dht-news__form .ff-t-cell {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.dht .dht-news__form .ff-el-group {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
}

.dht .dht-news__form .ff-name-field-wrapper .ff-el-group {
	grid-row: auto;
}

/* Fluent Forms already marks these labels visually hidden (ff-el-form-hide_label);
   repeated here so the layout never depends on its stylesheet loading first. */
.dht .dht-news__form .ff-el-form-hide_label > .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dht .dht-news__form input[type="email"] {
	padding-right: 74px;
}

.dht .dht-news__form .ff_submit_btn_wrapper {
	grid-column: 2;
	grid-row: 2;
	z-index: 1;
	display: flex;
	margin: 0;
	padding: 1px;
	text-align: right;
}

.dht .dht-news__form .ff-btn-submit {
	min-height: 0;
	height: 100%;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius-inner-8);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 0.875rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms var(--dht-ease);
}

/* Newsletter fields: the placeholder text becomes a small label in the top-left corner
   while the field has focus or a value (set up by the script; without it the native
   placeholder stays). Only transform animates. */
.dht .dht-news__form .dht-has-float {
	position: relative;
}

.dht .dht-news__form .dht-has-float .ff-el-form-control {
	padding-top: 14px;
}

.dht .dht-float {
	position: absolute;
	top: 50%;
	left: 16px;
	z-index: 1;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--gray-600);
	white-space: nowrap;
	pointer-events: none;
	transform: translateY(-50%);
	transform-origin: left center;
	transition: transform 180ms var(--dht-ease);
}

.dht .dht-has-float:focus-within .dht-float,
.dht .dht-has-float.is-filled .dht-float {
	transform: translateY(calc(-50% - 12px)) scale(.7);
}

/* Signup thank-you: the script moves Fluent Forms' success text out of the tile into
   this small dialog, so the tile keeps its size. The wording stays in the form's
   settings. Without dialog support the text stays under the form. */
.dht .dht-pop {
	width: min(340px, calc(100vw - 32px));
	max-width: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-lg);
	transition: opacity 200ms var(--dht-ease), transform 200ms var(--dht-ease);
}

@starting-style {
	.dht .dht-pop[open] {
		opacity: 0;
		transform: scale(.96);
	}
}

.dht .dht-pop::backdrop {
	background: rgb(3 14 32 / .45);
}

.dht .dht-pop__inner {
	display: grid;
	gap: 16px;
	padding: 24px;
}

.dht .dht-pop .ff-message-success {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text);
}

.dht .dht-pop .ff-message-success p {
	margin: 0 0 8px;
}

.dht .dht-pop .ff-message-success p:last-child {
	margin-bottom: 0;
}

.dht .dht-pop .ff-message-success strong {
	color: var(--dht-ink);
}

.dht .dht-pop__close {
	justify-self: end;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-inner-4);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 0.875rem;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: background-color 200ms var(--dht-ease), transform 160ms var(--dht-ease);
}

.dht .dht-pop__close:active {
	transform: scale(.97);
}

/* Mounted Algolia autocomplete: its form takes the place of the static field inside
   the same white box, and keeps the box's height and shadow. */
.dht .dht-field.is-aa-mounted {
	padding: 0 6px 0 0;
}

.dht .dht-field.is-aa-mounted > svg {
	display: none;
}

.dht .dht-field .aa-Autocomplete {
	flex: 1;
	min-width: 0;
	height: 100%;
}

.dht .dht-search .aa-Form {
	margin: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 0 0 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Flex, not inline: an inline label sits the icon on the text baseline, 3px high. */
.dht .dht-search .aa-InputWrapperPrefix,
.dht .dht-search .aa-Label {
	display: flex;
	align-items: center;
	margin: 0;
}

.dht .dht-search .aa-InputWrapperPrefix {
	flex-shrink: 0;
	margin-right: 10px;
	color: var(--dht-ink);
}

.dht .dht-search .aa-InputWrapper,
.dht .dht-search .aa-Input {
	flex: 1;
	min-width: 0;
}

.dht .dht-search .aa-Input {
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 1rem;
	color: var(--color-text);
}

/* The autocomplete's submit is its magnifier: drawn like the static field's icon. */
.dht .dht-search .aa-SubmitButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dht-ink);
	cursor: pointer;
}

.dht .dht-search .aa-SubmitButton svg {
	width: 20px;
	height: 20px;
}

.dht .dht-field.is-aa-mounted > .aa-Autocomplete {
	order: 1;
}

.dht .dht-field.is-aa-mounted > button {
	order: 2;
	flex: none;
}

/* The results panel lives in document.body (the photo tile would clip it);
   autocomplete-js positions it under the field with inline styles. */
.divein-aa-Panel.divein-aa-Panel--home {
	left: var(--dht-aa-left, 12px) !important;
	right: auto !important;
	width: var(--dht-aa-width, 360px) !important;
	min-width: 0 !important;
	max-width: calc(100vw - 24px) !important;
	z-index: 9999;
	margin-top: 4px;
}

/* ------------------------------------------------------------------------- */
/* Category rail                                                             */
/* ------------------------------------------------------------------------- */
.dht .dht-cats {
	position: relative;
	margin-top: 32px;
}

.dht .dht-cats ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dht-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	}

.dht .dht-cats ul {
	--dht-cat-gap: 10px;
	gap: var(--dht-cat-gap);
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.dht .dht-cats ul::-webkit-scrollbar {
	display: none;
}

.dht .dht-cats li {
	aspect-ratio: 1 / 1;
	display: flex;
	min-width: 0;
	flex: 0 0 calc((100% - 7 * 10px) / 8);
	scroll-snap-align: start;
}

.dht .dht-cat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 0;
	padding: 10px 6px;
	border: 2px solid var(--dht-soft);
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--dht-ease);
}

.dht .dht-cat svg {
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--dht-accent);
}

.dht .dht-cat b {
	display: block;
	margin-top: 8px;
	font: var(--font-weight-bold) 0.875rem/1.3 var(--font-display);
	color: var(--dht-ink);
	text-wrap: balance;
}

.dht .dht-cat span {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: var(--dht-quiet);
	font-variant-numeric: tabular-nums;
}

.dht .dht-cat:active {
	transform: scale(.97);
}

/* ------------------------------------------------------------------------- */
/* Approved hover behavior                                                   */
/* ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.dht a.dht-tile:hover .dht-tile__media {
		transform: scale(1.04);
	}

	.dht a.dht-tile:hover .dht-tile__go,
	.dht .dht-tile__go:hover {
		background: var(--color-primary);
		color: var(--color-text-inverse);
	}

	.dht .dht-btn--solid:hover {
		background: var(--color-primary-hover);
		transform: translateY(-2px);
		box-shadow: var(--shadow-primary);
	}

	.dht .dht-btn--solid:hover svg,
	.dht .dht-btn--line:hover svg {
		transform: translate(2px, -2px);
	}

	.dht .dht-btn--line:hover {
		background: var(--color-surface);
		transform: translateY(-2px);
	}

	.dht .dht-cat:hover {
		background: var(--color-surface);
		border-color: var(--lightblue-200);
	}

	.dht .dht-pause:hover {
		background: rgb(3 14 32 / .6);
	}

	/* The category row can be dragged sideways with the mouse. */
	.dht .dht-cats ul {
		cursor: grab;
	}

	.dht .dht-cats ul.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}

	.dht .dht-cats ul.is-dragging a {
		pointer-events: none;
	}

	.dht .dht-field > button:hover,
	.dht .dht-pop__close:hover,
	.dht .dht-news__row button:hover,
	.dht .dht-news__form .ff-btn-submit:hover {
		background: var(--color-primary-hover);
	}
}

/* ------------------------------------------------------------------------- */
/* Phone: search tile, swipe row and 102px category cards                    */
/* ------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.dht {
		padding-block: 24px 32px;
	}

	.dht .dht-head {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 16px;
	}

	.dht .dht-head h1 {
		font-size: 2rem;
		line-height: 1.12;
		letter-spacing: -0.02em;
	}

	.dht .dht-head p {
		margin: 0;
	}

	.dht .dht-bento {
		display: flex;
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.dht .dht-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding-bottom: 0;
		margin-bottom: 4px;
	}

	.dht .dht-btn {
		justify-content: center;
		height: 46px;
		padding: 0 12px;
		font-size: 0.8125rem;
		white-space: normal;
		text-align: center;
	}

	.dht .dht-tile {
		padding: 16px;
	}

	.dht .dht-tile__title {
		font-size: 0.9375rem;
		line-height: 1.25;
	}

	.dht .dht-tile__meta {
		gap: 6px;
		font-size: 0.8125rem;
	}

	.dht .dht-tile__meta svg {
		width: 16px;
		height: 16px;
	}

	.dht .dht-tile__go {
		top: 14px;
		right: 14px;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.dht .dht-tile__go svg {
		width: 14px;
		height: 14px;
	}

	.dht .dht-pause {
		top: 14px;
		left: 14px;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.dht .dht-pause svg {
		width: 12px;
		height: 12px;
	}

	.dht .dht-search {
		height: 325px;
		margin-bottom: 6px;
		container-type: inline-size;
	}

	.dht .dht-search .dht-tile__title {
		max-width: none;
		font-size: 1.3rem;
		font-size: calc(100cqw / 15.3);
		line-height: 1.15;
		white-space: nowrap;
	}

	.dht .dht-search .dht-tile__meta {
		gap: 5px;
		font-size: 0.8125rem;
	}

	.dht .dht-search .dht-tile__meta svg {
		width: 14px;
		height: 14px;
	}

	.dht .dht-search form {
		margin-top: 6px;
	}

	.dht .dht-field {
		height: 46px;
		padding-left: 12px;
		gap: 8px;
	}

	.dht .dht-field > svg {
		width: 18px;
		height: 18px;
	}

	.dht .dht-field input {
		font-size: 0.8125rem;
	}

	.dht .dht-field {
		height: 48px;
	}

	.dht .dht-field > button {
		height: 44px;
		padding: 0 14px;
		font-size: 0.8125rem;
	}

	.dht .dht-swipe {
		display: flex;
		gap: 10px;
		margin-inline: calc(var(--dht-edge) * -1);
		padding-inline: var(--dht-edge);
		scroll-padding-inline: var(--dht-edge);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.dht .dht-swipe::-webkit-scrollbar {
		display: none;
	}

	.dht .dht-swipe > * {
		flex: 0 0 86%;
		height: 260px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.dht .dht-dots {
		display: flex;
		justify-content: center;
		gap: 4px;
		margin-top: 6px;
		margin-bottom: 8px;
	}

	.dht .dht-dots i {
		width: 5px;
		height: 5px;
		border-radius: 2.5px;
		background: var(--blue-200);
		transition: width 300ms var(--dht-ease), background-color 300ms var(--dht-ease);
	}

	.dht .dht-dots i[data-on] {
		width: 16px;
		background: var(--dht-ink);
	}

	.dht .dht-ads {
		margin-top: 26px;
	}

	.dht .dht-cats {
		margin-top: 36px;
	}

	.dht .dht-cats ul {
		gap: 8px;
		margin-inline: calc(var(--dht-edge) * -1);
		padding-inline: var(--dht-edge) 52px;
		scroll-padding-inline: var(--dht-edge);
	}

	.dht .dht-cats li {
		flex: 0 0 102px;
		height: 102px;
	}

	.dht .dht-cat {
		height: 100%;
		padding: 5px 4px;
	}

	.dht .dht-cat svg {
		flex: none;
		width: 24px;
		height: 24px;
	}

	.dht .dht-cat b {
		margin: 3px 0 0;
		font-size: 0.8125rem;
		line-height: 1.12;
	}

	.dht .dht-cat span {
		margin-top: 3px;
		font-size: 0.8125rem;
		line-height: 1.1;
	}
}

/* Tablet: preserve the approved six-card category width and shorter bento. */
@media (min-width: 861px) and (max-width: 1060px) {
	.dht .dht-cats li {
		flex-basis: calc((100% - 5 * var(--dht-cat-gap)) / 6);
	}

	.dht .dht-bento {
		height: 520px;
	}
}

/* Every moving part also stops for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.dht .dht-float {
		transition: none;
	}

	.dht *,
	.dht *::before,
	.dht *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}