@media(max-width:760px){
  /* Dos filas limpias: navegación arriba, buscador abajo */
  header{
    min-height:auto!important;
    padding:7px 10px 8px!important;
    gap:7px!important;
    display:grid!important;
    grid-template-columns:auto auto 1fr auto auto!important;
    grid-template-rows:40px 40px!important;
    align-items:center!important;
    background:#0d0d0d!important;
  }

  /* Logo con más presencia y sin parecer otro botón */
  header .logo,
  header .brandLogo,
  header .headerLogo{
    grid-row:1!important;
    align-self:center!important;
  }
  header .logo img,
  header .brandLogo img,
  header .headerLogo img{
    width:38px!important;
    height:38px!important;
  }

  /* Buscador siempre ocupa toda la segunda fila */
  header .searchWrap,
  header .search,
  header .headerSearch,
  header .liftSearchEnhanced{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  header input[type="search"],
  header #q{
    width:100%!important;
    height:40px!important;
    border-radius:11px!important;
    padding-left:36px!important;
    font-size:11px!important;
  }

  /* Ofertas vuelve a ser legible */
  .offersBtn,#offersBtn,.offerBtn{
    width:auto!important;
    min-width:86px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    gap:5px!important;
    white-space:nowrap!important;
    justify-content:center!important;
  }
  .offersBtn .offerText,
  #offersBtn .offerText,
  .offerBtn .offerText{
    display:inline!important;
    font-size:10px!important;
  }

  /* Acciones superiores uniformes */
  header .iconBtn,
  header .favoritesBtn,
  header .cartBtn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:11px!important;
  }

  /* Menos aire negro entre controles */
  header > *{margin-top:0!important;margin-bottom:0!important}

  /* Si existe un carrito flotante móvil además del header, se oculta */
  .floatingCart,
  .mobileFloatingCart,
  #floatingCart,
  #mobileFloatingCart,
  .cartFloat,
  .floating-cart{
    display:none!important;
  }
}

@media(max-width:430px){
  header{
    padding:6px 7px 7px!important;
    gap:5px!important;
    grid-template-columns:auto auto 1fr auto auto!important;
    grid-template-rows:38px 39px!important;
  }
  header .logo img,
  header .brandLogo img,
  header .headerLogo img{
    width:35px!important;
    height:35px!important;
  }
  .offersBtn,#offersBtn,.offerBtn{
    min-width:76px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 8px!important;
  }
  .offersBtn .offerText,
  #offersBtn .offerText,
  .offerBtn .offerText{font-size:9px!important}

  header .iconBtn,
  header .favoritesBtn,
  header .cartBtn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }
  header input[type="search"],
  header #q{height:39px!important}
}