/* Mobile-only header patch: hamburger + Instagram stacked left in yellow boxes, logo centered and larger */
@media (max-width: 768px) {
  .navInner{
    display:grid !important;
    grid-template-columns: 72px 1fr 72px !important;
    align-items:start !important;
    gap: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* Hide desktop nav links row on mobile */
  .navLinks{ display:none !important; }

  /* Left column container injected by JS */
  .mobileLeft{
    grid-column: 1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap: 6px;
    margin-top: 8px; /* slightly lower */
    padding-left: 10px;
  }
  .mobileBtn{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--yellow);
    border: 1px solid rgba(0,0,0,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
  }
  .mobileBtn:active{ transform: translateY(1px); }

  /* Center the brand/logo */
  .brand{
    grid-column: 2;
    align-items:center !important;
    justify-self:center !important;
    text-align:center !important;
    margin: 0 !important;
  }
  .brandMark{
    width: min(165px, 52vw) !important;
    height: min(165px, 52vw) !important;
  }

  /* Move IG under hamburger; keep as yellow box */
  .igNav{
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
  }
  .igText{ display:none !important; } /* user requested remove Follow the fresh */
  .igIcon{
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: var(--yellow) !important;
  }

  /* Dropdown menu */
  .mobileMenu{
    position:absolute;
    left: 10px;
    top: 74px;
    z-index: 50;
    background: rgba(75,47,29,.96);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 10px;
    display:none;
    min-width: 220px;
    box-shadow: 0 16px 44px rgba(0,0,0,.28);
  }
  .mobileMenu a{
    display:block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 950;
    color: var(--brown);
    background: var(--yellow);
    border: 1px solid rgba(0,0,0,.1);
    margin-bottom: 8px;
  }
  .mobileMenu a:last-child{ margin-bottom: 0; }
  .mobileMenu.show{ display:block; }
}

/* Safety: never allow the app root to remain hidden on mobile */
#root{ display:block !important; }

/* Hide the desktop "Coming Soon" banner on mobile */
@media (max-width: 768px){
  .topBanner{ display:none !important; }
}
/* Safety: never hide the app */
#root { display: block !important; }

/* If your instagram icon is an SVG, ensure it isn't forced to monochrome */
.instagram svg { filter: none !important; }
.instagram img { filter: none !important; }

/* --- Mobile button icon sizing (keep yellow box size, make icons bigger) --- */
@media (max-width: 768px){
  .mobileButton svg{ width:26px; height:26px; }
  .mobileButton svg.igSvg{ width:28px; height:28px; }
}