/* Fox Builder — structural defaults (brand styling belongs in the theme). */

/*
 * Modules sit in the page flow; Section width controls the background span.
 * Text always lives in .fox-module__inner.col-full (site content area).
 */
.fox-module {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * Screen width (default): full-bleed background (Moonstone Compliance pattern).
 * Breaks out of Storefront's centred column. Needed for background-attachment:fixed.
 */
.fox-module.fox-width--screen {
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Content width: background matches the site content column. */
.fox-module.fox-width--content {
	width: 100%;
	max-width: 100%;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
}

/* Optional outer gap (Hero Settings → Outer margin). */
.fox-module.fox-margin-y--1em {
	margin-top: 1em;
	margin-bottom: 1em;
}

.fox-module__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.fox-module__inner {
	position: relative;
	z-index: 2;
}

.fox-spacing--none {
	padding-top: 0;
	padding-bottom: 0;
}

.fox-spacing--sm {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.fox-spacing--md {
	padding-top: 3em;
	padding-bottom: 3em;
}

.fox-spacing--lg {
	padding-top: 4.5em;
	padding-bottom: 4.5em;
}

.fox-bg--light {
	background-color: #f5f5f5;
}

.fox-bg--dark {
	background-color: #1a1f32;
	color: #fff;
}

.fox-bg--image {
	color: #fff;
}

.fox-button {
	--fox-gold: #cfa852;
	--fox-gold-hover: color-mix(in srgb, #cfa852 80%, white);
	--fox-blue: #1a1f32;
	--fox-blue-hover: color-mix(in srgb, #1a1f32 80%, white);
	--fox-white: #ffffff;
	--fox-black: #000000;

	display: inline-block;
	padding: 0.75em 1.5em;
	text-decoration: none;
	font-weight: 300;
	border: 2px solid transparent;
	margin: 0.25em 0.5em 0.25em 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fox-button--small {
	padding: 0.45em 1em;
	font-size: 0.9em;
}

/* ---- Fill + Gold ---- */
.fox-button--fill.fox-button--gold {
	border-color: var(--fox-gold);
	background: var(--fox-gold);
	color: var(--fox-white);
}

.fox-button--fill.fox-button--gold:hover,
.fox-button--fill.fox-button--gold:focus {
	border-color: var(--fox-gold-hover);
	background: var(--fox-gold-hover);
	color: var(--fox-white);
}

/* ---- Fill + Blue ---- */
.fox-button--fill.fox-button--blue {
	border-color: var(--fox-blue);
	background: var(--fox-blue);
	color: var(--fox-white);
}

.fox-button--fill.fox-button--blue:hover,
.fox-button--fill.fox-button--blue:focus {
	border-color: var(--fox-blue-hover);
	background: var(--fox-blue-hover);
	color: var(--fox-white);
}

/* ---- Fill + White ---- */
.fox-button--fill.fox-button--white {
	border-color: var(--fox-white);
	background: var(--fox-white);
	color: var(--fox-black);
}

.fox-button--fill.fox-button--white:hover,
.fox-button--fill.fox-button--white:focus {
	border-color: var(--fox-black);
	background: var(--fox-black);
	color: var(--fox-white);
}

/* ---- Fill + Black ---- */
.fox-button--fill.fox-button--black {
	border-color: var(--fox-black);
	background: var(--fox-black);
	color: var(--fox-white);
}

.fox-button--fill.fox-button--black:hover,
.fox-button--fill.fox-button--black:focus {
	border-color: var(--fox-white);
	background: var(--fox-white);
	color: var(--fox-black);
}

/* ---- Outline + Gold ---- */
.fox-button--outline.fox-button--gold {
	border-color: var(--fox-gold);
	background: transparent;
	color: var(--fox-gold);
}

.fox-button--outline.fox-button--gold:hover,
.fox-button--outline.fox-button--gold:focus {
	border-color: var(--fox-gold);
	background: var(--fox-gold);
	color: var(--fox-white);
}

/* ---- Outline + Blue ---- */
.fox-button--outline.fox-button--blue {
	border-color: var(--fox-blue);
	background: transparent;
	color: var(--fox-blue);
}

.fox-button--outline.fox-button--blue:hover,
.fox-button--outline.fox-button--blue:focus {
	border-color: var(--fox-blue);
	background: var(--fox-blue);
	color: var(--fox-white);
}

/* ---- Outline + White ---- */
.fox-button--outline.fox-button--white {
	border-color: var(--fox-white);
	background: transparent;
	color: var(--fox-white);
}

.fox-button--outline.fox-button--white:hover,
.fox-button--outline.fox-button--white:focus {
	border-color: var(--fox-white);
	background: var(--fox-white);
	color: var(--fox-black);
}

/* ---- Outline + Black ---- */
.fox-button--outline.fox-button--black {
	border-color: var(--fox-black);
	background: transparent;
	color: var(--fox-black);
}

.fox-button--outline.fox-button--black:hover,
.fox-button--outline.fox-button--black:focus {
	border-color: var(--fox-black);
	background: var(--fox-black);
	color: var(--fox-white);
}

/* Fallback hex for browsers without color-mix. */
@supports not (color: color-mix(in srgb, #000 50%, white)) {
	.fox-button {
		--fox-gold-hover: #d9ba75;
		--fox-blue-hover: #474b5b;
	}
}

.fox-align--center {
	text-align: center;
}

.fox-align--left {
	text-align: left;
}

.fox-align--right {
	text-align: left;
}

.fox-align--full {
	text-align: left;
}

/* Hero: place text/buttons in left, middle, or right half (not Full). */
@media (min-width: 768px) {
	.fox-module--hero:not(.fox-align--full) .fox-hero__content {
		width: 100%;
		max-width: 50%;
		box-sizing: border-box;
	}

	.fox-module--hero.fox-align--left .fox-hero__content {
		margin-left: 0;
		margin-right: auto;
	}

	.fox-module--hero.fox-align--center .fox-hero__content {
		margin-left: auto;
		margin-right: auto;
	}

	.fox-module--hero.fox-align--right .fox-hero__content {
		margin-left: auto;
		margin-right: 0;
	}

	/* Full + button to the right = CTA band layout. */
	.fox-module--hero.fox-align--full .fox-hero--buttons-inline .fox-hero__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2em;
		max-width: 100%;
	}

	.fox-module--hero.fox-align--full .fox-hero--buttons-inline .fox-hero__text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.fox-module--hero.fox-align--full .fox-hero--buttons-inline .fox-hero__buttons {
		flex: 0 0 auto;
		margin-top: 0;
		justify-content: flex-end;
	}
}

.fox-module--hero.fox-align--full .fox-hero__content {
	max-width: 100%;
	width: 100%;
}

.fox-module--hero.fox-align--right .fox-hero__buttons {
	justify-content: flex-start;
}

.fox-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 1.25em;
}

.fox-module--hero.fox-align--center .fox-hero__buttons {
	justify-content: center;
}

/* Pipe = vertical accent bar to the left of the heading (Compliance). */
.fox-heading--pipe {
	position: relative;
	display: block;
	padding-left: 0.8em;
	line-height: 1.15;
}

.fox-heading--pipe::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background-color: var(--fox-style-color, #cfa852);
}

/* Underline = short accent line under the heading. */
.fox-heading--underline {
	position: relative;
	display: inline-block;
}

.fox-heading--underline::after {
	content: "";
	display: block;
	width: 3em;
	height: 3px;
	margin-top: 0.5em;
	background: var(--fox-style-color, #cfa852);
}

.fox-align--center .fox-heading--underline::after {
	margin-left: auto;
	margin-right: auto;
}

.fox-align--center .fox-heading--pipe {
	display: inline-block;
	text-align: left;
}

.fox-heading-case--default {
	text-transform: none;
}

.fox-heading-case--uppercase {
	text-transform: uppercase;
}

.fox-heading-case--camelcase {
	text-transform: capitalize;
}

.fox-heading-case--lowercase {
	text-transform: lowercase;
}

.fox-heading-size--xlarge,
.fox-heading-size--medium {
	font-size: calc(var(--fox-heading-size, 1em) * 1.25);
}

.fox-heading-size--large {
	font-size: calc(var(--fox-heading-size, 1em) * 1.12);
}

.fox-heading-size--small {
	font-size: calc(var(--fox-heading-size, 1em) * 0.9);
}

.fox-heading-size--xsmall {
	font-size: calc(var(--fox-heading-size, 1em) * 0.8);
}

.fox-hero {
	position: relative;
}

.fox-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.fox-hero__content {
	position: relative;
	z-index: 1;
}

.fox-hero__logo {
	display: block;
	max-width: 180px;
	height: auto;
	margin-bottom: 1.5em;
}

.fox-align--center .fox-hero__logo {
	margin-left: auto;
	margin-right: auto;
}

.fox-hero__intro {
	margin-top: 0.75em;
}

/* Frame: slanted = left-hand coloured panel over the image (Compliance). */
@media (min-width: 768px) {
	.fox-overlay--slanted {
		clip-path: polygon(0% -1%, 45% -1%, 50% 101%, 0% 101%);
	}

	/*
	 * Slanted copy stays inside .col-full (never past the content area),
	 * and narrower than Align’s half so it fits the clipped panel.
	 */
	.fox-module--hero.fox-frame--slanted .fox-hero__content {
		max-width: 45%;
		width: 100%;
		box-sizing: border-box;
	}
}

/* Frame: text = content sits in a small slanted caption panel. */
.fox-frame--text .fox-module__inner {
	position: relative;
	min-height: 18em;
}

.fox-frame--text .fox-hero__content {
	display: inline-block;
	max-width: 32em;
	padding: 1em 3em 1em 1em;
	background: rgba(0, 0, 0, 0.5);
	clip-path: polygon(0% -1%, 95% -1%, 100% 101%, 0% 101%);
}

.fox-effect--parallax {
	background-attachment: fixed;
}

.fox-hero__heading,
.fox-cta-band__heading,
.fox-media-text__heading,
.fox-card-grid__heading,
.fox-toggle__heading,
.fox-rich-content__heading,
.fox-card__title {
	text-transform: uppercase;
}

/* Beat Storefront / Customiser heading colours so module text colour applies. */
.fox-module h1,
.fox-module h2,
.fox-module h3,
.fox-module h4,
.fox-module h5,
.fox-module h6 {
	color: var(--fox-text-color, inherit);
}

.fox-hero__media img,
.fox-media-text__media img,
.fox-card__icon {
	display: block;
	max-width: 100%;
	height: auto;
}

.fox-card-grid__header {
	text-align: center;
	margin-bottom: 2em;
}

.fox-card {
	background: #1a1f32;
	color: #fff;
	padding: 1.5em;
	text-align: center;
}

.fox-card-grid--feature .fox-card {
	border-bottom: 3px solid #cfa852;
}

.fox-media-text--image-left .fox-media-text__media {
	order: -1;
}

.fox-cta-band__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.fox-toggle__header {
	margin-bottom: 1.25em;
}

.fox-toggle__items {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.fox-toggle__item {
	border: 0;
	margin: 0;
	padding: 0;
	background: var(--fox-toggle-item-bg, transparent);
	color: var(--fox-toggle-item-text, inherit);
}

.fox-toggle__title {
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.85em 1em;
	margin: 0;
}

.fox-toggle__title::-webkit-details-marker {
	display: none;
}

.fox-toggle__title::after {
	content: '+';
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1;
	color: var(--fox-style-color, currentColor);
	transition: transform 0.25s ease;
}

.fox-toggle__item.is-open>.fox-toggle__title::after {
	content: '\2212';
}

.fox-toggle__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.fox-toggle__item.is-open>.fox-toggle__panel {
	grid-template-rows: 1fr;
}

.fox-toggle__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.fox-toggle__content {
	padding: 0 1em 1em;
}

@media (min-width: 768px) {
	.grid-cols-1 {
		grid-template-columns: 1fr;
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.grid-cols-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.fox-media-text--image-left .fox-media-text__media {
		order: -1;
	}
}

@media (max-width: 767px) {
	.fox-cta-band__action {
		justify-content: center;
	}

	.fox-content--slanted {
		max-width: 100%;
	}

	.fox-module--hero .fox-hero__content {
		max-width: 100%;
	}

	.fox-module--hero .fox-hero__buttons {
		justify-content: center;
	}

	.fox-hero,
	.fox-media-text,
	.fox-cta-band {
		text-align: center;
	}

	.fox-heading--pipe {
		display: inline-block;
		text-align: left;
	}

	.fox-chapter__body {
		grid-template-columns: 1fr !important;
	}

	.fox-chapter-card__inner.multi-col {
		grid-template-columns: 1fr !important;
	}
}

/* ============================== CHAPTER ============================== */
.fox-chapter__body {
	display: grid;
	align-items: start;
	margin-bottom: 2em;
}

.fox-chapter__body:last-child {
	margin-bottom: 0;
}

.fox-chapter__body.multi-col {
	grid-gap: 2em;
}

.fox-chapter__body.single-col {
	grid-gap: 1.5em;
}

.fox-chapter__media,
.fox-chapter__text {
	min-width: 0;
}

.fox-chapter__image,
.fox-chapter__video {
	display: block;
	width: 100%;
	height: auto;
}

.fox-chapter__icon {
	font-size: 3em;
	line-height: 1;
}

.fox-chapter__body--crop-4-3 .fox-chapter__media,
.fox-chapter__body--crop-1-1 .fox-chapter__media {
	overflow: hidden;
}

.fox-chapter__body--crop-4-3 .fox-chapter__media {
	aspect-ratio: 4 / 3;
}

.fox-chapter__body--crop-1-1 .fox-chapter__media {
	aspect-ratio: 1 / 1;
}

.fox-chapter__body--crop-4-3 .fox-chapter__image,
.fox-chapter__body--crop-1-1 .fox-chapter__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fox-chapter__heading,
.fox-chapter__subheading {
	margin-top: 0;
}

.fox-chapter__intro,
.fox-chapter__description {
	margin-top: 0.75em;
}

.fox-chapter__intro p {
	margin: 0 0 0.75em;
}

.fox-chapter__intro p:last-child {
	margin-bottom: 0;
}

.fox-chapter__intro ul,
.fox-chapter__intro ol {
	margin: 0.5em 0 0.75em;
	padding-left: 1.25em;
}

.fox-chapter__intro li {
	margin: 0.25em 0;
}

.fox-chapter__buttons {
	margin-top: 1.5em;
}

.fox-chapter__cards {
	display: grid;
}

.fox-chapter-card {
	display: flex;
	flex-direction: column;
}

.fox-chapter-card__inner {
	display: grid;
	height: 100%;
	box-sizing: border-box;
}

.fox-chapter-card__inner.multi-col {
	grid-gap: 1em;
	align-items: stretch;
}

.fox-chapter-card__inner.single-col {
	grid-gap: 0.5em;
	/* Equal Heights sets a fixed card height; without this, auto rows stretch
	   unevenly and titles under top/bottom media no longer line up. */
	align-content: start;
}

.fox-chapter-card__inner.single-col .fox-chapter-card__art {
	align-self: start;
}

.fox-card-eq {
	box-sizing: border-box;
	display: flow-root;
	width: 100%;
}

.fox-chapter-card .block-title,
.fox-chapter-card .block-subtitle,
.fox-chapter-card .block-intro,
.fox-chapter-card .block-description {
	color: inherit;
	text-align: inherit;
}

.fox-chapter-card.card-align-center {
	text-align: center;
}

.fox-chapter-card.card-align-left {
	text-align: left;
}

.fox-chapter-card .block-title {
	margin-bottom: 0;
}

.fox-chapter-card .block-intro,
.fox-chapter-card .block-description,
.fox-chapter-card .block-button {
	margin-top: 1em;
}

.fox-chapter-card__art {
	display: flex;
	width: 100%;
	align-self: stretch;
	align-items: flex-start;
	min-height: 0;
}

.fox-chapter-card.card-align-center .fox-chapter-card__art {
	justify-content: center;
}

.fox-chapter-card .block-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3em;
	line-height: 1;
	width: 100%;
	color: var(--fox-style-color, inherit);
}

.fox-chapter-card .block-icon i {
	color: inherit;
}

.fox-chapter-card .block-image,
.fox-chapter-card .block-video,
.fox-chapter .block-video {
	position: relative;
	width: 100%;
	min-width: 0;
	min-height: 0;
	flex: 0 0 auto;
}

/* Kill inline-link strut under images (can add extra height under the media box). */
.fox-chapter-card .block-image>a {
	display: block;
	line-height: 0;
}

.fox-chapter-card .block-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* PNG/SVG icon recolouring (single-colour transparent artwork). */
.fox-image-tint--white img,
img.fox-image-tint--white {
	filter: brightness(0) invert(1);
}

.fox-image-tint--black img,
img.fox-image-tint--black {
	filter: brightness(0);
}

.fox-image-tint--gold img,
img.fox-image-tint--gold {
	filter: brightness(0) saturate(100%) invert(72%) sepia(36%) saturate(650%) hue-rotate(0deg) brightness(92%) contrast(90%);
}

.fox-image-tint--blue img,
img.fox-image-tint--blue {
	filter: brightness(0) saturate(100%) invert(11%) sepia(12%) saturate(1748%) hue-rotate(186deg) brightness(95%) contrast(92%);
}

.fox-chapter--crop-4-3 .block-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.fox-chapter--crop-1-1 .block-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.fox-chapter--crop-4-3 .block-image img,
.fox-chapter--crop-1-1 .block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.fox-chapter-card .embed-container,
.fox-chapter .embed-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.fox-chapter-card .embed-container iframe,
.fox-chapter .embed-container iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fox-chapter__footnote {
	margin-top: 2em;
}

.fox-chapter-slider {
	position: relative;
	overflow: hidden;
}

.fox-chapter-slider__track {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
	gap: var(--fox-card-gap, 1em);
}

.fox-chapter-slider__slide {
	box-sizing: border-box;
	min-width: 0;
}

.fox-chapter-slider__slide .fox-chapter-card {
	height: 100%;
}

.fox-chapter-slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.75em;
	margin-top: 1em;
}

.fox-chapter-slider__prev,
.fox-chapter-slider__next {
	cursor: pointer;
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	background: transparent;
}

.fox-chapter-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-top: 1em;
}

.fox-chapter-slider__dot {
	width: 0.65em;
	height: 0.65em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
}

.fox-chapter-slider__dot.is-active {
	background: var(--fox-style-color, #1a1f32);
}

/* Contact: form + sidebar cards */
.fox-contact {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

.fox-contact__row {
	display: grid;
	gap: 2em;
	align-items: start;
}

@media (min-width: 768px) {
	.fox-contact__row--split {
		grid-template-columns: minmax(0, 2fr) minmax(14em, 1fr);
	}
}

.fox-contact__form {
	background: #f2f2f2;
	padding: 1.5em;
	box-sizing: border-box;
}

.fox-contact__notice {
	margin: 0;
	padding: 1em;
	background: #fff3cd;
	border: 1px solid #ffc107;
}

.fox-contact__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.fox-contact__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85em;
	align-items: start;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-left: 3px solid #cfa852;
	padding: 1.1em 1.15em;
	box-sizing: border-box;
}

.fox-contact__card-icon {
	color: #cfa852;
	font-size: 1.35em;
	line-height: 1;
	margin-top: 0.15em;
}

.fox-contact__card-title {
	margin: 0 0 0.4em;
	font-size: 0.95em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fox-contact__card-content {
	font-size: 0.92em;
	line-height: 1.55;
}

.fox-contact__card-content p {
	margin: 0 0 0.6em;
}

.fox-contact__card-content p:last-child {
	margin-bottom: 0;
}

.fox-contact__card-content ul {
	margin: 0.4em 0 0;
	padding-left: 1.1em;
}

.fox-contact__card-content li {
	margin: 0.15em 0;
}

.fox-contact__map {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #eee;
}

.fox-contact__map iframe {
	display: block;
	width: 100%;
	min-height: 22em;
	border: 0;
}

/* Post card meta (price / duration) */
.fox-post-card-meta {
	padding: 0.5em 0;
}

.fox-post-card-meta__item {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.5em;
}

.fox-post-card-meta__item:last-child {
	margin-bottom: 0;
}

.fox-post-card-meta__label {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.65;
}

.fox-post-card-meta__value {
	font-size: 0.9em;
}

.fox-post-card-meta__value p {
	margin: 0 0 0.5em;
}

.fox-post-card-meta__value p:last-child {
	margin-bottom: 0;
}

.fox-post-card-target {
	padding: 0.5em 0;
}

.fox-post-card-target__value {
	font-size: 0.9em;
}

.fox-post-card-target__value p {
	margin: 0 0 0.5em;
}

.fox-post-card-target__value p:last-child {
	margin-bottom: 0;
}

/* ---- Popup / lightbox (forms + video) ---- */
.fox-builder-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}

.fox-builder-popup[hidden] {
	display: none;
}

.fox-builder-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.fox-builder-popup__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 42rem;
	max-height: calc(100vh - 3em);
	overflow: auto;
	background: #fff;
	padding: 2em 1.5em 1.5em;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.fox-builder-popup__close {
	position: absolute;
	top: 0.35em;
	right: 0.5em;
	border: 0;
	background: transparent;
	font-size: 1.75em;
	line-height: 1;
	cursor: pointer;
	color: #1a1f32;
	padding: 0.15em 0.35em;
}

.fox-builder-popup__video-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	background: #000;
}

.fox-builder-popup__video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fox-builder-popup__dialog:has(.fox-builder-popup__video:not([hidden])) {
	max-width: 56rem;
	padding: 1em;
	background: #111;
}

.fox-builder-popup__dialog:has(.fox-builder-popup__video:not([hidden])) .fox-builder-popup__close {
	top: 0.15em;
	right: 0.25em;
	color: #fff;
}

html.fox-builder-popup-open {
	overflow: hidden;
}