/* =============================================================
   PeekABaby.ca  —  Responsive
   Mobile-first refinements & breakpoints
   ============================================================= */

@media(max-width:1100px){
  .f-top{grid-template-columns:1fr 1fr;gap:38px}
  .drop.wide{min-width:420px}
}

@media(max-width:980px){
  .section{padding:78px 0}
  .section-sm{padding:56px 0}
  .menu{display:none}
  .burger{display:flex}
  .nav-cta .btn:not(.burger-wrap){display:none}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .cta-banner{padding:50px 32px}
  .hero-split{grid-template-columns:1fr!important}
  .split-2{grid-template-columns:1fr!important}
  .split-media{order:-1}
}

@media(max-width:760px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:32px}
  .f-bottom{flex-direction:column;text-align:center}
  .stats{grid-template-columns:1fr 1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  .h-xl{font-size:clamp(2.1rem,8vw,2.9rem)}
  .form-card{padding:26px}
  .cta-banner{padding:42px 24px}
  .section{padding:62px 0}
  .wrap,.wrap-narrow{padding:0 20px}
  .phero{padding:52px 0 46px}
  .footer{padding-top:58px}
}

@media(max-width:520px){
  .stat .num{font-size:2.2rem}
  .pkg .price{font-size:2.5rem}
  .gal-grid{grid-template-columns:1fr}
  .chat-win{right:12px;left:12px;width:auto;bottom:12px}
  .fab-wa{left:14px;bottom:14px;width:54px;height:54px}
  .fab-wa svg{width:28px;height:28px}
  .chat-fab{right:14px;bottom:14px}
  .to-top{right:14px;bottom:80px}
  .acc-q{padding:18px 18px;font-size:.98rem}
  .acc-a div{padding:0 18px 20px}
  .card{padding:24px}
}

/* ---- topbar responsive (class-based, no inline-style conflicts) ---- */
@media(max-width:1024px){ .tb-hours{display:none} }
@media(max-width:860px){ .tb-email{display:none} .tb-left,.tb-right{gap:14px} }
@media(max-width:600px){
  .tb-loc{display:none}
  .topbar{font-size:.76rem}
  .topbar .wrap{height:38px;gap:10px}
}
@media(max-width:430px){
  .tb-social{display:none}
  .topbar .wrap{justify-content:center}
}

/* ---- prevent horizontal overflow & keep hero badges on-screen ---- */
@media(max-width:620px){
  .sf-1{left:6px}
  .sf-2{right:6px}
  .scan-float{padding:10px 13px;font-size:.78rem}
  .scan-float .ci{width:32px;height:32px}
}
@media(max-width:400px){
  .scan-float{transform:scale(.9)}
  .sf-1{left:0;top:14px}
  .sf-2{right:0;bottom:48px}
}