/* ========================================================= Jimmy's Food – MF UI v1 (FINAL, Shoptet compatible) Aktivní jen při ?mf=1 (class .mf-ui-mounted na ) ========================================================= */ :root{ --mf-header-h-mobile: 64px; --mf-header-h-desktop: 72px; --mf-bottom-h: 64px; --mf-border: rgba(0,0,0,.12); --mf-bg: #fff; --mf-text: #111; --mf-muted: rgba(17,17,17,.65); --mf-shadow: 0 10px 30px rgba(0,0,0,.08); --mf-radius: 16px; --mf-brand: #e60023; } /* ========================================================= 1) POSUN OBSAHU – JEN SPRÁVNÝ WRAPPER ========================================================= */ html.mf-ui-mounted #content-wrapper{ padding-top: var(--mf-header-h-desktop); } @media (max-width: 980px){ html.mf-ui-mounted #content-wrapper{ padding-top: var(--mf-header-h-mobile); padding-bottom: var(--mf-bottom-h); } } /* ========================================================= 2) SCHOVÁNÍ PŮVODNÍHO HEADERU (SPRÁVNÝ SELEKTOR) ========================================================= */ html.mf-ui-mounted header#header{ display: none !important; } /* ========================================================= 3) MOUNT BODY (OCHRANA) ========================================================= */ html.mf-ui-mounted body{ padding: 0 !important; } /* ========================================================= 4) FIXED MOUNTY ========================================================= */ #mfHeaderMount{ position: fixed; top: 0; left: 0; right: 0; z-index: 99999; } #mfBottomMount{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--mf-border); } @media (min-width: 981px){ #mfBottomMount{ display:none; } } /* ========================================================= 5) HEADER ========================================================= */ .mfH{ height: var(--mf-header-h-mobile); background: var(--mf-bg); border-bottom: 1px solid var(--mf-border); display: grid; grid-template-columns: 44px 1fr 44px 44px; align-items: center; gap: 10px; padding: 0 12px; } @media (min-width:981px){ .mfH{ height: var(--mf-header-h-desktop); max-width: 1320px; margin: 0 auto; grid-template-columns: 54px auto 1fr 54px 54px; padding: 0 16px; } } /* ========================================================= 6) LOGO ========================================================= */ .mfLogo{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--mf-text); } .mfLogoImg{ height: 32px; width:auto; max-width: 220px; } @media (min-width:981px){ .mfLogoImg{ height: 36px; } } /* ========================================================= 7) IKONY ========================================================= */ .mfIconBtn{ width:44px; height:44px; border:0; background:none; border-radius:12px; display:grid; place-items:center; cursor:pointer; } .mfSvg{ width:22px; height:22px; } /* ========================================================= 8) BOTTOM BAR (MOBILE) ========================================================= */ .mfB{ height: var(--mf-bottom-h); display:grid; grid-template-columns: repeat(4,1fr); align-items:center; font-size:11px; font-weight:800; } .mfB a{ display:grid; place-items:center; text-decoration:none; color: var(--mf-muted); } .mfB a.is-active{ color: var(--mf-text); }