/* ============================================================
   MyFreedelity - styles of the JS app (js/app).
   Self-contained: no Fomantic, no legacy stylesheet. Every class is
   prefixed mf- so nothing collides with the legacy pages still served
   by their own templates.

   1. tokens   2. base   3. shell   4. components   5. utilities
   Page-specific rules live next to this file (portal.css, link.css,
   public.css) and only use the tokens and components defined here.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
	--mf-navy: #004071;
	--mf-navy-dark: #00305a;
	--mf-magenta: #b82585;
	--mf-magenta-dark: #9a1d6f;
	--mf-ink: #3d3d3d;
	--mf-muted: #666;
	--mf-line: #e4e1d9;
	--mf-line-strong: #c2c2c2;
	--mf-bg: #f4f1e9;
	--mf-surface: #fff;
	--mf-soft: #f7f5f0;
	--mf-red: #cf1f39;
	--mf-notif: #f30;
	--mf-green: #5fa800;
	--mf-green-soft: #eef7df;
	--mf-red-soft: #fbe9ec;

	--mf-radius: 24px;
	--mf-radius-sm: 12px;
	--mf-radius-xs: 6px;
	--mf-shadow: 0 7px 14px rgba(120, 110, 90, .08);
	--mf-shadow-lg: 0 18px 40px rgba(0, 32, 64, .22);
	--mf-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--mf-top: 100px;
	--mf-side: 330px;
	--mf-max: 1440px;

	--mf-rank1: linear-gradient(90deg, #dbdbdb, #696969);
	--mf-rank2: linear-gradient(90deg, #e3c6ba, #cf1f39);
	--mf-rank3: linear-gradient(90deg, #e1d69a, #b7a16d);
	--mf-rank4: linear-gradient(90deg, #cff7f3, #8bc0df);
	--mf-rank5: linear-gradient(90deg, #f1e5d7, #606060);
	--mf-rank6: linear-gradient(90deg, #866720, #000);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--mf-bg);
	color: var(--mf-ink);
	font: 400 15px/1.5 var(--mf-font);
}
h1, h2, h3, h4 { margin: 0 0 .6em; color: var(--mf-navy); font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--mf-navy); text-decoration: none; }
a:hover { color: var(--mf-magenta); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--mf-line); margin: 1.6rem 0; }
:focus-visible { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- 3. shell ---------- */
.mf-top {
	position: sticky; top: 0; z-index: 50;
	background: var(--mf-surface);
	height: var(--mf-top);
}
.mf-top__in {
	max-width: var(--mf-max); height: 100%; margin: 0 auto; padding: 0 20px;
	display: flex; align-items: center; gap: 16px;
}
.mf-logo { display: block; margin-right: auto; }
.mf-logo img { display: block; height: 70px; width: auto; }
.mf-burger {
	display: none; border: 0; background: none; font-size: 1.5rem; color: var(--mf-navy);
	padding: 8px; cursor: pointer;
}

.mf-userbox { position: relative; }
.mf-userbox__btn {
	display: flex; align-items: center; gap: 34px;
	background: var(--mf-navy); color: #fff; border: 0; cursor: pointer;
	border-radius: 20px; padding: 10px 38px 10px 40px; min-height: 72px; text-align: right;
}
.mf-userbox__who { display: flex; flex-direction: column; }
.mf-userbox__name { font-size: 1.15rem; text-transform: capitalize; }
.mf-userbox__email { font-size: .92rem; }
.mf-avatar {
	width: 50px; height: 50px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--mf-rank1); color: #fff; font-weight: 700; font-size: 1.3rem;
}
.mf-avatar.mf-rank2 { background: var(--mf-rank2); }
.mf-avatar.mf-rank3 { background: var(--mf-rank3); }
.mf-avatar.mf-rank4 { background: var(--mf-rank4); }
.mf-avatar.mf-rank5 { background: var(--mf-rank5); }
.mf-avatar.mf-rank6 { background: var(--mf-rank6); }
.mf-userbox__menu {
	position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 60;
	background: var(--mf-surface); border-radius: var(--mf-radius-sm); box-shadow: var(--mf-shadow-lg);
	padding: 6px 0;
}
.mf-userbox__menu a { display: block; padding: 11px 20px; }
.mf-userbox__menu a + a { border-top: 1px solid var(--mf-line); }

.mf-layout {
	max-width: var(--mf-max); margin: 0 auto; padding: 50px 20px 60px;
	display: grid; grid-template-columns: var(--mf-side) minmax(0, 1fr); gap: 28px; align-items: start;
}
.mf-layout--single { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.mf-side { display: grid; gap: 14px; }
.mf-content { min-width: 0; min-height: 300px; transition: opacity .15s; }
.mf-content.is-loading { opacity: .5; }

.mf-card {
	background: var(--mf-surface); border-radius: var(--mf-radius);
	box-shadow: var(--mf-shadow); padding: 28px;
}
.mf-menu { padding: 14px 0; }
.mf-menu__item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 17px 10px 21px; min-height: 39px; color: var(--mf-navy);
}
.mf-menu__item.is-active { color: var(--mf-magenta); font-weight: 700; }
.mf-menu--secondary .mf-menu__item { color: var(--mf-muted); }
.mf-menu--secondary .mf-menu__item:hover, .mf-menu--secondary .mf-menu__item.is-active { color: var(--mf-magenta); }
.mf-menu__map {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--mf-magenta); color: #fff; font-weight: 700;
	border-radius: var(--mf-radius); padding: 20px 26px 20px 21px;
}
.mf-menu__map:hover { background: var(--mf-magenta-dark); color: #fff; }
.mf-menu__map i { font-size: 1.6rem; }
.mf-badge {
	min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
	display: inline-grid; place-items: center;
	background: var(--mf-notif); color: #fff; font-size: .75rem; font-weight: 700;
}

.mf-rankbox { padding: 16px 12px 14px; }
.mf-rankbox__head { display: flex; align-items: center; gap: 12px; color: #9a9a9a; }
.mf-rankbox__head i { font-size: 2rem; }
.mf-rankbox__head p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 0; font-size: 1.05rem; line-height: 1.2; font-weight: 300; }
.mf-rankbox__head strong { text-transform: uppercase; font-weight: 700; color: var(--mf-navy); letter-spacing: .02em; }
/* A track behind the dots, filled (navy) up to the current level. */
.mf-rankbox__steps {
	list-style: none; margin: 14px 0 0; padding: 0; position: relative;
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mf-rankbox__steps::before, .mf-rankbox__steps::after {
	content: ""; position: absolute; top: 6px; left: calc(100% / 12); height: 2px; border-radius: 1px;
}
.mf-rankbox__steps::before { right: calc(100% / 12); background: var(--mf-line-strong); }
.mf-rankbox__steps::after { width: calc((100% - 100% / 6) * var(--mf-rankfill, 0)); background: var(--mf-navy); }
.mf-rankbox__steps li {
	position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
	color: #b5b5b5; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
}
.mf-rankbox__steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #d5d5d5; box-shadow: 0 0 0 3px #fff; }
.mf-rankbox__steps li > span { white-space: nowrap; }
.mf-rankbox__steps li.is-done, .mf-rankbox__steps li.is-current { color: var(--mf-navy); }
.mf-rankbox__steps li.is-done::before { background: var(--mf-navy); }
.mf-rankbox__steps li.is-current::before { background: var(--mf-magenta); width: 16px; height: 16px; margin-top: -1px; }
.mf-rankbox__steps li.is-current { color: var(--mf-magenta); }

.mf-apps { display: grid; grid-template-columns: 46fr 51fr; gap: 8px; align-items: center; }
.mf-apps img { display: block; width: 100%; }
.mf-langs { border-radius: 21px; text-align: center; font-weight: 700; margin-top: 18px; }

.mf-top--plain { position: static; }
.mf-standalone .mf-logo { margin: 0 auto; }

/* ---------- 4. components ---------- */
.mf-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.mf-pagehead h1 { color: var(--mf-magenta); margin: 0; }
.mf-pagehead--navy h1 { color: var(--mf-navy); }
.mf-pagehead__art { height: 120px; width: auto; margin-bottom: -40px; position: relative; z-index: 1; pointer-events: none; }
.mf-lead { font-size: 1.05rem; }

.mf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.mf-tabs a, .mf-tabs button {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 11px 16px; border: 1px solid var(--mf-line-strong); border-radius: 24px; color: var(--mf-muted);
	background: none; font: inherit; cursor: pointer;
}
.mf-tabs a i { font-size: 1.1rem; color: #9a9a9a; }
.mf-tabs a:hover, .mf-tabs button:hover { border-color: var(--mf-magenta); color: var(--mf-magenta); }
.mf-tabs a.is-active, .mf-tabs button.is-active { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }
.mf-tabs a.is-active i { color: var(--mf-magenta); }

.mf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1px solid transparent; border-radius: 20px; padding: 8px 20px; min-height: 36px;
	font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.mf-btn:disabled { opacity: .5; cursor: not-allowed; }
.mf-btn--primary { background: var(--mf-navy); color: #fff; }
.mf-btn--primary:hover:not(:disabled) { background: var(--mf-navy-dark); color: #fff; }
.mf-btn--accent { background: var(--mf-magenta); color: #fff; }
.mf-btn--accent:hover:not(:disabled) { background: var(--mf-magenta-dark); color: #fff; }
.mf-btn--ghost { background: transparent; color: var(--mf-navy); border-color: var(--mf-line-strong); }
.mf-btn--ghost:hover:not(:disabled) { border-color: var(--mf-navy); }
.mf-btn--danger { background: var(--mf-red); color: #fff; }
.mf-btn--success { background: var(--mf-green); color: #fff; }
.mf-btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--mf-navy); font-weight: 400; text-decoration: underline; border-radius: 0; }
.mf-btn--small { padding: 4px 14px; min-height: 28px; font-size: .88rem; }

.mf-form { display: grid; gap: 14px; }
.mf-form__row { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mf-col-12 { grid-column: span 12; } .mf-col-9 { grid-column: span 9; } .mf-col-8 { grid-column: span 8; }
.mf-col-6 { grid-column: span 6; } .mf-col-4 { grid-column: span 4; } .mf-col-3 { grid-column: span 3; }
.mf-col-2 { grid-column: span 2; }
.mf-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mf-field label { font-weight: 700; font-size: .92rem; color: var(--mf-ink); }
.mf-field__hint { margin: 0; font-size: .85rem; color: var(--mf-muted); }
.mf-input {
	width: 100%; min-height: 38px; padding: 8px 14px;
	background: var(--mf-surface); border: 1px solid #d4d4d5; border-radius: var(--mf-radius-xs);
}
.mf-input:focus { border-color: var(--mf-navy); outline: 0; box-shadow: 0 0 0 2px rgba(0, 64, 113, .15); }
.mf-input[readonly], .mf-input:disabled { background: var(--mf-soft); color: var(--mf-muted); }
textarea.mf-input { resize: vertical; }
/* Date field (ui/form.js dateInput): a text box written day first, the browser picker behind a calendar button. */
.mf-date { position: relative; display: block; min-width: 0; }
.mf-date .mf-date__text { display: block; width: 100%; min-width: 0; padding-right: 44px; font-variant-numeric: tabular-nums; }
.mf-date.is-bad .mf-date__text { border-color: var(--mf-magenta, #B82585); }
.mf-date__native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.mf-date__pick {
	position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center;
	width: 34px; height: 30px; border: 0; border-radius: 15px; background: transparent; color: var(--mf-navy); cursor: pointer;
}
.mf-date__pick:hover, .mf-date__pick:focus-visible { background: var(--mf-soft); }
.mf-select {
	appearance: none; padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233d3d3d'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.mf-form__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.mf-checkline { display: flex; align-items: flex-start; gap: 10px; }
.mf-checkline input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--mf-navy); }

.mf-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.mf-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-switch__track {
	position: relative; flex: none; width: 46px; height: 24px; border-radius: 12px; background: #c9c9c9; transition: background .15s;
}
.mf-switch__track::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; transition: transform .15s;
}
.mf-switch__input:checked + .mf-switch__track { background: var(--mf-magenta); }
.mf-switch__input:checked + .mf-switch__track::after { transform: translateX(22px); }
.mf-switch__input:focus-visible + .mf-switch__track { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-switch__input:disabled + .mf-switch__track { opacity: .5; }

.mf-note { padding: 14px 18px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
.mf-note--ok { background: var(--mf-green-soft); color: #3d6b00; }
.mf-note--error { background: var(--mf-red-soft); color: var(--mf-red); }
.mf-empty { text-align: center; color: var(--mf-muted); padding: 40px 10px; }
.mf-fatal { max-width: 640px; margin: 80px auto; text-align: center; }

.mf-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; color: var(--mf-muted); }
.mf-checklist li::before { content: "\2715"; display: inline-block; width: 1.4em; color: var(--mf-red); }
.mf-checklist li.is-ok { color: var(--mf-green); }
.mf-checklist li.is-ok::before { content: "\2713"; color: var(--mf-green); }

.mf-list { list-style: none; margin: 0; padding: 0; }
.mf-list > li { padding: 14px 0; border-top: 1px solid var(--mf-line); }
.mf-list > li:first-child { border-top: 0; }
.mf-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.mf-table { width: 100%; border-collapse: collapse; }
.mf-table th { text-align: left; font-size: .85rem; color: var(--mf-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--mf-line-strong); }
.mf-table td { padding: 10px; border-bottom: 1px solid var(--mf-line); vertical-align: top; }
.mf-table .mf-num { text-align: right; white-space: nowrap; }

.mf-pager { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.mf-pager__btn {
	min-width: 34px; height: 34px; border-radius: 17px; border: 1px solid var(--mf-line-strong);
	background: var(--mf-surface); cursor: pointer;
}
.mf-pager__btn.is-current { background: var(--mf-navy); border-color: var(--mf-navy); color: #fff; }
.mf-pager__btn:disabled { opacity: .4; cursor: default; }
.mf-pager__gap { align-self: center; }

.mf-modal {
	border: 0; padding: 0; border-radius: var(--mf-radius); box-shadow: var(--mf-shadow-lg);
	width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: var(--mf-ink);
}
.mf-modal[open] { display: flex; flex-direction: column; }
.mf-modal--small { width: min(440px, calc(100vw - 32px)); }
.mf-modal--large { width: min(900px, calc(100vw - 32px)); }
.mf-modal::backdrop { background: rgba(0, 24, 48, .55); }
.mf-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 0; }
.mf-modal__title { margin: 0; font-size: 1.3rem; }
.mf-modal__close { border: 0; background: none; font-size: 1.2rem; color: var(--mf-muted); cursor: pointer; padding: 4px; }
.mf-modal__body { padding: 18px 28px 24px; overflow: auto; }
.mf-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 28px 24px; border-top: 1px solid var(--mf-line); }
.mf-legal { max-height: 50vh; overflow: auto; padding-right: 8px; }

.mf-toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.mf-toast {
	padding: 14px 18px; border-radius: var(--mf-radius-sm); background: var(--mf-navy); color: #fff;
	box-shadow: var(--mf-shadow-lg); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s;
}
.mf-toast.is-in { opacity: 1; transform: none; }
.mf-toast--success { background: #3d7a00; }
.mf-toast--error { background: var(--mf-red); }

/* ---------- 5. utilities ---------- */
.mf-center { text-align: center; }
.mf-right { text-align: right; }
.mf-muted { color: var(--mf-muted); }
.mf-stack { display: grid; gap: 20px; }
.mf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mf-row--between { justify-content: space-between; }
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	:root { --mf-top: 72px; }
	.mf-logo img { height: 48px; }
	.mf-burger { display: block; }
	.mf-layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
	.mf-side {
		position: fixed; inset: var(--mf-top) 0 0 0; z-index: 40; overflow: auto;
		background: var(--mf-bg); padding: 16px; display: none; align-content: start;
	}
	.mf-portal.is-menu-open .mf-side { display: grid; }
	.mf-userbox__who { display: none; }
	.mf-userbox__btn { padding: 6px; min-height: 0; border-radius: 50%; gap: 0; }
	.mf-form__row > * { grid-column: span 12; }
	.mf-card { padding: 20px 16px; border-radius: 18px; }
	h1 { font-size: 1.6rem; }
	.mf-pagehead__art { height: 80px; margin-bottom: -26px; }
}
@media (max-width: 500px) {
	.mf-top__in, .mf-layout { padding-left: 12px; padding-right: 12px; }
	.mf-tabs a, .mf-tabs button { padding: 9px 12px; font-size: .9rem; }
}
@media print {
	.mf-top, .mf-side, .mf-toasts { display: none !important; }
	.mf-layout { display: block; padding: 0; }
	body { background: #fff; }
}

/* Consent gate: whose document it is, and the position in the series */
.mf-gate__which { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
.mf-gate__logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; }
.mf-gate__name { display: grid; flex: 1; min-width: 0; }
.mf-gate__name strong { color: var(--mf-navy); }
.mf-gate__count { flex: none; padding: 4px 12px; border-radius: 14px; background: var(--mf-navy); color: #fff; font-weight: 700; font-size: .88rem; white-space: nowrap; }

/* A barcode full screen (ui/barcodeview.js): white, the code as wide as the screen. */
.mf-bcview {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	overflow: hidden; background: #fff; color: var(--mf-ink);
}
.mf-bcview::backdrop { background: #fff; }
.mf-bcview__stage {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 24px 20px;
}
.mf-bcview__close {
	position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; background: var(--mf-soft); color: var(--mf-navy); font-size: 1.1rem; cursor: pointer;
}
.mf-bcview__title { margin: 0; padding: 0 48px; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--mf-navy); text-align: center; overflow-wrap: anywhere; }
.mf-bcview__code { width: 100%; }
.mf-bcview__code .mf-cardcode { display: block; margin: 0 auto; max-width: none; height: min(34vh, 260px); }
.mf-bcview__number { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.2rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.mf-bcview__hint { margin: 0; font-size: .88rem; color: var(--mf-muted); text-align: center; }
/* A phone held upright: the stage is turned a quarter, so the code runs along the long side. */
@media (max-width: 640px) and (orientation: portrait) {
	.mf-bcview__stage {
		inset: auto; top: 50%; left: 50%; width: 100vh; width: 100dvh; height: 100vw;
		transform: translate(-50%, -50%) rotate(90deg); gap: 8px; padding: 12px 28px;
	}
	.mf-bcview__code .mf-cardcode { height: 44vw; }
	.mf-bcview__number { font-size: 1.05rem; }
	.mf-bcview__hint { font-size: .8rem; }
}

/* MyFreedelity app - styles of the "account" pages. Tokens and components: app.css. */

/* Shared with the brand "my data" page and the public forms */
.mf-dateparts { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 14px; }
.mf-field.is-invalid .mf-input { border-color: var(--mf-red); background: var(--mf-red-soft); }
.mf-field.is-invalid label { color: var(--mf-red); }
/* Greyed while a criterion is missing; still focusable, a click moves to the field to fix. */
.mf-btn.is-off { opacity: .5; }

/* ============================================================
   My profile: "My personal data" (views/portal/account.js),
   "Password" (password.js) and "My preferences" (accountconsents.js).
   ============================================================ */

/* A field: the star of a required one, the sentence under a refused one */
.mf-field__star { color: var(--mf-magenta); font-weight: 700; }
.mf-field__error { margin: 0; font-size: .85rem; color: var(--mf-red); }
.mf-field__hint.is-error { color: var(--mf-red); font-weight: 600; }

/* --- My personal data: a sheet of three cards, one edited at a time --- */
.mf-sheet__notices { display: grid; gap: 10px; margin-bottom: 16px; }
.mf-sheet__share, .mf-sheet__missing { margin: 0; }
.mf-sheet__share { background: #eef3f8; }
.mf-sheet__share > i { color: var(--mf-navy); }
.mf-sheet__missing { background: #fff3d6; }
.mf-sheet__missing > i { color: #8a5a00; }
.mf-sheet__share a, .mf-sheet__missing .mf-btn--link { font-weight: 600; text-decoration: underline; }
.mf-sheets { display: grid; gap: 12px; }
.mf-sheet { min-width: 0; padding: 16px 20px; border: 1px solid var(--mf-line); border-radius: 14px; overflow-wrap: anywhere; }
/* One pixel less padding for the thicker border: the content does not move when a card opens. */
.mf-sheet.is-editing { padding: 15px 19px; border: 2px solid var(--mf-magenta); }
.mf-sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mf-sheet__head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.mf-sheet__edit { font-weight: 600; }
.mf-sheet__badge { flex: none; padding: 1px 8px; border-radius: 8px; background: #fff3d6; color: #8a5a00; font-size: .75rem; font-weight: 700; }
.mf-sheet__lines { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .93rem; }
.mf-sheet__lines dt { color: var(--mf-muted); }
.mf-sheet__lines dd { margin: 0; }
.mf-sheet__lines dd.is-empty { color: var(--mf-muted); }
.mf-sheet__note { font-size: .82rem; color: var(--mf-muted); }
.mf-sheet__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--mf-line);
}
.mf-sheet__state { margin: 0; font-size: .88rem; color: var(--mf-muted); }
.mf-sheet__unsaved { color: #a85a00; }
.mf-field__star ~ .mf-sheet__unsaved::before { content: " \00b7  "; color: var(--mf-muted); font-weight: 400; }
.mf-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.mf-sheet__done { margin: 14px 0 0; }

/* --- Password: two ways in, criteria as chips, the code in six boxes --- */
.mf-pw__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.mf-pw__way {
	position: relative; display: grid; gap: 2px; align-content: start;
	padding: 14px 16px; border: 2px solid var(--mf-line); border-radius: 14px; cursor: pointer; font-size: .93rem;
}
.mf-pw__way strong { color: var(--mf-navy); }
.mf-pw__way.is-on { border-color: var(--mf-magenta); }
.mf-pw__way:has(:focus-visible) { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-pw__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-pw__done { margin: 0 0 18px; }
.mf-pw__narrow { display: grid; gap: 16px; max-width: 470px; }
.mf-pw__narrow > .mf-note { margin: 0; }
.mf-pw__reveal { position: relative; }
.mf-pw__reveal .mf-input { padding-right: 46px; }
.mf-pw__eye {
	position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 38px; height: 30px;
	border: 0; border-radius: var(--mf-radius-xs); background: none; color: var(--mf-muted); cursor: pointer;
}
.mf-pw__eye:hover, .mf-pw__eye[aria-pressed="true"] { color: var(--mf-navy); }
.mf-pw__rules { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.mf-pw__rules li { padding: 3px 10px; border-radius: 12px; background: var(--mf-soft); color: #555; font-size: .8rem; }
.mf-pw__rules li.is-ok { background: var(--mf-green-soft); color: #3d6b00; font-weight: 600; }
.mf-pw__rules li.is-ok::before { content: "\2713\00a0"; }
.mf-pw__special { font-family: monospace; letter-spacing: .12em; }
.mf-pw__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mf-line);
}
.mf-pw__missing { flex: 1; min-width: 200px; margin: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-pw__bar .mf-btn { margin-left: auto; }
.mf-pw__steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mf-pw__steps li { flex: 1; padding: 6px 4px; border-radius: 14px; background: var(--mf-soft); color: var(--mf-muted); font-size: .8rem; text-align: center; }
.mf-pw__steps li.is-on { background: var(--mf-navy); color: #fff; font-weight: 700; }
.mf-pw__steps li.is-done { background: var(--mf-green-soft); color: #3d6b00; }
.mf-pw__steps li.is-done::before { content: "\2713\00a0"; }
.mf-pw__ask { max-width: 500px; padding: 20px 22px; border: 1px solid var(--mf-line); border-radius: 16px; box-shadow: var(--mf-shadow); }
.mf-pw__ask h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.mf-pw__ask a, .mf-pw__flow .mf-note a { font-weight: 600; text-decoration: underline; }
.mf-pw__digits { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-pw__digit { width: 40px; min-height: 48px; padding: 0; border-radius: 8px; color: var(--mf-navy); font-size: 1.2rem; font-weight: 700; text-align: center; }
.mf-pw__digits.is-invalid .mf-pw__digit { border-color: var(--mf-red); background: var(--mf-red-soft); }
.mf-pw__resend { margin-top: -8px; }
.mf-pw__resend .mf-btn--link { font-weight: 600; }

/* --- My preferences: what each switch does, the data actions apart --- */
.mf-cons__title { margin: 28px 0 14px; color: var(--mf-magenta); font-size: 1.05rem; font-weight: 600; }
.mf-tabs + .mf-cons__title { margin-top: 0; }
.mf-cons__list { display: grid; gap: 10px; }
.mf-cons__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; align-items: start;
	padding: 14px 10px 14px 16px; border-radius: var(--mf-radius-sm); background: var(--mf-soft);
}
.mf-cons__text strong { display: block; }
.mf-cons__text p { margin: 2px 0 0; font-size: .88rem; color: #555; }
.mf-cons__switch { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 68px; }
.mf-cons__state { font-size: .72rem; color: var(--mf-muted); }
/* Always the same place: the last column, whether the row is open or not. */
.mf-cons__chevron { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 14px; background: none; color: var(--mf-navy); }
button.mf-cons__chevron { cursor: pointer; }
.mf-cons__chevron i { transition: transform .15s; }
.mf-cons__chevron[aria-expanded="true"] i { transform: rotate(180deg); }
.mf-cons__full { grid-column: 1; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--mf-surface); color: #555; font-size: .84rem; }
.mf-cons__full p { margin: 0 0 6px; }
.mf-cons__lead { margin: 0 0 6px; color: var(--mf-muted); }
.mf-cons__lead a, .mf-cons__first { font-weight: 600; text-decoration: underline; }
.mf-cons__channels { list-style: none; margin: 0; padding: 0; }
.mf-cons__channels li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--mf-line); }
.mf-cons__channels li:last-child { border-bottom: 0; }
.mf-cons__channel { min-width: 0; overflow-wrap: anywhere; }
.mf-cons__channel .is-empty { color: var(--mf-muted); text-transform: lowercase; }
.mf-cons__export, .mf-cons__danger {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
	padding: 14px 18px; border: 1px solid var(--mf-line); border-radius: 14px;
}
.mf-cons__export > div, .mf-cons__danger > div { flex: 1; min-width: 220px; }
.mf-cons__export h3, .mf-cons__danger h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.mf-cons__danger { margin-top: 14px; border-color: #f0c4c4; background: #fdf6f6; }
.mf-cons__danger h3 { color: var(--mf-red); }
.mf-cons__danger p { margin: 0; font-size: .9rem; }
/* Deletion dialog: the safe answer is the filled button, the deletion an outlined one. */
.mf-btn--dangerline { background: var(--mf-surface); border-color: var(--mf-red); color: var(--mf-red); }
.mf-btn--dangerline:hover:not(:disabled) { background: var(--mf-red-soft); }
.mf-cons__dialog .mf-modal__actions { justify-content: flex-start; }

@media (max-width: 600px) {
	.mf-sheet { padding: 14px; }
	.mf-sheet.is-editing { padding: 13px; }
	.mf-sheet__lines { grid-template-columns: 112px minmax(0, 1fr); }
	/* The save bar of the open card stays in reach while its fields scroll. */
	.mf-sheet.is-editing .mf-sheet__bar { position: sticky; bottom: 0; z-index: 2; padding-bottom: 12px; background: var(--mf-surface); }
	.mf-sheet__actions { width: 100%; }
	.mf-sheet__actions .mf-btn { flex: 1; }
	.mf-pw__ways { grid-template-columns: 1fr; }
	.mf-pw__bar .mf-btn { width: 100%; }
	.mf-cons__row { gap: 0 6px; padding: 12px 6px 12px 12px; }
	.mf-cons__switch { min-width: 60px; }
	.mf-cons__export .mf-btn, .mf-cons__danger .mf-btn, .mf-cons__dialog .mf-modal__actions .mf-btn { width: 100%; }
}
/* ============================================================ end of "My profile" */

/* Contact */
.mf-contact__sent { text-align: center; padding: 20px 0; color: var(--mf-magenta); font-weight: 700; }
.mf-contact__sent object { display: block; width: min(250px, 70%); aspect-ratio: 740 / 516; margin: 0 auto 14px; }
.mf-contact__intro h2 { margin-bottom: .3em; font-weight: 600; }
.mf-contact__intro p { margin-bottom: 22px; color: var(--mf-muted); }
.mf-contact__form { gap: 22px; }
.mf-contact__form .mf-chips { margin-bottom: 0; }
.mf-contact__form .mf-field label em { font-weight: 400; font-style: normal; color: var(--mf-muted); }
.mf-contact__required { font-style: normal; font-weight: 700; color: var(--mf-magenta); }
/* The list of the other brands sits among the chips and looks like one. */
.mf-contact__email { max-width: 460px; }
.mf-field__error { margin: 0; font-size: .88rem; font-weight: 700; color: var(--mf-red); }
.mf-contact__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 16px; border-top: 1px solid var(--mf-line); font-size: .88rem; color: var(--mf-muted); }
.mf-contact__bar .mf-btn { min-width: 150px; }
/* After sending: what was sent, where the answer goes, and what to do next. */
.mf-contact__recap { max-width: 620px; margin: 0 auto; padding: 16px 20px; border-radius: var(--mf-radius-sm); background: var(--mf-green-soft); text-align: left; font-weight: 400; color: var(--mf-ink); overflow-wrap: anywhere; }
.mf-contact__recap p { margin: 0; }
.mf-contact__recap b { color: #3d6b00; }
.mf-contact__recap blockquote { margin: 10px 0; padding-left: 12px; border-left: 3px solid #b9d98a; color: #555; }
.mf-contact__recap blockquote strong { display: block; }
.mf-contact__next { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.mf-contact__next a { text-decoration: underline; }
@media (max-width: 640px) {
	/* "Send" stays in view above the keyboard. */
	.mf-contact__bar { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px -20px; padding: 12px 16px; border-radius: 0 0 18px 18px; background: var(--mf-surface); box-shadow: 0 -6px 14px rgba(120, 110, 90, .12); }
	.mf-contact__email { max-width: none; }
}

/* MyFreedelity app - styles of the "brands" pages. Tokens and components: app.css. */

/* ---------- brand frame (every page of a brand) ---------- */
.mf-brandhead h1 a { color: inherit; }
.mf-brandhead h1 a:hover { color: var(--mf-magenta-dark); }
.mf-brand__top {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px;
	text-align: center; margin-bottom: 18px;
}
.mf-brand__top--alone { grid-template-columns: 1fr; }
.mf-brand__logo { display: inline-block; }
.mf-brand__logo img { display: block; max-width: 100%; max-height: 100px; width: auto; margin: 0 auto; }
.mf-brand__name { margin: 0; font-size: 1.7rem; color: var(--mf-navy); }
.mf-brand__balance { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.mf-brand__figure { display: grid; justify-items: center; color: var(--mf-navy); }
.mf-brand__number { font-size: 3.2rem; font-weight: 300; line-height: 1; }
.mf-brand__unit { text-transform: uppercase; font-size: 1.05rem; }
.mf-brand__expiring { text-align: center; margin: 26px 0; }
.mf-brand__tabs { margin: 26px 0 40px; }
.mf-brand__body { min-width: 0; }
.mf-brand__body > hr { margin: 34px 0; }

/* Section titles of the brand pages: magenta capitals, as the legacy headings. */
.mf-brand__title {
	margin: 0 0 22px; color: var(--mf-magenta); font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
}
.mf-brand__subtitle { margin: 28px 0 6px; color: var(--mf-navy); font-size: 1rem; font-weight: 700; }
.mf-brand__section { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mf-brand__section .mf-brand__title { margin: 0; }
.mf-brand__block > p { margin: 0; }

/* "Nothing to show": the sentence and the empty-state mascot side by side. */
.mf-brand-empty {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; text-align: center; color: var(--mf-muted);
}
.mf-brand-empty p { margin: 0; font-size: 1.1rem; }
.mf-brand-empty img { max-height: 220px; width: auto; justify-self: center; }

/* ---------- my brands (index.ks?page=myfreedelity_affiliations): advantages and contact preferences ---------- */
.mf-affs__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 24px; }
.mf-affs__search { border-radius: 19px; }
.mf-affs__tools .mf-select { width: auto; border-radius: 19px; }
.mf-affs__title { margin: 0 0 14px; font-size: 1.15rem; font-weight: 600; color: var(--mf-magenta); }
.mf-affs__count::before { content: "\00b7"; margin: 0 .45em; }
.mf-affs__count { font-weight: 400; color: var(--mf-muted); }
.mf-affs__nothing { margin: 6px 0 0; color: var(--mf-muted); }
.mf-affcards + .mf-affs__title { margin-top: 28px; }
.mf-affs__intro { margin: 0 0 14px; color: var(--mf-muted); }
.mf-affs__empty { padding: 20px 0; }

/* The logo of a brand, or a disc with its initial. */
.mf-afflogo { flex: none; object-fit: contain; }
.mf-afflogo--none { display: inline-grid; place-items: center; border-radius: 50%; background: #77767d; color: #fff; font-weight: 700; }
.mf-affcard__logo { width: 72px; height: 44px; }
.mf-affcard__logo.mf-afflogo--none { width: 44px; }
.mf-affgrid__logo { width: 46px; height: 28px; }
.mf-affgrid__logo.mf-afflogo--none { width: 28px; margin: 0 9px; font-size: .8rem; }

/* A brand where something waits: the whole card leads to the brand's page. */
.mf-affcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mf-affcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); background: var(--mf-surface); transition: border-color .15s; }
.mf-affcard:hover { border-color: var(--mf-magenta); }
.mf-affcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--mf-navy); }
.mf-affcard__head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mf-affcard__head:focus-visible { outline: 0; }
.mf-affcard__head:focus-visible::after { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-affcard__name { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.mf-affcard__chevron { flex: none; font-size: .85rem; }
.mf-affcard__figure { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: var(--mf-magenta); }
.mf-affcard__details { margin: 4px 0 0; font-size: .86rem; color: var(--mf-muted); }
.mf-affcard__ngo { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: .84rem; color: var(--mf-navy); text-decoration: underline; }
.mf-affcard__ngo:hover { color: var(--mf-magenta); }

/* The contact switches of every brand: a column per channel, the first row for all the brands at once. */
.mf-affgrid { width: 100%; border-collapse: collapse; }
.mf-affgrid th, .mf-affgrid td { padding: 9px 8px; text-align: center; vertical-align: middle; }
.mf-affgrid thead th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-muted); white-space: nowrap; }
.mf-affgrid tbody tr { border-top: 1px solid var(--mf-line); }
.mf-affgrid th:first-child { text-align: left; font-weight: 400; }
.mf-affgrid .mf-switch { vertical-align: middle; }
.mf-affgrid__label { display: none; }
.mf-affgrid__of { display: block; margin-top: 3px; font-size: .82rem; font-weight: 400; color: var(--mf-muted); }
.mf-affgrid__all { background: var(--mf-soft); }
.mf-affgrid__all th strong { color: var(--mf-navy); }
.mf-affgrid__brand { display: flex; align-items: center; gap: 10px; }
.mf-affgrid__brand > a:first-child { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-affgrid__brand > a:first-child:hover { color: var(--mf-magenta); }
.mf-affgrid__ngo { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--mf-soft); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-navy); }
.mf-affgrid__ngo:hover { background: var(--mf-navy); color: #fff; }
.mf-affgrid tbody tr.mf-affgrid__extra { border-top: 0; }
.mf-affgrid__extra td { padding: 0 8px 10px 64px; text-align: left; }
.mf-affgrid__social { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .9rem; }
.mf-affgrid__social .mf-affgrid__of { margin: 0; }

/* "Everywhere at once": what will change, the progress, then the brands that failed. */
.mf-affs__changes { margin: 0; color: var(--mf-muted); }
.mf-affs__progress { display: block; width: 100%; height: 8px; margin-top: 14px; accent-color: var(--mf-magenta); }
.mf-affs__failures { margin: 12px 0 0; padding-left: 20px; color: var(--mf-red); }

@media (max-width: 767px) {
	.mf-affs__tools { grid-template-columns: minmax(0, 1fr); }
	.mf-affs__tools .mf-select { width: 100%; }
	.mf-affcards { grid-template-columns: minmax(0, 1fr); }

	/* The grid becomes one block per brand, each switch with the name of its channel; "all my brands" stays in view. */
	.mf-affgrid, .mf-affgrid tbody { display: block; }
	.mf-affgrid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mf-affgrid tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 12px 0; }
	.mf-affgrid th, .mf-affgrid td { padding: 4px 0; }
	.mf-affgrid tbody th { grid-column: 1 / -1; }
	.mf-affgrid tbody td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; text-align: left; }
	.mf-affgrid__label { display: inline; font-size: .9rem; }
	.mf-affgrid td > .mf-affgrid__of { flex-basis: 100%; margin: 0; text-align: right; }
	.mf-affgrid__all th .mf-affgrid__of { display: inline; margin-left: 8px; }
	.mf-affgrid tbody tr.mf-affgrid__all { position: sticky; top: var(--mf-top); z-index: 5; margin: 0 -16px; padding: 10px 16px; box-shadow: 0 6px 10px -8px rgba(0, 32, 64, .35); }
	.mf-affgrid tbody tr.mf-affgrid__extra { display: block; padding: 0 0 12px; }
	.mf-affgrid__extra td { padding: 0; justify-content: flex-start; }
	.mf-affgrid__social { width: 100%; justify-content: space-between; }
	.mf-affgrid__social .mf-affgrid__of { flex-basis: 100%; }
}

/* ========== brand frame (balance, tabs, "My account here" menu), brand home, stores of a brand ========== */

/* Frame: the logo on the left, what I hold on the right with what it is and its dates. */
.mf-brand__top:not(.mf-brand__top--alone) {
	grid-template-columns: minmax(0, 1fr) auto; text-align: left; margin: 14px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--mf-line);
}
.mf-brand__top:not(.mf-brand__top--alone) .mf-brand__logo img { margin: 0; max-height: 80px; }
.mf-brand .mf-brand__balance { justify-content: flex-end; align-items: flex-end; gap: 4px 32px; text-align: right; }
.mf-brand .mf-brand__figure { justify-items: end; }
.mf-brand .mf-brand__number { font-size: 2.5rem; }
.mf-brand .mf-brand__unit { text-transform: none; font-size: .92rem; color: var(--mf-muted); }
.mf-brand .mf-brand__expiring { flex-basis: 100%; margin: 0; text-align: right; font-size: .92rem; color: var(--mf-muted); }
.mf-brand__expiring strong { color: var(--mf-navy); }

/* Navigation: the content tabs on one line, then the menu of the account pages. */
.mf-brandnav { display: flex; align-items: flex-start; gap: 10px 14px; margin: 18px 0 30px; }
.mf-brandnav .mf-brand__tabs { flex: 1; min-width: 0; margin: 0; justify-content: flex-start; gap: 8px; }
.mf-brand__tabs a { padding: 8px 14px; gap: 8px; font-size: .95rem; white-space: nowrap; }
.mf-brand__count {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
	background: var(--mf-magenta); color: #fff; font-size: .72rem; font-weight: 700;
}
.mf-brandmenu { position: relative; flex: none; }
.mf-brandmenu__toggle {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--mf-navy); border-radius: 24px;
	background: none; color: var(--mf-navy); font-size: .95rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mf-brandmenu__toggle:hover, .mf-brandmenu__toggle.is-active { border-color: var(--mf-magenta); color: var(--mf-magenta); }
/* The active page of the menu stands for the menu's name (on a phone both are shown). */
.mf-brandmenu__toggle.is-active > span { display: none; }
.mf-brandmenu__chevron { font-size: .72em; transition: transform .15s; }
.mf-brandmenu__toggle[aria-expanded="true"] .mf-brandmenu__chevron { transform: rotate(180deg); }
.mf-brandmenu__panel {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; padding: 6px 0;
	background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); box-shadow: var(--mf-shadow-lg);
}
.mf-brandmenu__head, .mf-brandmenu__backdrop { display: none; }
.mf-brandmenu__panel a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 18px; color: var(--mf-ink); }
.mf-brandmenu__panel a > i { margin-top: 3px; text-align: center; color: #9a9a9a; }
.mf-brandmenu__panel a > span { display: grid; }
.mf-brandmenu__panel small { font-size: .82rem; font-weight: 400; color: var(--mf-muted); }
.mf-brandmenu__panel small:empty { display: none; }
.mf-brandmenu__panel a:hover, .mf-brandmenu__panel a.is-active, .mf-brandmenu__panel a.is-active > i { color: var(--mf-magenta); }
.mf-brandmenu__panel a.is-active { font-weight: 700; }
.mf-brandmenu__close { border: 0; background: none; padding: 6px; font-size: 1.2rem; color: var(--mf-muted); cursor: pointer; }

/* Brand home: what I have at the brand, one tile each. */
.mf-bhome { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mf-btile { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; border: 1px solid var(--mf-line-strong); border-radius: var(--mf-radius-sm); }
.mf-btile--soft { background: var(--mf-soft); border-color: var(--mf-soft); }
.mf-btile--card { grid-row: span 2; }
.mf-btile__title {
	display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
	font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-muted);
}
.mf-btile__body { display: grid; gap: 4px; align-content: start; }
.mf-btile__main { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-btile__main--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mf-btile__sub { margin: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-btile__more { margin: 8px 0 0; font-size: .9rem; }
.mf-btile__more a, .mf-btile__link {
	display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
	font: inherit; font-weight: 700; color: var(--mf-navy); text-decoration: underline; cursor: pointer;
}
.mf-btile__more a:hover, .mf-btile__link:hover { color: var(--mf-magenta); }
.mf-btile__more i { font-size: .7em; }
.mf-btile__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mf-btile__code { overflow-x: auto; }
.mf-btile__code .mf-cardcode { margin: 0; width: min(100%, 420px); height: auto; }
/* The card in large: the barcode as wide as the dialog. */
.mf-bigcard { text-align: center; }
.mf-bigcard .mf-cardcode { width: 100%; max-width: 760px; height: auto; }
.mf-bigcard p { margin: 14px 0 0; color: var(--mf-muted); }

/* Loyalty programme: what it counts, the gauge to the next reward, the rewards, the brand's links. */
.mf-brand__title.mf-bhome__title { margin: 30px 0 12px; }
.mf-bprog__text { margin: 0 0 14px; }
.mf-bgauge { margin-bottom: 12px; }
.mf-bgauge__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: baseline; margin-bottom: 6px; font-size: .92rem; color: var(--mf-muted); }
.mf-bgauge__row strong { font-size: 1.05rem; color: var(--mf-navy); }
.mf-bgauge__bar { height: 14px; border-radius: 7px; background: #ece9e1; overflow: hidden; }
.mf-bgauge__bar i { display: block; height: 100%; border-radius: 7px; background: var(--mf-magenta); }
.mf-bprog__rewards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.mf-bprog__rewards li { padding: 6px 14px; border-radius: 18px; background: var(--mf-soft); font-size: .9rem; }
.mf-bprog__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mf-bprog__links .is-off { opacity: .45; font-weight: 400; cursor: default; }
.mf-bprog__links .is-off:hover { border-color: var(--mf-line-strong); }

/* Stores of a brand: my favourite store, the search, the map behind its button, the list. */
.mf-bstores__fav { margin-bottom: 28px; }
.mf-bstores__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.mf-bstores__tools .mf-input { flex: 1 1 260px; width: auto; border-radius: 19px; }
.mf-bstores__tools .mf-chip i { font-size: .9em; color: var(--mf-muted); }
.mf-bstores__tools .mf-chip[aria-pressed="true"] i { color: inherit; }
.mf-bstores__note { margin: 0 0 12px; font-size: .9rem; color: var(--mf-muted); }
.mf-brand__map { width: 100%; height: 350px; margin-bottom: 14px; background: var(--mf-soft); }
.mf-brand__bubble img { max-width: 120px; }
.mf-bstore {
	display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto 24px; align-items: center; gap: 4px 10px;
	padding: 10px 0; border-bottom: 1px solid var(--mf-line);
}
.mf-bstore__fav { border: 0; background: none; padding: 6px; font-size: 1.05rem; color: #cfcbd3; cursor: pointer; }
.mf-bstore__fav.is-on { color: var(--mf-magenta); }
.mf-bstore__main { display: grid; min-width: 0; }
.mf-bstore__main strong { color: var(--mf-navy); }
.mf-bstore__main small { font-size: .88rem; color: var(--mf-muted); }
.mf-bstore__main:hover strong { color: var(--mf-magenta); }
.mf-bstore__km { font-size: .9rem; color: var(--mf-muted); white-space: nowrap; }
.mf-bstore__contact { display: flex; gap: 2px; }
.mf-bstore__contact > * {
	display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none;
	color: var(--mf-magenta); cursor: pointer;
}
.mf-bstore__contact > .is-off { color: #d5d5d5; cursor: default; }
.mf-bstore__next { text-align: center; font-size: .8rem; color: #9a9a9a; }
.mf-bstores__count { margin: 14px 0 0; text-align: center; font-size: .9rem; color: var(--mf-muted); }
.mf-bstores__more { display: flex; justify-content: center; min-height: 1px; margin-top: 10px; }
.mf-slides { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.mf-slides__img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; grid-column: 2; }
.mf-slides__nav { border: 0; background: none; font-size: 1.4rem; color: var(--mf-navy); cursor: pointer; padding: 8px; }

@media (max-width: 767px) {
	.mf-brand__top:not(.mf-brand__top--alone) { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.mf-brand__top:not(.mf-brand__top--alone) .mf-brand__logo img { margin: 0 auto; }
	.mf-brand .mf-brand__balance { justify-content: center; text-align: center; }
	.mf-brand .mf-brand__figure { justify-items: center; }
	.mf-brand .mf-brand__expiring { text-align: center; }
	.mf-brand .mf-brand__number { font-size: 2.2rem; }

	/* The tabs scroll sideways on one line; the menu keeps its own line and opens as a sheet from the bottom. */
	.mf-brandnav { display: block; margin-bottom: 22px; }
	.mf-brandnav .mf-brand__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 2px 16px; }
	.mf-brandnav .mf-brand__tabs::-webkit-scrollbar { display: none; }
	.mf-brand__tabs a { flex: none; }
	.mf-brandmenu__toggle { width: 100%; justify-content: center; }
	.mf-brandmenu__toggle.is-active > span { display: inline; font-weight: 400; }
	.mf-brandmenu__toggle.is-active .mf-brandmenu__who { display: none; }
	.mf-brandmenu__toggle strong::before { content: "\00b7"; margin-right: 8px; }
	.mf-brandmenu__backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 24, 48, .55); }
	.mf-brandmenu__panel {
		position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 91; min-width: 0; max-height: 80vh; overflow: auto;
		padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0;
	}
	.mf-brandmenu__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 18px; color: var(--mf-navy); }
	.mf-brandmenu__panel a { padding: 13px 18px; }

	/* The card first, full width, then the tiles one under the other. */
	.mf-bhome { grid-template-columns: minmax(0, 1fr); }
	.mf-btile--card { grid-row: auto; }
	.mf-btile__code .mf-cardcode { margin: 0 auto; }
	.mf-bgauge__row { grid-template-columns: minmax(0, 1fr) auto; }
	.mf-bgauge__row span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }

	/* The contacts of my favourite store: a row of icons with their labels. */
	.mf-bstores__fav .mf-btile__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.mf-bstores__fav .mf-btile__actions .mf-btn {
		flex-direction: column; gap: 4px; padding: 8px 2px; border: 0; border-radius: var(--mf-radius-sm);
		background: var(--mf-surface); font-size: .74rem; font-weight: 600; text-align: center;
	}
	.mf-bstores__fav .mf-btile__actions .mf-btn i { font-size: 1.15rem; }
	/* A store: its name over its address, the contacts on a line of their own. */
	.mf-bstore { grid-template-columns: 36px minmax(0, 1fr) auto 20px; }
	.mf-bstore__contact { grid-column: 2 / -1; grid-row: 2; }
}

/* ---------- consents ---------- */
.mf-consent { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.mf-consent__info { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--mf-navy); font-size: 1.1rem; }
.mf-consent__title { margin: 0; }
.mf-consent__more { margin: 8px 0 0; font-size: .92rem; }

/* ---------- brand preferences, limited page, joining and leaving a brand ----------
   (brand/prefs.js, brand/limited.js, brand/switchtable.js, brand/membership.js) */
.mf-psec { margin: 32px 0 10px; font-size: .95rem; }
.mf-phint { margin: 0 0 6px; font-size: .88rem; color: var(--mf-muted); }
/* Where the consumer stands (preferences), why the page is short (limited page). */
.mf-pinfo { margin: 0; padding: 14px 18px; border-radius: var(--mf-radius-sm); background: #eef3f8; }
.mf-pinfo p { margin: 0; }
.mf-pinfo .mf-btn { margin: 10px 0 6px; background: var(--mf-surface); }
.mf-pinfo small { display: block; font-size: .85rem; color: var(--mf-muted); }
.mf-pwarn { margin: 0 0 1em; padding: 12px 16px; border-radius: var(--mf-radius-sm); background: #fff3d6; }
/* "Not offered by this brand": a neutral state, not an error. */
.mf-pstatus {
	flex: none; display: inline-block; padding: 3px 10px; border-radius: 10px;
	background: var(--mf-soft); color: var(--mf-muted); font-size: .8rem; font-weight: 700;
}

/* The switch table: one line per channel, the permission and the commercial opt-in side by side. */
.mf-ptable { width: 100%; border-collapse: collapse; }
.mf-ptable thead th {
	padding: 6px 10px 8px 0; text-align: left; vertical-align: bottom;
	font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-muted);
}
.mf-ptable tbody th, .mf-ptable td { padding: 12px 10px 12px 0; border-top: 1px solid var(--mf-line); vertical-align: top; text-align: left; font-weight: 400; }
.mf-ptable tbody th b { display: block; font-weight: 700; }
.mf-ptable small { display: block; font-size: .85rem; line-height: 1.4; color: var(--mf-muted); }
.mf-ptable .mf-ptable__c { width: 200px; padding-right: 0; text-align: center; }
/* An opt-in whose permission is off: greyed, with the reason under it. */
.mf-ptable__c.is-off .mf-switch { cursor: default; }
.mf-ptable__note { margin-top: 4px; }
@media (min-width: 768px) {
	/* The column headings name the switches; their full labels stay for screen readers. */
	.mf-ptable .mf-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Lines of these pages: a title, what is behind it, and a chevron, a switch or a status. */
.mf-prow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mf-line); color: inherit; }
.mf-prow__text { flex: 1; min-width: 0; display: grid; }
.mf-prow__text b { color: var(--mf-navy); font-weight: 600; }
.mf-prow__text small { font-size: .85rem; color: var(--mf-muted); }
.mf-prow--link > i { flex: none; font-size: .85rem; color: var(--mf-navy); }
.mf-prow--link:hover { color: inherit; }
.mf-prow--link:hover b, .mf-prow--link:hover > i { color: var(--mf-magenta); }
.mf-prows + .mf-phint { margin-top: 10px; }

/* Sharing my points with an NGO, read as one sentence. */
.mf-ngo { margin-top: 14px; padding: 16px 18px; border: 3px solid var(--mf-soft); border-radius: 18px; }
.mf-ngo__sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.mf-ngo__sentence .mf-select { width: auto; max-width: 100%; border-radius: 19px; }
.mf-ngo__about { display: grid; grid-template-columns: 10fr 6fr; gap: 20px; align-items: start; margin: 18px 0 0; }
.mf-ngo__name { margin-bottom: 6px; }
.mf-ngo__logo { max-height: 140px; width: auto; justify-self: center; }
.mf-ngo__details { margin: 0; white-space: pre-line; }
.mf-ngo .mf-form__actions { margin-top: 16px; }

/* Leaving: a block of its own, the consequences before the button. */
.mf-pleave { margin-top: 32px; padding: 16px 18px; border: 1px solid #f0c9d0; border-radius: var(--mf-radius-sm); }
.mf-pleave h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--mf-red); }
.mf-pleave p { margin: 0 0 12px; }
.mf-leave__stake:empty { display: none; }
.mf-leave__less { font-size: .92rem; color: var(--mf-muted); }
.mf-leave__less .mf-btn--link { display: inline; font-weight: 600; text-align: left; }

/* Not a member: what joining means, then the steps of joining, in the page. */
.mf-brand--limited .mf-brand__body { scroll-margin-top: calc(var(--mf-top) + 16px); }
.mf-jmeans { margin: 0 0 6px; }
ul.mf-jmeans { padding-left: 20px; }
.mf-jsteps { list-style: none; display: flex; gap: 6px; margin: 0 0 20px; padding: 0; }
.mf-jsteps li {
	flex: 1; padding: 8px 6px; border-radius: 10px; text-align: center;
	background: var(--mf-soft); color: var(--mf-muted); font-size: .88rem; font-weight: 600;
}
.mf-jsteps li.is-current { background: var(--mf-navy); color: #fff; }
.mf-jsteps li.is-done { background: var(--mf-green-soft); color: #3d6b00; }
.mf-join__stage:focus { outline: 0; }
.mf-jdoc { border-bottom: 1px solid var(--mf-line); }
.mf-jdoc__head {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px;
	border: 0; background: none; text-align: left; cursor: pointer; color: var(--mf-navy); font-weight: 600;
}
.mf-jdoc__head i { flex: none; width: 14px; font-size: .8rem; transition: transform .15s; }
.mf-jdoc__head[aria-expanded="true"] i { transform: rotate(90deg); }
.mf-jdoc__body { padding: 4px 4px 18px 30px; overflow-wrap: anywhere; }
.mf-jdoc__body h1, .mf-jdoc__body h2 { font-size: 1.15rem; }
/* A brand's text may hold a wide table: it scrolls in its own box, not the page. */
.mf-jdoc__body > div { overflow-x: auto; }
.mf-join__choices { display: grid; gap: 12px; margin-top: 20px; }
.mf-join__needed { display: block; font-size: .85rem; color: var(--mf-muted); }
.mf-join__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* The conditions are shown whole, so they can be long: the buttons of a step stay in view under them. */
.mf-join .mf-join__actions { position: sticky; bottom: 0; z-index: 2; margin-bottom: -12px; padding: 12px 0; background: var(--mf-surface); border-top: 1px solid var(--mf-line); }
/* The last step decides nothing: its links follow the table. */
.mf-join .mf-join__actions--end { position: static; margin-bottom: 0; padding-bottom: 0; border-top: 0; }
.mf-join__how { margin: 18px 0 8px; }
.mf-join__how b { color: var(--mf-navy); }

@media (max-width: 767px) {
	/* The table becomes one card per channel, the two switches under its name with their full labels. */
	.mf-ptable, .mf-ptable tbody, .mf-ptable tr, .mf-ptable th, .mf-ptable td { display: block; }
	.mf-ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mf-ptable tbody tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); }
	.mf-ptable tbody th, .mf-ptable td { padding: 0; border: 0; }
	.mf-ptable td.mf-ptable__c { width: auto; margin-top: 12px; text-align: left; }
	.mf-ptable td.mf-ptable__na { display: none; }
	.mf-ptable .mf-switch { display: flex; align-items: flex-start; }
	.mf-ptable .mf-switch__label { font-size: .92rem; }
	.mf-ptable__c.is-off .mf-switch__label { color: var(--mf-muted); }
	.mf-ptable__note { padding-left: 58px; }
	.mf-prow { flex-wrap: wrap; gap: 8px 14px; }
	.mf-prow__text { flex-basis: 60%; }
	.mf-ngo__about { grid-template-columns: 1fr; }
	.mf-ngo__sentence .mf-select { flex: 1 1 100%; }
	.mf-pleave .mf-btn { width: 100%; }
	.mf-jsteps li { font-size: .78rem; padding: 8px 2px; }
	.mf-jdoc__body { padding-left: 4px; }
	/* Each step is a screen with its main button held at the bottom. */
	.mf-join .mf-join__actions { margin: 22px -16px -20px; padding: 12px 16px; border-radius: 0 0 18px 18px; }
	.mf-join__actions .mf-btn { flex: 1 1 0; }
	.mf-join__actions .mf-btn--accent, .mf-join__actions .mf-btn--primary { order: -1; flex-basis: 100%; min-height: 46px; }
}
@media (max-width: 600px) {
	/* The leave confirmation is a full-screen sheet, "No" first and full width. */
	.mf-modal.mf-leave { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.mf-leave .mf-modal__body { flex: 1; }
	.mf-leave .mf-modal__actions { flex-direction: column; }
	.mf-leave .mf-modal__actions .mf-btn { width: 100%; min-height: 46px; }
}

/* ---------- privacy pages of a brand: its consents (brand/consentstore.js) and my data there (brand/mydata.js) ---------- */
.mf-privacy__title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 500; color: var(--mf-navy); }
.mf-privacy__lead { margin: 0 0 14px; }
.mf-privacy__sec { margin: 26px 0 8px; color: var(--mf-magenta); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mf-privacy__none { margin: 0; font-size: .88rem; color: var(--mf-muted); }
.mf-privacy__info, .mf-privacy__warn { padding: 12px 16px; border-radius: var(--mf-radius-sm); background: #eef3f8; }
.mf-privacy__warn { background: #fff3d6; }
.mf-privacy__info p { margin: 0; }
.mf-privacy__info .mf-privacy__title { margin-bottom: 4px; font-size: 1.02rem; font-weight: 700; }
/* A sentence and its buttons on one line; the buttons go under it when the line is short. */
.mf-privacy__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mf-privacy__text { flex: 1; min-width: 200px; }
.mf-privacy__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-privacy__bar .mf-btn--ghost { background: var(--mf-surface); border-color: var(--mf-navy); }

/* Consents: one line per consent (chevron and sentence, state in a word, switch), unfolding on its explanation. */
.mf-cchoices { list-style: none; margin: 0; padding: 0; }
.mf-cchoices > li { padding: 4px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-cchoices > li:last-child { border-bottom: 0; }
.mf-cchoice__line { display: flex; align-items: flex-start; gap: 12px; }
.mf-cchoice__head {
	flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px;
	border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left;
}
button.mf-cchoice__head { cursor: pointer; }
button.mf-cchoice__head:hover { background: #f9eff6; }
.mf-cchoice__chev { flex: none; width: 18px; text-align: center; color: var(--mf-magenta); font-size: .85rem; line-height: 1.75; transition: transform .15s; }
[aria-expanded="true"] > .mf-cchoice__chev { transform: rotate(90deg); }
.mf-cchoice__title { min-width: 0; overflow-wrap: anywhere; }
.mf-cchoice__hint { display: block; margin-top: 2px; font-size: .84rem; color: var(--mf-muted); }
.mf-cchoice__hint a { text-decoration: underline; }
.mf-cchoice__side { flex: none; display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.mf-cstate { padding: 2px 10px; border-radius: 10px; background: var(--mf-soft); color: var(--mf-muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.mf-cstate.is-on { background: var(--mf-green-soft); color: #3d6b00; }
.mf-cstate.is-off { background: var(--mf-red-soft); color: #b3203a; }
.mf-cchoice__panel, .mf-cchoice__notice { margin: 0 0 10px 34px; font-size: .9rem; }
.mf-cchoice__why { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--mf-soft); white-space: pre-line; }
.mf-cchoice__doc { margin: 8px 0 0; color: var(--mf-muted); }
.mf-cchoice__doc .mf-btn--link, .mf-cchoice__doc a, .mf-cchoice__notice .mf-btn--link { display: inline; font-weight: 600; text-align: left; text-decoration: underline; }
.mf-seealso { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--mf-radius-xs); color: inherit; }
.mf-seealso:hover { background: #f9eff6; color: inherit; }
.mf-seealso__text { flex: 1; min-width: 0; display: grid; }
.mf-seealso__text b { font-weight: 600; color: var(--mf-navy); }
.mf-seealso__text small { font-size: .84rem; color: var(--mf-muted); }
.mf-seealso > i { flex: none; width: 28px; text-align: center; font-size: .85rem; color: var(--mf-magenta); }

/* My data: the comparison with the profile, then the form. */
.mf-copy__more { font-weight: 600; text-decoration: underline; white-space: nowrap; }
.mf-copy__more i { font-size: .7em; }
.mf-copy__reading { margin-top: 12px; }
.mf-copy__table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.mf-copy__table thead th { padding: 6px 10px 6px 0; text-align: left; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-muted); }
.mf-copy__table tbody th, .mf-copy__table tbody td { padding: 11px 10px 11px 0; border-top: 1px solid var(--mf-soft); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.mf-copy__table tbody th { width: 170px; font-weight: 400; color: var(--mf-muted); }
.mf-copy__mine { font-weight: 700; }
.mf-copy__same { font-size: .84rem; color: var(--mf-muted); }
.mf-copy__value { font-weight: 700; color: #a85a00; }
.mf-copy__other .mf-btn--link { margin-left: 6px; font-size: .84rem; font-weight: 600; }
.mf-copy__form { margin-top: 18px; }
.mf-copy__form .mf-privacy__sec { margin: 12px 0 -4px; }
.mf-copy__req { color: var(--mf-magenta); font-weight: 700; }
.mf-copy__diff { margin: 0; font-size: .82rem; color: #a85a00; overflow-wrap: anywhere; }
.mf-copy__diff u { color: var(--mf-navy); font-weight: 600; }
.mf-copy__diff .mf-btn--link { display: inline; font-weight: 600; }
.mf-copy__diff.is-taken { color: #3d6b00; }
.mf-copy__legal { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--mf-soft); font-size: .9rem; }
.mf-copy__actions { align-items: center; margin-top: 0; }
.mf-copy__legend { font-size: .85rem; color: var(--mf-muted); }

@media (max-width: 991px) {
	/* One field per line, except number / box and postcode / city. */
	.mf-copy__form .mf-form__row > .mf-copy__number, .mf-copy__form .mf-form__row > .mf-copy__box { grid-column: span 6; }
	.mf-copy__form .mf-form__row > .mf-copy__zip { grid-column: span 4; }
	.mf-copy__form .mf-form__row > .mf-copy__city { grid-column: span 8; }
}
@media (max-width: 767px) {
	/* The sentence keeps the full width: state and switch go under it, on the right. */
	.mf-cchoice__line { flex-wrap: wrap; gap: 0 12px; }
	.mf-cchoice__head { flex-basis: 100%; }
	.mf-cchoice__side { margin-left: auto; padding: 0 0 6px; }
	.mf-cchoice__panel, .mf-cchoice__notice { margin-left: 6px; }
	.mf-privacy__text { flex-basis: 100%; }
	.mf-privacy__actions { width: 100%; }
	.mf-privacy__actions .mf-btn { flex: 1; }
	/* The comparison becomes one block per line: the brand's value, then the profile's when it differs. */
	.mf-copy__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mf-copy__table tr { display: block; padding: 10px 0; border-top: 1px solid var(--mf-soft); }
	.mf-copy__table tbody th, .mf-copy__table tbody td { display: block; width: auto; padding: 0; border: 0; }
	.mf-copy__table tbody th { font-size: .82rem; }
	.mf-copy__table tbody td.mf-copy__same { display: none; }
	.mf-copy__other { margin-top: 6px; }
	.mf-copy__other::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--mf-muted); }
}

/* ---------- brand cards page (myfreedelity_brand_cards): cards, add form, till mode, scanner ---------- */
.mf-cards__intro { margin: 0 0 18px; }
.mf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.mf-cards > .mf-brand-empty { grid-column: 1 / -1; }
/* The video cards (ui/videos.js, p-offers.css) share the class name the cards of this page had, and are framed by this rule: kept as it was. */
.mf-vcard { border: 1px solid var(--mf-line-strong); border-radius: var(--mf-radius-sm); padding: 16px; text-align: center; overflow: hidden; }
.mf-bcard { min-width: 0; border: 1px solid var(--mf-line); border-radius: 16px; padding: 14px 16px; background: var(--mf-surface); }
.mf-bcard__name {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 22px; margin: 0;
	font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-muted);
}
.mf-bcard__first {
	display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 10px;
	background: #f6e4f0; color: var(--mf-magenta); font-size: .75rem; letter-spacing: 0; text-transform: none;
}
.mf-bcard__first i { font-size: .7rem; }
/* Bars only, sized by the view to a whole number of device pixels per module (see fit() in cards.js). */
.mf-bcard__code { margin: 10px 0 4px; }
.mf-bcard__code .mf-cardcode { height: 60px; }
.mf-cardcode { display: block; margin: 0 auto; max-width: none; }
.mf-bcard__number, .mf-till__number {
	margin: 0; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere;
}
.mf-bcard__number { font-size: .95rem; }
.mf-bcard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mf-bcard__clip { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.mf-cardadd { border: 3px solid var(--mf-soft); border-radius: 18px; padding: 16px 18px; }
.mf-cardadd__title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 500; color: var(--mf-magenta); }
.mf-cardadd__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
	padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mf-cardadd__toggle i { font-size: .9rem; color: var(--mf-muted); }
.mf-cardadd__form label { color: var(--mf-navy); }
.mf-cardadd__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-cardadd__row .mf-input { flex: 1 1 200px; width: auto; min-width: 0; }

/* Till mode: one card on white, over the whole screen. */
.mf-till {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: #fff; color: var(--mf-ink);
}
.mf-till[open] { display: flex; flex-direction: column; }
.mf-till__stage {
	flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: 20px 12px; overflow: auto; touch-action: pan-y;
}
.mf-till__brand { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--mf-navy); text-align: center; }
.mf-till__code { width: 100%; max-width: 760px; }
.mf-till__code .mf-cardcode { height: min(34vh, 240px); }
.mf-till__number { font-size: 1.15rem; }
.mf-till__number--alone { font-size: 1.7rem; font-weight: 700; }
.mf-till__hint { margin: 0; text-align: center; font-size: .9rem; color: var(--mf-muted); }
.mf-till__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 8px 14px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--mf-navy); color: #fff; font-weight: 700;
}
.mf-till__nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mf-till__bar button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px;
	padding: 0 10px; border: 0; border-radius: 22px; background: none; font: inherit; color: inherit; cursor: pointer;
}
.mf-till__bar button:hover { background: rgba(255, 255, 255, .14); }
.mf-till__bar button:focus-visible { outline-color: #fff; }

/* Scanner of the add form: the camera, a frame and a line where the code goes. */
.mf-scan__view { position: relative; height: 220px; border-radius: 12px; overflow: hidden; background: #2b2b33; }
.mf-scan__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-scan__frame { position: absolute; left: 10%; right: 10%; top: 50%; height: 64px; margin-top: -32px; border: 2px solid #fff; border-radius: 8px; }
.mf-scan__line { position: absolute; left: 10%; right: 10%; top: 50%; border-top: 2px solid var(--mf-magenta); }
.mf-scan__hint { margin: 12px 0 0; text-align: center; font-size: .9rem; color: var(--mf-muted); }
.mf-scan__hint--error { margin-top: 0; color: var(--mf-red); }

@media (max-width: 767px) {
	/* One card per row; "show in large" is the thumb-sized button, the rest follows under it. */
	.mf-cards { grid-template-columns: minmax(0, 1fr); }
	.mf-bcard__show { flex: 1 0 100%; min-height: 48px; font-size: 1rem; }
	.mf-bcard__actions .mf-btn:not(.mf-bcard__show) { flex: 1 1 auto; min-height: 40px; }
	.mf-cardadd__title { margin: 0; }
	.mf-cardadd__form { margin-top: 8px; }
	.mf-cardadd__row .mf-input { flex-basis: 100%; min-height: 44px; }
	.mf-cardadd__row .mf-btn { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
	.mf-brand__top { grid-template-columns: 1fr; }
	.mf-brand__number { font-size: 2.6rem; }
	.mf-brand-empty { grid-template-columns: 1fr; }
	.mf-brand__section { flex-wrap: wrap; }
	.mf-brandhead h1 { overflow-wrap: anywhere; }
}
/* MyFreedelity app - styles of the "offers" pages. Tokens and components: app.css. */

/* ---------- shared: state switches, empty state ---------- */
/* Available / used / expired switches: a grey band whose pressed entries get the navy underline. */
.mf-toggles { display: flex; margin-bottom: 2rem; background: var(--mf-soft); border-radius: var(--mf-radius-sm) var(--mf-radius-sm) 0 0; overflow: hidden; }
/* On the menu pages the band is the top edge of the card. */
.mf-offers > div > .mf-vouchers > .mf-toggles,
.mf-offers > div > .mf-folders > .mf-toggles { margin: -28px -28px 2rem; border-radius: var(--mf-radius) var(--mf-radius) 0 0; }
.mf-toggles__btn {
	flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 1.25rem .5rem 1rem; border: 0; border-bottom: 5px solid transparent; background: none; cursor: pointer;
	font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; color: var(--mf-muted);
}
.mf-toggles__btn::before {
	content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid currentColor;
}
.mf-toggles__btn[aria-pressed="true"], .mf-toggles__btn:hover { color: var(--mf-navy); border-bottom-color: var(--mf-navy); }
.mf-toggles__btn[aria-pressed="true"]::before {
	background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23004071' stroke-width='2'/%3E%3C/svg%3E");
}
.mf-toggles__btn:focus-visible { outline-offset: -4px; }

.mf-emptystate {
	display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px;
	margin: 30px 0; text-align: center; font-weight: 700; color: var(--mf-navy);
}
.mf-emptystate p { margin: 3rem 2rem; }
.mf-emptystate img { display: block; width: 100%; max-width: 250px; margin: 0 auto; }

/* ==================== vouchers (ui/vouchers.js): "My vouchers", the Vouchers tab of a brand, the voucher dialog of the home page ==================== */
/* The three states are switches drawn as chips (a tick on the ones that are on), then the brands. */
.mf-vouchers__states { margin-bottom: 10px; }
.mf-vouchers__states .mf-chip i { font-size: .8em; }
/* The other brands: a list that sits in the row of chips and looks like one. */
.mf-vouchers__count { margin: 0 0 12px; font-size: .9rem; color: var(--mf-muted); }
.mf-vouchers__list { display: grid; gap: 14px; }
.mf-vouchers__list > .mf-emptystate { margin: 10px 0; }
.mf-vouchers__none { margin: 6px 0 0; }
.mf-vouchers__elsewhere { margin: -8px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-vouchers__elsewhere a { font-weight: 700; white-space: nowrap; }
.mf-vouchers__elsewhere a i { margin-left: 8px; font-size: .8em; }

/* One voucher: value and brand | title, days left, conditions, print | barcode | chevron; what unfolds under the last three. */
.mf-vticket {
	display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; min-width: 0;
	border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); overflow: hidden; background: var(--mf-surface); text-align: left;
}
.mf-vticket__value {
	grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	padding: 16px 10px; text-align: center; color: #fff; background: var(--mf-magenta) url("/images/vouchers/voucherbg.png") top left / cover no-repeat;
}
.mf-vticket__value img { width: 52px; height: 52px; margin-bottom: 4px; padding: 7px; border-radius: 50%; background: #fff; object-fit: contain; }
.mf-vticket__value b { font-size: 2rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.mf-vticket__value > i { margin: 4px 0; font-size: 2rem; }
.mf-vticket__value span { font-size: .84rem; overflow-wrap: anywhere; }
.mf-vticket__main { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: 8px; align-content: center; justify-items: start; padding: 16px 18px; }
.mf-vticket__title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-vticket__title small { display: block; font-size: .86rem; font-weight: 400; color: var(--mf-muted); }
.mf-vticket__when { margin: 0; font-size: .92rem; }
.mf-vticket__left { font-weight: 700; color: #b45309; }
.mf-vticket__flag { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; }
.mf-vticket__flag.is-used { font-weight: 700; color: #3f7a00; }
.mf-vticket__flag.is-expired { color: var(--mf-muted); }
.mf-vticket__conds { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.mf-vticket__conds li { padding: 3px 10px; border-radius: 12px; background: var(--mf-soft); font-size: .82rem; }
.mf-vticket__desc { margin: 0; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
.mf-vticket__actions { margin: 2px 0 0; }
.mf-vticket__code { grid-column: 3; grid-row: 1; display: grid; place-items: center; min-width: 0; padding: 12px 16px; border-left: 1px dashed var(--mf-line-strong); }
.mf-vticket__code svg { display: block; max-width: 100%; height: auto; }
/* "Enlarge": the code full screen, offered on a phone only (see the 640 px rules below). */
.mf-vticket__code { gap: 8px; }
.mf-vticket__enlarge { display: none; }
.mf-vticket__toggle { grid-column: 4; grid-row: 1; width: 54px; padding: 0; border: 0; border-left: 1px dashed var(--mf-line-strong); background: none; font-size: .9rem; color: var(--mf-navy); cursor: pointer; }
.mf-vticket__toggle:hover { background: #f9eff6; }
.mf-vticket__toggle:focus-visible { outline-offset: -3px; }
.mf-vticket__toggle i { transition: transform .15s; }
.mf-vticket__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.mf-vticket__detail { grid-column: 2 / -1; grid-row: 2; display: grid; gap: 8px; justify-items: start; padding: 12px 18px 16px; border-top: 1px dashed var(--mf-line-strong); font-size: .9rem; }
.mf-vticket__detail p { margin: 0; }
.mf-vticket__uses { list-style: none; margin: 0; padding: 0; }
.mf-vticket__uses li { padding: 2px 0; }
.mf-vticket__visual { display: block; max-width: min(100%, 260px); }
/* Used or expired: the band turns grey... */
.mf-vticket--used .mf-vticket__value, .mf-vticket--expired .mf-vticket__value { background: #b3b0b8; }
/* ... and the ticket is shorter: no logo, a smaller value. */
.mf-vticket--used .mf-vticket__value img, .mf-vticket--expired .mf-vticket__value img { display: none; }
.mf-vticket--used .mf-vticket__value, .mf-vticket--expired .mf-vticket__value { padding: 12px 10px; }
.mf-vticket--used .mf-vticket__value b, .mf-vticket--expired .mf-vticket__value b { font-size: 1.6rem; }
.mf-vticket--used .mf-vticket__main, .mf-vticket--expired .mf-vticket__main { gap: 4px; padding: 12px 18px; }
.mf-vticket--used .mf-vticket__title, .mf-vticket--expired .mf-vticket__title { color: #4d7396; }
.mf-modal--voucher .mf-modal__body { padding-top: 14px; }

@media (max-width: 640px) {
	/* A long title ("Mijn geschenkbonnen") must not push the mascot out of the screen. */
	.mf-pagehead:has(+ .mf-offers .mf-vouchers) h1 { min-width: 0; overflow-wrap: anywhere; }
	.mf-pagehead:has(+ .mf-offers .mf-vouchers) .mf-pagehead__art { flex: none; height: 60px; margin-bottom: -20px; }
	/* The ticket stacks: value band on top, text, then the barcode across the full width. */
	.mf-vticket { grid-template-columns: minmax(0, 1fr) auto; }
	.mf-vticket__value { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; text-align: left; }
	.mf-vticket__value img { width: 40px; height: 40px; margin: 0; padding: 5px; }
	.mf-vticket__value b { font-size: 1.6rem; }
	.mf-vticket--used .mf-vticket__value, .mf-vticket--expired .mf-vticket__value { padding: 10px 16px; }
	.mf-vticket .mf-vticket__main { grid-column: 1 / -1; grid-row: 2; padding: 14px 16px; }
	.mf-vticket:has(.mf-vticket__toggle) .mf-vticket__main { grid-column: 1; padding-right: 4px; }
	.mf-vticket__toggle { grid-column: 2; grid-row: 2; width: 46px; border-left: 0; }
	.mf-vticket__code { grid-column: 1 / -1; grid-row: 3; padding: 14px 8px; border-left: 0; border-top: 1px dashed var(--mf-line-strong); }
	.mf-vticket__enlarge { display: inline-flex; }
	.mf-vticket__detail { grid-column: 1 / -1; grid-row: 4; padding: 12px 16px 14px; }
}

/* Printing one voucher (legacy styles/printpreview.css): the ticket alone, on white, inside a dotted cutting line. */
.mf-printarea { display: none; }
@media print {
	html.mf-printing body > *:not(.mf-printarea) { display: none !important; }
	html.mf-printing .mf-printarea { display: block; }
	.mf-printarea .mf-vticket { grid-template-columns: 150px minmax(0, 1fr); max-width: 560px; margin: 15px auto; border: 2px dotted #ccc; border-radius: 0; }
	.mf-printarea .mf-vticket__code { grid-column: 2; grid-row: 2; justify-items: start; padding: 14px 18px; border-left: 0; border-top: 1px dashed var(--mf-line-strong); }
	.mf-printarea .mf-vticket__detail { grid-row: 3; }
	.mf-printarea .mf-vticket__value { background: none; color: var(--mf-magenta); border-right: 1px solid var(--mf-navy); }
	.mf-printarea .mf-vticket__value span { color: var(--mf-navy); }
	.mf-printarea .mf-vticket__actions, .mf-printarea .mf-vticket__toggle, .mf-printarea .mf-vticket__enlarge { display: none; }
	.mf-printarea .mf-vticket__left { color: var(--mf-navy); }
	.mf-printarea .mf-vticket__conds li { border: 1px solid var(--mf-line-strong); background: none; }
}
/* ==================== end of vouchers ==================== */

/* ---------- folders ---------- */
/* "My folders" and the folders tab of a brand (views/portal/folders.js): switches and brand list,
   one card per current folder, finished folders as rows, a folder read under its heading. */
.mf-folders__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
.mf-folders__tools .mf-chips { margin-bottom: 0; }
.mf-folders__tools .mf-chip i { display: none; font-size: .85em; }
.mf-folders__tools .mf-chip[aria-pressed="true"] i { display: inline; }
.mf-folders__tools .mf-select { flex: 0 1 auto; width: auto; max-width: 100%; min-height: 36px; padding-top: 5px; padding-bottom: 5px; border-color: var(--mf-line-strong); border-radius: 18px; }
.mf-folders__title { margin: 28px 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-folders__none { margin: 24px 0; text-align: center; color: var(--mf-muted); }
.mf-leaflets { display: grid; gap: 16px; }
.mf-leaflets--done { gap: 0; }
.mf-leaflet { min-width: 0; padding: 6px 16px 16px; border: 1px solid var(--mf-line); border-radius: 16px; }
.mf-leaflet--done { padding: 0; border: 0; border-bottom: 1px solid var(--mf-soft); border-radius: 0; }
.mf-leaflet__head, .mf-folders__other { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 6px; border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.mf-leaflet__head:hover, .mf-folders__other:hover { background: #f9eff6; color: inherit; }
.mf-leaflet__logo { flex: none; width: 56px; height: 36px; object-fit: contain; }
.mf-leaflet__thumb { flex: none; width: 44px; height: 58px; object-fit: cover; object-position: top; border: 1px solid var(--mf-line); background: var(--mf-soft); }
.mf-leaflet__what { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; overflow-wrap: anywhere; }
.mf-leaflet__what b { color: var(--mf-navy); }
.mf-leaflet__what small { font-size: .86rem; color: var(--mf-muted); }
.mf-leaflet__what em { font-style: normal; font-weight: 700; color: #b45309; }
.mf-leaflet__new { flex: none; padding: 2px 10px; border-radius: 11px; background: var(--mf-magenta); color: #fff; font-size: .74rem; font-weight: 700; }
.mf-leaflet__chevron { flex: none; font-size: .8rem; color: var(--mf-muted); transition: transform .15s; }
[aria-expanded="true"] > .mf-leaflet__chevron { transform: rotate(180deg); }
.mf-leaflet__closed { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 8px 6px 0; }
.mf-leaflet__cover { display: block; width: 100%; padding: 0; border: 1px solid var(--mf-line); background: var(--mf-soft); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.mf-leaflet__cover:hover { border-color: var(--mf-magenta); box-shadow: var(--mf-shadow-lg); }
.mf-leaflet__cover img { display: block; width: 100%; min-height: 120px; }
.mf-leaflet__period { margin: 4px 0 14px; font-size: 1.1rem; font-weight: 700; color: var(--mf-navy); }
.mf-leaflet__given { margin: 16px 0 0; font-size: .86rem; color: var(--mf-muted); overflow-wrap: anywhere; }
.mf-leaflet__open { padding: 6px 6px 0; }
.mf-leaflet--done .mf-leaflet__open { padding-bottom: 18px; }
.mf-leaflet__resume { margin: 0 0 12px; padding: 10px 16px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); font-size: .92rem; }
.mf-leaflet__resume .mf-btn { font-weight: 700; }
/* The pages read in the page. */
.mf-reader__stage { display: flex; align-items: flex-start; justify-content: center; border-radius: var(--mf-radius-xs); background: var(--mf-soft); touch-action: pan-y pinch-zoom; }
/* A page fits the window, so the arrows and the strip under it stay in view. */
.mf-reader__stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: max(420px, calc(100vh - var(--mf-top) - 150px)); background: #fff; user-select: none; }
.mf-reader__stage.is-spread img { max-width: 50%; }
/* Zoomed: the pages at twice the width, scrolled inside the stage. */
.mf-reader__stage.is-zoomed { justify-content: flex-start; max-height: 85vh; overflow: auto; touch-action: auto; }
.mf-reader__stage.is-zoomed img { width: 200%; max-width: none; max-height: none; }
.mf-reader__stage.is-zoomed.is-spread img { width: 100%; }
.mf-reader__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; }
.mf-reader__count { flex: 1 1 auto; text-align: center; color: var(--mf-navy); font-variant-numeric: tabular-nums; }
.mf-reader__nav { flex: none; width: 40px; height: 40px; border: 1px solid var(--mf-line-strong); border-radius: 50%; background: var(--mf-surface); color: var(--mf-navy); cursor: pointer; }
.mf-reader__nav:hover:not(:disabled) { border-color: var(--mf-magenta); color: var(--mf-magenta); }
.mf-reader__nav:disabled { opacity: .3; cursor: default; }
.mf-reader__bar .mf-btn[aria-pressed="true"] { border-color: var(--mf-navy); background: var(--mf-navy); color: #fff; }
.mf-reader__thumbs { display: flex; gap: 8px; margin-top: 14px; padding: 4px 2px 8px; overflow-x: auto; }
.mf-reader__thumbs button { flex: none; width: 54px; height: 74px; padding: 0; border: 2px solid var(--mf-line); border-radius: 4px; background: var(--mf-soft); overflow: hidden; cursor: pointer; }
.mf-reader__thumbs button:hover { border-color: var(--mf-line-strong); }
.mf-reader__thumbs button[aria-current] { border-color: var(--mf-magenta); }
.mf-reader__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* A brand without a current folder, and what the other brands have now. */
.mf-folders__brandnone { margin: 10px 0; padding: 22px; border: 1px solid var(--mf-line); border-radius: 16px; }
.mf-folders__brandnone p { margin: 0 0 14px; font-weight: 700; color: var(--mf-navy); }
.mf-folders__actions { display: flex; flex-wrap: wrap; gap: 10px; min-height: 36px; }
.mf-folders__others { margin-top: 30px; padding: 6px 16px 10px; border: 4px solid var(--mf-soft); border-radius: 16px; }
.mf-folders__others .mf-folders__title { margin: 12px 6px 4px; }
.mf-folders__other + .mf-folders__other, .mf-folders__nothing > .mf-folders__other { border-top: 1px solid var(--mf-soft); border-radius: 0; }
.mf-folders__fold .mf-leaflet__what { color: var(--mf-muted); }
@media (max-width: 640px) {
	.mf-folders__tools .mf-select { width: 100%; }
	.mf-leaflet { padding: 4px 10px 12px; }
	.mf-leaflet--done { padding: 0; }
	.mf-leaflet__head, .mf-folders__other { gap: 10px; padding: 10px 2px; }
	.mf-leaflet__logo { width: 42px; height: 30px; }
	/* Cover on top across the width, text and button under it. */
	.mf-leaflet__closed { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 6px 0 0; }
	.mf-leaflet__open { padding: 6px 0 0; }
	.mf-reader__stage img { width: 100%; max-height: none; }
	/* The arrows on both sides of the page number, zoom and full screen under them. */
	.mf-reader__bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; }
	.mf-reader__bar > :nth-child(1) { grid-area: 1 / 1; }
	.mf-reader__bar > :nth-child(2) { grid-area: 1 / 2 / auto / 4; }
	.mf-reader__bar > :nth-child(5) { grid-area: 1 / 4; }
	.mf-reader__bar > :nth-child(3) { grid-area: 2 / 1 / auto / 3; }
	.mf-reader__bar > :nth-child(4) { grid-area: 2 / 3 / auto / 5; }
	.mf-folders__others { padding: 4px 8px 8px; }
	.mf-folders__actions .mf-btn { width: 100%; }
}

/* Viewer of a folder's pages: a full-screen dialog. */
.mf-viewer {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(0, 24, 48, .94); color: #fff;
}
.mf-viewer[open] { display: grid; grid-template: "bar bar bar" auto "prev stage next" minmax(0, 1fr) / auto minmax(0, 1fr) auto; }
.mf-viewer::backdrop { background: rgba(0, 24, 48, .6); }
.mf-viewer__bar { grid-area: bar; display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.mf-viewer__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mf-viewer__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-viewer__tool, .mf-viewer__nav {
	width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem;
}
.mf-viewer__tool:hover, .mf-viewer__nav:hover:not(:disabled) { background: var(--mf-magenta); }
.mf-viewer__nav { align-self: center; margin: 0 10px; }
.mf-viewer__nav:disabled { opacity: .25; cursor: default; }
.mf-viewer__nav--prev { grid-area: prev; }
.mf-viewer__nav--next { grid-area: next; }
.mf-viewer__stage { grid-area: stage; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding-bottom: 14px; }
.mf-viewer__stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; user-select: none; }
.mf-viewer__stage.is-spread img { max-width: 50%; }
/* Zoomed: the pages at twice the width, scrolled inside the stage. */
.mf-viewer__stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.mf-viewer__stage.is-zoomed img { max-width: none; max-height: none; width: 200%; }
.mf-viewer__stage.is-zoomed.is-spread img { width: 100%; }

/* ---------- videos ---------- */
.mf-videos .mf-pager__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px 22px; }
.mf-vcard { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mf-vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mf-radius-sm); overflow: hidden; background: #111; }
.mf-vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mf-vplayer__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mf-vplayer__poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.mf-vplayer__poster:hover img, .mf-vplayer__poster:focus-visible img { transform: scale(1.04); }
.mf-vplayer__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
	background: var(--mf-magenta); color: #fff; font-size: 1.15rem; padding-left: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: background .15s, transform .15s;
}
.mf-vplayer__poster:hover .mf-vplayer__play { background: var(--mf-magenta-dark); transform: translate(-50%, -50%) scale(1.08); }
/* The dialog a card plays in: as wide as the screen allows while the 16:9 player still fits its height. */
.mf-modal--video { width: min(1100px, calc(100vw - 32px), calc((100vh - 150px) * 16 / 9)); }
.mf-modal--video .mf-modal__body { padding: 14px 20px 20px; overflow: hidden; }
@media (max-width: 600px) {
	.mf-modal--video { width: calc(100vw - 12px); }
	.mf-modal--video .mf-modal__head { padding: 14px 12px 0; }
	.mf-modal--video .mf-modal__body { padding: 10px 6px 8px; }
}
.mf-vcard__meta { display: flex; align-items: flex-start; gap: 12px; }
.mf-vcard__logo { flex: none; width: 46px; height: 46px; object-fit: contain; border-radius: 50%; border: 1px solid var(--mf-line); background: #fff; padding: 5px; }
.mf-vcard__text { min-width: 0; text-align: left; }
.mf-vcard__title { margin: 0 0 3px; text-align: left; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--mf-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-vcard__sub { margin: 0; font-size: .88rem; color: var(--mf-muted); display: flex; flex-wrap: wrap; gap: 0 8px; }
.mf-vcard__sub time::before { content: "\00b7"; margin-right: 8px; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mf-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 14px;
	border: 1px solid var(--mf-line-strong); border-radius: 18px; background: var(--mf-surface); color: var(--mf-ink); cursor: pointer;
}
.mf-chip img { height: 20px; width: auto; max-width: 60px; object-fit: contain; }
.mf-chip:hover { border-color: var(--mf-magenta); }
.mf-chip[aria-pressed="true"] { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }

/* The brand filter of every list (ui/brandchips.js): logo + name chips, the other brands in a list styled as a chip. */
.mf-brandchip { padding-left: 8px; }
.mf-brandchip__logo { flex: none; height: 22px; width: auto; max-width: 60px; object-fit: contain; }
.mf-brandchip__initials {
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: var(--mf-soft); color: var(--mf-navy); font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.mf-brandchips .mf-brandchips__others { width: auto; max-width: 260px; min-height: 36px; padding: 5px 34px 5px 14px; border: 1px solid var(--mf-line-strong); border-radius: 18px; font-size: inherit; cursor: pointer; }
.mf-brandchips .mf-brandchips__others:hover { border-color: var(--mf-magenta); }
.mf-brandchips .mf-brandchips__others.is-chosen { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }
.mf-chips.mf-brandchips { margin-bottom: 14px; }
@media (max-width: 700px) {
	/* On a phone the brands stay on one line and scroll sideways. */
	.mf-chips.mf-brandchips { flex-wrap: nowrap; margin-right: -16px; padding: 2px 16px 6px 2px; overflow-x: auto; scrollbar-width: none; }
	.mf-brandchips::-webkit-scrollbar { display: none; }
	.mf-brandchips > * { flex: none; white-space: nowrap; }
}

/* ---------- promotions ---------- */
.mf-chip__count { margin-left: 2px; font-weight: 400; color: var(--mf-muted); }
.mf-promos__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; margin-bottom: 20px; }
.mf-promos__split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.mf-promos__count { margin: 0 0 12px; font-size: .9rem; color: var(--mf-muted); }
.mf-promos__none { grid-column: 1 / -1; margin: 30px 0; text-align: center; color: var(--mf-muted); }
.mf-promos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; margin-bottom: 20px; }

/* A promotion: the offer first, as a badge on the picture. */
.mf-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); background: var(--mf-surface); line-height: 1.25; }
.mf-pcard:hover { border-color: var(--mf-line-strong); }
.mf-pcard__badge { position: absolute; top: 8px; left: 8px; z-index: 1; max-width: calc(100% - 16px); margin: 0; padding: 3px 9px; border-radius: 11px; background: var(--mf-magenta); color: #fff; font-size: .74rem; font-weight: 700; }
.mf-pcard__image { display: grid; place-items: center; height: 130px; margin-bottom: 10px; }
.mf-pcard__image img { max-width: 100%; max-height: 130px; object-fit: contain; }
.mf-pcard__brand { margin: 0 0 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-muted); }
/* Some names are a whole description: four lines of it, the rest in the tooltip. */
.mf-pcard__name { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; font-size: .92rem; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-pcard__offer { margin: 0 0 4px; font-size: .82rem; font-weight: 700; color: var(--mf-magenta); }
/* The small print keeps its lines and stops after three. */
.mf-pcard__details { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-size: .78rem; color: var(--mf-muted); white-space: pre-line; overflow-wrap: anywhere; }
.mf-pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: auto 0 10px; padding-top: 6px; }
.mf-pcard__price s { font-size: .84rem; color: var(--mf-muted); white-space: nowrap; }
.mf-pcard__price b { font-size: 1.2rem; color: var(--mf-magenta); white-space: nowrap; }
.mf-pcard__price span { flex-basis: 100%; font-size: .76rem; color: var(--mf-muted); }
.mf-pcard__price:empty { padding: 0; margin-bottom: 0; }
.mf-pcard__add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 6px 8px; border: 1px solid var(--mf-navy); border-radius: 17px; background: none; font: inherit; font-size: .86rem; font-weight: 600; color: var(--mf-navy); cursor: pointer; }
.mf-pcard__add:hover { background: var(--mf-soft); }
.mf-pcard__add.is-added { background: var(--mf-navy); color: #fff; }

/* The consumer's list: beside the promotions, in a dialog behind a bar on a narrow screen. */
.mf-plist { position: sticky; top: calc(var(--mf-top) + 16px); max-height: calc(100vh - var(--mf-top) - 32px); overflow-y: auto; padding: 18px; border: 4px solid var(--mf-soft); border-radius: var(--mf-radius); }
.mf-plist--dialog { position: static; max-height: none; padding: 0; border: 0; }
.mf-plist h2 { margin: 0 0 2px; font-size: 1.15rem; font-weight: 600; color: var(--mf-magenta); }
.mf-plist h3 { margin: 16px 0 2px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-plist__total { margin: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-plist__saving { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 5px 12px; border-radius: 16px; background: var(--mf-green-soft); color: #3f7a00; font-size: .88rem; font-weight: 700; }
.mf-plist__saving span::first-letter { text-transform: uppercase; }
.mf-plist__empty { margin: 8px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-plist ul { list-style: none; margin: 0; padding: 0; }
/* An entry on two lines: tick and picture on the left; the name and its cross, then the offer and the quantity. */
.mf-plist li { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-plist li > input { grid-row: 1 / 3; width: 18px; height: 18px; margin: 0; accent-color: var(--mf-navy); cursor: pointer; }
.mf-plist__thumb { grid-row: 1 / 3; width: 40px; height: 40px; object-fit: contain; }
.mf-plist__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mf-plist__offer { grid-column: 3; min-width: 0; font-size: .78rem; line-height: 1.25; }
.mf-plist__offer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; font-weight: 600; color: var(--mf-magenta); }
.mf-plist__offer em { display: block; color: #b45309; }
.mf-plist li.is-done .mf-plist__name, .mf-plist li.is-done .mf-plist__offer small { text-decoration: line-through; color: var(--mf-muted); }
.mf-plist li.is-done .mf-plist__thumb { opacity: .4; }
.mf-plist__qty { display: flex; align-items: center; gap: 1px; font-size: .84rem; }
.mf-plist__qty span { min-width: 1.5em; text-align: center; font-weight: 600; }
.mf-plist__qty button, .mf-plist__remove { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--mf-line-strong); border-radius: 50%; background: none; font-size: .58rem; color: var(--mf-navy); cursor: pointer; }
.mf-plist__qty button:disabled { opacity: .35; cursor: default; }
.mf-plist__remove { justify-self: end; border-color: transparent; font-size: .8rem; color: var(--mf-muted); }
.mf-plist__remove:hover { color: var(--mf-red); }
.mf-plist__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mf-plist__note { margin: 12px 0 0; font-size: .76rem; color: var(--mf-muted); }
.mf-plist__bar { display: none; }

/* The way to the page of the list. Its printed sheet is the one of the shopping list (below). */
.mf-plist h2 a { color: inherit; }
.mf-plist__open { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 14px; border-radius: 12px; background: var(--mf-soft); font-size: .9rem; font-weight: 600; }
.mf-plist__open i { font-size: .8rem; color: var(--mf-magenta); }

@media (max-width: 1280px) {
	.mf-promos__split { grid-template-columns: minmax(0, 1fr); }
	.mf-promos__split > .mf-plist { display: none; }
	.mf-plist__bar {
		position: fixed; left: 50%; bottom: 16px; z-index: 20; transform: translateX(-50%);
		display: flex; align-items: center; gap: 12px; padding: 12px 22px; border: 0; border-radius: 26px;
		background: var(--mf-navy); color: #fff; font: inherit; font-weight: 700; box-shadow: var(--mf-shadow-lg); cursor: pointer;
	}
	.mf-plist__bar[hidden] { display: none; }
}
@media (max-width: 640px) {
	.mf-promos__tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.mf-promos__tools > :first-child { grid-column: 1 / -1; }
	.mf-promos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mf-pcard { padding: 10px; }
	.mf-pcard__image { height: 100px; }
	.mf-pcard__image img { max-height: 100px; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.mf-offers > div > .mf-vouchers > .mf-toggles,
	.mf-offers > div > .mf-folders > .mf-toggles { margin: -20px -16px 1.5rem; border-radius: 18px 18px 0 0; }
}
@media (max-width: 640px) {
	.mf-toggles__btn { font-size: .8rem; padding: 1rem .25rem .8rem; gap: 4px; }
	.mf-toggles__btn::before { width: 1.1em; height: 1.1em; }
	.mf-emptystate { grid-template-columns: 1fr; }
	.mf-emptystate p { margin: 1rem; }
	/* Over the page itself on a phone: a solid disc, or the arrow would vanish on a white page. */
	.mf-viewer__nav { position: absolute; top: 50%; margin: 0 6px; z-index: 1; background: rgba(0, 24, 48, .75); }
	.mf-viewer__nav--prev { left: 0; }
	.mf-viewer__nav--next { right: 0; }
	.mf-viewer[open] { grid-template: "bar" auto "stage" minmax(0, 1fr) / minmax(0, 1fr); }
}

/* ==================== shopping list: the page (views/portal/shoppinglist.js), its printed sheet and the "add to my list" buttons (ui/shoppinglist.js) ==================== */

/* ---------- the field that adds, its suggestions, the two pickers ---------- */
.mf-slist__add { margin-bottom: 22px; }
.mf-slist__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.mf-slist__field { position: relative; }
.mf-slist__input { min-height: 48px; padding: 10px 20px; border-color: var(--mf-line-strong); border-radius: 24px; font-size: 1.05rem; }
.mf-slist__form .mf-btn { min-height: 48px; padding: 8px 24px; border-radius: 24px; }
.mf-slist__suggest {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(60vh, 440px); overflow: auto;
	list-style: none; margin: 0; padding: 6px; border: 1px solid var(--mf-line); border-radius: 16px; background: var(--mf-surface); box-shadow: var(--mf-shadow-lg);
}
.mf-slist__suggest li[role="option"] { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.mf-slist__suggest li[role="option"]:hover, .mf-slist__suggest li[aria-selected="true"] { background: #f9eff6; }
.mf-slist__suggest li > i { text-align: center; color: var(--mf-magenta); }
.mf-slist__optmain { min-width: 0; line-height: 1.3; }
.mf-slist__optmain b { display: block; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-slist__optmain mark { padding: 0 2px; border-radius: 3px; background: #fbe3f1; color: var(--mf-magenta); }
.mf-slist__optmain small { display: block; font-size: .82rem; color: var(--mf-muted); }
.mf-slist__opthead { padding: 10px 12px 2px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-slist__optnote { padding: 6px 12px; font-size: .84rem; color: var(--mf-muted); }
.mf-slist__opton { font-size: .78rem; font-weight: 600; white-space: nowrap; color: #3f7a00; }
.mf-slist__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.mf-slist__sources > span { font-size: .9rem; color: var(--mf-muted); }
.mf-slist__sources .mf-btn i { color: var(--mf-magenta); }

/* ---------- above the list: count, indicative total, view, day, actions ---------- */
.mf-slist__tools { display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
.mf-slist__summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; }
.mf-slist__count { margin: 0; font-size: 1.05rem; color: var(--mf-navy); white-space: nowrap; }
.mf-slist__count span { color: var(--mf-muted); }
.mf-slist__total { flex: 1 1 300px; margin: 0; line-height: 1.35; }
.mf-slist__total b { font-size: 1.05rem; color: var(--mf-navy); }
.mf-slist__total small { display: block; font-size: .8rem; color: var(--mf-muted); }
.mf-slist__summary .mf-plist__saving { margin: 0; }
.mf-slist__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mf-slist__views { margin: 0; }
.mf-slist__views .mf-chip i { font-size: .85rem; }
.mf-slist__plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-slist__plan .mf-date { flex: 1 1 9.5em; max-width: 11.5em; }
.mf-slist__plan .mf-slist__day { min-height: 36px; padding: 5px 40px 5px 14px; border-radius: 18px; }
.mf-slist__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-slist__actions .mf-btn--ghost { background: var(--mf-surface); }
.mf-slist__undo { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 10px 12px 10px 18px; border-radius: 22px; background: var(--mf-navy); color: #fff; box-shadow: var(--mf-shadow-lg); }
.mf-slist__undo span { min-width: 0; overflow-wrap: anywhere; }
.mf-slist__undo .mf-btn { flex: none; border-color: #fff; color: #fff; }
.mf-slist__device { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0 0; padding: 12px 16px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); font-size: .86rem; color: var(--mf-muted); }
.mf-slist__device i { margin-top: 3px; font-size: 1.1rem; color: var(--mf-navy); }

/* ---------- the list: a brand, its departments, its lines ---------- */
.mf-slist__group { margin-top: 24px; }
.mf-slist__list.is-flat .mf-slist__group { margin-top: 10px; }
.mf-slist__brand { display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--mf-magenta); font-size: 1.2rem; font-weight: 600; color: var(--mf-magenta); }
.mf-slist__brand img { height: 28px; width: auto; max-width: 90px; object-fit: contain; }
.mf-slist__brandicon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fbe3f1; font-size: .8rem; }
.mf-slist__brand small { margin-left: auto; font-size: .84rem; font-weight: 400; text-align: right; color: var(--mf-muted); }
.mf-slist__dept { margin: 14px 0 2px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-slist__dept--done { color: #3f7a00; }
.mf-slist__list ul { list-style: none; margin: 0; padding: 0; }
.mf-sitem { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 36px; align-items: center; gap: 0 10px; padding: 5px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-sitem.has-pic { grid-template-columns: 44px 48px minmax(0, 1fr) auto 36px; }
/* The whole square takes the tap, the box drawn in it is smaller. */
.mf-sitem__tick { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.mf-sitem__tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mf-sitem__tick span { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--mf-navy); border-radius: 8px; background: var(--mf-surface); font-size: .8rem; color: transparent; transition: background .15s, border-color .15s; }
.mf-sitem__tick:hover span { border-color: var(--mf-magenta); }
.mf-sitem__tick input:checked + span { border-color: var(--mf-green); background: var(--mf-green); color: #fff; }
.mf-sitem__tick input:focus-visible + span { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-sitem__pic { display: grid; place-items: center; width: 48px; height: 48px; }
.mf-sitem__pic img { display: block; max-width: 100%; max-height: 48px; object-fit: contain; }
.mf-sitem__main { min-width: 0; padding: 4px 0; line-height: 1.3; }
.mf-sitem__name { display: block; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-sitem__brand { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-muted); }
.mf-sitem__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; font-size: .84rem; color: var(--mf-muted); }
.mf-sitem__facts > span + span::before { content: "\00b7"; margin-right: 8px; }
.mf-sitem__offer { padding: 1px 9px; border-radius: 10px; background: var(--mf-magenta); color: #fff; font-size: .74rem; font-weight: 700; }
.mf-sitem__facts strong { font-size: .95rem; color: var(--mf-magenta); white-space: nowrap; }
.mf-sitem__facts s { white-space: nowrap; }
.mf-sitem__facts.is-ended .mf-sitem__offer { background: var(--mf-line-strong); }
.mf-sitem__facts.is-ended strong { color: var(--mf-muted); text-decoration: line-through; }
.mf-sitem__warning { display: block; margin-top: 2px; font-size: .82rem; font-style: normal; font-weight: 600; color: #b45309; }
.mf-sitem__note { display: block; margin-top: 2px; font-size: .86rem; font-style: italic; color: var(--mf-ink); overflow-wrap: anywhere; }
.mf-sitem__note i { color: var(--mf-muted); }
.mf-sitem__qty { display: flex; align-items: center; gap: 2px; }
.mf-sitem__qty button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--mf-line-strong); border-radius: 50%; background: var(--mf-surface); font-size: .78rem; color: var(--mf-navy); cursor: pointer; }
.mf-sitem__qty button:hover { border-color: var(--mf-navy); }
.mf-sitem__qty span { min-width: 1.8em; text-align: center; font-weight: 700; }
.mf-sitem__more { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: .85rem; color: var(--mf-magenta); cursor: pointer; }
.mf-sitem__more i { transition: transform .15s; }
.mf-sitem__more[aria-expanded="true"] i { transform: rotate(180deg); }
.mf-sitem__panel { grid-column: 1 / -1; margin: 6px 0 8px 44px; padding: 12px 16px 14px; border-radius: 14px; background: var(--mf-soft); }
.mf-sitem__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.mf-sitem__field { display: grid; gap: 4px; font-size: .84rem; font-weight: 700; }
.mf-sitem__field .mf-input { font-weight: 400; }
.mf-sitem__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mf-sitem__links .mf-btn { background: var(--mf-surface); }
.mf-sitem__links .mf-sitem__remove { margin-left: auto; color: var(--mf-red); }
/* Ticked off: still readable, out of the way. */
.mf-sitem.is-done .mf-sitem__name { font-weight: 400; text-decoration: line-through; color: var(--mf-muted); }
.mf-sitem.is-done .mf-sitem__facts, .mf-sitem.is-done .mf-sitem__warning, .mf-sitem.is-done .mf-sitem__note { display: none; }
.mf-sitem.is-done .mf-sitem__pic { opacity: .4; }
.mf-sitem.is-done .mf-sitem__qty button { visibility: hidden; }
.mf-sitem.is-done .mf-sitem__qty span { color: var(--mf-muted); }

/* ---------- an empty list ---------- */
.mf-slist__empty { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 30px; }
.mf-slist__empty h2 { margin: 0 0 4px; font-size: 1.3rem; color: var(--mf-navy); }
.mf-slist__empty > div > p { margin: 0; color: var(--mf-muted); }
.mf-slist__empty > img { display: block; width: 100%; }
.mf-slist__ways { display: grid; gap: 12px; list-style: none; margin: 16px 0 0; padding: 0; }
.mf-slist__ways li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); }
.mf-slist__wayicon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fbe3f1; color: var(--mf-magenta); }
.mf-slist__ways b { color: var(--mf-navy); }
.mf-slist__ways p { margin: 2px 0 10px; font-size: .9rem; color: var(--mf-muted); }

/* ---------- the pickers, in a dialog ---------- */
.mf-modal--picker .mf-modal__body { min-height: min(60vh, 520px); }
.mf-modal--picker .mf-modal__actions { align-items: center; }
.mf-pick__tabs { justify-content: flex-start; margin-bottom: 16px; }
.mf-pick > .mf-input { margin-bottom: 12px; }
.mf-pick__status { margin: 0 0 4px; font-size: .86rem; color: var(--mf-muted); }
.mf-pick__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 124px; align-items: center; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-pick__pic { display: grid; place-items: center; width: 52px; height: 52px; }
.mf-pick__pic img { display: block; max-width: 100%; max-height: 52px; object-fit: contain; }
.mf-pick__times { font-size: .88rem; color: var(--mf-muted); white-space: nowrap; }
.mf-pick__main { min-width: 0; line-height: 1.3; }
.mf-pick__main b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-pick__main mark { padding: 0 2px; border-radius: 3px; background: #fbe3f1; color: var(--mf-magenta); }
.mf-pick__main small { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: .82rem; color: var(--mf-muted); }
.mf-pick__main small i { font-style: normal; font-weight: 700; color: var(--mf-magenta); }
.mf-pick__price { text-align: right; white-space: nowrap; }
.mf-pick__price b { display: block; color: var(--mf-navy); }
.mf-pick__price s, .mf-pick__price small { display: block; font-size: .74rem; color: var(--mf-muted); }
.mf-pick__more { margin: 14px 0 0; }
.mf-pick__count { margin-right: auto; font-weight: 600; }

/* ---------- the dialog before printing ---------- */
.mf-slist__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mf-slist__choice { position: relative; cursor: pointer; }
.mf-slist__choice input { position: absolute; opacity: 0; }
.mf-slist__choice > span { display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 12px; border: 2px solid var(--mf-line); border-radius: var(--mf-radius-sm); text-align: center; }
.mf-slist__choice i { font-size: 1.4rem; color: var(--mf-navy); }
.mf-slist__choice b { color: var(--mf-navy); }
.mf-slist__choice small { font-size: .8rem; color: var(--mf-muted); }
.mf-slist__choice input:checked + span { border-color: var(--mf-magenta); background: #fdf4fa; }
.mf-slist__choice input:focus-visible + span { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }

/* ---------- "add to my list" on the purchases pages ---------- */
.mf-listtoggle[aria-pressed="true"] { border-color: var(--mf-green); color: #3f7a00; }
.mf-ean__order { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the printed sheet: the site's logo, a summary, then the brands with their departments; each line a
   box to tick, the quantity, the product and what is known of its price. Lines carry the layout: a printer that
   drops background colours still gives a readable sheet. With pictures: one column. Compact: two, without. ---------- */
@page mf-shoppinglist { size: A4 portrait; margin: 12mm 12mm 14mm; }
.mf-slsheet { page: mf-shoppinglist; font-family: var(--mf-font); font-size: 10.5pt; line-height: 1.3; color: #222; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mf-slsheet header { display: flex; align-items: center; justify-content: space-between; gap: 20pt; padding-bottom: 9pt; border-bottom: 2pt solid var(--mf-navy); }
.mf-slsheet header img { height: 34pt; width: auto; }
.mf-slsheet header div { text-align: right; }
.mf-slsheet h1 { margin: 0; font-size: 17pt; font-weight: 600; color: var(--mf-navy); }
.mf-slsheet header p { margin: 2pt 0 0; font-size: 10pt; color: #555; }
.mf-slsheet__summary { display: flex; gap: 8pt; margin: 10pt 0 0; }
.mf-slsheet__summary span { flex: 1; padding: 6pt 10pt; border: 1pt solid #cfcfcf; border-radius: 6pt; text-align: center; color: var(--mf-navy); }
.mf-slsheet__summary span.is-saving { border-color: #5fa800; background: var(--mf-green-soft); color: #3f7a00; }
.mf-slsheet__summary b { display: inline-block; }
.mf-slsheet__summary b::first-letter { text-transform: uppercase; }
.mf-slsheet__summary small { display: block; font-size: 8pt; color: #555; }
.mf-slsheet section { margin-top: 14pt; }
.mf-slsheet h2 { display: flex; align-items: center; gap: 8pt; margin: 0; padding-bottom: 4pt; border-bottom: 1pt solid var(--mf-magenta); font-size: 12.5pt; font-weight: 600; color: var(--mf-magenta); break-after: avoid; }
.mf-slsheet h2 img { height: 18pt; width: auto; max-width: 60pt; object-fit: contain; }
.mf-slsheet h2 small { margin-left: auto; font-size: 9pt; font-weight: 400; color: #555; }
.mf-slsheet h3 { margin: 8pt 0 1pt; font-size: 8pt; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #555; break-after: avoid; }
.mf-slsheet ul { list-style: none; margin: 0; padding: 0; }
.mf-slsheet__row { display: grid; grid-template-columns: 13pt 42pt 24pt minmax(0, 1fr) auto; align-items: center; gap: 0 7pt; padding: 5pt 0; border-bottom: .75pt solid #ddd; break-inside: avoid; }
.mf-slsheet__tick { display: block; width: 12pt; height: 12pt; border: 1.25pt solid var(--mf-navy); border-radius: 2.5pt; }
.mf-slsheet__picture { display: grid; place-items: center; width: 42pt; }
.mf-slsheet__picture img { display: block; max-width: 42pt; max-height: 38pt; object-fit: contain; }
.mf-slsheet__quantity { font-weight: 700; text-align: right; white-space: nowrap; }
.mf-slsheet__what { min-width: 0; }
.mf-slsheet__what strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.mf-slsheet__what em { display: block; font-size: 9pt; }
.mf-slsheet__what small { display: block; font-size: 8.5pt; color: #555; }
.mf-slsheet__offer b { display: inline-block; margin-right: 5pt; padding: 0 5pt; border: .75pt solid var(--mf-magenta); border-radius: 7pt; font-size: 8pt; color: var(--mf-magenta); }
.mf-slsheet__offer u { margin-right: 5pt; text-decoration: none; font-weight: 700; color: #b45309; }
.mf-slsheet__offer span { margin-right: 5pt; }
.mf-slsheet__price { font-size: 11pt; font-weight: 700; white-space: nowrap; color: var(--mf-navy); }
.mf-slsheet__row.is-done strong { font-weight: 400; text-decoration: line-through; color: #777; }
.mf-slsheet__row.is-done .mf-slsheet__tick { background: linear-gradient(135deg, transparent 44%, var(--mf-navy) 44%, var(--mf-navy) 56%, transparent 56%); }
.mf-slsheet.is-compact .mf-slsheet__body { columns: 2; column-gap: 22pt; column-rule: .5pt solid #ddd; margin-top: 12pt; }
.mf-slsheet.is-compact section { margin-top: 12pt; }
.mf-slsheet.is-compact section:first-child { margin-top: 0; }
.mf-slsheet.is-compact .mf-slsheet__row { grid-template-columns: 11pt 20pt minmax(0, 1fr) auto; gap: 0 5pt; padding: 3.5pt 0; font-size: 9.5pt; }
.mf-slsheet.is-compact .mf-slsheet__tick { width: 10pt; height: 10pt; }
.mf-slsheet.is-compact .mf-slsheet__price { font-size: 9.5pt; }
.mf-slsheet.is-compact h2 { font-size: 11.5pt; }

@media (max-width: 640px) {
	.mf-slist__form .mf-btn { padding: 8px 16px; }
	.mf-slist__sources > span { flex-basis: 100%; }
	.mf-slist__sources .mf-btn { flex: 1 1 0; padding: 8px 10px; font-size: .88rem; }
	.mf-slist__tools { padding: 14px; }
	.mf-slist__bar { align-items: flex-start; flex-direction: column; }
	.mf-slist__plan { align-self: stretch; }
	.mf-slist__actions .mf-btn { flex: 1 1 auto; }
	.mf-slist__brand { font-size: 1.1rem; }
	/* A line on a phone: the name takes the width, the quantity goes under it. */
	.mf-sitem { grid-template-columns: 44px minmax(0, 1fr) 30px; grid-template-areas: "tick main more" "tick qty more"; gap: 0 8px; }
	.mf-sitem.has-pic { grid-template-columns: 44px 38px minmax(0, 1fr) 30px; grid-template-areas: "tick pic main more" "tick pic qty more"; }
	.mf-sitem__tick { grid-area: tick; }
	.mf-sitem__pic { grid-area: pic; width: 38px; height: 38px; }
	.mf-sitem__pic img { max-height: 38px; }
	.mf-sitem__main { grid-area: main; }
	.mf-sitem__qty { grid-area: qty; justify-self: end; padding-bottom: 4px; }
	.mf-sitem__more { grid-area: more; width: 30px; }
	.mf-sitem__facts > span { flex-basis: 100%; }
	.mf-sitem__facts > span + span::before { content: none; }
	.mf-sitem.is-done .mf-sitem__qty { display: none; }
	.mf-sitem__panel { margin-left: 0; }
	.mf-sitem__links .mf-sitem__remove { margin-left: 0; }
	.mf-slist__empty { grid-template-columns: minmax(0, 1fr); }
	.mf-slist__empty > img { max-width: 180px; margin: 0 auto; }
	/* A row of a picker: the picture or the count, the product over its price, the button as a disc. */
	.mf-pick__row { grid-template-columns: 46px minmax(0, 1fr) 40px; gap: 2px 10px; }
	.mf-pick__pic, .mf-pick__times { grid-row: 1 / 3; }
	.mf-pick__pic { width: 46px; height: 46px; }
	.mf-pick__times { font-size: .78rem; line-height: 1.15; text-align: center; white-space: normal; }
	.mf-pick__price { grid-column: 2; display: flex; align-items: baseline; gap: 6px; text-align: left; }
	.mf-pick__price:empty { display: none; }
	.mf-pick__add { grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
	.mf-pick__add span { display: none; }
	.mf-modal--picker .mf-modal__body { padding-left: 16px; padding-right: 16px; }
	.mf-modal--picker .mf-modal__actions { padding: 12px 16px 16px; }
	.mf-slist__choices { grid-template-columns: 1fr; }
	/* The title is one long word in some languages ("boodschappenlijst"): the mascot gives it the room. */
	.mf-page-myfreedelity_shoppinglist .mf-pagehead h1 { min-width: 0; overflow-wrap: anywhere; }
	.mf-page-myfreedelity_shoppinglist .mf-pagehead__art { flex: none; height: 54px; margin-bottom: -18px; }
}
/* ==================== end of shopping list ==================== */
/* MyFreedelity app - styles of the "messages" pages. Tokens and components: app.css. */

/* ---------- List of messages: "My messages" and the Messages tab of a brand (ui/messages.js, views/portal/messages.js) ---------- */
/* Search box and the two "all" actions; the chips for unread / kinds, then for brands. */
.mf-msgs__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mf-msgs__top .mf-input { flex: 1; min-width: 0; }
.mf-msgs__actions { position: relative; flex: none; }
.mf-msgs__toggle { display: none; }
.mf-msgs__menu { display: flex; gap: 8px; }
.mf-msgs__menu .mf-btn { white-space: nowrap; }
.mf-msgs__n:not(:empty)::before { content: "\00b7"; margin-right: .45em; }
/* Deleting everything is the dangerous action: the quiet button of the two. */
.mf-msgs__delete { background: transparent; border-color: #e5b5bd; color: var(--mf-red); }
.mf-msgs__delete:hover:not(:disabled) { border-color: var(--mf-red); }
.mf-msgs .mf-msgs__chips { margin-bottom: 10px; }
.mf-msgs__count { margin: 14px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-msgs__month { margin: 20px 0 4px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }
.mf-msgs__count + .mf-msgs__list > .mf-msgs__month:first-child { margin-top: 14px; }
.mf-msgs__none { margin: 40px 0; text-align: center; color: var(--mf-muted); }
.mf-msgs__list + .mf-center:not(:empty) { margin: 18px 0 0; }
.mf-msgs__hint { margin: 22px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-msgs__hint a { font-weight: 600; text-decoration: underline; }

/* A message: unread = a magenta dot and a bold subject; read = plain text, the logo in full colour. */
.mf-msg {
	display: grid; grid-template-columns: 9px 40px minmax(0, 1fr) auto 12px; grid-template-areas: "dot logo title date next" "dot logo sub date next";
	align-items: center; column-gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--mf-soft); border-radius: var(--mf-radius-xs);
	color: var(--mf-ink); transition: background-color .2s ease-out;
}
.mf-msg:hover { background: #f9eff6; color: var(--mf-ink); }
.mf-msg__dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; }
.mf-msg.is-unread .mf-msg__dot { background: var(--mf-magenta); }
.mf-msg__logo { grid-area: logo; display: grid; place-items: center; width: 40px; height: 40px; }
.mf-msg__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mf-msg__initials { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mf-navy); color: #fff; font-size: .72rem; font-weight: 700; }
.mf-msg__title { grid-area: title; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-msg.is-unread .mf-msg__title { font-weight: 700; color: var(--mf-navy); }
.mf-msg__meta { display: contents; }
.mf-msg__sub { grid-area: sub; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--mf-muted); }
.mf-msg__date { grid-area: date; text-align: right; white-space: nowrap; font-size: .82rem; line-height: 1.35; color: var(--mf-muted); }
.mf-msg__date small { display: block; font-size: inherit; }
.mf-msg__next { grid-area: next; font-size: .75rem; color: var(--mf-navy); }
.mf-msg__kind { grid-area: kind; justify-self: start; padding: 2px 8px; border-radius: 8px; background: var(--mf-soft); font-size: .72rem; font-weight: 700; white-space: nowrap; color: var(--mf-navy); }
/* On a brand's page: no logo, the kind as a badge before the subject. */
.mf-msg--brand { grid-template-columns: 9px 94px minmax(0, 1fr) auto; grid-template-areas: "dot kind title date"; padding: 12px 6px; }

@media (max-width: 767px) {
	/* The two actions fold behind the "..." button. */
	.mf-msgs__toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--mf-line-strong); border-radius: 50%; background: none; color: var(--mf-navy); cursor: pointer; }
	.mf-msgs__menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; flex-direction: column; align-items: stretch; min-width: 220px; padding: 10px; border-radius: var(--mf-radius-sm); background: var(--mf-surface); box-shadow: var(--mf-shadow-lg); }
	.mf-msgs__actions.is-open .mf-msgs__menu { display: flex; }
	/* The chips stay on one line and scroll sideways. */
	.mf-msgs .mf-msgs__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.mf-msgs__chips::-webkit-scrollbar { display: none; }
	.mf-msgs__chips > * { flex: none; white-space: nowrap; }
	/* The date goes under the subject, after the brand and the kind. */
	.mf-msg { grid-template-columns: 9px 36px minmax(0, 1fr) 10px; grid-template-areas: "dot logo title next" "dot logo sub next"; column-gap: 10px; padding: 9px 2px; }
	.mf-msg__logo, .mf-msg__initials { width: 36px; height: 36px; }
	.mf-msg__meta { grid-area: sub; display: flex; min-width: 0; }
	.mf-msg__meta .mf-msg__date { flex: none; }
	.mf-msg__meta .mf-msg__date::before { content: "\00b7"; margin: 0 5px; }
	.mf-msg__date small { display: none; }
	.mf-msg--brand { grid-template-columns: 9px max-content minmax(0, 1fr); grid-template-areas: "dot title title" ". kind date"; row-gap: 4px; padding: 10px 2px; }
	.mf-msg--brand .mf-msg__date { text-align: left; }
}

/* ---------- One message (views/portal/message.js, brand/message.js) ---------- */
/* The way back to the list on the left, "previous / place / next" on the right; repeated under the content. */
.mf-mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mf-mail__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: .92rem; }
.mf-mail__back { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 600; color: var(--mf-navy); }
.mf-mail__back i { font-size: .75rem; }
.mf-mail__back:hover span { text-decoration: underline; }
.mf-mail__steps { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mf-mail__step { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border: 1px solid var(--mf-line-strong); border-radius: 16px; font-weight: 600; color: var(--mf-navy); white-space: nowrap; }
.mf-mail__step i { font-size: .7rem; }
a.mf-mail__step:hover { border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-mail__step.is-off { border-color: var(--mf-line); color: #b5b5b5; }
.mf-mail__position { padding: 0 6px; font-size: .86rem; color: var(--mf-muted); white-space: nowrap; }
/* Who wrote, what it is and when; the subject; the actions, in words, on a line of their own. */
.mf-mail__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 16px; border-top: 1px solid var(--mf-soft); }
.mf-mail__sender { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mf-mail__who { display: grid; gap: 3px; min-width: 0; }
.mf-mail__logo { flex: none; display: grid; place-items: center; width: 72px; height: 44px; }
.mf-mail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mf-mail__initials { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mf-navy); color: #fff; font-size: .8rem; font-weight: 700; }
.mf-mail__brand { min-width: 0; font-size: 1.05rem; font-weight: 700; color: var(--mf-navy); overflow-wrap: anywhere; }
a.mf-mail__brand:hover { text-decoration: underline; }
.mf-mail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-mail__kind { padding: 2px 9px; border-radius: 8px; background: var(--mf-soft); font-size: .76rem; font-weight: 700; color: var(--mf-navy); white-space: nowrap; }
.mf-mail__new { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--mf-magenta); }
.mf-mail__new::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mf-magenta); }
.mf-mail__subject { margin: 10px 0 0; font-size: 1.5rem; line-height: 1.3; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-mail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mf-mail__actions .mf-btn i { font-size: .85em; }
/* Deleting is the dangerous action: the quiet button of the row. */
.mf-mail__actions .mf-mail__delete { border-color: #e5b5bd; color: var(--mf-red); }
.mf-mail__actions .mf-mail__delete:hover:not(:disabled) { border-color: var(--mf-red); }
/* The content: a frame as tall as what it holds, shrunk when the email is wider than the room. */
.mf-mail__content { overflow: hidden; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); background: #fff; }
.mf-mail__fit { overflow: hidden; min-height: 40px; }
.mf-mail__frame { display: block; width: 100%; height: 80px; border: 0; transform-origin: 0 0; }
/* An SMS or a notification is a short text: a block of the width of a text, not of the page. */
.mf-mail--sms .mf-mail__content, .mf-mail--internal .mf-mail__content { max-width: 680px; padding: 16px 18px; border-color: transparent; background: var(--mf-soft); }
.mf-mail--sms .mf-mail__content { border-radius: 18px 18px 18px 4px; max-width: 480px; }
.mf-mail__standing { margin: 0; font-size: .9rem; color: var(--mf-muted); }
.mf-mail__standing a { font-weight: 600; text-decoration: underline; white-space: nowrap; }
.mf-mail__bar--end { padding-top: 16px; border-top: 1px solid var(--mf-soft); }

@media (max-width: 767px) {
	.mf-mail { gap: 14px; }
	.mf-mail__steps { margin-left: 0; width: 100%; justify-content: space-between; }
	.mf-mail__subject { font-size: 1.25rem; }
	.mf-mail__actions .mf-btn { text-align: left; }
	.mf-mail__logo { width: 56px; height: 36px; }
	.mf-mail__initials { width: 36px; height: 36px; }
	/* The email goes from edge to edge of the card: every pixel counts for a 600 px layout. */
	.mf-mail--email .mf-mail__content { margin: 0 -8px; border-radius: var(--mf-radius-xs); }
}
@media print {
	/* On paper: the sender, the date, the subject and the content. */
	.mf-mail__bar, .mf-mail__actions, .mf-mail__standing, .mf-mail__new { display: none !important; }
	.mf-mail__head { border-top: 0; padding-top: 0; }
	.mf-mail__content { border: 0; }
}

/* ---------- History of interactions (ui/interactions.js) ---------- */
.mf-history__tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.mf-history__tools .mf-chips { margin-bottom: 0; }
.mf-history__tools .mf-chip i { font-size: .9em; color: var(--mf-muted); }
.mf-history__tools .mf-chip[aria-pressed="true"] i { color: inherit; }
.mf-history__selects { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-history__selects select { width: auto; min-width: 150px; }
.mf-history__month { margin: 26px 0 4px; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }
.mf-history__none { margin: 40px 0; text-align: center; color: var(--mf-muted); }
.mf-history__row { border-bottom: 1px solid var(--mf-soft); }
.mf-history__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 6px; border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left; }
button.mf-history__head { cursor: pointer; }
button.mf-history__head:hover { background: #f9eff6; }
.mf-history__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: .95rem; }
.mf-history__icon.is-read { background: #e6eef5; color: var(--mf-navy); }
.mf-history__icon.is-form { background: #f6e6f1; color: var(--mf-magenta); }
.mf-history__icon.is-consent { background: var(--mf-green-soft); color: #3f7a00; }
.mf-history__icon.is-updated { background: var(--mf-soft); color: var(--mf-muted); }
.mf-history__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mf-history__text b { font-weight: 600; color: var(--mf-navy); }
.mf-history__text small { display: block; margin-top: 2px; font-size: .84rem; color: var(--mf-muted); }
.mf-history__times { color: var(--mf-muted); }
.mf-history__logo { flex: none; width: 56px; height: 36px; object-fit: contain; }
.mf-history__action { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: .85rem; color: var(--mf-magenta); text-decoration: none; transition: transform .15s; }
[aria-expanded="true"] > .mf-history__action { transform: rotate(180deg); }
.mf-history__detail { margin: 0 6px 14px 58px; }
.mf-history__answers { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 5px 18px; margin: 0; padding: 12px 16px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); font-size: .9rem; }
.mf-history__answers dt { color: var(--mf-muted); overflow-wrap: anywhere; }
.mf-history__answers dd { margin: 0; overflow-wrap: anywhere; }
.mf-history__occurrences { list-style: none; margin: 0; padding: 4px 16px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); font-size: .9rem; }
.mf-history__occurrences li { padding: 7px 0; }
.mf-history__occurrences li + li { border-top: 1px solid var(--mf-line); }
.mf-history__occurrences button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mf-history__occurrences button { align-items: center; }
.mf-history__occurrences button:hover b { color: var(--mf-magenta); }
.mf-history__occurrences .mf-history__answers { margin-top: 8px; padding: 10px 12px; background: var(--mf-surface); }
.mf-history__download { margin: 22px 0 0; text-align: right; }
.mf-inter__doc { height: 50vh; }

/* ---------- Interactions by brand (views/portal/interactions.js) ---------- */
.mf-ibrands__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 18px; }
.mf-ibrands { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; }
.mf-ibrand { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); }
.mf-ibrand header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mf-ibrand header img { flex: none; width: 64px; height: 44px; object-fit: contain; }
.mf-ibrand h3 { margin: 0; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.mf-ibrand header p { margin: 2px 0 0; font-size: .84rem; color: var(--mf-muted); }
.mf-ibrand__figures { display: flex; gap: 8px; margin: 0 0 12px; }
.mf-ibrand__figures span { flex: 1 1 0; padding: 7px 6px; border-radius: 10px; background: var(--mf-soft); text-align: center; font-size: .76rem; line-height: 1.25; color: var(--mf-muted); }
.mf-ibrand__figures b { display: block; font-size: 1.1rem; color: var(--mf-navy); }
.mf-ibrand__documents { list-style: none; margin: 0 0 12px; padding: 0; font-size: .88rem; }
.mf-ibrand__documents li { padding: 5px 0; }
.mf-ibrand__documents li + li { border-top: 1px solid var(--mf-soft); }
.mf-ibrand__documents button { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--mf-navy); text-align: left; cursor: pointer; }
.mf-ibrand__documents button:hover span { text-decoration: underline; }
.mf-ibrand__documents small { display: block; color: var(--mf-muted); }
.mf-ibrand__note { margin: 0 0 12px; font-size: .86rem; color: var(--mf-muted); }
.mf-ibrand__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 4px; }
.mf-ibrand__actions > * { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--mf-line-strong); border-radius: 16px; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: var(--mf-navy); cursor: pointer; }
.mf-ibrand__actions > *:hover { border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-ibrand__actions > .is-danger { border-color: #e5b5bd; color: var(--mf-red); }
.mf-ibrand__actions > .is-danger:hover { border-color: var(--mf-red); color: var(--mf-red); }
.mf-ibrand__actions i { font-size: .9em; }

@media (max-width: 767px) {
	.mf-history__head { gap: 10px; padding: 10px 2px; }
	.mf-history__logo { display: none; }
	.mf-history__detail { margin-left: 2px; margin-right: 2px; }
	.mf-history__answers { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mf-history__answers dd { margin-bottom: 8px; }
	.mf-history__selects, .mf-history__selects select { width: 100%; }
	.mf-ibrands { grid-template-columns: minmax(0, 1fr); }
	.mf-ibrands__tools { grid-template-columns: minmax(0, 1fr); }
}
.mf-history .mf-history__brands { margin-top: 10px; }
/* MyFreedelity app - styles of the "purchases" pages (purchases, tickets, invoices,
   billing identities, product sheet). Tokens and components: app.css.
   The ticket dialog (.mf-tdlg, .mf-pline) and the printed ticket (.mf-ticketsheet) are
   also used by the home stream and the budget page: js/app/ui/tickets.js. */

/* ---------- icon actions ---------- */
.mf-iconbtn {
	display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
	border: 0; border-radius: 50%; background: var(--mf-soft); color: var(--mf-navy); cursor: pointer;
	transition: background .15s, color .15s;
}
.mf-iconbtn:hover { background: var(--mf-navy); color: #fff; }
.mf-iconbtn.is-waiting { cursor: default; opacity: .45; }
.mf-iconbtn.is-waiting:hover { background: var(--mf-soft); color: var(--mf-navy); }

/* ---------- loyalty earned or spent (legacy .points.plus / .minus / .ong) ---------- */
.mf-points {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 3rem; padding: .35rem .6rem; border-radius: .75rem; line-height: 1;
	background: #effe3d; color: var(--mf-navy);
}
.mf-points strong { font-size: 1.5rem; font-weight: 500; white-space: nowrap; }
.mf-points small { font-size: .7rem; text-transform: uppercase; margin-top: 2px; }
.mf-points--minus { background: var(--mf-red); color: #fff; }
.mf-points--ngo { background: #891dc4; color: #fff; margin-left: -.5rem; }
.mf-points--ngo strong { font-size: 1.1rem; }

.mf-tablewrap { overflow-x: auto; }

/* ---------- the printed ticket ---------- */
.mf-ticketsheet__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px; align-items: center; margin-bottom: 18px; }
.mf-ticketsheet__store { margin: 0; text-align: center; text-transform: uppercase; font-size: 1.5rem; overflow-wrap: anywhere; }
.mf-ticketsheet__summary { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--mf-line-strong); }
.mf-ticketsheet__date { grid-column: 1 / -1; margin: 0; padding: 0 16px 10px; border-bottom: 1px solid var(--mf-line-strong); color: var(--mf-muted); }
.mf-ticketsheet__price { margin: 0; padding: 18px 10px; text-align: center; font-size: 2rem; color: var(--mf-navy); border-right: 1px dotted var(--mf-line-strong); }
.mf-ticketsheet__loyalty { display: flex; align-items: center; justify-content: center; padding: 12px 10px; }
.mf-ticketsheet__loyalty .mf-points { min-width: 5rem; padding: .7rem 1rem; }
.mf-ticketsheet__loyalty .mf-points strong { font-size: 2.4rem; }
.mf-ticketsheet__loyalty .mf-points small { font-size: .9rem; }
.mf-ticketsheet__loyalty .mf-points--ngo strong { font-size: 1.5rem; }

/* ---------- rating ---------- */
.mf-modal--rating { text-align: center; }
.mf-stars { display: flex; justify-content: center; margin: 2rem 0 .5rem; }
.mf-stars button { border: 0; background: none; cursor: pointer; padding: 0 .25rem; font-size: 3rem; color: #ccc; }
.mf-stars:hover button, .mf-stars:focus-within button { color: var(--mf-magenta); }
.mf-stars button:hover ~ button, .mf-stars:not(:hover) button:focus ~ button { color: #ccc; }

/* ---------- title with its parent page: "My invoices > Add..." ---------- */
.mf-crumbhead h1 a { color: inherit; }
.mf-crumbhead h1 a:hover { text-decoration: underline; }

/* ==========================================================================
   Invoices, billing details and invoice request
   (views/portal/purchases/invoices.js, invoicedetails.js, detailsform.js, requestinvoice.js)
   ========================================================================== */
.mf-icaps { margin: 0 0 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }
.mf-invoices__block + .mf-invoices__block { margin-top: 34px; }
.mf-invoices__title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; color: var(--mf-magenta); }
.mf-invoices__lead { margin: 0 0 6px; color: var(--mf-muted); }
.mf-invoices__note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-invoices__note i { margin-top: 3px; color: var(--mf-navy); }

/* One line of a list: the brand, what it is, and its action or status on the right. */
.mf-irow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-irow__mark { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e6eef5; color: var(--mf-navy); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
img.mf-irow__mark { object-fit: contain; padding: 5px; border: 1px solid var(--mf-line); background: #fff; }
.mf-irow__text { display: grid; min-width: 0; overflow-wrap: anywhere; }
.mf-irow__text b { font-weight: 600; color: var(--mf-navy); }
.mf-irow__text small { font-size: .86rem; color: var(--mf-muted); }
.mf-irow__text small .mf-btn--link { font-size: inherit; font-weight: 600; }
.mf-irow__side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mf-irow__tag { padding: 3px 11px; border-radius: 12px; background: #fff3d6; color: #8a5a00; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.mf-irow__chev { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: .85rem; color: var(--mf-magenta); transition: transform .15s; }
[aria-expanded="true"] > .mf-irow__chev { transform: rotate(180deg); }
.mf-irow.is-new { animation: mf-irow-new 3s ease-out; }
@keyframes mf-irow-new { from { background: #fbe3f1; } to { background: transparent; } }

/* Ask for an invoice: a list that scrolls on its own, a purchase unfolds its request. */
.mf-ask__box { max-height: 304px; overflow-y: auto; }
/* While a request is unfolded, its purchase is the only one shown. */
.mf-ask__box.is-open { max-height: none; }
.mf-ask__box.is-open .mf-ask__item:not(.is-open), .mf-ask__box.is-open .mf-ask__more { display: none; }
.mf-ask__item.is-open > .mf-irow { border-bottom: 0; }
.mf-ask__toggle i { font-size: .8em; transition: transform .15s; }
.mf-ask__toggle[aria-expanded="true"] { border-color: transparent; padding: 4px 8px; color: var(--mf-magenta); }
.mf-ask__toggle[aria-expanded="true"] span { display: none; }
.mf-ask__toggle[aria-expanded="true"] i { font-size: 1em; transform: rotate(180deg); }
.mf-ask__panel { margin: 0 0 10px; padding: 14px 18px 16px; border-radius: 14px; background: var(--mf-soft); }
.mf-ask__more { margin: 0; padding: 12px 0 4px; text-align: center; font-size: .86rem; color: var(--mf-muted); }
.mf-ask__more:empty { display: none; }
.mf-ask__morebtn { padding: 2px 8px; border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; cursor: pointer; }
.mf-ask__morebtn:hover:not(:disabled) { color: var(--mf-navy); }
.mf-ask__dots { margin-right: 6px; }
.mf-ask__dots i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #cfcbd3; }

/* The invoices: search, chips, then the list. */
.mf-invoices__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.mf-invoices__tools > .mf-input { flex: 1 1 240px; width: auto; border-radius: 20px; padding-left: 18px; }
.mf-invoices__tools .mf-chips { margin: 0; }
.mf-invoices__years { width: auto; min-height: 36px; padding-top: 5px; padding-bottom: 5px; border-radius: 18px; border-color: var(--mf-line-strong); }
.mf-invoices__years.is-on { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }
.mf-invoices__none { margin: 30px 0; text-align: center; color: var(--mf-muted); }
.mf-invoices__more { margin: 16px 0 0; }
.mf-invoices__more:empty { display: none; }
.mf-invoices__how { padding: 14px 18px; border-radius: var(--mf-radius-sm); background: #eef3f8; font-size: .95rem; }
.mf-invoices__how p { margin: 0; }
.mf-invoices__how p + p { margin-top: 6px; }
.mf-invoices__how b, .mf-invoices__how a { color: var(--mf-navy); font-weight: 600; }
.mf-invoices__how a:hover { text-decoration: underline; }

/* Billing details as a card: to read (with its actions), or to pick (a radio button). */
.mf-idcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mf-idcard { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mf-line); border-radius: 14px; background: var(--mf-surface); font-size: .9rem; overflow-wrap: anywhere; }
.mf-idcard b { font-size: 1rem; font-weight: 600; color: var(--mf-navy); }
.mf-idcard__lines { display: grid; line-height: 1.45; color: #555; }
.mf-idcard__links { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; }
.mf-idcard__links a, .mf-idcard__links button { padding: 0; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--mf-navy); text-decoration: underline; cursor: pointer; }
.mf-idcard__links a:hover { color: var(--mf-magenta); }
.mf-idcard__links button:hover { color: var(--mf-red); }
.mf-idcard--new { flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-height: 96px; border-style: dashed; border-color: var(--mf-line-strong); font-weight: 600; color: var(--mf-navy); text-align: center; }
a.mf-idcard--new:hover, label.mf-idcard:hover { border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-idcard--plain { padding: 0; border: 0; }
label.mf-idcard { cursor: pointer; }
label.mf-idcard b { padding-right: 28px; }
.mf-idcard__radio { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border: 2px solid var(--mf-line-strong); border-radius: 50%; background: #fff; }
label.mf-idcard:has(input:checked) { border-color: var(--mf-magenta); box-shadow: inset 0 0 0 1px var(--mf-magenta); }
label.mf-idcard:has(input:checked) .mf-idcard__radio { border-color: var(--mf-magenta); background: radial-gradient(var(--mf-magenta) 45%, #fff 50%); }
label.mf-idcard:has(input:focus-visible) { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }

/* The form of billing details: groups, mandatory marks, one message per error. */
.mf-details__group { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mf-details__group + .mf-details__group { margin-top: 12px; }
.mf-details__group legend { margin-bottom: 10px; padding: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }
.mf-details__group legend small { font-size: .86rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.mf-details__req { color: var(--mf-magenta); }
.mf-details__col-5 { grid-column: span 5; }
.mf-details__msg { margin: 0; font-size: .85rem; color: var(--mf-red); }
.mf-details__msg.is-ok { color: #3d7a00; font-weight: 600; }
.mf-details__row > .mf-details__msg { grid-column: 1 / -1; order: 1; margin-top: -8px; }
.mf-details .mf-field.is-valid .mf-input { border-color: var(--mf-green); }
.mf-details__legend { margin: 0; font-size: .85rem; color: var(--mf-muted); }

/* The request: whose name the invoice is made out to, and the purchase it is for. */
.mf-request__new { display: grid; gap: 14px; padding-top: 6px; }
.mf-request__note { margin: 0; font-size: .88rem; color: var(--mf-muted); }
.mf-request .mf-icaps { margin: 0; }
.mf-request__sale { margin-bottom: 22px; border-radius: 14px; background: var(--mf-soft); }
.mf-request__salehead { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; width: 100%; padding: 12px 16px; border: 0; border-radius: 14px; background: none; font: inherit; color: inherit; text-align: left; }
button.mf-request__salehead { cursor: pointer; }
.mf-request__amount { font-weight: 700; white-space: nowrap; }
.mf-request__lines { padding: 0 16px 12px; }
.mf-request__notice p:last-child { margin: 0; }

/* Invoices issued at once (itminvoice.js): what is wrong with a request, the confirmation, a cancelled invoice. */
.mf-request__warn { font-size: .9rem; }
.mf-request__warn a { font-weight: 700; color: inherit; text-decoration: underline; }
.mf-issue { display: grid; gap: 12px; text-align: left; }
.mf-issue__what { display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--mf-soft); }
.mf-issue__what span { font-size: .88rem; color: var(--mf-muted); }
.mf-issue__list { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: .92rem; overflow-wrap: anywhere; }
.mf-irow__tag--off { background: var(--mf-soft); color: var(--mf-muted); }

@media (max-width: 991px) {
	/* One field per line: each message comes back under its own field. */
	.mf-details__col-5 { grid-column: span 12; }
	.mf-details__row > .mf-details__msg { order: 0; }
}
@media (max-width: 700px) {
	.mf-irow { grid-template-columns: 42px minmax(0, 1fr); }
	.mf-irow__side { grid-column: 1 / -1; justify-content: flex-start; }
	.mf-irow__side > .mf-btn { flex: 1 1 auto; }
	.mf-irow__tag { white-space: normal; }
	/* An unfolded purchase keeps its chevron on its line. */
	.mf-ask__item.is-open > .mf-irow { grid-template-columns: 42px minmax(0, 1fr) auto; }
	.mf-ask__item.is-open .mf-irow__side { grid-column: auto; }
	.mf-ask__item.is-open .mf-irow__side > .mf-btn { flex: none; }
	.mf-ask__panel { padding: 12px 12px 14px; }
	.mf-idcards { grid-template-columns: minmax(0, 1fr); }
	.mf-request .mf-form__actions .mf-btn { flex: 1 1 100%; }
	.mf-request__salehead { gap: 10px; padding: 12px; }
}

/* ==========================================================================
   "My purchases", the purchases of a brand, the ticket dialog and the product
   sheet (js/app/views/portal/purchases/list.js, eanproduct.js, js/app/ui/tickets.js).
   One block, with its own phone rules at the end.
   ========================================================================== */

/* ---------- the list: views, filters, progress ---------- */
.mf-purchases__views { justify-content: flex-start; margin-bottom: 16px; }
.mf-purchases__views button { padding: 8px 18px; gap: 8px; }
.mf-purchases__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mf-purchases__tools .mf-input { width: auto; border-radius: 22px; }
.mf-purchases__tools .mf-purchases__search { flex: 1 1 240px; padding-left: 18px; }
.mf-purchases__progress { margin: 0 0 14px; font-size: .88rem; color: var(--mf-muted); }
.mf-purchases__bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--mf-soft); overflow: hidden; }
.mf-purchases__bar span { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--mf-navy); transition: width .3s; }
.mf-purchases__count { margin: 0 0 6px; font-size: .9rem; color: var(--mf-muted); }
.mf-purchases__list.is-loading { opacity: .5; }
.mf-purchases__month { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 2px; padding-bottom: 6px; border-bottom: 2px solid var(--mf-soft); font-size: 1.05rem; font-weight: 700; }
.mf-purchases__month:first-child { margin-top: 10px; }
.mf-purchases__month small { font-size: .84rem; font-weight: 400; color: var(--mf-muted); white-space: nowrap; }
.mf-purchases__more { padding-top: 18px; text-align: center; }
.mf-purchases__more:empty { display: none; }
.mf-purchases__hint { margin: 0 0 10px; font-size: .84rem; color: var(--mf-muted); }

/* ---------- a row: a purchase, a reward, a product ---------- */
.mf-buy { border-bottom: 1px solid var(--mf-soft); }
.mf-buy__head {
	display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto 22px; gap: 12px; align-items: center;
	width: 100%; padding: 11px 6px; border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left;
}
button.mf-buy__head, .mf-buy__visit { cursor: pointer; }
button.mf-buy__head:hover, .mf-buy__visit:hover { background: #f9eff6; }
.mf-buy--nomark .mf-buy__head { grid-template-columns: minmax(0, 1fr) auto auto 22px; }
.mf-buy--product .mf-buy__head { grid-template-columns: 62px minmax(0, 1fr) auto 22px; }
.mf-buy--product.mf-buy--pic .mf-buy__head { grid-template-columns: 62px 40px minmax(0, 1fr) auto 22px; }
.mf-buy__main { min-width: 0; }
.mf-buy__main b { font-weight: 700; color: var(--mf-navy); }
.mf-buy__main b i { font-style: normal; font-weight: 400; color: var(--mf-muted); }
.mf-buy__main small { display: flex; gap: 6px; margin-top: 2px; font-size: .84rem; color: var(--mf-muted); }
.mf-buy__main small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-buy__main small u { flex: none; text-decoration: none; font-weight: 600; color: var(--mf-navy); }
.mf-buy__main small.mf-buy__found { display: block; }
.mf-buy__found span { display: block; }
.mf-buy__name { display: block; overflow-wrap: anywhere; }
.mf-buy mark, .mf-pline mark { padding: 0 2px; border-radius: 3px; background: #fbe3f1; color: var(--mf-magenta); font-weight: 700; }
.mf-buy__loyalty { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.mf-buy__amount { font-weight: 700; white-space: nowrap; text-align: right; }
.mf-buy__amount small { display: block; font-size: .72rem; font-weight: 400; color: var(--mf-muted); }
.mf-buy__times { font-size: .9rem; color: var(--mf-muted); white-space: nowrap; }
.mf-buy__chev { display: grid; place-items: center; font-size: .85rem; color: var(--mf-magenta); transition: transform .15s; }
[aria-expanded="true"] > .mf-buy__chev { transform: rotate(180deg); }
.mf-buy__open { margin: 0 0 10px; padding: 10px 16px 14px; border-radius: 14px; background: var(--mf-soft); }
.mf-buy__none { margin: 4px 0 0; font-size: .9rem; color: var(--mf-muted); }
.mf-buy__rest { display: block; margin: 8px 0 0 58px; font-size: .9rem; font-weight: 600; text-decoration: none; }
.mf-buy--product .mf-buy__rest { margin-left: 6px; }
.mf-buy__rest:hover { text-decoration: underline; }
.mf-buy__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mf-buy__actions .mf-btn { background-color: var(--mf-surface); }
.mf-buy__actions .mf-btn--primary { background-color: var(--mf-navy); }
.mf-btn.is-waiting { cursor: default; opacity: .6; }
.mf-buy__visit {
	display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 12px; align-items: center;
	width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--mf-line); border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left;
}
.mf-buy__visit:last-child { border-bottom: 0; }

.mf-earn { padding: 2px 8px; border-radius: 9px; background: #effe3d; color: var(--mf-navy); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.mf-earn--minus { background: var(--mf-red); color: #fff; }
.mf-earn--ngo { background: #891dc4; color: #fff; }
.mf-brandmark {
	display: grid; place-items: center; flex: none; width: 46px; height: 38px; overflow: hidden;
	border: 1px solid var(--mf-line); border-radius: 10px; background: var(--mf-surface); color: var(--mf-navy); font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.mf-brandmark img { display: block; max-width: 38px; max-height: 28px; object-fit: contain; }

/* ---------- a ticket line ---------- */
.mf-pline { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--mf-line); font-size: .92rem; }
.mf-pline--pic { grid-template-columns: 48px 40px minmax(0, 1fr) auto; }
.mf-pline__qty { color: var(--mf-muted); white-space: nowrap; }
.mf-pline__pic { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: #ebe7dc; }
.mf-pline__pic img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mf-pline__name { min-width: 0; overflow-wrap: anywhere; }
.mf-pline__name small { display: block; font-size: .8rem; color: var(--mf-muted); }
.mf-pline__name small a { font-weight: 600; text-decoration: underline; }
.mf-pline__price { font-weight: 600; white-space: nowrap; text-align: right; }
.mf-nutri { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 5px; color: #fff; font-size: .72rem; font-weight: 800; vertical-align: middle; }
.mf-nutri--a { background: #038141; } .mf-nutri--b { background: #85bb2f; } .mf-nutri--c { background: #fecb02; color: #333; }
.mf-nutri--d { background: #ee8100; } .mf-nutri--e { background: #e63e11; }

/* ---------- the ticket, in a dialog: head and actions stay, the lines scroll ---------- */
.mf-modal--ticket .mf-modal__head { align-items: center; padding-bottom: 16px; }
.mf-modal--ticket .mf-modal__close { align-self: flex-start; }
.mf-modal--ticket .mf-modal__body { flex: 1; padding-top: 0; }
.mf-tdlg__head { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.mf-tdlg__title { flex: 1; min-width: 0; }
.mf-tdlg__title h2 { margin: 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.mf-tdlg__title p { margin: 2px 0 0; font-size: .86rem; color: var(--mf-muted); }
.mf-tdlg__total { display: grid; gap: 4px; justify-items: end; }
.mf-tdlg__total b { font-size: 1.45rem; line-height: 1.2; color: var(--mf-navy); white-space: nowrap; }
.mf-tdlg__search { margin-bottom: 4px; padding-left: 18px; border-radius: 22px; }
.mf-tdlg__dept { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 2px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-tdlg__lines > .mf-pline:last-child { border-bottom: 0; }
.mf-tdlg__wait, .mf-tdlg__none { margin: 0; padding: 30px 0; text-align: center; color: var(--mf-muted); }
.mf-tdlg__actions { justify-content: flex-start; }
.mf-tdlg__actions:empty { display: none; }
.mf-tdlg__nav { font-weight: 400; color: var(--mf-muted); }
.mf-tdlg__navs { display: flex; gap: 8px; margin-left: auto; }

/* ---------- the product sheet ---------- */
.mf-ean__crumb { margin: 0 0 16px; font-size: .9rem; color: var(--mf-muted); }
.mf-ean__crumb a { font-weight: 600; }
.mf-ean__crumb a:hover span, .mf-ean__crumb > a:hover { text-decoration: underline; }
.mf-ean__crumb i { font-size: .8em; }
.mf-ean__nav a { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; }
.mf-ean__unknown { margin: 30px 0; text-align: center; color: var(--mf-muted); }
.mf-ean__top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.mf-ean__zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; }
.mf-ean__photo { display: grid; place-items: center; width: 150px; height: 150px; overflow: hidden; border: 1px solid var(--mf-line); border-radius: 16px; background: var(--mf-surface); }
.mf-ean__photo img { display: block; max-width: 100%; max-height: 148px; object-fit: contain; }
.mf-ean__nophoto { border: 0; background: #ebe7dc; font-size: .8rem; color: var(--mf-muted); }
.mf-ean__what h2 { margin: 0; font-size: 1.4rem; font-weight: 600; overflow-wrap: anywhere; }
.mf-ean__qty { font-size: 1rem; font-weight: 400; color: var(--mf-muted); }
.mf-ean__by { margin: 2px 0 12px; font-size: .9rem; color: var(--mf-muted); }
.mf-ean__nutri { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mf-ean__nutri p { flex: 1; min-width: 200px; margin: 0; font-size: .94rem; }
.mf-ean__nutri b { color: var(--mf-navy); }
.mf-ean__grades { display: inline-flex; align-items: center; }
.mf-ean__grades i { display: grid; place-items: center; width: 26px; height: 30px; color: #fff; font-size: .85rem; font-style: normal; font-weight: 800; opacity: .4; }
.mf-ean__grades i:first-child { border-radius: 8px 0 0 8px; }
.mf-ean__grades i:last-child { border-radius: 0 8px 8px 0; }
.mf-ean__grades i.is-on { width: 34px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 2px #fff; font-size: 1.15rem; opacity: 1; }
.mf-ean__order { margin-top: 14px; }
.mf-ean__order:empty { display: none; }
.mf-ean__frame { margin-top: 18px; padding: 20px 22px; border: 3px solid var(--mf-soft); border-radius: 18px; }
.mf-ean__frame > h3 { margin-bottom: 14px; color: var(--mf-magenta); }
.mf-ean__frame > h3 small { font-size: inherit; font-weight: 400; color: var(--mf-muted); }
.mf-ean__frame .mf-stats__figures { margin-bottom: 10px; }
.mf-ean__frame .mf-purchases__progress, .mf-ean__none { margin: 0; color: var(--mf-muted); }
.mf-ean__bought .mf-buy__visit { border-bottom-color: var(--mf-soft); }
.mf-ean__levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mf-ean__levels div { padding: 12px; border-top: 5px solid var(--mf-line); border-radius: 14px; background: var(--mf-soft); }
.mf-ean__levels b { display: block; font-size: 1.25rem; color: var(--mf-navy); white-space: nowrap; }
.mf-ean__levels span { display: block; font-size: .82rem; color: var(--mf-muted); }
.mf-ean__levels em { font-size: .8rem; font-style: normal; font-weight: 700; }
.mf-ean__levels .is-low { border-color: #038141; } .mf-ean__levels .is-low em { color: #038141; }
.mf-ean__levels .is-moderate { border-color: #e0a800; } .mf-ean__levels .is-moderate em { color: #8f6900; }
.mf-ean__levels .is-high { border-color: #e63e11; } .mf-ean__levels .is-high em { color: #c5300b; }
.mf-ean__summary { margin: 12px 0 0; color: var(--mf-muted); }
.mf-ean__values { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.mf-ean__values table { flex: 1; min-width: 260px; max-width: 460px; border-collapse: collapse; font-size: .92rem; }
.mf-ean__values td { padding: 7px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-ean__values td:last-child { font-weight: 600; text-align: right; white-space: nowrap; }
.mf-ean__values .is-sub td:first-child { padding-left: 18px; color: var(--mf-muted); }
.mf-ean__label { width: 150px; text-align: center; }
.mf-ean__label img { display: block; max-height: 110px; width: auto; margin: 0 auto; border-radius: 10px; }
.mf-ean__label span { display: block; margin-top: 6px; font-size: .8rem; color: var(--mf-muted); text-decoration: underline; }
.mf-ean__full { display: block; max-width: 100%; margin: 0 auto; }
.mf-ean__facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .94rem; }
.mf-ean__facts dt { color: var(--mf-muted); }
.mf-ean__facts dd { margin: 0; overflow-wrap: anywhere; }
.mf-ean__facts .mf-ean__label { margin-top: 10px; }
.mf-ean__missing { color: var(--mf-muted); }
.mf-ean__source { margin: 16px 0 0; font-size: .86rem; color: var(--mf-muted); }
.mf-ean__source a { text-decoration: underline; }
/* Previous and next product of the ticket: links in the first line, a bar at the bottom of a phone. */
.mf-ean__steps { display: none; }

@media (max-width: 700px) {
	/* The two views are two tabs across the top. */
	.mf-purchases__views button { flex: 1; justify-content: center; }
	.mf-purchases__tools .mf-purchases__search { flex-basis: 100%; }
	.mf-purchases__tools select, .mf-purchases__tools .mf-btn { flex: 1 1 0; min-width: 0; }
	/* A row is two lines: who and how much, then the articles (and what was earned). */
	.mf-buy__head { grid-template-columns: 46px minmax(0, 1fr) auto 18px; gap: 4px 10px; padding: 10px 2px; }
	.mf-buy--nomark .mf-buy__head { grid-template-columns: minmax(0, 1fr) auto 18px; }
	.mf-buy__head .mf-buy__loyalty { grid-column: 2; grid-row: 2; justify-content: flex-start; }
	.mf-buy--nomark .mf-buy__loyalty { grid-column: 1; }
	.mf-buy__loyalty:empty { display: none; }
	.mf-buy__main small { flex-wrap: wrap; }
	.mf-buy__main small span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
	.mf-buy__found span, .mf-buy__visit small span { display: block; }
	.mf-buy--product .mf-buy__head { grid-template-columns: 46px minmax(0, 1fr) auto 18px; }
	.mf-buy--product.mf-buy--pic .mf-buy__head { grid-template-columns: 40px minmax(0, 1fr) auto 18px; }
	.mf-buy--pic .mf-buy__times { grid-column: 2; grid-row: 2; }
	.mf-buy--pic .mf-pline__pic { grid-row: 1 / span 2; }
	.mf-buy__open { padding: 8px 12px 12px; }
	.mf-buy__rest { margin-left: 0; }
	.mf-pline { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
	.mf-pline--pic { grid-template-columns: 40px 34px minmax(0, 1fr) auto; }
	.mf-pline__pic { width: 34px; height: 34px; }
	/* The ticket takes the whole screen; its total stays in view while the lines scroll. */
	.mf-modal--ticket { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
	.mf-modal--ticket .mf-modal__head { padding: 14px 14px 12px; gap: 8px; border-bottom: 1px solid var(--mf-line); }
	.mf-modal--ticket .mf-modal__body { padding: 10px 14px 16px; }
	.mf-modal--ticket .mf-modal__actions { padding: 12px 14px 14px; gap: 8px; }
	.mf-tdlg__head { gap: 8px; }
	.mf-tdlg__head .mf-brandmark { display: none; }
	.mf-tdlg__title h2 { font-size: 1.05rem; }
	.mf-tdlg__total b { font-size: 1.2rem; }
	.mf-tdlg__navs { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
	/* The sheet: picture on top, the figures two by two, the three purchase figures stacked. */
	.mf-ean__top { grid-template-columns: 1fr; }
	.mf-ean__photo { margin: 0 auto; }
	.mf-ean__frame { padding: 16px 14px; }
	.mf-ean__frame .mf-stats__figures > div { flex-basis: 100%; }
	.mf-ean__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mf-ean__values table { min-width: 0; flex-basis: 100%; max-width: none; }
	.mf-ean__facts { grid-template-columns: 1fr; gap: 2px; }
	.mf-ean__facts dd { margin-bottom: 10px; }
	.mf-ean__place, .mf-ean__nav { display: none; }
	.mf-ean__steps:not([hidden]) {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--mf-navy); color: #fff; font-size: .88rem;
	}
	.mf-ean__steps a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; color: #fff; font-weight: 700; }
	.mf-ean__steps a:last-child { justify-self: end; }
	/* Room for the bar under the last line of the page. */
	.mf-content:has(.mf-ean__steps:not([hidden])) { padding-bottom: 60px; }
}

/* ---------- printing several tickets (ui/ticketprint.js) ---------- */
.mf-tprint__part { margin-bottom: 18px; }
.mf-tprint__part h3 { margin: 0 0 8px; font-size: .95rem; color: var(--mf-navy); }
.mf-tprint__part .mf-chips { margin-bottom: 0; }
.mf-tprint__dates { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; }
.mf-tprint__dates label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--mf-muted); }
.mf-tprint__dates .mf-date { width: 11.5em; }
.mf-tprint__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 12px; border: 1px solid var(--mf-line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--mf-soft); }
.mf-tprint__allbox { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.mf-tprint__count { font-weight: 700; color: var(--mf-navy); }
.mf-tprint__list { max-height: min(40vh, 360px); overflow-y: auto; border: 1px solid var(--mf-line); border-radius: 0 0 12px 12px; }
.mf-tprint__row { display: grid; grid-template-columns: auto 7.5em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--mf-line); cursor: pointer; }
.mf-tprint__row:first-child { border-top: 0; }
.mf-tprint__row:hover { background: var(--mf-soft); }
.mf-tprint__row input, .mf-tprint__allbox input, .mf-tprint__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--mf-navy); }
.mf-tprint__day { color: var(--mf-muted); font-size: .9rem; }
.mf-tprint__store { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-tprint__amount { font-weight: 700; color: var(--mf-navy); }
.mf-tprint__none { margin: 0; padding: 18px 12px; color: var(--mf-muted); }
.mf-tprint__layout { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; }
.mf-tprint__opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mf-tprint__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
@media (max-width: 600px) {
	.mf-tprint__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "box store amount" "box day amount"; row-gap: 0; }
	.mf-tprint__row input { grid-area: box; }
	.mf-tprint__day { grid-area: day; }
	.mf-tprint__store { grid-area: store; }
	.mf-tprint__amount { grid-area: amount; }
	.mf-tprint__actions .mf-btn { flex: 1 1 100%; }
	/* The periods on one line that scrolls sideways, as the brands. */
	.mf-chips.mf-tprint__periods { flex-wrap: nowrap; margin-right: -16px; padding: 2px 16px 6px 2px; overflow-x: auto; scrollbar-width: none; }
	.mf-tprint__periods > * { flex: none; white-space: nowrap; }
}

/* ---------- printing tickets: only the print area shows ---------- */
.mf-printarea { display: none; }
@media print {
	body.mf-printing > *:not(.mf-printarea) { display: none !important; }
	body.mf-printing .mf-printarea { display: block; padding: 10px; }
	.mf-printarea .mf-ticketsheet { break-inside: avoid; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed var(--mf-line-strong); }
	/* Several tickets: one per page, or one after the other (each kept whole); the summary on its own page. */
	.mf-tprint-out .mf-ticketsheet { break-after: page; border-bottom: 0; }
	.mf-tprint-out .mf-ticketsheet:last-child { break-after: auto; }
	.mf-tprint-out.is-follow .mf-ticketsheet { break-after: auto; border-bottom: 1px dashed var(--mf-line-strong); }
	.mf-tprint-sum { break-after: page; }
	.mf-tprint-sum h1 { font-size: 1.4rem; color: var(--mf-navy); }
	.mf-tprint-sum table { width: 100%; }
	.mf-tprint-sum tfoot th { border-top: 2px solid var(--mf-navy); }
	.mf-tprint-sum__when { margin-top: 18px; color: var(--mf-muted); font-size: .85rem; }
}

@media (max-width: 700px) {
	.mf-ticketsheet__head { grid-template-columns: 1fr; }
	.mf-ticketsheet__summary { border-left: 0; }
	.mf-ticketsheet__price { font-size: 1.5rem; }
}
/* MyFreedelity app - styles of the "stats" pages. Tokens and components: app.css. */

/* ---------- budget and Nutri-Score ---------- */
.mf-stats__intro { margin: 0; }
/* Nutri-Score: the text, and the logo of the score on its right as on the legacy page. */
.mf-stats__intro--score { display: flex; align-items: flex-start; gap: 28px; }
.mf-stats__intro--score > div { flex: 1; min-width: 0; }
.mf-stats__intro--score img { flex: none; order: 2; width: 150px; }
.mf-stats__intro--score p:last-child { margin-bottom: 0; }
.mf-stats__legend { font-size: .85rem; font-style: italic; color: var(--mf-muted); }

/* Brand chips on the first line, the year list on its own under them. */
.mf-stats__year { max-width: 260px; }
/* The other brands: a list that sits in the row of chips and looks like one. */
.mf-stats__body { margin-top: 28px; min-height: 200px; }
.mf-stats__figures { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; }
.mf-stats__figures > div { flex: 1 1 180px; padding: 16px 20px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
.mf-stats__figures dd { margin: 0; font-size: 1.7rem; font-weight: 700; color: var(--mf-navy); line-height: 1.2; }
.mf-stats__figures dt { margin-top: 2px; font-size: .9rem; color: var(--mf-muted); }
.mf-stats__figures .mf-stats__trend { margin-top: 6px; font-size: .85rem; font-weight: 600; }
/* Spending more reads as a warning, spending less as good news. */
.mf-stats__trend.is-up, .mf-budget__chip .is-up { color: #b45309; }
.mf-stats__trend.is-down, .mf-budget__chip .is-down { color: #3f7a00; }
.mf-stats__graph { border: 4px solid var(--mf-soft); border-radius: var(--mf-radius); padding: 32px 36px 24px; }
.mf-stats__graph + .mf-stats__graph { margin-top: 28px; }
.mf-stats__graph h3 { color: var(--mf-magenta); margin-bottom: 1.4em; }
/* A grid or flex child does not shrink under its content: the chart must, to follow the page width. */
.mf-stats__chart { min-width: 0; overflow: hidden; }
/* The charts speak with the font of the page (Highcharts sets its own on the drawing). */
.mf-stats__chart svg { font-family: var(--mf-font) !important; }

/* ---------- budget ---------- */
.mf-stats__tabs { margin-bottom: 22px; }
.mf-stats__graph h4 { margin: 22px 0 12px; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-stats__graph h3 + h4 { margin-top: 0; }
.mf-budget__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; }
.mf-budget__nav h2 { margin: 0; min-width: 9.5em; text-align: center; font-size: 1.35rem; font-weight: 600; }
.mf-budget__arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mf-line-strong); border-radius: 50%; background: none; color: var(--mf-navy); cursor: pointer; }
.mf-budget__arrow:hover:not(:disabled) { border-color: var(--mf-magenta); color: var(--mf-magenta); }
.mf-budget__arrow:disabled { opacity: .35; cursor: default; }
.mf-budget__big { margin: 0 0 16px; text-align: center; }
.mf-budget__big b { display: block; font-size: 2.6rem; font-weight: 700; line-height: 1.15; color: var(--mf-navy); }
.mf-budget__big span { color: var(--mf-muted); }
.mf-budget__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; }
.mf-budget__chip { padding: 6px 14px; border-radius: 18px; background: var(--mf-soft); font-size: .9rem; }
.mf-budget__headline { margin: 0 0 4px; font-size: 1.4rem; color: var(--mf-navy); }
.mf-budget__headline b { font-weight: 700; }
.mf-budget__sub { margin: 0 0 20px; color: var(--mf-muted); }
.mf-budget__hint { margin: 14px 0 0; font-size: .88rem; color: var(--mf-muted); }
.mf-budget__more { display: inline-block; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 600; color: var(--mf-navy); text-decoration: underline; cursor: pointer; }
.mf-budget__more:hover { color: var(--mf-magenta); }
.mf-budget__more + .mf-budget__more { margin-left: 24px; }

/* Columns: the amount sits on its column, the reference line crosses them. */
.mf-bars { --h: 150px; --foot: 25px; position: relative; display: flex; gap: 8px; padding-top: 22px; }
.mf-bars__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
button.mf-bars__col { cursor: pointer; }
.mf-bars__track { display: flex; align-items: flex-end; box-sizing: content-box; height: var(--h); border-bottom: 1px solid var(--mf-line); }
.mf-bars__track i { position: relative; flex: 1; min-height: 2px; max-width: 64px; margin: 0 auto; border-radius: 6px 6px 0 0; background: #dcc4d6; transition: background .15s; }
.mf-bars__col.is-max .mf-bars__track i { background: var(--mf-magenta); }
.mf-bars__col.is-now .mf-bars__track i { background: var(--mf-navy); }
button.mf-bars__col:hover .mf-bars__track i, button.mf-bars__col:focus-visible .mf-bars__track i { background: var(--mf-magenta-dark); }
/* Over the reference line, on the card's white: the line never strikes an amount through. */
.mf-bars__track em { position: absolute; bottom: calc(100% + 2px); left: 50%; z-index: 2; transform: translateX(-50%); padding: 0 3px; border-radius: 3px; background: var(--mf-surface); line-height: 1.3; font-style: normal; font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--mf-ink); }
.mf-bars__label { height: 24px; padding-top: 6px; line-height: 18px; text-align: center; font-size: .78rem; color: var(--mf-muted); white-space: nowrap; overflow: hidden; }
.mf-bars__col.is-now .mf-bars__label { font-weight: 700; color: var(--mf-navy); }
.mf-bars__label span:last-child { display: none; }
/* The line is placed over the tracks: above the labels (--foot), at its share (--at) of their height. */
.mf-bars__line { position: absolute; left: 0; right: 0; bottom: calc(var(--foot) + var(--h) * var(--at)); z-index: 1; height: 0; border-top: 2px dashed var(--mf-navy); pointer-events: none; }
.mf-bars--line { padding-right: 118px; }
.mf-bars__line span { position: absolute; right: 0; top: -1px; width: 112px; transform: translateY(-50%); padding: 1px 0 1px 8px; background: var(--mf-surface); line-height: 1.25; text-align: left; font-size: .74rem; font-weight: 700; color: var(--mf-navy); }
.mf-bars__legend { display: none; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .8rem; font-weight: 700; color: var(--mf-navy); }
.mf-bars__legend i { width: 26px; border-top: 2px dashed var(--mf-navy); }

/* Ranking: name, bar, amount. */
.mf-rank { display: grid; grid-template-columns: minmax(110px, 220px) 1fr auto; gap: 10px 14px; align-items: center; font-size: .94rem; }
.mf-rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
button.mf-rank__name { padding: 0; border: 0; background: none; font: inherit; color: var(--mf-navy); text-decoration: underline; cursor: pointer; }
button.mf-rank__name:hover { color: var(--mf-magenta); }
.mf-rank__bar i { display: block; height: 14px; min-width: 3px; border-radius: 7px; background: var(--mf-magenta); }
.mf-rank__bar i.is-other { background: #cfcbd3; }
.mf-rank__amount { font-weight: 700; text-align: right; white-space: nowrap; }
.mf-rank__amount small { display: inline-block; min-width: 3.2em; font-weight: 400; color: var(--mf-muted); }

/* Visits of the month: each row opens its ticket. */
.mf-budget__visits { list-style: none; margin: 0; padding: 0; }
.mf-budget__visits li + li { border-top: 1px solid var(--mf-soft); }
.mf-budget__visit { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 6px; border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mf-budget__visit:hover { background: var(--mf-soft); }
.mf-budget__visit > span { flex: 1; min-width: 0; }
.mf-budget__visit strong { display: block; font-weight: 600; color: var(--mf-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-budget__visit small { display: block; color: var(--mf-muted); }
.mf-budget__visit b { white-space: nowrap; }
.mf-budget__visit i { color: var(--mf-line-strong); font-size: .8rem; }

/* ---------- Nutri-Score ---------- */
/* The five letters, with the colours of the legacy chart. */
.mf-score__spread i.is-a, .mf-score__letter.is-a, .mf-score__column i.is-a { background: #467c45; }
.mf-score__spread i.is-b, .mf-score__letter.is-b, .mf-score__column i.is-b { background: #92b43e; }
.mf-score__spread i.is-c, .mf-score__letter.is-c, .mf-score__column i.is-c { background: #e9c42e; color: var(--mf-ink); }
.mf-score__spread i.is-d, .mf-score__letter.is-d, .mf-score__column i.is-d { background: #cf7c1d; }
.mf-score__spread i.is-e, .mf-score__letter.is-e, .mf-score__column i.is-e { background: #c23e1d; }
.mf-score__spread { display: flex; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; }
.mf-score__spread i { display: grid; place-items: center; min-width: 2px; color: #fff; font-style: normal; font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.mf-score__total .mf-score__spread { height: 36px; border-radius: 18px; }
/* In a ranking row the segments are parts of one bar, not bars of their own. */
.mf-rank__bar .mf-score__spread i { height: auto; min-width: 2px; border-radius: 0; }
.mf-score__counts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 28px; font-size: .88rem; color: var(--mf-muted); }
.mf-score__counts b { color: var(--mf-ink); }
.mf-score__letter { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: .9rem; font-weight: 700; }

.mf-score__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; }
.mf-score__head h3 { margin-bottom: .3em; }
.mf-score__head .mf-budget__sub { margin-bottom: 0; }
.mf-score__switch { display: flex; border: 1px solid var(--mf-line-strong); border-radius: 18px; overflow: hidden; }
.mf-score__switch button { padding: 6px 14px; border: 0; background: none; font: inherit; font-size: .88rem; color: var(--mf-muted); cursor: pointer; }
.mf-score__switch button[aria-pressed="true"] { background: var(--mf-magenta); color: #fff; font-weight: 600; }

.mf-score__line { position: relative; height: 150px; margin: 40px 0 0; border-bottom: 1px solid var(--mf-line); }
.mf-score__line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mf-score__line polyline { fill: none; stroke: #467c45; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mf-score__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--mf-surface); border-radius: 50%; background: #467c45; }
.mf-score__dot em { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .76rem; font-weight: 700; color: var(--mf-ink); white-space: nowrap; }
.mf-score__dot.is-few { background: var(--mf-surface); border-color: #9bb39a; }
.mf-score__dot.is-few em { font-weight: 400; color: var(--mf-muted); }
a.mf-score__dot:hover { background: var(--mf-magenta); }
.mf-score__columns { display: flex; gap: 8px; height: 170px; margin-top: 22px; border-bottom: 1px solid var(--mf-line); }
.mf-score__column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; max-width: 64px; margin: 0 auto; border-radius: 6px 6px 0 0; overflow: hidden; }
.mf-score__column i { flex: 1 1 0; }
.mf-score__column.is-few { opacity: .4; }
a.mf-score__column:hover { outline: 2px solid var(--mf-magenta); outline-offset: 1px; }
.mf-score__axis { display: flex; gap: 8px; }
.mf-score__columns + .mf-score__axis, .mf-score__line + .mf-score__axis { padding-top: 6px; }
.mf-score__axis > span { flex: 1 1 0; min-width: 0; text-align: center; font-size: .78rem; color: var(--mf-muted); white-space: nowrap; overflow: hidden; }
.mf-score__axis > span span:last-child { display: none; }

.mf-score__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.mf-score__lists .mf-stats__graph { margin: 0; padding: 28px 28px 18px; }
.mf-score__lists + .mf-stats__graph { margin-top: 28px; }
.mf-score__products { list-style: none; margin: 0; padding: 0; }
.mf-score__products li + li { border-top: 1px solid var(--mf-soft); }
.mf-score__products li > * { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: var(--mf-radius-xs); color: inherit; }
.mf-score__products a:hover { background: var(--mf-soft); }
.mf-score__products li span:not(.mf-score__letter) { flex: 1; min-width: 0; }
.mf-score__products strong { display: block; font-weight: 600; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-score__products small { display: block; color: var(--mf-muted); }
.mf-score__products b { font-weight: 600; color: var(--mf-muted); white-space: nowrap; }

.mf-stats__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 70px 10px; margin: 0; color: var(--mf-muted); }

@media (max-width: 767px) {
	.mf-stats__intro--score { flex-direction: column; align-items: center; }
	.mf-stats__intro--score img { order: 0; }
	.mf-stats__graph { padding: 18px 10px 12px; border-width: 3px; border-radius: var(--mf-radius-sm); }
	.mf-budget__big b { font-size: 2.1rem; }
	.mf-bars { --h: 120px; gap: 4px; }
	/* No room for a gutter on a phone: the line is named under the chart. */
	.mf-bars--line { padding-right: 0; }
	.mf-bars__line span { display: none; }
	.mf-bars__legend { display: flex; }
	/* Twelve columns on a phone: one letter per month, and only the highest amount written. */
	.mf-bars--many .mf-bars__label span:first-child { display: none; }
	.mf-bars--many .mf-bars__label span:last-child { display: inline; }
	.mf-bars--many .mf-bars__track em { display: none; }
	.mf-bars--many .mf-bars__col.is-max .mf-bars__track em { display: block; }
	.mf-score__lists { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
	.mf-score__lists .mf-stats__graph { padding: 18px 10px 8px; }
	.mf-score__lists + .mf-stats__graph { margin-top: 18px; }
	.mf-score__columns, .mf-score__axis { gap: 4px; }
	.mf-score__axis.is-many > span span:first-child { display: none; }
	.mf-score__axis.is-many > span span:last-child { display: inline; }
	.mf-score__line.is-many .mf-score__dot em { font-size: .66rem; }
	/* Name and amount on one line, the bar under them. */
	.mf-rank { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 4px 10px; }
	.mf-rank__amount { grid-column: 2; }
	.mf-rank__bar { grid-column: 1 / -1; margin-bottom: 8px; }
	.mf-rank__name { white-space: normal; }
}
/* MyFreedelity app - styles of the home page (views/portal/home.js, home/waiting.js, home/cards.js)
   and of the comments (ui/comments.js). Tokens and components: app.css.
   The loyalty figures reuse .mf-points of p-purchases.css, the chips .mf-chip of p-offers.css. */

/* ==================== home page: what is waiting, then the stream ==================== */

/* ---------- head: greeting, mascot ---------- */
.mf-home__head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 14px; padding-left: 8px; }
.mf-home__head h1 { flex: 1; min-width: 0; margin: 0 0 14px; font-weight: 300; overflow-wrap: anywhere; }
.mf-home__art { flex: none; height: 125px; width: auto; margin-bottom: -34px; position: relative; z-index: 1; pointer-events: none; }
.mf-home { display: grid; gap: 20px; }
.mf-home > * { min-width: 0; }

/* ---------- what is waiting: tiles, then what ends soonest ---------- */
.mf-waiting { display: grid; gap: 20px; }
.mf-waiting--none { margin: 0; color: var(--mf-muted); }
.mf-waiting__tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.mf-waiting__tile {
	flex: 1 1 240px; max-width: 360px; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 18px 20px;
	border: 1px solid transparent; border-radius: var(--mf-radius-sm); background: var(--mf-soft); color: var(--mf-ink); overflow-wrap: anywhere;
	transition: transform .15s, box-shadow .15s;
}
.mf-waiting__tile:hover { border-color: var(--mf-magenta); color: var(--mf-ink); transform: translateY(-2px); box-shadow: var(--mf-shadow); }
.mf-waiting__icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--mf-navy); color: #fff; font-size: 1.35rem; }
.mf-waiting__tile--vouchers .mf-waiting__icon, .mf-waiting__tile--messages .mf-waiting__icon { background: var(--mf-magenta); }
.mf-waiting__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-waiting__tile b { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--mf-navy); }
.mf-waiting__tile span span { font-size: .9rem; color: var(--mf-muted); }
.mf-waiting__tile em { margin-top: 4px; font-size: .84rem; font-style: normal; }
.mf-waiting__tile.is-hot { background: #f6e6f1; }
.mf-waiting__tile.is-hot em { font-weight: 700; color: #b45309; }
/* The frame of "to use soon". */
.mf-waiting__soon { min-width: 0; padding: 20px 22px; border: 4px solid var(--mf-soft); border-radius: var(--mf-radius); }
.mf-waiting__soon h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; color: var(--mf-magenta); }
.mf-waiting__row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.mf-waiting__row + .mf-waiting__row { border-top: 1px solid var(--mf-soft); }
.mf-waiting__row:last-child { padding-bottom: 0; }
.mf-waiting__row .mf-btn { flex: none; }
/* The name of a line leads to its page (the button keeps its action). */
.mf-waiting__link { color: inherit; text-decoration: none; }
.mf-waiting__link:hover b { color: var(--mf-magenta); text-decoration: underline; }
.mf-waiting__rest { margin: 6px 0 0; font-size: .88rem; color: var(--mf-muted); }

/* ---------- the stream: chips, day headings, then one card per event on the page background ---------- */
.mf-feed { min-width: 0; margin-top: 34px; }
.mf-feed > h2 { margin: 0 0 12px 8px; font-size: 1.6rem; font-weight: 300; color: var(--mf-navy); }
.mf-feed .mf-feed__chips { margin: 0 0 4px; }
.mf-feed .mf-chip { background: var(--mf-surface); }
.mf-feed__loading { margin: 0; padding: 50px 10px; text-align: center; color: var(--mf-muted); }
.mf-feed__list > .mf-emptystate { margin: 20px 0 0; padding: 24px; border-radius: var(--mf-radius); background: var(--mf-surface); }
.mf-feed__day { margin: 30px 0 12px 8px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }

/* A card, as a post of the brand: avatar, name and when, the kind; the content; a bar of actions and comments.
   Each kind has a colour (--tone) that tints its pill and its figures. */
.mf-post {
	--tone: var(--mf-navy); --tone-soft: #e8eff6;
	margin-bottom: 16px; overflow: hidden; border: 1px solid var(--mf-line); border-radius: 20px; background: var(--mf-surface);
	box-shadow: 0 1px 2px rgba(0, 32, 64, .04), 0 8px 24px rgba(120, 110, 90, .07);
}
.mf-post--magenta { --tone: var(--mf-magenta); --tone-soft: #f8e9f3; }
.mf-post--cyan { --tone: #007f9e; --tone-soft: #e3f5fa; }
.mf-post--green { --tone: #3d7a00; --tone-soft: var(--mf-green-soft); }
.mf-post.is-unread { border-color: #e7bfd9; }

.mf-post__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
/* The logo of the brand on a tile wide enough for wide logos. */
.mf-post__avatar {
	flex: none; display: grid; place-items: center; width: 72px; height: 48px; overflow: hidden;
	border: 1px solid var(--mf-line); border-radius: 12px; background: #fff; font-size: .9rem; font-weight: 700; color: var(--mf-navy);
}
.mf-post__avatar img { display: block; width: 100%; height: 100%; padding: 5px 7px; object-fit: contain; }
.mf-post__avatar.is-letters { border-color: transparent; background: var(--mf-navy); color: #fff; }
.mf-post.is-unread .mf-post__avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mf-magenta); }
.mf-post__avatar.is-letters { width: 48px; }
.mf-post__who { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.mf-post__who b { overflow: hidden; font-weight: 700; color: var(--mf-navy); text-overflow: ellipsis; white-space: nowrap; }
.mf-post__who span { overflow: hidden; font-size: .85rem; color: var(--mf-muted); text-overflow: ellipsis; white-space: nowrap; }
.mf-post__new { flex: none; padding: 3px 10px; border-radius: 20px; background: var(--mf-magenta); color: #fff; font-size: .72rem; font-weight: 700; }
.mf-post__kind {
	flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px;
	background: var(--tone-soft); color: var(--tone); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.mf-post__kind i { font-size: .8em; }

.mf-post__body { display: grid; gap: 14px; min-width: 0; padding: 14px 20px 18px; }
.mf-post__text { margin: 0; color: var(--mf-ink); white-space: pre-line; overflow-wrap: anywhere; }
.mf-post__title { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--mf-navy); overflow-wrap: anywhere; }

/* Figures: the amount of a purchase, what it earned, the balance after it. */
.mf-post__stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.mf-post__stat { display: grid; align-content: center; min-width: 88px; padding: 10px 16px; border-radius: 14px; background: var(--mf-soft); }
.mf-post__stat strong { font-size: 1.35rem; font-weight: 600; line-height: 1.2; color: var(--mf-navy); white-space: nowrap; }
.mf-post__stat span { font-size: .78rem; color: var(--mf-muted); }
.mf-post__stat--big { min-width: 0; padding: 0 18px 0 0; background: none; }
.mf-post__stat--big strong { font-size: 2.1rem; font-weight: 300; }
.mf-post__stat--accent { background: #fff8c4; }
.mf-post__stat--accent strong { color: #6b5800; }
.mf-post__stat--minus { background: var(--mf-red-soft); }
.mf-post__stat--minus strong { color: var(--mf-red); }

/* The first articles of a purchase. */
.mf-post__items { display: grid; gap: 6px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--mf-soft); list-style: none; font-size: .92rem; }
.mf-post__items li { display: flex; gap: 10px; min-width: 0; }
.mf-post__items li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mf-post__qty { flex: none; min-width: 2.6em; color: var(--mf-muted); font-variant-numeric: tabular-nums; text-align: right; }
.mf-post__more button { padding: 0 0 0 calc(2.6em + 10px); border: 0; background: none; font: inherit; font-weight: 600; color: var(--tone); cursor: pointer; }
.mf-post__more button:hover { text-decoration: underline; }

/* A preview that opens what it shows: the first screen of an email, the cover of a folder, a message. */
.mf-post__preview, .mf-post__ticket {
	display: flex; align-items: center; gap: 20px; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 16px;
	background: var(--mf-soft); font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.mf-post__preview:hover, .mf-post__ticket:hover { border-color: var(--tone); background: #fff; color: inherit; }
.mf-post__thumb { flex: none; display: block; width: 150px; height: 190px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 32, 64, .12); }
.mf-post__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mf-post__preview--folder .mf-post__thumb { width: 135px; }
.mf-post__words { flex: 1; min-width: 0; display: grid; gap: 6px; padding: 4px 6px; }
.mf-post__words b { font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--mf-navy); overflow-wrap: anywhere; }
.mf-post__words > span { font-size: .88rem; color: var(--mf-muted); }
.mf-post__words em { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-style: normal; font-weight: 600; color: var(--tone); }
.mf-post__words em i { font-size: .8em; transition: transform .15s; }
.mf-post__preview:hover em i, .mf-post__ticket:hover em i { transform: translateX(3px); }
.mf-post__preview--message { padding: 16px 18px; }

/* A voucher: its value on the stub of a ticket. */
.mf-post__ticket { align-items: stretch; padding: 0; overflow: hidden; }
.mf-post__ticketvalue {
	position: relative; flex: none; display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 150px; padding: 18px 24px;
	background: linear-gradient(135deg, var(--mf-magenta), #d4479f); color: #fff; text-align: center;
}
/* The notches of the stub. */
.mf-post__ticketvalue::before, .mf-post__ticketvalue::after { content: ""; position: absolute; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--mf-surface); }
.mf-post__ticketvalue::before { top: -9px; }
.mf-post__ticketvalue::after { bottom: -9px; }
.mf-post__ticketvalue strong { font-size: 1.9rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.mf-post__ticketvalue small { font-size: .78rem; opacity: .92; }
.mf-post__ticket .mf-post__words { align-content: center; padding: 14px 18px; }
.mf-post__thumb--visual { width: 120px; height: auto; margin: 10px; box-shadow: none; }
.mf-post__thumb--visual img { object-fit: contain; }
.mf-post.is-off .mf-post__ticketvalue { background: #a7a39b; }
.mf-post.is-off .mf-post__avatar img, .mf-post.is-off .mf-post__thumb img { filter: grayscale(100%); opacity: .6; }

/* An SMS: its text in a bubble. */
.mf-post__bubble {
	justify-self: start; max-width: 620px; margin: 0; padding: 14px 18px; border-radius: 18px 18px 18px 4px;
	background: var(--tone-soft); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
}

/* The bar at the bottom: the actions on the left, the comments on the right. */
.mf-post__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--mf-soft); }
.mf-post__action, .mf-post__bar .mf-feed__comments {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px;
	background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--mf-navy); cursor: pointer;
}
.mf-post__action:hover, .mf-post__bar .mf-feed__comments:hover { background: var(--mf-soft); color: var(--tone); }
.mf-post__bar .mf-feed__comments { font-weight: 500; color: var(--mf-muted); }
/* After the actions, the comments go to the right. */
.mf-post__action ~ .mf-feed__comments { margin-left: auto; }
.mf-post__bar .mf-feed__count { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--mf-soft); font-size: .8rem; font-weight: 700; text-align: center; color: var(--mf-navy); }
.mf-post__bar .mf-feed__comments:hover .mf-feed__count { background: #fff; }

/* What matters less (a voucher used, a form, a reading of the eID card, a document) and several events
   folded together: a compact card of one line. */
.mf-feed__list > .mf-feed__row {
	margin-bottom: 12px; padding: 4px 12px; border: 1px solid var(--mf-line); border-radius: 16px; background: var(--mf-surface);
	box-shadow: 0 1px 2px rgba(0, 32, 64, .04), 0 8px 24px rgba(120, 110, 90, .07);
}
/* Its kind as the pill of a card. */
.mf-feed__list > .mf-feed__row > .mf-feed__line .mf-feed__kind { padding: 5px 12px; border-radius: 20px; font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.mf-feed__row { border-bottom: 1px solid var(--mf-soft); }
.mf-feed__line { display: flex; align-items: center; gap: 6px; }
.mf-feed__head {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 6px;
	border: 0; border-radius: var(--mf-radius-xs); background: none; font: inherit; color: inherit; text-align: left;
}
button.mf-feed__head, a.mf-feed__head { cursor: pointer; }
button.mf-feed__head:hover, a.mf-feed__head:hover { background: #f9eff6; color: inherit; }
.mf-feed__logo {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden;
	border: 1px solid var(--mf-line); border-radius: 50%; background: #fff; font-size: .8rem; font-weight: 700; color: var(--mf-navy);
}
.mf-feed__logo img { display: block; width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.mf-feed__logo.is-count { border-color: transparent; background: #77767d; color: #fff; }
.mf-feed__logo.is-letters { border-color: transparent; background: var(--mf-navy); color: #fff; }
.mf-feed__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mf-feed__text > b { display: block; font-weight: 600; line-height: 1.35; color: var(--mf-navy); white-space: pre-line; }
.mf-feed__text > b b { font-weight: 800; }
.mf-feed__text small { display: block; margin-top: 2px; font-size: .84rem; color: var(--mf-muted); }
.mf-feed__row.is-off .mf-feed__text > b { color: var(--mf-muted); }
.mf-feed__row.is-off .mf-feed__logo img { filter: grayscale(100%); opacity: .6; }
.mf-feed__amount { flex: none; font-weight: 700; white-space: nowrap; }
.mf-feed__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mf-magenta); }
.mf-feed__row:not(.is-unread) .mf-feed__dot { display: none; }
.mf-feed__kind {
	flex: none; padding: 3px 9px; border-radius: var(--mf-radius-xs); background: var(--mf-soft); color: var(--mf-navy);
	font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.mf-feed__kind--m { background: #f6e6f1; color: var(--mf-magenta); }
.mf-feed__chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: .85rem; color: var(--mf-navy); transition: transform .15s; }
[aria-expanded="true"] > .mf-feed__chev { transform: rotate(180deg); }
.mf-feed__comments {
	flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px;
	border: 1px solid var(--mf-line); border-radius: 15px; background: none; font-size: .82rem; color: var(--mf-muted); cursor: pointer;
}
.mf-feed__comments:hover { border-color: var(--mf-magenta); color: var(--mf-magenta); }

/* What a row unfolds, aligned with its text. */
.mf-feed__panel { margin: 0 6px 12px 64px; }
/* Several events folded into one row: each is a smaller row. */
.mf-feed__fold { padding: 2px 14px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
.mf-feed__row--sub { border-bottom: 1px solid var(--mf-line); }
.mf-feed__row--sub:last-child { border-bottom: 0; }
.mf-feed__row--sub .mf-feed__head { gap: 10px; padding: 7px 0; }
.mf-feed__row--sub button.mf-feed__head:hover, .mf-feed__row--sub a.mf-feed__head:hover { background: none; }
.mf-feed__row--sub .mf-feed__head:hover .mf-feed__text > b { color: var(--mf-magenta); }
.mf-feed__row--sub .mf-feed__logo { width: 30px; height: 30px; font-size: .65rem; }
.mf-feed__row--sub .mf-feed__logo img { padding: 4px; }
.mf-feed__row--sub .mf-feed__text > b { font-weight: 400; color: var(--mf-ink); }
.mf-feed__row--sub .mf-feed__text > b b { font-weight: 700; color: var(--mf-navy); }
.mf-feed__row--sub .mf-feed__panel { margin-left: 40px; }
.mf-feed__rest { display: block; width: 100%; padding: 9px 0; border: 0; background: none; font: inherit; font-size: .88rem; color: var(--mf-muted); text-align: left; cursor: pointer; }
.mf-feed__rest:hover { color: var(--mf-magenta); }

.mf-feed__points { display: flex; align-items: center; gap: 10px; }
.mf-feed__points .mf-points { min-width: 4rem; padding: .5rem .7rem; }
/* The balance after the purchase: the plain figure. */
.mf-feed__points .mf-points--balance { background: none; }
.mf-feed__lines { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.mf-feed__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.mf-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.25rem; padding: .3rem 1.4rem;
	border: 1px solid var(--mf-magenta); border-radius: 50px; background: none; color: var(--mf-magenta); cursor: pointer;
	transition: background .15s, color .15s;
}
.mf-pill:hover { background: var(--mf-magenta); color: #fff; }
.mf-pill--navy { border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-pill--navy:hover { background: var(--mf-navy); color: #fff; }
.mf-feed__video { max-width: 640px; }

/* "More loads as you scroll down", and the button that does the same from the keyboard: it only shows when it has the focus. */
.mf-loadsmore { margin: 16px 0 0; text-align: center; font-size: .84rem; color: var(--mf-muted); }
.mf-loadsmore::before { content: "\00b7\00a0\00a0\00b7\00a0\00a0\00b7"; display: block; font-size: 1.2rem; line-height: 1; color: var(--mf-line-strong); }
.mf-loadsmore__btn { display: flex; margin: 10px auto 0; }
.mf-loadsmore__btn:not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; min-height: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 991px) {
	.mf-home__art { height: 90px; margin-bottom: -24px; }
}
@media (max-width: 700px) {
	.mf-home__head { padding-left: 0; }
	.mf-home__head h1 { margin-bottom: 8px; }
	.mf-home__art { height: 64px; margin-bottom: -18px; }

	/* Tiles in two columns. */
	.mf-waiting__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mf-waiting__tile { max-width: none; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
	.mf-waiting__icon { width: 40px; height: 40px; font-size: 1rem; }
	.mf-waiting__soon { padding: 14px 12px; border-width: 3px; border-radius: 18px; }
	/* The action goes under the text. */
	.mf-waiting__row { flex-wrap: wrap; gap: 8px 12px; }
	.mf-waiting__row .mf-feed__text { flex-basis: calc(100% - 60px); }
	.mf-waiting__row .mf-btn { margin-left: 56px; }

	/* A card: tighter; an email preview over its subject; the actions share the bar. */
	.mf-feed { margin-top: 26px; }
	.mf-feed > h2 { margin-left: 4px; font-size: 1.35rem; }
	.mf-feed__day { margin: 24px 0 10px 4px; }
	.mf-post { margin-bottom: 12px; border-radius: 16px; }
	.mf-post__head { gap: 10px; padding: 12px 14px 0; }
	.mf-post__avatar { width: 58px; height: 40px; }
	.mf-post__avatar.is-letters { width: 40px; }
	.mf-post__kind span { display: none; }
	.mf-post__kind { padding: 7px 9px; }
	.mf-post__body { gap: 12px; padding: 12px 14px 14px; }
	.mf-post__stat { min-width: 0; padding: 8px 12px; }
	.mf-post__stat strong { font-size: 1.15rem; }
	.mf-post__stat--big { width: 100%; padding: 0; }
	.mf-post__stat--big strong { font-size: 1.9rem; }
	.mf-post__preview--email { flex-direction: column; align-items: stretch; gap: 10px; }
	.mf-post__preview--email .mf-post__thumb { width: 100%; height: 200px; }
	.mf-post__preview { gap: 14px; padding: 10px; }
	.mf-post__preview--folder .mf-post__thumb { width: 96px; height: 130px; }
	.mf-post__words b { font-size: 1rem; }
	.mf-post__ticketvalue { min-width: 112px; padding: 14px 14px; }
	.mf-post__ticketvalue strong { font-size: 1.5rem; }
	.mf-post__thumb--visual { display: none; }
	.mf-post__bar { padding: 4px 6px; }
	.mf-post__action { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }

	/* The chips scroll sideways on one line. */
	.mf-feed .mf-feed__chips { flex-wrap: nowrap; margin-right: -12px; padding: 2px 12px 6px 2px; overflow-x: auto; scrollbar-width: none; }
	.mf-feed .mf-feed__chips::-webkit-scrollbar { display: none; }
	.mf-feed__chips .mf-chip { flex: none; white-space: nowrap; }

	/* A row keeps logo, text and chevron; the kind moves under the title. */
	.mf-feed__head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "logo text amount chev" "logo kind dot chev"; gap: 4px 10px; padding: 10px 2px; }
	.mf-feed__logo { grid-area: logo; align-self: start; width: 40px; height: 40px; }
	.mf-feed__text { grid-area: text; }
	.mf-feed__amount { grid-area: amount; align-self: start; }
	.mf-feed__kind { grid-area: kind; justify-self: start; }
	.mf-feed__dot { grid-area: dot; align-self: center; justify-self: end; }
	.mf-feed__chev { grid-area: chev; align-self: center; width: 22px; }
	.mf-feed__row--sub .mf-feed__head { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
	.mf-feed__panel { margin: 0 2px 12px; }
	.mf-feed__row--sub .mf-feed__panel { margin-left: 0; }
	.mf-feed__fold { padding: 2px 10px; }
	.mf-feed__comments { padding: 3px 8px; }
	.mf-feed__links, .mf-feed__links .mf-pill { width: 100%; }
}

/* ==================== end of the home page ==================== */

/* ---------- comments bar (legacy .comments) ---------- */
.mf-comments {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	padding: 12px 2rem; border: 0; border-top: 1px solid var(--mf-line); background: none; color: var(--mf-ink); cursor: pointer; text-align: left;
}
.mf-comments:hover { background: var(--mf-soft); }
.mf-comments__add { font-size: 90%; display: inline-flex; align-items: center; gap: 6px; }
.mf-comments__count { flex: none; font-weight: 700; text-align: right; white-space: nowrap; }

/* ---------- comments thread (legacy .modcomments) ---------- */
.mf-modal--comments { width: min(700px, calc(100vw - 32px)); height: 75vh; }
.mf-modal--comments .mf-modal__body { flex: 1; padding-top: 6px; }
.mf-thread__row { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 16px; padding: 14px 10px; border-bottom: 1px solid var(--mf-line); }
.mf-thread__row:last-child, .mf-thread__row:has(+ .is-moderator) { border-bottom: 0; }
.mf-thread__row.is-moderator { background: #f5f2ea; border-radius: 10px; border-bottom: 0; }
.mf-thread .mf-avatar, .mf-thread__form .mf-avatar { width: 45px; height: 45px; font-size: 1.1rem; }
.mf-avatar--logo { background: #fff; object-fit: contain; }
.mf-thread__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mf-thread__date { color: #9a9a9a; }
.mf-thread__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.mf-thread__actions { display: flex; gap: 16px; margin-top: 6px; font-size: .88rem; }
.mf-thread__edit { display: grid; gap: 8px; margin-top: 6px; }
.mf-thread__form { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 16px; padding: 16px 28px 22px; border-top: 1px solid var(--mf-line); }
.mf-thread__write { display: grid; gap: 10px; justify-items: start; }

/* ---------- email dialog ---------- */
.mf-modal--email .mf-modal__body { padding-top: 10px; }
.mf-emailframe { display: block; width: 100%; height: 70vh; border: 0; }

@media (max-width: 700px) {
	.mf-comments { padding: 12px 16px; }
	.mf-modal--comments { height: 85vh; }
	.mf-thread__form { padding: 14px 16px 18px; gap: 10px; }
	.mf-thread__row { gap: 10px; padding: 12px 4px; }
}
/* MyFreedelity app - styles of the "places" pages: store map (ui/storemap.js, also
   used by the public site), store page, legal texts (ui/legaltext.js).
   Tokens and components: app.css. */

/* ---------- store map ---------- */

/* The legacy store map takes the whole width: no left menu on large screens
   (on small ones the menu is the drawer behind the burger, and stays). */
@media (min-width: 992px) {
	.mf-layout:has(> .mf-page-myfreedelity_storemap) { grid-template-columns: minmax(0, 1fr); padding-top: 14px; padding-bottom: 14px; }
	.mf-layout:has(> .mf-page-myfreedelity_storemap) > .mf-side { display: none; }
}

.mf-storemap {
	--mf-storemap-h: max(480px, calc(100vh - var(--mf-top) - 28px));
	display: grid; grid-template-columns: minmax(320px, 600px) minmax(0, 1fr);
	height: var(--mf-storemap-h);
	background: #f7f7f7; border-radius: var(--mf-radius); overflow: hidden; box-shadow: var(--mf-shadow);
}
.mf-storemap__panel { display: flex; flex-direction: column; min-height: 0; box-shadow: 1px 1px 10px -2px #ccc; z-index: 1; }
.mf-storemap__form { display: grid; gap: 14px; padding: 28px; background: var(--mf-magenta); }
.mf-storemap__searchrow { display: flex; align-items: center; gap: 18px; }
.mf-storemap__search { flex: 1; min-width: 0; }
.mf-storemap__locate { flex: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.mf-storemap__locate img { display: block; width: 32px; height: 32px; margin: auto; }
.mf-storemap__results { position: relative; flex: 1; min-height: 0; overflow-y: auto; color: var(--mf-navy); }
.mf-storemap__map { min-height: 300px; background: #e9e9e9 url("/images/theme/front/snazzymaps.jpg") no-repeat center; }

.mf-storemap__row { display: flex; align-items: stretch; min-height: 150px; border-bottom: 1px solid #aaa; }
.mf-storemap__row:hover, .mf-storemap__row.is-selected { background: #efe6ed; }
.mf-storemap__open {
	flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 0;
	border: 0; background: none; padding: 0; text-align: left; color: var(--mf-navy); cursor: pointer;
}
.mf-storemap__open:hover { color: var(--mf-navy); }
.mf-storemap__open:focus-visible { outline-offset: -3px; }
.mf-storemap__num { flex: none; width: 80px; display: grid; place-items: center; }
.mf-storemap__num span {
	width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center;
	background: var(--mf-navy); color: #fff; font-weight: 700;
}
.mf-storemap__row:hover .mf-storemap__num span, .mf-storemap__row.is-selected .mf-storemap__num span { background: var(--mf-magenta); }
.mf-storemap__store { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 14px 14px 14px 0; }
.mf-storemap__name, .mf-storemap__address {
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.mf-storemap__name { font-size: 1.3rem; line-height: 1.2; font-weight: 700; margin-bottom: 3px; }
.mf-storemap__logo { position: relative; flex: none; width: 150px; background: #fff; display: grid; place-items: center; order: 3; }
.mf-storemap__logo img { display: block; width: 120px; height: 120px; object-fit: contain; }
.mf-storemap__mine { position: absolute; top: 8px; right: 8px; color: var(--mf-magenta); font-size: .95rem; }
/* Distance and phone sit between the address and the logo, as in the legacy row;
   they are outside the row's link (a phone link cannot be nested in it). */
.mf-storemap__row { position: relative; }
.mf-storemap__side {
	display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
	position: absolute; top: 0; bottom: 0; right: 150px; width: 100px; padding: 14px 14px 14px 0; pointer-events: none;
}
.mf-storemap__store { padding-right: 104px; }
.mf-storemap__distance { font-size: .92rem; }
.mf-storemap__phone { pointer-events: auto; font-size: 1.55rem; color: #ccc; line-height: 1; padding: 4px; }
.mf-storemap__phone:hover { color: var(--mf-magenta); }
.mf-storemap__empty { margin: 0; padding: 40px 28px; text-align: center; }

/* Bubble of a marker (inside Google's info window). */
.mf-storemap__bubble { display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%; min-height: 80px; font-family: var(--mf-font); }
.mf-storemap__bubbletext {
	flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
	color: var(--mf-magenta); font-size: 14px; line-height: 1.4;
}
.mf-storemap__bubbletext strong { font-size: 16px; }
.mf-storemap__bubble img { flex: none; height: 80px; width: 80px; object-fit: contain; }

@media (max-width: 1200px) {
	.mf-storemap { grid-template-columns: minmax(300px, 44%) minmax(0, 1fr); }
}
@media (max-width: 850px) {
	/* Map on top, list under it: the page scrolls, not the list. */
	.mf-storemap { display: flex; flex-direction: column-reverse; height: auto; }
	.mf-storemap__map { height: 300px; flex: none; }
	.mf-storemap__results { overflow: visible; min-height: 200px; }
	.mf-storemap__row { min-height: 100px; }
	.mf-storemap__name { font-size: 1.05rem; }
	.mf-storemap__address, .mf-storemap__store > span, .mf-storemap__distance { font-size: .82rem; }
	.mf-storemap__logo { width: 100px; }
	.mf-storemap__logo img { width: 84px; height: 84px; }
	.mf-storemap__side { right: 100px; width: 80px; }
	.mf-storemap__store { padding-right: 84px; }
	.mf-storemap__num { width: 60px; }
}
@media (max-width: 510px) {
	/* Phones: the list only, as the legacy page. */
	.mf-storemap__map, .mf-storemap__num, .mf-storemap__locate { display: none; }
	.mf-storemap__form { padding: 20px 16px; }
	.mf-storemap__store { padding-left: 16px; }
	.mf-storemap__logo { width: 80px; }
	.mf-storemap__logo img { width: 68px; height: 68px; }
	.mf-storemap__side { right: 80px; width: 72px; padding-right: 10px; }
	.mf-storemap__store { padding-right: 74px; }
}

/* ---------- store page ---------- */

.mf-shop { padding: 0; overflow: clip; max-width: 980px; }
.mf-shop__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 28px 0 56px; min-height: 150px; }
.mf-shop__title { padding-top: 6px; min-width: 0; }
.mf-shop__back { display: inline-block; font-size: .8rem; color: var(--mf-magenta); margin-bottom: 34px; }
.mf-shop__title h1 { color: var(--mf-navy); font-size: 1.9rem; font-weight: 700; margin: 0; }
.mf-shop__tagline { color: #a0afc1; font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 2px 0 0; }
.mf-shop__logo { flex: none; width: 145px; height: auto; margin-top: 10px; }
.mf-shop__descr { padding: 28px 56px 36px; }
.mf-shop__descr h3 { color: var(--mf-magenta); }
.mf-shop__descr p { margin: 0; overflow-wrap: anywhere; }
.mf-card > .mf-shop__back { margin: 0; }

.mf-shop__body { background: #f7f7f7; color: var(--mf-navy); }
.mf-shop__nav {
	position: sticky; top: var(--mf-top); z-index: 5;
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; margin-bottom: 26px;
}
.mf-shop__nav button {
	border: 0; background: var(--mf-surface); color: var(--mf-navy); font-weight: 700; cursor: pointer;
	padding: 14px 22px;
}
.mf-shop__nav button:hover, .mf-shop__nav button.is-active { color: var(--mf-magenta); }
.mf-shop__section { scroll-margin-top: calc(var(--mf-top) + 60px); }

.mf-shop__infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 0 28px 34px 56px; }
.mf-shop__infos > div { min-width: 0; }
.mf-shop__contact { line-height: 2; overflow-wrap: anywhere; }
.mf-shop__contact a { color: var(--mf-magenta); }
.mf-shop__contact i { width: 1.6em; }
.mf-shop__hours { font-size: 1.05rem; line-height: 1.6; }
.mf-shop__days { list-style: none; margin: 0; padding: 0; color: var(--mf-magenta); }
.mf-shop__days li.is-today { font-weight: 700; }
.mf-shop__days li.is-closed { color: #aaa; }
.mf-shop__day { display: inline-block; width: 50px; }

.mf-shop__rewards {
	display: grid; grid-template-columns: 1fr 3fr; gap: 28px; align-items: stretch;
	background: var(--mf-magenta); color: #fff; text-align: center; padding: 40px 56px;
}
.mf-shop__rewardlist { display: grid; gap: 28px; }
.mf-shop__voucher { display: flex; align-items: center; border: 1px dotted #fff; padding: 14px; }
.mf-shop__voucher > div { width: 100%; display: grid; gap: 4px; }
.mf-shop__voucher strong { font-size: 1.35rem; }

.mf-shop__map { height: 315px; background: #e9e9e9; }
.mf-shop__mapbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-height: 42px; }
.mf-shop__modes { display: flex; }
.mf-shop__mode, .mf-shop__mapbtn { border: 0; background: var(--mf-navy); color: #fff; cursor: pointer; }
.mf-shop__mode { min-width: 45px; padding: 9px; font-size: 1.25rem; }
.mf-shop__mode:hover, .mf-shop__mode.is-active { background: var(--mf-surface); color: var(--mf-navy); }
.mf-shop__mapbtn { margin-left: auto; padding: 9px 44px; }

.mf-shop__folders { padding: 50px 56px 10px; }
.mf-shop__folders h4 { font-size: 1.5rem; }
.mf-shop__foldergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mf-shop__folder {
	display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: left;
	border: 0; background: var(--mf-surface); color: var(--mf-navy); padding: 14px; cursor: pointer;
}
.mf-shop__folder img { display: block; max-width: 100%; max-height: 340px; margin: 0 auto; box-shadow: 0 0 10px rgba(200, 200, 200, .5); }
.mf-shop__foldervalid { color: #999; }
.mf-shop__folderpages { display: grid; gap: 12px; justify-items: center; }
.mf-shop__folderpages img { display: block; max-width: 100%; }

.mf-shop__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 56px; }
.mf-shop__photos img { display: block; width: 100%; }

.mf-shop__group { margin: 40px 0 0; background: var(--mf-navy); color: #fff; text-align: center; font-weight: 700; padding: 30px 40px; }
.mf-shop__group a { color: #fff; text-decoration: underline; }
.mf-shop__group a:hover { color: var(--mf-magenta); }
.mf-shop__join { margin: 0; padding: 24px; text-align: center; background: var(--mf-surface); }

@media (max-width: 767px) {
	.mf-shop__head { padding: 14px 16px 0 20px; min-height: 0; }
	.mf-shop__back { margin-bottom: 16px; }
	.mf-shop__title h1 { font-size: 1.45rem; }
	.mf-shop__tagline { font-size: 1.1rem; }
	.mf-shop__logo { width: 96px; }
	.mf-shop__descr { padding: 20px 20px 26px; }
	.mf-shop__infos { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 20px 26px; }
	.mf-shop__rewards { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
	.mf-shop__rewardlist { gap: 16px; }
	.mf-shop__folders { padding: 30px 20px 10px; }
	.mf-shop__foldergrid { grid-template-columns: 1fr 1fr; }
	.mf-shop__photos { padding: 30px 20px; }
	.mf-shop__group { padding: 22px 20px; }
}
@media (max-width: 510px) {
	/* The section menu is a column on phones and no longer follows the page. */
	.mf-shop__nav { position: static; flex-direction: column; gap: 2px; }
	.mf-shop__nav button { text-align: left; padding: 16px 20px; }
	.mf-shop__mapbar { flex-wrap: wrap; justify-content: center; }
	.mf-shop__mode { min-width: 60px; padding: 14px; font-size: 1.5rem; }
	.mf-shop__mapbtn { margin: 0; width: 100%; padding: 14px; }
	.mf-shop__foldergrid, .mf-shop__photos { grid-template-columns: 1fr; }
}

/* ---------- connected store map and store page ----------
   The portal's store map (ui/storemap.js with its `rich` option, .mf-smap) and the
   portal's store page (views/portal/store.js, .mf-place). The public map and the
   public store page keep the blocks above (.mf-storemap, .mf-shop). */

/* "Ouvert · ferme à 19:00" (card of the map, head of the store page) */
.mf-openstate strong { font-weight: 700; }
.mf-openstate.is-open strong { color: #2f7d32; }
.mf-openstate.is-closed strong { color: var(--mf-red); }

/* ----- the map ----- */
.mf-smap {
	--mf-smap-peek: 138px;
	display: flex; flex-direction: column;
	height: max(520px, calc(100vh - var(--mf-top) - 28px));
	background: var(--mf-surface); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); overflow: hidden;
}
.mf-smap__tools { display: grid; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--mf-line); }
.mf-smap__searchrow { display: flex; gap: 10px; }
.mf-smap__search {
	flex: 1; min-width: 0; border-radius: 22px; padding-left: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5 15 15' stroke='%23666' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 16px center;
}
.mf-smap__locate { flex: none; white-space: nowrap; }
.mf-smap__brands { margin: 0; }
.mf-smap__brands .mf-chip i { font-size: .85em; }
.mf-smap__others i { color: var(--mf-muted); }
/* The country: a chip that holds a list, before the brand chips. The list lies over the
   chip, transparent, so the whole chip opens it and the chip is as wide as the chosen name. */
.mf-smap__filters { display: flex; align-items: flex-start; gap: 8px; }
.mf-smap__filters .mf-smap__brands { flex: 1; min-width: 0; }
.mf-smap__country { position: relative; flex: none; color: var(--mf-navy); font-weight: 600; white-space: nowrap; }
.mf-smap__country:focus-within { border-color: var(--mf-navy); box-shadow: 0 0 0 2px rgba(0, 64, 113, .2); }
.mf-smap__country .fa-chevron-down { font-size: .75em; color: var(--mf-muted); }
.mf-smap__countrypick { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; font: inherit; cursor: pointer; }

.mf-smap__body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); }
.mf-smap__panel { display: flex; flex-direction: column; min-height: 0; background: var(--mf-surface); border-right: 1px solid var(--mf-line); }
.mf-smap__head { padding: 12px 22px 8px; }
.mf-smap__handle { display: none; }
.mf-smap__count { margin: 0; font-size: .88rem; color: var(--mf-muted); }
.mf-smap__results { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 14px; }
.mf-smap__note { margin: 0 8px 8px; padding: 10px 14px; border-radius: var(--mf-radius-sm); background: #eef3f8; color: var(--mf-navy); font-size: .88rem; }
.mf-smap__map { min-height: 0; background: #e9e9e9 url("/images/theme/front/snazzymaps.jpg") no-repeat center; }

.mf-smap__row {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px;
	border: 0; border-bottom: 1px solid var(--mf-soft); border-radius: 10px; background: none;
	text-align: left; color: var(--mf-ink); cursor: pointer;
}
.mf-smap__row:hover { background: var(--mf-soft); color: var(--mf-ink); }
.mf-smap__row[aria-current="true"] { background: #fbf1f8; }
.mf-smap__row:focus-visible { outline-offset: -2px; }
.mf-smap__logo {
	flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center; background: #fff; border: 1px solid var(--mf-line);
}
.mf-smap__logo img { display: block; max-width: 30px; max-height: 30px; object-fit: contain; }
.mf-smap__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mf-smap__name {
	color: var(--mf-navy); font-size: .95rem; line-height: 1.25;
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.mf-smap__star { color: #d99a00; margin-right: 5px; font-size: .85em; }
.mf-smap__addr { font-size: .84rem; color: var(--mf-muted); }
/* "Ouvert · ferme à 19:00" under the address of every row. */
.mf-smap__hours { font-size: .8rem; color: var(--mf-muted); }
.mf-smap__side { flex: none; display: grid; justify-items: end; gap: 2px; white-space: nowrap; font-size: .84rem; font-weight: 700; color: var(--mf-navy); }
.mf-smap__mine { color: var(--mf-magenta); font-size: .72rem; }
.mf-smap__more { margin: 12px 0 2px; text-align: center; }
.mf-smap__empty { display: grid; gap: 12px; justify-items: center; margin: 0; padding: 30px 14px; text-align: center; color: var(--mf-muted); }
.mf-smap__empty p { margin: 0; }

/* The card of the selected store, on the map. */
.mf-smap__card {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 320px; max-height: calc(100% - 24px); overflow-y: auto;
	padding: 16px 18px 18px; border-radius: 16px; background: var(--mf-surface); box-shadow: var(--mf-shadow-lg);
	font-size: .9rem; color: var(--mf-ink);
}
.mf-smap__cardclose {
	position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 50%; background: var(--mf-soft); color: var(--mf-navy); cursor: pointer;
}
.mf-smap__cardclose:hover { background: var(--mf-line); }
.mf-smap__cardhead { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.mf-smap__cardname { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--mf-navy); }
.mf-smap__cardname:focus { outline: 0; }
.mf-smap__cardstate { margin: 3px 0 0; }
.mf-smap__cardaddr { margin: 10px 0 12px; color: #555; }
.mf-smap__acts { display: flex; gap: 8px; }
.mf-smap__act {
	flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 10px 4px;
	border: 1px solid var(--mf-line); border-radius: 12px; background: var(--mf-surface);
	color: var(--mf-navy); font-size: .8rem; font-weight: 600; text-align: center; cursor: pointer;
}
.mf-smap__act i { font-size: 1.1rem; }
.mf-smap__act:hover { border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-smap__act[aria-pressed="true"] { border-color: #d99a00; }
.mf-smap__act[aria-pressed="true"] i { color: #d99a00; }
.mf-smap__cardnote { margin: 6px 0 12px; font-size: .76rem; color: var(--mf-muted); }
.mf-smap__cardline { margin: 0 0 6px; }
.mf-smap__cardline i { color: var(--mf-magenta); }
.mf-smap__full { display: flex; width: 100%; margin-top: 12px; }

/* The list of the brands that are not chips (a dialog). */
.mf-smap__picker { width: min(520px, calc(100vw - 32px)); }
.mf-smap__picker .mf-modal__body { display: grid; gap: 12px; }
.mf-smap__brandlist { display: grid; gap: 2px; max-height: min(52vh, 440px); overflow-y: auto; }
.mf-smap__brand {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px;
	border: 0; border-radius: 10px; background: none; text-align: left; color: var(--mf-ink); cursor: pointer;
}
.mf-smap__brand:hover { background: var(--mf-soft); }
.mf-smap__brand[aria-pressed="true"] { background: #fbf1f8; }
.mf-smap__brandlogo { flex: none; width: 46px; height: 28px; display: grid; place-items: center; }
.mf-smap__brandlogo img { display: block; max-width: 46px; max-height: 28px; object-fit: contain; }
.mf-smap__brandname { flex: 1; min-width: 0; font-weight: 600; color: var(--mf-navy); }
.mf-smap__brandcount { flex: none; font-size: .82rem; color: var(--mf-muted); white-space: nowrap; }

@media (max-width: 767px) {
	/* Phones: the map takes the screen under the header; the list is a drawer over its
	   bottom, the card a sheet. The map ends where the closed drawer starts, so Google's
	   own marks stay in sight. */
	.mf-layout:has(> .mf-page-myfreedelity_storemap) { padding: 0; }
	.mf-smap { height: calc(100vh - var(--mf-top)); height: calc(100dvh - var(--mf-top)); border-radius: 0; box-shadow: none; }
	.mf-smap__tools { gap: 8px; padding: 10px 12px 8px; }
	.mf-smap__brands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
	.mf-smap__brands::-webkit-scrollbar { display: none; }
	.mf-smap__brands .mf-chip { flex: none; white-space: nowrap; }
	/* The country chip scrolls with the brand chips, first of the row. */
	.mf-smap__filters { overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
	.mf-smap__filters::-webkit-scrollbar { display: none; }
	.mf-smap__filters .mf-smap__brands { flex: none; overflow: visible; margin: 0; padding: 0; }
	.mf-smap__body { display: block; }
	.mf-smap__map { position: absolute; inset: 0 0 var(--mf-smap-peek) 0; }
	.mf-smap__panel {
		position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--mf-smap-peek);
		border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(0, 32, 64, .16);
		transition: height .25s;
	}
	.mf-smap.is-list-open .mf-smap__panel { height: 78%; }
	.mf-smap__head { padding: 0 16px 6px; cursor: pointer; }
	.mf-smap__handle { display: block; width: 100%; padding: 9px 0 7px; border: 0; background: none; cursor: pointer; }
	.mf-smap__grip { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: #c9c9c9; }
	.mf-smap__results { padding: 0 8px 10px; }
	/* Rows keep the name, the town and the distance. */
	.mf-smap__street { display: none; }
	.mf-smap__row { padding: 8px; }
	.mf-smap__card {
		top: auto; left: 0; right: 0; bottom: 0; z-index: 4; width: auto; max-height: 76%;
		border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(0, 32, 64, .2); padding-bottom: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mf-smap__panel { transition: none; }
}

/* ----- the store page ----- */
.mf-place { padding: 0; max-width: 980px; color: var(--mf-ink); }
.mf-place__head { padding: 22px 32px 6px; }
.mf-place__back { display: inline-block; margin-bottom: 16px; font-size: .86rem; color: var(--mf-magenta); }
.mf-card > .mf-place__back { margin: 0; }
.mf-place__top { display: flex; align-items: center; gap: 18px; }
.mf-place__logo { flex: none; width: 76px; height: 76px; object-fit: contain; border: 1px solid var(--mf-line); border-radius: 16px; padding: 6px; background: #fff; }
.mf-place__title { flex: 1; min-width: 0; }
.mf-place__title h1 { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--mf-navy); }
.mf-place__tagline { margin: 2px 0 0; color: var(--mf-muted); font-weight: 600; }
.mf-place__status { margin: 6px 0 0; font-size: .95rem; }
.mf-place__join { flex: none; }
.mf-place__acts { display: flex; gap: 10px; margin: 20px 0 14px; }
.mf-place__act {
	flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 12px 6px;
	border: 1px solid var(--mf-line); border-radius: 14px; background: var(--mf-surface);
	color: var(--mf-navy); font-size: .86rem; font-weight: 600; text-align: center;
}
.mf-place__act i { font-size: 1.25rem; }
.mf-place__act:hover { border-color: var(--mf-navy); color: var(--mf-navy); }

/* The menu follows the scroll, under the header of the site. */
.mf-place__nav {
	position: sticky; top: var(--mf-top); z-index: 5;
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	padding: 10px 32px; background: var(--mf-surface); border-bottom: 1px solid var(--mf-line);
}
.mf-place__nav::-webkit-scrollbar { display: none; }
.mf-place__nav .mf-chip { flex: none; white-space: nowrap; }
.mf-place__nav .mf-chip[aria-current="true"] { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }

.mf-place__section { padding: 26px 32px 8px; scroll-margin-top: calc(var(--mf-top) + 62px); }
.mf-place__section > h2 { margin: 0 0 14px; font-size: 1.25rem; font-weight: 700; color: var(--mf-navy); }
.mf-place__section h3 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-place__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.mf-place__cols--one { grid-template-columns: minmax(0, 1fr); }
.mf-place__cols > * { min-width: 0; }
.mf-place__hint { margin: 10px 0 0; font-size: .84rem; color: var(--mf-muted); }

.mf-place__days { list-style: none; margin: 0; padding: 0; }
.mf-place__days li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.mf-place__days li.is-today { font-weight: 700; color: var(--mf-magenta); }
.mf-place__days li.is-closed:not(.is-today) { color: var(--mf-muted); }
.mf-place__contact { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.mf-place__contact li { display: flex; gap: 12px; padding: 4px 0; }
.mf-place__contact i { flex: none; width: 1.2em; margin-top: .25em; text-align: center; color: var(--mf-muted); }
.mf-place__contact a { color: var(--mf-navy); text-decoration: underline; }
.mf-place__descr { margin-top: 20px; padding: 16px 20px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); overflow-wrap: anywhere; }
.mf-place__descr p { margin: 0; }

.mf-place__balance { padding: 16px 20px; border-radius: 16px; background: var(--mf-magenta); color: #fff; }
.mf-place__balancelabel { display: block; font-size: .86rem; }
.mf-place__balance strong { display: block; font-size: 1.5rem; line-height: 1.3; }
.mf-place__gauge { height: 10px; margin: 10px 0 6px; border-radius: 5px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.mf-place__gauge i { display: block; height: 100%; border-radius: 5px; background: #fff; }
.mf-place__next, .mf-place__rule { margin: 4px 0 0; font-size: .86rem; }
.mf-place__vouchers { margin: 10px 0 0; font-size: .9rem; }
.mf-place__vouchers a { color: #fff; text-decoration: underline; }
.mf-place__rulealone { margin: 0 0 10px; font-weight: 700; color: var(--mf-navy); }
.mf-place__rewards ul { list-style: none; margin: 0; padding: 0; }
.mf-place__rewards li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-place__rewards li:last-child { border-bottom: 0; }
.mf-place__rewards li strong { flex: none; min-width: 96px; color: var(--mf-navy); }
.mf-place__rewards li > span { flex: 1; min-width: 0; }
.mf-place__reached { flex: none !important; color: #2f7d32; }

.mf-place__modes { margin-bottom: 12px; }
.mf-place__modes .mf-chip i { color: var(--mf-muted); }
.mf-place__modes .mf-chip[aria-pressed="true"] i { color: inherit; }
.mf-place__go .mf-place__hint { margin: -4px 0 12px; }
.mf-place__map { height: 340px; border-radius: var(--mf-radius-sm); overflow: hidden; background: #e9e9e9; }
.mf-place__mapbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 10px; }

.mf-place__foldergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mf-place__folder {
	display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 12px;
	border: 1px solid var(--mf-line); border-radius: 14px; background: var(--mf-surface); color: var(--mf-navy); text-align: left; cursor: pointer;
}
.mf-place__folder:hover { border-color: var(--mf-navy); }
.mf-place__folder img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto; }
.mf-place__foldervalid { font-size: .84rem; color: var(--mf-muted); }
.mf-place__foldername { font-weight: 600; }

.mf-place__photogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mf-place__photo { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--mf-soft); cursor: zoom-in; aspect-ratio: 1; }
.mf-place__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.mf-place__photo:hover img { transform: scale(1.04); }
.mf-place__light { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mf-place__light img { display: block; min-width: 0; max-width: 100%; max-height: 68vh; border-radius: 8px; }
.mf-place__lightnav { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mf-line); border-radius: 50%; background: var(--mf-surface); color: var(--mf-navy); cursor: pointer; }
.mf-place__lightnav:hover { border-color: var(--mf-navy); }
.mf-place__lightcount { display: block; margin-top: 10px; text-align: center; font-size: .86rem; color: var(--mf-muted); }

.mf-place__group { margin: 30px 0 0; padding: 22px 32px; border-radius: 0 0 var(--mf-radius) var(--mf-radius); background: var(--mf-navy); color: #fff; text-align: center; font-weight: 700; }
.mf-place__group a { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
	.mf-place__head { padding: 16px 16px 2px; }
	.mf-place__top { flex-wrap: wrap; gap: 12px; }
	.mf-place__logo { width: 56px; height: 56px; border-radius: 12px; }
	.mf-place__title h1 { font-size: 1.3rem; }
	.mf-place__join { width: 100%; }
	.mf-place__acts { gap: 6px; margin: 14px 0 10px; }
	.mf-place__act { padding: 10px 2px; font-size: .76rem; }
	.mf-place__nav { padding: 8px 16px; }
	.mf-place__section { padding: 22px 16px 6px; }
	.mf-place__cols { grid-template-columns: minmax(0, 1fr); }
	.mf-place__map { height: 280px; }
	.mf-place__foldergrid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.mf-place__photogrid { grid-template-columns: 1fr 1fr; }
	.mf-place__lightnav { width: 34px; height: 34px; }
	.mf-place__group { padding: 18px 16px; border-radius: 0 0 18px 18px; }
}

/* ---------- public store directory and public store page ----------
   The directory of the public site (views/public/storemap.js): the map above with the
   `where` option of ui/storemap.js (.mf-smap--dir: the "where?" field and its proposals,
   the phone number on the rows, "List | Map" tabs on a phone). The public store page
   (views/public/store.js) uses the layout of the portal's (.mf-place), in the public shell. */

/* The public header is taller than the portal's and has its own height. */
.mf-page-core_fid_storemap .mf-smap { height: max(520px, calc(100vh - var(--mf-fnav, 135px) - 40px)); border-radius: 0; box-shadow: none; }

/* "Où ?": a box with its name in it, the proposals under it. */
.mf-smap--dir .mf-smap__searchrow { align-items: stretch; }
.mf-smap__where {
	position: relative; flex: 1.3 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 18px;
	border: 1px solid var(--mf-navy); border-radius: 22px; background: var(--mf-surface);
}
.mf-smap__where:focus-within { box-shadow: 0 0 0 2px rgba(0, 64, 113, .2); }
.mf-smap__wherelabel { flex: none; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mf-magenta); white-space: nowrap; }
.mf-smap__whereinput { flex: 1; min-width: 0; height: 100%; min-height: 42px; padding: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--mf-ink); }
.mf-smap__whereinput::placeholder { color: var(--mf-muted); opacity: 1; }
.mf-smap__whereclear { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mf-muted); cursor: pointer; }
.mf-smap__whereclear:hover { background: var(--mf-soft); color: var(--mf-navy); }
.mf-smap__suggest {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: min(60vh, 380px); overflow-y: auto;
	list-style: none; margin: 0; padding: 6px; border-radius: 16px; background: var(--mf-surface); box-shadow: var(--mf-shadow-lg);
}
.mf-smap__option { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 10px; color: var(--mf-navy); font-weight: 600; cursor: pointer; }
.mf-smap__option small { flex: none; font-size: .8rem; font-weight: 400; color: var(--mf-muted); }
.mf-smap__option:hover, .mf-smap__option[aria-selected="true"] { background: #fbf1f8; }
.mf-smap__nooption { padding: 10px 12px; font-size: .88rem; color: var(--mf-muted); }
.mf-smap--dir .mf-smap__search { flex: 1 1 0; }

.mf-smap__tel { font-size: .8rem; color: var(--mf-muted); }
.mf-smap__tel i { font-size: .78em; }
.mf-smap__tabs { display: none; }
.mf-smap--dir .mf-smap__more .mf-btn { border: 0; text-decoration: underline; font-weight: 700; }

/* The public site gives its own sizes and colours to every title (.mf-front h1…h4). */
.mf-front .mf-smap__cardname { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.mf-front .mf-place__title h1 { margin: 0; font-size: 1.7rem; line-height: 1.2; color: var(--mf-navy); }
.mf-front .mf-place__section > h2 { margin: 0 0 14px; font-size: 1.25rem; }
.mf-front .mf-place__section h3 { margin: 0 0 8px; font-size: .8rem; color: var(--mf-muted); }

/* The public store page: a card on the grey page of the public site. */
.mf-pplace { margin: 0 auto; box-shadow: none; }
.mf-pplace .mf-place__nav { top: 77px; }
.mf-pplace .mf-place__section { scroll-margin-top: 139px; }
/* The public site underlines every link of its pages. */
.mf-fmain .mf-pplace a { text-decoration: none; }
.mf-fmain .mf-pplace .mf-place__contact a, .mf-fmain .mf-pplace .mf-place__group a, .mf-fmain .mf-pplace__connect a { text-decoration: underline; }
.mf-pplace__connect { margin: 14px 0 0; }
.mf-pplace__connect a { font-weight: 700; color: var(--mf-magenta); }

@media (max-width: 991px) {
	/* The public header no longer follows the page. */
	.mf-pplace .mf-place__nav { top: 0; }
	.mf-pplace .mf-place__section { scroll-margin-top: 62px; }
}
@media (max-width: 767px) {
	.mf-front .mf-place__title h1 { font-size: 1.3rem; }
	.mf-page-core_fid_storemap .mf-smap { height: max(480px, 100vh); height: max(480px, 100dvh); }
	.mf-smap--dir .mf-smap__searchrow { flex-wrap: wrap; gap: 8px; }
	.mf-smap__where { flex: 1 0 100%; }
	.mf-smap--dir .mf-smap__locate span { display: none; }
	.mf-smap--dir .mf-smap__locate { padding-left: 14px; padding-right: 14px; }
	/* "Liste | Carte": one of them at a time, the other one stays under it. */
	.mf-smap__tabs { display: flex; border-bottom: 1px solid var(--mf-line); }
	.mf-smap__tab {
		flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px 9px;
		border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-weight: 600; color: var(--mf-muted); cursor: pointer;
	}
	.mf-smap__tab[aria-selected="true"] { border-bottom-color: var(--mf-magenta); color: var(--mf-navy); font-weight: 700; }
	.mf-smap__tab:focus-visible { outline-offset: -3px; }
	.mf-smap--dir .mf-smap__map { inset: 0; }
	.mf-smap--dir .mf-smap__panel { top: 0; height: auto; border-radius: 0; box-shadow: none; transition: none; }
	.mf-smap--dir.is-tab-map .mf-smap__panel { visibility: hidden; }
	.mf-smap--dir .mf-smap__handle { display: none; }
	.mf-smap--dir .mf-smap__head { padding: 10px 16px 6px; cursor: default; }
	.mf-smap__tel { display: none; }
}

/* ---------- legal texts ---------- */

.mf-legaltext { font-size: .92rem; overflow-wrap: anywhere; }
.mf-legaltext h1 { font-size: 1.9rem; margin-bottom: 1em; }
.mf-legaltext h2 { font-size: 1.3rem; font-weight: 700; }
.mf-legaltext h3 { margin-top: 1.2em; }
.mf-legaltext hr.mf-legaltext__fat { border-top-width: 3px; }
.mf-legaltext ul, .mf-legaltext ol { margin: 0 0 1em; padding-left: 1.6em; }
.mf-legaltext li { margin-bottom: .5em; }
.mf-legaltext a { text-decoration: underline; }
.mf-legaltext__toc { line-height: 1.9; }
.mf-legaltext__toc a { text-decoration: none; }
.mf-legaltext section { scroll-margin-top: calc(var(--mf-top) + 10px); }
.mf-legaltext table { border-collapse: collapse; max-width: 100%; }
.mf-legaltext td, .mf-legaltext th { border: 1px solid var(--mf-line-strong); padding: 6px 10px; vertical-align: top; }

/* ---------- legal texts: reading layout of the connected pages (views/portal/legal.js, renderLegal { guide }) ---------- */
.mf-legalguide__switch { margin-bottom: 26px; }
.mf-legalguide__switch .mf-chip { text-decoration: none; }
.mf-legalguide__switch .mf-chip[aria-current] { border-color: var(--mf-magenta); color: var(--mf-magenta); font-weight: 700; }
.mf-legaltext--guide { font-size: .95rem; line-height: 1.65; }
.mf-legaltext--guide h1 { margin-bottom: .35em; }
.mf-legalguide__date { margin: 0 0 .6em; color: var(--mf-muted); }
.mf-legalguide__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--mf-line); font-size: .9rem; color: var(--mf-muted); }
.mf-legalguide__cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
/* The contents stay in view while the text scrolls. */
.mf-legalguide__toc { position: sticky; top: calc(var(--mf-top) + 16px); max-height: calc(100vh - var(--mf-top) - 32px); overflow-y: auto; padding: 16px 16px 16px 0; border-right: 1px solid var(--mf-line); font-size: .86rem; line-height: 1.35; }
.mf-legalguide__opener { display: none; }
.mf-legalguide__label { display: block; margin: 0 0 8px 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-muted); }
.mf-legalguide__toc ol { list-style: none; margin: 0; padding: 0; }
.mf-legalguide__toc li { margin: 0; }
.mf-legalguide__toc a { display: block; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 0 var(--mf-radius-xs) var(--mf-radius-xs) 0; color: var(--mf-ink); text-decoration: none; overflow-wrap: anywhere; }
.mf-legalguide__toc a:hover { color: var(--mf-magenta); }
.mf-legalguide__toc a[aria-current] { border-left-color: var(--mf-magenta); background: #f9eff6; color: var(--mf-magenta); font-weight: 700; }
/* About 70 characters a line. */
.mf-legalguide__text { max-width: 68ch; }
.mf-legalguide__text > section { margin-top: 2.6em; scroll-margin-top: calc(var(--mf-top) + 16px); }
.mf-legalguide__text > section:first-child { margin-top: 0; }
.mf-legaltext--guide h2 { margin: 0; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.3; }
/* The title of an article and its address ("copy the link", ui/copylink.js - also under an answer of the public FAQ). */
.mf-legalguide__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 0 0 1em; padding-bottom: .45em; border-bottom: 2px solid var(--mf-navy); }
.mf-copylink__wrap { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.mf-copylink { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 2px 0; border: 0; background: none; font: inherit; font-size: .82rem; color: var(--mf-muted); text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
.mf-copylink:hover, .mf-copylink.is-copied { color: var(--mf-magenta); }
.mf-copylink__said { font-size: .82rem; font-weight: 700; color: var(--mf-magenta); white-space: nowrap; }
.mf-copylink__said:empty { display: none; }
.mf-copylink__box { position: fixed; left: -999px; top: 0; opacity: 0; }
/* A link to another of the three texts, under the paragraph that refers to it. */
.mf-legaltext__see a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.mf-legaltext--guide h3 { margin: 1.6em 0 .6em; font-size: 1.05rem; }
.mf-legaltext--guide p, .mf-legaltext--guide ul, .mf-legaltext--guide ol { margin-bottom: 1.1em; }
.mf-legaltext--guide li { margin-bottom: .6em; }
.mf-legalguide__top { margin: 1.4em 0 0; text-align: right; font-size: .86rem; }
.mf-legalguide__top a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--mf-muted); }
.mf-legalguide__top a:hover { color: var(--mf-magenta); }
/* "Généralités": the centred block of the company stands apart from the paragraph that follows it. */
.mf-legaltext--guide #privacy1 .mf-legaltext__rich > div { margin-bottom: 1.4em; }
.mf-legaltext--guide #privacy1 .mf-legaltext__rich > div > div { padding: 14px 18px; border-radius: var(--mf-radius-sm); background: var(--mf-soft); }
/* The cookies text: my choice and the types of cookies, above the text (ui/cookiechoice.js). */
.mf-cookiechoice { margin-bottom: 2.6em; padding: 18px 20px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); background: var(--mf-surface); }
.mf-cookiechoice__mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.mf-cookiechoice .mf-cookiechoice__mine p { margin: 0; }
.mf-cookiechoice__state { display: block; font-size: 1.05rem; color: var(--mf-navy); }
.mf-cookiechoice__note { font-size: .86rem; color: var(--mf-muted); }
.mf-cookiechoice__types { width: 100%; font-size: .88rem; line-height: 1.4; }
.mf-legaltext .mf-cookiechoice__types th, .mf-legaltext .mf-cookiechoice__types td { padding: 8px 10px 8px 0; border: 0; border-bottom: 1px solid var(--mf-line); text-align: left; }
.mf-cookiechoice__types th { font-size: .8rem; color: var(--mf-muted); }
.mf-cookiechoice__types td:first-child { font-weight: 700; color: var(--mf-navy); }
.mf-cookiechoice .mf-cookiechoice__source { margin: 12px 0 0; font-size: .82rem; color: var(--mf-muted); }
@media (max-width: 991px) {
	.mf-legalguide__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	/* A bar under the header, which names the article being read and opens the list. */
	.mf-legalguide__toc { z-index: 5; top: var(--mf-top); max-height: none; overflow: visible; margin: 0 -16px; padding: 0; border: 0; border-bottom: 1px solid var(--mf-line); background: var(--mf-surface); }
	.mf-legalguide__opener { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mf-navy); text-align: left; cursor: pointer; }
	.mf-legalguide__opener span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mf-legalguide__opener .fa-chevron-down { transition: transform .15s; }
	.mf-legalguide__toc.is-open .mf-legalguide__opener .fa-chevron-down { transform: rotate(180deg); }
	.mf-legalguide__label { display: none; }
	.mf-legalguide__toc ol { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow-y: auto; padding: 6px 8px 10px; background: var(--mf-surface); box-shadow: var(--mf-shadow-lg); }
	.mf-legalguide__toc.is-open ol { display: block; }
	.mf-legalguide__text { max-width: none; }
	.mf-legalguide__text > section { scroll-margin-top: calc(var(--mf-top) + 60px); }
}
@media (max-width: 600px) {
	/* The table of the cookie types becomes one card per type. */
	.mf-cookiechoice__types thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.mf-cookiechoice__types, .mf-cookiechoice__types tbody, .mf-cookiechoice__types tr, .mf-cookiechoice__types td { display: block; }
	.mf-cookiechoice__types tr { margin-bottom: 10px; padding: 10px 14px; border-radius: var(--mf-radius-xs); background: var(--mf-soft); }
	.mf-legaltext .mf-cookiechoice__types td { padding: 2px 0; border: 0; }
	.mf-cookiechoice__types td:not(:first-child)::before { content: attr(data-label) " : "; color: var(--mf-muted); }
	.mf-cookiechoice__mine .mf-btn { width: 100%; }
}
@media print {
	.mf-legalguide__switch, .mf-legalguide__toc, .mf-legalguide__top, .mf-legalguide__meta .mf-btn, .mf-copylink__wrap, .mf-cookiechoice__mine { display: none !important; }
	.mf-legalguide__cols { display: block; }
	.mf-legalguide__text { max-width: none; }
	.mf-legaltext--guide { font-size: 10.5pt; line-height: 1.5; color: #000; }
	.mf-legaltext--guide h2 { break-after: avoid; }
	.mf-legaltext--guide a { color: inherit; }
	.mf-card:has(> .mf-legaltext--guide) { padding: 0; box-shadow: none; border-radius: 0; }
}
/* MyFreedelity app - styles of the "link" pages (reached from a link in an email or an SMS):
   unsubscribe (e-mail, postal), define / reset password, consent accept / refuse, account
   deletion and its confirmation pages, change language, folder.
   Tokens and components: app.css. These pages are mostly opened on a phone: the phone
   layout is the reference, a computer shows the same narrow card, centred.
   Class names are prefixed mf-l (link) and are new on purpose: the names of the previous
   layout (mf-link__*, mf-optin, mf-delacc...) may still be styled by a deployed bundle. */

/* ---------- shell: one compact line, the cards, a one-line footer ---------- */
.mf-lshell { min-height: 100vh; display: flex; flex-direction: column; }
.mf-lbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
	padding: 14px 16px 12px; color: var(--mf-navy); font-size: .95rem; text-align: center;
}
.mf-lbar__brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mf-lbar__brand:empty { display: none; }
.mf-lbar__brand b { overflow-wrap: anywhere; }
.mf-lbar__pic { display: block; height: 30px; max-width: 84px; object-fit: contain; }
.mf-lbar__via { color: var(--mf-muted); white-space: nowrap; }
.mf-lbar__logo { display: block; flex: none; }
.mf-lbar__logo img { display: block; height: 30px; width: auto; }
/* Without a brand the MyFreedelity logo stands alone, a little larger. */
.mf-lbar__brand:empty + .mf-lbar__logo img { height: 40px; }
.mf-lwrap { flex: 1; width: 100%; max-width: 512px; margin: 0 auto; padding: 6px 16px 24px; }
.mf-lwrap .mf-content { min-height: 0; display: grid; gap: 12px; align-content: start; }
.mf-lfoot { padding: 0 16px 28px; text-align: center; font-size: .82rem; }
.mf-lfoot a { display: inline-flex; align-items: center; gap: 8px; color: var(--mf-muted); }
.mf-lfoot img { display: block; height: 22px; width: auto; }

/* ---------- the card and its common pieces ---------- */
.mf-lcard { padding: 26px 26px 24px; min-width: 0; overflow-wrap: break-word; }
.mf-lcard > :last-child { margin-bottom: 0; }
.mf-lcard p { margin: 0 0 12px; }
.mf-lcard__title { margin: 0 0 10px; color: var(--mf-navy); font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.mf-lcard__lead { color: var(--mf-muted); }
.mf-lcard__eyebrow { margin: 0 0 12px; color: var(--mf-muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mf-lsec { margin: 20px 0 10px; padding: 0; color: var(--mf-navy); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.mf-lhint { color: var(--mf-muted); font-size: .86rem; }
.mf-lhint--center { text-align: center; }
.mf-lhint a { color: var(--mf-navy); font-weight: 600; text-decoration: underline; }
.mf-lerror { margin: 0; color: var(--mf-red); font-size: .86rem; font-weight: 600; }
.mf-lcard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mf-lcard legend { padding: 0; }
.mf-lcard .mf-input.is-invalid { border-color: var(--mf-red); background: var(--mf-red-soft); }

/* Buttons are thumb-sized and take the width of the card, one under the other. */
.mf-lactions { display: grid; gap: 10px; margin: 18px 0 14px; }
.mf-lcard .mf-btn:not(.mf-btn--link):not(.mf-btn--small) { min-height: 46px; padding: 10px 20px; border-radius: 23px; text-align: center; }
.mf-lform > .mf-btn { width: 100%; margin-top: 4px; }
/* Greyed while something is missing; still focusable, a line under it says what. */
.mf-lcard .mf-btn.is-off { opacity: .5; }
.mf-lcard .mf-btn.mf-lbtn--outline { background: var(--mf-surface); border-color: var(--mf-red); color: var(--mf-red); }
.mf-lcard .mf-btn.mf-lbtn--outline:hover:not(:disabled) { background: var(--mf-red-soft); }
.mf-lform { display: grid; gap: 14px; }
.mf-lform > .mf-lhint { margin: -6px 0 0; }

/* What happened: a round mark, the outcome as a headline, lines of detail. */
.mf-lout { display: flex; align-items: flex-start; gap: 12px; }
.mf-lout__mark {
	flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--mf-green-soft); color: #3d6b00; font-size: .95rem;
}
.mf-lout--warn .mf-lout__mark { background: #fff3d6; color: #8a5a00; }
.mf-lout--error .mf-lout__mark { background: var(--mf-red-soft); color: var(--mf-red); }
.mf-lout__text { min-width: 0; flex: 1; }
.mf-lout__title { margin: 5px 0 8px; color: var(--mf-navy); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.mf-lout__text > p:last-child { margin-bottom: 0; }

/* A sentence about consequences, set apart. */
.mf-lwarn { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--mf-radius-sm); background: #fff3d6; color: #5c3d00; }
.mf-lwarn > i { flex: none; margin-top: 3px; color: #8a5a00; }
.mf-lwarn p { margin: 0; }
.mf-lcard .mf-lconditions { margin: 16px 0 0; color: var(--mf-muted); font-size: .86rem; overflow-wrap: anywhere; }
.mf-lconditions a { color: var(--mf-navy); text-decoration: underline; }

/* ---------- unsubscribe ---------- */
.mf-lunsub__subject { color: var(--mf-muted); font-size: .86rem; }
.mf-lban { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--mf-radius-sm); background: var(--mf-green-soft); }
.mf-lban__text { flex: 1; min-width: 0; margin: 0; color: #2f5200; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.mf-lban .mf-btn { flex: none; min-height: 36px; background: var(--mf-surface); }
.mf-lunsub__how { margin: 0 0 6px; color: var(--mf-navy); font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.mf-lchan { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--mf-soft); }
.mf-lchan:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-lchan__text { flex: 1; min-width: 0; display: grid; }
.mf-lchan__text label { color: var(--mf-ink); font-weight: 600; cursor: pointer; }
.mf-lchan__hint { color: var(--mf-muted); font-size: .8rem; }
.mf-lchan__saved { color: #3d6b00; font-size: .8rem; font-weight: 600; }
.mf-lchan__saved:empty { display: none; }
.mf-lchan .mf-switch { flex: none; padding: 8px 0; }
.mf-lchan.is-locked label { color: var(--mf-muted); cursor: default; }
.mf-lchan.is-locked .mf-switch { cursor: not-allowed; }
.mf-lsurvey legend { margin-bottom: 10px; color: var(--mf-navy); font-weight: 700; }
.mf-lsurvey__opt { color: var(--mf-muted); font-weight: 400; }
.mf-lsurvey__form { display: grid; gap: 12px; }
.mf-lsurvey__form .mf-lhint { margin: -4px 0 0; }
.mf-lradio { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.mf-lradio input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mf-navy); }

/* ---------- define password, reset password ---------- */
.mf-lpw__reveal { display: flex; }
.mf-lpw__reveal .mf-input { flex: 1; min-width: 0; min-height: 44px; border-radius: 8px 0 0 8px; border-right: 0; }
.mf-lpw__eye {
	flex: none; min-width: 84px; padding: 0 10px; border: 1px solid var(--mf-line-strong); border-radius: 0 8px 8px 0;
	background: var(--mf-surface); color: var(--mf-navy); font-size: .82rem; font-weight: 600; cursor: pointer;
}
.mf-lpw__eye:hover { background: var(--mf-soft); }
.mf-lpw__meter { display: flex; gap: 3px; margin-top: 2px; }
.mf-lpw__meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--mf-line); transition: background .15s; }
.mf-lpw__meter i.is-ok { background: var(--mf-green); }
.mf-lpw__count .mf-btn--link { font-size: inherit; font-weight: 600; }
.mf-lpw__list { display: grid; gap: 6px; }
.mf-lpw__rules { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.mf-lpw__rules li { padding: 3px 10px; border-radius: 12px; background: var(--mf-soft); color: #555; font-size: .8rem; }
.mf-lpw__rules li.is-ok { background: var(--mf-green-soft); color: #3d6b00; font-weight: 600; }
.mf-lpw__rules li.is-ok::before { content: "\2713\00a0"; }
.mf-lpw__special { font-family: monospace; letter-spacing: .12em; overflow-wrap: anywhere; }
.mf-lconsents { display: grid; gap: 10px; }
.mf-lconsents .mf-lsec { margin: 4px 0 8px; }
.mf-lconsentline { font-size: .86rem; line-height: 1.45; cursor: pointer; }
.mf-lconsentline input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.mf-lconsentline span { min-width: 0; overflow-wrap: anywhere; }
.mf-lconsentline a { color: var(--mf-navy); text-decoration: underline; }
.mf-lconsentline.is-invalid { color: var(--mf-red); }
/* "Read the full text" of a consent summed up in one line: a link look, and the full text in a dialog. */
.mf-lconsentmore { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mf-navy); text-decoration: underline; cursor: pointer; }
.mf-lconsentfull { font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.mf-lconsentfull a { color: var(--mf-navy); text-decoration: underline; }

/* ---------- consent ---------- */
.mf-lq { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--mf-line); border-radius: 14px; }
.mf-lyn legend { margin-bottom: 8px; font-size: .92rem; }
.mf-lyn__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mf-lyn__opt span {
	display: grid; place-items: center; min-height: 44px; border: 1px solid var(--mf-line-strong); border-radius: 22px;
	color: var(--mf-navy); font-weight: 700; cursor: pointer;
}
.mf-lyn__opt input:checked + span { border-color: var(--mf-navy); background: var(--mf-navy); color: #fff; }
.mf-lyn__opt input:focus-visible + span { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-lyn.is-invalid .mf-lyn__opt span { border-color: var(--mf-red); }
.mf-lyn .mf-lerror { margin-top: 8px; }

/* ---------- delete account ---------- */
.mf-ldel__brands { list-style: none; margin: 0 0 4px; padding: 0; }
.mf-ldel__brands li + li { border-top: 1px solid var(--mf-soft); }
.mf-ldel__brand { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; cursor: pointer; }
.mf-ldel__brand input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--mf-red); }
.mf-ldel__brand img, .mf-ldel__nologo { flex: none; width: 44px; height: 32px; object-fit: contain; }
.mf-ldel__nologo { display: grid; place-items: center; border-radius: 6px; background: var(--mf-soft); color: var(--mf-muted); font-size: .9rem; }
.mf-ldel__name { flex: 1; min-width: 0; color: var(--mf-navy); font-weight: 600; overflow-wrap: anywhere; }
.mf-ldel__points { flex: none; color: var(--mf-muted); font-size: .82rem; white-space: nowrap; }
.mf-ldel__points b { color: var(--mf-navy); font-size: .95rem; }
.mf-ldel__brand:has(input:checked) .mf-ldel__name { color: var(--mf-red); }

/* ---------- change language ---------- */
.mf-llang__menu { display: grid; gap: 10px; margin-top: 14px; }
.mf-llang__menu + .mf-note { margin: 14px 0 0; }
.mf-llang__zone .mf-lout { margin-top: 6px; }

/* ---------- folder opened from an email ---------- */
.mf-lwrap:has(.mf-viewfolder) { max-width: 760px; }
.mf-viewfolder { text-align: center; }
.mf-viewfolder__cover { padding: 0; border: 0; background: none; cursor: pointer; }
.mf-viewfolder__cover img { display: block; max-width: 100%; max-height: 60vh; box-shadow: var(--mf-shadow-lg); }

@media (max-width: 480px) {
	.mf-lbar { padding: 10px 12px 8px; font-size: .88rem; }
	.mf-lbar__pic, .mf-lbar__logo img { height: 24px; }
	.mf-lbar__brand:empty + .mf-lbar__logo img { height: 32px; }
	.mf-lwrap { padding: 4px 10px 20px; }
	.mf-lcard { padding: 20px 16px 18px; }
	.mf-lcard__title { font-size: 1.2rem; }
	.mf-lout__title { font-size: 1.1rem; }
	.mf-lunsub__how { font-size: 1.15rem; }
}
/* ============================================================
   MyFreedelity app - styles of the public site (shell/front.js and
   views/public). Tokens and components: app.css.

   The look is the one of the legacy public pages (styles/front.css),
   rebuilt without Fomantic. Sizes are in px: the legacy sheet counted
   in rem on Fomantic's 14px root, the app's root is 16px.

   1. base   2-3. the public shell (header, footer, cookie banner, app strip)
   4. shared blocks   5. carousel   6. home   7. content pages
   8. legal pages   9. responsive
   Then, at the end of the file: the rules of the "public-b" pages.
   ============================================================ */

/* ---------- 1. base ---------- */
.mf-front {
	--mf-fbeige: #f5f2ea;
	--mf-fplum: #2b092f;
	--mf-fnav: 96px;
	min-height: 100vh; display: flex; flex-direction: column;
	background: #fff; color: var(--mf-ink); font-size: 16px; line-height: 1.4;
}
.mf-fmain { flex: 1; min-width: 0; padding-top: 33px; transition: opacity .15s; }
.mf-fmain.is-loading { opacity: .5; min-height: 60vh; }
.mf-front h1, .mf-front h2, .mf-front h3, .mf-front h4 { font-weight: 700; line-height: 1.28; }
.mf-front h1 { color: var(--mf-magenta); font-size: 28px; margin: 0 0 14px; }
.mf-front h2 { color: var(--mf-navy); font-size: 24px; margin: 28px 0; }
.mf-front h3 { color: var(--mf-magenta); font-size: 18px; margin: 0 0 14px; }
.mf-front h4 { color: var(--mf-navy); font-size: 16px; }
.mf-front :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.mf-front :is(h1, h2, h3, h4):last-child { margin-bottom: 0; }
.mf-front p { line-height: 1.5; margin: 0 0 14px; }
.mf-fmain a { text-decoration: underline; }
.mf-front hr { border: 0; border-top: 1px solid #ccc; margin: 28px 0; }
.mf-front hr.mf-fhr-big { border-top: 10px solid #f7f7f7; margin: 70px 0; }
.mf-front .highlight { display: inline; background-color: rgba(184, 37, 133, .1); color: var(--mf-magenta); }

.mf-fcontainer { width: 100%; max-width: 1127px; margin: 0 auto; }
.mf-fwide { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; }
.mf-fcenter { text-align: center; }
.mf-fmagenta { color: var(--mf-magenta) !important; }
.mf-fnavy { color: var(--mf-navy); }
.mf-fsmall { font-size: 14px; line-height: 1.6; }
.mf-fbig { font-size: 150%; }
.mf-fbrand { font-weight: 800; color: var(--mf-magenta); }
.mf-fpad { padding: 70px 0; margin: 0; }
.mf-fmainwrap { padding: 70px 0; }

.mf-fbtn {
	display: inline-block; margin-top: 14px; padding: .5em 1.5em; border: 0; border-radius: 50px;
	background: #ccc; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.4;
	text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .5s ease-out;
}
.mf-fbtn + .mf-fbtn { margin-left: 14px; }
.mf-fbtn--navy { background: var(--mf-navy); }
.mf-fbtn--navy:hover { background: #022a49; color: #fff; }
.mf-fbtn--magenta { background: var(--mf-magenta); }
.mf-fbtn--magenta:hover { background: #761454; color: #fff; }
.mf-fbtn--large { font-size: 20px; padding: .6em 1.4em; }

/* ---------- 2-3. the public shell (shell/front.js): header and menu, footer, cookie banner, app strip ----------
   The header has two levels: a thin bar (language, connect, create a profile) that
   scrolls away, then the logo and the pages, which stay at the top. Under 1100px
   the five pages have no room to breathe: the bar shows the logo and a menu button,
   and the menu (.mf-fn-menu) opens over the whole window, everything centred. */
.mf-fn {
	--mf-fn-top: 48px;
	position: sticky; top: calc(-1 * var(--mf-fn-top)); z-index: 60;
	background: var(--mf-surface); transition: box-shadow .2s;
}
.mf-fn.is-stuck { box-shadow: var(--mf-shadow); }
.mf-fn__logo { display: block; flex: none; line-height: 0; }
.mf-fn__logo img { width: 270px; max-width: 100%; height: auto; }

/* Level 1: the language and the account, on the right */
.mf-fn__top { background: var(--mf-fbeige); }
.mf-fn__topin { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: var(--mf-fn-top); }
.mf-fn__lang { position: relative; margin-right: 8px; }
.mf-fn__toggle {
	display: flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
	color: var(--mf-navy); font: inherit; font-size: 14px; font-weight: 700;
}
.mf-fn__toggle i { font-size: 10px; transition: transform .2s; }
.mf-fn__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.mf-fn__langs {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 61; display: grid; min-width: 170px; padding: 8px;
	border-radius: var(--mf-radius-sm); background: var(--mf-surface); box-shadow: var(--mf-shadow-lg);
}
.mf-fn__langs a { padding: 8px 14px; border-radius: var(--mf-radius-xs); color: var(--mf-navy); font-size: 14px; text-decoration: none; }
.mf-fn__langs a:hover { background: var(--mf-fbeige); }
.mf-fn__langs a[aria-current] { color: var(--mf-magenta); font-weight: 700; }
.mf-fn__btn {
	display: inline-block; padding: 8px 16px; border: 2px solid var(--mf-magenta); border-radius: 50px;
	font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; white-space: nowrap;
	transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.mf-fn__btn--main { background: var(--mf-magenta); color: #fff; }
.mf-fn__btn--main:hover { background: #761454; border-color: #761454; color: #fff; }
.mf-fn__btn--ghost { background: #fff; border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-fn__btn--ghost:hover { background: var(--mf-navy); color: #fff; }
.mf-fn__btn--small { padding: 6px 14px; font-size: 14px; }

/* Level 2: the logo, and the pages with room between them */
.mf-fn__main { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: var(--mf-fnav); }
.mf-fn__links { display: flex; align-items: center; gap: 40px; }
.mf-fn__links a {
	position: relative; padding: 10px 0; color: var(--mf-navy); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mf-fn__links a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
	background: var(--mf-magenta); transform: scaleX(0); transition: transform .2s;
}
.mf-fn__links a:hover, .mf-fn__links a[aria-current="page"] { color: var(--mf-magenta); }
.mf-fn__links a:hover::after, .mf-fn__links a[aria-current="page"]::after { transform: scaleX(1); }
.mf-fn__burger { display: none; width: 48px; height: 48px; border: 0; background: none; color: var(--mf-navy); font-size: 26px; cursor: pointer; }
.mf-fn :is(a, button):focus-visible, .mf-fn-menu :is(a, button):focus-visible, .mf-ft a:focus-visible, .mf-fck :is(a, button):focus-visible { outline: 3px solid #68d0ef; outline-offset: 2px; }

/* Phone menu: the whole window, everything centred */
.mf-fn-locked, .mf-fn-locked body { overflow: hidden; }
.mf-fn-menu {
	position: fixed; inset: 0; z-index: 200; overflow-y: auto;
	display: flex; flex-direction: column; padding: 0 28px 40px;
	background: var(--mf-surface); text-align: center;
}
.mf-fn-menu[hidden] { display: none; }
.mf-fn-menu__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--mf-fnav); }
.mf-fn-menu__bar .mf-fn__burger { display: grid; place-items: center; }
.mf-fn-menu__links { display: flex; flex-direction: column; margin: auto 0; padding: 40px 0; }
.mf-fn-menu__links a { padding: 18px 0; color: var(--mf-navy); font-size: 22px; font-weight: 700; text-decoration: none; }
.mf-fn-menu__links a:hover, .mf-fn-menu__links a[aria-current="page"] { color: var(--mf-magenta); }
.mf-fn-menu__actions { display: grid; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; }
.mf-fn-menu__actions .mf-ph-btn { padding: 14px 22px; font-size: 17px; }
.mf-front .mf-fn-menu__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 36px 0 0; }
.mf-fn-menu__langs a { padding: 8px 10px; border-radius: 50px; color: var(--mf-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.mf-fn-menu__langs a[aria-current] { background: var(--mf-navy); color: #fff; }

@media (max-width: 1199px) {
	.mf-fn__links { gap: 28px; }
	.mf-fn__links a { font-size: 15px; }
}
@media (max-width: 1099px) {
	.mf-front { --mf-fnav: 92px; }
	.mf-fn { top: 0; }
	.mf-fn__top, .mf-fn__links { display: none; }
	.mf-fn__burger { display: grid; place-items: center; }
}
@media (max-width: 767px) {
	/* .mf-fcontainer gives 28px at this width: the bar keeps its own, narrower, for the large logo. */
	.mf-fn .mf-fn__main { gap: 12px; padding-left: 16px; padding-right: 6px; }
	/* The logo keeps its size while the screen leaves it room beside the menu button. */
	.mf-fn__logo { flex-shrink: 1; min-width: 0; }
	.mf-fn-menu { padding: 0 16px 32px; }
}

/* Footer: four groups of links, then the legal lines */
.mf-ft {
	position: relative; margin-top: -28px; padding: 56px 0 36px;
	background: var(--mf-fplum); color: #fff; border-radius: 30px 30px 0 0;
}
.mf-ft__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.mf-front .mf-ft__title { margin: 0 0 10px; color: #fff; font-size: 15px; font-weight: 800; }
.mf-ft ul { list-style: none; margin: 0; padding: 0; }
.mf-ft__group li { padding: 4px 0; font-size: 14px; line-height: 1.4; }
.mf-ft a { color: #eadfeb; text-decoration: none; }
.mf-ft a:hover { color: #fff; text-decoration: underline; }
.mf-ft__legal {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
	margin-top: 32px; padding-top: 18px; border-top: 1px solid #5a3a5d; color: #d9cbdb; font-size: 13px;
}
.mf-front .mf-ft__legal p { margin: 0; line-height: 1.7; }
.mf-ft__legal a { color: #fff; }
.mf-ft__social { display: flex; gap: 12px; font-size: 32px; line-height: 1; }
.mf-ft__social a { color: #fff; }

/* Cookie banner: one line and its two choices */
.mf-fck {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: 10px 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px;
	background: rgba(0, 64, 112, .96); color: #fff; font-size: 14px; line-height: 1.4;
}
.mf-front .mf-fck p { flex: 1 1 420px; max-width: 800px; margin: 0; line-height: 1.4; }
.mf-fck a { color: #fff; text-decoration: underline; }
.mf-fck__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-fck__btn {
	padding: 7px 16px; border: 0; border-radius: 50px; background: var(--mf-magenta); color: #fff;
	font: inherit; font-weight: 700; cursor: pointer; transition: background-color .3s ease-out;
}
.mf-fck__btn:hover { background: #761454; }

.mf-fstrip { display: none; }

@media (max-width: 767px) {
	/* App download strip: phones only */
	.mf-fstrip { display: flex; height: 80px; background: var(--mf-magenta); color: #fff; }
	.mf-fstrip__get {
		flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px;
		color: #fff; text-decoration: none; transition: background-color .5s ease-out;
	}
	.mf-fstrip__get:hover { background: var(--mf-fplum); color: #fff; }
	.mf-fstrip__get img { width: 50px; }
	.mf-fstrip__close { flex: 0 0 10%; min-width: 44px; border: 0; background: var(--mf-fplum); color: #fff; font-size: 18px; cursor: pointer; }

	.mf-ft { padding: 44px 0 28px; }
	.mf-ft__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mf-ft__legal { flex-direction: column; align-items: flex-start; }
	.mf-fck { padding: 10px 14px; font-size: 13px; }
	.mf-fck__actions { flex: 1 1 100%; }
	.mf-fck__btn { flex: 1 1 0; font-size: 13px; padding: 7px 10px; }
}
@media (max-width: 480px) {
	.mf-ft__groups { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media print {
	.mf-fn, .mf-ft, .mf-fck, .mf-fstrip { display: none !important; }
}
/* ---------- end of the public shell ---------- */

/* ---------- 4. shared blocks ---------- */
/* Blue title banner of a content page */
.mf-fbanner {
	padding: 84px 0; border-radius: 30px; color: #fff; font-size: 17.5px; text-align: center;
	background: linear-gradient(0deg, #004070 20%, #3c99de 100%);
}
.mf-fbanner__in { width: 80%; margin: 0 auto; }
.mf-front .mf-fbanner h1 { color: #fff; font-size: 33px; }
.mf-fbanner__motto { margin: 28px 0 0 !important; font-size: 24px; font-weight: 700; line-height: 1.28 !important; }
.mf-fbanner__badges { margin-bottom: 0 !important; }
.mf-fbanner__badges img { height: 50px; width: auto; margin: 0 3px; vertical-align: middle; }


/* Participating brands, map button */
.mf-fblock { padding: 0 0 14px; }
.mf-fbrands { padding: 70px 0 28px; text-align: center; }
.mf-fmap {
	padding: 56px 0 70px; text-align: center; border-radius: 30px;
	background: #ccc url("/images/theme/front/bgmap.jpg") center / cover no-repeat;
}
.mf-fmap__btn { text-transform: uppercase; line-height: 1.4; }
.mf-fblock--faqs .mf-fmap { margin-bottom: 98px; }

/* Mobile app presentation and reviews */
.mf-fapp {
	border-radius: 30px; text-align: center; color: var(--mf-navy);
	background: var(--mf-fbeige) var(--mf-fapp-art) top right / 50% no-repeat;
}
/* The presentation of the app in the language of the page (also the background of the app page's banner). */
.mf-front { --mf-fapp-art: url("/assets/myfreedelityapppresentation-en.png"); }
.mf-fapp--fr { --mf-fapp-art: url("/assets/myfreedelityapppresentation-fr.png"); }
.mf-fapp--nl { --mf-fapp-art: url("/assets/myfreedelityapppresentation-nl.png"); }
.mf-fapp--de { --mf-fapp-art: url("/assets/myfreedelityapppresentation-de.png"); }
.mf-fapp--it { --mf-fapp-art: url("/assets/myfreedelityapppresentation-it.png"); }
.mf-fapp--es { --mf-fapp-art: url("/assets/myfreedelityapppresentation-es.png"); }
.mf-fapp--pt { --mf-fapp-art: url("/assets/myfreedelityapppresentation-pt.png"); }
.mf-fapp > .mf-fcontainer:first-child { padding: 140px 0 100px; }
.mf-fapp__download { width: 37.5%; margin-left: 5.6%; }
.mf-fapp__icon { width: 92px; }
.mf-fapp__badge { height: 40px; width: auto; margin: 7px; }
.mf-fapp__reviews { padding: 28px 0 14px; }
.mf-freview { margin: 14px; padding: 14px; background: #fff; border-radius: 10px; }
.mf-freview__stars { color: gold; margin-bottom: 14px !important; }
.mf-freview blockquote { margin: 0 auto 28px; line-height: 1.5; }
.mf-freview__date { opacity: .5; font-size: 80%; }
.mf-freview figcaption { font-size: 90%; margin-bottom: 14px; }

/* Magenta box with the store badges and their QR codes */
.mf-fdownload {
	margin-top: 56px; padding: 14px 28px 28px; border-radius: 30px; background: var(--mf-magenta); color: #fff;
	text-align: center; font-size: 18px; font-weight: 800;
}
.mf-fdownload p { margin: 7px 0 14px; }
.mf-fdownload__stores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mf-fdownload__stores img { height: 101px; width: auto; }

/* ---------- 5. carousel ---------- */
.mf-carousel { position: relative; }
.mf-carousel__view { overflow: hidden; }
.mf-carousel__track { display: flex; transition: transform .3s ease; will-change: transform; }
.mf-carousel__slide { flex: 0 0 100%; min-width: 0; }
.mf-carousel__arrow {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .75;
}
.mf-carousel__arrow:hover { opacity: 1; }
.mf-carousel__arrow img { display: block; width: 30px; height: 30px; }
.mf-carousel__arrow--prev { left: -25px; }
.mf-carousel__arrow--next { right: -25px; }
.mf-carousel__dots { display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
.mf-carousel__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .25; cursor: pointer; }
.mf-carousel__dot.is-current { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .mf-carousel__track { transition: none !important; } }

.mf-flogos { margin: 28px 0; }
.mf-flogos img { display: block; width: 150px; max-width: 100%; margin: 0 auto; border-radius: 10px; }
.mf-freviews .mf-carousel__slide { display: flex; flex-direction: column; }

/* ---------- 6. previous home (views/public/home-old.js, /?home=old) ----------
   Kept for comparison with the new home (6b); what only this page uses goes with it. Direction D (chosen 2026-10-27): the mascot and the drawings of the brand carry the page, in large
   colour blocks. In the order of the page: beige first screen with the mascot on a blob and the email
   card, closed by a curve; the four advantages; the brands on a magenta band (with the figures and the
   shop search); the folders; the security on navy; the app and where to start on beige; questions with
   the mascot. */
.mf-page-core_fid_home { padding-top: 0; background: #fff; }
.mf-ph-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 22px;
	border: 2px solid var(--mf-magenta); border-radius: 50px; background: var(--mf-magenta); color: #fff;
	font: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none !important;
	cursor: pointer; transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.mf-ph-btn--magenta:hover { background: #761454; border-color: #761454; color: #fff; }
.mf-ph-btn--navy { background: var(--mf-navy); border-color: var(--mf-navy); }
.mf-ph-btn--navy:hover { background: #022a49; border-color: #022a49; color: #fff; }
.mf-ph-btn--ghost { background: #fff; border-color: var(--mf-navy); color: var(--mf-navy); }
.mf-ph-btn--ghost:hover { background: var(--mf-navy); color: #fff; }
.mf-ph-btn--light { background: #fff; border-color: #fff; color: var(--mf-navy); }
.mf-ph-btn--light:hover { background: transparent; color: #fff; }
.mf-ph-btn--small { padding: 6px 14px; font-size: 14px; }
.mf-ph-btn--small i { font-size: 11px; }
.mf-ph-btn:disabled { opacity: .6; cursor: default; }
.mf-page-core_fid_home :is(a, button, input):focus-visible { outline: 3px solid #68d0ef; outline-offset: 2px; }
.mf-front .mf-ph-eye { margin: 0 0 6px; color: var(--mf-magenta); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mf-front .mf-ph-h { margin: 0 0 10px; color: var(--mf-navy); font-size: 32px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.mf-front .mf-ph-h strong { font-weight: 900; }
.mf-front .mf-ph-center { text-align: center; }
.mf-front .mf-ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.mf-page-core_fid_home .mf-input { min-height: 46px; padding: 0 18px; border-radius: 50px; }

/* First screen: beige, the mascot on a blob, closed by a curve into the white below. */
.mf-ph-hero { position: relative; overflow: hidden; padding: 36px 0 110px; background: var(--mf-fbeige); color: var(--mf-navy); }
.mf-ph-hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -70px; height: 140px; border-radius: 50%; background: #fff; }
.mf-ph-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 44px; }
.mf-front .mf-ph-hero__title { margin: 0 0 24px; color: var(--mf-navy); font-size: 44px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.mf-front .mf-ph-hero__title .highlight { padding: 0 .15em; border-radius: .2em; background: var(--mf-magenta); color: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mf-front .mf-ph-hero__lead { font-size: 19px; }
.mf-ph-find { max-width: 520px; padding: 22px 24px; border-radius: 26px; background: #fff; box-shadow: 0 16px 40px rgba(184, 37, 133, .14); }
.mf-front .mf-ph-find__title { margin: 0 0 4px; color: var(--mf-navy); font-size: 19px; }
.mf-front .mf-ph-find p { margin: 0 0 14px; font-size: 14.5px; color: var(--mf-ink); }
.mf-ph-find__row { display: flex; gap: 8px; padding: 5px; border: 2px solid #f6e1ef; border-radius: 50px; }
.mf-ph-find__row .mf-input { flex: 1; min-width: 0; border: 0; box-shadow: none; }
.mf-front .mf-ph-find .mf-ph-find__note { margin: 10px 0 0; font-size: 13px; }
.mf-ph-hero__get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.mf-ph-hero__get > a { display: block; line-height: 0; }
.mf-ph-badge { height: 42px; width: auto; }
.mf-ph-hero__or { font-size: 15px; }
.mf-ph-hero__or a { color: var(--mf-navy); font-weight: 700; }
.mf-ph-hero__art { position: relative; text-align: center; }
.mf-ph-hero__art::before { content: ""; position: absolute; inset: 6% 4% 4% 8%; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; background: #f6e1ef; }
.mf-ph-hero__art img { position: relative; width: 100%; max-width: 520px; }

/* The four advantages: drawn cards, beige and pink in turn. */
.mf-ph-adv { padding: 26px 0 64px; }
.mf-ph-adv .mf-ph-h { margin-bottom: 28px; }
.mf-ph-adv__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mf-ph-adv__card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px; border-radius: 28px; background: var(--mf-fbeige); text-align: center; }
.mf-ph-adv__card:nth-child(even) { background: #f8e9f3; }
.mf-ph-adv__card img { display: block; height: 130px; width: auto; max-width: 100%; object-fit: contain; }
.mf-front .mf-ph-adv__card h3 { margin: 0; color: var(--mf-navy); font-size: 18px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.mf-front .mf-ph-adv__card p { margin: 0; font-size: 14px; }
.mf-ph-adv__card .mf-ph-btn { margin-top: auto; }

/* At whose till? On a magenta band. */
.mf-ph-till { padding: 64px 0; border-radius: 48px 48px 0 0; background: var(--mf-magenta); color: #fff; scroll-margin-top: 90px; }
.mf-front .mf-ph-till .mf-ph-eye { color: #ffd6ee; text-align: center; }
.mf-front .mf-ph-till .mf-ph-h { color: #fff; text-align: center; }
.mf-front .mf-ph-till__lead { max-width: 760px; margin: 0 auto 18px; text-align: center; opacity: .92; }
/* Figures: one line of white words on the band. */
.mf-ph-figs ul { list-style: none; margin: 0 auto 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mf-ph-fig { padding: 8px 16px; border-radius: 50px; background: rgba(255, 255, 255, .14); font-size: 14px; }
.mf-ph-fig strong { margin-right: 6px; font-size: 16px; font-weight: 800; }
.mf-ph-fig span { opacity: .92; }
.mf-ph-logos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.mf-ph-logo {
	display: grid; place-items: center; padding: 8px; border: 3px solid #fff; border-radius: 20px;
	background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mf-ph-logo img { display: block; width: 100%; max-width: 120px; height: auto; border-radius: 8px; }
.mf-ph-logo:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(80, 0, 50, .25); }
.mf-ph-logo[aria-pressed="true"] { border-color: var(--mf-navy); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.mf-ph-till__answer {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 36px; margin-top: 18px; padding: 24px 28px;
	border-radius: 24px; background: #fff; color: var(--mf-ink, #3d3d3d); scroll-margin: 20px;
}
.mf-ph-till__answer[hidden], .mf-ph-till__found[hidden] { display: none; }
.mf-front .mf-ph-till__brand { margin: 0 0 14px; color: var(--mf-magenta); font-size: 20px; }
.mf-ph-steps { list-style: none; counter-reset: mf-ph-step; margin: 0; padding: 0; }
.mf-ph-steps li { counter-increment: mf-ph-step; position: relative; min-height: 30px; margin: 0 0 12px; padding: 3px 0 0 42px; }
.mf-ph-steps li::before {
	content: counter(mf-ph-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; background: var(--mf-magenta); color: #fff; font-size: 14px; font-weight: 800;
}
.mf-front .mf-ph-till__allows { margin: 0 0 8px; color: var(--mf-navy); font-weight: 700; }
.mf-ph-checks { list-style: none; margin: 0 0 18px; padding: 0; }
.mf-ph-checks li { position: relative; margin: 0 0 6px; padding-left: 26px; }
.mf-ph-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--mf-magenta); font-weight: 800; }
.mf-ph-till__other { margin-top: 22px; padding: 22px 24px; border-radius: 24px; background: #fff; color: var(--mf-ink, #3d3d3d); }
.mf-front .mf-ph-till__otherq { margin: 0 0 12px; color: var(--mf-navy); font-size: 18px; }
.mf-ph-till__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-ph-till__search { flex: 1 1 100%; max-width: 640px; display: flex; gap: 8px; min-width: 0; }
.mf-ph-till__search .mf-input { flex: 1; min-width: 0; }
.mf-ph-till__found { margin-top: 16px; }
.mf-front .mf-ph-till__verdict { margin: 0 0 6px; color: var(--mf-navy); font-weight: 700; }
.mf-ph-shops { list-style: none; margin: 0 0 14px; padding: 0; }
.mf-ph-shops li { border-bottom: 1px solid #ddd8cc; }
.mf-ph-shop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; color: inherit; text-decoration: none !important; }
.mf-ph-shop strong { display: block; color: var(--mf-navy); }
.mf-ph-shop span span { font-size: 14px; color: var(--mf-ink); }
.mf-ph-shop i { flex: none; color: var(--mf-magenta); font-size: 13px; }
.mf-ph-shop:hover strong { color: var(--mf-magenta); }

/* Folders */
.mf-ph-folders { padding: 64px 0; text-align: center; }
.mf-ph-folders__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 22px; }
.mf-ph-folders__item {
	flex: 0 1 250px; min-width: 0; padding: 18px; border: 0; border-radius: 28px; background: var(--mf-fbeige); cursor: pointer; transition: transform .3s;
}
.mf-ph-folders__item:nth-child(even) { background: #f8e9f3; }
.mf-ph-folders__item:hover { transform: scale(1.04) rotate(-1deg); }
.mf-ph-folders__item img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto; }
.mf-front .mf-ph-folders__cta { margin: 26px 0 0; }

/* Security: navy band. */
.mf-ph-safe { color: #fff; background: var(--mf-navy); }
.mf-ph-safe__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 36px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.mf-ph-safe__art { text-align: center; }
.mf-ph-safe__art img { width: 100%; max-width: 260px; }
.mf-front .mf-ph-safe h2, .mf-ph-safe a:not(.mf-ph-btn) { color: #fff; }
.mf-front .mf-ph-safe h2 { margin: 0 0 4px; font-size: 30px; font-weight: 900; }
.mf-front .mf-ph-safe__sub { margin: 0 0 18px; font-size: 17px; opacity: .85; }
.mf-ph-safe__facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mf-ph-safe__facts li { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .1); }
.mf-ph-safe__facts strong { display: block; margin-bottom: 2px; font-size: 16px; }
.mf-ph-safe__facts span { font-size: 14px; line-height: 1.35; }
.mf-front .mf-ph-safe__text > p { font-size: 15px; }

/* The app and where to start: beige, the text beside the phones, the reviews under them. */
.mf-ph-app { padding: 64px 0 40px; background: var(--mf-fbeige); color: var(--mf-navy); }
.mf-ph-app__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.mf-ph-app__icon { width: 68px; border-radius: 16px; margin-bottom: 12px; }
.mf-front .mf-ph-app h2 { margin: 0 0 8px; color: var(--mf-navy); font-size: 32px; font-weight: 900; line-height: 1.15; text-wrap: balance; }
.mf-ph-app__art { width: 100%; }
.mf-ph-start__qr { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 0; }
.mf-ph-start__qr a { line-height: 0; }
.mf-ph-start__qr img { display: block; height: 96px; width: auto; }
.mf-ph-start__badges { display: none; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mf-ph-start__badges > a { line-height: 0; }
.mf-ph-start__web { margin-top: 22px; padding: 20px 22px; border-radius: 24px; background: #fff; }
.mf-front .mf-ph-start__web h3 { margin: 0 0 8px; color: var(--mf-navy); font-size: 17px; font-weight: 500; }
.mf-ph-start__web h3 strong { font-weight: 800; }
.mf-front .mf-ph-start__web p:not(.mf-ph-actions) { margin: 0 0 14px; font-size: 15px; }
.mf-front .mf-ph-start__more { margin: 16px 0 0; font-size: 15px; }
.mf-ph-start__more a { color: var(--mf-navy); font-weight: 700; }
.mf-ph-app__reviews { padding-top: 24px; }
.mf-ph-app .mf-freview { border-radius: 20px; text-align: center; }
.mf-ph-app .mf-freview blockquote { margin-bottom: 16px; }
.mf-ph-app .mf-freview figcaption { font-size: 14px; }
.mf-ph-app .mf-freview time { opacity: .65; }

/* Questions, with the mascot. */
.mf-ph-faq { padding: 56px 0 64px; }
.mf-ph-faq__in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; max-width: 920px; }
.mf-ph-faq__art { width: 100%; }
.mf-front .mf-ph-faq__title { margin: 0 0 10px; color: var(--mf-magenta); font-size: 30px; font-weight: 900; line-height: 1.2; }
.mf-ph-questions { list-style: none; margin: 0 0 18px; padding: 0; }
.mf-ph-questions li { border-bottom: 1px solid #e4e1d9; }
.mf-ph-questions a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; color: var(--mf-navy); font-weight: 700; text-decoration: none; }
.mf-ph-questions a:hover { color: var(--mf-magenta); }
.mf-ph-questions i { flex: none; color: var(--mf-magenta); font-size: 13px; }

@media (max-width: 1199px) {
	.mf-ph-hero__in { gap: 28px; }
	.mf-front .mf-ph-hero__title { font-size: 36px; }
}
@media (max-width: 991px) {
	.mf-ph-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mf-ph-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mf-ph-safe__in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 44px; }
	.mf-ph-safe__art img { max-width: 200px; }
	.mf-ph-safe__facts { grid-template-columns: minmax(0, 1fr); }
	.mf-ph-till__answer { grid-template-columns: minmax(0, 1fr); }
	.mf-ph-app__in { grid-template-columns: minmax(0, 1fr); }
	.mf-ph-app__art { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 767px) {
	/* One column; the mascot over the title, the email card right under it. */
	.mf-ph-hero { padding: 18px 0 80px; }
	.mf-ph-hero__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.mf-ph-hero__art { order: -1; max-width: 280px; margin: 0 auto; }
	.mf-front .mf-ph-hero__title { font-size: 30px; margin-bottom: 18px; }
	.mf-ph-find { padding: 18px; }
	.mf-ph-find__row { flex-direction: column; border-radius: 24px; padding: 8px; }
	.mf-front .mf-ph-h, .mf-front .mf-ph-app h2 { font-size: 25px; }
	.mf-ph-adv { padding: 16px 0 44px; }
	.mf-ph-till { padding: 44px 0; border-radius: 32px 32px 0 0; }
	.mf-ph-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.mf-ph-logo { border-radius: 14px; }
	.mf-ph-till__answer, .mf-ph-till__other { padding: 18px; }
	.mf-ph-till__tools > .mf-ph-btn { flex: 1 1 100%; }
	.mf-ph-folders { padding: 44px 0; }
	.mf-ph-folders__item { flex-basis: 200px; }
	/* The four advantages: a row to swipe. */
	.mf-ph-adv__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -28px; padding: 0 28px 8px; scroll-padding: 0 28px; }
	.mf-ph-adv__card { flex: 0 0 78%; scroll-snap-align: start; }
	.mf-ph-app { padding: 44px 0 30px; }
	.mf-ph-start__web { padding: 18px; }
	.mf-ph-start__qr { display: none; }
	.mf-ph-start__badges { display: flex; }
	.mf-ph-faq { padding: 40px 0 48px; }
	.mf-ph-faq__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.mf-ph-faq__art { max-width: 140px; }
	.mf-front .mf-ph-faq__title { font-size: 25px; }
}
@media (max-width: 510px) {
	.mf-ph-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mf-ph-btn { font-size: 15px; }
	.mf-ph-hero .mf-ph-btn, .mf-ph-till__answer .mf-ph-btn, .mf-ph-start__web .mf-ph-btn, .mf-ph-till__found .mf-ph-btn { flex: 1 1 100%; }
	.mf-ph-till__search { flex-wrap: wrap; }
	.mf-ph-till__search .mf-input { flex: 1 1 100%; }
	.mf-ph-till__search .mf-ph-btn { flex: 1 1 100%; }
}
/* ---------- end of home ---------- */

/* ---------- 6b. home (views/public/home.js) ----------
   The home page reviewed in October 2026. The previous home (home-old.js, /?home=old)
   keeps section 6 above; the shared pieces are .mf-ph-btn, .mf-ph-eye, .mf-ph-find,
   .mf-ph-logos, .mf-ph-checks and .mf-ph-safe__facts, adjusted here under .mf-pl-*.
   Layout and rhythm only: colours, radii and shadows are the tokens of app.css.
   The questions block (.mf-pl-sec, .mf-pl-head, .mf-pl-h2, .mf-pl-faq, .mf-pl-more) also ends
   the content pages: content.js faqSection. */
/* rhythm: wide white sections, a soft one now and then */
.mf-front .mf-pl-sec { padding: 104px 0; }
.mf-front .mf-pl-sec--soft { background: var(--mf-fbeige); }
.mf-front .mf-pl-sec--tight { padding: 56px 0; }
/* The questions block ends the content pages a little apart from their last part; on the home it follows a band. */
.mf-pl-faqsec { margin-top: 100px; }
.mf-page-core_fid_home .mf-pl-faqsec, .mf-pl-final + .mf-pl-faqsec { margin-top: 0; }
.mf-pl-head { max-width: 720px; margin-bottom: 56px; }
.mf-pl-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mf-pl-narrow { max-width: 820px; }

/* titles: one size step above the site's, the second half in magenta */
.mf-front .mf-pl-title { margin: 0 0 22px; color: var(--mf-navy); font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.mf-front .mf-pl-h2 { margin: 0 0 18px; color: var(--mf-navy); font-size: 34px; font-weight: 800; line-height: 1.18; }
.mf-pl-accent { color: var(--mf-magenta); }
.mf-front .mf-pl-lead { margin: 0 0 32px; color: var(--mf-ink); font-size: 19px; line-height: 1.6; }
.mf-front .mf-pl-sub { margin: 0 0 24px; color: var(--mf-ink); font-size: 18px; line-height: 1.6; }
.mf-front .mf-pl-more { margin: 40px 0 0; text-align: center; }

/* 1. hero */
.mf-pl-hero { padding: 64px 0 0; }
.mf-pl-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.mf-front .mf-pl-find { max-width: 540px; background: var(--mf-fbeige); box-shadow: none; }
.mf-pl-find .mf-ph-find__row { background-color: var(--mf-surface); }
.mf-pl-find .mf-ph-find__row .mf-input { background: transparent; }
.mf-front .mf-pl-hero__new { margin: 18px 0 0; font-size: 15px; }
.mf-pl-hero__new a { font-weight: 700; }
.mf-pl-hero__art img { display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.mf-pl-trust {
	list-style: none; margin: 72px auto 0; padding-top: 32px; padding-bottom: 32px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
	border-top: 1px solid var(--mf-line);
}
.mf-pl-trust li { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.4; color: var(--mf-ink); }
.mf-pl-trust strong { display: block; color: var(--mf-navy); font-size: 16px; }
.mf-pl-trust i { flex: none; color: var(--mf-magenta); font-size: 20px; }

/* 2. brands: the home's logo tiles, quieter */
.mf-pl-sec .mf-ph-logos { gap: 16px; }
.mf-pl-sec .mf-ph-logo { border-width: 1px; }

/* what the profile allows: the site's checked list (.mf-ph-checks), as wide as the section title */
.mf-pl-usebox { max-width: 600px; margin: 72px auto 0; }
.mf-front .mf-pl-uses__title { margin: 0 0 24px; color: var(--mf-navy); font-size: 20px; }
.mf-pl-checks { margin-bottom: 32px; }
.mf-pl-checks li { margin-bottom: 16px; padding-left: 32px; color: var(--mf-ink); font-size: 16px; line-height: 1.55; }
.mf-pl-checks li::before { font-size: 18px; line-height: 1.4; }
.mf-pl-checks strong { color: var(--mf-navy); }
.mf-front .mf-pl-usebox .mf-ph-actions { justify-content: center; }

/* 3. three reasons */
.mf-pl-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mf-pl-reason { padding: 36px 32px; border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); }
.mf-front .mf-pl-reason h3 { margin: 0 0 10px; color: var(--mf-navy); font-size: 20px; }
.mf-front .mf-pl-reason p { margin: 0; color: var(--mf-ink); }

/* 4 and 7. picture beside the text */
.mf-pl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 72px; }
.mf-pl-split--reverse > .mf-pl-split__art { order: 2; }
.mf-pl-split__art img { display: block; width: 100%; max-width: 480px; margin: 0 auto; }

.mf-pl-steps { list-style: none; counter-reset: mf-pl-step; margin: 32px 0 36px; padding: 0; }
.mf-pl-steps li { counter-increment: mf-pl-step; position: relative; padding: 0 0 26px 64px; }
.mf-pl-steps li::before {
	content: counter(mf-pl-step); position: absolute; left: 0; top: 0;
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: var(--mf-magenta); color: var(--mf-surface); font-weight: 800;
}
/* the thread between the numbers */
.mf-pl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 50px; bottom: 6px; border-left: 2px dotted var(--mf-line-strong); }
.mf-front .mf-pl-steps h3 { margin: 8px 0 6px; color: var(--mf-navy); font-size: 19px; }
.mf-front .mf-pl-steps p { margin: 0; color: var(--mf-ink); }

/* 5. screens */
.mf-pl-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.mf-pl-feature img { display: block; width: 100%; margin-bottom: 20px; border-radius: var(--mf-radius-sm); background: var(--mf-fbeige); box-shadow: var(--mf-shadow); }
.mf-front .mf-pl-feature h3 { margin: 0 0 8px; color: var(--mf-navy); font-size: 18px; }
.mf-front .mf-pl-feature p { margin: 0; color: var(--mf-ink); font-size: 15px; }

/* 6. security: a soft panel instead of a dark band */
.mf-pl-safe {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; gap: 56px;
	padding: 56px 64px; border-radius: var(--mf-radius); background: var(--mf-fbeige);
}
.mf-pl-safe__art img { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
/* the dev home's fact boxes are drawn for its navy band (translucent white): white boxes on this light panel */
.mf-pl-safe .mf-ph-safe__facts { margin: 28px 0 24px; }
.mf-pl-safe .mf-ph-safe__facts li { background: var(--mf-surface); }
.mf-pl-safe .mf-ph-safe__facts strong { color: var(--mf-navy); }
.mf-pl-safe .mf-ph-safe__facts span { color: var(--mf-ink); }
.mf-front .mf-pl-safe__text { margin: 0 0 24px; color: var(--mf-ink); font-size: 15px; }

/* 7. app */
.mf-front .mf-pl-rating { margin: 0 0 18px; font-size: 15px; color: var(--mf-ink); }
.mf-pl-rating strong { color: var(--mf-navy); }
.mf-pl-stars { margin-right: 6px; color: var(--mf-magenta); }
.mf-front .mf-pl-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 36px; }
.mf-pl-badges a { line-height: 0; }
/* reviews: one quote at a time in the site's carousel (.mf-carousel), plain and centred */
/* every slide takes the height of the longest quote: a shorter one sits in its middle */
.mf-pl-rotator .mf-carousel__slide { display: flex; align-items: center; justify-content: center; }
.mf-pl-review { margin: 0; padding: 0 24px; text-align: center; }
.mf-pl-review blockquote { margin: 0 0 10px; color: var(--mf-ink); font-size: 16px; font-style: italic; line-height: 1.55; }
.mf-pl-review figcaption { color: var(--mf-ink); font-size: 14px; font-weight: 600; }

/* 8. questions */
.mf-pl-faq details { border-bottom: 1px solid var(--mf-line); }
.mf-pl-faq details:first-child { border-top: 1px solid var(--mf-line); }
.mf-pl-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 22px 4px; color: var(--mf-navy); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none;
}
.mf-pl-faq summary::-webkit-details-marker { display: none; }
.mf-pl-faq summary::after { content: "+"; flex: none; color: var(--mf-magenta); font-size: 26px; font-weight: 400; line-height: 1; transition: transform .2s; }
.mf-pl-faq details[open] summary::after { transform: rotate(45deg); }
/* The full answers of the FAQ (faqanswers.js): paragraphs, lists and contact lines. */
.mf-front .mf-pl-faq details p { margin: 0; padding: 0 4px 14px; color: var(--mf-ink); }
.mf-pl-faq details ul { margin: 0 0 14px; padding: 0 4px 0 26px; color: var(--mf-ink); }
.mf-pl-faq details li { margin-bottom: 6px; }
.mf-pl-faq details > :last-child { margin-bottom: 8px; }

/* 9. merchants: one quiet line */
.mf-pl-pro { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 44px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); }
.mf-front .mf-pl-pro__title { margin: 0 0 6px; color: var(--mf-navy); font-size: 22px; }
.mf-front .mf-pl-pro p { margin: 0; color: var(--mf-ink); }
.mf-pl-pro .mf-ph-btn { flex: none; }

/* 10. last call */
.mf-front .mf-pl-final { padding-bottom: 140px; }
.mf-pl-final__icon { display: block; width: 72px; margin: 0 auto 24px; border-radius: 18px; }
.mf-front .mf-pl-title--final { font-size: 40px; }
.mf-front .mf-pl-final__actions { justify-content: center; }

/* responsive */
@media (max-width: 991px) {
	.mf-front .mf-pl-sec { padding: 80px 0; }
	.mf-front .mf-pl-title { font-size: 38px; }
	.mf-front .mf-pl-h2 { font-size: 28px; }
	.mf-pl-hero__in, .mf-pl-split, .mf-pl-safe { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.mf-pl-hero__art img { max-width: 360px; }
	.mf-pl-split__art img { max-width: 360px; }
	.mf-pl-split--reverse > .mf-pl-split__art { order: 0; }
	.mf-pl-safe { padding: 44px 40px; }
	.mf-pl-safe__art img { max-width: 240px; }
	.mf-pl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mf-pl-reasons { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mf-pl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (max-width: 767px) {
	.mf-front .mf-pl-sec { padding: 64px 0; }
	.mf-front .mf-pl-sec--tight { padding: 40px 0; }
	.mf-pl-head { margin-bottom: 36px; }
	.mf-pl-hero { padding-top: 28px; }
	.mf-front .mf-pl-title { font-size: 27px; }
	.mf-front .mf-pl-title--final { font-size: 30px; }
	.mf-front .mf-pl-h2 { font-size: 25px; }
	.mf-front .mf-pl-lead, .mf-front .mf-pl-sub { font-size: 17px; }
	.mf-pl-hero__art { display: none; }
	.mf-pl-trust { margin-top: 48px; gap: 20px 16px; }
	.mf-pl-trust li { flex-direction: column; align-items: flex-start; gap: 6px; }
	.mf-pl-reason { padding: 26px 24px; }
	.mf-front .mf-pl-reason h3 { margin-bottom: 6px; font-size: 18px; }
	.mf-pl-features { grid-template-columns: minmax(0, 1fr); }
	.mf-pl-usebox { margin-top: 48px; }
	.mf-front .mf-pl-uses__title { font-size: 19px; }
	.mf-pl-safe { padding: 32px 22px; gap: 24px; }
	.mf-pl-pro { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
	.mf-front .mf-pl-final { padding-bottom: 96px; }
}
/* ---------- end of home (6b) ---------- */

/* ---------- 7. content pages ---------- */
/* How it works, how to request access: columns of steps */
.mf-fsteps { display: grid; gap: 28px; font-size: 14px; }
.mf-fsteps--3 { grid-template-columns: repeat(3, 1fr); }
.mf-fsteps--2 { grid-template-columns: repeat(2, 1fr); }
.mf-fstep { padding: 35px; }
.mf-front .mf-fstep__title { color: var(--mf-navy); font-size: 24px; text-align: center; margin: 0 0 14px; }
.mf-fstep__icon { display: block; width: 125px; margin: 0 auto 14px; }
.mf-fstep__number { color: var(--mf-navy); font-size: 24px; font-weight: 700; text-align: center; margin: 28px 0 0 !important; }
.mf-fstep li { margin-bottom: 14px; }

/* ---------- access: "How to request access?" (the code request form, the application as the other way) ---------- */
.mf-pacc [hidden] { display: none !important; }
.mf-pacc__logged { text-align: center; margin-bottom: 18px !important; }
.mf-pacc__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.mf-pacc__card { min-width: 0; padding: 32px 36px; border-radius: 20px; }
.mf-pacc__card--form { background: var(--mf-surface); border: 2px solid var(--mf-magenta); }
.mf-pacc__card--app { background: var(--mf-fbeige); font-size: 14px; }
.mf-front .mf-pacc__card h2 { margin: 0 0 16px; font-size: 22px; }
.mf-front .mf-pacc__card--app h2 { font-size: 18px; margin-bottom: 8px; }
.mf-pacc .mf-pacc__eyebrow { margin: 0 0 4px; color: var(--mf-magenta); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mf-pacc .mf-form { gap: 14px; max-width: 520px; }
.mf-pacc .mf-field label { font-size: .95rem; color: var(--mf-navy); }
.mf-pacc .mf-input { min-height: 48px; font-size: 1rem; border-radius: 10px; }
.mf-pacc .mf-form__actions { margin-top: 2px; }
.mf-pacc .mf-form__actions .mf-btn { min-height: 48px; padding: 10px 28px; border-radius: 24px; font-size: 1.05rem; }
.mf-pacc__stages { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 22px 0 0; padding: 0; font-size: 14px; color: var(--mf-ink); }
.mf-pacc__stages li { display: flex; align-items: center; gap: 8px; }
.mf-pacc__stages li + li::before { content: "\203A"; margin-right: 2px; color: var(--mf-line-strong); font-size: 18px; line-height: 1; }
.mf-pacc__stages li.is-current { color: var(--mf-navy); font-weight: 700; }
.mf-pacc__num {
	flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: #b9c4cf; color: #fff; font-size: 12px; font-weight: 700;
}
.mf-pacc__stages li.is-current .mf-pacc__num { background: var(--mf-navy); }
.mf-pacc .mf-pacc__new { margin: 18px 0 0; font-size: 14px; color: var(--mf-ink); }
.mf-pacc__new a { font-weight: 700; color: var(--mf-magenta); }
.mf-pacc__qr { display: grid; gap: 14px; justify-items: start; margin-top: 16px; }
.mf-pacc__qr img { display: block; width: 100%; max-width: 230px; height: auto; }
.mf-pacc__narrow { display: none; }
.mf-pacc__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.mf-pacc__badges img { display: block; height: 52px; width: auto; }

@media (max-width: 991px) {
	.mf-pacc__grid { grid-template-columns: minmax(0, 1fr); }
	.mf-pacc__qr { grid-template-columns: repeat(2, minmax(0, 230px)); }
}
@media (max-width: 767px) {
	/* A phone: the store button of the device instead of the QR codes, and the field in the first screen. */
	.mf-pacc__wide { display: none; }
	.mf-pacc__narrow { display: block; }
	.mf-page-core_fid_access .mf-fbanner { padding: 20px 18px; }
	.mf-front .mf-page-core_fid_access .mf-fbanner h1 { font-size: 21px; }
	.mf-page-core_fid_access .mf-fbanner p { margin-bottom: 0; font-size: 15px; }
	.mf-pacc__stages { flex-direction: column; align-items: flex-start; }
	.mf-pacc__stages li + li::before { content: none; }
	.mf-pacc.mf-fmainwrap { padding-top: 20px; }
	.mf-pacc__card { padding: 22px 18px; border-radius: 16px; }
	.mf-front .mf-pacc__card h2 { font-size: 20px; }
	.mf-pacc .mf-form__actions .mf-btn { flex: 1 1 100%; }
}

/* The 4 advantages */
.mf-fadv { scroll-margin-top: 90px; }
.mf-fadv__in { display: grid; grid-template-columns: 6fr 10fr; gap: 28px; align-items: center; padding: 70px 0; }
.mf-fadv--box { background: var(--mf-fbeige); border-radius: 30px; }
.mf-fadv--box .mf-fadv__in { grid-template-columns: 10fr 6fr; }
.mf-fadv__in > .mf-fdownload { grid-column: 1 / -1; margin-top: 28px; }
.mf-fadv__art img { width: 90%; }
.mf-front .mf-fadv__text h2 { margin-top: 0; }
.mf-front .mf-fadv__lead { color: var(--mf-magenta); font-size: 18px; font-weight: 700; line-height: 1.28; margin: 0 0 14px; }
.mf-front .mf-fadv__text h3 { color: var(--mf-navy); font-size: 16px; }

/* The mobile app */
.mf-fmobile { padding-bottom: 0; }
.mf-fmobile__in { display: grid; grid-template-columns: 10fr 6fr; gap: 28px; }
.mf-fmobile__art { text-align: center; }
.mf-fmobile__art img { width: 100%; max-width: 400px; }
.mf-fnumbers { list-style: none; counter-reset: mf-fnumber; margin: 14px 0; padding: 0; }
.mf-fnumbers li { counter-increment: mf-fnumber; position: relative; min-height: 40px; margin-bottom: 7px; padding: 8px 0 8px 50px; }
.mf-fnumbers li::before {
	content: counter(mf-fnumber); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; background: var(--mf-magenta); color: #fff; font-weight: 800; font-size: 14px;
}
.mf-page-core_fid_mobileapp .mf-fblock { margin-top: 70px; }

/* Questions and answers (views/public/faqs.js): groups of light rows in one column,
   an address under each answer, the contact details in a closing box */
.mf-ffaqs .mf-fqa__groups { justify-content: center; margin-bottom: 42px; }
.mf-ffaqs .mf-fqa__groups .mf-chip { flex: none; font-size: 14px; font-weight: 600; color: var(--mf-navy); text-decoration: none; white-space: nowrap; }
.mf-fqa__count { font-weight: 400; color: var(--mf-ink); }
.mf-fqa__list, .mf-fqa__more { max-width: 820px; margin-left: auto; margin-right: auto; }
.mf-fqa__group { margin-bottom: 72px; scroll-margin-top: 95px; }
.mf-front .mf-fqa__group > h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-magenta); }
.mf-fqa { border-bottom: 1px solid #ddd; scroll-margin-top: 90px; }
.mf-front .mf-fqa__head { margin: 0; font-size: 16px; }
.mf-fqa__q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 4px; border: 0;
	background: none; font: inherit; font-weight: 700; line-height: 1.4; color: var(--mf-navy); text-align: left; cursor: pointer;
}
.mf-fqa__q:hover { color: var(--mf-magenta); }
.mf-fqa__q small { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
.mf-fqa__q i { flex: none; font-size: 12px; color: var(--mf-magenta); transition: transform .15s; }
.mf-fqa__q[aria-expanded="true"] i { transform: rotate(180deg); }
.mf-fqa__panel { margin: 0 0 16px; padding: 20px 24px; border-radius: 12px; background: color-mix(in srgb, var(--mf-fbeige) 40%, transparent); font-size: 15px; overflow-wrap: anywhere; }
.mf-front .mf-fqa__panel > :last-child { margin-bottom: 0; }
.mf-fqa__more {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
	margin-top: 56px; padding: 28px 32px; border-radius: 20px; background: var(--mf-fbeige);
}
.mf-fqa__more > div { min-width: 0; }
.mf-front .mf-fqa__more h2 { margin: 0 0 6px; font-size: 20px; }
.mf-front .mf-fqa__lines { margin: 0 0 4px; font-weight: 600; }
.mf-fqa__lines a { color: var(--mf-navy); text-decoration: none; }
.mf-fqa__call i { display: none; }
.mf-front .mf-fqa__hours { margin: 0; font-size: 13px; color: var(--mf-ink); }
.mf-fqa__more .mf-fbtn { margin-top: 0; }
@media (max-width: 991px) {
	/* The header does not follow the scroll at this width. */
	.mf-fqa, .mf-fqa__group { scroll-margin-top: 12px; }
}
@media (max-width: 767px) {
	/* The groups in one row that is swiped. */
	.mf-ffaqs .mf-fqa__groups { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -28px 28px; padding: 0 28px 8px; scrollbar-width: none; }
	.mf-fqa__q { padding: 18px 2px; }
	.mf-fqa__panel { padding: 16px; }
	.mf-fqa__more { padding: 22px; }
	.mf-fqa__more > *, .mf-fqa__more .mf-fbtn { width: 100%; }
	/* The phone number is a button that calls. */
	.mf-front .mf-fqa__lines { display: grid; gap: 10px; margin-bottom: 10px; }
	.mf-fqa__lines > span { display: none; }
	.mf-fqa__call { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--mf-navy); border-radius: 50px; font-weight: 800; }
	.mf-fqa__call i { display: inline; }
}

/* About, contact form */
.mf-page-core_fid_about .mf-fbanner { background: #004070 url("/images/theme/front/headerfreedelity.png") center / cover no-repeat; }
.mf-fabout { padding-bottom: 28px; }
.mf-fceo { margin-top: 42px; margin-bottom: 42px; padding-top: 28px; border-radius: 30px; background: var(--mf-fbeige); color: var(--mf-navy); }
.mf-fceo__in { display: grid; grid-template-columns: 6fr 10fr; gap: 14px; align-items: end; }
.mf-fceo__art img { display: block; width: 100%; }
.mf-fceo__text { padding: 42px 14px 70px; }
.mf-front .mf-fceo__text h2 { margin-top: 0; }
.mf-fceo__quote { color: var(--mf-navy); font-size: 24px; font-weight: 700; line-height: 1.28 !important; margin: 28px 0 !important; }
.mf-fceo a { color: var(--mf-navy); }
.mf-fcontact { scroll-margin-top: 60px; }
.mf-fcontact__in { display: grid; gap: 14px; }
.mf-fcontact__address { font-style: normal; }
.mf-fcontact__lines { font-size: 18px; font-weight: 700; }
.mf-fcontact__lines a { color: var(--mf-magenta); text-decoration: none; line-height: 2; }
.mf-fcontact__lines i { margin-right: 14px; }
.mf-ffield__label { font-weight: 700; font-size: .92rem; }
.mf-ffield__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mf-ffield--address .mf-ffield__row { grid-template-columns: 2fr 1fr 1fr; }
.mf-fcontact__form .is-required > label::after, .mf-ffield__label.is-required::after { content: " *"; color: #db2828; }
.mf-fcontact__form .mf-input.is-invalid { border-color: #e0b4b4; background: #fff6f6; }
.mf-fcontact__form .mf-fbtn { margin-top: 0; }

/* Managing my consents */
.mf-front .mf-fconsents h2 { margin-bottom: 56px; }
.mf-front .mf-fconsents hr:not(.mf-fhr-big) { margin: 42px 0; }
.mf-fconsents__where { color: var(--mf-magenta); font-size: 18px; font-weight: 700; text-align: center; line-height: 1.28 !important; }
.mf-fconsents__steps { display: grid; grid-template-columns: 6fr 10fr; gap: 28px; align-items: center; }
.mf-fconsents__steps > * { min-width: 0; }
.mf-fconsents__steps li { margin: 10px 0; }
.mf-fshots .mf-carousel__view { border: 10px solid #f7f7f7; border-radius: 10px; background: #f7f7f7; }
.mf-fshots .mf-carousel__slide { text-align: center; }
.mf-fshots img { max-width: 100%; max-height: 400px; width: auto; vertical-align: middle; }

/* Unknown page (views/public/notfound.js), and the list of destinations it shares with the
   contact page (views/public/destinations.js) */
.mf-fnotfound { min-height: 60vh; }
.mf-fnotfound__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 42px; align-items: center; }
.mf-fnotfound__art { width: 100%; max-width: 420px; justify-self: center; }
.mf-front .mf-fnotfound__maybe { margin: 22px 0 2px; font-weight: 700; color: var(--mf-navy); }
.mf-front .mf-fnotfound__home { margin: 14px 0 0; }
.mf-fdest { list-style: none; margin: 0; padding: 0; }
.mf-fdest li { border-bottom: 1px solid #e6e6e6; }
.mf-fmain .mf-fdest a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 4px; color: var(--mf-navy); text-decoration: none; }
.mf-fdest__text { min-width: 0; }
.mf-fdest strong { display: block; font-weight: 700; line-height: 1.35; }
.mf-fdest small { display: block; margin-top: 2px; font-size: 13px; color: var(--mf-ink); }
.mf-fdest i { flex: none; font-size: 12px; color: var(--mf-magenta); }
.mf-fdest a:hover strong { color: var(--mf-magenta); }
@media (max-width: 767px) {
	.mf-fnotfound__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mf-fnotfound__art { max-width: 230px; }
	.mf-fnotfound__home .mf-fbtn { display: block; }
}

/* ---------- 8. legal pages ---------- */
.mf-flegal { min-height: 700px; }
.mf-flegal .mf-legaltext { font-size: 14px; line-height: 1.6; }
.mf-front .mf-flegal .mf-legaltext h1 { font-size: 28px; }
.mf-front .mf-flegal .mf-legaltext h2 { font-size: 24px; }
.mf-flegal .mf-legaltext hr.mf-legaltext__fat { border-top: 10px solid #ddd; }
.mf-flegal .mf-legaltext section { scroll-margin-top: 90px; }
.mf-front .mf-flegal .mf-legaltext h3 { margin: 28px 0 14px; }
.mf-flegal .mf-legaltext :is(ul, ol) { padding-left: 40px; }
.mf-flegal .mf-legaltext li { margin-bottom: 0; }
/* The privacy policy: short centred rules between sections, bullet lists, and
   the two blocks its text lays out with nested panels (the box of the
   publisher in section 1, the table of processings in section 3). */
.mf-flegal .mf-legaltext--frontprivacy hr { border-top-color: var(--mf-navy); margin: 84px auto; width: 30%; }
.mf-flegal .mf-legaltext--frontprivacy ol { list-style-type: disc; }
.mf-flegal #privacy2 ol:first-of-type { list-style-type: decimal; }
.mf-flegal #privacy1 .mf-legaltext__rich > div > div { width: 50%; margin: 0 auto; padding: 14px; background: #fff; }
.mf-flegal #privacy3 .mf-legaltext__rich > div > div { display: table-row; }
.mf-flegal #privacy3 .mf-legaltext__rich > div > div > div { display: table-cell; padding: 14px 14px 14px 0; border-bottom: 1px solid #eee; min-width: 200px; }
.mf-flegal #privacy3 .mf-legaltext__rich > div > div:first-child > div {
	font-weight: bold; text-align: center; padding: 14px 7px; border-top: 1px solid var(--mf-navy); border-bottom: 0;
	background: #cbd0d9; color: var(--mf-navy);
}
.mf-flegal #privacy3 .mf-legaltext__rich > div > div:last-child > div { border-bottom: 5px solid #eee; }

/* The reading layout (renderLegal { guide }, styled in p-places.css) inside the public shell:
   the contents column sticks under the part of the public header that stays at the top. */
.mf-flegal { --mf-top: var(--mf-fnav); }
.mf-flegal .mf-legaltext--guide { font-size: 15px; line-height: 1.65; }
.mf-front .mf-flegal .mf-legaltext--guide h2 { margin: 0; font-size: 20px; }
.mf-flegal .mf-legalguide__toc ol { padding-left: 0; }
.mf-flegal .mf-legalguide__toc a, .mf-flegal .mf-legalguide__top a, .mf-flegal .mf-legaltext__see a { text-decoration: none; }
.mf-flegal .mf-legaltext--guide li { margin-bottom: .5em; }
.mf-flegal .mf-legaltext--guide #privacy1 .mf-legaltext__rich > div > div { width: auto; padding: 14px 18px; background: var(--mf-fbeige); }
@media (max-width: 991px) {
	/* The contents bar sticks under the public header, as wide as the window (the container has side padding). */
	.mf-flegal { --mf-top: var(--mf-fnav); }
	.mf-flegal .mf-legalguide__toc { margin-left: -42px; margin-right: -42px; }
	.mf-flegal .mf-legalguide__opener { padding-left: 42px; padding-right: 42px; }
}
@media (max-width: 767px) {
	.mf-flegal .mf-legalguide__toc { margin-left: -28px; margin-right: -28px; }
	.mf-flegal .mf-legalguide__opener { padding-left: 28px; padding-right: 28px; }
}
@media print {
	.mf-fmain:has(.mf-flegal), .mf-flegal { padding-top: 0; }
}

/* ---------- 9. responsive ---------- */
@media (max-width: 1199px) {
	.mf-fmain { padding-top: 12px; }
	.mf-fcontainer { padding-left: 42px; padding-right: 42px; }
	.mf-fbig { font-size: 130%; }
	.mf-fbanner { padding: 56px 42px; margin: 0 14px; }
	.mf-fmainwrap { padding: 56px 0; }
	.mf-fapp, .mf-fceo, .mf-fadv--box { width: 95%; }
	.mf-fapp { background-size: contain; background-position: 500px 0; }
	.mf-flogos, .mf-freviews { width: 90%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 991px) {

	.mf-fbanner__in { width: 95%; }
	.mf-fsteps--3, .mf-fsteps--2 { grid-template-columns: 1fr; }
	.mf-fstep__icon { width: 125px; }
	.mf-fadv__in, .mf-fadv--box .mf-fadv__in { grid-template-columns: 1fr; text-align: center; }
	.mf-fadv__art { order: -1; }
	.mf-fadv__art img { max-width: 250px; }
	.mf-fpad { padding: 0; }
	.mf-fceo__in { grid-template-columns: 1fr; text-align: center; }
	.mf-fceo__art { order: 2; max-width: 420px; margin: 0 auto; }
	.mf-fceo__text { padding-bottom: 14px; }
	.mf-fcontact__address { text-align: center; }
	.mf-fconsents__steps { grid-template-columns: 1fr; }
	.mf-fmobile__in { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.mf-fmain { padding-top: 0; }
	.mf-fcontainer { padding-left: 28px; padding-right: 28px; }
	.mf-front hr { margin: 14px 0; }
	.mf-carousel__arrow { display: none; }


	.mf-fapp { background-size: 40%; background-position: top right; }
	.mf-fapp > .mf-fcontainer:first-child { padding: 98px 14px 28px; }
	.mf-fapp__download { width: 100%; }
	.mf-fapp__reviews { padding-top: 0; }
	.mf-fdownload__stores { grid-template-columns: 1fr; }
	.mf-fadv__in { padding: 42px; }
	.mf-fadv { scroll-margin-top: 10px; }
	.mf-flegal #privacy1 .mf-legaltext__rich > div > div { width: 100%; }
	.mf-flegal #privacy3 .mf-legaltext__rich > div > div > div { display: block; min-width: 0; }
	.mf-flegal .mf-legaltext--frontprivacy hr { margin: 42px auto; }
	.mf-ffield__row, .mf-ffield--address .mf-ffield__row { grid-template-columns: 1fr; }
}
@media (max-width: 510px) {
	.mf-fbtn { font-size: 16px; }
	.mf-fbtn + .mf-fbtn { margin-left: 0; }
	.mf-fstep__icon { width: 75px; }
}
@media (max-width: 440px) {
	.mf-fmainwrap { padding: 42px 0 28px; }
	.mf-fstep { padding: 14px; }
	.mf-fbanner { padding: 28px; margin-top: 14px; font-size: 17px; }
	.mf-front .mf-fbanner h1 { font-size: 26px; }
	.mf-fbanner__motto { font-size: 19px; }
	.mf-fadv__in { padding: 21px; }
	.mf-fdownload__stores img { height: 90px; }
	.mf-fceo__text { padding-top: 14px; }
}

/* ============================================================
   public-b: connect, sign-up, store map, store, contact pages.
   Add rules below this line only.
   ============================================================ */

/* ---------- shared: result blocks, required marks ---------- */
.mf-pub-result { display: flex; align-items: flex-start; gap: 22px; padding: 28px 30px; border-radius: var(--mf-radius-sm); }
.mf-pub-result > i { flex: none; font-size: 2.6rem; line-height: 1; }
.mf-pub-result > div { min-width: 0; }
.mf-front .mf-pub-result h2, .mf-pub-result h2 { font-size: 1.4rem; font-weight: 700; color: inherit; margin: 0 0 .6em; }
.mf-pub-result p:last-child { margin-bottom: 0; }
.mf-pub-result--ok { background: var(--mf-green-soft); color: #3d6b00; }
.mf-pub-result--error { background: var(--mf-red-soft); color: var(--mf-red); }
.mf-connect .is-required > label::after, .mf-signup .is-required > label::after,
.mf-pcontact .is-required > label::after { content: " *"; color: var(--mf-red); }
.mf-connect fieldset, .mf-signup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mf-connect a, .mf-signup a, .mf-pcontact a, .mf-pshop a, .mf-page-core_fid_storemap a { text-decoration: none; }
.mf-connect a.mf-btn, .mf-signup a.mf-btn, .mf-pshop__none a.mf-btn { color: #fff; }

/* ---------- connect: the connection page (e-mail, then code; password; recovery paths) ---------- */
.mf-login { max-width: 1040px; margin: 0 auto; padding: 40px 20px 60px; }
.mf-login [hidden] { display: none !important; }
.mf-login fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mf-login__logged { max-width: 520px; margin: 0 auto 18px !important; text-align: center; }
.mf-login__card {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 48px;
	background: var(--mf-surface); border: 1px solid var(--mf-line); border-radius: 20px; padding: 48px 56px;
}
.mf-login__art { text-align: center; }
.mf-login__art img { max-width: 100%; height: auto; }
.mf-login__main { width: 100%; max-width: 440px; min-width: 0; justify-self: center; }
.mf-front .mf-login__title { color: var(--mf-navy); font-size: 1.75rem; margin: 0 0 12px; outline: 0; }
.mf-login .mf-login__lead { margin: 0 0 20px; color: var(--mf-ink); }
.mf-login__address { overflow-wrap: anywhere; }
.mf-login .mf-form { gap: 16px; }
.mf-login .mf-field label { font-size: .95rem; color: var(--mf-navy); }
.mf-login .mf-input { min-height: 48px; font-size: 1rem; border-radius: 10px; }
.mf-login .mf-field.is-invalid .mf-input { border-color: var(--mf-red); }
.mf-login .mf-field.is-invalid label { color: var(--mf-red); }
.mf-login .mf-form__actions { margin-top: 4px; }
.mf-login .mf-form__actions .mf-btn { flex: 1 1 100%; min-height: 48px; padding: 10px 26px; border-radius: 24px; font-size: 1.05rem; }
.mf-login .mf-form__actions a.mf-btn { color: #fff; text-decoration: none; }
.mf-login .mf-note { margin: 0; }
.mf-login hr { border-top: 1px solid var(--mf-line); margin: 20px 0 16px; }
.mf-login__link {
	border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; text-align: inherit;
	color: var(--mf-navy); text-decoration: underline; text-underline-offset: 2px;
}
.mf-login__link:hover:not(:disabled) { color: var(--mf-magenta); }
.mf-login__link:focus-visible, .mf-login__row:focus-visible { outline: 2px solid var(--mf-navy); outline-offset: 3px; border-radius: 4px; }
.mf-login__link:disabled { color: var(--mf-ink); text-decoration: none; cursor: default; }
.mf-login__link--quiet { font-weight: 600; }
.mf-login__link i { margin-right: 6px; font-size: .8em; }
.mf-login .mf-login__alt { margin: 18px 0 0; text-align: center; }
.mf-login .mf-login__new { margin: 14px 0 0; text-align: center; color: var(--mf-ink); }
.mf-login__new a { font-weight: 700; color: var(--mf-magenta); text-decoration: underline; text-underline-offset: 2px; }
.mf-login .mf-login__foot { margin: 14px 0 0; text-align: center; font-size: .92rem; }

/* The six boxes of the code */
.mf-login__otp { display: grid; grid-template-columns: repeat(6, minmax(0, 54px)); gap: 10px; }
.mf-login .mf-login__digit { min-height: 60px; padding: 4px; text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--mf-navy); }
.mf-login .mf-login__resend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 0; }
.mf-login__wait { font-size: .85rem; color: var(--mf-ink); font-variant-numeric: tabular-nums; }

/* "I cannot sign in": one row per recovery path */
.mf-login__rows { list-style: none; margin: 4px 0 0; padding: 0; }
.mf-login__rows li + li { border-top: 1px solid var(--mf-line); }
.mf-login__row {
	display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 2px; border: 0; background: none;
	font: inherit; text-align: left; color: var(--mf-ink); cursor: pointer;
}
.mf-login__rowicon {
	flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: var(--mf-bg); color: var(--mf-navy);
}
.mf-login__rowtext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mf-login__rowtext strong { color: var(--mf-navy); }
.mf-login__rowtext small { font-size: .85rem; line-height: 1.4; color: var(--mf-ink); }
.mf-login__chevron { flex: none; color: var(--mf-navy); font-size: .85rem; }
.mf-login__row:hover .mf-login__rowtext strong { color: var(--mf-magenta); }
.mf-login__tips { margin: 0; padding-left: 1.3em; }
.mf-login__tips li { margin-bottom: 10px; line-height: 1.5; }

/* The card search and the result blocks, inside the card */
.mf-login .mf-pub-result { padding: 20px 22px; gap: 16px; margin-bottom: 20px; }
.mf-login .mf-pub-result > i { font-size: 1.8rem; }
.mf-front .mf-login .mf-pub-result h2 { font-size: 1.15rem; }

@media (max-width: 991px) {
	/* No illustration beside the form: one field and one button per screen. */
	.mf-login__card { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; padding: 36px 28px; }
	.mf-login__art { display: none; }
}
@media (max-width: 600px) {
	.mf-login { padding: 12px 12px 40px; }
	.mf-login__card { padding: 26px 18px; border-radius: 16px; }
	.mf-front .mf-login__title { font-size: 1.45rem; }
	.mf-login__otp { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
	.mf-login .mf-login__digit { min-height: 54px; font-size: 1.4rem; }
	.mf-login .mf-dateparts .mf-select { padding-left: 10px; padding-right: 24px; background-position: right 8px center; }
}

/* ---------- sign-up (views/public/createprofile.js): the e-mail, the code, then the form ---------- */
.mf-signup { max-width: 1127px; margin: 0 auto; padding: 40px 20px 60px; }
.mf-su__card { background: var(--mf-surface); border: 1px solid #ddd; border-radius: 20px; padding: 40px 42px; }
.mf-su__card--narrow { max-width: 520px; margin: 0 auto; }
.mf-front .mf-su__title, .mf-su__title { font-size: 1.7rem; font-weight: 700; color: var(--mf-navy); margin: 0 0 .4em; }
.mf-su__lead { margin: 0 0 20px; }
.mf-su__step { display: grid; gap: 14px; }
.mf-su__wide { width: 100%; min-height: 46px; border-radius: 24px; font-size: 1.02rem; }
.mf-signup a.mf-su__wide.mf-btn--primary { color: #fff; }
.mf-su__rc { margin: 0; font-size: .8rem; color: var(--mf-ink); }
.mf-signup .mf-su__rc a, .mf-signup .mf-su__alt a, .mf-signup .mf-note a, .mf-signup .mf-su__consent a { text-decoration: underline; font-weight: 700; }
.mf-su__alt { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--mf-line); font-size: .92rem; }
.mf-su__star { color: var(--mf-magenta); font-weight: 700; }
.mf-su__opt { font-weight: 400; color: var(--mf-ink); }
.mf-su__err { margin: 0; font-size: .85rem; font-weight: 700; color: var(--mf-red); }
.mf-signup .is-invalid > .mf-input, .mf-su__birthbox.is-invalid .mf-input { border-color: var(--mf-red); background: #fdf3f2; }
.mf-signup .mf-input.is-valid { border-color: var(--mf-green); }
.mf-signup .mf-btn--link { font-size: inherit; cursor: pointer; }
/* the code: one field, wide enough for six digits apart */
.mf-signup .mf-su__code {
	min-height: 60px; text-align: center; font-size: 1.9rem; font-weight: 700; letter-spacing: .45em; padding-left: calc(14px + .45em);
	color: var(--mf-navy); font-variant-numeric: tabular-nums;
}
.mf-su__done { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.mf-su__done p { margin: 0; }
.mf-su__doneicon {
	flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--mf-green-soft); color: var(--mf-green); font-size: 1.1rem;
}
/* the form: three groups, two columns on a wide screen */
.mf-su__verified { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; overflow-wrap: anywhere; }
.mf-su__verified > span { min-width: 0; }
.mf-su__legend { margin: 0 0 14px; font-size: .85rem; color: var(--mf-ink); }
.mf-su__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 16px 20px; align-items: start; }
.mf-su__col { display: grid; gap: 16px; min-width: 0; }
.mf-su__col:first-child { grid-row: 1 / span 3; }
.mf-su__submit, .mf-su__foot { grid-column: 2; }
.mf-signup fieldset.mf-su__grp { border: 1px solid var(--mf-line); border-radius: 14px; padding: 16px 18px 18px; display: grid; gap: 14px; }
.mf-su__grp > legend { float: left; width: 100%; padding: 0; font-weight: 700; color: var(--mf-navy); }
.mf-su__grp > legend + * { clear: both; }
.mf-su__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mf-su__gender legend, .mf-su__birthbox legend { padding: 0; font-weight: 700; font-size: .92rem; }
.mf-su__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-su__chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; cursor: pointer;
	border: 1px solid var(--mf-line-strong); border-radius: 20px; background: var(--mf-surface);
}
.mf-su__chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--mf-navy); }
.mf-su__chip:has(input:checked) { border-color: var(--mf-navy); box-shadow: inset 0 0 0 1px var(--mf-navy); }
.mf-su__chip:has(input:focus-visible) { outline: 2px solid var(--mf-magenta); outline-offset: 2px; }
.mf-su__birth { display: grid; grid-template-columns: 76px 76px 104px; gap: 10px; }
.mf-su__birth .mf-input { text-align: center; padding: 8px 6px; }
.mf-su__manual > summary { cursor: pointer; color: var(--mf-navy); text-decoration: underline; font-size: .92rem; }
.mf-su__manualin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.mf-su__span { grid-column: 1 / -1; }
.mf-signup .mf-su__sec { margin: 0; font-size: .95rem; font-weight: 700; color: var(--mf-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mf-su__badge { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mf-ink); background: var(--mf-fbeige); border-radius: 8px; padding: 2px 8px; }
.mf-su__small { margin: 0; font-size: .85rem; color: var(--mf-ink); }
.mf-su__legits { display: grid; gap: 14px; }
.mf-su__legit { display: grid; gap: 2px; }
.mf-su__more { justify-self: start; margin-left: 58px; font-size: .88rem; }
.mf-su__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.mf-su__consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--mf-navy); }
.mf-su__consent label { cursor: pointer; }
.mf-su__consent.is-invalid input { outline: 2px solid var(--mf-red); outline-offset: 1px; }
.mf-su__next { margin: 0; font-size: .92rem; }
@media (max-width: 860px) {
	.mf-su__form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.mf-su__col:first-child { grid-row: auto; }
	.mf-su__submit, .mf-su__foot { grid-column: 1; }
	.mf-su__card { padding: 26px 18px; }
	.mf-front .mf-su__title, .mf-su__title { font-size: 1.4rem; }
	/* the button stays in view while the form scrolls */
	.mf-su__submit { position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 10px 18px; background: var(--mf-surface); box-shadow: 0 -6px 12px rgba(120, 110, 90, .12); }
}
@media (max-width: 420px) {
	.mf-su__two, .mf-su__manualin { grid-template-columns: minmax(0, 1fr); }
	.mf-signup .mf-su__code { font-size: 1.6rem; letter-spacing: .3em; padding-left: calc(14px + .3em); }
}

/* ---------- store map ---------- */
/* The map fills the window under the public header (its height is not the portal's --mf-top). */
.mf-page-core_fid_storemap .mf-storemap { --mf-storemap-h: max(480px, calc(100vh - var(--mf-fnav, 135px) - 40px)); border-radius: 0; box-shadow: none; }

/* ---------- store page ---------- */
.mf-page-fidel_storeinfos { background: #f7f7f7; padding: 48px 16px 64px; }
.mf-pshop { margin: 0 auto; box-shadow: none; border-radius: 0; }
.mf-pshop .mf-shop__nav { position: static; }
.mf-pshop__advantages { background: var(--mf-magenta); }
.mf-pshop .mf-pshop__connect { margin: 0; padding: 0 20px 26px; text-align: center; font-weight: 700; color: #fff; }
.mf-pshop .mf-pshop__connect a, .mf-pshop .mf-shop__group a { color: #fff; text-decoration: underline; }
.mf-pshop__none { max-width: 640px; margin: 0 auto; text-align: center; }
.mf-pshop__none object { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.mf-pshop__none .mf-empty { padding: 20px 10px; font-size: 1.15rem; }

/* ---------- contact (views/public/contact.js): what it is about, the shortcuts, the form ---------- */
.mf-pcontact { max-width: 1127px; margin: 0 auto; padding: 48px 20px 64px; font-size: .95rem; }
.mf-pask { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.mf-front .mf-pask h3 { margin: 0 0 28px; font-size: 1.3rem; color: var(--mf-navy); }
.mf-pask .mf-pask__topics { justify-content: center; margin-bottom: 0; }
/* The subjects without an outline, on the site's beige; the chosen one keeps the chips' magenta outline, on white. */
.mf-pask__topics .mf-chip { min-height: 40px; padding: 6px 18px; border-color: transparent; border-radius: 20px; background: var(--mf-fbeige); font: inherit; }
.mf-pask__topics .mf-chip:hover { border-color: var(--mf-magenta); }
.mf-pask__topics .mf-chip[aria-pressed="true"] { border-color: var(--mf-magenta); background: var(--mf-surface); font-weight: 700; }
/* One column: the shortcuts of the subject, the form, then the company's details; no frames. */
.mf-pcontact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 800px; margin: 0 auto; }
.mf-pcontact__who { padding-top: 32px; border-top: 1px solid var(--mf-line); font-style: normal; text-align: center; }
/* The shortcuts of a subject, centred in a thin frame: the tip, then the pages as the site's ghost buttons (a padlock when one signs in first). */
.mf-pask__panel { padding: 32px 24px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); text-align: center; }
.mf-front .mf-pask__panel h3 { margin: 0 0 12px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-ink); }
.mf-pask__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.mf-pask__go .mf-ph-btn i { margin-right: 8px; }
.mf-front .mf-pask__tip { margin: 0 0 6px; }
/* The title of the form at the size of "How can we help you?", a little apart from the shortcuts. */
.mf-front .mf-pcontact .mf-pl-h2 { margin-top: 32px; font-size: 1.3rem; }
.mf-pcontact__form { gap: 16px; }
.mf-front .mf-pask__subject { margin: 0; font-size: .9rem; font-weight: 700; color: var(--mf-magenta); }
.mf-pcontact__count { justify-self: end; font-size: .8rem; color: var(--mf-ink); }
.mf-pcontact .mf-field.is-invalid .mf-input { border-color: var(--mf-red); background: #fff8f8; }
.mf-pcontact .mf-contact__bar .mf-btn { padding: 10px 26px; min-height: 44px; border-radius: 24px; font-size: 1.05rem; }
.mf-front .mf-pcontact__robots { margin: 0; font-size: .82rem; color: var(--mf-ink); text-align: right; }
.mf-pcontact .mf-note { margin: 0; }
.mf-pcontact__sent { display: flex; align-items: flex-start; gap: 16px; }
.mf-pcontact__sent[hidden] { display: none; }
.mf-pcontact__sent > i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mf-green-soft); color: #3d6b00; }
.mf-pcontact__sent > div { min-width: 0; overflow-wrap: anywhere; }
.mf-front .mf-pcontact__sent h3 { margin: 2px 0 8px; font-size: 1.35rem; color: var(--mf-navy); }
.mf-front .mf-pcontact__next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.mf-pcontact .mf-pcontact__links { font-size: 1.2rem; font-weight: 700; line-height: 1.8; }
@media (max-width: 600px) {
	/* The subjects as a list of rows. */
	.mf-pask__topics { flex-direction: column; }
	.mf-pask__topics .mf-chip { justify-content: flex-start; width: 100%; min-height: 48px; border-radius: 12px; text-align: left; }
	.mf-pcontact .mf-form__row > .mf-col-6 { grid-column: span 12; }
	.mf-pcontact .mf-form__row > .mf-col-3 { grid-column: span 6; }
	/* The bar of the connected page sticks to the bottom of a phone; this form is longer and keeps it in place. */
	.mf-pcontact .mf-contact__bar { position: static; margin: 0; padding: 16px 0 0; border-radius: 0; box-shadow: none; }
	.mf-pcontact .mf-contact__bar .mf-btn { width: 100%; }
	.mf-front .mf-pcontact__robots { text-align: left; }
	.mf-pcontact__sent { flex-direction: column; }
}

@media (max-width: 991px) {
	.mf-connect__main h2, .mf-connect__plain > h2, .mf-signup__card > h2 { font-size: 1.9rem; }
	.mf-signup__card { padding: 28px 18px; }
}
@media (max-width: 600px) {
	.mf-connect, .mf-signup, .mf-pcontact { padding: 20px 12px 40px; }
	.mf-pub-result { flex-direction: column; gap: 12px; padding: 20px; }
	.mf-signup__steps { grid-template-columns: 1fr; }
	.mf-signup__steps li + li { border-left: 0; border-top: 1px solid #ddd; }
	.mf-signup__steps li:not(.is-active) { display: none; }
	.mf-signup .mf-signup__delete { margin-top: 30px; }
	.mf-page-fidel_storeinfos { padding: 0 0 30px; }
}
/* ========================== end of public-b ========================== */

/* ============================================================
   Content pages laid out again (views/public/about.js, how.js,
   advantages.js, mobile.js; shared pieces: views/public/content.js).
   Every class is mf-pc-*; one block per page, each with its own
   responsive rules, after the pieces the four pages share.
   ============================================================ */

/* ---------- content pages: shared pieces ---------- */
.mf-pc-disc {
	flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--mf-magenta); color: #fff; font-size: 15px; font-weight: 800; line-height: 1;
}
.mf-pc-disc--navy { background: var(--mf-navy); }
.mf-pc-checks { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.mf-pc-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; color: var(--mf-ink); line-height: 1.45; }
.mf-pc-checks i { margin-top: 4px; color: var(--mf-magenta); font-size: 13px; }
.mf-pc-checks--two { grid-template-columns: 1fr 1fr; gap: 10px 42px; }
.mf-front .mf-pc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.mf-pc-badges a { display: block; }
.mf-pc-badges img { display: block; height: 44px; width: auto; }
/* The ways out of a page: a beige box with a title and its buttons */
/* Screens of a feature: a screenshot of the home page, or a drawing */
.mf-pc-screen { position: relative; height: 200px; overflow: hidden; border: 1px solid var(--mf-line); border-radius: 14px; background: #fff; }
.mf-pc-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mf-pc-draw { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; background: var(--mf-fbeige); }
.mf-pc-line { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--mf-line); }
.mf-pc-line--strong { width: 75%; background: #c9c4b8; }
.mf-pc-line--short { width: 45%; }
.mf-pc-ticket { display: flex; width: 46%; max-width: 210px; height: 84px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--mf-shadow); }
.mf-pc-ticket__stub {
	flex: 0 0 38%; display: grid; place-items: center; border-right: 2px dashed #fff;
	background: var(--mf-magenta); color: #fff; font-size: 24px;
}
.mf-pc-ticket--navy .mf-pc-ticket__stub { background: var(--mf-navy); }
.mf-pc-ticket__body { flex: 1; min-width: 0; display: grid; align-content: center; gap: 8px; padding: 0 12px; }
.mf-pc-draw--interactions { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 12%; }
.mf-pc-post { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: var(--mf-shadow); }
.mf-pc-post--answer { margin-left: 16%; }
.mf-pc-post__who {
	flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--mf-navy); color: #fff; font-size: 13px;
}
.mf-pc-post--answer .mf-pc-post__who { background: var(--mf-magenta); }
.mf-pc-post__body { flex: 1; min-width: 0; display: grid; align-content: center; gap: 6px; }
.mf-pc-post__marks { display: flex; gap: 12px; margin-top: 2px; color: var(--mf-magenta); font-size: 13px; }
.mf-pc-card {
	position: relative; width: 56%; max-width: 230px; display: grid; gap: 10px; padding: 14px; border-radius: 12px;
	background: #fff; box-shadow: 8px -8px 0 -1px #fff, 8px -8px 0 0 var(--mf-line), 16px -16px 0 -1px #fff, 16px -16px 0 0 var(--mf-line), var(--mf-shadow);
}
.mf-pc-card__head { display: flex; align-items: center; gap: 10px; }
.mf-pc-card__code { display: block; height: 40px; background: repeating-linear-gradient(90deg, #222 0 2px, #fff 2px 4px, #222 4px 7px, #fff 7px 9px, #222 9px 10px, #fff 10px 13px); }
.mf-pc-leaflet {
	width: 27%; max-width: 110px; display: grid; gap: 6px; padding: 8px; border-radius: 8px;
	background: #fff; box-shadow: var(--mf-shadow);
}
.mf-pc-leaflet__art { height: 86px; display: grid; place-items: center; border-radius: 6px; background: var(--mf-fbeige); color: var(--mf-navy); font-size: 26px; }
.mf-pc-leaflet.is-front { transform: scale(1.12); }
.mf-pc-leaflet.is-front .mf-pc-leaflet__art { background: var(--mf-magenta); color: #fff; }
@media (max-width: 767px) {
	.mf-pc-checks--two { grid-template-columns: 1fr; }
}

/* ---------- about, contact form ---------- */
.mf-pc-facts { margin-top: 28px; border-radius: 30px; background: var(--mf-fbeige); }
.mf-pc-facts__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0 auto; padding: 35px 28px; text-align: center; }
.mf-pc-fact dt { color: var(--mf-navy); font-size: 26px; font-weight: 800; line-height: 1.2; }
.mf-pc-fact dd { margin: 6px 0 0; color: var(--mf-ink); font-size: 14px; line-height: 1.45; }
.mf-pc-contact { padding-bottom: 42px; }
/* The company's details, centred: the form is on the contact page, a button leads there. */
.mf-pc-contact__in { max-width: 640px; margin: 28px auto 0; text-align: center; }
.mf-pc-contact__address { font-style: normal; }
.mf-front .mf-pc-contact__lines { display: grid; justify-items: center; gap: 4px; font-size: 18px; font-weight: 700; }
.mf-fmain .mf-pc-contact__lines a { display: inline-flex; align-items: center; gap: 12px; color: var(--mf-magenta); line-height: 1.8; text-decoration: none; overflow-wrap: anywhere; }
.mf-pc-contact__hours { color: var(--mf-ink); font-size: 14px; }
.mf-pc-privacy { margin-top: 21px; padding: 21px; border-radius: 20px; background: var(--mf-fbeige); font-size: 14px; }
.mf-front .mf-pc-privacy h3 { margin: 0 0 8px; color: var(--mf-navy); font-size: 17px; }
.mf-front .mf-pc-privacy p { margin: 0 0 6px; overflow-wrap: anywhere; }
.mf-pc-who { scroll-margin-top: 60px; padding-bottom: 28px; }
.mf-pc-who__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; }
.mf-front .mf-pc-who__cols h2 { margin: 0 0 14px; }
.mf-front .mf-pc-who__lead { margin: 28px 0 0; }
@media (max-width: 1199px) {
	.mf-pc-facts { width: 95%; }
	.mf-pc-facts__in { padding: 35px 42px; }
}
@media (max-width: 991px) {
	.mf-pc-facts__in { grid-template-columns: 1fr 1fr; }
	.mf-pc-who__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
	.mf-pc-facts__in { gap: 21px 14px; padding: 28px 21px; }
	.mf-pc-fact dt { font-size: 21px; }
	/* Phone and e-mail: two tap buttons */
	.mf-front .mf-pc-contact__lines { justify-items: stretch; gap: 10px; font-size: 16px; }
	.mf-fmain .mf-pc-contact__lines a { justify-content: center; padding: 8px 14px; border-radius: 50px; background: var(--mf-magenta); color: #fff; }
}

/* ---------- how it works ---------- */
.mf-front .mf-pc-banner__lead { font-size: 20px; font-weight: 700; line-height: 1.4; }
.mf-front .mf-pc-banner__small { margin: 0; font-size: 15px; opacity: .9; }
.mf-pc-story { padding-bottom: 0; }
.mf-pc-step, #how-data { scroll-margin-top: 90px; }
/* A moment: pictogram, number, small line and title centred above a column of text. */
.mf-pc-step { max-width: 800px; margin: 100px auto 0; }
.mf-pc-step__head { margin-bottom: 28px; text-align: center; }
.mf-pc-step__icon { display: block; width: 96px; margin: 0 auto 20px; }
.mf-pc-step__head .mf-pc-disc { margin-bottom: 12px; }
.mf-front .mf-pc-step__eyebrow { margin: 0 0 6px; color: var(--mf-magenta); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mf-front .mf-pc-step h3 { margin: 0; color: var(--mf-navy); font-size: 28px; }
.mf-front .mf-pc-step__note { color: var(--mf-ink); font-size: 14px; }
/* The two ways a till visit ends: two beige cards, an "or" between them. */
.mf-pc-cases { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 32px 0; }
.mf-pc-case { align-self: stretch; padding: 28px 24px 26px; border-radius: var(--mf-radius); background: var(--mf-fbeige); text-align: center; }
.mf-pc-case__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--mf-surface); color: var(--mf-magenta); font-size: 20px; }
.mf-pc-case--2 .mf-pc-case__icon { color: var(--mf-navy); }
.mf-front .mf-pc-case h4 { margin: 0 0 8px; color: var(--mf-navy); font-size: 17px; }
.mf-front .mf-pc-case p { margin: 0; color: var(--mf-ink); font-size: 15px; }
.mf-pc-cases__or { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mf-line-strong); border-radius: 50%; color: var(--mf-ink); font-size: 14px; font-weight: 700; }
/* A term explained: a plain outlined box. */
.mf-pc-term { padding: 22px 26px; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-sm); font-size: 15px; }
.mf-front .mf-pc-term h4 { margin: 0 0 8px; color: var(--mf-navy); font-size: 16px; }
.mf-front .mf-pc-term p { margin: 0 0 6px; color: var(--mf-ink); }
.mf-front .mf-pc-term p:last-child { margin: 0; }
/* What the profile lets you do: one column of rows parted by a hairline, each check in a small beige disc. */
.mf-pc-checks--lines { max-width: 800px; margin: 32px auto 0; gap: 0; }
.mf-pc-checks--lines li { grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--mf-line); font-size: 17px; line-height: 1.5; }
.mf-pc-checks--lines li:first-child { border-top: 1px solid var(--mf-line); }
.mf-pc-checks--lines :is(b, strong) { color: var(--mf-navy); }
.mf-pc-checks--lines i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: var(--mf-fbeige); }
/* Security: the block of the home (.mf-pl-safe), 100px under the story. */
.mf-front .mf-pc-safe { margin-top: 100px; }
@media (max-width: 767px) {
	.mf-front .mf-pc-banner__lead { font-size: 18px; }
	.mf-pc-step { margin-top: 72px; }
	.mf-pc-step__icon { width: 72px; }
	.mf-front .mf-pc-step h3 { font-size: 22px; }
	.mf-pc-cases { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.mf-pc-case { width: 100%; }
	.mf-front .mf-pc-safe { margin-top: 64px; }
}

/* ---------- the 4 advantages ---------- */
/* Banner of the advantages and how pages: a short title band ending with cards leading to the parts (content.js jumpChips). */
.mf-page-core_fid_advantages .mf-fbanner, .mf-page-core_fid_how .mf-fbanner { padding: 56px 0 44px; }
.mf-front .mf-pc-advlead { max-width: 720px; margin: 0 auto; opacity: .92; }
.mf-pc-advjump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 50px; text-align: left; }
.mf-fmain .mf-pc-advjump__card {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 14px 16px; border-radius: 18px; background: #fff; color: var(--mf-navy);
	font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 32, 64, .18); transition: transform .15s, box-shadow .15s;
}
.mf-pc-advjump__card > span:not(.mf-pc-disc) { min-width: 0; overflow-wrap: break-word; }
.mf-pc-advjump__card > i { color: var(--mf-magenta); font-size: 13px; }
.mf-fmain .mf-pc-advjump__card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 32, 64, .25); color: var(--mf-navy); }
.mf-pc-advjump__card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* An advantage: the split of the home (.mf-pl-split), the whole text of the legacy page beside its picture. */
.mf-pc-adv { scroll-margin-top: 90px; }
.mf-pc-adv__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mf-front .mf-pc-adv__head .mf-pl-h2 { min-width: 0; margin: 0; overflow-wrap: break-word; }
/* On a phone the number goes back above the title: a long word (Verbrauchergemeinschaft) has to fit whole. */
@media (max-width: 480px) {
	.mf-pc-adv__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.mf-front .mf-pc-adv__head .mf-pl-h2 { font-size: 22px; }
}
.mf-front .mf-pc-adv h3 { margin: 24px 0 6px; color: var(--mf-navy); font-size: 18px; }
.mf-front .mf-pc-adv__text { margin: 0 0 14px; color: var(--mf-ink); }
.mf-pc-adv .mf-ph-actions { margin-top: 28px; }
.mf-pc-adv .mf-fdownload { margin-top: 0; }
/* The picture takes a third of the line, the text two thirds (above the breakpoint where .mf-pl-split stacks). */
@media (min-width: 992px) {
	.mf-pc-adv .mf-pl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
	.mf-pc-adv .mf-pl-split--reverse { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.mf-pc-adv .mf-pc-checks { margin: 0 0 8px; }
.mf-front .mf-pl-final__more { margin: 24px 0 0; font-size: 15px; }

@media (max-width: 991px) {
	.mf-pc-advjump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.mf-page-core_fid_advantages .mf-fbanner, .mf-page-core_fid_how .mf-fbanner { padding: 32px 0 26px; }
	.mf-pc-advjump { gap: 10px; }
	.mf-fmain .mf-pc-advjump__card { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 12px; font-size: 14px; overflow-wrap: break-word; }
	.mf-pc-advjump__card .mf-pc-disc { width: 28px; height: 28px; font-size: 13px; }
	.mf-pc-advjump__card > i { display: none; }
}

/* ---------- the mobile app ---------- */
.mf-pc-appbanner {
	display: grid; grid-template-columns: 11fr 9fr; gap: 28px; align-items: center;
	padding: 56px 70px; text-align: left; scroll-margin-top: 100px;
}
.mf-pc-appbanner > * { min-width: 0; }
/* The picture of the app as the background of the beige banner, top right (the text keeps the left column). */
.mf-front .mf-pc-appbanner { background: var(--mf-fbeige) var(--mf-fapp-art) top right / 45% auto no-repeat; }
.mf-pc-get > .mf-pc-badges { margin: 0 0 24px; }
.mf-pc-get > .mf-pc-badges img { height: 56px; }
.mf-front .mf-pc-voices h2 { margin: 0 0 21px; text-align: center; }
.mf-pc-voices { padding-top: 56px; padding-bottom: 14px; text-align: center; }
/* The rotator of the home, as wide as a quote reads well. */
.mf-pc-voices .mf-pl-rotator { max-width: 720px; margin: 28px auto; }
.mf-pc-getbar { display: none; }
/* In the app, as on the legacy page: the text and the numbered features, the animation beside them. */
.mf-pc-inapp__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); align-items: center; gap: 56px; }
.mf-front .mf-pc-inapp h3 { margin: 0; font-size: 20px; line-height: 1.45; }
.mf-pc-inapp ol { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.mf-pc-inapp li { display: flex; align-items: center; gap: 14px; color: var(--mf-ink); }
.mf-pc-inapp__art img { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
@media (max-width: 1199px) {
	.mf-pc-appbanner { padding: 42px; }
}
@media (max-width: 767px) {
	/* The page itself is the download: the strip of the shell is not shown here */
	.mf-front:has(.mf-page-core_fid_mobileapp) .mf-fstrip { display: none; }
	.mf-pc-appbanner { grid-template-columns: minmax(0, 1fr); padding: 28px; }
	/* On a phone the picture goes under the text, its empty bottom out of the banner. */
	.mf-front .mf-pc-appbanner { padding-bottom: 85vw; background-position: center bottom -45vw; background-size: 100% auto; }
	.mf-pc-get .mf-pc-badges img { height: 52px; }
	.mf-pc-inapp__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.mf-pc-inapp__art img { max-width: 260px; }
	.mf-front .mf-pc-inapp h3 { font-size: 18px; }
	.mf-fmain .mf-pc-getbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px;
		min-height: 56px; padding: 10px 14px; background: var(--mf-magenta); color: #fff; font-weight: 800; text-decoration: none;
		transition: transform .2s;
	}
	.mf-fmain .mf-pc-getbar.is-away { transform: translateY(100%); }
	.mf-page-core_fid_mobileapp { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .mf-pc-getbar { transition: none; } }
/* ---------- direction D on the content pages (chosen for the home, 2026-10-27) ----------
   The shared pieces take the look of the home: the title banner becomes a beige block with navy titles
   whose large words are magenta; the pages end on the questions block of the home (content.js
   faqSection); cards are beige and pink in turn. */
.mf-fbanner { background: var(--mf-fbeige); color: var(--mf-navy); }
.mf-front .mf-fbanner h1 { margin-bottom: 50px; color: var(--mf-navy); font-size: 40px; font-weight: 900; line-height: 1.15; text-wrap: balance; }
/* The paragraphs of a banner: a centred column of at most 800px, read from the left (the motto stays a centred badge). */
.mf-front .mf-fbanner p:not(.mf-fbanner__motto, .mf-fbanner__badges) { max-width: 800px; margin: 0 auto 24px; text-align: left; }
/* A one-sentence lead stays centred under the title (.mf-fcenter, the site's centring class). */
.mf-front .mf-fbanner p.mf-fcenter { text-align: center; }
/* The last paragraph of a banner ends on the banner's own padding. */
.mf-front .mf-fbanner p:last-child { margin-bottom: 0; }
/* The large words of a title: magenta, at the size of the rest of the title. */
.mf-front .mf-fbanner h1 .mf-fbig { color: var(--mf-magenta); font-size: 1em; }
.mf-fmain .mf-fbanner a:not(.mf-fbtn):not(.mf-pc-advjump__card) { color: var(--mf-navy); }
/* A discreet shadow (the cards' token of app.css); hovering only lifts the card. */
.mf-fmain .mf-pc-advjump__card, .mf-fmain .mf-pc-advjump__card:hover { box-shadow: var(--mf-shadow); }
.mf-pc-advjump__card:focus-visible { outline-color: var(--mf-magenta); }
/* About keeps its navy photo banner: white title and text (magenta would not read on the photo). */
.mf-page-core_fid_about .mf-fbanner { color: #fff; }
.mf-front .mf-page-core_fid_about .mf-fbanner h1, .mf-front .mf-page-core_fid_about .mf-fbanner h1 .mf-fbig { color: #fff; }
.mf-fmain .mf-page-core_fid_about .mf-fbanner a:not(.mf-fbtn):not(.mf-pc-advjump__card) { color: #fff; }

/* Cards: beige and pink in turn, no outline. */

.mf-fqa__more { border-radius: 28px; }

@media (max-width: 767px) {
	.mf-front .mf-fbanner h1 { font-size: 28px; }
}

/* ===================== end of the content pages ===================== */