/* ============================================================
   FOXMORO RESPONSIVE CSS
   Mobile-first checks at 360, 412, 768 and 1440 px.
   Breakpoints and values are copied from the approved prototype.

   PHASE 2 part: top bar, header, mobile drawer, footer, decorations.
   Phase 3 adds the homepage section rules to this file.
============================================================ */

@media (max-width:1100px){
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .f-brand,.f-news{grid-column:span 3}
}

@media (max-width:900px){
  .sec{padding:52px 0}
  .h2{font-size:2.1rem}

  /* top bar: one message at a time */
  .tb-item{display:none}
  .tb-item.on{display:block;margin-inline:auto;text-align:center}
  .topbar .wrap{justify-content:center}

  /* header */
  .nav,.h-icons .hide-m{display:none}
  .h-icons .burger{display:grid}
  .header .wrap{height:64px}
  .logo img{height:40px}
  .search-panel{display:none}

  /* footer */
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand,.f-news{grid-column:1/-1}

  /* decorative makhana: smaller on phones */
  .mk{width:36px!important}
}