/*
 * MIM Engine — the storefront frame: header, footer, drawers (menu, cart),
 * shop filters, articles. Tokens (--mie-*) from the site's design settings;
 * dark mode comes with them.
 */

.mie-site-wrap {
	--mie-site-w: 1280px;
	inline-size: 100%;
	max-inline-size: var(--mie-site-w);
	margin-inline: auto;
	padding-inline: clamp(14px, 3.2vw, 28px);
	box-sizing: border-box;
}

body.mie-site {
	background: var(--mie-surface);
	color: var(--mie-ink);
	overflow-x: clip;
}

body.mie-site .site-main,
body.mie-site main#content {
	min-block-size: 40vh;
}

/* ==========================================================================
   Header
   ========================================================================== */

.mie-hdr {
	--_h: 76px;
	--mie-hdr-logo-h: 46px;
	position: relative;
	z-index: 50;
	color: var(--mie-ink);
	font-family: var(--mie-font);
}

.mie-hdr.is-sticky,
.mie-hdr-tpl:has(.mie-hdr.is-sticky) {
	position: sticky;
	top: 0;
}

/* Inside an Elementor template the wrapper is what sticks (a sticky
   element only sticks within its parent). */
.mie-hdr-tpl:has(.mie-hdr.is-sticky) {
	z-index: 60;
}

.mie-hdr-tpl .mie-hdr.is-sticky {
	position: relative;
	top: auto;
}

body.admin-bar .mie-hdr.is-sticky,
body.admin-bar .mie-hdr-tpl:has(.mie-hdr.is-sticky) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .mie-hdr-tpl .mie-hdr.is-sticky {
	top: auto;
}

@media (max-width: 600px) {
	body.admin-bar .mie-hdr.is-sticky,
	body.admin-bar .mie-hdr-tpl:has(.mie-hdr.is-sticky) {
		top: 0;
	}
}

.mie-hdr__bar {
	background: var(--mie-card);
	border-bottom: 1px solid var(--mie-line);
	transition: box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
}

/* Once the page scrolls under it, the bar turns to frosted glass. */
.mie-hdr.is-scrolled .mie-hdr__bar {
	border-bottom-color: color-mix(in srgb, var(--mie-line) 60%, transparent);
	background: color-mix(in srgb, var(--mie-card) 68%, transparent);
	-webkit-backdrop-filter: saturate(1.7) blur(18px);
	backdrop-filter: saturate(1.7) blur(18px);
	box-shadow: 0 12px 32px -22px rgb(var(--mie-ink-rgb) / 0.4);
}

.mie-hdr.is-scrolled.no-glass .mie-hdr__bar {
	background: var(--mie-card);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mie-hdr__row {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 22px);
	min-block-size: var(--_h);
	transition: min-block-size 0.3s;
}

.mie-hdr.is-scrolled .mie-hdr__row {
	min-block-size: calc(var(--_h) - 12px);
}

.mie-hdr__logo,
.mie-ftr__logo,
.mie-drawer__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: var(--mie-ink);
	text-decoration: none;
}

.mie-hdr__logo .mie-logo,
.mie-drawer__logo .mie-logo {
	inline-size: auto;
	block-size: var(--mie-hdr-logo-h, 46px);
	max-inline-size: 170px;
	object-fit: contain;
	transition: block-size 0.3s;
}

.mie-hdr.is-scrolled .mie-hdr__logo .mie-logo {
	block-size: calc(var(--mie-hdr-logo-h, 46px) - 8px);
}

.mie-logo--dark {
	display: none;
}

html[data-mie-theme="dark"] .mie-logo--dark {
	display: block;
}

html[data-mie-theme="dark"] .mie-logo--light:has(+ .mie-logo--dark) {
	display: none;
}

/* A dark logo with no dark version of its own: shown light on dark pages. */
html[data-mie-theme="dark"] .mie-logo--auto {
	filter: brightness(0) invert(0.94);
}

.mie-logo-text {
	font-size: 20px;
	font-weight: 500;
	white-space: nowrap;
}

/* ---------- Menu ---------- */

.mie-hdr__nav {
	flex: 1;
	min-inline-size: 0;
}

.mie-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mie-menu a {
	color: inherit;
	text-decoration: none;
}

.mie-menu--header > li {
	position: relative;
}

.mie-menu--header > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 13px;
	border-radius: 99px;
	color: var(--mie-ink-2, var(--mie-ink));
	font-size: 14.5px;
	transition: background-color 0.2s, color 0.2s;
}

.mie-menu--header > li > a:hover,
.mie-menu--header > li.current-menu-item > a,
.mie-menu--header > li.current-menu-ancestor > a {
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
}

.mie-menu--header > li.menu-item-has-children > a::after {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	margin-inline-start: 4px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.6;
}

.mie-menu--header .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	z-index: 5;
	display: grid;
	min-inline-size: 220px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

.mie-menu--header .sub-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -10px;
	block-size: 10px;
}

.mie-menu--header li:hover > .sub-menu,
.mie-menu--header li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mie-menu--header .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 14px;
}

.mie-menu--header .sub-menu a:hover {
	background: var(--mie-surface-2);
	color: var(--mie-primary-text);
}

/* ---------- Icons, account, cart ---------- */

.mie-hdr__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.mie-hdr .mie-hdr__burger,
.mie-hdr .mie-hdr__icon,
.mie-hdr .mie-search__trigger,
.mie-hdr .mie-theme-toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 1px solid var(--mie-line);
	border-radius: 50%;
	background: var(--mie-card);
	color: var(--mie-ink);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.mie-hdr .mie-hdr__burger:hover,
.mie-hdr .mie-hdr__burger:focus,
.mie-hdr .mie-hdr__icon:hover,
.mie-hdr .mie-search__trigger:hover {
	border-color: var(--mie-line);
	color: var(--mie-ink);
	background: var(--mie-surface-2);
}

.mie-hdr .mie-hdr__burger .mie-icon,
.mie-hdr__icon .mie-icon,
.mie-hdr .mie-search__trigger .mie-icon {
	inline-size: 20px;
	block-size: 20px;
}

/* An edition's own drawing in an icon button (the cafe's menu ⇄ shop). */
.mie-hdr__icon > svg:not(.mie-icon),
.mie-hdr__icon > img {
	inline-size: 24px;
	block-size: 24px;
	object-fit: contain;
}

.mie-hdr__icon > svg:not(.mie-icon) {
	fill: currentColor;
}

.mie-hdr .mie-hdr__burger {
	display: none;
}

.mie-hdr__login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 42px;
	padding: 0 16px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.mie-hdr__login:hover {
	background: var(--mie-surface-2);
	color: var(--mie-ink);
}

.mie-hdr__login .mie-icon {
	inline-size: 20px;
	block-size: 20px;
}

.mie-hdr__login.is-compact span {
	display: none;
}

.mie-hdr__login.is-compact {
	inline-size: 42px;
	padding: 0;
	justify-content: center;
}

.mie-hdr__me {
	position: relative;
}

.mie-hdr__me-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 3px 3px 12px;
	padding-inline: 3px 12px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
}

/* A round face: never squeezed into an oval, the letter in the site's
   font and centred on its own line box. */
.mie-hdr__face {
	display: grid;
	flex: none;
	place-items: center;
	overflow: hidden;
	inline-size: 34px;
	block-size: 34px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
	font-family: var(--mie-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}

.mie-hdr__face > span {
	display: block;
	line-height: 1;
	transform: translateY(-0.1em);
}

.mie-hdr__face img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mie-hdr__me-menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	display: grid;
	min-inline-size: 210px;
	padding: 8px;
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s, transform 0.25s, visibility 0.2s;
}

.mie-hdr__me-menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -10px;
	block-size: 10px;
}

.mie-hdr__me:hover .mie-hdr__me-menu,
.mie-hdr__me:focus-within .mie-hdr__me-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mie-hdr__me-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 12px;
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
}

.mie-hdr__me-menu a:hover {
	background: var(--mie-surface-2);
}

.mie-hdr__me-menu .mie-icon {
	inline-size: 18px;
	block-size: 18px;
	color: var(--mie-muted);
}

.mie-hdr__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-inline-size: 42px;
	min-block-size: 42px;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	background: var(--mie-card);
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}

.mie-hdr__cart:hover {
	color: var(--mie-ink);
	background: var(--mie-surface-2);
}

/* With the total (search-first header): a filled pill. */
.mie-hdr__cart:has(.mie-hdr__cart-total) {
	padding: 0 14px;
	border-color: transparent;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
}

.mie-hdr__cart:has(.mie-hdr__cart-total):hover {
	color: var(--mie-on-primary);
	background: var(--mie-primary);
	filter: brightness(1.06);
}

.mie-hdr__cart .mie-icon {
	inline-size: 21px;
	block-size: 21px;
}

.mie-hdr__cart.is-bump {
	animation: mie-bump 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mie-bump {
	30% { transform: scale(1.12); }
}

.mie-cart-count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: -4px;
	display: grid;
	place-items: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border: 2px solid var(--mie-card);
	border-radius: 99px;
	background: var(--mie-danger);
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

.mie-cart-count[data-count="0"] {
	display: none;
}

.mie-hdr__cart-total {
	font-size: 13.5px;
}

.mie-hdr__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 42px;
	padding: 0 16px;
	border-radius: 99px;
	background: var(--mie-ink);
	color: var(--mie-card);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.mie-hdr__cta:hover {
	color: var(--mie-card);
	opacity: 0.92;
}

.mie-hdr__cta .mie-icon {
	inline-size: 18px;
	block-size: 18px;
}

/* ---------- Variants ---------- */

/* In the header the toggle is one round button: its disc fills it, no second ring. */
.mie-hdr .mie-theme-toggle .mie-theme-toggle__disc {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: none;
}

/* classic: a clean full-width bar; the menu sits in the middle */

@media (min-width: 1025px) {
	.mie-hdr--classic .mie-hdr__nav .mie-menu {
		justify-content: center;
	}
}

.mie-hdr--classic .mie-menu--header > li > a:hover,
.mie-hdr--classic .mie-menu--header > li.current-menu-item > a,
.mie-hdr--classic .mie-menu--header > li.current-menu-ancestor > a {
	background: none;
	color: var(--mie-primary-text);
}

.mie-hdr--classic .mie-menu--header > li > a {
	position: relative;
}

.mie-hdr--classic .mie-menu--header > li.current-menu-item > a::before,
.mie-hdr--classic .mie-menu--header > li > a:hover::before {
	content: "";
	position: absolute;
	inset-inline: 13px;
	inset-block-end: 2px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* search: wide search, menu on a second row */
.mie-hdr__searchwrap {
	flex: 1;
	min-inline-size: 0;
	max-inline-size: 640px;
	margin-inline: auto;
}

.mie-hdr__searchwrap .mie-search,
.mie-hdr__search--form {
	inline-size: 100%;
}

.mie-hdr__search--form {
	display: flex;
	align-items: center;
	block-size: 48px;
	padding-inline: 16px 6px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	background: var(--mie-surface-2);
}

.mie-hdr .mie-hdr__search--form input {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	color: var(--mie-ink);
	font: inherit;
	outline: 0;
}

.mie-hdr .mie-hdr__search--form button,
.mie-hdr .mie-hdr__search--form button:hover,
.mie-hdr .mie-hdr__search--form button:focus {
	padding: 0;
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
	cursor: pointer;
}

.mie-hdr__sub {
	background: var(--mie-card);
	border-bottom: 1px solid var(--mie-line);
}

.mie-hdr__subrow {
	display: flex;
	align-items: center;
	gap: 16px;
	min-block-size: 52px;
}

.mie-hdr__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	color: var(--mie-ink);
	text-decoration: none;
}

.mie-hdr__phone .mie-icon {
	inline-size: 26px;
	block-size: 26px;
	color: var(--mie-primary);
}

.mie-hdr__phone span {
	display: grid;
	line-height: 1.35;
}

.mie-hdr__phone b {
	font-weight: 500;
}

.mie-hdr__phone small {
	color: var(--mie-muted);
	font-size: 11.5px;
}

.mie-hdr.is-scrolled .mie-hdr__sub {
	display: none;
}

/* pill: a floating capsule */
.mie-hdr--pill {
	padding-block-start: 14px;
	pointer-events: none;
}

.mie-hdr--pill .mie-hdr__bar {
	pointer-events: auto;
	max-inline-size: 1120px;
	margin-inline: auto;
	inline-size: calc(100% - 28px);
	border: 1px solid rgb(var(--mie-ink-rgb) / 0.08);
	border-radius: 99px;
	background: var(--mie-card);
	box-shadow: 0 14px 40px -24px rgb(var(--mie-ink-rgb) / 0.5);
}

.mie-hdr--pill .mie-hdr__row {
	--_h: 64px;
	padding-inline: 10px;
}

.mie-hdr--pill .mie-hdr__nav .mie-menu {
	justify-content: center;
}

/* island: a thin brand strip that tucks away, over a rounded frosted bar
   whose menu marks the page with a soft pill. */
.mie-hdr--island {
	--strip-h: 34px;
	transition: transform 0.35s var(--mie-ease-out, ease);
}

.mie-hdr__strip {
	background: linear-gradient(90deg, var(--mie-primary), color-mix(in oklab, var(--mie-accent, var(--mie-primary)) 70%, var(--mie-primary)));
	color: #fff;
	font-size: 12.5px;
}

.mie-hdr__strip .mie-site-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-block-size: var(--strip-h);
}

.mie-hdr__strip a,
.mie-hdr__strip a:hover {
	color: #fff;
	text-decoration: none;
}

.mie-hdr__strip-note,
.mie-hdr__strip-tel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mie-hdr__strip .mie-icon {
	inline-size: 16px;
	block-size: 16px;
	opacity: 0.9;
}

.mie-hdr__strip-tel b {
	font-weight: 500;
	letter-spacing: 0.02em;
}

.mie-hdr--island .mie-hdr__bar,
.mie-hdr--island.is-scrolled .mie-hdr__bar {
	padding-block: 10px;
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mie-hdr--island .mie-hdr__row {
	--_h: 66px;
	padding-inline: 14px 10px;
	border: 1px solid color-mix(in srgb, var(--mie-line) 75%, transparent);
	border-radius: 22px;
	background: color-mix(in srgb, var(--mie-card) 86%, transparent);
	box-shadow: 0 12px 34px -26px rgb(var(--mie-ink-rgb) / 0.4);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	transition: background-color 0.3s, box-shadow 0.3s, min-block-size 0.3s;
}

.mie-hdr--island.is-scrolled {
	transform: translateY(calc(-1 * var(--strip-h)));
}

.mie-hdr--island.is-scrolled .mie-hdr__row {
	background: color-mix(in srgb, var(--mie-card) 64%, transparent);
	box-shadow: 0 20px 44px -28px rgb(var(--mie-ink-rgb) / 0.5);
}

.mie-hdr--island .mie-hdr__nav .mie-menu {
	justify-content: center;
}

.mie-hdr--island .mie-menu--header > li > a {
	position: relative;
	z-index: 0;
	border-radius: 14px;
	background: none;
}

.mie-hdr--island .mie-menu--header > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--mie-primary-soft);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.25s, transform 0.3s var(--mie-ease-out, ease);
}

.mie-hdr--island .mie-menu--header > li > a:hover,
.mie-hdr--island .mie-menu--header > li.current-menu-item > a,
.mie-hdr--island .mie-menu--header > li.current-menu-ancestor > a {
	background: none;
}

.mie-hdr--island .mie-menu--header > li > a:hover::before,
.mie-hdr--island .mie-menu--header > li.current-menu-item > a::before,
.mie-hdr--island .mie-menu--header > li.current-menu-ancestor > a::before {
	opacity: 1;
	transform: none;
}

/* The call to action: brand colour with a live dot. */
.mie-hdr--island .mie-hdr__cta {
	position: relative;
	gap: 8px;
	padding-inline: 14px 16px;
	border-radius: 14px;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
	box-shadow: 0 10px 24px -14px rgb(var(--mie-primary-rgb) / 0.9);
}

.mie-hdr--island .mie-hdr__cta:hover {
	color: var(--mie-on-primary);
	opacity: 1;
	transform: translateY(-1px);
}

.mie-hdr--island .mie-hdr__cta::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgb(74 222 128 / 0.28);
	order: -1;
}

.mie-hdr--island .mie-hdr__cta .mie-icon {
	display: none;
}

@media (max-width: 900px) {
	.mie-hdr--island {
		--strip-h: 0px;
	}

	.mie-hdr__strip {
		display: none;
	}

	.mie-hdr--island .mie-hdr__bar {
		padding: 8px 10px;
	}

	.mie-hdr--island .mie-hdr__row {
		--_h: 58px;
		padding-inline: 8px;
		border-radius: 18px;
	}

	.mie-hdr--island .mie-hdr__cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mie-hdr--island {
		transition: none;
	}
}

/* minimal: logo in the middle */
.mie-hdr--minimal .mie-hdr__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.mie-hdr.mie-hdr--minimal .mie-hdr__burger {
	display: inline-grid;
}

.mie-hdr__side {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mie-hdr--minimal .mie-hdr__logo {
	justify-self: center;
}

.mie-hdr--minimal .mie-hdr__actions {
	justify-self: end;
}

/* promo: announcement strip */
.mie-hdr__announce {
	background: var(--mie-gradient, var(--mie-primary));
	color: var(--mie-on-primary, #fff);
	font-size: 13px;
	text-align: center;
}

.mie-hdr__announce .mie-site-wrap {
	padding-block: 8px;
}

.mie-hdr__announce a,
.mie-hdr__announce span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.mie-hdr__announce .mie-icon {
	inline-size: 16px;
	block-size: 16px;
}

.mie-hdr.is-scrolled .mie-hdr__announce {
	display: none;
}

/* transparent over a hero (until scrolled) */
.mie-hdr.is-transparent:not(.is-scrolled) .mie-hdr__bar {
	background: transparent;
	border-color: transparent;
}

/* ---------- Phones and tablets ---------- */

@media (max-width: 1024px) {
	.mie-hdr {
		--_h: 64px;
		--mie-hdr-logo-h: 38px;
	}

	.mie-hdr .mie-hdr__burger {
		display: inline-grid;
	}

	.mie-hdr__nav,
	.mie-hdr__me-name,
	.mie-hdr__cart-total,
	.mie-hdr__cta,
	.mie-hdr__phone {
		display: none;
	}

	.mie-hdr__login span {
		display: none;
	}

	.mie-hdr__login {
		inline-size: 42px;
		padding: 0;
		justify-content: center;
	}

	.mie-hdr__me-btn {
		padding: 3px;
	}

	.mie-hdr__cart {
		inline-size: 42px;
		padding: 0;
		justify-content: center;
	}

	.mie-hdr__logo .mie-logo {
		max-inline-size: 130px;
	}

	.mie-hdr__sub {
		display: none;
	}

	.mie-hdr--search .mie-hdr__row {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.mie-hdr--search .mie-hdr__searchwrap {
		order: 5;
		flex-basis: 100%;
		max-inline-size: none;
		padding-block-end: 10px;
	}

	.mie-hdr--pill .mie-hdr__bar {
		inline-size: calc(100% - 20px);
	}
}

/* Phones: menu, logo, search, day/night, account and cart all stay in reach. */
@media (max-width: 480px) {
	.mie-hdr__row {
		gap: 8px;
	}

	.mie-hdr__actions {
		gap: 5px;
	}

	.mie-hdr .mie-hdr__burger,
	.mie-hdr .mie-search__trigger,
	.mie-hdr .mie-theme-toggle,
	.mie-hdr__login,
	.mie-hdr__cart,
	.mie-hdr__icon,
	.mie-hdr__me-btn {
		inline-size: 38px !important;
		block-size: 38px !important;
		min-block-size: 38px !important;
		min-inline-size: 38px !important;
	}

	/* The face fills the round button (whatever its size) and stays round. */
	.mie-hdr__me-btn .mie-hdr__face {
		inline-size: 100%;
		block-size: 100%;
		font-size: 14px;
	}

	.mie-hdr__logo .mie-logo {
		max-inline-size: 104px;
	}

	/* Many buttons: no rings, a little closer — the row reads as one line of icons. */
	.mie-hdr.is-crowded .mie-hdr__actions {
		gap: 1px;
	}

	.mie-hdr.is-crowded .mie-hdr__actions .mie-hdr__icon,
	.mie-hdr.is-crowded .mie-hdr__actions .mie-search__trigger,
	.mie-hdr.is-crowded .mie-hdr__actions .mie-theme-toggle,
	.mie-hdr.is-crowded .mie-hdr__actions .mie-hdr__login,
	.mie-hdr.is-crowded .mie-hdr__actions .mie-hdr__cart {
		border-color: transparent;
		background: transparent;
	}
}

@media (max-width: 370px) {
	.mie-hdr .mie-hdr__burger,
	.mie-hdr .mie-search__trigger,
	.mie-hdr .mie-theme-toggle,
	.mie-hdr__login,
	.mie-hdr__cart,
	.mie-hdr__icon,
	.mie-hdr__me-btn {
		inline-size: 35px !important;
		block-size: 35px !important;
		min-block-size: 35px !important;
		min-inline-size: 35px !important;
	}

	.mie-hdr__logo .mie-logo {
		max-inline-size: 88px;
	}
}

/* ==========================================================================
   Drawers (menu, cart, filters on phones)
   ========================================================================== */

.mie-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
}

.mie-drawer[hidden] {
	display: none;
}

.mie-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgb(var(--mie-scrim-rgb, 15 15 30) / 0.45);
	opacity: 0;
	transition: opacity 0.3s;
}

.mie-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	inline-size: min(420px, 92vw);
	block-size: 100%;
	margin-inline-start: 0;
	background: var(--mie-card);
	color: var(--mie-ink);
	box-shadow: var(--mie-shadow-lg);
	outline: 0;
	transform: translateX(105%);
	transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.mie-drawer--end {
	justify-content: flex-end;
}

/* RTL: «start» is the right edge. */
[dir="rtl"] .mie-drawer--start .mie-drawer__panel,
.rtl .mie-drawer--start .mie-drawer__panel {
	transform: translateX(105%);
}

[dir="rtl"] .mie-drawer--end .mie-drawer__panel,
.rtl .mie-drawer--end .mie-drawer__panel {
	transform: translateX(-105%);
}

.mie-drawer.is-open .mie-drawer__scrim {
	opacity: 1;
}

.mie-drawer.is-open .mie-drawer__panel {
	transform: none !important;
}

.mie-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--mie-line);
}

.mie-drawer__head strong {
	font-size: 16px;
	font-weight: 500;
}

.mie-drawer .mie-drawer__x,
.mie-drawer .mie-drawer__x:hover,
.mie-drawer .mie-drawer__x:focus {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mie-surface-2);
	color: var(--mie-ink);
	cursor: pointer;
}

.mie-drawer__body {
	display: grid;
	align-content: start;
	gap: 16px;
	flex: 1;
	overflow-y: auto;
	padding: 16px 18px 24px;
	overscroll-behavior: contain;
}

.mie-drawer__brand .mie-logo {
	block-size: 42px;
}

.mie-drawer__search {
	display: flex;
	align-items: center;
	block-size: 46px;
	padding-inline: 14px 4px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	background: var(--mie-surface-2);
}

.mie-drawer .mie-drawer__search input {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	color: var(--mie-ink);
	font: inherit;
	outline: 0;
}

.mie-drawer .mie-drawer__search button,
.mie-drawer .mie-drawer__search button:hover,
.mie-drawer .mie-drawer__search button:focus {
	padding: 0;
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
}

.mie-menu--drawer {
	display: grid;
	gap: 2px;
}

.mie-menu--drawer li {
	position: relative;
}

.mie-menu--drawer > li > a {
	display: block;
	padding: 12px 14px;
	border-radius: 14px;
	font-size: 15px;
}

.mie-menu--drawer > li > a:hover,
.mie-menu--drawer > li.current-menu-item > a {
	background: var(--mie-surface-2);
	color: var(--mie-primary-text);
}

.mie-menu--drawer .sub-menu {
	display: none;
	margin: 0 0 6px;
	padding: 0 14px 0 0;
	padding-inline: 14px 0;
	border-inline-start: 2px solid var(--mie-line);
	list-style: none;
}

.mie-menu--drawer li.is-open > .sub-menu {
	display: grid;
}

.mie-menu--drawer .sub-menu a {
	display: block;
	padding: 9px 12px;
	color: var(--mie-ink-2, var(--mie-ink));
	font-size: 14px;
}

.mie-drawer .mie-sub-toggle,
.mie-drawer .mie-sub-toggle:hover,
.mie-drawer .mie-sub-toggle:focus {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--mie-muted);
	cursor: pointer;
	transition: transform 0.25s;
}

li.is-open > .mie-sub-toggle {
	transform: rotate(180deg);
}

.mie-drawer__quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mie-drawer__quick a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--mie-line);
	border-radius: 14px;
	color: var(--mie-ink);
	font-size: 13.5px;
	text-decoration: none;
}

.mie-drawer__quick .mie-icon {
	color: var(--mie-primary);
}

.mie-drawer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--mie-line);
}

.mie-drawer__contact > a:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: auto;
	color: var(--mie-ink);
	text-decoration: none;
}

.mie-drawer__theme {
	display: flex;
}

/* ---------- Mini cart ---------- */

.mie-drawer--cart .mie-drawer__panel {
	inline-size: min(440px, 94vw);
}

.mie-mcart__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-block-size: 0;
}

.mie-mcart__body--empty {
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 30px;
	text-align: center;
}

.mie-mcart__empty-icon {
	display: grid;
	place-items: center;
	inline-size: 76px;
	block-size: 76px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--mie-primary-soft);
	color: var(--mie-primary);
}

.mie-mcart__empty-icon .mie-icon {
	inline-size: 34px;
	block-size: 34px;
}

.mie-mcart__body--empty strong {
	font-size: 16px;
	font-weight: 500;
}

.mie-mcart__body--empty p {
	margin: 0 0 8px;
	color: var(--mie-muted);
}

.mie-mcart__list {
	display: grid;
	align-content: start;
	gap: 10px;
	flex: 1;
	overflow-y: auto;
	margin: 0;
	padding: 14px 16px;
	list-style: none;
	overscroll-behavior: contain;
}

.mie-mcart__item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	transition: opacity 0.25s;
}

.mie-mcart__item.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.mie-mcart__thumb {
	display: block;
	overflow: hidden;
	inline-size: 76px;
	block-size: 76px;
	border-radius: 14px;
	background: var(--mie-surface-2);
}

.mie-mcart__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mie-mcart__info {
	display: grid;
	align-content: space-between;
	gap: 6px;
	min-inline-size: 0;
}

.mie-mcart__name {
	overflow: hidden;
	color: var(--mie-ink);
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mie-mcart__meta {
	color: var(--mie-muted);
	font-size: 12px;
}

.mie-mcart__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mie-mcart__price {
	font-size: 14px;
	font-weight: 500;
}

.mie-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
}

.mie-mcart__body .mie-qty button,
.mie-mcart__body .mie-qty button:hover,
.mie-mcart__body .mie-qty button:focus {
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mie-surface-2);
	color: var(--mie-ink);
	cursor: pointer;
}

.mie-mcart__body .mie-qty button .mie-icon {
	inline-size: 16px;
	block-size: 16px;
}

.mie-qty span {
	min-inline-size: 26px;
	text-align: center;
	font-size: 14px;
}

.mie-mcart__foot {
	display: grid;
	gap: 8px;
	padding: 14px 16px 18px;
	border-top: 1px solid var(--mie-line);
	background: var(--mie-card);
}

.mie-mcart__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
}

.mie-mcart__sum b {
	font-size: 18px;
	font-weight: 500;
}

.mie-mcart__note {
	color: var(--mie-muted);
	font-size: 12px;
}

.mie-mcart__btns {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
}

/* Free shipping, in both cart looks: what is left, and a bar. */
.mie-mcart__free {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0 16px 10px;
	padding: 10px 12px 14px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
	font-size: 13px;
}

.mie-mcart__free .mie-icon {
	inline-size: 18px;
	block-size: 18px;
}

.mie-mcart__free b {
	font-weight: 500;
}

.mie-mcart__free i {
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 6px;
	block-size: 4px;
	border-radius: 4px;
	background: rgb(var(--mie-primary-rgb) / 0.16);
}

.mie-mcart__free i::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--p, 0%);
	border-radius: inherit;
	background: var(--mie-primary);
	transition: inline-size 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mie-mcart__free.is-done {
	background: var(--mie-success-soft);
	color: var(--mie-success-text);
}

.mie-mcart__free.is-done i::after {
	background: var(--mie-success);
}

/* ---------- Cart look «float»: a card off the edge, the brand band on top ---------- */

.mie-cart-style--float .mie-drawer__panel {
	margin: 12px;
	block-size: calc(100% - 24px);
	inline-size: min(420px, calc(100vw - 24px));
	overflow: hidden;
	border-radius: var(--mie-radius-xl, 26px);
	box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.45);
}

.mie-cart-style--float .mie-drawer__head {
	padding: 18px 20px;
	border: 0;
	background: var(--mie-gradient, var(--mie-primary));
	color: #fff;
}

.mie-cart-style--float .mie-drawer__head strong {
	color: #fff;
}

.mie-cart-style--float .mie-drawer__x,
.mie-cart-style--float .mie-drawer__x:hover,
.mie-cart-style--float .mie-drawer__x:focus {
	background: rgb(255 255 255 / 0.14);
	color: #fff;
}

.mie-cart-style--float .mie-mcart__list {
	gap: 0;
	padding: 6px 18px;
}

.mie-cart-style--float .mie-mcart__item {
	grid-template-columns: 64px minmax(0, 1fr);
	padding: 14px 0;
	border: 0;
	border-bottom: 1px dashed var(--mie-line);
	border-radius: 0;
}

.mie-cart-style--float .mie-mcart__item:last-child {
	border-bottom: 0;
}

.mie-cart-style--float .mie-mcart__thumb {
	inline-size: 64px;
	block-size: 64px;
	border-radius: 18px;
	background: var(--mie-primary-soft);
}

.mie-cart-style--float .mie-mcart__thumb img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mie-cart-style--float .mie-mcart__price {
	color: var(--mie-primary-text);
}

.mie-cart-style--float .mie-qty {
	border: 0;
	background: var(--mie-surface-2);
}

.mie-cart-style--float .mie-mcart__body .mie-qty button,
.mie-cart-style--float .mie-mcart__body .mie-qty button:hover {
	background: var(--mie-card);
}

.mie-cart-style--float .mie-mcart__free {
	margin-top: 6px;
}

.mie-cart-style--float .mie-mcart__foot {
	padding: 14px 18px 18px;
	border: 0;
	background: var(--mie-surface);
}

.mie-cart-style--float .mie-mcart__btns {
	grid-template-columns: 1fr;
}

/* One wide «pay» button; «view the cart» becomes a quiet link under it. */
.mie-cart-style--float .mie-mcart__btns .mie-btn--primary {
	order: -1;
	min-block-size: 52px;
	font-size: 15px;
}

.mie-cart-style--float .mie-mcart__btns .mie-btn--soft {
	min-block-size: 0;
	padding: 4px;
	background: none;
	box-shadow: none;
	color: var(--mie-muted);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

html[data-mie-theme="dark"] .mie-cart-style--float .mie-mcart__thumb img {
	mix-blend-mode: normal;
}

/* Phones: a sheet from the bottom. */
@media (max-width: 560px) {
	.mie-drawer.mie-cart-style--float {
		align-items: flex-end;
	}

	.mie-cart-style--float .mie-drawer__panel {
		margin: 0;
		inline-size: 100%;
		block-size: auto;
		max-block-size: 88vh;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	[dir="rtl"] .mie-cart-style--float.mie-drawer--end .mie-drawer__panel,
	.rtl .mie-cart-style--float.mie-drawer--end .mie-drawer__panel {
		transform: translateY(105%);
	}
}

/* ---------- Cart look «sheet»: rises from the bottom, centred; items as tiles ---------- */

.mie-drawer.mie-cart-style--sheet {
	align-items: flex-end;
	justify-content: center;
}

.mie-cart-style--sheet .mie-drawer__panel,
[dir="rtl"] .mie-cart-style--sheet.mie-drawer--end .mie-drawer__panel,
.rtl .mie-cart-style--sheet.mie-drawer--end .mie-drawer__panel {
	inline-size: min(780px, 100%);
	block-size: auto;
	max-block-size: min(86vh, 780px);
	overflow: hidden;
	border-radius: 28px 28px 0 0;
	transform: translateY(105%);
}

/* The grab handle. */
.mie-cart-style--sheet .mie-drawer__panel::before {
	content: "";
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 50%;
	z-index: 2;
	inline-size: 44px;
	block-size: 5px;
	border-radius: 3px;
	background: var(--mie-line-strong);
	transform: translateX(50%);
}

.mie-cart-style--sheet .mie-drawer__head {
	padding: 26px 22px 12px;
	border: 0;
}

.mie-cart-style--sheet .mie-drawer__head strong {
	font-size: 18px;
	font-weight: 500;
}

.mie-cart-style--sheet .mie-mcart__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 4px 22px 14px;
}

.mie-cart-style--sheet .mie-mcart__item {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	background: var(--mie-surface);
}

.mie-cart-style--sheet .mie-mcart__thumb {
	border-radius: 14px;
	background: #fff;
}

.mie-cart-style--sheet .mie-mcart__thumb img {
	object-fit: contain;
}

.mie-cart-style--sheet .mie-mcart__free {
	margin-inline: 22px;
}

.mie-cart-style--sheet .mie-mcart__foot {
	position: sticky;
	inset-block-end: 0;
	padding: 14px 22px 20px;
	border: 0;
	background: linear-gradient(to top, var(--mie-card) 72%, color-mix(in srgb, var(--mie-card) 0%, transparent));
}

.mie-cart-style--sheet .mie-mcart__btns {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
}

.mie-cart-style--sheet .mie-mcart__btns .mie-btn--primary {
	order: 2;
	min-block-size: 54px;
	border-radius: 18px;
	background: linear-gradient(100deg, var(--mie-primary), color-mix(in oklab, var(--mie-accent, var(--mie-primary)) 55%, var(--mie-primary)));
	font-size: 15px;
}

.mie-cart-style--sheet .mie-mcart__btns .mie-btn--soft {
	order: 1;
	min-block-size: 54px;
	padding-inline: 18px;
	border-radius: 18px;
}

@media (max-width: 640px) {
	.mie-cart-style--sheet .mie-drawer__panel,
	[dir="rtl"] .mie-cart-style--sheet.mie-drawer--end .mie-drawer__panel,
	.rtl .mie-cart-style--sheet.mie-drawer--end .mie-drawer__panel {
		max-block-size: 92vh;
		border-radius: 24px 24px 0 0;
	}

	.mie-cart-style--sheet .mie-mcart__list {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 16px;
	}

	.mie-cart-style--sheet .mie-mcart__foot {
		padding-inline: 16px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mie-ftr {
	margin-top: clamp(40px, 7vw, 90px);
	border-top: 1px solid var(--mie-line);
	background: var(--mie-card);
	color: var(--mie-ink);
	font-size: 14px;
}

.mie-ftr a {
	color: inherit;
	text-decoration: none;
}

.mie-ftr a:hover {
	color: var(--mie-primary-text);
}

.mie-ftr__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	padding-block: 26px;
	border-bottom: 1px solid var(--mie-line);
}

.mie-ftr__feature {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mie-ftr__feature-icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 16px;
	background: var(--mie-primary-soft);
	color: var(--mie-primary);
}

.mie-ftr__feature-icon .mie-icon {
	inline-size: 24px;
	block-size: 24px;
}

.mie-ftr__feature span {
	display: grid;
	line-height: 1.6;
}

.mie-ftr__feature b {
	font-weight: 500;
}

.mie-ftr__feature small {
	color: var(--mie-muted);
	font-size: 12.5px;
}

.mie-ftr__grid {
	display: grid;
	grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: 28px;
	padding-block: 38px;
}

.mie-ftr__brand {
	display: grid;
	align-content: start;
	gap: 12px;
}

.mie-ftr__brand p {
	margin: 0;
	color: var(--mie-muted);
	line-height: 2;
}

.mie-ftr__logo .mie-logo {
	block-size: 46px;
	inline-size: auto;
	max-inline-size: 180px;
	object-fit: contain;
}

.mie-ftr__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mie-social {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border: 1px solid var(--mie-line);
	border-radius: 14px;
	color: var(--mie-ink) !important;
	transition: background-color 0.2s, transform 0.2s;
}

.mie-social:hover {
	background: var(--mie-primary-soft);
	transform: translateY(-2px);
}

.mie-ftr__col summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 500;
	list-style: none;
	cursor: default;
}

.mie-ftr__col summary::-webkit-details-marker {
	display: none;
}

.mie-ftr__col summary .mie-icon {
	display: none;
}

.mie-menu--footer {
	display: grid;
	gap: 9px;
}

.mie-menu--footer a,
.mie-ftr__contact > * {
	color: var(--mie-ink-2, var(--mie-ink));
}

.mie-ftr__contact {
	display: grid;
	gap: 10px;
}

.mie-ftr__contact > * {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.8;
}

.mie-ftr__contact .mie-icon {
	margin-top: 4px;
	color: var(--mie-primary);
}

.mie-ftr__bottom {
	border-top: 1px solid var(--mie-line);
}

.mie-ftr__bottomrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 16px;
	color: var(--mie-muted);
}

.mie-ftr__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mie-ftr__trust img {
	max-block-size: 76px;
	inline-size: auto;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
}

.mie-ftr__center {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding-block: 40px;
	text-align: center;
}

.mie-ftr__center p {
	max-inline-size: 560px;
	margin: 0;
	color: var(--mie-muted);
	line-height: 2;
}

.mie-menu--row {
	justify-content: center;
	gap: 6px 18px;
}

.mie-ftr__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
}

.mie-ftr__center small {
	color: var(--mie-muted);
}

.mie-ftr__compact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 22px;
}

.mie-ftr--dark {
	border-top: 0;
	background: var(--mie-nav, #1b1630);
	color: #fff;
}

.mie-ftr--dark .mie-ftr__brand p,
.mie-ftr--dark .mie-menu--footer a,
.mie-ftr--dark .mie-ftr__contact > *,
.mie-ftr--dark .mie-ftr__bottomrow {
	color: rgb(255 255 255 / 0.72);
}

.mie-ftr--dark a:hover {
	color: #fff;
}

.mie-ftr--dark .mie-social {
	border-color: rgb(255 255 255 / 0.16);
	color: #fff !important;
}

.mie-ftr--dark .mie-ftr__bottom {
	border-color: rgb(255 255 255 / 0.12);
}

.mie-ftr--dark .mie-logo-text {
	color: #fff;
}

.mie-ftr__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: -1px;
	padding: 24px 28px;
	border-radius: 0 0 28px 28px;
	background: var(--mie-gradient, var(--mie-primary));
	color: #fff;
}

.mie-ftr__cta div {
	display: grid;
	gap: 4px;
}

.mie-ftr__cta strong {
	font-size: 18px;
	font-weight: 500;
}

.mie-ftr__cta span {
	opacity: 0.85;
}

.mie-btn--light {
	--_bg: #fff;
	--_fg: var(--mie-ink);
}

.mie-ftr--app {
	border-top: 0;
	background: transparent;
}

.mie-ftr__panel {
	padding: 6px clamp(16px, 3vw, 34px) 0;
	border: 1px solid var(--mie-line);
	border-radius: 32px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-sm);
}

.mie-ftr--app .mie-ftr__bottom {
	border: 0;
}

@media (max-width: 760px) {
	.mie-ftr__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
		padding-block: 24px;
	}

	.mie-ftr__brand {
		margin-bottom: 14px;
	}

	.mie-ftr__col {
		border-bottom: 1px solid var(--mie-line);
	}

	.mie-ftr--dark .mie-ftr__col {
		border-color: rgb(255 255 255 / 0.12);
	}

	.mie-ftr__col summary {
		margin: 0;
		padding-block: 14px;
		cursor: pointer;
	}

	.mie-ftr__col summary .mie-icon {
		display: block;
		transition: transform 0.25s;
	}

	.mie-ftr__col[open] summary .mie-icon {
		transform: rotate(180deg);
	}

	.mie-ftr__colbody {
		padding-bottom: 14px;
	}

	.mie-ftr__features {
		grid-template-columns: 1fr 1fr;
	}

	.mie-ftr__feature {
		flex-direction: column;
		align-items: flex-start;
	}

	.mie-ftr__bottomrow {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   Page head, crumbs, pager
   ========================================================================== */

.mie-pagehead {
	display: grid;
	gap: 8px;
	padding-block: clamp(22px, 4vw, 40px) clamp(14px, 2vw, 22px);
}

.mie-pagehead h1 {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 36px);
	font-weight: 500;
	line-height: 1.4;
}

.mie-pagehead__desc {
	margin: 0;
	color: var(--mie-muted);
	line-height: 2;
}

.mie-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--mie-muted);
	font-size: 13px;
}

.mie-crumbs a {
	color: inherit;
	text-decoration: none;
}

.mie-crumbs a:hover {
	color: var(--mie-primary-text);
}

.mie-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 30px;
}

.mie-pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 42px;
	block-size: 42px;
	padding: 0 8px;
	box-sizing: border-box;
	border: 1px solid var(--mie-line);
	border-radius: 14px;
	background: var(--mie-card);
	color: var(--mie-ink);
	text-decoration: none;
}

.mie-pager .page-numbers.current {
	border-color: var(--mie-primary);
	background: var(--mie-primary);
	color: var(--mie-on-primary);
}

.mie-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 60px 20px;
	border: 1px dashed var(--mie-line-strong);
	border-radius: 24px;
	color: var(--mie-muted);
}

.mie-empty .mie-icon {
	inline-size: 40px;
	block-size: 40px;
}

/* ==========================================================================
   Shop with filters
   ========================================================================== */

.mie-shop {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding-block: 18px 10px;
}

/* The filter column scrolls along with the page; once its end is in view
   it rests there, and scrolling back up brings its top back the same way
   (site.js moves --mie-side-top with the scroll). */
.mie-shop__side {
	position: sticky;
	top: var(--mie-side-top, calc(var(--wp-admin--admin-bar--height, 0px) + 96px));
}

.mie-shop__main {
	min-inline-size: 0;
	transition: opacity 0.25s;
}

.mie-shop__main.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.mie-filters {
	display: grid;
	gap: 10px;
}

.mie-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 4px 6px;
}

.mie-filters__head strong {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
}

.mie-filters__head strong .mie-icon {
	color: var(--mie-primary);
}

.mie-filters .mie-filters__x {
	display: none;
}

.mie-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px;
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	background: var(--mie-card);
}

.mie-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 99px;
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
	font-size: 12.5px;
	text-decoration: none;
}

.mie-filters__chip .mie-icon {
	inline-size: 15px;
	block-size: 15px;
}

.mie-filters__clear {
	margin-inline-start: auto;
	align-self: center;
	color: var(--mie-danger-text);
	font-size: 12.5px;
	text-decoration: none;
}

.mie-filter {
	border: 1px solid var(--mie-line);
	border-radius: 18px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-sm);
}

.mie-filter summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.mie-filter summary::-webkit-details-marker {
	display: none;
}

.mie-filter summary .mie-icon {
	inline-size: 18px;
	block-size: 18px;
	color: var(--mie-muted);
	transition: transform 0.25s;
}

.mie-filter[open] summary .mie-icon {
	transform: rotate(180deg);
}

.mie-filter__body {
	padding: 0 16px 16px;
}

.mie-filter__cats {
	display: grid;
	gap: 2px;
	max-block-size: 300px;
	overflow-y: auto;
}

.mie-filter__cat,
.mie-filter__back {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
}

.mie-filter__cat:hover {
	background: var(--mie-surface-2);
}

.mie-filter__cat small,
.mie-check small {
	padding: 1px 8px;
	border-radius: 99px;
	background: var(--mie-surface-2);
	color: var(--mie-muted);
	font-size: 11.5px;
}

.mie-filter__back {
	justify-content: flex-start;
	color: var(--mie-primary-text);
}

.mie-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	font-size: 14px;
	cursor: pointer;
}

.mie-check input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--mie-primary);
}

.mie-check span {
	flex: 1;
}

.mie-check i {
	color: var(--mie-line-strong);
	font-style: normal;
}

.mie-check span {
	color: var(--mie-ink);
}

.mie-filter__attrs {
	display: grid;
	max-block-size: 260px;
	overflow-y: auto;
}

/* ---------- Price range ---------- */

.mie-range__track {
	position: relative;
	block-size: 28px;
	margin: 6px 8px 10px;
}

.mie-range__track::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 12px;
	block-size: 4px;
	border-radius: 4px;
	background: var(--mie-surface-2);
}

.mie-range__fill {
	position: absolute;
	inset-block-start: 12px;
	block-size: 4px;
	border-radius: 4px;
	background: var(--mie-primary);
}

.mie-range__track input[type="range"] {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 28px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.mie-range__track input[type="range"]::-webkit-slider-thumb {
	inline-size: 22px;
	block-size: 22px;
	border: 3px solid var(--mie-card);
	border-radius: 50%;
	background: var(--mie-primary);
	box-shadow: 0 2px 8px rgb(var(--mie-ink-rgb) / 0.25);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.mie-range__track input[type="range"]::-moz-range-thumb {
	inline-size: 18px;
	block-size: 18px;
	border: 3px solid var(--mie-card);
	border-radius: 50%;
	background: var(--mie-primary);
	cursor: grab;
	pointer-events: auto;
}

.mie-range__values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.mie-range__values label {
	display: grid;
	gap: 4px;
}

.mie-range__values small,
.mie-range__unit {
	color: var(--mie-muted);
	font-size: 12px;
}

.mie-filters .mie-range__values input {
	inline-size: 100%;
	block-size: 40px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--mie-line);
	border-radius: 12px;
	background: var(--mie-surface);
	color: var(--mie-ink);
	font: inherit;
	text-align: center;
}

.mie-range__unit {
	display: block;
	margin-top: 6px;
	text-align: center;
}

.mie-filters__foot {
	position: sticky;
	bottom: 0;
	padding-block: 8px 2px;
	background: linear-gradient(transparent, var(--mie-surface) 30%);
}

.mie-filters__foot .mie-btn {
	inline-size: 100%;
}

html.mie-js .mie-filters__foot {
	display: none;
}

.mie-shop .mie-shop__filters-btn {
	display: none;
}

.mie-shop .mie-shop__filters-btn,
.mie-shop .mie-shop__filters-btn:hover,
.mie-shop .mie-shop__filters-btn:focus {
	align-items: center;
	gap: 6px;
	min-block-size: 42px;
	padding: 0 14px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	background: var(--mie-card);
	color: var(--mie-ink);
	font: inherit;
	cursor: pointer;
}

.mie-shop .mie-shop__filters-btn b {
	display: grid;
	place-items: center;
	min-inline-size: 20px;
	block-size: 20px;
	border-radius: 99px;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
	font-size: 11px;
	font-weight: 400;
}

@media (max-width: 1024px) {
	.mie-shop {
		grid-template-columns: minmax(0, 1fr);
	}

	.mie-shop .mie-shop__filters-btn {
		display: inline-flex;
	}

	/* The sidebar becomes a sheet from the side. */
	.mie-shop__side {
		position: fixed;
		inset: 0;
		z-index: 100000;
		max-block-size: none;
		overflow: hidden;
		visibility: hidden;
		background: rgb(var(--mie-scrim-rgb, 15 15 30) / 0);
		transition: background-color 0.3s, visibility 0.3s;
	}

	.mie-shop__side .mie-filters {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		align-content: start;
		inline-size: min(380px, 92vw);
		overflow-y: auto;
		padding: 14px 14px 0;
		box-sizing: border-box;
		background: var(--mie-surface);
		transform: translateX(105%);
		transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.mie-shop__side.is-open {
		visibility: visible;
		background: rgb(var(--mie-scrim-rgb, 15 15 30) / 0.45);
	}

	.mie-shop__side.is-open .mie-filters {
		transform: none;
	}

	.mie-filters .mie-filters__x,
	.mie-filters .mie-filters__x:hover,
	.mie-filters .mie-filters__x:focus {
		display: grid;
		place-items: center;
		inline-size: 38px;
		block-size: 38px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--mie-surface-2);
		color: var(--mie-ink);
	}

	html.mie-js .mie-filters__foot {
		display: block;
		padding-bottom: 14px;
	}
}

/* ==========================================================================
   Articles
   ========================================================================== */

.mie-blog__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 30px;
	align-items: start;
}

.mie-blog__side {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
	display: grid;
	gap: 14px;
}

.mie-blog__search {
	display: flex;
	align-items: center;
	block-size: 48px;
	padding-inline: 16px 5px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-sm);
}

.mie-blog__side .mie-blog__search input {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1;
	min-inline-size: 0;
	border: 0;
	background: none;
	color: var(--mie-ink);
	font: inherit;
	outline: 0;
}

.mie-blog__side .mie-blog__search button,
.mie-blog__side .mie-blog__search button:hover,
.mie-blog__side .mie-blog__search button:focus {
	padding: 0;
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--mie-primary);
	color: var(--mie-on-primary);
	cursor: pointer;
}

.mie-blog__box {
	padding: 16px;
	border: 1px solid var(--mie-line);
	border-radius: 22px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-sm);
}

.mie-blog__box h3 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
}

.mie-blog__cats {
	display: grid;
	gap: 2px;
}

.mie-blog__cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--mie-ink);
	font-size: 14px;
	text-decoration: none;
}

.mie-blog__cats a:hover,
.mie-blog__cats a.is-on {
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
}

.mie-blog__cats small {
	color: var(--mie-muted);
}

.mie-blog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mie-blog__tags a {
	padding: 5px 12px;
	border: 1px solid var(--mie-line);
	border-radius: 99px;
	color: var(--mie-ink-2, var(--mie-ink));
	font-size: 13px;
	text-decoration: none;
}

.mie-blog__tags a:hover {
	border-color: var(--mie-primary);
	color: var(--mie-primary-text);
}

.mie-blog__side .mie-posts {
	--mie-cols-d: 1;
	--mie-cols-t: 1;
	--mie-cols-m: 1;
	gap: 12px;
}

@media (max-width: 1024px) {
	.mie-blog__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mie-blog__side {
		position: static;
	}
}

/* ---------- Single article ---------- */

.mie-readbar {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	block-size: 3px;
	pointer-events: none;
}

.mie-readbar span {
	display: block;
	block-size: 100%;
	inline-size: 100%;
	background: var(--mie-gradient, var(--mie-primary));
	transform: scaleX(var(--p, 0));
	transform-origin: right;
}

.mie-article__head {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding-block: clamp(26px, 5vw, 56px) 20px;
	text-align: center;
}

.mie-article__head h1 {
	max-inline-size: 900px;
	margin: 0;
	font-size: clamp(25px, 4vw, 42px);
	font-weight: 500;
	line-height: 1.5;
}

.mie-article__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	color: var(--mie-muted);
	font-size: 13.5px;
}

.mie-article__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mie-article__cover {
	margin: 0 auto 10px;
}

.mie-article__cover img {
	display: block;
	inline-size: 100%;
	max-block-size: 560px;
	border-radius: 28px;
	object-fit: cover;
	box-shadow: var(--mie-shadow);
}

.mie-article__body {
	max-inline-size: 780px;
	margin-inline: auto;
	padding: 20px clamp(16px, 4vw, 24px) 0;
}

.mie-article__content {
	font-size: clamp(15.5px, 1.6vw, 17px);
	line-height: 2.15;
}

.mie-article__content h2,
.mie-article__content h3 {
	margin: 1.8em 0 0.6em;
	font-weight: 500;
	line-height: 1.6;
}

.mie-article__content img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 18px;
}

.mie-article__content a {
	color: var(--mie-primary-text);
}

.mie-article__content blockquote {
	margin: 1.5em 0;
	padding: 16px 20px;
	border-inline-start: 4px solid var(--mie-primary);
	border-radius: 0 16px 16px 0;
	background: var(--mie-primary-soft);
}

.mie-article__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--mie-line);
}

.mie-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mie-muted);
	font-size: 13px;
}

.mie-share a,
.mie-share .mie-share__btn,
.mie-article .mie-share button,
.mie-article .mie-share button:hover,
.mie-article .mie-share button:focus {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 1px solid var(--mie-line);
	border-radius: 12px;
	background: var(--mie-card);
	color: var(--mie-ink);
	cursor: pointer;
}

.mie-article__related {
	padding-block: 50px 0;
}

.mie-article__related h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 500;
}

.mie-article__comments {
	max-inline-size: 780px;
	padding-block: 40px 0;
}

@media (prefers-reduced-motion: reduce) {
	.mie-drawer__panel,
	.mie-drawer__scrim,
	.mie-shop__side .mie-filters,
	.mie-hdr__cart.is-bump {
		transition: none;
		animation: none;
	}
}

/* ==========================================================================
   Order tracking
   ========================================================================== */

.mie-track {
	display: grid;
	gap: 16px;
	max-inline-size: 760px;
	margin: clamp(20px, 4vw, 40px) auto;
	padding-inline: clamp(14px, 3vw, 0px);
}

.mie-track__form,
.mie-track__result {
	display: grid;
	gap: 18px;
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--mie-line);
	border-radius: 28px;
	background: var(--mie-card);
	box-shadow: var(--mie-shadow-sm);
}

.mie-track__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mie-track__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 54px;
	block-size: 54px;
	border-radius: 18px;
	background: var(--mie-primary-soft);
	color: var(--mie-primary);
}

.mie-track__icon .mie-icon {
	inline-size: 28px;
	block-size: 28px;
}

.mie-track__head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
}

.mie-track__head p {
	margin: 2px 0 0;
	color: var(--mie-muted);
	font-size: 13.5px;
}

.mie-track__fields {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: 10px;
}

.mie-track__fields label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--mie-muted);
}

.mie-track .mie-track__fields input {
	inline-size: 100%;
	block-size: 48px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--mie-line);
	border-radius: 14px;
	background: var(--mie-surface);
	color: var(--mie-ink);
	font: inherit;
}

.mie-track__fields .mie-btn {
	block-size: 48px;
}

.mie-track__error {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--mie-danger-soft);
	color: var(--mie-danger-text);
}

.mie-track__result header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.mie-track__result header div {
	display: grid;
}

.mie-track__result header small {
	color: var(--mie-muted);
	font-size: 12px;
}

.mie-track__result header b {
	font-size: 17px;
	font-weight: 500;
}

.mie-track__status {
	margin-inline-start: auto;
	padding: 6px 14px;
	border-radius: 99px;
	background: var(--mie-primary-soft);
	color: var(--mie-primary-text);
	font-size: 13px;
}

.mie-track__line {
	--done: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 6px 0;
	padding: 0;
	list-style: none;
}

.mie-track__line::before,
.mie-track__line::after {
	content: "";
	position: absolute;
	inset-block-start: 17px;
	inset-inline-start: 12.5%;
	block-size: 3px;
	border-radius: 3px;
}

.mie-track__line::before {
	inset-inline-end: 12.5%;
	background: var(--mie-line);
}

.mie-track__line::after {
	inline-size: calc(var(--done) * 25%);
	background: var(--mie-success, #1f9e6a);
	transition: inline-size 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mie-track__line li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
}

.mie-track__line li span {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--mie-surface-2);
	color: var(--mie-muted);
	font-size: 13px;
}

.mie-track__line li.is-done span {
	background: var(--mie-success, #1f9e6a);
	color: #fff;
}

.mie-track__line li.is-now span {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--mie-success, #1f9e6a) 18%, transparent);
}

.mie-track__line li b {
	font-size: 12.5px;
	font-weight: 400;
}

.mie-track__code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--mie-surface-2);
}

.mie-track__code div:first-child {
	display: grid;
}

.mie-track__code small {
	color: var(--mie-muted);
	font-size: 12px;
}

.mie-track__code b {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.mie-track__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mie-track__items {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mie-track__items li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mie-track__items li > span:last-child {
	display: grid;
}

.mie-track__items small {
	color: var(--mie-muted);
}

.mie-track__thumb img {
	inline-size: 52px;
	block-size: 52px;
	border-radius: 14px;
	object-fit: cover;
}

.mie-track__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mie-primary-text);
	text-decoration: none;
}

.mie-track__note {
	margin: 0;
	color: var(--mie-muted);
}

@media (max-width: 600px) {
	.mie-track__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.mie-track__line li b {
		font-size: 11px;
	}
}

/* «.mie-ftr a { color: inherit }» must not reach the footer's buttons: on
   the dark footer they turned white on white. */
.mie-ftr a.mie-btn,
.mie-ftr a.mie-btn:hover {
	color: var(--_fg);
}

.mie-ftr a.mie-credit-cta,
.mie-ftr a.mie-credit-cta:hover {
	color: var(--mie-ink);
}

/* The dark footer shows the logo made for dark backgrounds, when there is one. */
.mie-ftr--dark .mie-logo--dark {
	display: block;
}

.mie-ftr--dark .mie-logo--light:has(+ .mie-logo--dark) {
	display: none;
}