/* ════════════════════════════════════════════════════════════════════
   MOBILE FLUID — v313.154.123 (zero gap aggressive)
   ────────────────────────────────────────────────────────────────────
   Strategia AllTrails reale + reset aggressivo di wrapper potenziali:
     - Mappa full-viewport (inset:0)
     - Body+html background = colore mappa Leaflet (#dcdfe4) → niente
       bleed bianco mai visibile, qualunque sia il wrapper
     - Banner top floating con backdrop blur
     - Reset top a 0 su qualsiasi wrapper che possa avere padding-top
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  /* Body / html: colore base = mappa (no bleed bianco visibile mai) */
  html, body {
    background: #dcdfe4 !important;
    background-color: #dcdfe4 !important;
  }

  /* Mappa: inset 0, layer base, full viewport */
  html body #map,
  html body .leaflet-container,
  html body #mapWrap,
  html body .map-wrap,
  html body #mapContainer {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
  }
  /* Reset di tutti i potenziali wrapper main */
  html body main,
  html body #app,
  html body #main,
  html body .app-shell,
  html body .map-shell,
  html body #archeo-app {
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
  }

  /* SEARCH BAR (#suBar) — floating sopra la mappa */
  html body #suBar {
    top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    z-index: 4000 !important;
  }

  /* TOPBAR lingue/meteo — visibile compatta */
  html body .topbar {
    display: flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 50px) !important;
    left: 8px !important;
    right: 8px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    background: rgba(15, 20, 25, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    z-index: 900 !important;
  }
  html body .topbar .lang-btn {
    height: 20px !important;
    min-width: 20px !important;
    padding: 1px 4px !important;
    font-size: 9.5px !important;
  }
  html body .topbar #weatherWidget,
  html body .topbar .weather-chip {
    height: 20px !important;
    padding: 2px 4px !important;
    font-size: 9.5px !important;
  }
  html body .topbar #themeToggle,
  html body .topbar .theme-toggle {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  html body .topbar .brand-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
    line-height: 22px !important;
  }
  html body .topbar .brand h1 { display: none !important; }
  html body .topbar .trip-topbar-btn { display: none !important; }

  /* TIER FILTER BAR floating */
  html body #am-tier-filter-bar {
    top: calc(env(safe-area-inset-top, 0px) + 84px) !important;
    padding: 3px 5px !important;
    gap: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  }
  html body #am-tier-filter-bar.am-tier-lifted {
    top: calc(env(safe-area-inset-top, 0px) + 84px) !important;
  }
  html body .am-tier-chip {
    padding: 5px 9px !important;
    min-height: 28px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* Badge versione minuscolo */
  html body #__archeoVersionBadge,
  html body .__archeo_version_badge,
  html body [id*="versionBadge"],
  html body [class*="version-badge"] {
    font-size: 9px !important;
    padding: 1px 4px !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 0.65 !important;
  }

  /* Badge counter "📌 N" top-right del FAB */
  html body .archeo-pill,
  html body .progress-pill,
  html body .pin-counter,
  html body .am-pin-counter,
  html body #pinCount,
  html body .reported-counter,
  html body .pinPill,
  html body [class*="locate"] .archeo-pill,
  html body [class*="target"] .archeo-pill,
  html body .fab-group .archeo-pill,
  html body .fab-group .progress-pill {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    transform: scale(0.78) !important;
    transform-origin: top right !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  /* PERF GPU layer hints */
  html body .leaflet-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  html body .leaflet-tile { will-change: transform; }
}

/* iPhone SE 1 (≤380px) */
@media (max-width: 380px) {
  html body .topbar {
    top: calc(env(safe-area-inset-top, 0px) + 48px) !important;
    height: 26px !important;
    min-height: 26px !important;
  }
  html body #am-tier-filter-bar {
    top: calc(env(safe-area-inset-top, 0px) + 80px) !important;
  }
  html body .am-tier-chip {
    padding: 4px 7px !important;
    min-height: 26px !important;
    font-size: 10.5px !important;
  }
}

/* v119: 1 solo banner aggiornamento */
html body #archeo-update-toast,
html body #__archeo_update_banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   v128: Fix tile sovrapposte durante zoom
   ────────────────────────────────────────────────────────────────────
   Su mobile, durante lo zoom Leaflet può mantenere multiple tile layer
   visibili contemporaneamente (vecchio layer non ancora rimosso, nuovo
   in caricamento). Forza opacity completa al tile attivo e nascondi
   le tile "loading" che restano stuck.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  html body .leaflet-tile-loaded {
    opacity: 1 !important;
    transition: none !important;
  }
  html body .leaflet-tile-pane {
    opacity: 1 !important;
  }
  /* Tile in fase di loading: nascosta finché caricata (no double-render) */
  html body .leaflet-tile:not(.leaflet-tile-loaded) {
    visibility: hidden !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v153: TOUCH POLISH MOBILE — fluidità extra
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Tutti i bottoni con touch-action manipulation (no 300ms delay) */
  html body button,
  html body a,
  html body [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* Mappa: GPU layer rinforzato + smooth panning */
  html body .leaflet-container {
    touch-action: pan-x pan-y pinch-zoom;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }
  /* Card carosello smooth scroll su touch */
  html body .aef-card-photos {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }
  /* Hit area pin: minimo 36x36 per tap accurato */
  html body .leaflet-marker-icon {
    min-width: 32px;
    min-height: 32px;
  }
  /* Detail scroll smooth */
  html body #detail {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    will-change: scroll-position;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v154: REFINE BANNER TOP MOBILE (topbar + tier chips)
   Stessa grafica generale, leggibilità + estetica + UX migliori.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* TOPBAR lingue/meteo — più ariosa e leggibile, stesso look dark */
  /* v118-44-c10 Cluster 10: tap target controlli 40x40 (WCAG 2.5.8 AA + buffer),
     topbar height 46 per contenerli con padding 3, top env+60 (gap 6 da suBar). */
  html body .topbar {
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 3px 10px !important;
    border-radius: 14px !important;
    gap: 6px !important;
    background: rgba(15, 20, 25, 0.86) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.18);
  }
  html body .topbar .lang-btn {
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.65) !important;
    background: transparent !important;
    transition: background .15s, color .15s;
  }
  html body .topbar .lang-btn:hover,
  html body .topbar .lang-btn.is-active,
  html body .topbar .lang-btn[aria-pressed="true"] {
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
  }
  html body .topbar #weatherWidget,
  html body .topbar .weather-chip {
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    line-height: 40px !important;
    letter-spacing: 0.2px;
  }
  html body .topbar #themeToggle,
  html body .topbar .theme-toggle {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.10) !important;
  }
  html body .topbar .brand-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    line-height: 40px !important;
  }

  /* TIER FILTER BAR — chip più leggibili e tap-friendly */
  /* v118-44-c10 Cluster 10: spostato 94→112 per nuova topbar h46 (env+60..106). */
  html body #am-tier-filter-bar {
    top: calc(env(safe-area-inset-top, 0px) + 112px) !important;
    padding: 5px 7px !important;
    gap: 5px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.10) !important;
    border: 1px solid rgba(0,0,0,0.04);
  }
  html body #am-tier-filter-bar.am-tier-lifted {
    top: calc(env(safe-area-inset-top, 0px) + 112px) !important;
  }
  html body .am-tier-chip {
    padding: 6px 12px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    color: #4a4a4a !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    transition: background .15s, color .15s, border-color .15s;
  }
  html body .am-tier-chip.is-active {
    background: #ffffff !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.10);
  }
  html body .am-tier-chip-emoji {
    font-size: 13px !important;
    margin-right: 1px;
  }
  html body .am-tier-chip-count {
    font-size: 10.5px !important;
    padding: 1px 6px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,0.06) !important;
    color: #6a6a6a !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
  }
  html body .am-tier-chip.is-active .am-tier-chip-count {
    background: rgba(0,0,0,0.08) !important;
    color: currentColor !important;
  }

  /* Mappa shift down per nuovi top: search env+8..54 + topbar env+60..106 + tier env+112..144 → map env+150 */
  /* v118-44-c10 Cluster 10: 130→150 per nuova topbar h46. */
  html body #map {
    top: calc(env(safe-area-inset-top, 0px) + 150px) !important;
  }
}

/* Schermi extra-small (≤380px): compatti ma sempre leggibili */
/* v118-44-c10 Cluster 10: topbar h44 + controlli 38x38 (iPhone SE 1 320px ok,
   weatherWidget nascosto da @≤430). Catasta: topbar env+58..102, tier env+108..138, map env+144. */
@media (max-width: 380px) {
  html body .topbar {
    top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 3px 8px !important;
    gap: 4px !important;
  }
  html body .topbar .lang-btn {
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }
  html body .topbar #weatherWidget,
  html body .topbar .weather-chip {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    line-height: 38px !important;
  }
  html body .topbar #themeToggle,
  html body .topbar .theme-toggle {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  html body .topbar .brand-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
    line-height: 38px !important;
  }
  html body #am-tier-filter-bar {
    top: calc(env(safe-area-inset-top, 0px) + 108px) !important;
  }
  html body #map {
    top: calc(env(safe-area-inset-top, 0px) + 144px) !important;
  }
  html body .am-tier-chip {
    padding: 5px 10px !important;
    min-height: 30px !important;
    font-size: 11.5px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v155: nasconde topbar + tier bar QUANDO un sito è aperto (detail open)
   3 classi diverse usate da differenti moduli:
     - body.archeo-detail-open  (archeo-detail-shell.js, archeo-mobile-fix.js)
     - body.detail-open         (alcuni moduli legacy)
     - body.am-detail-open      (app-extensions.js)
   Coperti tutti.
   ════════════════════════════════════════════════════════════════════ */
html body.archeo-detail-open .topbar,
html body.detail-open .topbar,
html body.am-detail-open .topbar,
html body.archeo-detail-open #am-tier-filter-bar,
html body.detail-open #am-tier-filter-bar,
html body.am-detail-open #am-tier-filter-bar,
html body.archeo-detail-open #suBar,
html body.detail-open #suBar,
html body.am-detail-open #suBar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility .2s ease !important;
}

/* ════════════════════════════════════════════════════════════════════
   v164: nasconde tooltip onboarding ("Qualsiasi coordinata…") quando
   admin bar è visibile per evitare sovrapposizione fastidiosa.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Quando admin bar visibile, nascondi tooltip onboarding sovrapposto */
  body:has(#v89AdminBar:not([hidden])) [class*="onb-card"][style*="display: block"]:not(.archeo-onb-card),
  body:has(#v109AdminLiveBar:not([hidden])) [class*="onboarding"]:not(.archeo-onb-card),
  body:has(#v89AdminBar) .onb-card,
  body:has(#v109AdminLiveBar) .onb-card {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease;
  }

  /* Banner istruzionali "🗺️ Qualsiasi coordinata..." con z-index basso
     così non si sovrappongono ai banner top floating */
  body.archeo-detail-open .onb-card,
  body.am-detail-open .onb-card {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v165: ONBOARDING fluido elegante consistente
   - smooth fade transition tra schermate
   - typografia uniforme
   - animazione next button
   ════════════════════════════════════════════════════════════════════ */
.archeo-onb-card {
  animation: aefOnbFadeIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes aefOnbFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.archeo-onb-next {
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease !important;
}
.archeo-onb-dot {
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  cursor: default !important; /* niente skip caotico cliccando i dot */
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   v166: search bar non sovrapposta a tasto "📍 Vicino" su web
   La topbar mobile/desktop ha bottoni .nearby-btn / weather / lang sulla
   destra. Limito il right del #suBar così non li copre.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  body.aef-feed-on #suBar {
    left: 400px !important;
    right: 220px !important;  /* lascia spazio per Vicino + Organizza + lingue */
    width: auto !important;
    max-width: calc(100vw - 620px) !important;
  }
}
@media (min-width: 1100px) {
  body.aef-feed-on #suBar {
    left: 440px !important;
    right: 240px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v1.18.16 MOBILE MAP AUDIT — mappa piena + controlli leggibili
   ----------------------------------------------------------------
   La mappa resta full viewport. Search/topbar diventano controlli
   flottanti sopra la mappa, senza rubare 120-130px all'area esplorabile.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body #map,
  html body .leaflet-container {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  html body #archeoSearchShell {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    z-index: 8900 !important;
  }

  html body .am-search-row {
    gap: 8px !important;
    align-items: center !important;
  }

  html body .am-search-box,
  html body .am-nearby-pill {
    height: 46px !important;
    min-height: 46px !important;
    box-shadow: 0 8px 22px rgba(20,20,20,.16) !important;
  }

  html body .am-search-box {
    padding-left: 14px !important;
    padding-right: 5px !important;
    min-width: 0 !important;
  }

  html body #amSearchInput {
    font-size: 16px !important;
  }

  html body .am-filter-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }

  html body .am-nearby-pill {
    padding: 0 14px !important;
    flex: 0 0 auto !important;
  }

  /* v118-44-c10 Cluster 10: collassato — dimensioni/padding/gap/border-radius
     dichiarate da blocco v154 (SSOT). Qui restano SOLO le edge layout props. */
  html body .topbar {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    overflow: hidden !important;
    justify-content: center !important;
    z-index: 8600 !important;
  }

  html body .topbar .brand {
    flex: 0 0 auto !important;
  }

  /* v118-44-c10 Cluster 10: 112→158 per nuova topbar h46+tier-bar h32. */
  html body .leaflet-control-zoom {
    margin-top: calc(env(safe-area-inset-top, 0px) + 158px) !important;
    margin-left: 10px !important;
  }

  html body #petalFab {
    width: 58px !important;
    height: 58px !important;
    line-height: 58px !important;
    font-size: 27px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
}

@media (max-width: 430px) {
  html body .am-nearby-pill {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
  }
  html body .am-nearby-pill .am-nearby-label {
    display: none !important;
  }
  html body .topbar #weatherWidget,
  html body .topbar .weather-chip,
  html body .topbar #profileGoogleBtn,
  html body .topbar .profile-chip,
  html body .topbar .user-chip {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v1.18.23 BUG2 fix DEFINITIVO — gallery foto: scroll verticale
   ────────────────────────────────────────────────────────────────────
   Problema: la regola "html body button { touch-action: manipulation }"
   sopra (riga ~217) si applica anche ai <button class=ams-tile-img-btn>
   dentro le gallery orizzontali del detail panel. "manipulation" abilita
   pan-x + pan-y + pinch-zoom sul button → la gesture verticale viene
   gestita dal button (che non scorre) e NON propaga al #detail.
   Risultato: l'utente puo' scorrere la tendina solo dai bianchi fra le
   foto, mai toccando una foto.

   Fix: applicare touch-action: pan-y A TUTTI i discendenti delle gallery.
   Su mobile il gesto verticale deve sempre far scorrere la tendina; il tap
   sulla foto resta disponibile per il lightbox.

   Risultato: dentro le gallery il pan verticale resta del browser e scorre
   #detail; il tap sulla foto continua a funzionare.
   ════════════════════════════════════════════════════════════════════ */
html body #detail .ams-scroll-gallery,
html body #detail .ams-scroll-gallery *,
html body #detail .ad2-gallery,
html body #detail .ad2-gallery *,
html body #detail .am-full-photo-grid,
html body #detail .am-full-photo-grid *,
html body #detail .acc-photo-grid,
html body #detail .acc-photo-grid *,
html body #detail .ad2-similar,
html body #detail .ad2-similar *,
html body .ad2-root .ad2-gallery,
html body .ad2-root .ad2-gallery *,
html body .ad2-root .ad2-similar,
html body .ad2-root .ad2-similar * {
  touch-action: pan-y pinch-zoom !important;
  -ms-touch-action: pan-y !important;
}

/* ════════════════════════════════════════════════════════════════════
   v1.18.24 — bottom-sheet mobile canonica
   ------------------------------------------------------------------
   Alcuni CSS legacy avevano trasformato #detail in un pannello fisso
   full-height. Qui ripristiniamo il comportamento a tendina: top
   controllato da --archeo-detail-top, sheet scrollabile e handle sempre
   disponibile. Il desktop resta invariato.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html body #detail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--archeo-detail-top, 50dvh) !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - var(--archeo-detail-top, 50dvh)) !important;
    min-height: 5dvh !important;
    max-height: 95dvh !important;
    border-radius: 22px 22px 0 0 !important;
    background: #f9f5ec !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    transform: translateY(105%) !important;
    transition:
      transform .32s cubic-bezier(.2,.82,.24,1),
      top .36s cubic-bezier(.34,1.2,.64,1),
      height .36s cubic-bezier(.34,1.2,.64,1) !important;
    touch-action: pan-y pinch-zoom !important;
  }

  html body #detail.open,
  html body #detail[class*="open"] {
    transform: translateY(0) !important;
  }

  html body.archeo-detail-snapping #detail,
  html body.archeo-detail-snapping #__ads_drag {
    transition:
      top .36s cubic-bezier(.34,1.56,.64,1),
      height .36s cubic-bezier(.34,1.56,.64,1) !important;
  }

  html body #__ads_drag {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 30px !important;
    z-index: 90 !important;
    display: block !important;
    cursor: grab !important;
    touch-action: none !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  html body #__ads_drag::after,
  html body #detail::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 9px !important;
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: rgba(120, 92, 66, .34) !important;
  }

  html body #detail .ads-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #f9f5ec !important;
  }
}