/* =====================================================================
   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-5)}}             /* phones: 24 px (v36, page length; was 32 since Phase 8, DV-49) */
.mf-sec--canvas{background:var(--canvas)}   /* 3 Nov (MHL): the page is white, as CDUS; light beige only for the three-tile editorial row and payment */
.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{position:fixed;right:max(var(--sp-4), env(safe-area-inset-right, 0px));bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px) + var(--rb-lift, 0px));
  z-index:var(--z-toast);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--sp-2);
  color:var(--text-on-brand);font-size:var(--fs-note);line-height:var(--lh-label)}   /* 3 Nov (MHL): bottom-right, compact */
.rb__toggle{min-height:var(--target);padding:0 var(--sp-4);border:0;border-radius:var(--r-sm);background:var(--surface-inverse);color:var(--text-on-brand);
  font:var(--fw-bold) var(--fs-note)/1 var(--font-body);box-shadow:var(--shadow-2);cursor:pointer}
.rb__toggle:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-inner);outline-offset:var(--focus-ring-offset)}
.rb__panel{display:grid;gap:var(--sp-2);width:min(var(--rb-panel-w), calc(100vw - 2 * var(--sp-4)));max-height:min(70vh, var(--rb-panel-h));overflow:auto;padding:var(--sp-3);
  border-radius:var(--r-sm);background:var(--surface-inverse);box-shadow:var(--shadow-3)}
.rb__title{font-weight:var(--fw-bold)}
.rb fieldset{margin:0;padding:0;border:0;min-width:0}
.rb legend{float:left;width:var(--rb-legend-w);padding:0;line-height:var(--rb-chip-h)}
.rb__opts{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.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:var(--rb-chip-h);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;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);background:var(--editorial-panel);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:var(--cta-h);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:var(--target);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}
.slot:not(.is-empty) .slot__label{display:none}   /* v44 (Astra 3): the production notes go once the photo is there; they are aria-hidden throughout */   /* 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:var(--target);height:var(--target);
  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 var(--target) 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:var(--target);
  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:var(--tab-inset) 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:var(--hd-top-h);border-bottom:1px solid var(--border-strong)}
.mf-logo{display:block;flex:0 0 auto;line-height:0}
.mf-hd .mf-logo img{width:var(--logo-w);height:auto}
.mf-search{display:flex;flex:0 1 var(--search-w);min-width:0}
.mf-search input{flex:1 1 auto;min-width:0;min-height:var(--search-h);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 var(--search-h);display:flex;align-items:center;justify-content:center;min-height:var(--search-h);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:var(--ico-s);height:var(--ico-s)}
.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:var(--target);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:var(--ico-util-h)}
.mf-count{position:absolute;top:0;right:0;min-width:var(--count-h);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)/var(--count-h) 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:var(--target);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:var(--mega-item-w);margin-bottom:var(--sp-5);
  color:var(--text-primary);text-decoration:none;text-align:center}
.mf-mega__list img{width:var(--nav-img-w);height:var(--nav-img-h);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:var(--ph-top-h);padding-right:var(--sp-1);border-bottom:1px solid var(--border-strong)}
.mf-burger{flex:0 0 var(--burger-w);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--burger-gap);align-self:stretch;min-height:var(--target);
  padding:0;border:0;background:none;color:var(--text-primary);cursor:pointer}
.mf-burger span{display:block;width:var(--burger-bar-w);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(var(--burger-shift)) rotate(45deg)}
.mf-burger.is-open span:nth-child(2){opacity:0}
.mf-burger.is-open span:nth-child(3){transform:translateY(calc(-1 * var(--burger-shift))) rotate(-45deg)}
.mf-ph .mf-logo{flex:0 1 var(--ph-logo-w);min-width:var(--ph-logo-min)}
.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:var(--target);height:var(--target);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:var(--ph-row-h);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:var(--target);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:var(--drawer-max);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:var(--dr-row-h);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:var(--dr-tile-h);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:var(--dr-img-w);height:var(--dr-img-h);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:var(--dr-row-h);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:var(--target);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:var(--login-w)}
.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:var(--target);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:var(--target-s);color:var(--link-text)}
.mf-login__form .btn-primary{width:100%;min-height:var(--target);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 (3 Nov, MHL: "the top hero same as in CDUS with german text") ----------
   The CDUS v40 hero: a beige band; the photo, 4:3 from 768 and 5:4 on phones, with the price tag on its corner;
   beside it (below it on phones) the two-tone headline, four claim rows, Made in Germany in CDUS's Gift-Ready line,
   the CTA and the upload link. From 1024 the columns are 1.4 : 1 (CDUS: 623 : 445 at 1440) and the lower group
   ends on the photo's bottom edge; 768–1023 two equal columns, centred; phones stacked. */
.mf-hero{padding-block:calc(var(--sp-4) + var(--sp-1)) calc(var(--sp-5) + var(--sp-1));background:var(--canvas)}   /* phones: 20 / 28, as CDUS */
.mf-hero__grid{display:grid;gap:calc(var(--sp-4) + var(--sp-1))}              /* phones: photo → 20 px → headline */
.mf-hero__media{container-type:inline-size;aspect-ratio:var(--img-hero-m);border-radius:0}
.mf-hero__media picture{display:contents}
.mf-hero__lbl-m{display:none}
@media (max-width:767px){.mf-hero__lbl-d{display:none}.mf-hero__lbl-m{display:flex}}
@media (min-width:768px){
  .mf-hero{padding-block:var(--sp-6)}
  .mf-hero__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:center}
  .mf-hero__media{aspect-ratio:var(--img-product)}
}
@media (min-width:1024px){
  .mf-hero__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:var(--hero-gap);align-items:stretch}
  .mf-hero__media{align-self:start}
  .mf-hero__copy{display:flex;flex-direction:column;padding-top:calc(var(--sp-4) + var(--sp-1))}
}

/* the price tag on the photo (CDUS "8″ × 8″ $4.30"): sizes follow the photo's width */
.mf-hero__tag{position:absolute;right:var(--sp-2);bottom:var(--sp-2);z-index:1;padding:.5em 1em .6em 2em;background:var(--sale-red);color:var(--text-on-brand);
  font-size:var(--fs-tag-size);line-height:1.05;text-align:center;clip-path:polygon(1em 0,100% 0,100% 100%,1em 100%,0 50%)}
.mf-hero__tag span{display:block;font-weight:var(--fw-price-min)}
.mf-hero__tag strong{display:block;font-size:var(--fs-tag-price);font-weight:var(--fw-bold);letter-spacing:-.02em}
.mf-hero__tag .pr-mark{color:inherit;text-decoration:none;font-size:.5em;vertical-align:top}
@media (min-width:1024px){.mf-hero__tag{right:calc(var(--sp-4) + var(--sp-1));bottom:calc(var(--sp-4) + var(--sp-1))}}
/* on the left (3 Nov, where MHL marked it on his hero photo): mid-height over the wall above the plant, narrower,
   the arrow on the right pointing at the canvas. Position in % of the photo, so it holds on both crops */
.mf-hero__tag--left{right:auto;bottom:auto;left:var(--tag-left);top:var(--tag-top);padding:.5em 2em .6em 1em;font-size:var(--fs-tag-size-sm);
  clip-path:polygon(0 0,calc(100% - 1em) 0,100% 50%,calc(100% - 1em) 100%,0 100%)}
.mf-hero__tag--left strong{font-size:var(--fs-tag-price-sm)}
@media (min-width:1024px){.mf-hero__tag--left{right:auto;bottom:auto}}
/* v45 (MHL: "in hero we need to keep the same price badge"): live's hero badge, rebuilt as text in --sale-red (live's #D40140), about 80 px wide as on live,
   in the spot MHL marked on 3 Nov: a small „ab“, a large „6,“, the cents raised and underlined, the price note; the struck manufacturer's price under it */
.mf-hero__badge{position:absolute;left:var(--hero-badge-x-m);top:var(--hero-badge-y-m);transform:translate(-50%,-50%);z-index:1;margin:0;padding:.4em .55em .45em;background:var(--sale-red);color:var(--text-on-brand);
  font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1;text-align:center}
.mf-hero__badge-now{display:flex;align-items:flex-start;justify-content:center}
.mf-hero__badge-pre{align-self:flex-end;margin:0 .2em .3em 0;font-size:.8em;font-weight:var(--fw-price-min)}
.mf-hero__badge-num{display:flex;align-items:flex-start}
.mf-hero__badge-eur{font-size:2.4em;letter-spacing:-.03em}
.mf-hero__badge-ct{margin:.2em 0 0 .05em;font-size:1.15em;text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.12em}
.mf-hero__badge .pr-mark{margin-top:.15em;color:inherit;text-decoration:none;font-size:.6em}
.mf-hero__badge-was{display:block;margin-top:.2em;font-size:1.05em;text-decoration-thickness:.1em}

/* the headline: two tones, the teal words on their own line; capped so the live headline's longest line,
   "Deutschlands Nr. 1" (9.51 em in the live SemiBold cut), always fits the column */
.mf-hero__copy{container-type:inline-size;min-width:0}
.mf-hero h1{font-size:min(var(--fs-hero-h1-m), calc(100cqi / 9.6));line-height:var(--lh-display);letter-spacing:-.03em;color:var(--text-primary)}
.mf-hero__accent{display:block;color:var(--link-text)}
@media (min-width:768px){.mf-hero h1{font-size:min(var(--fs-hero-h1), calc(100cqi / 9.6));line-height:var(--lh-hero);letter-spacing:-.035em}}

/* four claim rows, as CDUS: an icon, then the claim with its key words in bold */
.mf-hero__rows{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);font-size:var(--fs-body);line-height:var(--lh-label)}
.mf-hero__rows li{display:flex;align-items:flex-start;gap:var(--sp-3)}
.mf-hero__rows .ico{flex:0 0 var(--ico-hero);width:var(--ico-hero);height:var(--ico-hero);color:var(--link-text)}
.mf-hero__rows strong{font-size:var(--fs-hero-em);font-weight:var(--fw-bold)}
.mf-hero__rows .red{color:var(--sale-red)}
.mf-hero__rows sup a{color:inherit;text-decoration:none}
.mf-claims__link{padding:0;border:0;background:none;font:inherit;color:var(--link-text);text-align:left;cursor:pointer}
.mf-claims__link:hover strong{text-decoration:underline;text-underline-offset:2px}

/* Made in Germany in the Gift-Ready line, centred over the button; from 1024 it and everything under it sit on the photo's bottom edge */
.mf-hero__made{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin:calc(var(--sp-5) + var(--sp-1)) 0 var(--sp-3);font-size:var(--fs-hero-made);line-height:var(--lh-label)}
.mf-hero__made img{flex:0 0 var(--ico-flag-w);width:var(--ico-flag-w);height:var(--ico-flag-h)}
@media (max-width:767px){.mf-hero__rows{gap:var(--sp-2)}}                     /* phones: 8 px, as CDUS */
/* v43 (MHL, 4 Nov: "lets try put all lines on one line", then "skip icons on mobile"): on phones the claims swap their icons for a small tick (or a dot,
   ?heromark=dot; MHL: "in hero section just dots or ticks") and the text shrinks only as far as the longest claim needs to stay on one line (24.7 em wide,
   bold words included); never below the 13 px caption size, so below about 373 px the two longest wrap again */
.mf-hero__mark{display:none}
@media (max-width:767px){
  .mf-hero__rows{font-size:max(var(--fs-caption), min(var(--fs-body), calc((100cqi - var(--sp-3) - var(--sp-2)) / 24.7)))}
  .mf-hero__rows li{gap:var(--sp-2)}
  .mf-hero__rows strong{font-size:1.0625em}
  .mf-hero__rows li > .ico{display:none}
  .mf-hero__mark{display:flex;flex:0 0 var(--sp-3);width:var(--sp-3);height:1lh;align-items:center;justify-content:center;color:var(--link-text)}
  .mf-hero__mark .ico{width:var(--sp-3);height:var(--sp-3);stroke-width:2.5}
  .mf-hero__rows--dot .mf-hero__mark::before{content:"";width:.4em;height:.4em;border-radius:50%;background:currentColor}   /* ?heromark=dot */
  /* v45 (Amin via MHL: "same icons … bit smaller so the text can fit on one line on all mobile sizes"): the live icons back, sized with the text (1.1 em,
     a 0.5 em gap), and the whole row (24.7 em of text + 1.6 em) fits the column at every phone width: 11 px at 320, 13.6 at 390, 16 from 430 */
  .mf-hero__rows--icon{font-size:min(var(--fs-body), calc(100cqi / 26.3))}
  .mf-hero__rows--icon li{gap:.5em}
  .mf-hero__rows--icon li > .ico{display:block;flex:0 0 1.1em;width:1.1em;height:1.1em;margin-top:.12em}
  .mf-hero__rows--icon .mf-hero__mark{display:none}
}
@media (min-width:1024px){.mf-hero__rows{margin-bottom:var(--sp-5)}.mf-hero__made{margin-top:auto}}   /* at least 24 px above it when the rows wrap */
/* v46: Made in Germany is the last hero row (as live), its flag in the icon box; the button takes over the line's place */
.mf-hero__rows .mf-hero__flag{object-fit:contain}
/* v47 (MHL): the hero's bullets as live, redrawn: a red tick on a soft red disc, the friends offer a rounded yellow star on a soft yellow disc,
   in the icons' box (22 px; on phones 1.1 em) */
.mf-hero__rows .mf-hb{display:grid;place-items:center;border-radius:50%;color:var(--sale-red);background:color-mix(in srgb, var(--sale-red) 12%, transparent)}
.mf-hero__rows .mf-hb svg{width:76%;height:76%}
.mf-hero__rows .mf-hb--star{color:var(--star-live);background:color-mix(in srgb, var(--star-live) 22%, transparent)}
.mf-hero__rows .mf-hb--star svg{width:82%;height:82%}
.mf-hero__rows--icon li > .mf-hb{display:grid}   /* v48 (MHL: "mobile hero icons: misaligned"): the phone icon rule set them to block, which pushed the tick off the disc's centre */
@media (min-width:1024px){.mf-hero__copy h1 + .mf-hero__rows{margin-top:calc(var(--sp-6) + var(--sp-2))}}   /* v48 (MHL: "desktop hero: lets make bigger gap after title"): 40 px, was 24 */
/* v47 (MHL: "move badge closer next to canvas and below framed passepartout, same distance from both"): from 768 the badge's right edge sits 16 px
   left of the canvas and its top 16 px under the frame (positions measured on hero-01); phones keep their place */
@media (max-width:767px){.mf-hero__badge{font-size:min(.85em,3.55cqw)}}   /* v65/v66: phones about 80 px wide from 414 up, as live's hero badge; at 390 and below 20 % of the photo */
@media (min-width:768px){.mf-hero__badge{left:var(--hero-badge-x);top:var(--hero-badge-y)}}   /* centred on its spot (tokens-project.css) */
@media (min-width:768px) and (max-width:1023px){.mf-hero__badge{font-size:min(var(--fs-cta),3.3cqw)}}   /* the 348 px photo at 768: about a fifth of it, so the spot holds */
@media (min-width:1024px) and (max-width:1139px){.mf-hero__rows{gap:var(--sp-2);margin-top:var(--sp-4);margin-bottom:var(--sp-4)}}   /* the rows wrap here: 16 px around them keeps the link on the photo's edge (CDUS tightens here too) */
.mf-hero .mf-hero__cta{width:100%;min-height:var(--cta-h-hero);gap:var(--sp-3);font-size:var(--fs-body)}
@media (max-width:767px){
  /* 4 Nov (MHL, from the Astra review): on phones the button follows the headline, the four claims follow the button;
     v56 (Amin, 5 Nov: "move 'Made in Germany' below the bullets"; Daniel: it "nimmt … sehr viel Platz weg"): Made in Germany closes the block, under the claims */
  .mf-hero__copy{display:flex;flex-direction:column}
  .mf-hero__copy h1{order:1}
  .mf-hero__cta{order:2;margin-top:var(--sp-4)}
  .mf-hero__rows{order:3;margin-top:var(--sp-4)}
  .mf-hero__made{order:4;margin:var(--sp-4) 0 0}
}
.mf-hero__cta .ico{flex:0 0 var(--ico-s);width:var(--ico-s);height:var(--ico-s)}
/* 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:var(--target);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 var(--ico-m);width:var(--ico-m);height:var(--ico-m)}
.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)}
@media (max-width:767px){.mf-trust{padding-block:var(--sp-5)}}   /* v36: 24 px on phones, as every section */
.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:var(--target);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}
/* the Trusted Shops trustbadge, rebuilt as the live widget (3 Nov, MHL): 16 × 8 em, 8 px per em on phones (128 × 64) and
   10 from 768 (160 × 80, its live size); Trusted Shops' own seal, star, dots and "e" */
.mf-tsl{position:relative;display:flex;justify-content:center;align-items:flex-end;height:100%}
.mf-tsl__live:empty{display:none}
.mf-tsl.is-live .mf-tsb,.mf-tsl.is-live .mf-tsb__a{display:none}              /* the live widget rendered: the rebuild steps aside */
.mf-tsb__a{display:flex;border-radius:var(--r-sm);color:inherit;text-decoration:none}   /* v36: the rebuild links to the live review page */
.mf-tsb{position:relative;display:flex;flex:none;width:16em;height:8em;font:var(--fw-regular) var(--tsb-fs)/1.2 var(--font-ts);color:var(--ts-ink);
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-sm)}
@media (min-width:768px){.mf-tsb{font-size:var(--tsb-fs-d)}}
.mf-tsb img{display:block}
.mf-tsb__more{position:absolute;top:.7em;right:.9em;width:1.1em}
.mf-tsb__l{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;width:6.6em;margin-block:.7em .9em;border-right:1px solid var(--border-subtle)}
.mf-tsb__seal{width:4.1em;height:4.1em}
.mf-tsb__l > span{font-size:.95em}
.mf-tsb__r{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:.2em;padding-top:.4em}
.mf-tsb__score{display:flex;align-items:center;gap:.25em;white-space:nowrap}
.mf-tsb__score b{font-size:1.45em;font-weight:var(--fw-bold)}
.mf-tsb__score img{width:1.35em;height:1.35em}
.mf-tsb__score span{color:var(--ts-muted)}
.mf-tsb__grade{font-size:1.15em}
.mf-tsb__toggle{display:flex;align-items:center;width:4.2em;height:2.1em;margin-top:.35em;padding-inline:.15em;border:.15em solid var(--ts-ink);border-radius:2em;background:var(--ts-track)}
.mf-tsb__toggle img{width:1.6em;height:1.6em}
/* the TV logos (3 Nov, MHL): ZDF and N24 DOKU in turn, in a box the size of the Trusted Shops badge (160 × 80, 128 × 64 on phones),
   each fitted and sitting on the baseline like the other badges */
.mf-tvb{position:relative;display:block;flex:none;height:100%;aspect-ratio:2 / 1}
.mf-tvb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}   /* centred (4 Nov, MHL): the wide N24 DOKU logo sank to the bottom edge */
.mf-tvb__logo{opacity:0;animation:mf-tv var(--dur-tv) linear infinite}
.mf-tvb__logo--1{animation-delay:calc(var(--dur-tv) / -2)}
.mf-tvb:hover .mf-tvb__logo{animation-play-state:paused}
@keyframes mf-tv{0%{opacity:0}6.25%{opacity:1}43.75%{opacity:1}50%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mf-tvb__logo{animation:none}.mf-tvb__logo--0{opacity:1}}
.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)}
/* 3 Nov (MHL): the four titles on one line, side by side. Capped at 1/11 of the column, so the longest live title,
   „Aus der TV-Werbung“ (10.75 em), never wraps; full size from 360 up (12.4 px at 320). The footnote mark does not raise its line */
.mf-mark{container-type:inline-size}
@media (max-width:389px){.mf-mark{padding-inline:var(--sp-1)}}
.mf-mark__title{max-width:24ch;font-size:min(var(--fs-cta), calc(100cqi / 11));font-weight:var(--fw-bold);line-height:var(--lh-label);text-wrap:balance}
@media (min-width:1024px){.mf-mark__title{font-size:min(var(--fs-body), calc(100cqi / 11))}}
.mf-mark__title sup{line-height:0}
@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}
/* 3 Nov: "Für die Umwelt" left the row, so the line (shipping, and on phones Made in Germany and the print claim) is centred as one */
.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)}
/* v36 phones (Astra, page length): "Alle … ›" moves up to the kicker line, right-aligned, as on desktop it sits on the heading row.
   Its 44 px target hangs over the line by equal negative margins, so the line stays as tall as the kicker. No kicker: as before. */
@media (max-width:767px){
  .sh{margin-bottom:var(--sp-4)}
  .sh:has(.sh__kicker){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-3);align-items:center}
  .sh:has(.sh__kicker) .sh__kicker{grid-row:1;grid-column:1;margin:0}
  .mf-frames .sh__row h2{font-size:var(--fs-h2)}   /* v44 (Astra, MHL: "yes to all"): a supporting feature, a context heading on phones, as the reviews */
  .sh:has(.sh__kicker) .sh__row{display:contents}
  .sh:has(.sh__kicker) .sh__row h2{grid-row:2;grid-column:1 / -1;margin-top:var(--sp-3)}
  .sh:has(.sh__kicker) .sh__all{grid-row:1;grid-column:2;flex-basis:auto;align-items:center;margin-block:calc((var(--fs-caption) * var(--lh-label) - var(--target)) / 2)}
  .sh:has(.sh__kicker) .sh__sub{grid-column:1 / -1}
}

/* ---------- 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:var(--target);
  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:var(--nav-img-w);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:var(--target);font-size:var(--fs-cta)}
.pc .pc-cta{min-height:var(--target);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:var(--pill-delay)}
  /* Codex, 3 Nov: the v6.1 swap hides slide 1 on every hovered card; a card with one photo keeps it (write-back §14) */
  .pc:not(.has-2):hover .pc-slide--1{opacity:1;visibility:visible}
}
/* keyboard focus on the title shows what hover shows: the second photo where there is one */
.pc.has-2:has(.pc-link:focus-visible) .pc-slide--1{opacity:0;visibility:hidden}
.pc.has-2:has(.pc-link:focus-visible) .pc-slide--2{opacity:1;visibility:visible}
/* the price note "*" is a link of its own: above the card's stretched link, as the upload button is */
.pr-mark{position:relative;z-index:1}
.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 clear peek of the next) */
.mf-row{row-gap:var(--sp-7)}
.mf-row__item{display:flex;min-width:0}
.mf-row__item > .pc{flex:1 1 auto}
@media (max-width:767px){
  .mf-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - var(--sp-9));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 .pc-body{padding: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 (DV-50), so the second
     photo is a tap on the dots (v36) */
  .mf-row .pc{touch-action:pan-x pan-y}
}
/* v63 (colleague review via MHL, 10 Nov: "the next product can only be reached with the arrow. Swiping the tiles doesn't work"): since v45 the
   Wandbilder and gift rows on phones are .mf-xs__track sliders, which DV-50 did not cover, and .pc-media is pan-y too (touch-action takes the
   strictest value on the way up to the scroller). In the sliders card and photo allow both, so a sideways swipe scrolls the row */
.mf-xs__track .pc,.mf-xs__track .pc-media,.mf-row .pc-media{touch-action:pan-x pan-y}
/* v36 (MHL "ok", Astra): on touch screens the two dots are buttons; a tap shows that photo. 8 px dots, 24 px apart,
   each with a 32 px target (WCAG 2.5.8); the bar itself lets taps through to the card's link */
@media (hover:none){
  .pc-dots{gap:var(--sp-5)}
  .pc-dot{position:relative;width:var(--sp-2);height:var(--sp-2);padding:0;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;pointer-events:auto}
  .pc-dot::after{content:"";position:absolute;inset:calc(-1 * var(--sp-3))}
}

/* ---------- the deal banner, as CDUS (3 Nov, MHL: "keep same beige background for deals") ----------
   Its own beige band under the Wandbilder grid, 40 px around from 768 and 28 on phones. From 1024 the image covers
   two of three columns and the text the third; 768–1023 1.8 : 1; phones the image, then the text. */
.mf-wall:has(.mf-deal){padding-bottom:0}
.mf-deal{margin-top:var(--pad-section);padding-block:calc(var(--sp-5) + var(--sp-1));background:var(--canvas)}
@media (max-width:767px){.mf-deal{margin-top:var(--sp-5)}}
.mf-dealband .mf-deal{margin-top:0}   /* ?dealsat=: the band on its own, no gap above */
.mf-deal--plain{background:var(--bg-page)}   /* ?dealband=none: the navy cards on the white page, no beige strip */
.mf-wall .mf-deal--plain{padding-block:var(--pad-section)}   /* v43 (MHL: "after 6 wall decor tiles without strip with nice gap"): 48 + 48 = 96 px above and below the cards, the same as between any two sections */
@media (max-width:767px){.mf-wall .mf-deal--plain{padding-block:var(--sp-5)}}   /* phones: 48 above and below, as between sections (v45: the slider's controls end the tiles, no scroll room under them) */
.mf-dealband .mf-deal--plain{padding-top:calc(var(--sp-7) + var(--sp-2))}   /* v42 (MHL: "bigger gap after badges so it doesnt look so busy"): 32 + 56 = 88 px after the badges, the same as under the cards */
@media (max-width:767px){.mf-dealband .mf-deal--plain{padding-top:var(--sp-5)}}   /* phones: 24 + 24 = 48 px, the same as under the cards */
.mf-dealband--hero .mf-deal:not(.mf-deal--plain){padding-top:0;background:var(--canvas)}   /* ?dealsat=hero: the hero's beige strip carries the two offers, one strip, then the white badges */
.mf-dealband--hero .mf-deal--plain{padding-top:calc(var(--sp-7) + var(--sp-5))}   /* ?dealsat=hero&dealband=none: under the hero on white, 72 px above the cards as below them (40 + 32) */
@media (max-width:767px){.mf-dealband--hero .mf-deal--plain{padding-top:var(--sp-7)}}   /* phones: 48, as below (24 + 24) */
/* v46 (Amin via MHL): from 768 the deal cards follow the frames feature, the same gap above (the frames' own) and below them */
.mf-dealband--frames .mf-deal--plain{padding-block:var(--pad-section) calc(var(--pad-section) * 2)}   /* v52 (MHL: "make same gap before and after 2 banner deals"): 96 px of white from the frames to the cards (48 + 48) and 96 from the cards to the Christmas strip */
@media (max-width:767px){.mf-dealband--frames .mf-deal--plain{padding-block:var(--sp-5) var(--pad-section)}}   /* phones: 48 and 48 (24 + 24 above, 48 below) */
/* v46 (Amin; MHL: "the deals are now taller. i would keep image section exact square"): from 1024 the photo is an exact square (267 px at 1440), the card as tall as it */
@media (min-width:1024px){
  .mf-deals .mf-dl__media::before{padding-top:100%}
  .mf-deals .mf-dl__body{gap:var(--sp-2);padding:var(--sp-5) var(--sp-6)}
  .mf-deals .mf-dl__title{font-size:var(--fs-h3)}
  .mf-deals .mf-dl__line,.mf-deals .mf-dl__cta{font-size:var(--fs-cta)}
}
@media (min-width:1024px) and (max-width:1279px){.mf-deals .mf-dl__line{display:none}}   /* the text fits the square photo from 1280; below, without the subline (as phones) */
/* v46 (Amin via MHL): Fotobuch & Kalender as two big tiles from 1024; v47 (MHL: "keep all tiles in same ratio, do not crop them"): the photos keep the tiles' 4:3; the four gifts in one row */
@media (min-width:1024px){
  .mf-books .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-gifts .pc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* v47 option (?books=side; MHL: "show also option with text on right side"): from 1024 each big tile lays its 4:3 photo left and its text right */
@media (min-width:1024px){
  .mf-books--side .pc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
  .mf-books--side .pc-media{aspect-ratio:auto;height:auto;min-height:100%}   /* as tall as the text; the 4:3 photo sits uncropped inside, on its beige ground */
  .mf-books--side .pc-media img{object-fit:contain}
  .mf-books--side .pc-body{justify-content:center;padding:var(--sp-5)}
  .mf-books--side .pc-title{font-size:var(--fs-h3)}
}
/* v41 default (DV-122; MHL, 4 Nov, ?deals=pair round 2): live's two offers as compact deal cards in the deal band, not tiles:
   a 3:2 photo with the „Aktion“ badge in its corner, beside a short text; the whole card is one link.
   Two side by side from 1024; stacked below; phones drop the subline */
.mf-deals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-column);margin:0;padding:0;list-style:none}
.mf-dl{--dl-bg:var(--bg-surface);--dl-title:var(--sale-red);--dl-text:var(--text-primary);--dl-cta:var(--action-secondary-text);--dl-badge-bg:var(--sale-red);--dl-badge-ink:var(--text-on-brand);--dl-badge-r:0;--dl-shadow:var(--shadow-1);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-width:0;overflow:hidden;
  border-radius:var(--r-sm);background:var(--dl-bg);box-shadow:var(--dl-shadow)}
.mf-dl__media{position:relative;overflow:hidden}
.mf-dl__media::before{content:"";display:block;padding-top:100%}   /* v50 (MHL: "we need to keep same ratio for mobile too"): the photo is square at every width (it was 3:2 below 1024) */
.mf-dl__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.mf-dl__badge{position:absolute;top:var(--sp-2);left:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--dl-badge-r);background:var(--dl-badge-bg);color:var(--dl-badge-ink);
  font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:var(--lh-label)}
.mf-dl__body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4)}
.mf-dl__title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--dl-title)}
.mf-dl__title{hyphens:manual;overflow-wrap:break-word}   /* v53: „Weihnachtszauber!“ ran 23 px out of the card at 320 (v50–v52); app.js puts a soft hyphen at the compound, so it breaks „Weihnachts-zauber!“ where it must; any other long word wraps rather than overflows */
.mf-dl__link{color:inherit;text-decoration:none}
.mf-dl__link::after{content:"";position:absolute;inset:0;z-index:1}
.mf-dl__link:focus-visible{outline:none}
.mf-dl:has(.mf-dl__link:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.mf-dl__line{margin:0;font-size:var(--fs-cta);line-height:var(--lh-spec);color:var(--dl-text)}
.mf-dl__cta{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);font-size:var(--fs-cta);font-weight:var(--fw-bold);color:var(--dl-cta)}
.mf-dl__cta .ico{flex:0 0 var(--ico-s);width:var(--ico-s);height:var(--ico-s);transition:transform var(--dur-fast) var(--ease)}
@media (hover:hover){.mf-dl:hover .mf-dl__media img{transform:scale(1.03)}.mf-dl:hover .mf-dl__cta .ico{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.mf-dl__media img,.mf-dl__cta .ico{transition:none}}
/* 4 Nov colour round (MHL: "looks cheap … play with colours", ?dstyle=): every new style takes the red off the headline (red is the badge's job only),
   drops the tile shadow (a flat colour field reads as a deal block, not a product card) and rounds the badge to the 4 px step */
.mf-deals[data-style="ink"] .mf-dl{--dl-bg:var(--panel-navy);--dl-title:var(--text-on-brand);--dl-text:var(--text-on-brand);--dl-cta:var(--text-on-brand);--dl-badge-r:var(--r-xs);--dl-shadow:none}
.mf-deals[data-style="gold"] .mf-dl{--dl-bg:var(--xmas-gold-3);--dl-title:var(--text-primary);--dl-cta:var(--action-secondary-text);--dl-badge-r:var(--r-xs);--dl-shadow:none}
.mf-deals[data-style="quiet"] .mf-dl{--dl-title:var(--text-primary);--dl-badge-r:var(--r-xs);--dl-shadow:none}
.mf-deals[data-style="ink"] .mf-dl__cta{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
@media (max-width:1023px){.mf-deals{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}}
@media (min-width:768px) and (max-width:1023px){.mf-dl{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}   /* tablets: one card a row, the square photo a third of it */
@media (min-width:360px) and (max-width:767px){   /* ?dealrow=row: one card with the next peeking in, sideways, as the Wandbilder row; stacked below 360 */
  .mf-deals--row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - var(--sp-7));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .mf-deals--row::-webkit-scrollbar{display:none}
  .mf-deals--row > .mf-dl{scroll-snap-align:start;grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
  .mf-deals--row .mf-dl__title{font-size:var(--fs-cta)}   /* 14 px, so „Weihnachtszauber!“ fits the narrow card's text column without a break */
  .mf-deals--row .mf-dl__cta{white-space:nowrap}
}
@media (max-width:767px){
  .mf-dl{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  .mf-dl__body{padding:var(--sp-2) var(--sp-3)}
  .mf-dl__title{font-size:var(--fs-body)}
  .mf-dl__line{display:none}
  .mf-dl__cta{margin-top:var(--sp-1)}
}
@media (min-width:768px){.mf-deal{padding-block:calc(var(--sp-6) + var(--sp-2))}}
.mf-banner{display:grid;gap:calc(var(--sp-5) + var(--sp-1))}
@media (min-width:768px){.mf-banner{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}}
@media (min-width:1024px){
  .mf-banner{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-column)}
  .mf-banner__img{grid-column:1 / span 2}
}
.mf-banner__img{border-radius:0}
.mf-banner__img picture{display:contents}
.mf-banner__text{container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
@media (max-width:767px),(min-width:1024px){.mf-banner__text{padding-inline:var(--gap-card)}}
.mf-banner__kicker{margin-bottom:var(--sp-3);padding:var(--sp-1) var(--sp-3);background:var(--sale-red);color:var(--text-on-brand);font-size:var(--fs-hero-made);font-weight:var(--fw-bold);line-height:1.3}
.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{margin-top:var(--sp-4);font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--text-secondary-aa)}
/* the offer as one big red line (on two where the column is narrow), its scope dark under it */
.mf-banner__big{display:block;font-size:min(var(--fs-deal), calc(100cqi / 5.6));line-height:1;letter-spacing:-.03em;color:var(--sale-red)}
/* 3 Nov (MHL: "more impressive"): „Zusätzlich“ as the lead-in, „20%“ as large as the column allows ("20%" is 2.4 em) */
.mf-banner__lead{display:block;font-size:var(--fs-deal-lead);line-height:1.1;letter-spacing:-.01em;color:var(--sale-red)}
.mf-banner__num{display:block;margin-top:calc(-1 * var(--sp-1));font-size:min(var(--fs-deal-num), calc(100cqi / 2.5));line-height:.9;letter-spacing:-.05em;color:var(--sale-red)}
.mf-banner__scope{display:block;margin-top:var(--sp-3);font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-label);letter-spacing:normal;color:var(--text-primary)}
@media (max-width:767px){.mf-banner__scope{font-size:var(--fs-deal-sub-m)}}
.mf-banner__standin{margin-top:var(--sp-2);padding:0 var(--sp-1);border:1px dashed currentColor;font-size:var(--fs-micro)}   /* "Platzhalter – Wortlaut ausstehend", OFFER20=standin */
.mf-banner__cta{min-height:var(--cta-h-banner);margin-top:calc(var(--sp-4) + var(--sp-1));gap:var(--sp-3);font-size:var(--fs-cta)}
.mf-banner__cta .ico{flex:0 0 var(--ico-s);width:var(--ico-s);height:var(--ico-s)}
@media (max-width:767px),(min-width:1024px){.mf-banner__cta{align-self:stretch}}
.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)}
@media (max-width:767px){
  /* 4 Nov (MHL: "do not make the deal offer too big on mobile"): the slim image, the deal on one line, tighter gaps */
  .mf-deal{padding-block:var(--sp-5)}
  .mf-banner{gap:var(--sp-4)}
  .mf-banner__img.has-m{aspect-ratio:var(--img-deal-m)}
  .mf-banner__kicker{margin-bottom:var(--sp-2)}
  .mf-banner__lead,.mf-banner__num{display:inline;margin:0;font-size:min(var(--fs-deal-m), calc(100cqi / 8.6));line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
  .mf-banner__scope{margin-top:var(--sp-1)}
  .mf-banner__note{margin-top:var(--sp-2)}
  .mf-banner__cta{margin-top:var(--sp-3)}
}
.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:4 / 5}}                   /* 3 Nov (MHL): as CDUS (Phase 8 had 1:1) */
.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:calc(var(--target) / -2);top:calc(var(--target) / -2);width:var(--target);height:var(--target);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:var(--fr-dot);height:var(--fr-dot);margin:calc(var(--fr-dot) / -2) 0 0 calc(var(--fr-dot) / -2)}}
.fr__label{position:absolute;left:50%;bottom:calc(50% + var(--sp-4));display:flex;flex-direction:column;gap:2px;width:max-content;padding:var(--sp-1) var(--sp-2);white-space:nowrap;   /* max-content: the box always holds its longest line (3 Nov, MHL: „Schwarz mit Passepartout“ ran over the edge) */
  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)}
/* below 360 the two lower labels can't sit side by side (the German names are longer than CDUS's English ones), so one
   piece sets sideXS: its label goes above its dot there, over the photo's lower part, clear of faces (3 Nov) */
@media (max-width:359px){.fr__pin[data-side-xs="up"] .fr__label{top:auto;bottom:calc(50% + var(--sp-4))}}
.fr__label span{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--text-primary)}
.fr__label img{width:var(--swatch);height:var(--swatch);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) * var(--stagger))}
.fr.is-in .fr__dot{animation:fr-pulse var(--dur-pulse) var(--ease) 2;animation-delay:calc(var(--i) * var(--stagger))}
@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:var(--target);height:var(--target);padding:0;border:0;background:none;cursor:pointer;color:var(--text-primary)}
.fr__ctl::before{content:"";position:absolute;inset:var(--fr-ctl-inset);border-radius:50%;background:var(--bg-surface);opacity:.55}
.fr__ctl .ico{position:relative;width:var(--ico-s);height:var(--ico-s)}
.fr__x{top:var(--sp-2);right:var(--sp-2)}
.fr__prev,.fr__next{top:50%;margin-top:calc(var(--target) / -2)}
.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}
.fr__close{touch-action:pan-y}   /* v36: the page still scrolls up and down; a sideways swipe reaches the script instead of being cancelled */
/* 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) + var(--target));padding-top:var(--sp-3);font-size:var(--fs-caption);line-height:var(--lh-spec)}   /* 128 + 44 for „Zum Produkt“ (v44) */
@media (min-width:375px){.fr__cap{min-height:calc(var(--sp-9) + var(--sp-5) + var(--target))}}     /* 120 + 44 */
@media (min-width:768px){.fr__cap{min-height:calc(var(--sp-8) + var(--sp-6))}}     /* 96: MIXPIX lists all six colours since 3 Nov */
.fr:not([data-state="close"]) .fr__cap{min-height:0}   /* v44 (Astra, MHL: "yes to all"): the room for the close-up's text only while a close-up is open, on desktop too */
.fr__go{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--target);font-size:var(--fs-cta);font-weight:var(--fw-bold);color:var(--link-text);text-decoration:none}   /* v44: „Zum Produkt“ */
.fr__go .ico{width:var(--ico-s);height:var(--ico-s);transition:transform var(--dur-fast) var(--ease)}
@media (hover:hover){.fr__go:hover{text-decoration:underline;text-underline-offset:.2em}.fr__go:hover .ico{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.fr__go .ico{transition:none}}
/* v36 phones (Astra): the overview shows one hint line, so only the close-up keeps the reserve (opening it adds about 70 px, once) */
@media (max-width:767px){.fr:not([data-state="close"]) .fr__cap{min-height:0}}
.fr__name span{color:var(--text-secondary-aa)}
.fr__sep{color:var(--text-secondary-aa)}
.fr__c{display:inline-flex;align-items:baseline;gap:var(--sp-1);white-space:nowrap}   /* the colour name sits on the line's baseline; the swatch centres on it */
.fr__c img{align-self:center;width:var(--swatch);height:var(--swatch);border-radius:50%}
.fr__c--big img{width:var(--swatch-l);height:var(--swatch-l)}
.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-9));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}
  /* v45–v51 stacked the three textile tiles (MHL: "lets keep textiles also vertical scroll"); v52 (MHL, 5 Nov: "we will make textile also
     horizontal scroll"): a sideways row again, now in the slider with the other rows' controls (app.js edRow); the track takes the slider's grid */
  .mf-xs__track.mf-edit{grid-auto-columns:var(--xs-card);gap:var(--sp-3);padding-bottom:var(--sp-1)}
}
/* v36: below 375 the 96 px peek leaves 192 px cards and "Fotos hochladen" wraps: a 48 px peek there (the v35 width) */
/* v53 (Amin via MHL): „Weitere Wandbilder“ over tiles 4–6: a sub-head, 32 px under the first three, 12 px over the rest */
.mf-more-h{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-label);color:var(--text-primary)}
@media (max-width:767px){.mf-more-h + .mf-xs--row{margin-top:0}}
@media (max-width:374px){.mf-row,.mf-edit{grid-auto-columns:calc(100% - var(--sp-7))}.mf-xs__track.mf-edit{grid-auto-columns:var(--xs-card-s)}}   /* v52: the textile slider takes the sliders' 90 % below 375 */
@media (max-width:374px){.sh:has(.sh__kicker){column-gap:var(--sp-2)}.sh__kicker{letter-spacing:0}}   /* v44 (Astra 7): no tracking below 375, so „FOTOGESCHENKE“ and „Alle Fotogeschenke ›“ share one line at 320 (281 of 288 px) */
/* mf-xmas (3 Nov, MHL): a wide red band right after the trust row, white text, the three tiles as white cards */
.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(--xmas-gold-ink)}
/* ---------- mf-xmas, round 5 (3 Nov, MHL): a very light gold strip after the gifts, four styles (XMAS_STYLE) ---------- */
.mf-xg{background:var(--xmas-gold)}   /* 3 Nov (MHL): no strokes above and below the strip */
/* four shades (XMAS_GOLD, 3 Nov: "4 shades of gold"), palest to warmest; on the gold the small grey lines go to the main text colour (AA on all four) */
.mf-xg--g1{--xmas-gold:var(--xmas-gold-1);--xmas-gold-line:var(--xmas-gold-line-1)}
.mf-xg--g2{--xmas-gold:var(--xmas-gold-2);--xmas-gold-line:var(--xmas-gold-line-2)}
.mf-xg--g3{--xmas-gold:var(--xmas-gold-3);--xmas-gold-line:var(--xmas-gold-line-3)}
.mf-xg--g4{--xmas-gold:var(--xmas-gold-4);--xmas-gold-line:var(--xmas-gold-line-4)}
/* v49 (Amin via MHL): the occasion block's palette is these three custom properties (--xmas-gold the strip, --xmas-gold-line the dividers and dots,
   --xmas-gold-ink the kicker, active line and slider controls). Theme 'gold' (Christmas) takes the XMAS_GOLD shade above; a new occasion adds one rule here,
   .mf-occ--<theme>{--xmas-gold:…;--xmas-gold-line:…;--xmas-gold-ink:…}, from three lane-D tokens MHL gives (ink at least 4.5:1 on the strip) */
.mf-xg .mf-ed__line,.mf-xg .pr-pre{color:var(--text-primary)}
.mf-xg .sh__kicker{color:var(--xmas-gold-ink)}
.mf-xg__list{display:grid;gap:var(--gap-column)}
.mf-xg__txt{display:flex;flex-direction:column;gap:var(--sp-2);flex:1;min-width:0}
.mf-xg .mf-ed__price .pr-now{font-size:var(--fs-h3)}
/* a · editorial row: the intro beside three smaller tiles (phones: intro, then a snap row) */
.mf-xg--a .mf-xg__list{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1024px){.mf-xg--a .mf-xg__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--gap-column);align-items:start}}
/* b · feature: one large photo, the three products listed beside it (phones: photo, intro, list) */
.mf-xg--b .mf-xg__grid{display:grid;gap:var(--sp-5)}
.mf-xg--b .mf-xg__list{gap:0}
.mf-xg--b .mf-xg__list > li + li{border-top:1px solid var(--xmas-gold-line)}
.mf-xg--b .mf-xg__item{padding-block:var(--sp-3)}
.mf-xg--b .mf-xg__txt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);row-gap:var(--sp-1);align-items:baseline}
.mf-xg--b .mf-ed__line{grid-column:1}
.mf-xg--b .mf-ed__price{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
.mf-xg--b .mf-ed__more{display:none}
@media (min-width:768px){
  .mf-xg--b .mf-xg__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-column);align-items:center}
  .mf-xg--b .mf-xg__photo{grid-column:1 / span 2;grid-row:1 / span 2}
  .mf-xg--b .mf-xg__intro,.mf-xg--b .mf-xg__list{grid-column:3}
  .mf-xg--b .mf-xg__intro{align-self:end}
  .mf-xg--b .mf-xg__list{align-self:start}
}
/* b as a carousel (3 Nov, MHL): the photos cross-fade in one stage; the selected row carries the button and a progress line */
.mf-xc{position:relative}
.mf-xc__stage{display:grid;overflow:clip}                                      /* the next slide waits off to the right: no page overflow on phones */
.mf-xc__slide{grid-area:1 / 1;display:block;opacity:0;transform:translateX(var(--sp-6));transition:opacity var(--dur-xfade) ease,transform var(--dur-xfade) ease}
.mf-xc__slide.is-on{opacity:1;transform:none}                                 /* slides in from the right as it fades: reads as a carousel */
.mf-xc__dots{position:absolute;left:50%;bottom:var(--sp-3);z-index:2;display:flex;align-items:center;height:var(--xc-ctl);transform:translateX(-50%)}   /* centred, near the photo's lower edge */
.mf-xc__dot{display:grid;place-items:center;width:var(--sp-5);height:var(--sp-5);cursor:pointer}   /* a 24 px pointer target (WCAG 2.5.8) around a 12 px dot */
.mf-xc__dot::before{content:"";width:var(--sp-3);height:var(--sp-3);border-radius:50%;background:var(--bg-surface);opacity:.6;box-shadow:var(--shadow-1);transition:opacity var(--dur-xfade) ease,transform var(--dur-xfade) ease}
.mf-xc__dot.is-on::before{opacity:1;transform:scale(1.25)}
.mf-xc__slide:focus-visible{outline:2px solid var(--link-text);outline-offset:3px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){.mf-xc__slide,.mf-xc__dot::before{transition:none;transform:none}}
.mf-xc__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);row-gap:var(--sp-1);align-items:baseline;padding-block:var(--sp-3)}
.mf-xc__list > li + li{border-top:1px solid var(--xmas-gold-line)}
.mf-xc__name{grid-column:1;justify-self:start;padding:0;border:0;background:none;font:var(--fw-bold) var(--fs-h3)/var(--lh-tight) var(--font-body);color:var(--text-primary);text-align:left;cursor:pointer}
.mf-xc__name:hover{color:var(--link-text)}
.mf-xc__name:focus-visible{outline:2px solid var(--link-text);outline-offset:2px}
.mf-xc__item .mf-ed__line{grid-column:1}
.mf-xc__item .mf-ed__price{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
.mf-xc__item:not(.is-on) .mf-xc__name{font-weight:var(--fw-regular)}
.mf-xc__cta{grid-column:1 / -1;justify-self:start;min-height:var(--cta-h-banner);margin-top:var(--sp-2);gap:var(--sp-3);font-size:var(--fs-cta)}
.mf-xc__cta .ico{flex:0 0 var(--ico-s);width:var(--ico-s);height:var(--ico-s)}
@media (max-width:767px){.mf-xc__cta{justify-self:stretch}}
/* the selected row's progress line while the photos rotate */
.mf-xc__item::after{content:"";position:absolute;left:0;bottom:-2px;z-index:1;width:0;height:3px;background:var(--xmas-gold-ink)}   /* over the next row's divider: one line, not two (v27) */
.mf-xc__item.is-timing::after{animation:mf-xc var(--dur-xc) linear forwards}
@keyframes mf-xc{from{width:0}to{width:100%}}
/* the Christmas slides on phones (4 Nov, MHL: "ok then slide but must be clear it is slide"): the carousel and its list
   give way to one white card per product on the gold, the next card peeking in, dots, a counter and arrows */
.mf-xs{display:none}
@media (max-width:767px){
  .mf-xg--b .mf-xc,.mf-xg--b .mf-xc__list{display:none}
  .mf-xg--b .mf-xg__grid{gap:var(--sp-4)}
  .mf-xg--b .sh{margin-bottom:0}
  .mf-xs{display:block;min-width:0}
  .mf-xs__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--xs-card);gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4);scroll-padding-inline:var(--sp-4);scrollbar-width:none}
  .mf-xs__track::-webkit-scrollbar{display:none}
  .mf-xs__slide{display:flex;flex-direction:column;scroll-snap-align:start;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-surface);box-shadow:var(--shadow-1)}
  .mf-xs__media{display:block}
  .mf-xs__media .slot{border-radius:0}
  .mf-xs__txt{display:flex;flex:1;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4) var(--sp-4)}
  .mf-xs__txt .mf-ed__price{margin-top:var(--sp-1);align-self:flex-start;text-align:left}
  .mf-xs__cta{min-height:var(--cta-h-banner);margin-top:auto;padding-top:0;gap:var(--sp-3);font-size:var(--fs-cta)}
  .mf-xs__txt .mf-ed__price + .mf-xs__cta{margin-top:var(--sp-3)}
  .mf-xs__cta .ico{flex:0 0 var(--ico-s);width:var(--ico-s);height:var(--ico-s)}
  .mf-xs__nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-3)}
  .mf-xs__btn{display:grid;place-items:center;width:var(--target);height:var(--target);padding:0;border:1px solid var(--xmas-gold-ink);border-radius:50%;background:var(--bg-surface);color:var(--xmas-gold-ink);cursor:pointer}
  .mf-xs__btn .ico{width:var(--ico-s);height:var(--ico-s)}
  .mf-xs__btn:disabled{opacity:.35;cursor:default}
  .mf-xs__btn:focus-visible{outline:2px solid var(--link-text);outline-offset:2px}
  .mf-xs__dots{display:flex;gap:var(--sp-2)}
  .mf-xs__dot{width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--xmas-gold-line)}
  .mf-xs__dot.is-on{background:var(--xmas-gold-ink)}
  .mf-xs__count{min-width:var(--sp-7);font-size:var(--fs-caption);font-weight:var(--fw-bold);text-align:center;color:var(--text-primary)}
}
/* below 375 a 90 % card, so „Weihnachtsschmuck“ (218 px at 20 px) never breaks inside the word; the next card still peeks in */
@media (max-width:374px){.mf-xs__track{grid-auto-columns:var(--xs-card-s)}}
/* v45 (Amin via MHL): phones show the first three Wandbilder and gift tiles one under another (as CDUS) and the other three in a slider with the
   Christmas slides' controls; on the white page the controls take the action teal, in the gold strip they stay gold */
@media (max-width:767px){
  .mf-row--stack{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;padding-bottom:0;row-gap:var(--sp-5)}
  .mf-xs--row{margin-top:var(--sp-5)}
  .mf-xs--solo{margin-top:0}   /* v46: the gifts' slider has no stacked tiles above it */
  .mf-xs--row .mf-xs__track{padding-block:var(--sp-1)}
  .mf-xs--row .mf-xs__slide{overflow:visible;border-radius:0;background:none;box-shadow:none}
  .mf-xs--row .mf-xs__slide > .pc{flex:1 1 auto}
  .mf-xs--row .mf-xs__btn{border-color:var(--action-secondary-text);color:var(--action-secondary-text)}
  .mf-xs--row .mf-xs__dot{background:var(--border-strong)}
  .mf-xs--row .mf-xs__dot.is-on{background:var(--action-secondary-text)}
}
/* c · slim strip: the title, then three compact items with a small square photo */
.mf-xg--c{padding-block:var(--sp-6)}
.mf-xg--c .mf-xg__item{flex-direction:row;align-items:center;gap:var(--sp-3)}
.mf-xg--c .slot{flex:0 0 var(--xg-thumb);width:var(--xg-thumb);aspect-ratio:1 / 1;margin:0}
.mf-xg--c .mf-ed__line,.mf-xg--c .mf-ed__more{display:none}
.mf-xg--c .mf-xg__txt{gap:var(--sp-1)}
.mf-xg--c .mf-ed__title,.mf-xg--d .mf-xg__list > li:not(:first-child) .mf-ed__title{font-size:var(--fs-body);overflow-wrap:normal;hyphens:manual}
@media (min-width:768px){.mf-xg--c .mf-xg__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.mf-xg--c .mf-xg__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--gap-column);align-items:center}
  .mf-xg--c .sh{margin-bottom:0}}
/* d · mosaic: one large tile and two small ones (phones: the large one, then the two side by side); 2:1 crops keep it low */
.mf-xg--d .mf-xg__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.mf-xg--d .slot{aspect-ratio:2 / 1}
.mf-xg--d .mf-xg__list{align-items:start}
.mf-xg--d .mf-xg__list > li:first-child{grid-column:1 / -1}
@media (min-width:768px){
  .mf-xg--d .mf-xg__list{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto}
  .mf-xg--d .mf-xg__list > li:first-child{grid-column:1;grid-row:1 / span 2}
  .mf-xg--d .mf-xg__list > li:not(:first-child) .mf-ed__line{display:none}
}
@media (max-width:767px){
  .mf-xg--a .mf-xg__list{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}
  .mf-xg--a .mf-xg__list > li{scroll-snap-align:start}
  .mf-xg--d .mf-xg__list > li:not(:first-child) .mf-ed__line{display:none}
}
.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)}
@media (max-width:767px){.mf-reviews{padding-block:var(--sp-5)}}
/* v36 (Astra, CDUS .ctx-h): the reviews heading is a context heading, 24 px, as CDUS's */
.mf-reviews .sh__row h2{font-size:var(--fs-h2)}
.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__live{min-height:var(--slot-trustbox);margin-top:var(--sp-3)}   /* the live TrustBox (3 Nov): its place held while it loads */
.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-reviews__fn{max-width:none;text-align:center;text-wrap:balance}   /* v44 (MHL: "center this line and leave it one line"): one line from 768 (614 px of text); on phones 12 px on two balanced lines, as one line would need 7 px */
@media (max-width:767px){.mf-reviews__widget,.mf-reviews__live{margin-top:0}}   /* v36: the link above already ends in its 44 px target */

/* ---------- mf-newsletter (Phase 7, brief §6.11; Phase 8: one column, WhatsApp as a link on phones) ---------- */
.mf-nl{padding:var(--nl-s30) 0 var(--nl-s10);background:var(--nl-band);color:var(--text-primary);font-family:var(--font-body);font-size:var(--nl-fs-13)}
.mf-nl__list{display:flex;flex-direction:column;max-width:var(--nl-max);margin-inline:auto}
.mf-nl__col{margin-bottom:var(--nl-s20);padding-inline:var(--nl-s10)}
.mf-nl__card{position:relative;background:var(--nl-card);border:1px solid var(--nl-line);border-radius:var(--nl-r);text-align:center;background-clip:padding-box}
.mf-nl__title{margin:0;font-size:var(--nl-fs-18);font-weight:var(--fw-bold);line-height:normal}
.mf-nl__ico{display:block;fill:var(--action-primary-bg);color:var(--text-primary)}
.mf-reg{font-size:smaller;line-height:0;vertical-align:super}                 /* ® always superscript (MHL, 4 Nov) */
:where(.mf-nl) strong{font-weight:var(--fw-bold)}
:where(.mf-nl) p{margin:0}
:where(.mf-nl) ul{margin:0;padding:0;list-style:none}
/* the newsletter card · phones: title, offer, the illustration, the benefits over its lower edge, the button */
.mf-nl__card--nl{padding:var(--nl-s10)}
.mf-nl__stage{display:flex;flex-direction:column}
.mf-nl__veil{display:contents}
.mf-nl__title{order:1}
.mf-nl__sub{order:2;margin:var(--nl-s10) 0;font-size:var(--nl-fs-12);line-height:normal}
.mf-nl__offer{order:3;margin:0 0 var(--nl-s20);font-size:var(--nl-fs-16);line-height:normal}
.mf-nl__img{order:4;display:block;width:100%;height:auto}
.mf-nl__benefits{order:5;position:relative;display:flex;justify-content:space-evenly;margin-top:var(--nl-lift-m);padding:var(--nl-s10) var(--nl-s5) var(--nl-s13);background:var(--nl-veil);font-size:var(--nl-fs-8);line-height:normal}
.mf-nl__benefits li{display:flex;flex-direction:column;align-items:center;justify-content:center}
.mf-nl__benefits strong{display:block;margin-top:var(--nl-s5)}
.mf-nl__circle{display:flex;align-items:center;justify-content:center;width:var(--nl-circle-m);height:var(--nl-circle-m);border-radius:50%;background:var(--bg-surface)}
.mf-nl__circle .mf-nl__ico{width:var(--nl-ico-m);height:var(--nl-ico-m)}
.mf-nl__btn{display:block;margin-top:var(--nl-s20);padding:var(--nl-s8) var(--nl-s20);border:var(--nl-s2) solid var(--action-primary-bg);background:var(--action-primary-bg);color:var(--action-primary-text);font-size:var(--nl-fs-16);line-height:var(--nl-fs-16);text-align:center;text-decoration:none}
.mf-nl__btn:hover{border-color:var(--action-secondary-hover);background:var(--action-secondary-hover)}
.mf-nl__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* the WhatsApp card (phones only, as live) */
.mf-nl__card--wa{padding:var(--nl-s15) var(--nl-s15) var(--nl-s15)}
.mf-nl__card--wa .mf-nl__title{padding-bottom:var(--nl-s10)}
.mf-nl__wasub{padding-bottom:var(--nl-s10);line-height:normal}
.mf-nl__wasub--last{padding-bottom:0;margin-bottom:var(--nl-s20)}
.mf-nl__benefits--wa{display:grid;grid-template-columns:1fr 1fr;margin:0 0 var(--nl-s20);padding:0;background:none;font-size:var(--nl-fs-13)}
.mf-nl__benefits--wa li{padding-bottom:var(--nl-s20)}
.mf-nl__benefits--wa li:last-child{grid-column:1 / -1;padding-bottom:0}
.mf-nl__benefits--wa .mf-nl__circle{width:var(--nl-circle);height:var(--nl-circle)}
.mf-nl__benefits--wa .mf-nl__ico{width:var(--nl-ico);height:var(--nl-ico)}
.mf-nl__btn--wa{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:0;border-color:var(--nl-wa);background:var(--nl-wa);font-weight:var(--fw-bold)}
.mf-nl__btn--wa:hover{border-color:var(--nl-wa);background:var(--nl-wa);filter:brightness(.92)}
.mf-nl__btn--wa img{box-sizing:content-box;width:var(--nl-ico-wa);height:var(--nl-ico-wa);border:1px solid var(--action-primary-text);border-radius:50%}   /* live: the green disc vanishes into the button, the white ring stays */
/* merchOne: the grey strip on top, the card under it */
.mf-nl__top{padding:var(--nl-s10);border:1px solid var(--nl-line);border-bottom:0;background:var(--nl-band);font-size:var(--nl-fs-11);font-weight:var(--fw-bold);line-height:normal;text-align:center}
.mf-nl__card--b2b{padding:var(--nl-s10);border-top:0;font-size:var(--nl-fs-14)}
.mf-nl__b2btitle{margin:0 0 var(--nl-s5);font-size:var(--nl-fs-18);font-weight:var(--fw-bold);line-height:normal}
.mf-nl__b2bsub{margin:0 0 1em;line-height:normal}
.mf-nl__points{display:grid;justify-content:center;row-gap:var(--nl-s15);margin:0 0 var(--nl-s15);text-align:left}
.mf-nl__points li{display:grid;grid-template-columns:var(--nl-ico-b2b) auto;column-gap:var(--nl-s15);align-items:start;line-height:normal}
.mf-nl__points .mf-nl__ico{width:var(--nl-ico-b2b);height:var(--nl-ico-b2b)}
.mf-nl__btn--b2b{display:table;margin:0 auto;padding-block:var(--nl-s9);font-size:var(--nl-fs-13);line-height:var(--nl-fs-13)}
.mf-nl__brand{margin-top:var(--nl-s15);padding-bottom:var(--nl-s8);font-size:var(--nl-fs-8);line-height:normal}
@media (min-width:768px){
  .mf-nl__col--wa{display:none}
  /* desktop: the text on a white veil over the illustration, as live */
  .mf-nl__card--nl{padding:var(--nl-s20)}
  .mf-nl__stage{display:grid}
  .mf-nl__img{grid-area:1 / 1;justify-self:start;width:var(--nl-img-w);height:100%;object-fit:contain;object-position:left center}
  .mf-nl__veil{position:relative;grid-area:1 / 1;display:block;padding:var(--nl-s10) var(--nl-s10) var(--nl-s18) var(--nl-veil-in);background:var(--nl-veil)}
  .mf-nl__title{font-size:var(--nl-fs-24)}
  .mf-nl__sub{margin:var(--nl-s10) 0;font-size:var(--nl-fs-17);text-align:right}
  .mf-nl__offer{font-size:var(--nl-fs-17);text-align:right}
  .mf-nl__benefits{margin-top:0;padding:0;background:none;font-size:var(--nl-fs-13)}
  .mf-nl__circle{width:var(--nl-circle);height:var(--nl-circle)}
  .mf-nl__circle .mf-nl__ico{width:var(--nl-ico);height:var(--nl-ico)}
  .mf-nl__btn{margin:var(--nl-s35) 0 var(--nl-s22);padding-block:var(--nl-s9);font-size:var(--nl-fs-13);line-height:var(--nl-fs-13)}
  .mf-nl__btn--b2b{margin:0 auto}
  .mf-nl__card--b2b{padding:var(--nl-s10) var(--nl-s20);font-size:var(--nl-fs-13)}
  .mf-nl__b2btitle{margin:0;font-size:var(--nl-fs-24);line-height:var(--nl-lh-b2b)}
  .mf-nl__points li{height:var(--nl-ico-b2b)}                                  /* live: 30 px rows, the two-line label runs 2 px over */
  .mf-nl__list{display:grid;grid-template-columns:minmax(0, var(--nl-main));justify-content:center;align-items:start}
}
@media (min-width:1024px){.mf-nl__list{grid-template-columns:minmax(0, var(--nl-main)) var(--nl-side)}}
/* 4 Nov (MHL: "can you show me options for newsletter?"): NL_PHONE, phones only, every live word and link kept (?nl=a|b|c) */
@media (max-width:767px){
  /* a · the three cards side by side: a slider like the Christmas one (arrows, dots, "1 / 3"), the next card peeking in */
  .mf-nl--a .mf-nl__list.mf-xs__track{display:grid;grid-auto-columns:var(--xs-card);margin-inline:0;max-width:none;align-items:stretch}
  .mf-nl--a .mf-nl__col{display:flex;flex-direction:column;margin:0;padding:0;scroll-snap-align:start}
  .mf-nl--a .mf-nl__col > .mf-nl__card{flex:1 1 auto}
  .mf-nl--a .mf-xs__nav{margin:var(--sp-3) 0 var(--nl-s10)}
  .mf-nl--a .mf-xs__btn{border-color:var(--action-secondary-text);color:var(--action-secondary-text)}
  .mf-nl--a .mf-xs__dot{background:var(--nl-line)}
  .mf-nl--a .mf-xs__dot.is-on{background:var(--action-secondary-text)}
  /* b · the email card as live; WhatsApp and merchOne fold open: their title and one live line stay in view */
  .mf-nl--b .mf-nl__fold{padding:0;text-align:left}
  .mf-nl--b .mf-nl__card--b2b.mf-nl__fold{border-top:1px solid var(--nl-line)}
  .mf-nl--b .mf-nl__sum{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--target);padding:var(--nl-s15);list-style:none;cursor:pointer}
  .mf-nl--b .mf-nl__sum::-webkit-details-marker{display:none}
  .mf-nl--b .mf-nl__sum:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
  .mf-nl--b .mf-nl__sumico{flex:none;width:var(--sp-6);height:var(--sp-6)}
  .mf-nl--b .mf-nl__sumtxt{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sp-1);min-width:0;font-size:var(--nl-fs-13);line-height:var(--lh-tight)}
  .mf-nl--b .mf-nl__sum .mf-nl__title,.mf-nl--b .mf-nl__sum .mf-nl__b2btitle{order:0;margin:0;padding:0;font-size:var(--nl-fs-16);line-height:var(--lh-tight)}
  .mf-nl--b .mf-nl__sumkick{font-size:var(--nl-fs-11);font-weight:var(--fw-bold);color:var(--text-secondary-aa)}
  .mf-nl--b .mf-nl__fold[open] .ico--acc{transform:rotate(180deg)}
  .mf-nl--b .mf-nl__body{padding:0 var(--nl-s15) var(--nl-s15);text-align:center}
  /* c · compact, nothing folded: a smaller illustration; WhatsApp's benefits and merchOne's points in one row each */
  .mf-nl--c .mf-nl__col{margin-bottom:var(--sp-3)}
  .mf-nl--c .mf-nl__img{width:auto;max-width:100%;height:var(--nl-img-c);margin-inline:auto}
  .mf-nl--c .mf-nl__card--nl .mf-nl__benefits{margin-top:var(--nl-lift-c)}
  .mf-nl--c .mf-nl__btn{margin-top:var(--nl-s15)}
  .mf-nl--c .mf-nl__card--wa .mf-nl__title{padding-bottom:var(--nl-s5);font-size:var(--nl-fs-16)}
  .mf-nl--c .mf-nl__wasub{padding-bottom:var(--nl-s5)}
  .mf-nl--c .mf-nl__wasub--last{margin-bottom:var(--nl-s15)}
  .mf-nl--c .mf-nl__benefits--wa{grid-template-columns:repeat(3,auto);justify-content:space-evenly;column-gap:var(--nl-s5);margin-bottom:var(--nl-s15);font-size:var(--nl-fs-12)}
  .mf-nl--c .mf-nl__benefits--wa li{padding-bottom:0}
  .mf-nl--c .mf-nl__benefits--wa li:last-child{grid-column:auto}
  .mf-nl--c .mf-nl__benefits--wa .mf-nl__circle{width:var(--nl-circle-m);height:var(--nl-circle-m)}
  .mf-nl--c .mf-nl__benefits--wa .mf-nl__ico{width:var(--nl-ico-m);height:var(--nl-ico-m)}
  .mf-nl--c .mf-nl__b2btitle{margin-bottom:var(--nl-s5)}
  .mf-nl--c .mf-nl__b2bsub{margin-bottom:var(--nl-s15)}
  .mf-nl--c .mf-nl__points{grid-template-columns:repeat(3,auto);justify-content:space-evenly;column-gap:var(--nl-s5);text-align:center;font-size:var(--nl-fs-12)}
  .mf-nl--c .mf-nl__points li{display:flex;flex-direction:column;align-items:center;gap:var(--nl-s5)}
}
/* columns as wide as their longest word; below 375 the labels at 11 px, so the three still fit side by side */
@media (max-width:374px){.mf-nl--c .mf-nl__benefits--wa,.mf-nl--c .mf-nl__points{font-size:var(--nl-fs-11)}}

/* ---------- 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:var(--target);height:var(--target)}
.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-2);min-height:var(--target);background:var(--surface-inverse);color:var(--text-on-brand);
  font-weight:var(--fw-bold);text-decoration:none;font-size:var(--fs-cta)}   /* v36 (Astra, CDUS .totop): the footer's dark surface, a chevron up */
.mf-top .ico{width:var(--sp-4);height:var(--sp-4);transform:rotate(180deg)}
.mf-top:hover{text-decoration:underline;text-underline-offset:2px}
.mf-top:focus-visible{outline-color:var(--focus-ring-inner);box-shadow:none}
.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:var(--target-s)}
.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:var(--target);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:var(--target);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-cta);white-space:nowrap}
.mf-sticky .mf-upload__status:empty{display:none}
@media (max-width:374px){   /* v44 (Astra 2): below 375 the line sits above a full-width button (it was a 191 px strip at 320) */
  html[data-phone] .mf-sticky{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .mf-sticky .btn-primary{width:100%}
}
/* v53 (Amin via MHL: his copy): the button says „NEU: Dein Foto auf allen Produkten sehen“, the line's message in one control, as in Amin's
   file: the line goes and the button takes the bar's width (beside it, the line was squeezed to 10 px at 390). Below 375 the label wraps */
.mf-sticky--one .mf-sticky__line{display:none}
.mf-sticky--one .mf-sticky__form,.mf-sticky--one .mf-upload{flex:1 1 auto;min-width:0}
.mf-sticky--one .btn-primary{width:100%}
@media (max-width:374px){.mf-sticky--one .btn-primary{white-space:normal;text-wrap:balance;line-height:var(--lh-label)}}
@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)}

/* ---------- v55: the tablet range, 768–1023 only (MHL, 5 Nov: "768px test the text looks very broken. can we improve it?"; Astra's medium
   review of v54, reports/astra-review-2026-11-05-v54-tablet.md). Phones and desktop are unchanged: every rule sits in this one query ---------- */
@media (min-width:768px) and (max-width:1023px){
  /* hero points: one line each, as on phones (v45, Amin: "one line on all … sizes"): text and icons scale with the copy column, 13.2 px at 768, 16 from about 860 */
  .mf-hero__rows--icon{font-size:min(var(--fs-body), calc(100cqi / 26.3))}
  .mf-hero__rows--icon strong{font-size:1.0625em}
  .mf-hero__rows--icon li{gap:.5em}
  .mf-hero__rows--icon li > .ico{flex:0 0 1.1em;width:1.1em;height:1.1em;margin-top:.12em}
  /* Wandbilder: the two groups of three (DV-138) in three columns, so no tile stands alone under a pair */
  .mf-wall .pc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mf-wall .pc-title{font-size:var(--fs-body);text-wrap:balance}
  .mf-wall .pc-spec{text-wrap:pretty}
  /* Christmas: photo and list in equal halves (was two thirds to one), so the title and the product lines have room */
  .mf-xg--b .mf-xg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-xg--b .mf-xg__photo{grid-column:1;grid-row:1 / span 2}
  .mf-xg--b .mf-xg__intro,.mf-xg--b .mf-xg__list{grid-column:2}
  .mf-xg--b h2,.mf-xc__name{text-wrap:balance}
  /* textiles: price and link sit at the foot of each tile, level across the row however long the line above */
  .mf-edit .mf-ed__tile .mf-ed__price{margin-top:auto}
  .mf-edit .mf-ed__tile .mf-ed__price + .mf-ed__more{margin-top:0}   /* the link keeps its place under the price (its own auto margin split the space) */
  /* trust captions: one line each („Hervorragend bewertet“ was two) */
  .mf-mark{padding-inline:var(--sp-1)}
  .mf-mark__title{font-size:var(--fs-caption)}
  /* payment: the phone logo height, so Google Pay does not sit alone on a second row */
  .mf-pay__logos img{height:var(--sp-5)}
  /* footer: three columns, then two („Partnerprogramm“ broke inside the word in five) */
  .mf-ft__cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-6)}
}

/* v59 (Amin, 9 Nov, „Trusted Shops Rollout“): the live Trusted Shops grade and review count, centred right under the hero button.
   One em = the pill's text; it scales with the copy column so it stays on one line from 320 up */
.mf-tsp-slot{display:flex;justify-content:center;margin-top:var(--sp-3);min-height:calc(1.75em + .6em + 2px);font-size:min(var(--fs-cta), calc(100cqi / 33))}
.mf-tsp-slot.is-off{display:none}
.mf-tsp{display:inline-flex;align-items:center;gap:.45em;padding:.3em .95em .3em .3em;border:1px solid var(--border-strong);border-radius:var(--r-ts-pill);background:var(--bg-surface);
  color:var(--text-primary);font-size:inherit;line-height:1;white-space:nowrap;text-decoration:none}
.mf-tsp:hover{border-color:var(--text-secondary)}
.mf-tsp__seal{flex:0 0 1.75em;width:1.75em;height:1.75em}
.mf-tsp__stars{position:relative;flex:0 0 5.25em;width:5.25em;height:1.05em}
.mf-tsp__stars svg{display:block;width:5.25em;height:1.05em;fill:var(--border-strong)}
.mf-tsp__on{position:absolute;inset:0 auto 0 0;width:var(--fill);overflow:hidden}
.mf-tsp__on svg{fill:var(--rating-star)}
.mf-tsp__mark{font-weight:var(--fw-bold)}
.mf-tsp__dot{color:var(--text-secondary)}
@media (max-width:1023px){.mf-tsp__grade{display:none}.mf-tsp-slot{font-size:min(var(--fs-cta), calc(100cqi / 26))}}   /* phones and tablets: 4,90 · 464.000+ Bewertungen, the shorter pill a little larger */
@media (max-width:767px){.mf-tsp-slot{order:2;font-size:min(var(--fs-caption), calc(100cqi / 25))}}   /* phones: straight after the button (both order 2, DOM order) */

/* v62 (MHL 10 Nov: only official Trusted Shops elements; "i want to use the very horizontal one"): the hero rating as Trusted Shops'
   Trusted Stars widget — one line, no frame: stars · grade · word · count · the round e. Stars and figures as the widget; type from the page */
.mf-tss{display:inline-flex;align-items:center;gap:.55em;min-height:var(--sp-6);color:var(--text-primary);text-decoration:none;white-space:nowrap;line-height:1.2}
.mf-tss:hover .mf-tss__count{text-decoration:underline}
.mf-tss:focus-visible{outline:2px solid var(--link-text);outline-offset:3px;border-radius:var(--r-sm)}
.mf-tss__stars .mf-tsp__on svg{fill:var(--ts-stars-yellow)}   /* the widget's yellow (MHL's reference); decoration only, the figures carry the rating */
.mf-tss__stars{flex-basis:5.6em;width:5.6em;height:1.1em}.mf-tss__stars svg{width:5.6em;height:1.1em}
.mf-tss__mark{font-weight:var(--fw-bold)}
.mf-tss__count{color:var(--text-secondary)}
.mf-tss__logo{flex:0 0 1.25em;width:1.25em;height:1.25em}
.mf-tsp-slot--official{min-height:0}
@media (max-width:1023px){.mf-tss__grade{display:inline}}                     /* the line keeps its word where it fits (the pill dropped it) */
@media (max-width:413px),(min-width:768px) and (max-width:899px){.mf-tss__grade{display:none}}   /* narrow columns (320–413, 768–899): stars · 4,90 · count · e, still one line */
/* v63 (colleague review via MHL, 10 Nov: "the social and payment rows should wrap cleanly on small screens"; MHL: "the footer we kept originally
   the same, but we can make it better"): phones get two even, centred rows of payment logos (5 + 3 from 320 to 767; before 4 + 3 + 1 under 375) */
@media (max-width:767px){.mf-pay__logos{gap:var(--sp-3)}.mf-pay__logos img{height:var(--pay-logo-h-m)}}

/* =====================================================================
   MPUK (my-picture.co.uk, 11 Nov 2026): additions for the MPUK data, the MFDE rules unchanged above
   ===================================================================== */
/* live's "Free Delivery over £55" beside the logo, desktop header (the search keeps its place on the right) */
.mf-hd__promo{flex:0 0 auto;font-size:var(--hd-promo-fs);color:var(--text-primary);text-decoration:none;white-space:nowrap}
.mf-hd__promo strong{color:var(--link-text);font-weight:var(--fw-bold)}
.mf-hd__promo:hover strong{text-decoration:underline;text-underline-offset:2px}
.mf-l1__a.is-plain,.mf-ph__row a.is-plain{color:var(--link-text)}
.mf-dr__deals.mf-dr__plain a{background:var(--bg-surface);color:var(--link-text)}
/* the hero line with live's heart */
.mf-heart{display:inline-block;width:var(--heart-w);height:auto;margin:0 .2em;vertical-align:-.1em;color:var(--brand-teal)}
.mf-hero__made--heart strong{display:inline-flex;align-items:center}
.mf-claims__a{color:var(--link-text);text-decoration:none}
.mf-claims__a:hover strong{text-decoration:underline;text-underline-offset:2px}
.mf-hero__badge-cur{align-self:flex-start;margin:.2em .02em 0 0;font-size:1.15em}   /* "£" raised like the pence, so the badge stays near the MFDE width */
/* three TV logos in turn (MHL: "3 uk channels so they can also loop as 2 german channels") */
.mf-tvb--n3 .mf-tvb__logo{animation-name:mf-tv3;animation-duration:var(--dur-tv3)}
.mf-tvb--n3 .mf-tvb__logo--1{animation-delay:calc(var(--dur-tv3) / -3 * 2)}
.mf-tvb--n3 .mf-tvb__logo--2{animation-delay:calc(var(--dur-tv3) / -3)}
@keyframes mf-tv3{0%{opacity:0}4.17%{opacity:1}29.17%{opacity:1}33.33%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mf-tvb--n3 .mf-tvb__logo{animation:none}}
/* the newsletter without the WhatsApp card; live's footnote under the button; merchOne's four points as a ticked list */
.mf-nl__note{margin:var(--sp-2) 0 0;font-size:var(--nl-note-fs);line-height:var(--lh-label);color:var(--text-secondary-aa);text-align:center}
.mf-nl__points--list{justify-content:start;row-gap:var(--sp-2)}
.mf-nl__points--list li{grid-template-columns:auto 1fr;height:auto;align-items:center}
.mf-nl__points--list .ico{width:1.1em;height:1.1em;color:var(--brand-teal)}
.mf-nl--c .mf-nl__points--list{grid-template-columns:1fr;justify-content:start;text-align:left}
.mf-nl--c .mf-nl__points--list li{display:grid;flex-direction:row}
.mf-ft__heart .mf-heart{width:1em;color:var(--brand-teal)}
/* the hero headline: live's brand words as a small line over it, the rest balanced, the teal last line as MFDE */
.mf-hero__brand{display:block;margin-bottom:.35em;font-size:var(--fs-hero-brand);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow-text);line-height:var(--lh-label)}
.mf-hero__main{display:block;text-wrap:balance}
/* three trust marks: three columns from 768; on phones two and the third centred under them */
.mf-trust__marks:has(> li:nth-child(3):last-child) > li:nth-child(3){grid-column:1 / -1;justify-self:center;border-left:0}
@media (min-width:768px){
  .mf-trust__marks:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .mf-trust__marks:has(> li:nth-child(3):last-child) > li:nth-child(3){grid-column:auto;justify-self:stretch;border-left:1px solid var(--border-subtle)}
}
/* one line under each badge on phones and tablets too (MHL: "we keep the one line under each logo-badge as on mfde") */
@media (max-width:1023px){.mf-mark__title{white-space:nowrap;font-size:min(var(--fs-cta), calc(100cqi / 12))}}
/* live's long first claim ("#1 Best Rated UK Canvas Shop on Trusted Shops") breaks evenly, never leaving "Shops" alone */
.mf-hero__rows li > span:last-child{text-wrap:balance}
/* desktop hero: the MPUK copy (live's longer h1, five claims) is taller than the photo, so the photo sits on the button's line,
   as MFDE ("from 1024 the CTA ends on the photo's bottom edge"), and the claim rows keep MFDE's 1024 spacing */
@media (min-width:1024px){
  .mf-hero__media{align-self:end}
  .mf-hero__copy{padding-top:0}
  .mf-hero__rows{row-gap:var(--sp-2)}
  .mf-hero__copy h1 + .mf-hero__rows{margin-top:var(--sp-6)}
}
/* 1024–1199: the search field needs the room, and "Free Delivery over £55" stays in the menu row */
@media (max-width:1199px){.mf-hd__promo{display:none}}
.mf-hero__rows li[data-claim="trustedshops"] strong{white-space:nowrap}   /* "#1 Best Rated UK Canvas Shop" stays together; "on Trusted Shops" takes the second line */