/* =====================================================================
   meinfoto.de homepage (GB-201089) · app.css
   -----------------------------------------------------------------
   Every value is a token from tokens.css (lane C) or tokens-project.css
   (lane D). Gate: no hex literal outside comments (process/tools/page_check.py).
   v01 = Phase 1 scaffold: the page in its final section order with live content.
   v02 = Phase 2: mf-topbar and mf-header as live. v03–v04: mf-hero. v05: mf-trust, mf-categories.
   v06: product tiles, mf-walldecor, mf-offer. Other modules follow in Phases 6–7.
   ===================================================================== */

/* ---------- self-hosted Montserrat: the live meinfoto.de files (Latin subset) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/live/fonts/montserrat-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* live serves the SemiBold cut (usWeightClass 600) as its 700 face; kept as live */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;
  src:url("../assets/live/fonts/montserrat-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-primary);background:var(--bg-page);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:var(--fw-bold);line-height:var(--lh-tight);margin:0}
h3{font-size:var(--fs-h3)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--link-text)}
button{font:inherit}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);
  box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-inner)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--sp-4);top:var(--sp-2);z-index:var(--z-toast);padding:var(--sp-2) var(--sp-4);
  background:var(--bg-surface);color:var(--link-text);font-weight:var(--fw-bold);transform:translateY(-200%)}
.skip:focus{transform:none}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
@media (min-width:768px){.container{padding-inline:var(--sp-5)}}

/* ---------- surfaces: beige behind the merchandised span, white elsewhere (brief §9.1) ---------- */
.mf-sec{padding-block:var(--pad-section);background:var(--bg-page)}
@media (max-width:767px){.mf-sec{padding-block:var(--sp-6)}}             /* Phase 8: 32 px on phones (page length, DV-49) */
.mf-sec--canvas{background:var(--canvas)}
.mf-sec--hairline{border-top:1px solid var(--border-subtle)}

/* ---------- prototype-only: module tags and the review bar ---------- */
.rv-tag{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);margin:0 0 var(--sp-4);font-size:var(--fs-note);line-height:var(--lh-label);
  color:var(--text-secondary-aa);letter-spacing:.04em}
.rv-tag b{font-weight:var(--fw-bold)}
html[data-clean] .rv-tag{display:none}

.rb{background:var(--surface-inverse);color:var(--text-on-brand);font-size:var(--fs-caption);line-height:var(--lh-label)}
.rb__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);padding-block:var(--sp-2)}
.rb__title{font-weight:var(--fw-bold);margin-right:var(--sp-2)}
.rb fieldset{display:flex;align-items:center;gap:var(--sp-1);margin:0;padding:0;border:0;min-width:0}
.rb legend{float:left;margin-right:var(--sp-1);padding:0}
.rb label{position:relative;display:inline-flex}
.rb input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rb label span{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp-2);border:1px solid var(--text-on-brand);
  border-radius:var(--r-xs);cursor:pointer}
.rb input:checked + span{background:var(--text-on-brand);color:var(--text-primary);font-weight:var(--fw-bold)}
.rb input:focus-visible + span{outline:var(--focus-ring-width) solid var(--focus-ring-inner);outline-offset:var(--focus-ring-offset)}
.rb__lang{display:none;background:var(--editorial-panel);color:var(--text-on-brand);padding:var(--sp-1) 0;font-weight:var(--fw-bold)}
html[data-lang="en"] .rb__lang{display:block}

/* ---------- shared pieces ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:52px;padding:var(--sp-3) var(--sp-5);
  font:var(--fw-bold) var(--fs-body)/1.2 var(--font-body);color:var(--action-primary-text);background:var(--action-primary-bg);
  border:0;border-radius:var(--action-radius);text-decoration:none;cursor:pointer;text-align:center}
.btn-primary:hover{filter:var(--action-primary-hover)}
.link-more{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-cta);font-weight:var(--fw-bold);
  color:var(--link-text);text-decoration:none}
.link-more:hover{text-decoration:underline;text-underline-offset:2px}

.pr{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-2);line-height:var(--lh-tight)}
.pr-pre{font-size:var(--fs-caption);font-weight:var(--fw-regular);color:var(--text-secondary-aa)}
.pr-now{font-size:var(--fs-price);font-weight:var(--fw-bold);color:var(--sale-red);white-space:nowrap}
.pr-was{font-size:var(--fs-caption);color:var(--text-secondary-aa);text-decoration:line-through;white-space:nowrap}   /* a struck reference price carries meaning: AA grey (Phase 8; #878787 is 3.59:1) */
.pr-mark{color:inherit;text-decoration:none}

/* labelled image slot: the file fills it when dropped; until then the label shows */
.slot{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--media-well);color:var(--text-primary)}
.slot--navy{background:var(--panel-navy);color:var(--text-on-brand)}
.slot__label{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);padding:var(--sp-4);
  font-size:var(--fs-caption);line-height:var(--lh-label)}
.slot__label b{font-size:var(--fs-cta)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.is-empty img{opacity:0}   /* not display:none: a lazy image that is not rendered never loads, so a stand-in fallback would never run */
.slot--3x2{aspect-ratio:var(--img-category)}

.list-dots{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.list-dots li + li::before{content:"·";margin-right:var(--sp-3);color:var(--text-secondary-aa)}

/* ---------- mf-topbar: the live collapsible bar (Phase 2) ---------- */
/* Live paints campaign art behind white text (3.41:1, U-11); the prototype bar is the sale-red token (DV-28). */
.mf-topbar{position:relative;background:var(--sale-red);color:var(--text-on-brand);text-align:center}
.mf-topbar__link{display:block;padding:var(--sp-2) var(--sp-7);color:inherit;text-decoration:none;line-height:var(--lh-tight)}
.mf-topbar__l1{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold)}
.mf-topbar__l2{display:block;font-size:var(--fs-note)}
@media (min-width:768px){.mf-topbar__l1{font-size:var(--fs-h2)}.mf-topbar__l2{font-size:var(--fs-body)}}
.mf-topbar__x{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border:0;background:none;color:inherit;cursor:pointer}
.mf-topbar__x .ico{width:var(--sp-3);height:var(--sp-3)}
@media (min-width:768px){.mf-topbar__x .ico{width:var(--sp-4);height:var(--sp-4)}}
.mf-topbar :focus-visible{outline-color:var(--focus-ring-inner);box-shadow:none}
/* collapsed: a white strip holding the pull tab, as live */
.mf-topbar.is-collapsed{background:var(--bg-page)}
/* the tab: a 44px hit area; the visible pill is its ::after (32px), so the target is larger than the icon */
.mf-topbar__tab{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;
  padding:0 var(--sp-4);border:0;background:none;cursor:pointer;color:var(--text-on-brand);font:var(--fw-bold) var(--fs-body)/1 var(--font-body)}
.mf-topbar__tab::after{content:"";position:absolute;z-index:-1;inset:6px 0;background:var(--sale-red);border-radius:var(--r-sm);box-shadow:var(--shadow-1)}
.mf-topbar__tab .ico{width:var(--sp-4);height:var(--sp-4)}
.mf-topbar.is-collapsed .mf-topbar__tab:focus-visible{outline-color:var(--focus-ring)}

/* ---------- mf-header: exactly as live (Phase 2) ---------- */
[hidden]{display:none !important}
.ico{display:block;overflow:visible}
.mf-header{position:relative;background:var(--bg-page);color:var(--text-primary)}
.mf-header button,.mf-header a,.mf-topbar button{-webkit-tap-highlight-color:transparent}   /* as live */
.mf-hd{display:none;position:relative;border-bottom:1px solid var(--border-subtle)}
.mf-ph{display:block}
@media (min-width:1024px){.mf-hd{display:block}.mf-ph{display:none}}

/* desktop top row: logo · search · utility icons */
.mf-hd__top{display:flex;align-items:center;gap:var(--sp-5);min-height:60px;border-bottom:1px solid var(--border-strong)}
.mf-logo{display:block;flex:0 0 auto;line-height:0}
.mf-hd .mf-logo img{width:230px;height:auto}
.mf-search{display:flex;flex:0 1 336px;min-width:0}
.mf-search input{flex:1 1 auto;min-width:0;min-height:40px;padding:0 var(--sp-2);border:1px solid var(--border-strong);border-right:0;border-radius:0;
  font:var(--fw-regular) var(--fs-cta)/1 var(--font-body);color:var(--text-primary);background:var(--bg-page)}
.mf-search input::placeholder{color:var(--text-secondary-aa)}
.mf-search__btn{flex:0 0 40px;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0;border:0;border-radius:0;
  background:var(--action-primary-bg);color:var(--action-primary-text);cursor:pointer}
.mf-search__btn:hover{filter:var(--action-primary-hover)}
.mf-search__btn .ico{width:18px;height:18px}
.mf-hd__util{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.mf-util{position:relative}
.mf-util__a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;padding:0 var(--sp-1);
  border:0;background:none;cursor:pointer;color:var(--text-secondary-aa);font:var(--fw-regular) var(--fs-micro)/1.2 var(--font-body);text-decoration:none;white-space:nowrap}
.mf-util__a:hover,.mf-util__a[aria-expanded="true"]{color:var(--text-primary)}
.ico--util{width:auto;height:25px}
.mf-count{position:absolute;top:0;right:0;min-width:18px;padding:0 var(--sp-1);border-radius:var(--r-sm);background:var(--sale-red);
  color:var(--text-on-brand);font:var(--fw-bold) var(--fs-micro)/18px var(--font-body);text-align:center}

/* desktop L1 row; each entry opens its mega menu on hover or focus */
.mf-hd__l1{display:flex;justify-content:space-between;padding-inline:var(--sp-4)}
.mf-l1__a{position:relative;display:flex;align-items:center;min-height:44px;color:var(--text-primary);text-decoration:none;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;white-space:nowrap}
.mf-l1__a.is-red{color:var(--sale-red)}
.mf-l1__a:hover,.mf-l1.is-open > .mf-l1__a{color:var(--link-text)}
.mf-l1.is-open > .mf-l1__a::after{content:"";position:absolute;left:50%;bottom:0;margin-left:calc(-1 * var(--sp-2));
  border:var(--sp-2) solid transparent;border-top:0;border-bottom-color:var(--grey-f3)}
.mf-mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);padding:var(--sp-6) 0 var(--sp-1);
  background:var(--grey-f3);border-bottom:1px solid var(--border-strong)}
.mf-l1.is-open > .mf-mega{display:block}
.mf-mega__list{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--sp-3);max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.mf-mega__list a{position:relative;display:flex;flex-direction:column;align-items:center;width:130px;margin-bottom:var(--sp-5);
  color:var(--text-primary);text-decoration:none;text-align:center}
.mf-mega__list img{width:125px;height:75px;object-fit:contain}
.mf-mega__t{padding-top:var(--sp-2);font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:var(--lh-tight)}
.mf-mega__list a:hover .mf-mega__t{color:var(--link-text)}
.mf-mega .mf-badge-new{position:absolute;top:calc(-1 * var(--sp-4));right:var(--sp-2);color:var(--sale-red);font-size:var(--fs-note);font-weight:var(--fw-bold)}

/* phones and tablets: burger · logo · icons, the scrolling L1 row, the drawer */
.mf-ph__top{position:relative;display:flex;align-items:center;min-height:50px;padding-right:var(--sp-1);border-bottom:1px solid var(--border-strong)}
.mf-burger{flex:0 0 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;align-self:stretch;min-height:44px;
  padding:0;border:0;background:none;color:var(--text-primary);cursor:pointer}
.mf-burger span{display:block;width:20px;height:2px;background:currentColor;transition:transform var(--dur-base) var(--ease),opacity var(--dur-fast)}
.mf-burger.is-open{background:var(--surface-inverse);color:var(--text-on-brand)}
.mf-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mf-burger.is-open span:nth-child(2){opacity:0}
.mf-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mf-ph .mf-logo{flex:0 1 133px;min-width:88px}
.mf-ph .mf-logo img{width:100%;height:auto}
.mf-ph__icons{display:flex;margin-left:auto}
.mf-ph__ico{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;
  color:var(--text-secondary-aa);cursor:pointer}
.mf-ph__ico .ico{width:auto;height:var(--sp-5)}
.mf-ph__ico .mf-count{top:var(--sp-1);right:var(--sp-1)}
.mf-ph__row{position:relative;border-bottom:1px solid var(--border-strong)}
.mf-ph__row ul{display:flex;gap:var(--sp-5);padding-inline:var(--sp-4) var(--sp-7);overflow-x:auto;scrollbar-width:none}
.mf-ph__row ul::-webkit-scrollbar{display:none}
.mf-ph__row a{display:flex;align-items:center;min-height:46px;white-space:nowrap;color:var(--text-primary);text-decoration:none;font-size:var(--fs-note)}
.mf-ph__row a.is-red{color:var(--sale-red)}
.mf-ph__more{position:absolute;top:0;right:0;bottom:0;width:44px;padding:0 0 0 var(--sp-3);border:0;cursor:pointer;color:var(--link-text);
  font:var(--fw-bold) var(--fs-h3)/1 var(--font-body);background:linear-gradient(to right,transparent,var(--bg-page) 45%)}
.mf-ph__row.is-end .mf-ph__more{display:none}
.mf-drawer{position:absolute;top:100%;left:0;z-index:var(--z-overlay);width:calc(100% - var(--sp-5));max-width:420px;overflow-y:auto;
  overscroll-behavior:contain;background:var(--surface-inverse);color:var(--text-on-brand);box-shadow:var(--shadow-3);border-bottom-right-radius:var(--r-xs)}
.mf-drawer a{color:inherit;text-decoration:none}
.mf-drawer :focus-visible{outline-color:var(--focus-ring-inner);outline-offset:calc(-1 * var(--focus-ring-width));box-shadow:none}
.mf-dr__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;min-height:60px;padding:0 var(--sp-3);
  border:0;border-bottom:1px solid var(--text-secondary);background:none;color:inherit;cursor:pointer;text-align:left;font:var(--fw-regular) var(--fs-body)/var(--lh-tight) var(--font-body)}
.ico--acc{flex:0 0 auto;width:var(--sp-4);height:var(--sp-4);transition:transform var(--dur-base) var(--ease)}
.mf-dr__head[aria-expanded="true"] .ico--acc{transform:rotate(180deg)}
.mf-dr__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1);padding:var(--sp-1)}
.mf-dr__grid a{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);height:100%;min-height:130px;padding:var(--sp-2) var(--sp-1) var(--sp-3);
  border:1px solid var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-tight);text-align:center}
.mf-dr__img{position:relative;display:block}
.mf-dr__img img{width:88px;height:53px;object-fit:contain}
.mf-drawer .mf-badge-new{position:absolute;top:calc(-1 * var(--sp-1));right:calc(-1 * var(--sp-3));padding:0 var(--sp-1);border-radius:var(--r-xs);
  background:var(--sale-red);color:var(--text-on-brand);font-size:var(--fs-micro);font-weight:var(--fw-bold);line-height:1.6}
.mf-dr__deals a{display:flex;align-items:center;min-height:60px;padding:0 var(--sp-3);background:var(--sale-red);font-size:var(--fs-body)}
.mf-dr__small a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);border-bottom:1px solid var(--text-secondary);font-size:var(--fs-caption)}
.mf-msearch{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-strong)}
.mf-msearch .mf-search{flex-basis:auto}

/* login fly-out (one panel, moved under whichever icon opened it) */
.mf-login{padding:var(--sp-4);background:var(--bg-page);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);text-align:left}
.mf-util--login .mf-login{position:absolute;top:100%;right:0;z-index:var(--z-dropdown);width:300px}
.mf-ph .mf-login{border-inline:0}
.mf-login__form{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-caption)}
.mf-login__title{text-align:center;font-size:var(--fs-cta)}
.mf-login__form input{min-height:44px;padding:0 var(--sp-2);border:1px solid var(--border-strong);border-radius:0;font:var(--fw-regular) var(--fs-cta)/1 var(--font-body);color:var(--text-primary)}
.mf-login__form label{margin-top:var(--sp-1)}
.mf-login__forgot{align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;color:var(--link-text)}
.mf-login__form .btn-primary{width:100%;min-height:44px;font-size:var(--fs-cta)}
.mf-login__reg a{color:var(--link-text);font-weight:var(--fw-bold)}

/* phones: top bar + header hide on scroll down, return on scroll up (live) */
@media (max-width:1023px){
  .mf-headwrap{position:sticky;top:0;z-index:var(--z-header);transition:transform var(--dur-base) var(--ease)}
  .mf-headwrap.is-hidden{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.mf-headwrap,.mf-burger span,.ico--acc,.mf-proto{transition:none}}
html.is-locked{overflow:hidden}

/* prototype status line for controls whose live target is third-party or an account action */
.mf-proto{position:fixed;left:50%;bottom:var(--sp-5);z-index:var(--z-toast);max-width:calc(100% - 2 * var(--sp-4));padding:var(--sp-2) var(--sp-4);
  transform:translateX(-50%);border-radius:var(--r-xs);background:var(--surface-inverse);color:var(--text-on-brand);font-size:var(--fs-caption);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base)}
.mf-proto.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.mf-proto{transition:none}}

/* ---------- mf-hero (brief §6.2, Stop-point 3 decisions of 3 Nov) ---------- */
/* From 1024: photo and copy side by side, 6/6 (DV-27); the photo is square (DV-35) and the copy ends on its
   bottom edge. Below 1024 they stack (DV-33): photo, headline, price, CTA, upload link, then the claims.
   No box over the photo, no text on it. Spacing as decided: the upload link's 44 px target absorbs 12 px of
   each neighbouring gap, so the visible gaps are the decided ones. */
.mf-hero{padding-block:var(--sp-4) var(--sp-5)}
.mf-hero__grid{display:grid;gap:calc(var(--sp-4) + var(--sp-1))}              /* phones: image → 20 px → headline */
.mf-hero__media{aspect-ratio:var(--img-category);border-radius:var(--r-sm)}
@media (min-width:768px){
  .mf-hero{padding-block:var(--sp-6) var(--sp-7)}
  .mf-hero__copy{max-width:var(--measure)}
}
@media (min-width:1024px){
  .mf-hero__grid{container-type:inline-size;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
  .mf-hero__copy{max-width:none}
  /* square, and taller only if the copy ever outgrows it */
  .mf-hero__media{aspect-ratio:auto;align-self:stretch;min-height:calc((100cqi - var(--sp-6)) / 2)}
}
.mf-hero__media picture{display:contents}
.mf-hero__lbl-m{display:none}
@media (max-width:1023px){.mf-hero__lbl-d{display:none}.mf-hero__lbl-m{display:flex}}

.mf-hero__copy{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
/* --fs-display, capped so the live headline holds two lines in its column at every width: its longest
   line, "Deutschlands Nr. 1", measures 9.51 em in the live SemiBold cut (hero_check.py reports the lines) */
.mf-hero h1{font-size:min(var(--fs-display), calc(100cqi / 9.6));line-height:var(--lh-display);text-wrap:balance}
.mf-hero__price{margin-top:var(--sp-3)}                                        /* phones: 12 px */
.mf-hero__price .pr-now{font-size:var(--fs-price-hero)}
.mf-hero__price .pr-mark{font-size:var(--fs-price);vertical-align:top}         /* the footnote mark stays at the system price size */

.mf-claims{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-body);line-height:var(--lh-label)}
.mf-claims li{display:flex;gap:var(--sp-2);align-items:flex-start}
.mf-claims .ico{flex:0 0 20px;width:20px;height:20px;margin-top:1px;color:var(--link-text)}
.mf-claims .red{color:var(--sale-red)}
.mf-claims sup a{color:inherit;text-decoration:none}
.mf-claims__link{padding:0;border:0;background:none;font:inherit;color:var(--link-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.mf-hero__act{display:flex;flex-direction:column;margin-top:var(--sp-4)}       /* phones: price → 16 px → CTA */
.mf-hero .mf-hero__cta{width:100%;min-height:56px;font-size:var(--fs-body)}
.mf-hero .mf-claims{margin-top:var(--sp-3)}                                    /* phones: link → 24 px (12 + 12) → claims */
@media (min-width:1024px){
  .mf-hero__price{margin-top:var(--sp-4)}                                      /* headline → 16 → price */
  .mf-hero .mf-claims{margin-top:var(--sp-4)}                                  /* price → 16 → claims */
  .mf-hero__act{margin-top:var(--sp-5)}                                        /* claims → 24 → CTA */
  .mf-hero .mf-uplink{margin-bottom:calc(-1 * var(--sp-3))}                    /* the link's text ends on the photo's edge */
}
/* the upload as the secondary action: a text link with an upload icon, centred under the CTA (D1 reversed) */
.mf-uplink{display:flex;flex-direction:column;align-items:center}
.mf-uplink__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-3) var(--sp-2);border:0;background:none;cursor:pointer;
  color:var(--link-text);font:var(--fw-bold) var(--fs-cta)/var(--lh-label) var(--font-body);text-align:center}
.mf-uplink__btn .ico{flex:0 0 20px;width:20px;height:20px}
.mf-uplink__btn:hover span{text-decoration:underline;text-underline-offset:2px}
.mf-hero .mf-upload__status:empty{min-height:0}

.mf-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.mf-upload__status{min-height:1.5em;font-size:var(--fs-caption);color:var(--text-secondary-aa)}

/* ---------- mf-trust (Phase 4, brief §6.3; as CDUS since 3 Nov, MHL): four equal boxes split by hairlines, the logos
   standing on one baseline in an 80 px area (64 on phones), a bold title under each. A box with a link is one link over its
   whole area, and its title turns teal on hover. Phones: 2 × 2, a hairline between the columns (CDUS phone row) ---------- */
.mf-trust{padding-block:var(--sp-6)}
.mf-trust__marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-5)}
.mf-trust__marks > li:nth-child(even){border-left:1px solid var(--border-subtle)}
@media (min-width:768px){
  .mf-trust__marks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mf-trust__marks > li + li{border-left:1px solid var(--border-subtle)}
}
.mf-mark{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);height:100%;min-height:44px;padding-inline:var(--sp-3);
  color:var(--text-primary);text-decoration:none;text-align:center}
.mf-mark__logo{display:flex;justify-content:center;width:100%;height:var(--sp-8)}
@media (min-width:768px){.mf-mark__logo{height:calc(var(--sp-8) + var(--sp-4))}}   /* 80 px: the Trusted Shops badge at its own size */
.mf-mark__logo img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.mf-mark__tv{display:flex;justify-content:center;align-items:flex-end;gap:var(--sp-3);width:100%;height:100%}
.mf-mark__tv img{width:auto;max-width:calc(50% - var(--sp-2));flex:1 1 0}
.mf-mark__nr1{font-size:var(--fs-caption);font-weight:var(--fw-bold)}
.mf-mark__nr1 em{font-style:normal;font-weight:var(--fw-regular);color:var(--sale-red)}
.mf-mark__title{max-width:24ch;font-size:var(--fs-cta);font-weight:var(--fw-bold);line-height:var(--lh-label);text-wrap:balance}
@media (min-width:1024px){.mf-mark__title{font-size:var(--fs-body)}}
@media (max-width:767px){.mf-trust__claims{margin-top:var(--sp-4)}}
a.mf-mark:hover .mf-mark__title{color:var(--link-text)}
.mf-trust__claims{display:block;margin-top:var(--sp-5);font-size:var(--fs-cta);line-height:var(--lh-body);color:var(--text-primary);text-align:center;text-wrap:balance}
/* flowing text: each middot stays at the end of its item, so a wrapped line never starts with one */
.mf-trust__claims li{display:inline}
.mf-trust__claims li + li::before{content:none}
.mf-trust__claims li:not(:last-child)::after{content:"\00a0·\0020";color:var(--text-secondary-aa)}
.mf-trust__claims a{color:var(--link-text);font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap}
/* from 1024 "Für die Umwelt" sits on the marks row's centre axis; what follows it starts after a middot */
@media (min-width:1024px){
  .mf-trust__claims{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;text-wrap:wrap}
  .mf-trust__claims li{display:block}
  .mf-trust__claims li:not(:last-child)::after{content:none}
  .mf-trust__claims .is-axis{grid-column:2}
  .mf-trust__claims .is-after{grid-column:3;justify-self:start;text-align:left}
  .mf-trust__claims .is-after::before{content:"\00a0·\00a0";color:var(--text-secondary-aa)}
}
.mf-trust__claims a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- section header (v6.1 .sh pattern, h2 in production) ---------- */
/* German compounds ("Kundenbewertungen") can't wrap: on phones the 30px heading steps down to fit
   the column, never below --fs-h2 (DV-08). Same rule for every h2. */
h2,.sh__row h2{font-size:min(var(--fs-h1), max(var(--fs-h2), calc((100vw - 2 * var(--sp-4)) / 11)));margin:0;min-width:0}
.sh__sub{margin-top:var(--sp-2);max-width:var(--measure)}

/* ---------- mf-categories (Phase 4, brief §6.4): 8 image chips; one row from 1024, a snap row below (2½ visible) ---------- */
.mf-cats{padding-block:var(--sp-5)}
.mf-chips{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--sp-3)) / 2.5);gap:var(--sp-3);overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:var(--sp-1)}
.mf-chips::-webkit-scrollbar{display:none}
@media (min-width:768px){.mf-chips{grid-auto-columns:calc((100% - 4 * var(--sp-3)) / 5.5)}}
@media (min-width:1024px){.mf-chips{grid-auto-flow:row;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible}}
.mf-chips a{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-height:44px;
  font-size:var(--fs-cta);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--text-primary);text-decoration:none;text-align:center}
.mf-chips a:hover span{color:var(--link-text)}
.mf-chips img{width:100%;max-width:125px;height:auto;object-fit:contain}   /* 125 × 75, 2× by srcset */

/* ---------- product tiles (Phase 5): the v6.1 .pc card (patterns.css) with the CDUS tile rules ---------- */
.pc-slide{width:100%;height:100%;object-fit:cover}
.pc .pr-now{font-size:var(--fs-price)}
.pc .mf-upload,.pc .pc-cta{position:relative;z-index:1;margin-top:var(--sp-3)}   /* price → 12 px → button (brief §6.5); above the stretched link */
.pc .mf-upload .btn-primary{width:100%;min-height:44px;font-size:var(--fs-cta)}
.pc .pc-cta{min-height:44px;font-size:var(--fs-cta)}                       /* a non-upload tile's live verb (DV-16), same size as the upload button */
.pc .mf-upload__status:empty{min-height:0}
.pc-line{margin:var(--sp-2) 0 0;font-size:var(--fs-caption);line-height:var(--lh-spec)}
/* "Mehr Infos ›" (CDUS "More info ›"): mouse only, after 0.5 s of hover; at once for keyboard focus on the title. A 10 % veil
   behind it. CDUS's label is fully round (999 px); v6.1 allows 0 / 4 / 8 px and forbids a pill radius, so it keeps --r-sm */
.pc-more{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease)}
.pc-more::before{content:"";position:absolute;inset:0;background:var(--surface-inverse);opacity:.1}
.pc-more span{position:relative;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);background:var(--bg-surface);color:var(--text-primary);
  font:var(--fw-bold) var(--fs-cta)/1.2 var(--font-body);box-shadow:var(--shadow-1)}
@media (hover:hover) and (pointer:fine){.pc:hover .pc-more{opacity:1;transition-delay:.5s}}
.pc:has(.pc-link:focus-visible) .pc-more{opacity:1;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.pc-more{transition:none}}

/* rows of tiles: wider gaps between rows than inside a tile; a snap row below 768 (one card + a peek) */
.mf-row{row-gap:var(--sp-7)}
.mf-row__item{display:flex;min-width:0}
.mf-row__item > .pc{flex:1 1 auto}
.mf-row__all{display:none}
@media (max-width:767px){
  .mf-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - var(--sp-7));gap:var(--sp-3);overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--sp-1)}
  .mf-row::-webkit-scrollbar{display:none}
  .mf-row__item{scroll-snap-align:start}
  .mf-row__all{display:block;margin-top:var(--sp-3)}
  /* Stop-point 8: the design-system card is pan-y (for its in-card swipe), which stopped a touch swipe started on a card
     from scrolling the row. In the row the card allows both; a sideways swipe scrolls the row, so no dots here (DV-50) */
  .mf-row .pc{touch-action:pan-x pan-y}
  .mf-row .pc-dots{display:none}
  .mf-sec:has(.mf-row) .sh .sh__all{display:none}       /* phones: "Alle … ›" after the row, not in the heading */
}

/* ---------- the tile-grid banner (Phase 5): image over tiles 1–2, text on tile 3 from 1024; stacked below ---------- */
.mf-banner{display:grid;gap:var(--sp-5)}
.mf-wall .mf-banner{margin-top:var(--sp-7)}
@media (max-width:767px){.mf-wall .mf-banner{margin-top:var(--sp-6)}}
@media (min-width:1024px){
  .mf-banner{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-column);align-items:center}
  .mf-banner__img{grid-column:1 / span 2}
}
.mf-banner__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-width:0}
.mf-banner__kicker{padding:var(--sp-1) var(--sp-2);background:var(--sale-red);color:var(--text-on-brand);font-size:var(--fs-cta);font-weight:var(--fw-bold);line-height:1.2}
.mf-banner__title{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--sale-red)}
.mf-banner__sub{font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:var(--lh-label)}
.mf-banner__note{font-size:var(--fs-caption);color:var(--text-secondary-aa)}
.mf-banner__standin{padding:0 var(--sp-1);border:1px dashed currentColor;font-size:var(--fs-micro)}   /* "Platzhalter – Wortlaut ausstehend", OFFER20=standin */
.mf-banner__cta{width:100%;min-height:48px;margin-top:var(--sp-2);font-size:var(--fs-cta)}
.mf-banner .mf-pending{width:100%}
.mf-banner .mf-pending ul{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-1)}
/* the 20 % slot on phones: a colour block with white text, no image (Stop-point 5) */
@media (max-width:767px){
  .mf-wall .mf-banner__img{display:none}
  .mf-wall .mf-banner__text{padding:var(--sp-5);background:var(--panel-navy);color:var(--text-on-brand)}
  .mf-wall .mf-banner .mf-pending{padding:0;border:0;color:inherit}
  .mf-wall .mf-banner__title,.mf-wall .mf-banner__note{color:inherit}
}
.pc-spec--offer{color:var(--sale-red);font-weight:var(--fw-bold)}
/* mf-offer: a beige band, 40 px around the banner from 768, 28 px on phones (CDUS, 29 Oct) */
.mf-offer{padding-block:calc(var(--sp-5) + var(--sp-1))}
@media (min-width:768px){.mf-offer{padding-block:calc(var(--sp-6) + var(--sp-2))}}

/* ---------- pending slots ---------- */
.mf-pending{padding:var(--sp-4);border:1px dashed var(--border-strong);border-radius:var(--r-sm);font-size:var(--fs-caption);color:var(--text-primary)}

/* ---------- mf-frames (Phase 6, brief §6.7): the CDUS frames block ---------- */
.fr__box{position:relative;aspect-ratio:2220 / 1165}
@media (max-width:767px){.fr__box{aspect-ratio:1 / 1}}                   /* Phase 8 (was 4:5) */
.fr__view{position:absolute;inset:0}
.fr__img{position:absolute;inset:0;border-radius:var(--r-sm)}
.fr__img picture{display:contents}
.fr__lbl-m{display:none}
@media (max-width:767px){.fr__lbl-d{display:none}.fr__lbl-m{display:flex}}
.fr__pins{position:absolute;inset:0}
.fr__pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
@media (max-width:767px){.fr__pin{left:var(--mx);top:var(--my)}}
.fr__btn{position:absolute;left:-22px;top:-22px;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--link-text)}   /* the dot's 44 px target */
.fr__dot{position:absolute;left:50%;top:50%;width:var(--sp-4);height:var(--sp-4);margin:calc(-1 * var(--sp-2)) 0 0 calc(-1 * var(--sp-2));border-radius:50%;
  background:var(--brand-teal);box-shadow:0 0 0 3px var(--bg-surface),var(--shadow-1)}
@media (min-width:1024px){.fr__dot{width:22px;height:22px;margin:-11px 0 0 -11px}}
.fr__label{position:absolute;left:50%;bottom:calc(50% + var(--sp-4));display:flex;flex-direction:column;gap:2px;padding:var(--sp-1) var(--sp-2);white-space:nowrap;
  transform:translateX(calc(-50% + var(--dx, 0px)));border-radius:var(--r-sm);background:var(--bg-surface);color:var(--link-text);box-shadow:var(--shadow-2);
  font-size:var(--fs-micro);line-height:1.25;text-align:left}
.fr__label b{font-weight:var(--fw-bold)}
.fr__label span{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--text-primary)}
.fr__label img{width:10px;height:10px;border-radius:50%}
@media (min-width:1024px){.fr__label{bottom:calc(50% + var(--sp-5));font-size:var(--fs-cta)}.fr__label span{font-size:var(--fs-note)}}
@media (max-width:767px){.fr__pin--down .fr__label{bottom:auto;top:calc(50% + var(--sp-4))}}
.fr__pin[data-flip="down"] .fr__label{bottom:auto;top:calc(50% + var(--sp-4))}
.fr__pin[data-flip="up"] .fr__label{top:auto;bottom:calc(50% + var(--sp-4))}
.fr__btn:hover .fr__label,.fr__btn:focus-visible .fr__label{background:var(--link-text);color:var(--text-on-brand)}
.fr__btn:hover .fr__label span,.fr__btn:focus-visible .fr__label span{color:var(--text-on-brand)}
.fr__btn:hover .fr__dot,.fr__btn:focus-visible .fr__dot{background:var(--link-text)}
.fr__btn:focus-visible{outline:0;box-shadow:none}
.fr__btn:focus-visible .fr__label{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
/* first time in view: labels one by one, 140 ms apart; dots pulse twice */
.fr.is-waiting .fr__label{opacity:0;transform:translate(calc(-50% + var(--dx, 0px)),var(--sp-1))}
.fr.is-in .fr__label{transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);transition-delay:calc(var(--i) * 140ms)}
.fr.is-in .fr__dot{animation:fr-pulse .9s var(--ease) 2;animation-delay:calc(var(--i) * 140ms)}
@keyframes fr-pulse{50%{box-shadow:0 0 0 3px var(--bg-surface),0 0 0 var(--sp-2) var(--brand-teal)}}
@media (prefers-reduced-motion:reduce){.fr.is-in .fr__label{transition:none}.fr.is-in .fr__dot{animation:none}}
/* close-up controls: 36 px frosted circles inside 44 px targets */
.fr__ctl{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--text-primary)}
.fr__ctl::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg-surface);opacity:.55}
.fr__ctl .ico{position:relative;width:18px;height:18px}
.fr__x{top:var(--sp-2);right:var(--sp-2)}
.fr__prev,.fr__next{top:50%;margin-top:-22px}
.fr__prev{left:var(--sp-2)}.fr__next{right:var(--sp-2)}
.fr__prev .ico{transform:rotate(90deg)}.fr__next .ico{transform:rotate(-90deg)}
.fr__cu-lbl:empty{display:none}
/* the caption keeps one height, so stepping never moves the page: sized for the longest German colour list
   (six colours), measured by frames_check.py at 320, 390, 768 and 1440 */
.fr__cap{min-height:calc(var(--sp-9) + var(--sp-6));padding-top:var(--sp-3);font-size:var(--fs-caption);line-height:var(--lh-spec)}   /* 128 */
@media (min-width:375px){.fr__cap{min-height:calc(var(--sp-9) + var(--sp-5))}}     /* 120 */
@media (min-width:768px){.fr__cap{min-height:calc(var(--sp-8) + var(--sp-3))}}     /* 76 */
.fr__name span{color:var(--text-secondary-aa)}
.fr__c{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap}
.fr__c img{width:10px;height:10px;border-radius:50%}
.fr__c--big img{width:14px;height:14px}
.fr__label img,.fr__c img{box-shadow:0 0 0 1px var(--border-strong)}     /* a white swatch stays visible on white */

/* ---------- mf-editorial (Phase 6, brief §6.8): three equal tiles; phones: one full width, two half ---------- */
.mf-edit{display:grid;gap:var(--gap-column);grid-template-columns:repeat(3,minmax(0,1fr))}
/* Phase 8: on phones a snap row with a peek, the Wandbilder pattern */
@media (max-width:767px){
  .mf-edit{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - var(--sp-7));gap:var(--sp-3);overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--sp-1)}
  .mf-edit::-webkit-scrollbar{display:none}
  .mf-edit > li{scroll-snap-align:start}
}
/* mf-xmasbar (3 Nov, MHL): the red strip after the trust band, Q4 only; the whole strip is one link to mf-xmas */
.mf-xbar{background:var(--sale-red)}
.mf-xbar__link{display:flex;align-items:center;justify-content:center;min-height:var(--sp-7);padding-block:var(--sp-2);color:var(--text-on-brand);
  font:var(--fw-bold) var(--fs-cta)/var(--lh-label) var(--font-body);text-align:center;text-decoration:none}
.mf-xbar__link:hover .container{text-decoration:underline;text-underline-offset:2px}
/* the order cut-off from ops, under the Christmas row's title (copy.xmas.cutoffText; hidden while empty) */
.mf-xmas__cutoff{margin:calc(-1 * var(--sp-2)) 0 var(--sp-4);font-size:var(--fs-cta);font-weight:var(--fw-bold);color:var(--sale-red)}
.mf-ed__tile{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);height:100%;min-width:0}
.mf-ed__tile .slot{margin-bottom:var(--sp-1)}
.mf-ed__title{font-size:var(--fs-h3)}
.mf-ed__link{color:inherit;text-decoration:none}
.mf-ed__link::after{content:"";position:absolute;inset:0}                    /* the whole tile is the link */
.mf-ed__line{font-size:var(--fs-caption);line-height:var(--lh-spec)}
.mf-ed__price .pr-now{font-size:var(--fs-price)}
.mf-ed__more{margin-top:auto;font-size:var(--fs-cta);font-weight:var(--fw-bold);color:var(--link-text)}
.mf-ed__tile:hover .mf-ed__link{color:var(--link-text)}
.mf-ed__tile:hover .mf-ed__more{text-decoration:underline;text-underline-offset:2px}

html:not([data-phone]) .is-phone-only{display:none}
.mf-stack{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}   /* the price card skeleton (PRICE_CARD, off) */

/* ---------- mf-reviews (Phase 7, brief §6.10): compact; the consent fallback line; the ¹ footnote ---------- */
.mf-reviews{padding-block:var(--sp-6)}
.mf-reviews__tp{margin-top:var(--sp-2)}
.mf-reviews__widget{height:var(--slot-trustbox);margin-top:var(--sp-3)}   /* Stop-point 8: the live TrustBox's place, labelled */
.mf-reviews__fn{margin-top:var(--sp-3);max-width:var(--measure);font-size:var(--fs-note);line-height:var(--lh-spec);color:var(--text-secondary-aa)}

/* ---------- mf-newsletter (Phase 7, brief §6.11; Phase 8: one column, WhatsApp as a link on phones) ---------- */
.mf-nl{padding-block:var(--sp-6)}
.mf-nl__col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.mf-nl__sub{max-width:var(--measure)}
.mf-nl__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5);width:100%}
.mf-nl__btn{min-width:min(100%, 320px)}
.mf-ticks{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-caption);line-height:var(--lh-label)}
.mf-ticks li{display:flex;gap:var(--sp-1);align-items:flex-start}
.mf-ticks .ico{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:var(--link-text)}

/* ---------- mf-merchone (Phase 8): one line and a link under a single hairline ---------- */
.mf-merchone{border-top:1px solid var(--border-subtle);background:var(--bg-page);padding-block:var(--sp-3);font-size:var(--fs-caption);line-height:var(--lh-label)}
.mf-merchone a{display:inline-flex;align-items:center;min-height:24px;color:var(--link-text);font-weight:var(--fw-bold);text-decoration:none;white-space:nowrap}
.mf-merchone a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- mf-payment (Phase 7, brief §6.12): the CDUS band, live logos and wording ---------- */
.mf-pay{padding-block:var(--sp-5);text-align:center}
.mf-pay__h{font-size:var(--fs-h3)}
.mf-pay__logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-3)}
.mf-pay__logos img{width:auto;height:var(--sp-5)}
@media (min-width:768px){.mf-pay__logos img{height:var(--sp-6)}}
.mf-pay__note{margin-top:var(--sp-2);font-size:var(--fs-caption);color:var(--text-secondary-aa)}
.mf-pay__social{max-width:var(--measure);margin:var(--sp-4) auto 0;font-size:var(--fs-caption)}
.mf-pay__icons{display:flex;justify-content:center;gap:var(--sp-1);margin-top:var(--sp-1)}
.mf-pay__icons a{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.mf-pay__icons img{width:var(--sp-6);height:var(--sp-6)}
.mf-pay__smile{max-width:var(--measure);margin:var(--sp-3) auto 0;font-size:var(--fs-note);color:var(--text-secondary-aa)}

/* ---------- mf-footer (Phase 7, brief §6.12): the CDUS pattern, condensed; accordions on phones ---------- */
.mf-top{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;background:var(--text-secondary-aa);color:var(--text-on-brand);
  font-weight:var(--fw-bold);text-decoration:none;font-size:var(--fs-cta)}
.mf-footer{background:var(--surface-inverse);color:var(--text-on-brand);padding-block:var(--sp-5) var(--sp-4);font-size:var(--fs-caption)}
.mf-footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.mf-footer a:hover{text-decoration:underline;text-underline-offset:2px}
.mf-footer :focus-visible{outline-color:var(--focus-ring-inner);box-shadow:none}
.mf-ft__cols{display:grid;gap:var(--sp-5)}
@media (min-width:768px){.mf-ft__cols{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mf-footer h2{font-size:var(--fs-cta);margin:0 0 var(--sp-2)}
.mf-ft__col ul{display:flex;flex-direction:column;gap:2px}
.mf-ft__acc{border-bottom:1px solid var(--text-secondary)}
.mf-ft__acc summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none}
.mf-ft__acc summary::-webkit-details-marker{display:none}
.mf-ft__acc summary h2{margin:0;font-size:var(--fs-cta);text-transform:uppercase;letter-spacing:.04em}
.mf-ft__acc[open] .ico--acc{transform:rotate(180deg)}
.mf-ft__acc ul{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--sp-3)}
@media (max-width:767px){.mf-ft__cols{gap:0}}
.mf-ft__base{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--text-secondary);display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-note)}
.mf-ft__base a{display:inline;text-decoration:underline}
.mf-ft__made{letter-spacing:.04em}

/* ---------- mf-sticky (Phase 7, brief §6.13): phones only; slides in and out, never covers the focused control ---------- */
.mf-sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-overlay);display:none;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));background:var(--bg-surface);box-shadow:var(--shadow-3);
  transform:translateY(110%);transition:transform var(--dur-base) var(--ease)}
html[data-phone] .mf-sticky{display:flex}
.mf-sticky.is-on{transform:none}
.mf-sticky__line{flex:1 1 auto;min-width:0;font-size:var(--fs-caption);line-height:var(--lh-label);font-weight:var(--fw-bold)}
.mf-sticky .mf-upload{flex:0 0 auto}
.mf-sticky .btn-primary{min-height:44px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-cta);white-space:nowrap}
.mf-sticky .mf-upload__status:empty{display:none}
@media (prefers-reduced-motion:reduce){.mf-sticky{transition:none}}

/* ---------- dialog (native <dialog>: Escape and the top layer built in) ---------- */
.mf-dialog{max-width:min(var(--measure), calc(100vw - 2 * var(--sp-4)));padding:var(--sp-5);border:0;border-radius:var(--r-sm);box-shadow:var(--shadow-3);color:var(--text-primary)}
.mf-dialog::backdrop{background:var(--surface-inverse);opacity:.6}
.mf-dialog h2{font-size:var(--fs-h2);margin-bottom:var(--sp-3)}
.mf-dialog h3{font-size:var(--fs-body);margin:var(--sp-3) 0 var(--sp-1)}
.mf-dialog form{margin-top:var(--sp-5)}