/** Global **/

#flavor-finder-app {
	--ff-color--blue-50: #E9F9FF;
	--ff-color--blue-100: #CCEBF8;
	--ff-color--blue-200: #B1DAEB;
	--ff-color--blue-400: #2CABE2;
	--ff-color--blue-600: #016BAE;
	--ff-color--blue-900: #002238;
	--ff-color--green-400: #B8D445;

	--ff-font-size--xs: 0.75rem;
	--ff-font-size--sm: 0.875rem;
	--ff-font-size--md: 1rem;
	--ff-font-size--lg: 1.125rem;
	--ff-font-size--xl: 1.25rem;
	--ff-font-size--2xl: 1.75rem;
	--ff-font-size--3xl: 3rem;

	min-height: 85vh;
	margin-top: clamp(1rem, calc(-5rem + 10.67vh), 3rem);
	padding-inline: 0.75rem;
	color: var(--ff-color--blue-600);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAzMyIgaGVpZ2h0PSI3MTkiIHZpZXdCb3g9IjAgMCAyMDMzIDcxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAzMi4wOCAxMzAuMzkyQzE5MjYuMTEgMzUuMzA0NSAxNzQ3LjE5IC0xNi41MTI2IDE2MDAuODYgNC43MjcwMkMxNTI2Ljc0IDE1LjQ4NjkgMTQ1NS45MiA0NS43ODEgMTQwOC4yNyAxMDQuNDE1QzEzNTkuOSAxNjMuOTQgMTM0MC45MyAyNDUuODIzIDEzNTcuNzEgMzQ3Ljc3OEMxMzg2LjUgNTIyLjY2MSAxMzI3LjIxIDU5OS42MzcgMTI2NC4zMiA2MjIuMTYzQzExOTUuMiA2NDYuOTIgMTA5MS42NyA2MTkuMTIgMTAwOS41NCA1MjUuNjRDOTI0Ljg1MSA0MjkuMjUzIDgzNi41NyAyOTYuOTgyIDY4OC41NTkgMjI0LjUxMUM1MzYuMjYgMTQ5Ljk0MSAzMjcuNDA5IDEzOS4xOTEgMCAyNTIuOTlMMjguODkxOCAzMzYuMTEyQzM0NC42NDQgMjI2LjM2NCA1MjYuODkzIDI0My4zMzcgNjQ5Ljg2MiAzMDMuNTQ2Qzc3Ny4xMTkgMzY1Ljg1NiA4NDguMjc3IDQ3NS40MjUgOTQzLjQzIDU4My43MjRDMTA0MS4xNCA2OTQuOTMxIDExODAuNDggNzQ1LjY2OCAxMjkzLjk5IDcwNS4wMDlDMTQxMy43NCA2NjIuMTE5IDE0NzYuODUgNTI5LjcyNiAxNDQ0LjU1IDMzMy40ODRDMTQzMC43OCAyNDkuODc4IDE0NDcuOCAxOTUuMzEyIDE0NzYuNTcgMTU5LjkxM0MxNTA2LjA2IDEyMy42MjMgMTU1My41NCAxMDAuNTE3IDE2MTMuNTEgOTEuODEzOEMxNzM1LjM2IDc0LjEyNjUgMTg4Ny43NiAxMTkuMTI2IDE5NzMuMzEgMTk1Ljg4OUwyMDMyLjA4IDEzMC4zOTJaIiBmaWxsPSIjRDFFRkZDIi8+PC9zdmc+");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#flavor-finder-app:has(.ff-quiz) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#flavor-finder-app .ff-quiz {
	width: 100%;
	max-width: 100%;
}

.content-wrap {
	z-index: 5;
}

#flavor-finder-app .ff-btn {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
	padding: 0.5rem 0rem;
	font-size: var(--ff-font-size--sm);
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: unset;
	background-color: transparent;
}

#flavor-finder-app .ff-btn:hover,
#flavor-finder-app .ff-btn:focus {
	color: var(--ff-color--blue-400);
}

.ff-dropdown__option input {
	margin-right:5px;
}

@media (width >= 48rem) {
	#flavor-finder-app {
		--ff-font-size--xs: 0.75rem;
		--ff-font-size--sm: 1rem;
		--ff-font-size--md: 1.125rem;
		--ff-font-size--lg: 1.375rem;
		--ff-font-size--xl: 1.5rem;
		--ff-font-size--2xl: 2rem;
		--ff-font-size--3xl: 3.75rem;

		padding-inline: 1.5rem;
	}
}

/** Steps - General **/

#flavor-finder-app .ff-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 44rem;
}

#flavor-finder-app .ff-step__title {
	max-width: 18ch;
	margin-top: auto;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	font-size: var(--ff-font-size--3xl);
	text-align: center;
	text-transform: uppercase;
}

#flavor-finder-app .ff-step__subtitle {
	max-width: 16ch;
	margin-bottom: clamp(1.5rem, -2.5rem + 8vh, 3rem);
	margin-inline: auto;
	font-size: var(--ff-font-size--md);
	text-align: center;
}

#flavor-finder-app .ff-step__grid {
	display: grid;
	gap: 1rem;
	margin-inline: auto;
	margin-bottom: 3rem;
}

#flavor-finder-app .ff-term-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1rem;;
	color: inherit;
	font-size: var(--ff-font-size--md);
	text-transform: uppercase;
	background-color: var(--ff-color--blue-50);
	border-width: 1px;
	border-style: solid;
	border-color: var(--ff-color--blue-400);
	border-radius: 2rem;
}

#flavor-finder-app .ff-term-card--selected {
	background-color: var(--ff-color--green-400);
}

#flavor-finder-app .ff-term-card:hover {
	color: inherit;
}

#flavor-finder-app .ff-term-card__image {
	height: 3rem;
	width: auto;
}

#flavor-finder-app .ff-term-card__name {
	line-height: 0.9;
}

#flavor-finder-app .ff-dropdown__option input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	min-width: 17px;
	border: 2px solid #016BAE;
	background: transparent;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}

#flavor-finder-app .ff-dropdown__option input[type="checkbox"]:checked {
	background-color: #016BAE;
	border-color: #016BAE;
}

#flavor-finder-app .ff-dropdown__option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#flavor-finder-app .ff-term-card__image {
	height: 3rem;
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-term-card {
		font-size: 1em;
	}

	#flavor-finder-app .ff-term-card__image {
		height: 5.5rem;
	}
}

/** Steps - Product Type **/

#flavor-finder-app .ff-step--product-type .ff-step__grid {
	width: 76rem;
	max-width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}

@media (width < 32rem) {
	#flavor-finder-app .ff-step--product-type .ff-step__grid {
		gap: 0.5rem;
	}
}

@media (width >= 32rem) {
	/* Centered wrapping rows so a short last row isn't left-aligned (MT-107/108 left 7 types) */
	#flavor-finder-app .ff-step--product-type .ff-step__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#flavor-finder-app .ff-step--product-type .ff-term-card {
		flex: 0 1 calc((100% - 4rem) / 5);
		min-width: 12rem;
	}
}

/** Steps - Flavor Profile **/

#flavor-finder-app .ff-step--flavor-profile .ff-step__grid {
	max-width: 36rem;
	grid-template-columns: repeat(2, 1fr);
}

#flavor-finder-app .ff-step--flavor-profile .ff-term-card {
	color: var(--ff-color--blue-400);
	border-radius: 1.25rem;
	font-size: var(--ff-font-size--lg);
	min-width:290px;
}

#flavor-finder-app .ff-step--flavor-profile .ff-term-card--selected {
	color: var(--ff-color--blue-600);
}

@media (height >= 62rem) {
	#flavor-finder-app .ff-step--flavor-profile .ff-term-card {
		font-size: var(--ff-font-size--xl);
	}
}

/** Steps - Region **/

#flavor-finder-app .ff-step--region .ff-step__content {
	display: grid;
	column-gap: 2rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	align-items: center;
	width: 100%;
	margin-block: auto;
	padding-bottom: 3rem;
}

#flavor-finder-app .ff-map > svg {
	display: block;
	width: 36rem;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

#flavor-finder-app .ff-map__region path {
	transition: opacity 0.2s;
}

#flavor-finder-app .ff-map__region:hover path {
	opacity: 0.6;
}

#flavor-finder-app .ff-map:has(.ff-map__region--selected) .ff-map__region:not(.ff-map__region--selected) path {
	opacity: 0.6;
}

#flavor-finder-app .ff-map:has(.ff-map__region--selected) .ff-map__region:not(.ff-map__region--selected):hover path {
	opacity: 1;
}

@media (width < 48rem) {
	#flavor-finder-app .ff-step--region .ff-step__actions-right {
		flex-grow: 0;
	}
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-step--region .ff-step__content {
		grid-template-columns: 2fr 3fr;
	}

	#flavor-finder-app .ff-map > svg  {
		margin-inline: unset;
	}

	#flavor-finder-app .ff-step--region .ff-step__title {
		max-width: 8ch;
		text-align: left;
		justify-self: end;
		margin-top: -50%;
		margin-inline: unset;
	}
}


/** Step nav **/

#flavor-finder-app .ff-step__actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	width: 100%;
	margin-top: auto;
	margin-inline: -0.75rem;
	padding-block: clamp(2rem, -4.333rem + 10.67vh, 3rem);
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: var(--ff-color--blue-200);
	transition-property: background-color;
	transition-duration: 200ms;
}

#flavor-finder-app .ff-step__actions-sentinel {
	height: 0;
}

#flavor-finder-app .ff-step__actions--stuck {
	box-shadow: 0 -4px 12px rgba(0, 34, 56, 0.08);
}

#flavor-finder-app .ff-step__actions-center {
	display: none;
}

#flavor-finder-app .ff-step__actions-right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: auto;
	flex-grow: 1;
}

#flavor-finder-app .ff-step__dots {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	margin-inline: 1.5rem;
}

#flavor-finder-app .ff-step__dot {
	width: 6px;
	height: 6px;
	background-color: var(--ff-color--blue-200);
	border-radius: 100%;
}

#flavor-finder-app .ff-step__dot--active {
	background-color: var(--ff-color--blue-600);
}

#flavor-finder-app .ff-step__actions {
	position: sticky;
	width: 100vw;
	z-index: 50;
	bottom: 0;
	padding-inline: 1.5rem;
}

#flavor-finder-app .ff-step__actions--stuck {
	background-color: white;
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-step__actions {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: 'left center right';
		margin-inline: -1.5rem;
	}

	#flavor-finder-app .ff-step__actions-left {
		grid-area: left;
		display: flex;
		justify-content: flex-end;
	}

	#flavor-finder-app .ff-step__actions-center {
		display: block;
		grid-area: center;
	}

	#flavor-finder-app .ff-step__actions-right {
		grid-area: right;
		flex-grow: unset;
		margin-left: unset;
	}
}

/** Results **/

#flavor-finder-app .ff-results {
	margin-inline: 0.75rem;
}

#flavor-finder-app:has(.ff-results) {
	margin-top: 0;
	justify-content: start;
}

#flavor-finder-app .ff-results__title {
	margin-top: 0;
	font-size: var(--ff-font-size--3xl);
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-results {
		margin-inline: 2rem;
	}
}

/** Results - Filter Bar **/

#flavor-finder-app .ff-filter-bar {
	margin-bottom: 2rem;
}

#flavor-finder-app .ff-chips {
	margin-bottom: 4rem;
}

#flavor-finder-app .ff-chips__track {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.75rem;
	overflow-x: scroll;
}

#flavor-finder-app .ff-chip {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: var(--ff-font-size--sm);
	color: inherit;
	text-transform: uppercase;
	white-space: nowrap;
	border: 0;
	border-radius: 10rem;
	background-color: #fff;
	cursor: pointer;
	font-family: 'Deacon';
	font-weight: 600;
	letter-spacing: .03em;
}

/* Keeps the ® inline with the name (as a flex item it got the chip's gap)
   and a little larger, since chip text is already small. */
#flavor-finder-app .ff-chip__label sup.mt-reg {
	font-size: 0.65em;
	top: -0.75em;
}

#flavor-finder-app .ff-chip__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 100%;
	background-color: var(--ff-color--blue-200);
}

#flavor-finder-app .ff-chips__clear {
	font: inherit;
	font-size: var(--ff-font-size--sm);
	text-transform: none;
}

#flavor-finder-app .ff-filter-bar__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

#flavor-finder-app .ff-filter-bar__count {
	width: 100%;
	font-size: var(--ff-font-size--lg);
}

#flavor-finder-app .ff-dropdown {
	position: relative;
	width: 100%;
}

#flavor-finder-app .ff-dropdown__trigger {
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font: inherit;
	font-weight: 400;
	font-size: var(--ff-font-size--md);
	text-transform: none;
	border-radius: 10rem;
	border-width: 2px;
	border-style: solid;
	border-color: var(--ff-color--blue-400);
	background-color: transparent;
	box-shadow: unset;
	min-width: 200px;
}

#flavor-finder-app .ff-dropdown__trigger:hover,
#flavor-finder-app .ff-dropdown__trigger:focus {
	color: inherit;
	background: #CCEBF8;
}

#flavor-finder-app .ff-dropdown__arrow--open {
	display: inline-block;
	rotate: 180deg;
}

#flavor-finder-app .ff-dropdown__menu {
	position: absolute;
	z-index: 5;
	top: calc( 100% + 0.5rem );
	left: 0;
	display: grid;
	gap: 0.75rem;
	width: 100%;
	font-size: var(--ff-font-size--md);
	background-color:#E9F9FF;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
}

#flavor-finder-app .ff-search {
	position: relative;
	z-index: 0;
	width: 100%;
}

#flavor-finder-app .ff-search__input {
	width: 100%;
	padding: 10px 20px;
	font-size: var(--ff-font-size--md);
	color: var(--ff-color--blue-600);
	background-color: #fff;
	border-radius: 10rem;
	border-width: 1px;
	border-style: solid;
	border-color: #fff;
}

#flavor-finder-app .ff-search::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: block;
	width: 1rem;
	height: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.0006 6.49905C13.0006 7.93321 12.535 9.25802 11.7506 10.3329L15.707 14.2917C16.0977 14.6822 16.0977 15.3165 15.707 15.7071C15.3164 16.0976 14.682 16.0976 14.2913 15.7071L10.3349 11.7483C9.25983 12.5325 7.93476 12.9981 6.50032 12.9981C2.90952 12.9981 0 10.0891 0 6.49905C0 2.90895 2.90952 0 6.50032 0C10.0911 0 13.0006 2.90895 13.0006 6.49905ZM6.50032 10.9984C8.98481 10.9984 11.0005 8.98306 11.0005 6.49905C11.0005 4.01504 8.98481 1.99971 6.50032 1.99971C4.01582 1.99971 2.0001 4.01504 2.0001 6.49905C2.0001 8.98306 4.01582 10.9984 6.50032 10.9984Z' fill='%23016BAE'/%3E %3C/svg%3E");
}

#flavor-finder-app .ff-search__input::placeholder {
	color: var(--ff-color--blue-600);
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-chips__track {
		flex-wrap: wrap;
		overflow-x: unset;
	}

	#flavor-finder-app .ff-chips {
		display: flex;
		column-gap: 1.5rem;
		flex-wrap: wrap;
	}

	#flavor-finder-app .ff-filter-bar__count {
		width: unset;
		margin-right: auto;
	}

	#flavor-finder-app .ff-filter-bar__controls {
		justify-content: flex-end;
	}

	#flavor-finder-app .ff-dropdown {
		width: unset;
	}

	#flavor-finder-app .ff-dropdown__menu {
		min-width: 23ch;
		padding: 25px;
	}

	#flavor-finder-app .ff-dropdown__trigger {
		justify-content: space-between;
		width: unset;
		min-width: 245px;
		text-align: left;
		padding:10px 20px;
	}

	#flavor-finder-app .ff-search {
		width: unset;
	}
}

/** Results - Rows **/

#flavor-finder-app .ff-results__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

#flavor-finder-app .ff-result-row {
	background-color: var(--ff-color--blue-100);
	border-radius: 0.5rem;
	padding: 3rem 1.5rem;
}

#flavor-finder-app .ff-result-row__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

#flavor-finder-app .ff-result-row__flavor-image {
	width: 130px;
	height: 80px;
	object-fit: contain;
}

#flavor-finder-app .ff-result-row__product-type-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

#flavor-finder-app .ff-result-row__product-type-image {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

#flavor-finder-app .ff-result-row__product-type {
	font-family: 'Deacon';
	color: var(--ff-color--blue-900);
	font-size:18px;
}

#flavor-finder-app .ff-result-row__flavor-name {
	margin-top: 0;
	font-size: var(--ff-font-size--2xl);
}

#flavor-finder-app .ff-result-row__flavor-image-link {
	display: block;
	flex-shrink: 0;
}

#flavor-finder-app .ff-result-row__flavor-link {
	color: inherit;
	text-decoration: none;
}

#flavor-finder-app .ff-result-row__flavor-link:focus-visible {
	text-decoration: underline;
}

#flavor-finder-app .ff-result-row__brands .splide__slide {
	width: 11rem;
}

#flavor-finder-app .ff-result-row__brands .splide__arrow {
	display: none;
}

#flavor-finder-app .splide__slide {
	height: auto;
}

#flavor-finder-app .ff-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1rem;
	background-color: #fff;
	border-radius: .7rem;
	min-height:181px;
}


#flavor-finder-app .ff-result-row__brands {
	overflow: visible;
}

#flavor-finder-app .splide__track {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

#flavor-finder-app .splide__list,
#flavor-finder-app .splide__slide {
	overflow: visible !important;
}

#flavor-finder-app .splide__slide {
	position: relative;
	z-index: 1;
}

#flavor-finder-app .ff-brand-card {
	position: relative;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.25s ease;
}

#flavor-finder-app .splide__slide:hover {
	z-index: 10;
}

#flavor-finder-app .ff-brand-card:hover {
	transform: scale(1.06);
}

#flavor-finder-app .ff-brand-card__logo-wrap {
	position: relative;
	display: block;
	aspect-ratio: 1.4;
	width: 100%;
	margin-bottom: 1rem;
	color: inherit;
	text-decoration: none;
}

#flavor-finder-app .ff-brand-card:not(:has(.ff-brand-card__link)) .ff-brand-card__logo-wrap {
	margin-bottom: 0;
	margin-top: 0rem;
}

#flavor-finder-app a.ff-brand-card__logo-wrap:hover .ff-brand-card__name {
	text-decoration: underline;
}

#flavor-finder-app .ff-brand-card__logo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#flavor-finder-app .ff-brand-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4rem 0.9rem;
	border-radius: 2rem;
	background-color: var(--ff-color--blue-50);
	color: var(--ff-color--blue-600);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	width: 100%;
	justify-content: space-between;
}

#flavor-finder-app .ff-brand-card__link:hover {
	text-decoration: none;
	background-color:var(--global-palette2);
	color:white;
}

#flavor-finder-app .ff-brand-card__link-arrow {
	font-size: 1.35em;
	line-height: 1;
}

@media (width >= 48rem) {
	#flavor-finder-app .ff-result-row__header {
		flex-direction: row;
		align-items: center;
	}

	#flavor-finder-app .ff-result-row__brands {
		margin-inline: 3rem;
	}

	#flavor-finder-app .ff-result-row__brands .splide__arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: none;
		border-radius: 100%;
		background-color: var(--ff-color--blue-400);
		color: #fff;
		cursor: pointer;
	}

	#flavor-finder-app .ff-result-row__brands .splide__arrow svg {
		width: 0.75rem;
		height: 0.75rem;
		fill: currentColor;
	}

	#flavor-finder-app .ff-result-row__brands .splide__arrow--prev {
		left: -3rem;
		transform: translateY(-50%) scaleX(-1);
	}

	#flavor-finder-app .ff-result-row__brands .splide__arrow--next {
		right: -3rem;
	}

	#flavor-finder-app .ff-result-row__brands .splide__arrow:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

/*Mobile*/

@media (max-width: 768px) {
	#flavor-finder-app .ff-step__title, #flavor-finder-app .ff-results__title {
		font-size: 1.5em !important;
		margin-top: 0;
	}
	#flavor-finder-app:has(.ff-quiz) {
		margin-top: 0;
	}
	#flavor-finder-app .ff-step--flavor-profile .ff-term-card {
		min-width:auto;
	}
	#flavor-finder-app .ff-search__input {
		height:56px !important;
	}
	#flavor-finder-app .ff-result-row {
		padding: 1.3rem 1.3rem;
	}
	#flavor-finder-app .ff-result-row__product-type {
		font-size:15px;
	}
	#flavor-finder-app .ff-result-row__flavor-name {
		line-height: 1;
		margin-top:10px;
	}
	#flavor-finder-app .ff-result-row__header {
		gap:1.2rem;
	}
	#flavor-finder-app .ff-result-row__flavor-image {
		width: 120px;
		height: 60px;
	}
	#flavor-finder-app .ff-chips {
		margin-bottom: 2rem !important;
	}
	/* Smaller brand tiles in the results (MT-130); slide width is set in result-row.js */
	#flavor-finder-app .ff-brand-card {
		min-height: 140px;
		padding: 0.75rem;
	}
	#flavor-finder-app .ff-brand-card__logo-wrap {
		margin-bottom: 0.6rem;
	}
	#flavor-finder-app .ff-brand-card__link {
		padding: 0.35rem 0.7rem;
		font-size: 0.75rem;
	}
}

/* Phones: while the Back/Next/Skip bar is stuck to the bottom of the screen, keep
   its buttons clear of the two fixed corner widgets (CookieYes "revisit consent"
   bottom-left, accessiBe trigger bottom-right), which otherwise sit on top of
   Next and Skip. */
@media (max-width: 767px) {
	.ff-step__actions.ff-step__actions--stuck {
		padding-left: 64px !important;
		padding-right: 64px !important;
	}
}

/* ── Quiz on phones (Julie 11/12) ─────────────────────────────────────────────
   Desktop is untouched: every rule below is inside a phone-only query, except the
   one that hides the new selection count on desktop. */

/* Selection count on Next ("Next (2)"): phones only. */
@media (width >= 48rem) {
	#flavor-finder-app .ff-btn__count {
		display: none;
	}
}

@media (width < 48rem) {
	/* Bottom bar: progress ("Step X of 3" + dots) centred on its own line; below it
	   Back far left, Skip (small) in the middle and Next far right. 64px side
	   padding at all times keeps Back and Next clear of the fixed CookieYes
	   (bottom-left) and accessiBe (bottom-right) icons. */
	#flavor-finder-app .ff-step__actions {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		row-gap: 0.5rem;
		column-gap: 0.75rem;
		padding-top: 1.25rem;
		padding-bottom: 0.75rem;
		padding-inline: 64px;
	}
	#flavor-finder-app .ff-step__actions-center {
		display: block;
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
	}
	#flavor-finder-app .ff-step__actions-left {
		display: flex;
		grid-column: 1;
		grid-row: 2;
		justify-content: flex-start;
	}
	/* Let Next and Skip sit in the bar's grid separately. */
	#flavor-finder-app .ff-step__actions-right,
	#flavor-finder-app .ff-step--region .ff-step__actions-right {
		display: contents;
	}
	#flavor-finder-app .ff-step__actions-right .ff-btn--primary {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
	}
	#flavor-finder-app .ff-step__actions-right .ff-btn--skip {
		grid-column: 2;
		grid-row: 2;
		justify-self: center;
		font-size: 0.75rem;
		opacity: 0.85;
	}
	#flavor-finder-app .ff-step__actions .ff-btn {
		white-space: nowrap;
		gap: 0.4rem;
		padding-block: 0.375rem;
	}
	#flavor-finder-app .ff-step__actions .ff-btn__arrow {
		width: 18px;
		height: auto;
	}

	/* Progress: "Step X of 3" above the dots. */
	#flavor-finder-app .ff-step__dots {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.6rem;
		margin-inline: 0;
	}
	#flavor-finder-app .ff-step__dots::before {
		flex-basis: 100%;
		font-size: 0.625rem;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		white-space: nowrap;
		color: var(--ff-color--blue-600);
	}
	#flavor-finder-app .ff-step--product-type .ff-step__dots::before {
		content: "Step 1 of 3";
	}
	#flavor-finder-app .ff-step--flavor-profile .ff-step__dots::before {
		content: "Step 2 of 3";
	}
	#flavor-finder-app .ff-step--region .ff-step__dots::before {
		content: "Step 3 of 3";
	}
	#flavor-finder-app .ff-step__dot {
		width: 7px;
		height: 7px;
	}
}

/* Step 1 tiles on phones: three compact tiles per row, so all nine types fit
   without scrolling. (512px and up keeps the existing centred-row layout.) */
@media (width < 32rem) {
	#flavor-finder-app .ff-step--product-type .ff-step__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		margin-bottom: 1.5rem;
	}
	#flavor-finder-app .ff-step--product-type .ff-term-card {
		gap: 0.4rem;
		padding: 0.75rem 0.3rem;
		font-size: 0.75rem;
		border-radius: 1.25rem;
	}
	#flavor-finder-app .ff-step--product-type .ff-term-card__image {
		height: 2.25rem;
	}
	#flavor-finder-app .ff-step--product-type .ff-term-card__name {
		line-height: 1.05;
	}
}

/* Results filters on phones: the dropdowns and search collapse behind a
   "Filters" button (styled like the dropdown buttons) so the results show first.
   Chips, Clear All and the result count stay visible. Desktop is unchanged: the
   panel wrapper takes no part in layout and the button is hidden. */
#flavor-finder-app .ff-filter-bar__panel {
	display: contents;
}

#flavor-finder-app .ff-filter-bar__toggle {
	display: none;
}

@media (width < 48rem) {
	#flavor-finder-app .ff-filter-bar__toggle {
		display: flex;
		width: 100%;
	}
	#flavor-finder-app .ff-filter-bar__panel {
		display: none;
		width: 100%;
	}
	#flavor-finder-app .ff-filter-bar__panel--open {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
}