/* Breakpointy wg procesu Net Factory: 1680 / 1380 / 1200 / 991 / 768 / 576 / 340.
   Plik ladowany ZAWSZE jako ostatni — nadpisania musza wygrac kaskade. */

/* ============================== >= 1780 ============================== */
/* Kontener ma max 1680px — dopiero powyzej 1780px zostaje margines
   na wyprowadzenie strzalek poza karuzele. */
@media (min-width:1780px){
  .car-arrow.prev{left:-64px}
  .car-arrow.next{right:-64px}
}

/* ============================== <= 1680 ============================== */
@media (max-width:1680px){
  .foot-cols{gap:28px}

  /* Logo + 5 linkow + 2 profile z nazwami + pelny adres e-mail + CTA to ~1425 px,
     czyli dokladnie tyle, ile daje kontener w maksimum. Adres jest tu najdluzszym
     i najbardziej zmiennym elementem (przychodzi z ACF), wiec jako pierwszy
     schodzi do samej koperty — mailto: dziala identycznie, a pelny adres
     zostaje w stopce i w menu mobilnym. */
  .nav-mail-text{display:none}
}

/* ============================== <= 1440 ============================== */
/* Sciskanie paska: mniejsze odstepy i stopien pisma w linkach. Bez tego
   nav-right (profile z nazwami + CTA) rozpycha kontener az do progu 1200. */
@media (max-width:1440px){
  .nav-inner{gap:22px}
  .nav-links{gap:20px;font-size:.78rem}
  .nav-right{gap:16px}
  /* Zawezone do paska — CTA na podstronach i w sekcjach ma zostac w pelnym
     rozmiarze az do progu 1200, gdzie schodzi razem z reszta ukladu. */
  .nav .btn{padding:12px 20px;font-size:.85rem}
}

/* ============================== <= 1380 ============================== */
@media (max-width:1380px){
  :root{--section-y:76px}

  .menu-grid > .swiper-wrapper{grid-template-columns:repeat(3,1fr)}
  .menu-group{padding:26px 26px 30px}
  .about-grid{gap:40px}
  .about-story p{max-width:none}

  .foot-cols{grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:30px}
  .foot-cols .foot-col:last-child{grid-column:1 / -1}
  .foot-col .gbadge{max-width:420px}
}

/* ============================== <= 1200 ============================== */
@media (max-width:1200px){
  /* Nazwy profili ida jako druga pozycja pod noz — same ikony niosa te sama
     informacje, a pasek musi jeszcze zmiescic logo, menu i CTA. */
  .nav-social-name{display:none}
  .nav-social{gap:14px}
  /* Ostatnie 200 px przed przejsciem na burgera. Menu jest z WP, wiec liczba
     pozycji moze urosnac po stronie klienta — zapas na 1–2 dodatkowe linki. */
  .nav-links{gap:16px;font-size:.75rem}
  .btn{padding:12px 20px;font-size:.85rem}

  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .widget:nth-child(2){border-right:none}
  .widget:nth-child(1),.widget:nth-child(2){border-bottom:1px solid var(--line)}

  .post-grid{grid-template-columns:repeat(2,1fr)}
  .lokal-grid > .swiper-wrapper{grid-template-columns:repeat(2,1fr)}
  /* Cztery karty w rzedzie schodza tu ponizej 200 px, wiec rzedy rozpadaja
     sie na pojedyncze sekcje. auto-fill zamiast sztywnej liczby kolumn:
     sekcja z jednym daniem nie rozciaga karty na cala szerokosc. */
  .menu-row{grid-template-columns:1fr}
  .menu-row .menu-grid > .swiper-wrapper{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .menu-group{padding:24px 24px 28px}

  .order-grid{grid-template-columns:1fr 1.5fr}
  .order-banner{padding:38px 32px}
  .order-form{padding:36px 32px 32px}
  /* Trzy pola w linii schodza ponizej ~180 px kazde, a z ikona w srodku
     zostaje na tekst mniej niz polowa — dwie kolumny sa czytelniejsze. */
  .form-grid{grid-template-columns:1fr 1fr}

  .lokal-single-grid{grid-template-columns:1fr;gap:32px}
  .lokal-map{aspect-ratio:16/9}
}

/* ============================== <= 991 ============================== */
@media (max-width:991px){
  :root{--section-y:64px}

  .nav-links,.nav-right{display:none}
  .nav-toggle{display:grid;place-items:center}

  /* Panel na caly ekran, wysuwany z prawej. Siedzi POD paskiem (z-index 48 < 50),
     wiec logo i burger zostaja widoczne, a burger dalej lapie klikniecia.
     display:flex jest staly, a otwiera/zamyka sam transform — przelaczanie
     display zerwaloby animacje wysuwania. */
  .mobile-menu{
    position:fixed;top:0;left:0;right:0;z-index:48;
    height:100vh;
    height:100dvh;
    display:flex;flex-direction:column;
    background:rgba(6,6,8,.985);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:calc(var(--nav-h) + 10px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .34s var(--ease),visibility .34s var(--ease);
  }
  .mobile-menu.open{transform:none;visibility:visible}

  .mm-nav{display:flex;flex-direction:column}
  .mm-nav a{
    padding:15px 2px;border-bottom:1px solid var(--line);
    font-family:var(--font-display);font-weight:400;text-transform:uppercase;
    font-size:clamp(1.5rem,7vw,2.1rem);line-height:1.05;letter-spacing:.02em;
    /* Pozycje wjezdzaja kaskada dopiero po odsunieciu panelu — bez tego cala
       lista pojawia sie plaska i ruch panelu ginie. */
    opacity:0;transform:translateX(22px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s var(--ease);
  }
  .mobile-menu.open .mm-nav a{opacity:1;transform:none}
  .mobile-menu.open .mm-nav a:nth-child(1){transition-delay:.12s}
  .mobile-menu.open .mm-nav a:nth-child(2){transition-delay:.17s}
  .mobile-menu.open .mm-nav a:nth-child(3){transition-delay:.22s}
  .mobile-menu.open .mm-nav a:nth-child(4){transition-delay:.27s}
  .mobile-menu.open .mm-nav a:nth-child(5){transition-delay:.32s}
  .mobile-menu.open .mm-nav a:nth-child(n+6){transition-delay:.37s}
  .mm-nav a.active{color:var(--orange)}

  /* margin-top:auto dociska dane kontaktowe do dolu ekranu, gdy pozycji menu
     jest malo; przy dlugiej liscie panel po prostu sie przewija. */
  .mm-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:6px}
  .mobile-menu .mm-mail{
    color:var(--orange);display:flex;align-items:center;gap:10px;--icon:20px;
    padding:12px 2px;font-weight:700;font-size:.95rem;word-break:break-word;
  }
  .mobile-menu .mm-mail svg{width:20px;height:20px;flex-shrink:0}
  /* W menu mobilnym nazwy zostaja — jest miejsce, a sam znaczek marki
     w pionowej liscie czyta sie gorzej niz w pasku. */
  /* wrap, bo nazwy profili sa z ACF — „Sonovi Nowy Sacz” obok „@sonovikebab”
     nie miesci sie w jednej linii na waskim telefonie. */
  .mm-social{display:flex;flex-wrap:wrap;gap:12px 20px;padding:10px 2px 4px}
  /* Cofniecie ukrycia nazw z breakpointu 1200 — tamta regula chroni ciasny
     pasek, a w rozwinietym menu miejsca jest az nadto. */
  .mm-social .nav-social-name{display:block}
  .mm-social .nav-social-link{font-weight:600;font-size:.9rem}
  .mm-social .nav-social-link i,.mm-social .nav-social-link svg{color:var(--orange)}
  .mobile-menu .mm-btns{display:flex;flex-direction:column;gap:12px;margin-top:14px}
  .mobile-menu .mm-btns a{padding:15px 26px}
  .mobile-menu .btn{width:100%}

  /* ---------- Wybor cennika: jeden przycisk + arkusz od dolu ---------- */
  /* Osiem pigulek zjadalo pol ekranu, zanim zaczynalo sie samo menu. */
  .lokale-toggle{
    display:flex;align-items:center;gap:12px;width:100%;
    margin-bottom:26px;padding:13px 18px;cursor:pointer;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    color:var(--text);text-align:left;--icon:18px;
  }
  .lokale-toggle > i,.lokale-toggle > svg{color:var(--orange);flex-shrink:0}
  .lokale-toggle svg{width:18px;height:18px}
  .lokale-toggle-txt{flex:1;min-width:0}
  .lokale-toggle-lbl{
    display:block;font-size:.68rem;text-transform:uppercase;
    letter-spacing:.09em;color:var(--muted);
  }
  .lokale-toggle b{display:block;font-size:.98rem;font-weight:700;line-height:1.2}
  .lokale-toggle-chev{transition:transform .25s var(--ease)}
  .lokale-toggle[aria-expanded="true"] .lokale-toggle-chev{transform:rotate(180deg)}

  .lokale-modal{
    position:fixed;inset:0;z-index:70;
    display:flex;align-items:flex-end;
    background:rgba(3,3,4,.72);
    opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),visibility .25s var(--ease);
  }
  .lokale-modal.open{opacity:1;visibility:visible}
  .lokale-sheet{
    display:block;width:100%;
    max-height:82vh;
    max-height:82dvh;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--ink-2);border-top:1px solid var(--line);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:18px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .28s var(--ease);
  }
  .lokale-modal.open .lokale-sheet{transform:none}
  .lokale-sheet-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
  }
  .lokale-sheet-head h2{
    font-family:var(--font-display);font-weight:400;text-transform:uppercase;
    font-size:1.35rem;line-height:1;letter-spacing:.02em;
  }
  .lokale-close{
    --icon:20px;
    flex-shrink:0;width:38px;height:38px;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;color:var(--text);
    background:var(--surface);border:1px solid var(--line);
  }
  .lokale-close svg{width:20px;height:20px}
  .lokale-modal .menu-lokale{flex-direction:column;flex-wrap:nowrap;gap:8px;margin-bottom:0}
  .lokale-modal .menu-lokal{width:100%;justify-content:flex-start;padding:13px 18px}

  /* ---------- Cennik: pasek skladnikow i nawigacja po kategoriach ---------- */
  /* Straddle znika: przy zawijanych listach belka rosnie do 6–8 wierszy,
     a wtedy „polowa wysokosci” przestaje trafiac w linie naglowka. */
  .menu-section{padding-top:var(--section-y)}
  .menu-skladniki{min-height:0;margin-top:0;margin-bottom:26px;padding:18px 20px;box-shadow:none}
  .menu-skladniki p{flex-direction:column;gap:4px}
  .menu-skladniki-ic{align-self:flex-start}
  .menu-skladniki-lbl{display:flex;align-items:center;gap:8px}

  .menu-nav{margin-bottom:26px;padding:8px 0}
  .menu-nav-toggle{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:12px 16px;cursor:pointer;--icon:18px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    color:var(--text);font-weight:700;font-size:.85rem;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .menu-nav-toggle > i,.menu-nav-toggle > svg{color:var(--orange);flex-shrink:0}
  .menu-nav-toggle svg{width:18px;height:18px}
  .menu-nav-toggle span{flex:1;text-align:left}
  .menu-nav-chev{transition:transform .25s var(--ease)}
  .menu-nav-toggle[aria-expanded="true"] .menu-nav-chev{transform:rotate(180deg)}
  /* Lista rozwija sie POD przyciskiem, nad trescia — pasek jest przypiety,
     wiec wypchniecie kategorii w dol przesuwaloby cala strone przy kazdym kliku. */
  .menu-nav-list{
    display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 2px);
    flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;
    padding:12px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--ink-2);box-shadow:var(--shadow-card);
  }
  .menu-nav-list.open{display:flex}
  .menu-nav-inner{position:relative}
  .menu-nav-link{font-size:.82rem;padding:11px 16px}

  .menu-groups{gap:16px}
  .menu-row{gap:16px}
  .menu-group{padding:20px 16px 24px;border-radius:var(--radius-lg)}
  .menu-group{scroll-margin-top:calc(var(--nav-h) + 74px)}

  /* ---------- Siatki kart -> karuzela w poziomie ---------- */
  /* Klase `is-carousel` daje PHP dopiero od trzeciego kafla — przy dwoch
     karuzela nie ma czego przewijac i zostaje zwykla siatka. */
  .menu-grid.is-carousel,.lokal-grid.is-carousel{overflow:hidden;padding-bottom:30px}
  .menu-grid.is-carousel > .swiper-wrapper,
  .lokal-grid.is-carousel > .swiper-wrapper{display:flex;gap:0}
  /* Szerokosc przed startem Swipera — inaczej slajdy z jego CSS-a (width:100%)
     mignelyby na pelna szerokosc, zanim JS przeliczy uklad. */
  .menu-grid.is-carousel > .swiper-wrapper > .swiper-slide,
  .lokal-grid.is-carousel > .swiper-wrapper > .swiper-slide{flex:0 0 auto;width:64%}
  .grid-dots{display:flex;justify-content:center;gap:9px;bottom:0}
  .grid-dots .swiper-pagination-bullet{
    width:8px;height:8px;border-radius:50%;opacity:1;margin:0;
    background:rgba(255,255,255,.22);
    transition:background .2s var(--ease),width .2s var(--ease);
  }
  .grid-dots .swiper-pagination-bullet-active{background:var(--orange);width:22px;border-radius:4px}

  /* ---------- Kompaktowe karty dania ---------- */
  /* Na telefonie licza sie nazwa i cena — format zdjecia z desktopu spychal
     cene ponizej krawedzi ekranu. */
  .menu-grid .car-media{aspect-ratio:4/3}
  .menu-grid .car-body{padding:14px 14px 16px}
  .menu-grid .car-body h3{font-size:1.15rem}
  .menu-grid .car-ingredients{font-size:.95rem;margin-top:7px;gap:7px}
  .menu-grid .car-ingredients svg{width:15px;height:15px;margin-top:2px}
  .menu-grid .car-ingredients{--icon:15px}
  .menu-grid .car-foot{padding-top:14px;gap:10px}
  .menu-grid .car-price .amount{font-size:1.7rem}
  .menu-grid .car-price .cur{font-size:.82rem}
  .menu-grid .car-price .from{font-size:.68rem}
  .menu-grid .btn-order{padding:5px 5px 5px 13px;font-size:.7rem;gap:8px}
  .menu-grid .btn-order .circ{width:25px;height:25px;--icon:13px}
  .menu-grid .btn-order .circ svg{width:13px;height:13px}
  .menu-grid .car-badge{top:9px;left:9px;padding:4px 9px;font-size:.62rem}

  /* ---------- Kompaktowe karty lokalu ---------- */
  .lokal-grid .lokal-card-media{aspect-ratio:16/9}
  .lokal-grid .lokal-card-body{padding:16px}
  .lokal-grid .lokal-card-body h2{font-size:1.2rem}
  .lokal-grid .lokal-card-addr{font-size:.8rem;margin-top:5px}
  .lokal-grid .lokal-card-head{flex-direction:column;align-items:flex-start;gap:10px}
  .lokal-grid .meta-delivery{--icon:13px;font-size:.68rem;padding:5px 10px;gap:6px}
  .lokal-grid .meta-delivery svg{width:13px;height:13px}
  .lokal-grid .lokal-meta{margin-top:12px;gap:6px;font-size:.8rem}
  .lokal-grid .lokal-meta svg{width:15px;height:15px}
  .lokal-grid .lokal-card-actions{flex-direction:column;gap:8px;padding-top:14px}
  .lokal-grid .lokal-card-actions .btn{width:100%;padding:10px 14px;font-size:.76rem}

  .hero{
    min-height:auto;
    background:var(--hero-bg, linear-gradient(120deg,#141417,#050506)) center / cover no-repeat;
  }
  /* Na waskim ekranie tresc siedzi NA tle, a nie obok — przyciemnienie
     idzie od dolu do gory zamiast od lewej. */
  .hero::before{
    background:linear-gradient(0deg, var(--ink) 4%, rgba(5,5,6,.82) 45%, rgba(5,5,6,.6) 100%);
  }
  .hero-inner{padding:44px 0 64px;max-width:none}
  /* .kebab ma rozmiar bezwzgledny (12rem), wiec nie schodzi razem z h1 —
     kazdy breakpoint musi go zbic osobno, inaczej wyjezdza poza ekran. */
  .hero h1 .kebab{font-size:7.5rem}
  .hero-cta{gap:26px}

  .offer-head{gap:28px;margin-bottom:36px}
  .offer-title{max-width:none}
  .gbadge{flex:1 1 100%;max-width:none;margin-left:0}
  .offer-cta{margin-left:0}

  .about{padding:64px 0 72px}
  .about-grid{grid-template-columns:1fr;gap:44px;padding:0 var(--gutter)}
  .about-collage .col:nth-child(1),.about-collage .col:nth-child(3){margin-top:0}

  .order{padding:64px 0 72px}
  .order-grid{grid-template-columns:1fr;gap:20px}

  .social{padding:68px 0 60px}

  .menu-grid > .swiper-wrapper{grid-template-columns:repeat(2,1fr)}
  .danie-grid{grid-template-columns:1fr;gap:32px}
  .danie-media{aspect-ratio:16/10}

  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-cols .foot-col:last-child{grid-column:auto}
  .page-hero{padding:calc(var(--nav-h) + 48px) 0 44px}
}

/* ============================== <= 768 ============================== */
@media (max-width:768px){
  :root{--nav-h:72px;--section-y:56px;--gutter:18px}

  .brand img{height:44px}

  .strip-grid{grid-template-columns:1fr}
  .widget{border-right:none;border-bottom:1px solid var(--line);padding:28px 20px}
  .widget:last-child{border-bottom:none}

  .hero h1 .kebab{font-size:5.6rem}
  /* column-reverse, bo dopisek ma prowadzic wzrok DO przycisku, a nie wisiec
     pod nim. Kolejnosc w HTML zostaje (przycisk pierwszy), wiec czytnik ekranu
     i Tab dalej trafiaja najpierw na CTA. */
  .hero-cta{flex-direction:column-reverse;align-items:stretch;gap:18px}
  .hero-cta .btn-primary{width:100%}
  .scribble{padding-left:34px}
  /* Strzalka celuje w dol, na przycisk pod spodem — bez obrotu wskazywalaby
     w bok, w puste miejsce. */
  .scribble::before{left:0;transform:translateY(-50%) rotate(-45deg)}

  .offer{padding:var(--section-y) 0 64px}
  .offer-cta{width:100%}
  .offer-cta .btn{width:100%}
  .car-arrow{display:none}

  .post-grid{grid-template-columns:1fr}
  .lokal-grid > .swiper-wrapper{grid-template-columns:1fr}

  .order-form{padding:30px 22px 28px}
  .form-grid{grid-template-columns:1fr}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn-primary{width:100%}
  .contact-side{padding:28px 22px}

  .ig-tile{width:170px;height:170px}
  .ig-rows{gap:12px}
  .ig-track{gap:12px}

  .foot-cols{grid-template-columns:1fr;gap:34px;padding-bottom:40px}
  /* Jedna kolumna = tekst idzie przez cala szerokosc, wiec maska od lewej
     nie ma juz czego chronic — zostaje samo scisnietie krycia. */
  .footer::before{
    opacity:.12;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .credits{grid-template-columns:1fr;text-align:center;gap:14px}
  .credits .to-top{justify-self:center}

  .menu-skladniki{padding:16px 18px}
  .menu-skladniki-lbl{display:block;margin-bottom:2px}
  .menu-lokale{gap:8px}
  .menu-lokal{padding:10px 16px;font-size:.85rem}
  .danie-ceny th,.danie-ceny td{padding:10px 8px;font-size:.88rem}

  .lokal-box,.hours-box{padding:26px 22px}
  .lokal-gallery{columns:2}
  .lokal-box-actions{grid-template-columns:1fr}
  /* „Dowoz niedostepny” ma ~170 px. Na karcie pelnej szerokosci telefonu
     zostawaloby na miasto niecale 100 px i tytul lamalby sie po sylabach —
     ponizej tej szerokosci plakietka schodzi pod adres. */
  .lokal-card-head{flex-direction:column;align-items:flex-start;gap:12px}
  .lb-stage{padding:0 16px 22px}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}

  .order-fab{right:16px;bottom:16px;padding:12px 20px 12px 18px;font-size:.85rem}
}

/* ============================== <= 576 ============================== */
@media (max-width:576px){
  :root{--section-y:48px}

  .eyebrow{font-size:1.6rem}
  .hero-inner{padding:36px 0 52px}
  .hero h1 .kebab{font-size:4.6rem}
  .hero p.lead{margin-bottom:26px}

  .menu-group + .menu-group{margin-top:48px}

  .car-body{padding:18px 18px 20px}
  .car-body h3{font-size:1.55rem}
  .car-price .amount{font-size:2.3rem}
  .car-foot{padding-top:18px}

  .order-banner{padding:30px 24px}
  .order-list li{font-size:.94rem}

  .about-collage{gap:10px}
  .about-collage .col{gap:10px}

  .loc-list{grid-template-columns:1fr;column-gap:0}

  .danie-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .lokal-card-actions{flex-direction:column}
  .lokal-card-actions .btn{width:100%}

  .search-form{flex-direction:column}
  .search-form .btn{width:100%}

  .err-actions{flex-direction:column}
  .err-actions .btn{width:100%}
}

/* ============================== <= 340 ============================== */
@media (max-width:340px){
  :root{--gutter:14px}

  .brand img{height:38px}
  /* Dwie kolumny kompaktowych kart trzymaja sie do 340 px — nizej na kafel
     zostaje ~145 px i nazwa dania lamie sie po sylabach. */
  .menu-grid > .swiper-wrapper{grid-template-columns:1fr}
  .btn{padding:11px 16px;font-size:.8rem}

  /* „RZEMIEŚLNICZY” w Bounches to 13 znakow — przy 2.9rem zostawaly 2 px
     zapasu i wers lamal sie przy najmniejszej odchylce renderowania. */
  .hero h1{font-size:2.35rem}
  .hero h1 .kebab{font-size:3.8rem}
  .car-body h3{font-size:1.35rem}
  .car-price .amount{font-size:2rem}
  .btn-order{padding:7px 7px 7px 14px;font-size:.74rem;gap:9px}
  .btn-order .circ{width:28px;height:28px}

  .ig-tile{width:140px;height:140px}

  .order-fab{padding:11px 14px;gap:7px;font-size:.78rem}
}

/* ====================== telefon w poziomie / niskie okno ====================== */
/* Blok MUSI stac na koncu pliku — zageszcza panel mobilny ustawiony w regule
   <=991, a przy rownej specyficznosci decyduje kolejnosc. Przy 360 px wysokosci
   pelnowymiarowa lista schodzi pod krawedz i menu trzeba przewijac. */
@media (max-width:991px) and (max-height:520px){
  .mobile-menu{padding-top:calc(var(--nav-h) + 4px);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .mm-nav a{padding:9px 2px;font-size:1.2rem}
  .mm-foot{padding-top:14px}
  .mobile-menu .mm-mail{padding:8px 2px;font-size:.88rem}
  .mm-social{padding:6px 2px 2px;gap:8px 18px}
  .mobile-menu .mm-btns{margin-top:10px}
  .mobile-menu .mm-btns a{padding:12px 22px}
}