/*
 * Moonlite header, phone menu and footer — replicas of moonlite.com's Elementor Theme Builder
 * header (178), mobile menu popup (1737) and footer (179), with the same measurements:
 * header bar 1270px, footer 1300px; Elementor's breakpoints (880px menu text, 767px phone).
 * Only loaded when the theme draws them (no Theme Builder header/footer on the page).
 *
 * Brand tokens (Elementor kit): orange #F2642F, ink #301E15, cream #FEF3E3, charcoal #2B2B2B.
 */

.ml-header,
.ml-mobile-menu,
.ml-sidecart,
.ml-footer {
	--ml-orange: #F2642F;
	--ml-ink: #301E15;
	--ml-cream: #FEF3E3;
	--ml-charcoal: #2B2B2B;
	--ml-display: "How Dare You", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--ml-text: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.ml-icon {
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
}

/* ------------------------------------------------------------------ Header */

/* Like the live header, it sits over the top of the page: pages start their hero behind it. */
.ml-header {
	position: relative;
	z-index: 10;
	margin-bottom: -170px;
	padding: 40px 0 0;
	font-family: var(--ml-text);
}

.ml-header__bar {
	max-width: 1270px;
	margin: 0 auto;
	padding: 10px;
	background: var(--ml-orange);
}

.ml-header__frame {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid var(--ml-cream);
}

/* Same flex bases as the Elementor containers (30% / 100% / 6%), so it shrinks the same way. */
.ml-header__brand {
	flex: 0 1 30%;
	min-width: 0;
	padding: 10px;
}

.ml-header__nav {
	display: flex;
	flex: 0 1 100%;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 10px;
}

/* Like the live column it may shrink below the icon (≤880px); the icon then sits at its start. */
.ml-header__cart {
	display: flex;
	flex: 0 1 6%;
	min-width: 0;
	padding: 10px;
}

.ml-header__cart .ml-cart {
	margin-inline: auto; /* centred when it fits, start-aligned when it does not */
}

/* An inline image in a text line, as in the live image widget: a short logo sits a touch low. */
.ml-header .ml-logo {
	display: block;
}

.ml-header .ml-logo img {
	display: inline-block;
	width: 100%;
	max-width: none;
	height: auto;
	vertical-align: middle;
}

/* Menu (the live Elementor Pro nav menu: right-aligned, dividers, underline pointer). */
.ml-nav {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.ml-nav .ml-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-nav .ml-nav__list > li {
	position: relative;
	display: flex;
	margin: 0;
	list-style: none;
}

.ml-nav .ml-nav__list > li:not(:last-child)::after {
	content: "";
	align-self: center;
	height: 35%;
	border-left: 2px solid var(--ml-cream);
}

.ml-nav .ml-nav__list > li > a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 7px 0;
	color: var(--ml-cream);
	font-family: var(--ml-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ml-nav .ml-nav__list > li:not(:last-child) > a {
	margin-inline-end: 20px;
}

.ml-nav .ml-nav__list > li:not(:first-child) > a {
	margin-inline-start: 20px;
}

.ml-nav .ml-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--ml-cream);
	opacity: 0;
	transition: opacity .3s;
}

.ml-nav .ml-nav__list > li > a:hover::after,
.ml-nav .ml-nav__list > li > a:focus-visible::after,
.ml-nav .ml-nav__list > li.current-menu-item > a::after,
.ml-nav .ml-nav__list > li.current-menu-ancestor > a::after {
	opacity: 1;
}

/* Elementor's sub-arrow: 10px gap, icon at 0.7em of the menu text. */
.ml-nav .ml-nav__list > li > a .ml-icon--chevron {
	width: .7em;
	height: .7em;
	margin-inline-start: 10px;
}

.ml-nav a:focus-visible {
	outline: 2px solid var(--ml-cream);
	outline-offset: 3px;
}

/* Dropdowns: cream panel, Barlow, hairline dividers, orange on hover. */
.ml-nav .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 20;
	min-width: 130px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ml-cream);
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s, visibility .2s;
}

/* Lined up with the item's text (past the 20px gap), as on the live menu. */
.ml-nav .ml-nav__list > li:not(:first-child) > .sub-menu {
	inset-inline-start: 20px;
}

.ml-nav .ml-nav__list > li:hover > .sub-menu,
.ml-nav .ml-nav__list > li:focus-within > .sub-menu,
.ml-nav .ml-nav__list > li.is-open > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.ml-nav .sub-menu li {
	margin: 0;
	list-style: none;
}

.ml-nav .sub-menu li:not(:last-child) {
	border-bottom: 1px solid rgba(48, 30, 21, .33);
}

.ml-nav .sub-menu a {
	display: block;
	padding: 13px 20px;
	border-inline-start: 8px solid transparent; /* Elementor's sub-item indent */
	color: var(--ml-ink);
	font-family: Barlow, var(--ml-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ml-nav .sub-menu a:hover,
.ml-nav .sub-menu a:focus-visible,
.ml-nav .sub-menu .current-menu-item > a {
	background: var(--ml-orange);
	color: var(--ml-cream);
}

.ml-nav .sub-menu a:focus-visible {
	outline-color: var(--ml-ink);
	outline-offset: -3px;
}

/* Cart icon with the dark count bubble. */
.ml-cart {
	position: relative;
	display: inline-flex;
	color: var(--ml-cream);
	font-size: 25px;
	line-height: 1;
	text-decoration: none;
	transition: color .3s;
}

.ml-cart:hover,
.ml-cart:focus-visible {
	color: var(--ml-ink);
}

.ml-cart:focus-visible,
.ml-burger:focus-visible {
	outline: 2px solid var(--ml-cream);
	outline-offset: 3px;
}

.ml-cart .ml-icon--cart {
	width: 25px;
	height: 25px;
}

/* The live cart widget is 31px tall with the icon at its top, so the icon sits 3px above centre. */
.ml-header__cart .ml-cart {
	margin-bottom: 6px;
}

.ml-cart__count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 100px;
	background: var(--ml-ink);
	color: var(--ml-cream);
	font-family: var(--ml-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	box-sizing: border-box;
}

/* The burger only shows on phones. */
.ml-burger {
	display: none;
	color: var(--ml-cream);
	font-size: 50px;
	line-height: 1;
	text-decoration: none;
	transition: color .3s;
}

.ml-burger:hover {
	color: var(--ml-charcoal);
}

.ml-burger .ml-icon--bars {
	width: 50px;
	height: 50px;
}

@media (max-width: 880px) {
	.ml-nav .ml-nav__list > li > a,
	.ml-nav .sub-menu a {
		font-size: 12px;
	}

	/* The live cart widget is pulled 5px left here (its column stays put). */
	.ml-header__cart .ml-cart {
		inset-inline-start: -5px;
	}
}

@media (max-width: 767px) {
	.ml-header {
		margin-bottom: -220px;
		padding: 20px 10px 0;
	}

	.ml-header__frame {
		gap: 0;
	}

	.ml-header__brand {
		flex-basis: 65%;
	}

	.ml-header .ml-logo img {
		width: 90%;
	}

	.ml-header__nav {
		flex-basis: 20%;
	}

	.ml-header__cart {
		flex-basis: 15%;
	}

	.ml-nav {
		display: none;
	}

	/* The live icon widget's box: column-wide, pulled 10px left, 56px tall, icon at its start. */
	.ml-burger {
		display: flex;
		align-items: flex-start;
		width: 100%;
		height: 56px;
		margin-inline-start: -10px;
	}
}

/* ------------------------------------------------------------------ Phone menu */

.ml-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	overflow-y: auto;
	background: #fff;
	font-family: var(--ml-text);
}

.ml-mobile-menu:target,
.ml-mobile-menu.is-open {
	display: block;
}

html.ml-menu-open {
	overflow: hidden;
}

/* The live popup's orange container: 20px between its parts, 50px above and below. */
.ml-mobile-menu__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 50px 20px;
	background: var(--ml-orange);
}

.ml-mobile-menu__close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #fff;
	line-height: 0;
}

.ml-mobile-menu__close .ml-icon {
	width: 25px;
	height: 25px;
}

.ml-mobile-menu__close:focus-visible,
.ml-mobile-menu a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ml-mobile-menu__logo {
	line-height: 0;
}

.ml-mobile-menu__logo .ml-logo {
	display: block;
}

.ml-mobile-menu__logo img {
	display: block;
	width: 90%;
	max-width: none;
	height: auto;
}

/* Elementor icon list, 2px apart: 40px rows, centred. */
.ml-mobile-menu__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-mobile-menu__links li {
	display: flex;
	justify-content: center;
	margin: 0;
	line-height: 40px;
}

.ml-mobile-menu__links a {
	color: #fff;
	font-family: var(--ml-display);
	font-size: 40px;
	font-weight: 900;
	letter-spacing: 3px;
	line-height: 40px;
	text-decoration: none;
	text-transform: uppercase;
}

.ml-mobile-menu__links a:hover {
	color: var(--ml-ink);
}

/* Facebook and the cart: 30px cream icons, 20px apart (the cart pulled 5px in), 36px rows. */
.ml-mobile-menu__icons {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 10px 0;
}

.ml-mobile-menu__social,
.ml-mobile-menu .ml-cart {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: 36px;
	color: var(--ml-cream);
	line-height: 1;
}

.ml-mobile-menu__social .ml-icon,
.ml-mobile-menu .ml-cart .ml-icon--cart {
	width: 30px;
	height: 30px;
}

.ml-mobile-menu .ml-cart {
	margin-inline-start: -5px;
}

/* Phone and address: 20px icons in a 25px slot, 5px apart, white Roboto. */
.ml-mobile-menu__contact {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.ml-mobile-menu__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #fff;
	font-family: var(--ml-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
}

.ml-mobile-menu__contact .ml-icon {
	width: 20px;
	height: 20px;
	color: #fff;
}

.ml-mobile-menu__contact a {
	color: #fff;
	text-decoration: none;
}

/* ------------------------------------------------------------------ Side cart */

/*
 * The live header's Elementor Pro menu cart, "side cart" type: a 350px cream panel that slides
 * in from the right over a light shade. Same values as its stylesheet and widget settings.
 * Transitions inside name their properties: an "all" transition would also animate the
 * inherited visibility, and the panel could not take focus the moment it opens.
 */
.ml-sidecart {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000; /* above the phone menu, which it can be opened from */
	width: 100vw;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
	text-align: start;
	transform: scale(0);
	visibility: hidden;
	transition: background-color .4s, transform 0s .4s, visibility 0s .4s;
}

.ml-sidecart.is-open {
	background-color: rgba(0, 0, 0, .25);
	transform: scale(1);
	visibility: visible;
	transition: background-color .4s, transform 0s;
}

.ml-sidecart__main {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 350px;
	max-width: 100%;
	min-height: 200px;
	padding: 20px 30px;
	overflow: hidden;
	background-color: var(--ml-cream);
	box-shadow: 0 0 20px rgba(0, 0, 0, .2);
	font-size: 14px;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity .3s, transform .3s;
}

.ml-sidecart.is-open .ml-sidecart__main {
	overflow: visible;
	opacity: 1;
	transform: translateX(0);
}

/* Logged in: start below the WordPress toolbar so the close button stays reachable. */
body.admin-bar .ml-sidecart__main {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The × drawn from two 3px bars (a <button> here, so the reset's button look is undone). */
.ml-sidecart .ml-sidecart__close,
.ml-sidecart .ml-sidecart__close:hover,
.ml-sidecart .ml-sidecart__close:focus {
	position: relative;
	display: inline-block;
	align-self: flex-end;
	width: 25px;
	height: 25px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: none; /* the reset gives buttons "all .3s" */
}

.ml-sidecart__close::before,
.ml-sidecart__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	margin-top: -1px;
	border-radius: 1px;
	background: var(--ml-orange);
	transition: background-color .3s;
}

.ml-sidecart__close::before {
	transform: rotate(45deg);
}

.ml-sidecart__close::after {
	transform: rotate(-45deg);
}

.ml-sidecart__close:hover::before,
.ml-sidecart__close:hover::after {
	background: var(--ml-ink);
}

.ml-sidecart .ml-sidecart__close:focus-visible,
.ml-sidecart a:focus-visible {
	outline: 2px solid var(--ml-ink);
	outline-offset: 2px;
}

.ml-sidecart__content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ml-sidecart__empty {
	font-family: var(--ml-text);
	font-weight: 600;
	text-align: start;
}

.ml-sidecart__products {
	max-height: calc(100vh - 250px);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ml-sidecart__product {
	position: relative;
	display: grid;
	grid-template-columns: 28% auto;
	grid-template-rows: auto auto;
	padding-bottom: 20px;
	padding-inline-end: 30px;
	border-bottom: 1px solid var(--ml-orange);
}

.ml-sidecart__product:not(:first-of-type) {
	padding-top: 20px;
}

.ml-sidecart__product:last-child {
	border: none;
}

.ml-sidecart__product-image {
	grid-row: 1 / 3;
	width: 100%;
}

.ml-sidecart__product-image a,
.ml-sidecart__product-image img {
	display: block;
}

.ml-sidecart__product-image img {
	max-width: 100%;
	height: auto;
}

.ml-sidecart__product-name,
.ml-sidecart__product-price {
	grid-column: 2 / 3;
	padding-inline-start: 20px;
	font-size: 14px;
}

.ml-sidecart__product-name {
	margin: 0;
}

.ml-sidecart__product-name a {
	color: var(--ml-ink);
	font-family: var(--ml-display);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .3s;
}

.ml-sidecart__product-name a:hover {
	color: var(--ml-orange);
}

.ml-sidecart__product-name .variation {
	display: grid;
	grid-template-columns: max-content auto;
	margin: 10px 0;
	color: #1f2124;
}

.ml-sidecart__product-name .variation dt {
	grid-column-start: 1;
}

.ml-sidecart__product-name .variation dd {
	grid-column-start: 2;
	margin-inline-start: 5px;
}

.ml-sidecart__product-name .variation dd p {
	margin-bottom: 0;
}

.ml-sidecart__product-price {
	align-self: end;
	color: var(--ml-orange);
	font-family: var(--ml-display);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 2px;
}

.ml-sidecart__product-price .product-quantity {
	color: var(--ml-orange);
	font-family: var(--ml-display);
	font-size: 20px;
}

/* Round remove button: an × in a 22px ring; the link covers it, invisible. */
.ml-sidecart__product-remove {
	position: absolute;
	bottom: 20px;
	inset-inline-end: 0;
	width: 22px;
	height: 22px;
	overflow: hidden;
	border: 1px solid var(--ml-orange);
	border-radius: 22px;
	text-align: center;
	transition: border-color .3s;
}

.ml-sidecart__product-remove::before,
.ml-sidecart__product-remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 25%;
	z-index: 1;
	width: 50%;
	height: 1px;
	margin-top: -1px;
	background: var(--ml-orange);
	transition: background-color .3s;
}

.ml-sidecart__product-remove::before {
	transform: rotate(45deg);
}

.ml-sidecart__product-remove::after {
	transform: rotate(-45deg);
}

.ml-sidecart__product-remove:hover {
	border-color: var(--ml-ink);
}

.ml-sidecart__product-remove:hover::before,
.ml-sidecart__product-remove:hover::after {
	background: var(--ml-ink);
}

.ml-sidecart__product-remove:focus-within {
	outline: 2px solid var(--ml-ink);
	outline-offset: 2px;
}

.ml-sidecart__product-remove > a {
	position: absolute;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
}

.ml-sidecart__subtotal {
	padding: 20px 0;
	border-color: var(--ml-orange);
	border-style: solid;
	border-width: 1px 0;
	color: var(--ml-orange);
	font-family: var(--ml-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}

.ml-sidecart__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding-top: 20px;
	font-size: 20px;
	text-align: center;
}

.ml-sidecart .ml-sidecart__button {
	display: inline-block;
	height: fit-content;
	padding: 12px 0;
	border-radius: 7px;
	color: #fff;
	font-family: var(--ml-display);
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 3px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .3s, color .3s;
}

.ml-sidecart__button--view-cart {
	background-color: var(--ml-orange);
}

.ml-sidecart__button--checkout,
.ml-sidecart__button--view-cart:hover,
.ml-sidecart__button--view-cart:focus-visible {
	background-color: var(--ml-ink);
}

.ml-sidecart__button--checkout:hover,
.ml-sidecart__button--checkout:focus-visible {
	background-color: var(--ml-orange);
}

@media (max-width: 767px) {
	.ml-sidecart .ml-sidecart__button {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* ------------------------------------------------------------------ Footer */

.ml-footer {
	font-family: var(--ml-text);
}

.ml-footer__main {
	padding: 40px 0;
	background: url("../img/paper-footer.webp") center center;
}

.ml-footer__inner {
	display: flex;
	max-width: 1300px;
	margin: 0 auto;
}

.ml-footer__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.ml-footer__col--brand,
.ml-footer__col--info {
	width: 25%;
	padding: 10px;
}

.ml-footer__col--art {
	width: 50%;
	padding: 0 20px;
}

.ml-footer .ml-logo {
	display: block;
	line-height: 0;
}

.ml-footer .ml-logo img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.ml-footer__intro {
	margin: 0;
	color: var(--ml-ink);
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
}

.ml-footer__credit {
	margin: 0;
	color: var(--ml-orange);
	font-size: 14px;
	font-style: italic;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 30px;
	text-align: center;
}

.ml-footer__credit a {
	color: inherit;
	text-decoration: none;
}

.ml-footer__credit a:hover {
	color: var(--ml-ink);
}

.ml-footer__sketch {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(82%);
}

.ml-footer__sketch--info {
	display: none;
}

/*
 * The link row under the sketch, built like Elementor's inline icon list: 35px apart, with a
 * 3px ink divider that takes up room in the item and is nudged into the middle of the gap.
 */
.ml-footer__nav ul {
	--ml-gap: 35px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 calc(var(--ml-gap) / -2);
	padding: 0;
	list-style: none;
}

.ml-footer__nav li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 calc(var(--ml-gap) / 2);
	list-style: none;
}

.ml-footer__nav li:not(:last-child)::after {
	content: "";
	position: relative;
	inset-inline-end: calc(var(--ml-gap) / -2);
	height: 60%;
	border-inline-start: 3px solid var(--ml-ink);
}

/* The phone row only shows on phones. */
.ml-footer__nav--phone {
	display: none;
}

.ml-footer__nav a {
	color: var(--ml-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .3s;
}

.ml-footer__nav a:hover {
	color: var(--ml-orange);
}

.ml-footer .ml-footer__box-title {
	margin: 8px 0 5px; /* 8px: the heading top margin of the reset the live site runs on */
	padding: 0;
	color: var(--ml-orange);
	font-family: var(--ml-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.2;
	text-transform: uppercase;
}

.ml-footer__box-text {
	margin: 0;
	color: var(--ml-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: 20px;
	text-transform: uppercase;
}

.ml-footer__social {
	display: inline-block;
	align-self: flex-start;
	line-height: 0;
}

.ml-footer__social img {
	display: block;
	width: 40px;
	height: 40px;
}

.ml-footer a:focus-visible {
	outline: 2px solid var(--ml-ink);
	outline-offset: 3px;
}

.ml-footer__bottom {
	padding: 10px;
	background: var(--ml-ink);
}

.ml-footer__bottom p {
	max-width: 1140px; /* the live bar's boxed width */
	margin: 0 auto;
	color: rgba(255, 238, 213, .85);
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .5px;
	line-height: 30px;
	text-align: center;
}

@media (max-width: 767px) {
	.ml-footer__main {
		background-image: url("../img/paper.webp");
		background-size: cover;
	}

	.ml-footer__inner {
		flex-direction: column;
	}

	.ml-footer__col--brand,
	.ml-footer__col--info,
	.ml-footer__col--art {
		width: 100%;
	}

	/* Phones: the sketch moves under the Facebook icon, and the link row tightens to 10px. */
	.ml-footer__col--art .ml-footer__sketch,
	.ml-footer__nav--wide {
		display: none;
	}

	.ml-footer__nav--phone,
	.ml-footer__sketch--info {
		display: block;
	}

	.ml-footer__nav--phone ul {
		--ml-gap: 10px;
	}

	.ml-footer .ml-logo {
		text-align: center;
	}

	.ml-footer .ml-logo img {
		width: 60%;
		margin: 0 auto;
	}

	.ml-footer__intro {
		line-height: 1.5em;
		text-align: center;
	}

	.ml-footer__credit {
		font-size: 13px;
		line-height: 1.2em;
	}

	.ml-footer__box {
		text-align: center;
	}

	.ml-footer__social {
		align-self: center;
	}

	.ml-footer__bottom p {
		font-size: 13px;
		line-height: 1.2em;
	}
}

/* The live footer also shows the second sketch on very wide screens. */
@media (min-width: 2400px) {
	.ml-footer__sketch--info {
		display: block;
	}
}

/* ------------------------------------------------------------------ Page offset */

/*
 * Theme-drawn pages that are not built in Elementor (blog posts, search, 404) have no hero
 * designed to sit under the overlaying header, so their content starts below it.
 */
body.ml-chrome-header:not([class*="elementor-page-"]) .site-main {
	padding-top: 200px;
}

@media (max-width: 767px) {
	body.ml-chrome-header:not([class*="elementor-page-"]) .site-main {
		padding-top: 240px;
	}
}